get the latest update from justd

package.json

@@ -1,83 +1,83 @@
 {
-    "private": true,
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "tsc && vite build && vite build --ssr",
-        "format": "prettier --write .",
-        "release": "release-it"
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && vite build --ssr",
+    "format": "prettier --write .",
+    "release": "release-it"
+  },
+  "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/conventional-changelog": "^8.0.1",
+    "@tailwindcss/forms": "^0.5.7",
+    "@types/node": "^18.19.44",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "axios": "^1.7.3",
+    "husky": "^9.1.4",
+    "laravel-vite-plugin": "^1.0.5",
+    "postcss": "^8.4.41",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.0.0",
+    "prettier-plugin-tailwindcss": "^0.6.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "release-it": "^17.6.0",
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0",
+    "vite-plugin-watch": "^0.3.1"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.3.24",
+    "justd-icons": "^1.4.29",
+    "react-aria-components": "^1.3.1",
+    "sonner": "^1.5.0",
+    "tailwind-merge": "^2.4.0",
+    "tailwind-variants": "^0.2.1",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-react-aria-components": "^1.1.4"
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release v${version}"
     },
-    "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/conventional-changelog": "^8.0.1",
-        "@tailwindcss/forms": "^0.5.7",
-        "@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.20",
-        "axios": "^1.7.3",
-        "husky": "^9.1.4",
-        "laravel-vite-plugin": "^1.0.5",
-        "postcss": "^8.4.41",
-        "prettier": "^3.3.3",
-        "prettier-plugin-organize-imports": "^4.0.0",
-        "prettier-plugin-tailwindcss": "^0.6.5",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "release-it": "^17.6.0",
-        "tailwindcss": "^3.4.8",
-        "typescript": "^5.5.4",
-        "vite": "^5.4.0",
-        "vite-plugin-watch": "^0.3.1"
+    "github": {
+      "release": true
     },
-    "dependencies": {
-        "clsx": "^2.1.1",
-        "framer-motion": "^11.3.23",
-        "justd-icons": "^1.4.21",
-        "react-aria-components": "^1.3.1",
-        "sonner": "^1.5.0",
-        "tailwind-merge": "^2.4.0",
-        "tailwind-variants": "^0.2.1",
-        "tailwindcss-animate": "^1.0.7",
-        "tailwindcss-react-aria-components": "^1.1.4"
-    },
-    "release-it": {
-        "git": {
-            "commitMessage": "chore: release v${version}"
-        },
-        "github": {
-            "release": true
-        },
-        "plugins": {
-            "@release-it/conventional-changelog": {
-                "infile": "CHANGELOG.md",
-                "preset": {
-                    "name": "conventionalcommits",
-                    "types": [
-                        {
-                            "type": "feat",
-                            "section": "Features"
-                        },
-                        {
-                            "type": "fix",
-                            "section": "Bug Fixes"
-                        },
-                        {
-                            "type": "chore",
-                            "section": "Chores"
-                        }
-                    ]
-                }
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "infile": "CHANGELOG.md",
+        "preset": {
+          "name": "conventionalcommits",
+          "types": [
+            {
+              "type": "feat",
+              "section": "Features"
+            },
+            {
+              "type": "fix",
+              "section": "Bug Fixes"
             },
-            "@release-it/bumper": {
-                "in": "composer.json",
-                "out": "composer.json"
+            {
+              "type": "chore",
+              "section": "Chores"
             }
+          ]
         }
-    },
-    "version": "1.0.7"
+      },
+      "@release-it/bumper": {
+        "in": "composer.json",
+        "out": "composer.json"
+      }
+    }
+  },
+  "version": "1.0.7"
 }

resources/js/components/ui/field.tsx

@@ -1,102 +1,116 @@
+'use client'
+
 import * as React from 'react'
 
 import {
-    composeRenderProps,
-    FieldError as FieldErrorPrimitive,
-    type FieldErrorProps,
-    Group,
-    type GroupProps,
-    Input as InputPrimitive,
-    type InputProps,
-    Label as LabelPrimitive,
-    type LabelProps,
-    Text,
-    type TextProps
+  composeRenderProps,
+  FieldError as FieldErrorPrimitive,
+  type FieldErrorProps,
+  Group,
+  type GroupProps,
+  Input as InputPrimitive,
+  type InputProps,
+  Label as LabelPrimitive,
+  type LabelProps,
+  Text,
+  type TextFieldProps as TextFieldPrimitiveProps,
+  type TextProps,
+  type ValidationResult
 } from 'react-aria-components'
 import { tv } from 'tailwind-variants'
 
 import { ctr } from './primitive'
 
 // primitive styles
 
