Laravel 11.x

CHANGELOG.md

@@ -1,11 +1,17 @@
 
 
-## [1.0.16](https://github.com/justdlabs/inertia.ts/compare/1.0.15...1.0.16) (2024-09-06)
+## [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))
 
+## [1.0.16](https://github.com/justdlabs/inertia.ts/compare/1.0.15...1.0.16) (2024-09-06)
 
 ### Bug Fixes
 
-* bump ([049a347](https://github.com/justdlabs/inertia.ts/commit/049a347323942bccbd54e3b7081a315a49436d40))
+-   bump ([049a347](https://github.com/justdlabs/inertia.ts/commit/049a347323942bccbd54e3b7081a315a49436d40))
 
 ## [1.0.15](https://github.com/justdlabs/inertia.ts/compare/1.0.14...1.0.15) (2024-09-01)
 

composer.json

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

package.json

@@ -14,16 +14,16 @@
         "@inertiajs/react": "^1.2.0",
         "@release-it/bumper": "^6.0.1",
         "@release-it/conventional-changelog": "^8.0.1",
-        "@tailwindcss/forms": "^0.5.8",
-        "@types/node": "^18.19.47",
+        "@tailwindcss/forms": "^0.5.9",
+        "@types/node": "^18.19.50",
         "@types/react": "^18.3.5",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.1",
         "autoprefixer": "^10.4.20",
         "axios": "^1.7.7",
         "husky": "^9.1.5",
         "laravel-vite-plugin": "^1.0.5",
-        "postcss": "^8.4.42",
+        "postcss": "^8.4.45",
         "prettier": "^3.3.3",
         "prettier-plugin-organize-imports": "^4.0.0",
         "prettier-plugin-tailwindcss": "^0.6.6",
@@ -32,12 +32,12 @@
         "release-it": "^17.6.0",
         "tailwindcss": "^3.4.10",
         "typescript": "^5.5.4",
-        "vite": "^5.4.2",
+        "vite": "^5.4.3",
         "vite-plugin-watch": "^0.3.1"
     },
     "dependencies": {
         "clsx": "^2.1.1",
-        "framer-motion": "^11.3.31",
+        "framer-motion": "^11.5.4",
         "justd-icons": "^1.4.44",
         "react-aria-components": "^1.3.3",
         "sonner": "^1.5.0",
@@ -80,5 +80,5 @@
             }
         }
     },
-    "version": "1.0.16"
+    "version": "1.0.17"
 }

resources/js/bootstrap.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+
 window.axios = axios
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

resources/js/components/navbar.tsx

@@ -2,6 +2,7 @@ import { PagePropsData } from '@/types'
 import { usePage } from '@inertiajs/react'
 import { Container } from 'components/container'
 import { Logo } from 'components/logo'
