Laravel 11.x

composer.json

@@ -1,5 +1,5 @@
 {
-    "name": "laravel/laravel",
+    "name": "justd/inertia.tswip",
     "type": "project",
     "description": "The skeleton application for the Laravel framework.",
     "keywords": [

justd.json

@@ -1,3 +1,4 @@
 {
+    "$schema": "http://justd.co",
     "ui": "resources/js/components/ui"
 }

package.json

@@ -9,12 +9,12 @@
     "devDependencies": {
         "@inertiajs/react": "^1.2.0",
         "@tailwindcss/forms": "^0.5.7",
-        "@types/node": "^18.19.42",
+        "@types/node": "^18.19.43",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.1",
-        "autoprefixer": "^10.4.19",
-        "axios": "^1.7.2",
+        "autoprefixer": "^10.4.20",
+        "axios": "^1.7.3",
         "laravel-vite-plugin": "^1.0.5",
         "postcss": "^8.4.40",
         "prettier": "^3.3.3",
@@ -28,9 +28,9 @@
         "vite-plugin-watch": "^0.3.1"
     },
     "dependencies": {
-        "@irsyadadl/paranoid": "^1.4.11",
+        "@irsyadadl/paranoid": "^1.4.12",
         "clsx": "^2.1.1",
-        "framer-motion": "^11.3.19",
+        "framer-motion": "^11.3.21",
         "react-aria-components": "^1.3.1",
         "sonner": "^1.5.0",
         "tailwind-merge": "^2.4.0",

resources/js/components/ui/avatar.tsx

@@ -47,6 +47,7 @@ interface AvatarProps extends React.ComponentPropsWithoutRef<'span'>, VariantPro
     alt?: string
     status?: Status
     className?: string
+    role?: string
 }
 
 const Avatar = ({
@@ -58,14 +59,15 @@ const Avatar = ({
     className,
     shape,
     size,
+    role = 'avatar',
     ...props
 }: AvatarProps) => {
     const badgeId = React.useId()
     const ariaLabelledby = [badgeId, children ? badgeId : ''].join(' ')
     return (
         <span
             aria-labelledby={ariaLabelledby}
-            role="avatar"
+            role={role}
             data-slot="avatar"
             {...props}
             className={avatarStyles({ shape, size, className })}

resources/js/components/ui/field.tsx

@@ -13,11 +13,13 @@ import {
     Text,
     type TextProps
 } from 'react-aria-components'
-import { twMerge } from 'tailwind-merge'
 import { tv } from 'tailwind-variants'
 
 import { ctr } from './primitive'
 
+// primitive styles
+
+// primitive styles
 const fieldBorderStyles = tv({
     base: 'group-focus-within:border-primary forced-colors:border-[Highlight]',
     variants: {
@@ -27,26 +29,38 @@ const fieldBorderStyles = tv({
     }
 })
 
-const Label = (props: LabelProps) => {
-    return (
-        <LabelPrimitive
-            {...props}
-            className={twMerge('w-fit cursor-default font-medium text-secondary-fg text-sm', props.className)}
-        />
-    )
+const fieldGroupPrefixStyles = tv({
+    base: [
+        'flex group-invalid:border-danger group-disabled:bg-secondary group-disabled:opacity-50 items-center group-invalid:focus-within:ring-danger/20',
+        '[&>.x2e2>.kbt32x]:size-7 [&>.x2e2>.kbt32x]:rounded-sm [&>.x2e2:has(.kbt32x)]:size-9 [&>.x2e2:has(.kbt32x)]:grid [&>.x2e2:has(.kbt32x)]:place-items-center',
+        '[&>.x2e2>.kbt32x]:before:rounded-[calc(theme(borderRadius.sm)-1px)] [&>.x2e2>.kbt32x]:after:rounded-[calc(theme(borderRadius.sm)-1px)] dark:[&>.x2e2>.kbt32x]:after:rounded-sm',
+        '[&>.isSfx:has(.kbt32x)]:-mr-2 [&>.isPfx:has(.kbt32x)]:-ml-2 [&>.isSfx>.kbt32x]:mr-0.5 [&>.isPfx>.kbt32x]:ml-0.5'
+    ]
+})
+
+const fieldStyles = tv({
+    slots: {
+        description: 'text-sm text-muted-fg',
+        label: 'w-fit cursor-default font-medium text-secondary-fg text-sm',
+        fieldError: 'text-sm text-danger forced-colors:text-[Mark]',
+        input: [
+            'w-full min-w-0 bg-transparent p-2 text-base text-fg placeholder-muted-fg focus:outline-none lg:text-sm'
+        ]
+    }
+})
+
+const { description, label, fieldError, input } = fieldStyles()
+
+const Label = ({ className, ...props }: LabelProps) => {
+    return <LabelPrimitive {...props} className={label({ className })} />
 }
 
-const Description = (props: TextProps) => {
-    return <Text {...props} slot="description" className={twMerge('text-sm text-muted-fg', props.className)} />
+const Description = ({ className, ...props }: TextProps) => {
+    return <Text {...props} slot="description" className={description({ className })} />
 }
 
-const FieldError = (props: FieldErrorProps) => {
-    return (
-        <FieldErrorPrimitive
-            {...props}
-            className={ctr(props.className, 'text-sm text-danger forced-colors:text-[Mark]')}
-        />
-    )
+const FieldError = ({ className, ...props }: FieldErrorProps) => {
+    return <FieldErrorPrimitive {...props} className={ctr(className, fieldError())} />
 }
 
 const fieldGroupStyles = tv({
@@ -59,15 +73,6 @@ const fieldGroupStyles = tv({
     ]
 })
 
-const fieldGroupPrefixStyles = tv({
-    base: [
-        'flex group-invalid:border-danger group-disabled:bg-secondary group-disabled:opacity-50 items-center group-invalid:focus-within:ring-danger/20',
-        '[&>.x2e2>.kbt32x]:size-7 [&>.x2e2>.kbt32x]:rounded-sm [&>.x2e2:has(.kbt32x)]:size-9 [&>.x2e2:has(.kbt32x)]:grid [&>.x2e2:has(.kbt32x)]:place-items-center',
-        '[&>.x2e2>.kbt32x]:before:rounded-[calc(theme(borderRadius.sm)-1px)] [&>.x2e2>.kbt32x]:after:rounded-[calc(theme(borderRadius.sm)-1px)] dark:[&>.x2e2>.kbt32x]:after:rounded-sm',
-        '[&>.isSfx:has(.kbt32x)]:-mr-2 [&>.isPfx:has(.kbt32x)]:-ml-2 [&>.isSfx>.kbt32x]:mr-0.5 [&>.isPfx>.kbt32x]:ml-0.5'
-    ]
-})
-
 const FieldGroup = (props: GroupProps) => {
     return (
         <Group
@@ -80,16 +85,7 @@ const FieldGroup = (props: GroupProps) => {
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-    return (
-        <InputPrimitive
-            ref={ref}
-            {...props}
-            className={ctr(
-                props.className,
-                'w-full min-w-0 bg-transparent p-2 text-base text-fg placeholder-muted-fg focus:outline-none lg:text-sm'
-            )}
-        />
-    )
+    return <InputPrimitive ref={ref} {...props} className={ctr(props.className, input())} />
 })
 Input.displayName = 'Input'
 

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

@@ -34,12 +34,8 @@ const TextField = ({
 }: TextFieldProps) => {
     return (
         <TextFieldPrimitive {...props} className={ctr(props.className, 'group flex flex-col gap-1')}>
-            {label && <Label id="x21z-id">{label}</Label>}
-            <FieldGroup
-                aria-labelledby={label ? 'x21z-id' : undefined}
-                data-loading={isLoading ? 'true' : undefined}
-                className={fieldGroupPrefixStyles()}
-            >
+            {label && <Label>{label}</Label>}
+            <FieldGroup data-loading={isLoading ? 'true' : undefined} className={fieldGroupPrefixStyles()}>
                 {isLoading && indicatorPlace === 'prefix' ? (
                     <IconLoader className="animate-spin isPfx" />
                 ) : prefix ? (

resources/js/components/ui/toast.tsx

@@ -1,8 +1,8 @@
+import { useTheme } from '@/components/theme-provider'
 import { IconCheck, IconCircleInfoFill, IconLoader, IconTriangleInfoFill } from '@irsyadadl/paranoid'
 import { Toaster as ToasterPrimitive, type ToasterProps } from 'sonner'
 import { twJoin } from 'tailwind-merge'
 
-import { useTheme } from 'components/theme-provider'
 import { buttonStyles } from './button'
 
 const Toast = ({ ...props }: ToasterProps) => {
@@ -23,11 +23,11 @@ const Toast = ({ ...props }: ToasterProps) => {
                 closeButton: true,
                 classNames: {
                     toast: twJoin(
-                        'bg-background ring-1 ring-border dark:ring-inset min-w-[22rem] rounded-xl text-fg overflow-hidden text-[0.925rem] backdrop-blur-xl px-4 py-3 font-normal sm:px-5 sm:py-5',
+                        'bg-background ring-1 ring-border dark:ring-inset sm:min-w-[22rem] rounded-xl text-fg overflow-hidden text-[0.925rem] backdrop-blur-xl px-4 py-3 font-normal sm:px-5 sm:py-5',
                         '[&:has([data-icon])_[data-content]]:ml-5',
                         '[&:has([data-button])_[data-close-button="true"]]:hidden',
                         '[&:not([data-description])_[data-title]]:font-normal',
-                        '[&:has([data-description])_[data-title]]:!font-medium',
+                        '[&:has([data-description])_[data-title]]:!font-medium [&:has([data-description])_[data-title]]:!text-lg',
                         '[&>[data-button]]:absolute [&>[data-button=true]]:bottom-4',
                         '[&>[data-action=true]]:right-4',
                         '[&>[data-cancel=true]]:left-4'