syncing

Author: irsyadadl

bun.lockb

@@ -14,7 +14,7 @@
     "@inertiajs/react": "^2.0.0",
     "@release-it/bumper": "^6.0.1",
     "@release-it/conventional-changelog": "^9.0.4",
-    "@types/react": "^19.0.2",
+    "@types/react": "^19.0.4",
     "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
@@ -25,24 +25,24 @@
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "release-it": "^17.11.0",
-    "tailwindcss": "^4.0.0-beta.8",
-    "typescript": "^5.7.2",
+    "tailwindcss": "^4.0.0-beta.9",
+    "typescript": "^5.7.3",
     "vite-plugin-watch": "^0.3.1"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.0.0-beta.8",
-    "@types/node": "^22.10.2",
+    "@tailwindcss/vite": "^4.0.0-beta.9",
+    "@types/node": "^22.10.5",
     "clsx": "^2.1.1",
-    "justd-icons": "^1.10.8",
-    "motion": "^11.15.0",
+    "justd-icons": "^1.10.18",
+    "motion": "^11.16.4",
     "react": "^19.0.0",
     "react-aria-components": "^1.5.0",
     "react-dom": "^19.0.0",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.6.0",
     "tailwind-variants": "^0.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "vite": "^6.0.6"
+    "vite": "^6.0.7"
   },
   "version": "1.3.8"
 }

composer.lock

@@ -10,9 +10,10 @@ import { focusButtonStyles } from './primitive';
 const buttonStyles = tv({
   extend: focusButtonStyles,
   base: [
-    'kbt32x relative flex items-center justify-center gap-x-2 border font-medium',
-    'forced-colors:[--button-icon:ButtonText] forced-colors:data-hovered:[--button-icon:ButtonText]',
-    '*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-1 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:text-current/60'
+    '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=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: {
     intent: {

package.json

@@ -18,7 +18,7 @@ const dropdownItemStyles = tv({
     '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 sm:**:data-[slot=avatar]:size-5',
+    '**: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',
     'forced-colors:**:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focused:**:data-[slot=icon]:text-[Canvas] '

resources/js/components/ui/button.tsx

@@ -47,7 +47,7 @@ const content = tv({
     }
   },
   defaultVariants: {
-    size: 'lg'
+    size: 'xl'
   }
 });
 
@@ -57,11 +57,12 @@ const Modal = (props: DialogTriggerProps) => {
 
 interface ModalContentProps
   extends Omit<React.ComponentProps<typeof Modal>, 'children'>,
-    Omit<ModalOverlayProps, 'className'>,
+    Omit<ModalOverlayProps, 'className' | 'children'>,
     VariantProps<typeof content> {
   'aria-label'?: DialogProps['aria-label'];
   'aria-labelledby'?: DialogProps['aria-labelledby'];
   role?: DialogProps['role'];
+  children?: DialogProps['children'];
   closeButton?: boolean;
   isBlurred?: boolean;
   classNames?: {
@@ -103,12 +104,14 @@ const ModalContent = ({
         )}
         {...props}
       >
-        {(values) => (
-          <Dialog role={role}>
-            {typeof children === 'function' ? children(values) : children}
-            {closeButton && <Dialog.CloseIndicator isDismissable={_isDismissable} />}
-          </Dialog>
-        )}
+        <Dialog role={role}>
+          {(values) => (
+            <>
+              {typeof children === 'function' ? children(values) : children}
+              {closeButton && <Dialog.CloseIndicator isDismissable={_isDismissable} />}
+            </>
+          )}
+        </Dialog>
       </ModalPrimitive>
     </ModalOverlay>
   );

resources/js/components/ui/dropdown.tsx

@@ -50,9 +50,9 @@ const contentStyles = tv({
       top: 'data-entering:slide-in-from-top data-exiting:slide-out-to-top inset-x-0 top-0 rounded-b-2xl border-b',
       bottom:
         'data-entering:slide-in-from-bottom data-exiting:slide-out-to-bottom inset-x-0 bottom-0 rounded-t-2xl border-t',
-      left: 'data-entering:slide-in-from-left data-exiting:slide-out-to-left inset-y-0 left-0 h-auto w-[18rem] overflow-y-auto border-r sm:w-3/4 sm:w-[19rem] sm:max-w-xs',
+      left: 'data-entering:slide-in-from-left data-exiting:slide-out-to-left inset-y-0 left-0 h-auto w-full max-w-xs overflow-y-auto border-r',
       right:
-        'data-entering:slide-in-from-right data-exiting:slide-out-to-right inset-y-0 right-0 h-auto w-[18rem] overflow-y-auto border-l sm:w-3/4 sm:w-[19rem] sm:max-w-xs'
+        'data-entering:slide-in-from-right data-exiting:slide-out-to-right inset-y-0 right-0 h-auto w-full max-w-xs overflow-y-auto border-l'
     },
     isFloat: {
       false: 'border-fg/20 dark:border-border',

resources/js/components/ui/modal.tsx

@@ -31,9 +31,9 @@ import { Checkbox } from './checkbox';
 
 const table = tv({
   slots: {
-    root: 'table w-full min-w-full caption-bottom border-spacing-0 text-sm outline-hidden **:data-drop-target:border **:data-drop-target:border-primary',
+    root: 'table w-full min-w-full caption-bottom border-spacing-0 text-sm outline-hidden [--table-selected-bg:color-mix(in_oklab,var(--color-primary)_5%,white_90%)] **:data-drop-target:border **:data-drop-target:border-primary dark:[--table-selected-bg:color-mix(in_oklab,var(--color-primary)_25%,black_70%)]',
     header: 'x32 border-b',
-    row: 'tr group relative cursor-default border-b text-fg/70 outline-hidden ring-primary data-selected:data-hovered:bg-subtle/50 data-selected:bg-subtle data-focus-visible:ring-1 data-focused:ring-0 dark:data-selected:data-hovered:bg-subtle/60',
+    row: 'tr group relative cursor-default border-b bg-bg text-fg/70 outline-hidden ring-primary data-selected:data-hovered:bg-(--table-selected-bg)/70 data-selected:bg-(--table-selected-bg) data-focus-visible:ring-1 data-focused:ring-0 dark:data-selected:data-hovered:bg-[color-mix(in_oklab,var(--color-primary)_40%,black_60%)] dark:data-selected:data-hovered:bg-subtle/60',
     cellIcon:
       'grid size-[1.15rem] flex-none shrink-0 place-content-center rounded bg-secondary text-fg *:data-[slot=icon]:size-3.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:transition-transform *:data-[slot=icon]:duration-200',
     columnResizer: [