lfg

components/docs/anatomies/textarea-anatomy.tsx

@@ -1,5 +1,5 @@
 import { Textarea } from "ui"
 
 export default function TextareaAnatomy() {
-  return <Textarea label="Address" />
+  return <Textarea label="Address" description="Please enter your address" />
 }

components/docs/forms/checkbox/checkbox-group-uncontrolled-demo.tsx

@@ -0,0 +1,15 @@
+"use client"
+
+import React from "react"
+
+import { Checkbox, CheckboxGroup } from "ui"
+
+export default function CheckboxGroupUncontrolledDemo() {
+  return (
+    <CheckboxGroup defaultValue={["sound", "wifi"]} label="Options">
+      <Checkbox value="sound">Sound</Checkbox>
+      <Checkbox value="wifi">Wi-Fi</Checkbox>
+      <Checkbox value="sync">Sync</Checkbox>
+    </CheckboxGroup>
+  )
+}

components/docs/forms/checkbox/checkbox-uncontrolled-demo.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import React from "react"
+
+import { Checkbox } from "ui"
+
+export default function CheckboxUncontrolledDemo() {
+  return (
+    <Checkbox defaultSelected value="updates">
+      Receive Updates
+    </Checkbox>
+  )
+}

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

@@ -0,0 +1,9 @@
+"use client"
+
+import React from "react"
+
+import { NumberField } from "ui"
+
+export default function NumberFieldUncontrolledDemo() {
+  return <NumberField label="Width" defaultValue={1997} />
+}

components/docs/forms/radio-group/radio-group-children-description-demo.tsx

@@ -4,7 +4,7 @@ import { Radio, RadioGroup } from "ui"
 
 export default function RadioGroupChildrenDescriptionDemo() {
   return (
-    <RadioGroup orientation="horizontal">
+    <RadioGroup>
       <Radio value="basic" description="Basic plan with limited features">
         Basic
       </Radio>

components/docs/forms/radio-group/radio-group-uncontrolled-demo.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import React from "react"
+
+import { Radio, RadioGroup } from "ui"
+
+export default function RadioGroupUncontrolledDemo() {
+  return (
+    <RadioGroup label="Features" defaultValue="theme">
+      <Radio value="language">Language</Radio>
+      <Radio value="timezone">Timezone</Radio>
+      <Radio value="notifications">Notifications</Radio>
+      <Radio value="privacy">Privacy</Radio>
+    </RadioGroup>
+  )
+}

components/docs/forms/search-field/search-field-description-demo.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import { SearchField } from "ui"
+
+export default function SearchFieldDescriptionDemo() {
+  return <SearchField aria-label="Search" placeholder="Search" description="Search for a product" />
+}

components/docs/forms/search-field/search-field-readonly-demo.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import { SearchField } from "ui"
+
+export default function SearchFieldDescriptionDemo() {
+  return <SearchField aria-label="Search" isReadOnly placeholder="Search" />
+}

components/docs/forms/search-field/search-field-uncontrolled-demo.tsx

@@ -0,0 +1,9 @@
+"use client"
+
+import React from "react"
+
+import { SearchField } from "ui"
+
+export default function SearchFieldControlledDemo() {
+  return <SearchField defaultValue="Laravel" />
+}

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

@@ -0,0 +1,7 @@
+"use client"
+
+import { TextField } from "ui"
+
+export default function TextFieldDescriptionDemo() {
+  return <TextField label="Name" description="Please enter your legal name." />
+}

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

@@ -0,0 +1,9 @@
+"use client"
+
+import React from "react"
+
+import { TextField } from "ui"
+
+export default function TextFieldUncontrolledDemo() {
+  return <TextField defaultValue="Irsyad" label="Name" className="mb-2" />
+}

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

@@ -0,0 +1,9 @@
+"use client"
+
+import React from "react"
+
+import { Textarea } from "ui"
+
+export default function TextareaDescriptionDemo() {
+  return <Textarea label="Address" description="Please enter your address" />
+}

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

@@ -0,0 +1,9 @@
+"use client"
+
+import React from "react"
+
+import { Textarea } from "ui"
+
+export default function TextareaUncontrolledDemo() {
+  return <Textarea defaultValue="Brooklyn New York, USA" label="Address" className="mb-2" />
+}

components/docs/generated/previews.ts

@@ -110,6 +110,9 @@ export const previews: Record<string, any> = {
   "forms/number-field/number-field-controlled-demo": {
     component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-controlled-demo")),
   },
+  "forms/number-field/number-field-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-uncontrolled-demo")),
+  },
   "forms/number-field/number-field-demo": {
     component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-demo")),
   },