+interface FieldProps {
+  label?: string
+  placeholder?: string
+  description?: string
+  errorMessage?: string | ((validation: ValidationResult) => string)
+  'aria-label'?: TextFieldPrimitiveProps['aria-label']
+  'aria-labelledby'?: TextFieldPrimitiveProps['aria-labelledby']
+}
+
 // primitive styles
 const fieldBorderStyles = tv({
-    base: 'group-focus-within:border-primary forced-colors:border-[Highlight]',
-    variants: {
-        isInvalid: {
-            true: 'border-danger/70 group-focus-within:border-danger/70 forced-colors:border-[Mark]'
-        }
+  base: 'group-focus-within:border-primary forced-colors:border-[Highlight]',
+  variants: {
+    isInvalid: {
+      true: 'border-danger/70 group-focus-within:border-danger/70 forced-colors:border-[Mark]'
     }
+  }
 })
 
 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'
-    ]
+  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'
-        ]
-    }
+  slots: {
+    description: 'text-pretty text-base/6 text-muted-fg sm:text-sm/6',
+    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 outline-none focus:outline-none lg:text-sm'
+    ]
+  }
 })
 
 const { description, label, fieldError, input } = fieldStyles()
 
 const Label = ({ className, ...props }: LabelProps) => {
-    return <LabelPrimitive {...props} className={label({ className })} />
+  return <LabelPrimitive {...props} className={label({ className })} />
 }
 
 const Description = ({ className, ...props }: TextProps) => {
-    return <Text {...props} slot="description" className={description({ className })} />
+  return <Text {...props} slot="description" className={description({ className })} />
 }
 
 const FieldError = ({ className, ...props }: FieldErrorProps) => {
-    return <FieldErrorPrimitive {...props} className={ctr(className, fieldError())} />
+  return <FieldErrorPrimitive {...props} className={ctr(className, fieldError())} />
 }
 
 const fieldGroupStyles = tv({
-    base: [
-        'group flex h-10 items-center overflow-hidden rounded-lg border border-input bg-background transition disabled:opacity-50 disabled:bg-secondary forced-colors:bg-[Field]',
-        'focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20',
-        'focus-within:invalid:border-danger focus-within:invalid:ring-4 focus-within:invalid:ring-danger/20',
-        'invalid:border-danger',
-        'has-[.isPfx]:pl-2.5 has-[.isSfx]:pr-2.5 [&_[data-slot=icon]]:size-4 has-[.atrs]:shrink-0 has-[.atrs]:text-muted-fg'
-    ]
+  base: [
+    'group flex h-10 items-center overflow-hidden rounded-lg border border-input bg-background transition disabled:opacity-50 disabled:bg-secondary forced-colors:bg-[Field]',
+    'focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20',
+    'focus-within:invalid:border-danger focus-within:invalid:ring-4 focus-within:invalid:ring-danger/20',
+    'invalid:border-danger',
+    'has-[.isPfx]:pl-2.5 has-[.isSfx]:pr-2.5 [&_[data-slot=icon]]:size-4 has-[.atrs]:shrink-0 has-[.atrs]:text-muted-fg'
+  ]
 })
 
 const FieldGroup = (props: GroupProps) => {
-    return (
-        <Group
-            {...props}
-            className={composeRenderProps(props.className, (className, renderProps) =>
-                fieldGroupStyles({ ...renderProps, className })
-            )}
-        />
-    )
+  return (
+    <Group
+      {...props}
+      className={composeRenderProps(props.className, (className, renderProps) =>
+        fieldGroupStyles({ ...renderProps, className })
+      )}
+    />
+  )
 }
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-    return <InputPrimitive ref={ref} {...props} className={ctr(props.className, input())} />
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
+  return <InputPrimitive ref={ref} {...props} className={ctr(className, input())} />
 })
 Input.displayName = 'Input'
 
 export {
-    Description,
-    fieldBorderStyles,
-    FieldError,
-    FieldGroup,
-    fieldGroupPrefixStyles,
-    fieldGroupStyles,
-    Input,
-    InputPrimitive,
-    Label
+  Description,
+  fieldBorderStyles,
+  FieldError,
+  FieldGroup,
+  fieldGroupPrefixStyles,
+  fieldGroupStyles,
+  Input,
+  InputPrimitive,
+  Label,
+  type FieldProps
 }