Laravel 11.x

CHANGELOG.md

@@ -1,11 +1,12 @@
 
 
-## [1.0.17](https://github.com/justdlabs/inertia.ts/compare/1.0.16...1.0.17) (2024-09-07)
+## [1.0.18](https://github.com/justdlabs/inertia.ts/compare/1.0.17...1.0.18) (2024-09-09)
 
+## [1.0.17](https://github.com/justdlabs/inertia.ts/compare/1.0.16...1.0.17) (2024-09-07)
 
 ### Bug Fixes
 
-* move theme switcher to menu sub ([cac009d](https://github.com/justdlabs/inertia.ts/commit/cac009d266be9c5586ecf1446f3e6859af2e237e))
+-   move theme switcher to menu sub ([cac009d](https://github.com/justdlabs/inertia.ts/commit/cac009d266be9c5586ecf1446f3e6859af2e237e))
 
 ## [1.0.16](https://github.com/justdlabs/inertia.ts/compare/1.0.15...1.0.16) (2024-09-06)
 

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "justd/laravel",
-    "version": "1.0.17",
+    "version": "1.0.18",
     "type": "project",
     "description": "The skeleton application for the Laravel framework.",
     "keywords": [

package.json

@@ -38,7 +38,7 @@
     "dependencies": {
         "clsx": "^2.1.1",
         "framer-motion": "^11.5.4",
-        "justd-icons": "^1.4.44",
+        "justd-icons": "^1.4.45",
         "react-aria-components": "^1.3.3",
         "sonner": "^1.5.0",
         "tailwind-merge": "^2.5.2",
@@ -80,5 +80,5 @@
             }
         }
     },
-    "version": "1.0.17"
+    "version": "1.0.18"
 }

resources/js/components/ui/button.tsx

@@ -9,8 +9,9 @@ const buttonStyles = tv(
     {
         extend: focusButtonStyles,
         base: [
-            'kbt32x relative no-underline isolate inline-flex items-center justify-center gap-x-2 border font-medium',
-            'forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-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-[--btn-icon]'
+            'kbt32x before:absolute after:absolute box-border relative no-underline isolate inline-flex items-center justify-center gap-x-2 border font-medium',
+            'forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-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-[--btn-icon]'
         ],
         variants: {
             intent: {
@@ -53,10 +54,23 @@ const buttonStyles = tv(
                 ]
             },
             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/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)]'
+                solid: [
+                    'border-transparent bg-[--btn-border]',
+                    'before:inset-0 before:-z-10 before:bg-[--btn-bg] before:shadow before:data-[disabled]:shadow-none',
+                    'after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] after:data-[disabled]:shadow-none after:inset-0 after:-z-10',
+                    'dark:after:-inset-px dark:before:hidden dark:border-white/5 dark:bg-[--btn-bg]'
+                ],
+                outline: [
+                    'border-border text-fg [--btn-icon:theme(colors.muted.fg)]',
+                    'hover:[--btn-icon:theme(colors.fg)] hover:bg-secondary/90',
+                    'active:bg-secondary/90 active:[--btn-icon:theme(colors.fg)]'
+                ],
+                plain: [
+                    'border-transparent text-fg [--btn-icon:theme(colors.muted.fg)]',
+                    'pressed:bg-secondary/90',
+                    'active:[--btn-icon:theme(colors.fg)] active:bg-secondary/90',
+                    'hover:[--btn-icon:theme(colors.fg)] hover:bg-secondary/90'
+                ]
             },
             size: {
                 'extra-small':
@@ -80,32 +94,10 @@ const buttonStyles = tv(
             appearance: 'solid',
             size: 'medium',
             shape: 'square'
-        },
-        compoundVariants: [
-            {
-                appearance: ['outline', 'plain'],
-                className: 'px-1',
-                size: 'extra-small'
-            },
-            {
-                appearance: ['outline', 'plain'],
-                className: 'px-[calc(theme(spacing.1)-1px)]',
-                size: 'small'
-            },
-            {
-                appearance: ['outline', 'plain'],
-                className: 'px-[calc(theme(spacing.2)-1px)]',
-                size: 'medium'
-            },
-            {
-                appearance: ['outline', 'plain'],
-                className: 'px-[calc(theme(spacing.3)-1px)]',
-                size: 'large'
-            }
-        ]
+        }
     },
     {
-        responsiveVariants: ['sm', 'md', 'lg', 'xl']
+        responsiveVariants: ['sm', 'lg']
     }
 )
 
