make field better and better

components/docs/colors/color-field/color-field-validation-demo.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import { Button, ColorField, Form } from "ui"
+
+export default function ColorFieldValidationDemo() {
+  function submit(e: React.FormEvent) {
+    e.preventDefault()
+  }
+
+  return (
+    <Form onSubmit={submit} className="space-y-4">
+      <ColorField label="Color" isRequired placeholder="#FAFAFA" />
+      <Button type="submit">Save</Button>
+    </Form>
+  )
+}

components/docs/date-and-time/date-field/date-field-controlled-demo.tsx

@@ -6,7 +6,7 @@ import { getLocalTimeZone, parseDate, today } from "@internationalized/date"
 import { useDateFormatter } from "@react-aria/i18n"
 import { DateField } from "ui"
 
-export default function DateFieldDisabledDemo() {
+export default function DateFieldControlledDemo() {
   const now = today(getLocalTimeZone())
   const [value, setValue] = React.useState(parseDate(now.toString()))
 

components/docs/date-and-time/date-field/date-field-prefix-demo.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { IconCalendar2 } from "justd-icons"
+import { Button, DateField, Form } from "ui"
+
+export default function DateFieldPrefixDemo() {
+  return (
+    <Form onSubmit={(e) => e.preventDefault()}>
+      <DateField prefix={<IconCalendar2 />} isRequired label="Event date" className="mb-2" />
+      <Button type="submit">Submit</Button>
+    </Form>
+  )
+}

components/docs/date-and-time/date-field/date-field-readonly-demo.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import React from "react"
+
+import { getLocalTimeZone, parseDate, today } from "@internationalized/date"
+import { DateField } from "ui"
+
+export default function DateFieldReadonlyDemo() {
+  const now = today(getLocalTimeZone())
+  return <DateField isReadOnly defaultValue={parseDate(now.toString())} label="Event date" />
+}

components/docs/date-and-time/date-field/date-field-suffix-demo.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { IconCalendar2 } from "justd-icons"
+import { Button, DateField, Form } from "ui"
+
+export default function DateFieldSuffixDemo() {
+  return (
+    <Form onSubmit={(e) => e.preventDefault()}>
+      <DateField suffix={<IconCalendar2 />} isRequired label="Event date" className="mb-2" />
+      <Button type="submit">Submit</Button>
+    </Form>
+  )
+}

components/docs/date-and-time/date-field/date-field-uncontrolled-demo.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import React from "react"
+
+import { getLocalTimeZone, parseDate, today } from "@internationalized/date"
+import { DateField } from "ui"
+
+export default function DateFieldUncontrolledDemo() {
+  const now = today(getLocalTimeZone())
+  return <DateField defaultValue={parseDate(now.toString())} label="Event date" />
+}

components/docs/date-and-time/date-field/date-field-validation-demo.tsx

@@ -2,7 +2,7 @@
 
 import { Button, DateField, Form } from "ui"
 
-export default function DateFieldDisabledDemo() {
+export default function DateFieldValidationDemo() {
   return (
     <Form onSubmit={(e) => e.preventDefault()}>
       <DateField isRequired label="Event date" className="mb-2" />

components/docs/date-and-time/time-field/time-field-controlled-demo.tsx

@@ -5,7 +5,7 @@ import React from "react"
 import { Time } from "@internationalized/date"
 import { TimeField } from "ui"
 
-export default function TimeFieldValidationDemo() {
+export default function TimeFieldControlledDemo() {
   const [value, setValue] = React.useState(new Time(11, 45))
   return (
     <div className="space-y-3">

components/docs/date-and-time/time-field/time-field-prefix-demo.tsx

@@ -0,0 +1,8 @@
+"use client"
+
+import { Time } from "@internationalized/date"
+import { TimeField } from "ui"
+
+export default function TimeFieldPrefixDemo() {
+  return <TimeField prefix="UTC" defaultValue={new Time()} label="Event time" />
+}

components/docs/date-and-time/time-field/time-field-readonly-demo.tsx

@@ -0,0 +1,8 @@
+"use client"
+
+import { Time } from "@internationalized/date"
+import { TimeField } from "ui"
+
+export default function TimeFieldReadonlyDemo() {
+  return <TimeField isReadOnly defaultValue={new Time()} label="Event time" />
+}

components/docs/date-and-time/time-field/time-field-suffix-demo.tsx

@@ -0,0 +1,9 @@
+"use client"
+
+import { Time } from "@internationalized/date"
+import { IconClock } from "justd-icons"
+import { TimeField } from "ui"
+
+export default function TimeFieldSuffixDemo() {
+  return <TimeField suffix={<IconClock />} defaultValue={new Time()} label="Event time" />
+}

components/docs/forms/number-field/number-field-invalid-demo.tsx

@@ -1,7 +1,12 @@
 "use client"
 
-import { NumberField } from "ui"
+import { Button, Form, NumberField } from "ui"
 
 export default function NumberFieldInvalidDemo() {
-  return <NumberField isInvalid label="Cookies" />
+  return (
+    <Form onSubmit={(e) => e.preventDefault()} className="space-y-4">
+      <NumberField isRequired label="Cookies" />
+      <Button type="submit">Submit</Button>
+    </Form>
+  )
 }

components/docs/forms/text-field/text-field-disabled-demo.tsx

@@ -3,5 +3,5 @@
 import { TextField } from "ui"
 
 export default function TextFieldDisabledDemo() {
-  return <TextField isDisabled label="Name" />
+  return <TextField isDisabled label="Name" placeholder="Kurt Cobain" />
 }

components/docs/forms/text-field/text-field-validation-demo.tsx

@@ -4,8 +4,8 @@ import { Button, Form, TextField } from "ui"
 
 export default function TextFieldValidationDemo() {
   return (
-    <Form>
-      <TextField isRequired label="Name" className="mb-2" />
+    <Form className="space-y-4">
+      <TextField isRequired label="Name" />
       <Button type="submit">Submit</Button>
     </Form>
   )

components/docs/forms/textarea/textarea-validation-demo.tsx

@@ -7,8 +7,8 @@ import { Button, Form, Textarea } from "ui"
 export default function TextareaValidationDemo() {
   const [value, setValue] = React.useState("")
   return (
-    <Form onSubmit={(e) => e.preventDefault()}>
-      <Textarea value={value} onChange={setValue} label="Address" isRequired className="mb-2" />
+    <Form onSubmit={(e) => e.preventDefault()} className="space-y-4">
+      <Textarea value={value} onChange={setValue} label="Address" isRequired />
       <Button type="submit">Submit</Button>
     </Form>
   )

components/docs/generated/previews.ts

@@ -8,12 +8,24 @@ export const previews: Record<string, any> = {
   "date-and-time/date-field/date-field-demo": {
     component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-demo")),
   },
+  "date-and-time/date-field/date-field-prefix-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-prefix-demo")),
+  },
   "date-and-time/date-field/date-field-controlled-demo": {
     component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-controlled-demo")),
   },
+  "date-and-time/date-field/date-field-suffix-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-suffix-demo")),
+  },
+  "date-and-time/date-field/date-field-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-uncontrolled-demo")),
+  },
   "date-and-time/date-field/date-field-disabled-demo": {
     component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-disabled-demo")),
   },
+  "date-and-time/date-field/date-field-readonly-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-readonly-demo")),
+  },
   "date-and-time/date-field/date-time-field-demo": {
     component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-time-field-demo")),
   },