@@ -122,6 +125,9 @@ export const previews: Record<string, any> = {
   "forms/checkbox/checkbox-group-validation-demo": {
     component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-validation-demo")),
   },
+  "forms/checkbox/checkbox-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-uncontrolled-demo")),
+  },
   "forms/checkbox/checkbox-indeterminate-demo": {
     component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-indeterminate-demo")),
   },
@@ -137,6 +143,9 @@ export const previews: Record<string, any> = {
   "forms/checkbox/checkbox-invalid-demo": {
     component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-invalid-demo")),
   },
+  "forms/checkbox/checkbox-group-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-uncontrolled-demo")),
+  },
   "forms/checkbox/checkbox-group-indeterminate-demo": {
     component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-indeterminate-demo")),
   },
@@ -155,9 +164,15 @@ export const previews: Record<string, any> = {
   "forms/textarea/textarea-controlled-demo": {
     component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-controlled-demo")),
   },
+  "forms/textarea/textarea-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-uncontrolled-demo")),
+  },
   "forms/textarea/textarea-readonly-demo": {
     component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-readonly-demo")),
   },
+  "forms/textarea/textarea-description-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-description-demo")),
+  },
   "forms/textarea/textarea-disabled-demo": {
     component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-disabled-demo")),
   },
@@ -176,6 +191,12 @@ export const previews: Record<string, any> = {
   "forms/text-field/text-field-prefix-suffix-demo": {
     component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-prefix-suffix-demo")),
   },
+  "forms/text-field/text-field-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-uncontrolled-demo")),
+  },
+  "forms/text-field/text-field-description-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-description-demo")),
+  },
   "forms/text-field/text-field-revealable-demo": {
     component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-revealable-demo")),
   },
@@ -200,6 +221,9 @@ export const previews: Record<string, any> = {
   "forms/radio-group/radio-group-controlled-demo": {
     component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-controlled-demo")),
   },
+  "forms/radio-group/radio-group-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-uncontrolled-demo")),
+  },
   "forms/radio-group/radio-group-orientation-demo": {
     component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-orientation-demo")),
   },
@@ -227,9 +251,18 @@ export const previews: Record<string, any> = {
   "forms/search-field/search-field-demo": {
     component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-demo")),
   },
+  "forms/search-field/search-field-readonly-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-readonly-demo")),
+  },
+  "forms/search-field/search-field-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-uncontrolled-demo")),
+  },
   "forms/search-field/search-field-with-label-demo": {
     component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-with-label-demo")),
   },
+  "forms/search-field/search-field-description-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-description-demo")),
+  },
   "forms/search-field/search-field-validation-demo": {
     component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-validation-demo")),
   },
@@ -974,6 +1007,9 @@ export const previews: Record<string, any> = {
   "pickers/select/select-controlled-demo": {
     component: React.lazy(() => import("@/components/docs/pickers/select/select-controlled-demo")),
   },
+  "pickers/select/select-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/select/select-uncontrolled-demo")),
+  },
   "pickers/select/select-section-demo": {
     component: React.lazy(() => import("@/components/docs/pickers/select/select-section-demo")),
   },