@@ -117,7 +109,7 @@ interface ButtonProps extends ButtonPrimitiveProps {
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, intent, appearance, size, shape, ...props }, ref) => {
+    ({ className, intent, children, appearance, size, shape, ...props }, ref) => {
         return (
             <ButtonPrimitive
                 ref={ref}
@@ -132,7 +124,17 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
                         className
                     })
                 )}
-            />
+            >
+                {cr(children, (children) => (
+                    <>
+                        <span
+                            className="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
+                            aria-hidden="true"
+                        />
+                        {children}
+                    </>
+                ))}
+            </ButtonPrimitive>
         )
     }
 )

resources/js/components/ui/pagination.tsx

@@ -23,19 +23,19 @@ import { cn, cr } from './primitive'
 
 const paginationStyles = tv({
     slots: {
-        pagination: 'mx-auto flex w-full justify-center gap-1',
-        section: 'flex h-9 gap-1',
-        list: 'flex flex-row items-center gap-1',
+        pagination: 'mx-auto flex w-full justify-center gap-[5px]',
+        section: 'flex h-9 gap-[5px]',
+        list: 'flex flex-row items-center gap-[5px]',
         itemButton:
-            'focus-visible:border-primary cursor-pointer focus-visible:bg-primary/10 dark:focus-visible:text-primary-100 dark:[&>[data-slot=icon]]:text-primary-100 focus-visible:text-primary-900 [&>[data-slot=icon]]:text-primary-960 focus-visible:ring-4 focus-visible:ring-primary/20',
-        itemLabel: 'h-9 px-3.5 grid place-content-center',
+            'focus-visible:border-primary text-fg font-normal cursor-pointer focus-visible:bg-primary/10 focus-visible:ring-4 focus-visible:ring-primary/20',
+        itemLabel: 'h-9 px-3.5 tabular-nums grid place-content-center',
         itemSeparator: 'h-9 grid place-content-center',
         itemEllipsis:
-            'flex items-center justify-center focus-visible:border-primary rounded-lg border border-transparent focus:outline-none size-9 focus-visible:bg-primary/10 dark:focus-visible:text-primary-100 dark:[&>[data-slot=icon]]:text-primary-100 focus-visible:text-primary-900 [&>[data-slot=icon]]:text-primary-960 focus-visible:ring-4 focus-visible:ring-primary/20',
+            'flex items-center justify-center focus-visible:border-primary rounded-lg border border-transparent focus:outline-none size-9 focus-visible:bg-primary/10 focus-visible:ring-4 focus-visible:ring-primary/20',
         itemEllipsisIcon: 'flex size-9 items-center justify-center',
         defaultItem:
-            'focus-visible:border-primary cursor-pointer disabled:cursor-default focus-visible:bg-primary/10 dark:focus-visible:text-primary-100 dark:[&>[data-slot=icon]]:text-primary-100 focus-visible:text-primary-900 [&>[data-slot=icon]]:text-primary-960 focus-visible:ring-4 focus-visible:ring-primary/20 disabled:opacity-100',
-        itemSeparatorLine: 'h-5 w-[1.5px] bg-zinc-300 dark:bg-zinc-700 rotate-[14deg] shrink-0'
+            'focus-visible:border-primary tabular-nums font-normal cursor-pointer disabled:cursor-default focus-visible:bg-primary/10 focus-visible:ring-4 focus-visible:ring-primary/20 disabled:opacity-100',
+        itemSeparatorLine: 'h-5 w-[1.5px] bg-secondary-fg/40 rotate-[14deg] shrink-0'
     }
 })
 
