From 9d111cc9d0a1e092aa04f9106daac421fe6213e7 Mon Sep 17 00:00:00 2001
From: Jordan Phillips <jordypee27@gmail.com>
Date: Tue, 23 Jul 2024 16:43:48 +1000
Subject: [PATCH] fix: numerious styling inconsistencies (#159)

---
 packages/react/src/components/menu/Menu.tsx   |  4 +-
 .../src/components/menu/use-menu.hook.ts      |  4 +-
 .../src/components/navigation/Navigation.tsx  |  6 +--
 .../src/components/select/SelectOption.tsx    | 24 ++++++++-
 .../src/components/select/SelectValue.tsx     |  2 +-
 packages/theme/src/components/breadcrumb.ts   |  2 +-
 packages/theme/src/components/button.ts       | 51 ++++++++++++++++---
 packages/theme/src/components/chip.ts         |  5 +-
 packages/theme/src/components/input.ts        | 10 ++--
 packages/theme/src/components/menu.ts         | 10 ++--
 packages/theme/src/components/navigation.ts   | 19 ++++++-
 packages/theme/src/components/select.ts       | 17 ++++---
 packages/theme/src/components/typography.ts   |  2 +-
 13 files changed, 117 insertions(+), 39 deletions(-)

diff --git a/packages/react/src/components/menu/Menu.tsx b/packages/react/src/components/menu/Menu.tsx
index 937e877..532a90c 100644
--- a/packages/react/src/components/menu/Menu.tsx
+++ b/packages/react/src/components/menu/Menu.tsx
@@ -24,11 +24,11 @@ type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE
 const Component: ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
   props: ComponentProps<TElement>
 ) => {
-  const { as, children, className, size, status, ...rest } = props
+  const { as, children, className, size, color, ...rest } = props
 
   const Element = as ?? MenuTrigger
 
-  const context = useMenu({ size, status })
+  const context = useMenu({ size, color })
 
   const component = React.useMemo<Omit<MenuTriggerProps, 'children'>>(
     () => ({
diff --git a/packages/react/src/components/menu/use-menu.hook.ts b/packages/react/src/components/menu/use-menu.hook.ts
index 3bea915..82f563e 100644
--- a/packages/react/src/components/menu/use-menu.hook.ts
+++ b/packages/react/src/components/menu/use-menu.hook.ts
@@ -11,9 +11,9 @@ type UseMenuProps = MenuVariantProps
 type UseMenuReturn = ReturnType<typeof useMenu>
 
 export const useMenu = (props: UseMenuProps) => {
-  const { size, status } = props
+  const { size, color } = props
 
-  const slots = React.useMemo(() => menu({ size, status }), [size, status])
+  const slots = React.useMemo(() => menu({ size, color }), [size, color])
 
   return {
     slots,
diff --git a/packages/react/src/components/navigation/Navigation.tsx b/packages/react/src/components/navigation/Navigation.tsx
index defe8b1..bb8a4bb 100644
--- a/packages/react/src/components/navigation/Navigation.tsx
+++ b/packages/react/src/components/navigation/Navigation.tsx
@@ -38,16 +38,16 @@ const Component: ComponentType = React.forwardRef(
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
-        className: context.slots.navigation({ className }),
+        className: context.slots.navigation(),
         ...rest,
       }),
-      [className, context.slots, rest]
+      [context.slots, rest]
     )
 
     return (
       <NavigationContext.Provider value={context}>
         <Element {...component} ref={ref}>
-          <div className={context.slots.wrapper()}>{children}</div>
+          <div className={context.slots.wrapper({ className })}>{children}</div>
         </Element>
       </NavigationContext.Provider>
     )
diff --git a/packages/react/src/components/select/SelectOption.tsx b/packages/react/src/components/select/SelectOption.tsx
index 3783e9b..90ce958 100644
--- a/packages/react/src/components/select/SelectOption.tsx
+++ b/packages/react/src/components/select/SelectOption.tsx
@@ -41,7 +41,29 @@ const Component: ComponentType = React.forwardRef(
 
     return (
       <Element {...component} ref={ref}>
-        {children}
+        {({ isSelected }: { isSelected: boolean }) => (
+          <>
+            {children}
+
+            {isSelected && (
+              <svg
+                aria-hidden="true"
+                className={slots.check()}
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1"
+                viewBox="0 0 24 24"
+                width="24"
+              >
+                <path d="M0 0h24v24H0z" fill="none" stroke="none" />
+                <path d="M5 12l5 5l10 -10" />
+              </svg>
+            )}
+          </>
+        )}
       </Element>
     )
   }
diff --git a/packages/react/src/components/select/SelectValue.tsx b/packages/react/src/components/select/SelectValue.tsx
index ece75d9..9e2b6f1 100644
--- a/packages/react/src/components/select/SelectValue.tsx
+++ b/packages/react/src/components/select/SelectValue.tsx
@@ -35,7 +35,7 @@ const Component: ComponentType = React.forwardRef(
 
     const component = React.useMemo<SelectValueProps<TData>>(
       () => ({
-        className: slots.placeholder({ className: className?.toString() }),
+        className: slots.value({ className: className?.toString() }),
         ...rest,
       }),
       [className, rest, slots]
diff --git a/packages/theme/src/components/breadcrumb.ts b/packages/theme/src/components/breadcrumb.ts
index b9b8680..380afda 100644
--- a/packages/theme/src/components/breadcrumb.ts
+++ b/packages/theme/src/components/breadcrumb.ts
@@ -7,7 +7,7 @@ export const breadcrumb = tv({
     item: [
       'group',
       'flex items-center',
-      'text-title',
+      'text-inherit',
       'has-[:current]:opacity-80',
       'has-[:disabled]:opacity-50 has-[:disabled]:pointer-events-none',
     ],
diff --git a/packages/theme/src/components/button.ts b/packages/theme/src/components/button.ts
index bce16b2..1c38150 100644
--- a/packages/theme/src/components/button.ts
+++ b/packages/theme/src/components/button.ts
@@ -9,31 +9,68 @@ export const button = tv({
       'border',
       'transition-all duration-200',
       'focus:outline-dashed focus:outline-offset-2 focus:outline-1',
+      'data-[pressed=true]:outline-dashed data-[pressed=true]:outline-offset-2 data-[pressed=true]:outline-1',
       'disabled:opacity-50',
     ],
   },
   variants: {
     color: {
       transparent: {
-        button: ['text-white', 'border-transparent', 'focus:outline-shark'],
+        button: ['text-white', 'border-transparent', 'focus:outline-shark', 'data-[pressed=true]:outline-shark'],
       },
       neutral: {
-        button: ['text-white', 'bg-shark/80 hover:bg-shark', 'border-shark', 'focus:outline-shark'],
+        button: [
+          'text-white',
+          'bg-shark/80 hover:bg-shark',
+          'border-shark',
+          'focus:outline-shark',
+          'data-[pressed=true]:outline-shark',
+        ],
       },
       brand: {
-        button: ['text-white', 'bg-brand/80 hover:bg-brand', 'border-brand', 'focus:outline-brand'],
+        button: [
+          'text-white',
+          'bg-brand/80 hover:bg-brand',
+          'border-brand',
+          'focus:outline-brand',
+          'data-[pressed=true]:outline-brand',
+        ],
       },
       success: {
-        button: ['text-white', 'bg-success/80 hover:bg-success', 'border-success', 'focus:outline-success'],
+        button: [
+          'text-white',
+          'bg-success/80 hover:bg-success',
+          'border-success',
+          'focus:outline-success',
+          'data-[pressed=true]:outline-success',
+        ],
       },
       info: {
-        button: ['text-white', 'bg-info/80 hover:bg-info', 'border-info', 'focus:outline-info'],
+        button: [
+          'text-white',
+          'bg-info/80 hover:bg-info',
+          'border-info',
+          'focus:outline-info',
+          'data-[pressed=true]:outline-info',
+        ],
       },
       warning: {
-        button: ['text-white', 'bg-warning/80 hover:bg-warning', 'border-warning', 'focus:outline-warning'],
+        button: [
+          'text-white',
+          'bg-warning/80 hover:bg-warning',
+          'border-warning',
+          'focus:outline-warning',
+          'data-[pressed=true]:outline-warning',
+        ],
       },
       danger: {
-        button: ['text-white', 'bg-danger/80 hover:bg-danger', 'border-danger', 'focus:outline-danger'],
+        button: [
+          'text-white',
+          'bg-danger/80 hover:bg-danger',
+          'border-danger',
+          'focus:outline-danger',
+          'data-[pressed=true]:outline-danger',
+        ],
       },
     },
     size: {
diff --git a/packages/theme/src/components/chip.ts b/packages/theme/src/components/chip.ts
index fdc9c2b..cb97f33 100644
--- a/packages/theme/src/components/chip.ts
+++ b/packages/theme/src/components/chip.ts
@@ -8,7 +8,7 @@ export const chip = tv({
   variants: {
     color: {
       neutral: {
-        chip: ['text-subtitle', 'bg-shark/20', 'border-subtitle'],
+        chip: ['text-subtitle', 'bg-shark/20', 'border-partition'],
       },
       brand: {
         chip: ['text-brand', 'bg-brand/20', 'border-brand'],
@@ -25,6 +25,9 @@ export const chip = tv({
       danger: {
         chip: ['text-danger', 'bg-danger/20', 'border-danger'],
       },
+      amber: {
+        chip: ['text-amber-500', 'bg-amber-500/20', 'border-amber-500'],
+      },
       emerald: {
         chip: ['text-emerald-500', 'bg-emerald-500/20', 'border-emerald-500'],
       },
diff --git a/packages/theme/src/components/input.ts b/packages/theme/src/components/input.ts
index d38cfaf..4d46e01 100644
--- a/packages/theme/src/components/input.ts
+++ b/packages/theme/src/components/input.ts
@@ -28,23 +28,23 @@ export const input = tv({
         group: ['text-info', 'border-info', 'focus-within:outline-info'],
       },
       warning: {
-        group: ['text-warning', 'border-warning', 'focus-within:outline-danger'],
+        group: ['text-warning', 'border-warning', 'focus-within:outline-warning'],
       },
       danger: {
-        group: ['text-danger', 'border-danger', 'focus-within:outline-warning'],
+        group: ['text-danger', 'border-danger', 'focus-within:outline-danger'],
       },
     },
     size: {
       sm: {
         group: ['text-sm'],
-        input: ['h-8 min-h-8', 'placeholder:text-sm'],
+        input: ['min-h-8', 'placeholder:text-sm'],
       },
       md: {
         group: ['text-base'],
-        input: ['h-10 min-h-10', 'placeholder:text-base'],
+        input: ['min-h-10', 'placeholder:text-base'],
       },
       lg: {
-        group: ['h-12 min-h-12', 'text-lg'],
+        group: ['min-h-12', 'text-lg'],
         input: ['placeholder:text-lg'],
       },
     },
diff --git a/packages/theme/src/components/menu.ts b/packages/theme/src/components/menu.ts
index 2e7ae07..1aab88d 100644
--- a/packages/theme/src/components/menu.ts
+++ b/packages/theme/src/components/menu.ts
@@ -4,10 +4,10 @@ import { tv } from 'tailwind-variants'
 export const menu = tv({
   slots: {
     menu: [],
-    popover: ['bg-foreground', 'border border-solid border-partition', 'rounded-md'],
-    list: ['flex flex-col gap-1', 'p-1', 'outline-none'],
+    popover: ['bg-foreground', 'border border-solid border-partition', 'rounded-md', 'p-1'],
+    list: ['flex flex-col gap-1', 'outline-none'],
     item: [
-      'flex tems-center',
+      'flex flex-row items-center gap-2',
       'px-2 py-1',
       'rounded-md',
       'cursor-pointer',
@@ -36,7 +36,7 @@ export const menu = tv({
         item: ['text-xl'],
       },
     },
-    status: {
+    color: {
       neutral: {
         item: ['hover:bg-middleground'],
       },
@@ -59,7 +59,7 @@ export const menu = tv({
   },
   defaultVariants: {
     size: 'md',
-    status: 'neutral',
+    color: 'neutral',
   },
 })
 
diff --git a/packages/theme/src/components/navigation.ts b/packages/theme/src/components/navigation.ts
index f0fad39..e09257b 100644
--- a/packages/theme/src/components/navigation.ts
+++ b/packages/theme/src/components/navigation.ts
@@ -4,9 +4,9 @@ import { tv } from 'tailwind-variants'
 export const navigation = tv({
   slots: {
     navigation: ['relative', 'flex', 'text-sm text-content', 'z-10'],
-    wrapper: ['relative', 'flex gap-3 md:gap-6', 'bg-middleground', 'z-10'],
+    wrapper: ['relative', 'flex gap-3 md:gap-4', 'bg-middleground', 'z-10'],
     brand: ['flex flex-row justify-center flex-nowrap shrink-0'],
-    segment: ['flex gap-3', 'list-none'],
+    segment: ['flex gap-2', 'list-none'],
     title: ['font-semibold'],
     item: ['flex', 'select-none', 'transition-all duration-200', '[&_svg]:hover:text-brand'],
     divider: ['bg-partition', 'border-partition'],
@@ -47,6 +47,7 @@ export const navigation = tv({
       },
       md: {},
       lg: {},
+      xl: {},
     },
     variant: {
       none: {},
@@ -89,6 +90,13 @@ export const navigation = tv({
         wrapper: ['h-20'],
       },
     },
+    {
+      size: 'xl',
+      orientation: 'horizontal',
+      class: {
+        wrapper: ['h-24'],
+      },
+    },
     {
       size: 'sm',
       orientation: 'vertical',
@@ -110,6 +118,13 @@ export const navigation = tv({
         wrapper: ['w-72'],
       },
     },
+    {
+      size: 'xl',
+      orientation: 'vertical',
+      class: {
+        wrapper: ['w-80'],
+      },
+    },
 
     // isBordered + Orientation
     {
diff --git a/packages/theme/src/components/select.ts b/packages/theme/src/components/select.ts
index 0b9b2e8..d9c3932 100644
--- a/packages/theme/src/components/select.ts
+++ b/packages/theme/src/components/select.ts
@@ -13,13 +13,14 @@ export const select = tv({
       'cursor-pointer',
       'has-[:disabled]:opacity-50',
     ],
-    placeholder: [],
+    value: ['flex items-center gap-2'],
     button: ['flex flex-row items-center justify-between', 'w-full', 'p-1.5', 'focus:outline-none'],
     icon: ['shrink-0'],
+    check: ['text-inherit', 'h-5 w-5', 'ml-auto', 'shrink-0'],
     popover: ['bg-foreground', 'border border-solid border-partition', 'rounded-md', 'w-[--trigger-width]'],
     list: ['flex flex-col gap-1', 'p-1', 'outline-none'],
     option: [
-      'flex tems-center',
+      'flex items-center gap-2',
       'px-2 py-1',
       'rounded-md',
       'cursor-pointer',
@@ -50,27 +51,27 @@ export const select = tv({
     status: {
       neutral: {
         select: ['border-partition'],
-        option: ['hover:bg-middleground'],
+        option: ['hover:bg-middleground', 'data-[selected=true]:bg-middleground'],
       },
       brand: {
         select: ['border-brand'],
-        option: ['hover:bg-brand/20'],
+        option: ['hover:bg-brand/20', 'data-[selected=true]:bg-brand/20'],
       },
       success: {
         select: ['border-success'],
-        option: ['hover:bg-success/20'],
+        option: ['hover:bg-success/20', 'data-[selected=true]:bg-success/20'],
       },
       info: {
         select: ['border-info'],
-        option: ['hover:bg-info/20'],
+        option: ['hover:bg-info/20', 'data-[selected=true]:g-info/20'],
       },
       warning: {
         select: ['border-warning'],
-        option: ['hover:bg-warning/20'],
+        option: ['hover:bg-warning/20', 'data-[selected=true]:bg-warning/20'],
       },
       danger: {
         select: ['border-danger'],
-        option: ['hover:bg-danger/20'],
+        option: ['hover:bg-danger/20', 'data-[selected=true]:bg-danger/20'],
       },
     },
   },
diff --git a/packages/theme/src/components/typography.ts b/packages/theme/src/components/typography.ts
index 3b03d39..f450747 100644
--- a/packages/theme/src/components/typography.ts
+++ b/packages/theme/src/components/typography.ts
@@ -22,7 +22,7 @@ export const typography = tv({
     },
     variant: {
       subtitle: {
-        paragraph: ['text-xs', 'text-subtitle'],
+        paragraph: ['text-subtitle'],
       },
     },
   },