components/docs/pickers/select/select-uncontrolled-demo.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import React from "react"
+
+import { Select } from "ui"
+
+export const movies = [
+  { id: 1, title: "Inception" },
+  { id: 2, title: "The Dark Knight" },
+  { id: 3, title: "Interstellar" },
+  { id: 4, title: "The Matrix" },
+  { id: 5, title: "Pulp Fiction" }
+]
+
+export default function SelectUncontrolledDemo() {
+  return (
+    <Select defaultSelectedKey={2} label="Movies" placeholder="Select a movie">
+      <Select.Trigger />
+      <Select.List items={movies}>
+        {(item) => (
+          <Select.Option id={item.id} textValue={item.title}>
+            {item.title}
+          </Select.Option>
+        )}
+      </Select.List>
+    </Select>
+  )
+}

components/ui/combo-box.tsx

@@ -24,7 +24,7 @@ import { ctr } from "./primitive"
 
 const comboboxStyles = tv({
   slots: {
-    base: "group w-full flex flex-col",
+    base: "group w-full flex flex-col gap-y-1.5",
     chevronButton:
       "h-7 w-8 [&_[data-slot=icon]]:text-muted-fg hover:[&_[data-slot=icon]]:text-fg pressed:[&_[data-slot=icon]]:text-fg rounded outline-offset-0 active:bg-transparent hover:bg-transparent pressed:bg-transparent",
     chevronIcon: "transition shrink-0 size-4 duration-200 group-open:rotate-180 group-open:text-fg",
@@ -53,7 +53,7 @@ const ComboBox = <T extends object>({
 }: ComboBoxProps<T>) => {
   return (
     <ComboboxPrimitive {...props} className={ctr(className, base())}>
-      {label && <Label className="mb-1.5">{label}</Label>}
+      {label && <Label>{label}</Label>}
       <>{children}</>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>

components/ui/date-field.tsx

@@ -28,7 +28,7 @@ const DateField = <T extends DateValue>({
 }: DateFieldProps<T>) => {
   return (
     <DateFieldPrimitive {...props} className={ctr(props.className, "flex flex-col")}>
-      {label && <Label className="mb-1.5">{label}</Label>}
+      {label && <Label>{label}</Label>}
       <DateInput />
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>

components/ui/date-picker.tsx

@@ -23,7 +23,7 @@ import { RangeCalendar } from "./range-calendar"
 
 const datePickerStyles = tv({
   slots: {
-    base: "group flex flex-col",
+    base: "group flex flex-col gap-y-1.5",
     datePickerIcon:
       "group mr-1 h-7 [&>[data-slot=icon]]:text-muted-fg w-8 rounded outline-offset-0 hover:bg-transparent pressed:bg-transparent",
     calendarIcon: "size-4 text-muted-fg group-open:text-fg",
@@ -86,7 +86,7 @@ const DatePicker = <T extends DateValue>({
 }: DatePickerProps<T>) => {
   return (
     <DatePickerPrimitive {...props} className={ctr(className, base())}>
-      {label && <Label className="mb-1.5">{label}</Label>}
+      {label && <Label>{label}</Label>}
       <FieldGroup className="min-w-40">
         <DateInput className={datePickerInput()} />
         <DatePickerIcon />

components/ui/date-range-picker.tsx

@@ -17,7 +17,7 @@ import { ctr } from "./primitive"
 
 const dateRangePickerStyles = tv({
   slots: {
-    base: "group flex flex-col",
+    base: "group flex flex-col gap-y-1.5",
     dateRangePickerInputStart: "px-2 lg:text-sm tabular-nums uppercase text-base",
     dateRangePickerInputEnd: "flex-1 px-2 py-1.5 tabular-nums uppercase text-base lg:text-sm",
     dateRangePickerDash:
@@ -42,7 +42,7 @@ const DateRangePicker = <T extends DateValue>({
 }: DateRangePickerProps<T>) => {
   return (
     <DateRangePickerPrimitive {...props} className={ctr(className, base())}>
-      {label && <Label className="mb-1.5">{label}</Label>}
+      {label && <Label>{label}</Label>}
       <FieldGroup className="w-auto min-w-40">
         <DateInput slot="start" className={dateRangePickerInputStart()} />
         <span aria-hidden="true" className={dateRangePickerDash()}>

components/ui/field.tsx

@@ -54,7 +54,7 @@ const fieldStyles = tv({
   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]",
+    fieldError: "text-sm/6 text-danger forced-colors:text-[Mark]",
     input: [
       "w-full min-w-0 [&::-ms-reveal]:hidden bg-transparent py-2 px-2.5 text-base text-fg placeholder-muted-fg outline-none focus:outline-none lg:text-sm"
     ]

components/ui/number-field.tsx

@@ -15,7 +15,7 @@ import { ctr, useMediaQuery } from "./primitive"
 
 const numberFieldStyles = tv({
   slots: {
-    base: "group flex flex-col",
+    base: "group flex flex-col gap-y-1.5",
     stepperButton:
       "h-10 cursor-default px-2 text-muted-fg pressed:bg-primary pressed:text-primary-fg group-disabled:bg-secondary forced-colors:group-disabled:text-[GrayText]"
   }
@@ -41,7 +41,7 @@ const NumberField = ({
   const isMobile = useMediaQuery("(max-width: 768px)")
   return (
     <NumberFieldPrimitive {...props} className={ctr(className, base())}>
-      {label && <Label className="mb-1.5">{label}</Label>}
+      {label && <Label>{label}</Label>}
       <FieldGroup className="group-disabled:bg-secondary">
         {(renderProps) => (
           <>

components/ui/progress-bar.tsx

@@ -21,7 +21,7 @@ const ProgressBar = ({ label, className, ...props }: ProgressBarProps) => {
       {({ percentage, valueText, isIndeterminate }) => (
         <>
           <div className="flex justify-between gap-2">
-            {label && <Label className="mb-1.5">{label}</Label>}
+            {label && <Label>{label}</Label>}
             <span className="text-sm text-muted-fg tabular-nums">{valueText}</span>
           </div>
           <div className="relative h-2 min-w-64 overflow-hidden rounded-full bg-secondary outline outline-1 -outline-offset-1 outline-transparent">

components/ui/range-calendar.tsx

@@ -25,7 +25,7 @@ const cellRangeStyles = tv({
       none: "group-hover:bg-secondary-fg/15 group-pressed:bg-secondary-fg/20 forced-colors:group-pressed:bg-[Highlight]",
       middle: [
         "group-hover:bg-primary/20 forced-colors:group-hover:bg-[Highlight]",
-        "group-invalid:group-hover:bg-red-200 dark:group-invalid:group-hover:bg-red-900 forced-colors:group-invalid:group-hover:bg-[Mark]",
+        "group-invalid:group-hover:bg-red-200 group-invalid:text-red-500 dark:group-invalid:group-hover:bg-red-900 forced-colors:group-invalid:group-hover:bg-[Mark]",
         "group-pressed:bg-primary forced-colors:text-[HighlightText] forced-colors:group-pressed:bg-[Highlight]",
         "group-invalid:group-pressed:bg-red-300 dark:group-invalid:group-pressed:bg-red-800 forced-colors:group-invalid:group-pressed:bg-[Mark]"
       ],

components/ui/search-field.tsx

@@ -15,7 +15,7 @@ import { ctr } from "./primitive"
 
 const searchFieldStyles = tv({
   slots: {
-    base: "group flex min-w-10 flex-col",
+    base: "group flex min-w-10 flex-col gap-y-1.5",
     searchIcon:
       "ml-2.5 size-4 shrink-0 text-muted-fg group-disabled:text-muted-fg forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]",
     clearButton: [
@@ -50,7 +50,7 @@ const SearchField = ({
       {...props}
       className={ctr(className, base())}
     >
-      {label && <Label className="mb-1.5">{label}</Label>}
+      {label && <Label>{label}</Label>}
       <FieldGroup>
         <IconSearch aria-hidden className={searchIcon()} />
         <Input placeholder={placeholder ?? "Search..."} className={input()} />