@@ -60,7 +60,7 @@ const PaginationSection = <T extends object>({ className, ...props }: SectionPro
     <Section {...props} className={section({ className })} />
 )
 
-const PaginationList = <T extends object>({ className, ...props }: ListBoxProps<T>) => {
+const List = <T extends object>({ className, ...props }: ListBoxProps<T>) => {
     return (
         <ListBox
             orientation="horizontal"
@@ -93,7 +93,7 @@ interface PaginationItemProps extends ListBoxItemProps {
     variant?: 'label' | 'separator' | 'ellipsis' | 'default' | 'last' | 'first' | 'previous' | 'next'
 }
 
-const PaginationItem = ({
+const Item = ({
     variant = 'default',
     size = 'square-petite',
     appearance = 'outline',
@@ -185,8 +185,8 @@ const PaginationItem = ({
     }
 }
 
-Pagination.Item = PaginationItem
-Pagination.List = PaginationList
+Pagination.Item = Item
+Pagination.List = List
 Pagination.Section = PaginationSection
 
 export { Pagination }

resources/js/components/ui/table.tsx

@@ -1,4 +1,4 @@
-import { IconChevronLgDown, IconChevronLgUp, IconFilterAsc, IconHamburger } from 'justd-icons'
+import { IconChevronLgDown, IconHamburger } from 'justd-icons'
 import type {
     CellProps,
     ColumnProps,
@@ -29,11 +29,13 @@ const table = tv({
         column: 'whitespace-nowrap allows-sorting:cursor-pointer px-3 py-3 text-left dragging:cursor-grabbing font-medium outline-none [&:has([slot=selection])]:pr-0',
         header: 'border-b x32',
         row: 'tr group relative cursor-default border-b text-fg/70 outline-none ring-primary focus-visible:ring-1 selected:bg-primary/15',
-        cell: 'whitespace-nowrap px-3 py-3 outline-none'
+        cell: 'whitespace-nowrap group px-3 py-3 outline-none',
+        cellIcon:
+            'flex-none rounded bg-secondary text-fg [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:size-3.5 [&>[data-slot=icon]]:transition-transform [&>[data-slot=icon]]:duration-200 size-[1.15rem] grid place-content-center shrink-0'
     }
 })
 
-const { root, header, column, row, cell } = table()
+const { root, header, column, row, cell, cellIcon } = table()
 
 interface TableProps extends TablePrimitiveProps {
     className?: string
@@ -67,18 +69,15 @@ interface TableColumnProps extends ColumnProps {
 
 const TableColumn = ({ children, className, ...props }: TableColumnProps) => (
     <Column {...props} className={column({ className })}>
-        {({ allowsSorting, sortDirection }) => (
-            <div className="flex [&>[data-slot=icon]]:shrink-0 items-center gap-2">
+        {({ allowsSorting, sortDirection, isHovered }) => (
+            <div className="flex [&_[data-slot=icon]]:shrink-0 items-center gap-2">
                 <>
                     {children}
-                    {allowsSorting &&
-                        (sortDirection === undefined ? (
-                            <IconFilterAsc className="h-3" />
-                        ) : sortDirection === 'ascending' ? (
-                            <IconChevronLgUp className="h-3" />
-                        ) : (
-                            <IconChevronLgDown className="h-3" />
-                        ))}
+                    {allowsSorting && (
+                        <span className={cellIcon({ className: isHovered ? 'bg-secondary-fg/10' : '' })}>
+                            <IconChevronLgDown className={sortDirection === 'ascending' ? 'rotate-180' : ''} />
+                        </span>
+                    )}
                 </>
             </div>
         )}