@@ -50,23 +62,23 @@ export const previews: Record<string, any> = {
   "date-and-time/time-field/time-field-disabled-demo": {
     component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-disabled-demo")),
   },
-  "date-and-time/time-field/date-field-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/date-field-controlled-demo")),
-  },
   "date-and-time/time-field/time-field-validation-demo": {
     component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-validation-demo")),
   },
-  "date-and-time/time-field/date-field-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/date-field-disabled-demo")),
+  "date-and-time/time-field/time-field-suffix-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-suffix-demo")),
   },
   "date-and-time/time-field/time-field-hc-demo": {
     component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-hc-demo")),
   },
   "date-and-time/time-field/time-field-controlled-demo": {
     component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-controlled-demo")),
   },
-  "date-and-time/time-field/date-field-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/date-field-validation-demo")),
+  "date-and-time/time-field/time-field-prefix-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-prefix-demo")),
+  },
+  "date-and-time/time-field/time-field-readonly-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-readonly-demo")),
   },
   "date-and-time/time-field/time-field-demo": {
     component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-demo")),
@@ -890,6 +902,9 @@ export const previews: Record<string, any> = {
   "colors/color-field/color-field-with-prefix-demo": {
     component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-with-prefix-demo")),
   },
+  "colors/color-field/color-field-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-validation-demo")),
+  },
   "colors/color-field/color-field-with-suffix-demo": {
     component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-with-suffix-demo")),
   },

