justdlabs · irsyadadl · Aug 22, 2024 · Aug 22, 2024
diff --git a/.idea/inertia.ts.iml b/.idea/inertia.ts.iml
diff --git a/.idea/php.xml b/.idea/php.xml
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,8 @@
-
-
 ## [1.0.13](https://github.com/justdlabs/inertia.ts/compare/1.0.12...1.0.13) (2024-08-13)
 
-
 ### Bug Fixes
 
-* fix cmd installation ([4472e9f](https://github.com/justdlabs/inertia.ts/commit/4472e9f599976968594ce3ef1825a186f89910ca))
+-   fix cmd installation ([4472e9f](https://github.com/justdlabs/inertia.ts/commit/4472e9f599976968594ce3ef1825a186f89910ca))
 
 ## [1.0.12](https://github.com/justdlabs/inertia.ts/compare/1.0.11...1.0.12) (2024-08-13)
 

diff --git a/composer.lock b/composer.lock
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,13 +5,14 @@
         "dev": "vite",
         "build": "tsc && vite build && vite build --ssr",
         "format": "prettier --write .",
-        "release": "release-it"
+        "release": "release-it",
+        "preview": "tsc && npm run build && php artisan inertia:start-ssr"
     },
     "devDependencies": {
         "@commitlint/cli": "^19.4.0",
         "@commitlint/config-conventional": "^19.2.2",
         "@inertiajs/react": "^1.2.0",
-        "@release-it/bumper": "^6.0.1",
+        "@release-it/bumper": "^1.2.0",
         "@release-it/conventional-changelog": "^8.0.1",
         "@tailwindcss/forms": "^0.5.7",
         "@types/node": "^18.19.44",
@@ -37,13 +38,13 @@
     "dependencies": {
         "clsx": "^2.1.1",
         "framer-motion": "^11.3.24",
-        "justd-icons": "^1.4.30",
-        "react-aria-components": "^1.3.1",
+        "justd-icons": "^1.4.39",
+        "react-aria-components": "^1.3.3",
         "sonner": "^1.5.0",
         "tailwind-merge": "^2.5.2",
         "tailwind-variants": "^0.2.1",
         "tailwindcss-animate": "^1.0.7",
-        "tailwindcss-react-aria-components": "^1.1.4"
+        "tailwindcss-react-aria-components": "^1.1.5"
     },
     "release-it": {
         "git": {

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -4,66 +4,80 @@
 
 @layer base {
     :root {
-        --background: 0 0% 100%;
+        --light: 0 0% 98.04%;
+        --dark: 240 10% 6%;
+        --bg: 0 0% 100%;
         --fg: 240 10% 3.9%;
 
-        --card: 0 0% 100%;
-        --card-header: 240 5% 99%;
-
         --overlay: 0 0% 100%;
         --overlay-fg: 240 10% 3.9%;
 
-        --primary: 216 98% 52%;
+        --primary: 216.74 100% 50%;
         --primary-fg: 0 0% 100%;
 
         --secondary: 240 4.8% 95.9%;
         --secondary-fg: 240 5.9% 10%;
 
-        --tertiary: 240 4.8% 95.9%;
+        --tertiary: 0 0% 100%;
         --tertiary-fg: 240 4% 16%;
 
-        --success: 152 69% 31%;
-        --success-fg: 0 0% 100%;
+        --accent: 216.74 100% 50%;
+        --accent-fg: 0 0% 100%;
+
+        --success: 161.38 93.55% 30.39%;
+        --success-fg: 151.76 80.95% 95.88%;
+
+        --info: 81.97 84.52% 67.06%;
+        --info-fg: 89.27 80.39% 10%;
 
         --muted: 240 4.8% 95.9%;
         --muted-fg: 240 3.8% 46.1%;
 
-        --danger: 347 77% 50%;
-        --danger-fg: 356 100% 97%;
+        --danger: 0 72.22% 50.59%;
+        --danger-fg: 0 85.71% 97.25%;
 
-        --warning: 46 97% 65%;
-        --warning-fg: 21 92% 14%;
+        --warning: 43.26 96.41% 56.27%;
+        --warning-fg: 20.91 91.67% 14.12%;
 
         --border: 240 5.9% 90%;
         --input: 240 5.9% 90%;
+        --ring: var(--primary);
         --toggle: 240 5% 84%;
-        --ring: 211 100% 58%;
-
-        --radius: 0.55rem;
+        --radius: 0.5rem;
     }
 
     .dark {
-        --background: 0 0% 0%;
+        --bg: 0 0% 0%;
         --fg: 0 0% 98%;
 
-        --card: 240 10% 3.9%;
-        --card-header: 240 6% 6%;
-
         --overlay: 240 6% 6%;
         --overlay-fg: 0 0% 98%;
 
+        --primary: 216 98% 52%;
+        --primary-fg: 0 0% 100%;
+
         --secondary: 240 3.7% 15.9%;
         --secondary-fg: 0 0% 98%;
 
-        --tertiary: 240 10% 6%;
+        --info: 84.91 100% 66.47%;
+        --info-fg: 120 100% 13.14%;
+
+        --success: 161.38 93.55% 30.39%;
+        --success-fg: 151.76 80.95% 95.88%;
+
+        --accent: 216 98% 52%;
+        --accent-fg: 0 0% 100%;
+
+        --tertiary: 240 10% 5.5%;
         --tertiary-fg: 240 5% 96%;
 
         --muted: 240 3.7% 15.9%;
         --muted-fg: 240 5% 64.9%;
 
+        --ring: var(--primary);
+        --toggle: 240 5% 26%;
         --border: 240 7% 15%;
         --input: 240 3.7% 15.9%;
-        --toggle: 240 5% 26%;
     }
 }
 
@@ -79,10 +93,7 @@
     }
 
     body {
-        @apply bg-background text-fg;
-        font-feature-settings:
-            'rlig' 1,
-            'calt' 1;
+        @apply bg-bg text-fg;
     }
 }
 

diff --git a/resources/js/components/header.tsx b/resources/js/components/header.tsx
@@ -4,7 +4,7 @@ import { cn } from 'ui'
 
 const Header = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
     ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('py-6 bg-background sm:py-12 border-b mb-12', className)} {...props}>
+        <div ref={ref} className={cn('py-6 bg-bg sm:py-12 border-b mb-12', className)} {...props}>
             <Container>
                 <h1 className="text-xl sm:text-2xl font-semibold tracking-tight">{props.title}</h1>
             </Container>

diff --git a/resources/js/components/navbar.tsx b/resources/js/components/navbar.tsx
@@ -59,7 +59,7 @@ export function Navbar() {
     return (
         <>
             <ResponsiveNavbar />
-            <nav className="relative bg-background z-10 hidden border-b py-1 sm:block">
+            <nav className="relative bg-bg z-10 hidden border-b py-1 sm:block">
                 <Container>
                     <div className="flex items-center justify-between">
                         <div className="flex items-center">

diff --git a/resources/js/components/providers.tsx b/resources/js/components/providers.tsx
@@ -0,0 +1,14 @@
+import { router } from '@inertiajs/react'
+import React from 'react'
+import { RouterProvider } from 'react-aria-components'
+import { ThemeProvider } from './theme-provider'
+
+export function Providers({ children }: { children: React.ReactNode }) {
+    return (
+        <RouterProvider navigate={(to, options) => router.visit(to, options as any)}>
+            <ThemeProvider defaultTheme="system" storageKey="ui-theme">
+                {children}
+            </ThemeProvider>
+        </RouterProvider>
+    )
+}
diff --git a/resources/js/components/theme-toggle.tsx b/resources/js/components/theme-toggle.tsx
@@ -10,23 +10,23 @@ export function ThemeToggle() {
             <Button
                 size="square-petite"
                 appearance="plain"
-                className={cn(theme === 'light' ? 'bg-secondary' : 'bg-background')}
+                className={cn(theme === 'light' ? 'bg-secondary' : 'bg-bg')}
                 onPress={() => setTheme('light')}
             >
                 <IconSun />
             </Button>
             <Button
                 size="square-petite"
                 appearance="plain"
-                className={cn(theme === 'dark' ? 'bg-secondary' : 'bg-background')}
+                className={cn(theme === 'dark' ? 'bg-secondary' : 'bg-bg')}
                 onPress={() => setTheme('dark')}
             >
                 <IconMoon />
             </Button>
             <Button
                 size="square-petite"
                 appearance="plain"
-                className={cn(theme === 'system' ? 'bg-secondary' : 'bg-background')}
+                className={cn(theme === 'system' ? 'bg-secondary' : 'bg-bg')}
                 onPress={() => setTheme('system')}
             >
                 <IconDeviceDesktop />

diff --git a/resources/js/components/ui/avatar.tsx b/resources/js/components/ui/avatar.tsx
@@ -5,7 +5,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import { VisuallyHidden } from './visually-hidden'
 
 const avatarGroupStyles = tv({
-    base: 'flex items-center justify-center -space-x-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-background'
+    base: 'flex items-center justify-center -space-x-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-bg'
 })
 
 interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarGroupStyles> {
@@ -92,7 +92,7 @@ const Avatar = ({
                 </svg>
             )}
             {src && <img src={src} alt={alt} />}
-            {status && <AvatarBadge size={size} status={status} aria-label="Available" />}
+            {status && <AvatarBadge size={size} status={status} aria-label={status} />}
         </span>
     )
 }
@@ -106,19 +106,19 @@ type AvatarBadgeProps = {
 }
 
 const avatarBadgeStyles = tv({
-    base: ['size-3 z-1 absolute bottom-0 right-0 z-10 rounded-full ring-[1.5px] ring-background bg-background'],
+    base: ['size-3 z-1 absolute bottom-0 right-0 z-10 rounded-full ring-[1.5px] ring-bg bg-bg'],
     variants: {
         size: {
             small: 'size-1.5 translate-x-[0%] translate-y-[0%]',
             medium: 'size-2 translate-x-[5%] translate-y-[5%]',
             large: 'size-2.5 translate-x-[5%] translate-y-[5%]'
         },
         status: {
-            away: 'bg-red-500',
-            online: 'bg-green-500',
-            offline: 'bg-gray-500',
-            dnd: 'bg-yellow-500',
-            idle: 'bg-gray-500'
+            away: 'bg-danger',
+            online: 'bg-success',
+            offline: 'bg-muted-fg',
+            dnd: 'bg-warning',
+            idle: 'bg-muted-fg'
         }
     },
     defaultVariants: {

diff --git a/resources/js/components/ui/button.tsx b/resources/js/components/ui/button.tsx
@@ -1,13 +1,9 @@
 import * as React from 'react'
 
-import {
-    Button as ButtonPrimitive,
-    type ButtonProps as ButtonPrimitiveProps,
-    composeRenderProps
-} from 'react-aria-components'
+import { Button as ButtonPrimitive, type ButtonProps as ButtonPrimitiveProps } from 'react-aria-components'
 import { tv } from 'tailwind-variants'
 
-import { focusButtonStyles } from './primitive'
+import { cr, focusButtonStyles } from './primitive'
 
 const buttonStyles = tv(
     {
@@ -19,59 +15,56 @@ const buttonStyles = tv(
         variants: {
             intent: {
                 primary: [
-                    'text-white [--btn-bg:theme(colors.primary.600)] [--btn-border:theme(colors.primary.700/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
-                    '[--btn-icon:theme(colors.primary.200)] active:[--btn-icon:theme(colors.primary.300)] hover:[--btn-icon:theme(colors.primary.300)]'
+                    'text-primary-fg [--btn-bg:theme(colors.primary.DEFAULT)] [--btn-border:theme(colors.primary.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',
+                    '[--btn-icon:theme(colors.primary.fg/60%)] active:[--btn-icon:theme(colors.primary.fg/80%)] hover:[--btn-icon:theme(colors.primary.fg/80%)]'
                 ],
                 secondary: [
-                    'text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]',
-                    'dark:text-white dark:[--btn-bg:theme(colors.zinc.800)] dark:[--btn-hover-overlay:theme(colors.white/5%)]',
-                    '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]'
+                    'text-secondary-fg [--btn-bg:white] dark:[--btn-bg:theme(colors.secondary.DEFAULT)] [--btn-border:theme(colors.secondary.fg/10%)] [--btn-hover-overlay:theme(colors.secondary.fg/2.5%)] data-[active]:[--btn-border:theme(colors.secondary.fg/15%)] hover:[--btn-border:theme(colors.secondary.fg/15%)]',
+                    '[--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]'
                 ],
                 success: [
-                    'text-white [--btn-bg:theme(colors.emerald.600)] [--btn-border:theme(colors.emerald.700/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
+                    'text-success-fg [--btn-bg:theme(colors.success.DEFAULT)] [--btn-border:theme(colors.success.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',
                     '[--btn-icon:theme(colors.white/60%)] active:[--btn-icon:theme(colors.white/80%)] hover:[--btn-icon:theme(colors.white/80%)]'
                 ],
                 'light/dark': [
-                    'text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
-                    'dark:text-zinc-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]',
-                    '[--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.zinc.300)] hover:[--btn-icon:theme(colors.zinc.300)] dark:[--btn-icon:theme(colors.zinc.500)] dark:active:[--btn-icon:theme(colors.zinc.400)] dark:hover:[--btn-icon:theme(colors.zinc.400)]'
+                    'text-bg [--btn-bg:theme(colors.dark)] [--btn-border:theme(colors.dark/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
+                    'dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.dark/5%)]',
+                    '[--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.bg/85%)] hover:[--btn-icon:theme(colors.bg/85%)]'
                 ],
                 dark: [
-                    'text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
-                    'dark:[--btn-bg:theme(colors.zinc.800)] dark:[--btn-hover-overlay:theme(colors.white/5%)]',
-                    '[--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.zinc.300)] hover:[--btn-icon:theme(colors.zinc.300)]'
+                    'text-light [--btn-bg:theme(colors.dark)] [--btn-border:theme(colors.dark)] [--btn-hover-overlay:theme(colors.light/2.5%)]',
+                    '[--btn-icon:theme(colors.light/60%)] active:[--btn-icon:theme(colors.light/80%)] hover:[--btn-icon:theme(colors.light/80%)]'
                 ],
                 light: [
-                    'text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] active:[--btn-border:theme(colors.zinc.950/15%)] hover:[--btn-border:theme(colors.zinc.950/15%)]',
-                    'dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]',
-                    '[--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.zinc.500)] hover:[--btn-icon:theme(colors.zinc.500)]'
+                    'text-dark [--btn-bg:white] [--btn-border:theme(colors.dark/10%)] [--btn-hover-overlay:theme(colors.dark/2.5%)] active:[--btn-border:theme(colors.dark/15%)] hover:[--btn-border:theme(colors.dark/15%)]',
+                    '[--btn-icon:theme(colors.dark/60%)] active:[--btn-icon:theme(colors.dark/80%)] hover:[--btn-icon:theme(colors.dark/80%)]'
                 ],
                 info: [
-                    'text-lime-950 [--btn-bg:theme(colors.lime.400)] [--btn-border:theme(colors.lime.400/80%)] [--btn-hover-overlay:theme(colors.white/25%)]',
-                    '[--btn-icon:theme(colors.lime.600)] active:[--btn-icon:theme(colors.lime.700)] hover:[--btn-icon:theme(colors.lime.700)]'
+                    'text-info-fg [--btn-bg:theme(colors.info.DEFAULT)] [--btn-border:theme(colors.info.DEFAULT/80%)] [--btn-hover-overlay:theme(colors.white/25%)]',
+                    '[--btn-icon:theme(colors.info.fg/60%)] active:[--btn-icon:theme(colors.info.fg/80%)] hover:[--btn-icon:theme(colors.info.fg/80%)]'
                 ],
                 warning: [
-                    'text-amber-950 [--btn-bg:theme(colors.amber.400)] [--btn-border:theme(colors.amber.500/80%)] [--btn-hover-overlay:theme(colors.white/25%)]',
-                    '[--btn-icon:theme(colors.amber.600)]'
+                    'text-warning-fg [--btn-bg:theme(colors.warning.DEFAULT)] [--btn-border:theme(colors.warning.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',
+                    '[--btn-icon:theme(colors.warning.fg/60%)] active:[--btn-icon:theme(colors.warning.fg/80%)] hover:[--btn-icon:theme(colors.warning.fg/80%)]'
                 ],
                 danger: [
-                    'text-white [--btn-bg:theme(colors.red.600)] [--btn-border:theme(colors.red.700/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
-                    '[--btn-icon:theme(colors.red.300)] active:[--btn-icon:theme(colors.red.200)] hover:[--btn-icon:theme(colors.red.200)]'
+                    'text-white [--btn-bg:theme(colors.danger.DEFAULT)] [--btn-border:theme(colors.danger.DEFAULT)] [--btn-hover-overlay:theme(colors.white/10%)]',
+                    '[--btn-icon:theme(colors.white/60%)] active:[--btn-icon:theme(colors.white/80%)] hover:[--btn-icon:theme(colors.white/80%)]'
                 ]
             },
             appearance: {
                 solid: 'border-transparent bg-[--btn-border] dark:bg-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5 after:absolute after:inset-0 after:-z-10 after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] dark:after:-inset-px before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none',
                 outline:
-                    'border-border hover:bg-secondary/70 active:bg-secondary/70 text-fg [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.zinc.500)] hover:[--btn-icon:theme(colors.zinc.500)] dark:active:[--btn-icon:theme(colors.zinc.300)] dark:hover:[--btn-icon:theme(colors.zinc.300)]',
-                plain: 'border-transparent text-fg active:bg-fg/5 hover:bg-fg/5 [--btn-icon:theme(colors.zinc.500)] active:[--btn-icon:theme(colors.zinc.700)] hover:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:active:[--btn-icon:theme(colors.zinc.400)] dark:hover:[--btn-icon:theme(colors.zinc.400)]'
+                    'border-border hover:bg-secondary/90 active:bg-secondary/90 text-fg [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]',
+                plain: 'border-transparent text-fg pressed:bg-secondary/90 active:bg-secondary/90 hover:bg-secondary/90 [--btn-icon:theme(colors.muted.fg)] active:[--btn-icon:theme(colors.fg)] hover:[--btn-icon:theme(colors.fg)]'
             },
             size: {
                 'extra-small':
                     'h-8 px-[calc(theme(spacing.3)-1px)] py-[calc(theme(spacing.1)-1px)] text-xs/4 lg:text-[0.800rem]/4',
                 small: 'h-9 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing[1.5])-1px)] text-sm/5 lg:text-sm/5',
                 medium: 'h-10 px-[calc(theme(spacing.4)-1px)] py-[calc(theme(spacing.2)-1px)] text-base lg:text-sm/6',
                 large: 'h-10 sm:h-11 px-[calc(theme(spacing.4)-1px)] sm:px-[calc(theme(spacing.5)-1px)] py-[calc(theme(spacing[2.5])-1px)] text-base lg:text-base/7 sm:[&>[data-slot=icon]]:size-5',
-                'square-petite': 'size-9 shrink-0'
+                'square-petite': 'size-9 shrink-0 [&_[data-slot=icon]]:text-current'
             },
             shape: {
                 square: 'rounded-lg before:rounded-[calc(theme(borderRadius.lg)-1px)] after:rounded-[calc(theme(borderRadius.lg)-1px)] dark:after:rounded-lg',
@@ -129,7 +122,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             <ButtonPrimitive
                 ref={ref}
                 {...props}
-                className={composeRenderProps(className, (className, renderProps) =>
+                className={cr(className, (className, renderProps) =>
                     buttonStyles({
                         ...renderProps,
                         intent,