fix: syncing the latest justd

justdlabs · Jan 18, 2025 · 289c077 · 289c077
1 parent 26048c7
commit 289c077
Show file tree

Hide file tree

Showing 17 changed files with 494 additions and 1,541 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/composer.lock b/composer.lock
diff --git a/justd.json b/justd.json
@@ -5,5 +5,6 @@
   "gray": "zinc",
   "css": "src/index.css",
   "alias": "@",
-  "classes": "resources/js/utils"
+  "classes": "resources/js/utils",
+  "language": "typescript"
 }
diff --git a/package.json b/package.json
@@ -34,11 +34,11 @@
     "@types/node": "^22.10.5",
     "clsx": "^2.1.1",
     "justd-icons": "^1.10.19",
-    "motion": "^11.17.0",
+    "motion": "^11.18.1",
     "react": "^19.0.0",
     "react-aria-components": "^1.5.0",
     "react-dom": "^19.0.0",
-    "sonner": "^1.7.1",
+    "sonner": "^1.7.2",
     "tailwind-merge": "^2.6.0",
     "tailwind-variants": "^0.3.0",
     "tailwindcss-animate": "^1.0.7",

diff --git a/resources/js/components/ui/button.tsx b/resources/js/components/ui/button.tsx
@@ -12,7 +12,7 @@ const buttonStyles = tv({
   base: [
     'kbt32x relative inline-flex items-center justify-center gap-x-2 border font-medium',
     'forced-colors:[--btn-icon:ButtonText] forced-colors:data-hovered:[--btn-icon:ButtonText]',
-    '*:data-[slot=icon]:-mx-0.5 data-hovered:*:data-[slot=icon]:text-current/90 *:data-[slot=icon]:my-1 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:text-current/60 *:data-[slot=icon]:transition',
+    '*:data-[slot=icon]:-mx-0.5 data-hovered:*:data-[slot=icon]:text-current/90 data-pressed:*:data-[slot=icon]:text-current *:data-[slot=icon]:my-1 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:text-current/60 *:data-[slot=icon]:transition',
     '*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:my-1 *:data-[slot=avatar]:*:size-4 *:data-[slot=avatar]:size-4 *:data-[slot=avatar]:shrink-0'
   ],
   variants: {
@@ -47,8 +47,8 @@ const buttonStyles = tv({
       solid: [
         'inset-ring-0 dark:inset-ring dark:border-0',
         'inset-ring-(--btn-border) inset-shadow-2xs border-(--btn-border) bg-(--btn-bg) text-(--btn-fg)',
-        'data-hovered:bg-(--btn-bg-hovered) data-hovered:ring-(--btn-border-hovered) data-hovered:*:data-[slot=icon]:text-current/90',
-        'data-pressed:border-(--btn-border) data-pressed:bg-(--btn-bg) data-pressed:*:data-[slot=icon]:text-current'
+        'data-hovered:bg-(--btn-bg-hovered) data-hovered:ring-(--btn-border-hovered)',
+        'data-pressed:border-(--btn-border) data-pressed:bg-(--btn-bg)'
       ],
       outline: ['border data-hovered:bg-secondary data-pressed:bg-secondary'],
       plain: ['border-transparent data-hovered:bg-secondary data-pressed:bg-secondary']
@@ -58,7 +58,7 @@ const buttonStyles = tv({
       small: 'h-9 px-3.5 text-sm/5 sm:text-sm/5',
       medium: 'h-10 px-4 text-base sm:text-sm/6',
       large: 'h-11 px-4.5 text-base *:data-[slot=icon]:mx-[-1.5px] sm:*:data-[slot=icon]:size-5 lg:text-base/7',
-      'square-petite': 'size-9 shrink-0 **:data-[slot=icon]:text-current'
+      'square-petite': 'size-9 shrink-0'
     },
     shape: {
       square: 'rounded-lg',

diff --git a/resources/js/components/ui/checkbox.tsx b/resources/js/components/ui/checkbox.tsx
@@ -81,8 +81,7 @@ const Checkbox = ({ className, ...props }: CheckboxProps) => {
           <div
             className={boxStyles({
               ...renderProps,
-              isSelected: isSelected || isIndeterminate,
-              className: props.description ? 'mt-1' : 'mt-px'
+              isSelected: isSelected || isIndeterminate
             })}
           >
             {isIndeterminate ? <IconMinus /> : isSelected ? <IconCheck /> : null}

diff --git a/resources/js/components/ui/dropdown.tsx b/resources/js/components/ui/dropdown.tsx
@@ -7,29 +7,35 @@ import {
   type ListBoxItemProps,
   ListBoxSection,
   type SectionProps,
+  Separator,
+  type SeparatorProps,
   Text,
   type TextProps,
   composeRenderProps
 } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
+import { Keyboard } from './keyboard';
 
 const dropdownItemStyles = tv({
   base: [
-    'group relative flex cursor-default select-none items-center gap-x-1.5 rounded-[calc(var(--radius-lg)-1px)] px-2.5 py-2 forced-color:text-[Highlight] text-base text-fg outline outline-0 forced-color-adjust-none sm:text-sm forced-colors:text-[LinkText]',
-    'has-submenu:data-open:data-danger:bg-danger/20 has-submenu:data-open:data-danger:text-danger',
-    'data-has-submenu:data-open:bg-accent data-has-submenu:data-open:text-accent-fg data-has-submenu:data-open:*:data-[slot=icon]:text-accent-fg data-has-submenu:data-open:*:[.text-muted-fg]:text-accent-fg',
-    '**:data-[slot=avatar]:-mr-0.5 **:data-[slot=avatar]:*:size-6 **:data-[slot=avatar]:size-6 sm:**:data-[slot=avatar]:*:size-5 sm:**:data-[slot=avatar]:size-5',
-    'data-danger:**:data-[slot=icon]:text-danger/70 data-focused:**:data-[slot=icon]:text-accent-fg data-hovered:**:data-[slot=icon]:text-accent-fg **:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0 **:data-[slot=icon]:text-muted-fg data-focused:data-danger:**:data-[slot=icon]:text-danger-fg',
-    'data-[slot=menu-radio]:*:data-[slot=icon]:size-3',
+    'col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] not-has-data-[slot=dropdown-item-details]:items-center has-data-[slot=dropdown-item-details]:**:data-[slot=checked-icon]:mt-[1.5px] supports-[grid-template-columns:subgrid]:grid-cols-subgrid',
+    'group relative cursor-default select-none rounded-[calc(var(--radius-lg)-1px)] px-2.5 py-1.5 forced-color:text-[Highlight] text-base text-fg outline outline-0 forced-color-adjust-none sm:text-sm/6 forced-colors:text-[LinkText]',
+    '**:data-[slot=avatar]:*:mr-2 **:data-[slot=avatar]:*:size-6 **:data-[slot=avatar]:mr-2 **:data-[slot=avatar]:size-6 sm:**:data-[slot=avatar]:*:size-5 sm:**:data-[slot=avatar]:size-5',
+    'data-danger:**:data-[slot=icon]:text-danger/70 **:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0 **:data-[slot=icon]:text-muted-fg data-focused:data-danger:**:data-[slot=icon]:text-danger-fg',
+    'data-[slot=menu-radio]:*:data-[slot=icon]:size-3 *:data-[slot=icon]:mr-2',
     'forced-colors:**:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focused:**:data-[slot=icon]:text-[Canvas] '
   ],
   variants: {
     isDisabled: {
       true: 'text-muted-fg forced-colors:text-[GrayText]'
     },
+    isSelected: {
+      true: '**:data-[slot=avatar]:*:hidden **:data-[slot=avatar]:hidden **:data-[slot=icon]:hidden'
+    },
     isFocused: {
       false: 'data-danger:text-danger',
       true: [
+        '**:data-[slot=icon]:text-accent-fg **:[kbd]:text-accent-fg',
         'bg-accent text-accent-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]',
         'data-danger:bg-danger data-danger:text-danger-fg',
         'data-[slot=description]:text-accent-fg data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80'
@@ -40,9 +46,10 @@ const dropdownItemStyles = tv({
 
 const dropdownSectionStyles = tv({
   slots: {
-    section: "first:-mt-[5px] xss3 flex flex-col gap-y-0.5 after:block after:h-[4px] after:content-['']",
+    section:
+      "first:-mt-[5px] xss3 col-span-full grid grid-cols-[auto_1fr] gap-y-0.5 after:block after:h-[4px] after:content-['']",
     header:
-      '-top-[5px] -mb-0.5 -mx-1.5 sticky z-10 min-w-(--trigger-width) truncate border-y bg-muted px-4 py-2 font-medium text-muted-fg text-sm supports-[-moz-appearance:none]:bg-muted [&+*]:mt-1'
+      '-top-[5px] -mb-0.5 -mx-1.5 sticky z-10 col-span-full min-w-(--trigger-width) truncate border-y bg-bg px-4 py-2 font-medium text-muted-fg text-sm supports-[-moz-appearance:none]:bg-bg [&+*]:mt-1'
   }
 });
 
@@ -75,15 +82,8 @@ const DropdownItem = ({ className, ...props }: DropdownItemProps) => {
     >
       {composeRenderProps(props.children, (children, { isSelected }) => (
         <>
-          <span className="flex flex-1 items-center gap-2 truncate font-normal group-data-selected:font-medium">
-            {children}
-          </span>
-
-          {isSelected && (
-            <span className="absolute top-3 right-2 lg:top-2.5">
-              <IconCheck />
-            </span>
-          )}
+          {isSelected && <IconCheck className="-mx-0.5 mr-2" data-slot="checked-icon" />}
+          {children}
         </>
       ))}
     </ListBoxItemPrimitive>
@@ -103,7 +103,7 @@ const DropdownItemDetails = ({ label, description, classNames, ...props }: Dropd
   const { slot, children, title, ...restProps } = props;
 
   return (
-    <div className="flex flex-col gap-y-1" {...restProps}>
+    <div data-slot="dropdown-item-details" className="col-start-2 flex flex-col gap-y-1" {...restProps}>
       {label && (
         <Text slot={slot ?? 'label'} className={cn('font-medium sm:text-sm', classNames?.label)} {...restProps}>
           {label}
@@ -123,6 +123,34 @@ const DropdownItemDetails = ({ label, description, classNames, ...props }: Dropd
   );
 };
 
-// Note: This is not exposed component, but it's used in other components to render dropdowns.
-export { DropdownItem, DropdownItemDetails, DropdownSection, dropdownItemStyles, dropdownSectionStyles };
+interface MenuLabelProps extends TextProps {
+  ref?: React.Ref<HTMLDivElement>;
+}
+
+const DropdownLabel = ({ className, ref, ...props }: MenuLabelProps) => (
+  <Text slot="label" ref={ref} className={cn('col-start-2', className)} {...props} />
+);
+
+const DropdownSeparator = ({ className, ...props }: SeparatorProps) => (
+  <Separator orientation="horizontal" className={cn('-mx-1 col-span-full my-1 h-px bg-border', className)} {...props} />
+);
+
+const DropdownKeyboard = ({ className, ...props }: React.ComponentProps<typeof Keyboard>) => {
+  return <Keyboard className={cn('absolute right-2 pl-2', className)} {...props} />;
+};
+
+/**
+ * Note: This is not exposed component, but it's used in other components to render dropdowns.
+ * @internal
+ */
+export {
+  DropdownItem,
+  DropdownItemDetails,
+  DropdownKeyboard,
+  DropdownLabel,
+  DropdownSection,
+  DropdownSeparator,
+  dropdownItemStyles,
+  dropdownSectionStyles
+};
 export type { DropdownItemDetailProps, DropdownItemProps, DropdownSectionProps };
diff --git a/resources/js/components/ui/field.tsx b/resources/js/components/ui/field.tsx
@@ -30,7 +30,7 @@ interface FieldProps {
 
 const fieldStyles = tv({
   slots: {
-    description: 'text-pretty text-base/6 text-muted-fg sm:text-sm/6',
+    description: 'text-pretty text-muted-fg text-sm/6',
     label: 'w-fit cursor-default font-medium text-secondary-fg text-sm',
     fieldError: 'text-danger text-sm/6 forced-colors:text-[Mark]',
     input: [

diff --git a/resources/js/components/ui/keyboard.tsx b/resources/js/components/ui/keyboard.tsx
@@ -3,11 +3,8 @@ import { tv } from 'tailwind-variants';
 
 const keyboardStyles = tv({
   slots: {
-    base: '-mr-1 ml-auto hidden items-center lg:inline-flex',
-    kbd: [
-      'text-center font-sans text-current/70 capitalize group-data-focused:text-fg forced-colors:group-data-focused:text-[HighlightText]',
-      'inline-grid min-h-5 min-w-[2ch] place-content-center rounded font-sans text-[.75rem] uppercase group-data-hovered:text-fg group-data-disabled:opacity-50 group-data-focused:opacity-90'
-    ]
+    base: 'hidden text-current/70 group-data-focused:text-fg group-data-hovered:text-fg group-data-disabled:opacity-50 group-data-focused:opacity-90 lg:inline-flex lg:inline-flex forced-colors:group-data-focused:text-[HighlightText]',
+    kbd: 'inline-grid min-h-5 min-w-[2ch] place-content-center rounded text-center font-sans text-[.75rem] uppercase'
   }
 });
 

diff --git a/resources/js/components/ui/link.tsx b/resources/js/components/ui/link.tsx
@@ -1,17 +1,16 @@
 import { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps, composeRenderProps } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
+import { focusButtonStyles } from './primitive';
+
 const linkStyles = tv({
-  base: [
-    'relative outline-0 outline-primary outline-offset-2 transition-colors data-focus-visible:outline-2 data-focused:outline-hidden',
-    'data-disabled:data-focus-visible:outline-0 forced-colors:outline-[Highlight] forced-colors:data-disabled:text-[GrayText]',
-    'disabled:cursor-default data-disabled:opacity-60'
-  ],
+  extend: focusButtonStyles,
+  base: 'rounded transition-[color,_opacity] data-disabled:cursor-default data-disabled:opacity-60 forced-colors:data-disabled:text-[GrayText]',
   variants: {
     intent: {
       unstyled: 'text-current',
-      primary: 'text-fg data-hovered:underline forced-colors:data-disabled:text-[GrayText]',
-      secondary: 'text-muted-fg data-hovered:text-secondary-fg forced-colors:data-disabled:text-[GrayText]'
+      primary: 'text-fg data-hovered:underline',
+      secondary: 'text-muted-fg data-hovered:text-secondary-fg'
     }
   },
   defaultVariants: {
@@ -29,7 +28,7 @@ const Link = ({ className, ref, ...props }: LinkProps) => {
     <LinkPrimitive
       ref={ref}
       {...props}
-      className={composeRenderProps(className, (className, ...renderProps) =>
+      className={composeRenderProps(className, (className, renderProps) =>
         linkStyles({ ...renderProps, intent: props.intent, className })
       )}
     >

diff --git a/resources/js/components/ui/list-box.tsx b/resources/js/components/ui/list-box.tsx
@@ -1,11 +1,11 @@
 import { IconCheck, IconHamburger } from 'justd-icons';
-import type { ListBoxItemProps, ListBoxProps } from 'react-aria-components';
+import type { ListBoxItemProps as ListBoxItemPrimitiveProps, ListBoxProps } from 'react-aria-components';
 import { ListBoxItem, ListBox as ListBoxPrimitive, composeRenderProps } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
-import { composeTailwindRenderProps } from '@/components/ui/primitive';
 import { cn } from '@/utils/classes';
 import { DropdownItemDetails, DropdownSection } from './dropdown';
+import { composeTailwindRenderProps } from './primitive';
 
 const listBoxStyles = tv({
   base: 'flex max-h-96 w-full min-w-56 flex-col gap-y-1 overflow-y-auto rounded-xl border p-1 shadow-lg outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5'
@@ -40,11 +40,11 @@ const listBoxItemStyles = tv({
   }
 });
 
-interface ItemProps<T extends object> extends ListBoxItemProps<T> {
+interface ListBoxItemProps<T extends object> extends ListBoxItemPrimitiveProps<T> {
   className?: string;
 }
 
-const Item = <T extends object>({ children, className, ...props }: ItemProps<T>) => {
+const Item = <T extends object>({ children, className, ...props }: ListBoxItemProps<T>) => {
   const textValue = typeof children === 'string' ? children : undefined;
 
   return (
@@ -92,7 +92,10 @@ type ListBoxPickerProps<T> = ListBoxProps<T>;
 const ListBoxPicker = <T extends object>({ className, ...props }: ListBoxPickerProps<T>) => {
   return (
     <ListBoxPrimitive
-      className={composeTailwindRenderProps(className, 'max-h-72 overflow-auto p-1 outline-hidden')}
+      className={composeTailwindRenderProps(
+        className,
+        'grid max-h-72 grid-cols-[auto_1fr] overflow-auto p-1 outline-hidden'
+      )}
       {...props}
     />
   );
@@ -108,4 +111,4 @@ ListBox.Item = Item;
 ListBox.Picker = ListBoxPicker;
 
 export { ListBox, listBoxStyles };
-export type { ListBoxPickerProps };
+export type { ListBoxItemProps, ListBoxPickerProps };