components/table-of-contents.tsx

@@ -112,7 +112,7 @@ function TocLink({ item, activeId }: { item: TableOfContentsProps; activeId: str
     <li key={item.title}>
       <Link
         className={cn(
-          "outline-none block no-underline tracking-tight lg:text-[0.885rem] duration-200",
+          "outline-none block no-underline tracking-tight lg:text-[0.885rem] duration-200 focus-visible:outline-none focus-visible:text-fg",
           item.url.split("#")[1] === activeId
             ? "text-fg forced-colors:text-[Highlight]"
             : "text-muted-fg/90 forced-colors:text-[GrayText]"

components/theme-switcher.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { useEffect, useState } from "react"
+
 import { IconDeviceDesktop2, IconMoon, IconSun } from "justd-icons"
 import { useTheme } from "next-themes"
 import { Button, cn } from "ui"
@@ -10,34 +12,31 @@ export function ThemeSwitcher({
   className,
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { resolvedTheme, theme, setTheme } = useTheme()
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
 
   const toggleTheme = () => {
     const nextTheme = theme === "light" ? "dark" : theme === "dark" ? "system" : "light"
     setTheme(nextTheme)
   }
 
+  if (!mounted) return null
+
   return (
     <Button
       shape={shape}
       appearance={appearance}
       size="square-petite"
       className={cn("[&_[data-slot=icon]]:text-fg", className)}
-      aria-label={
-        "Switch to " +
-        (resolvedTheme === "light" ? "dark" : resolvedTheme === "dark" ? "system" : "light") +
-        " mode"
-      }
+      aria-label="Switch theme"
       onPress={toggleTheme}
       {...props}
     >
-      {theme === "light" ? (
-        <IconSun className="animate-in" />
-      ) : theme === "dark" ? (
-        <IconMoon className="animate-in" />
-      ) : theme === "system" ? (
-        <IconDeviceDesktop2 className="animate-in" />
-      ) : null}
+      {theme === "light" ? <IconSun /> : theme === "dark" ? <IconMoon /> : <IconDeviceDesktop2 />}
     </Button>
   )
 }

components/ui/color-field.tsx

@@ -10,7 +10,7 @@ import { ColorField as ColorFieldPrimitive } from "react-aria-components"
 
 import { ColorPicker } from "./color-picker"
 import { ColorSwatch } from "./color-swatch"
-import { Description, FieldError, FieldGroup, fieldGroupPrefixStyles, Input, Label } from "./field"
+import { Description, FieldError, FieldGroup, Input, Label } from "./field"
 import { ctr } from "./primitive"
 
 interface ColorFieldProps extends ColorFieldPrimitiveProps {
@@ -47,18 +47,15 @@ const ColorField = ({
       )}
     >
       {label && <Label>{label}</Label>}
-      <FieldGroup
-        data-loading={isLoading ? "true" : undefined}
-        className={fieldGroupPrefixStyles()}
-      >
+      <FieldGroup data-loading={isLoading ? "true" : undefined}>
         {prefix ? (
           <span data-slot="prefix" className="atrs">
             {prefix}
           </span>
         ) : null}
         <div className="flex items-center">
           {value && (
-            <span>
+            <span className="ml-2">
               {enableColorPicker ? (
                 <ColorPicker onChange={props.onChange} defaultValue={value} />
               ) : (

components/ui/color-picker.tsx

@@ -21,7 +21,7 @@ import { focusButtonStyles } from "./primitive"
 
 const buttonStyles = tv({
   extend: focusButtonStyles,
-  base: "flex cursor-pointer disabled:cursor-default disabled:opacity-50 items-center rounded text-sm"
+  base: "flex btn-trigger cursor-pointer disabled:cursor-default disabled:opacity-50 items-center rounded text-sm"
 })
 
 export interface ColorPickerProps extends ColorPickerPrimitiveProps {