+import { useTheme } from 'components/theme-provider'
 import { ThemeSwitcher } from 'components/theme-switcher'
 import { motion } from 'framer-motion'
 import {
@@ -13,7 +14,7 @@ import {
     IconSettings
 } from 'justd-icons'
 import React from 'react'
-import { ListBox, ListBoxItem, ListBoxItemProps } from 'react-aria-components'
+import { ListBox, ListBoxItem, ListBoxItemProps, Selection } from 'react-aria-components'
 import { tv } from 'tailwind-variants'
 import { Avatar, Button, Link, Menu, Sheet, useMediaQuery } from 'ui'
 
@@ -133,6 +134,9 @@ function LoginMenu() {
 
 function UserMenu() {
     const { auth } = usePage<PagePropsData>().props
+    const { theme, setTheme } = useTheme()
+    const currentTheme = theme || 'system'
+    const [selectedTheme, setSelectedTheme] = React.useState<Selection>(new Set([currentTheme]))
     return (
         <Menu>
             <Menu.Trigger aria-label="Open menu">
@@ -141,11 +145,8 @@ function UserMenu() {
             <Menu.Content showArrow placement="bottom end" className="min-w-56">
                 <Menu.Section>
                     <Menu.Header separator className="relative">
-                        <div className="absolute right-2 top-2">
-                            <ThemeSwitcher />
-                        </div>
                         <div>{auth.user.name}</div>
-                        <div className="text-muted-fg font-normal text-sm whitespace-nowrap truncate pr-10">
+                        <div className="text-muted-fg font-normal text-sm whitespace-nowrap truncate pr-6">
                             {auth.user.email}
                         </div>
                     </Menu.Header>
@@ -155,6 +156,29 @@ function UserMenu() {
                     Settings
                     <IconSettings />
                 </Menu.Item>
+                <Menu.Submenu>
+                    <Menu.Item>Preferences</Menu.Item>
+                    <Menu.Content
+                        selectionMode="single"
+                        selectedKeys={selectedTheme}
+                        onSelectionChange={(keys) => {
+                            setSelectedTheme(keys)
+                            // @ts-ignore
+                            setTheme(keys.has('system') ? 'system' : keys.has('dark') ? 'dark' : 'light')
+                        }}
+                        items={[
+                            { name: 'Light', value: 'light' },
+                            { name: 'Dark', value: 'dark' },
+                            { name: 'System', value: 'system' }
+                        ]}
+                    >
+                        {(item) => (
+                            <Menu.Checkbox id={item.value} textValue={item.name}>
+                                {item.name}
+                            </Menu.Checkbox>
+                        )}
+                    </Menu.Content>
+                </Menu.Submenu>
                 <Menu.Separator />
                 <Menu.Item target="_blank" href="https://laravel.com" className="justify-between">
                     Documentation

resources/js/components/theme-provider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useState } from 'react'
+import * as React from 'react'
 
 type Theme = 'dark' | 'light' | 'system'
 
@@ -18,17 +18,17 @@ const initialState: ThemeProviderState = {
     setTheme: () => null
 }
 
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+const ThemeProviderContext = React.createContext<ThemeProviderState>(initialState)
 
 export function ThemeProvider({
     children,
     defaultTheme = 'system',
     storageKey = 'vite-ui-theme',
     ...props
 }: ThemeProviderProps) {
-    const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme)
+    const [theme, setTheme] = React.useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme)
 
-    useEffect(() => {
+    React.useEffect(() => {
         const root = window.document.documentElement
 
         root.classList.remove('light', 'dark')
@@ -40,14 +40,18 @@ export function ThemeProvider({
             return
         }
 
-        root.classList.add(theme)
+        if (theme === 'light' || theme === 'dark') {
+            root.classList.add(theme)
+        }
     }, [theme])
 
     const value = {
         theme,
-        setTheme: (theme: Theme) => {
-            localStorage.setItem(storageKey, theme)
-            setTheme(theme)
+        setTheme: (newTheme: Theme) => {
+            if (newTheme === 'light' || newTheme === 'dark' || newTheme === 'system') {
+                localStorage.setItem(storageKey, newTheme)
+                setTheme(newTheme)
+            }
         }
     }
 
@@ -59,7 +63,7 @@ export function ThemeProvider({
 }
 
 export const useTheme = () => {
-    const context = useContext(ThemeProviderContext)
+    const context = React.useContext(ThemeProviderContext)
 
     if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider')
 

resources/js/components/ui/avatar.tsx

@@ -107,7 +107,7 @@ type AvatarBadgeProps = {
 }
 
 const avatarBadgeStyles = tv({
-    base: ['size-3 z-1 absolute bottom-0 right-0 z-10 rounded-full ring-[1.5px] ring-bg bg-bg'],
+    base: ['size-3 z-10 absolute bottom-0 right-0 rounded-full ring-[1.5px] ring-bg bg-bg'],
     variants: {
         size: {
             'extra-small': 'size-[0.360rem] translate-x-[0%] translate-y-[0%]',

resources/js/components/ui/dialog.tsx

@@ -72,15 +72,13 @@ const Header = ({ className, ...props }: DialogHeaderProps) => {
     )
 }
 
-type DialogTitleProps = HeadingProps & {
-    className?: string
-}
-
-const Title = ({ tracking = 'tight', level = 2, className, ...props }: DialogTitleProps) => (
+const Title = ({ tracking = 'tight', level = 2, className, ...props }: HeadingProps) => (
     <Heading slot="title" tracking={tracking} level={level} className={title({ className })} {...props} />
 )
 
-const Description = ({ className, ...props }: HeadingProps) => <p className={description({ className })} {...props} />
+const Description = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={description({ className })} {...props} />
+)
 
 const Body = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
     <div data-slot="dialog-body" className={body({ className })} {...props} />

resources/js/components/ui/dropdown.tsx

@@ -17,10 +17,10 @@ const dropdownItemStyles = tv({
     base: [
         'group flex cursor-default select-none items-center gap-x-1.5 rounded-[calc(var(--radius)-1px)] py-2 pl-2.5 relative pr-1.5 text-base outline outline-0 forced-color-adjust-none lg:text-sm',
         'has-submenu:open:data-[danger=true]:bg-danger/20 has-submenu:open:data-[danger=true]:text-danger',
-        'has-submenu:open:bg-accent has-submenu:open:text-accent-fg [&[data-has-submenu][data-open]>[data-slot=icon]]:text-accent-fg',
+        'has-submenu:open:bg-accent has-submenu:open:text-accent-fg [&[data-has-submenu][data-open]_[data-slot=icon]]:text-accent-fg',
         '[&_[data-slot=avatar]]:-mr-0.5 [&_[data-slot=avatar]]:size-6 sm:[&_[data-slot=avatar]]:size-5',
-        '[&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-muted-fg [&[data-hovered]>[data-slot=icon]]:text-accent-fg [&[data-focused]>[data-slot=icon]]:text-accent-fg [&[data-danger]>[data-slot=icon]]:text-danger/60',
-        'forced-colors:[&>[data-slot=icon]]:text-[CanvasText] forced-colors:[&>[data-slot=icon]]:group-data-[focus]:text-[Canvas] '
+        '[&_[data-slot=icon]]:size-4 [&_[data-slot=icon]]:shrink-0 [&_[data-slot=icon]]:text-muted-fg [&[data-hovered]_[data-slot=icon]]:text-accent-fg [&[data-focused]_[data-slot=icon]]:text-accent-fg [&[data-danger]_[data-slot=icon]]:text-danger/60',
+        'forced-colors:[&_[data-slot=icon]]:text-[CanvasText] forced-colors:[&_[data-slot=icon]]:group-data-[focus]:text-[Canvas] '
     ],
     variants: {
         isDisabled: {

resources/js/components/ui/heading.tsx

@@ -1,8 +1,6 @@
 import { Heading as HeadingPrimitive } from 'react-aria-components'
 import { tv } from 'tailwind-variants'
 
-import { isIos } from './primitive'
-
 const headingStyles = tv({
     base: 'font-sans tracking-tight text-fg',
     variants: {
@@ -36,7 +34,7 @@ const Heading = ({ className, tracking = 'normal', level = 1, ...props }: Headin
             className={headingStyles({
                 level,
                 tracking,
-                className: isIos() ? 'font-medium' : className
+                className
             })}
             {...props}
         />

resources/js/components/ui/popover.tsx

@@ -23,8 +23,8 @@ const Popover = ({ children, ...props }: { children: React.ReactNode }) => {
     return <DialogTriggerPrimitive {...props}>{children}</DialogTriggerPrimitive>
 }
 
-const Title = ({ className, ...props }: React.ComponentProps<typeof Dialog.Title>) => (
-    <Dialog.Title className={cn('leading-none', className)} {...props} />
+const Title = ({ level = 2, className, ...props }: React.ComponentProps<typeof Dialog.Title>) => (
+    <Dialog.Title className={cn('sm:leading-none', level === 2 && 'sm:text-lg', className)} {...props} />
 )
 
 const Header = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -67,7 +67,7 @@ const drawerStyles = tv({
     variants: {
         isMenu: {
             true: 'p-0 [&_[role=dialog]]:px-0 rounded-t-xl',
-            false: 'p-4 rounded-t-3xl'
+            false: 'py-4 rounded-t-3xl'
         },
         isEntering: {
             true: [

resources/js/components/ui/table.tsx

@@ -1,4 +1,4 @@
-import { IconChevronDown, IconChevronUp, IconHamburger } from 'justd-icons'
+import { IconChevronLgDown, IconChevronLgUp, IconFilterAsc, IconHamburger } from 'justd-icons'
 import type {
     CellProps,
     ColumnProps,
@@ -73,11 +73,11 @@ const TableColumn = ({ children, className, ...props }: TableColumnProps) => (
                     {children}
                     {allowsSorting &&
                         (sortDirection === undefined ? (
-                            <span>daf</span>
+                            <IconFilterAsc className="h-3" />
                         ) : sortDirection === 'ascending' ? (
-                            <IconChevronUp />
+                            <IconChevronLgUp className="h-3" />
                         ) : (
-                            <IconChevronDown />
+                            <IconChevronLgDown className="h-3" />
                         ))}
                 </>
             </div>
@@ -102,11 +102,11 @@ const Header = <T extends object>({ children, className, columns, ...props }: He
     )
 }
 
-interface TableRow<T extends object> extends RowProps<T> {
+interface TableRowProps<T extends object> extends RowProps<T> {
     className?: string
 }
 
-const TableRow = <T extends object>({ children, className, columns, id, ...props }: TableRow<T>) => {
+const TableRow = <T extends object>({ children, className, columns, id, ...props }: TableRowProps<T>) => {
     const { selectionBehavior, allowsDragging } = useTableOptions()
     return (
         <Row

resources/js/components/ui/text-field.tsx

@@ -12,6 +12,7 @@ interface TextFieldProps extends TextFieldPrimitiveProps, FieldProps {
     suffix?: React.ReactNode
     isLoading?: boolean
     indicatorPlace?: 'prefix' | 'suffix'
+    className?: string
 }
 
 const TextField = ({
@@ -23,12 +24,13 @@ const TextField = ({
     suffix,
     isLoading,
     indicatorPlace,
+    className,
     ...props
 }: TextFieldProps) => {
     return (
-        <TextFieldPrimitive {...props} className={ctr(props.className, 'group flex flex-col gap-1')}>
+        <TextFieldPrimitive {...props} className={ctr(className, 'group flex flex-col gap-1')}>
             {label && <Label>{label}</Label>}
-            <FieldGroup data-loading={isLoading ? 'true' : undefined} className={fieldGroupPrefixStyles()}>
+            <FieldGroup data-loading={isLoading ? 'true' : undefined} className={fieldGroupPrefixStyles({ className })}>
                 {isLoading && indicatorPlace === 'prefix' ? (
                     <IconLoader className="animate-spin isPfx" />
                 ) : prefix ? (