love-ui 1.2.12 → 1.2.14

package/public/r/field-2.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "field-2",
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "registryDependencies": [
+    "@loveui/label",
+    "@loveui/separator"
+  ],
+  "files": [
+    {
+      "path": "registry/default/ui/field-2.tsx",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { Label } from \"./label\"\nimport { Separator } from \"./separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n        horizontal: [\n          \"flex-row items-center\",\n          \"[&>[data-slot=field-label]]:flex-auto\",\n          \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        ],\n        responsive: [\n          \"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto\",\n          \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n          \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        ],\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors) {\n      return null\n    }\n\n    if (errors?.length === 1 && errors[0]?.message) {\n      return errors[0].message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {errors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/field-autocomplete.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-autocomplete.tsx",
-      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n]\n\nexport default function FieldAutocompleteDemo() {\n  return (\n    <Field>\n      <FieldLabel>Fruits</FieldLabel>\n      <Autocomplete items={items}>\n        <AutocompleteInput\n          placeholder=\"Search items…\"\n          aria-label=\"Search items\"\n        />\n        <AutocompletePopup>\n          <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n          <AutocompleteList>\n            {(item) => (\n              <AutocompleteItem key={item.value} value={item}>\n                {item.label}\n              </AutocompleteItem>\n            )}\n          </AutocompleteList>\n        </AutocompletePopup>\n      </Autocomplete>\n      <FieldDescription>Select a item.</FieldDescription>\n    </Field>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nconst items = [\n  { label: \"Updated Apple\", value: \"apple\" },\n  { label: \"Updated Banana\", value: \"banana\" },\n  { label: \"Updated Orange\", value: \"orange\" },\n  { label: \"Updated Grape\", value: \"grape\" },\n  { label: \"Updated Strawberry\", value: \"strawberry\" },\n  { label: \"Updated Mango\", value: \"mango\" },\n  { label: \"Updated Pineapple\", value: \"pineapple\" },\n  { label: \"Updated Kiwi\", value: \"kiwi\" },\n  { label: \"Updated Peach\", value: \"peach\" },\n  { label: \"Updated Pear\", value: \"pear\" },\n]\n\nexport default function FieldAutocompleteDemo() {\n  return (\n    <Field>\n      <FieldLabel>Updated Fruits</FieldLabel>\n      <Autocomplete items={items}>\n        <AutocompleteInput\n          placeholder=\"Updated Search items…\"\n          aria-label=\"Updated Search items\"\n        />\n        <AutocompletePopup>\n          <AutocompleteEmpty>Updated No items found.</AutocompleteEmpty>\n          <AutocompleteList>\n            {(item) => (\n              <AutocompleteItem key={item.value} value={item}>\n                {item.label}\n              </AutocompleteItem>\n            )}\n          </AutocompleteList>\n        </AutocompletePopup>\n      </Autocomplete>\n      <FieldDescription>Updated Select a item.</FieldDescription>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-checkbox-group.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-checkbox-group.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\"\n\nexport default function FieldCheckboxGroupDemo() {\n  return (\n    <Field\n      name=\"frameworks\"\n      className=\"gap-4\"\n      render={(props) => <Fieldset {...props} />}\n    >\n      <FieldsetLegend className=\"text-sm font-medium\">\n        Frameworks\n      </FieldsetLegend>\n      <CheckboxGroup defaultValue={[\"react\"]}>\n        <FieldLabel>\n          <Checkbox value=\"react\" /> React\n        </FieldLabel>\n        <FieldLabel>\n          <Checkbox value=\"vue\" /> Vue\n        </FieldLabel>\n        <FieldLabel>\n          <Checkbox value=\"svelte\" /> Svelte\n        </FieldLabel>\n      </CheckboxGroup>\n      <FieldDescription>Select one or more frameworks.</FieldDescription>\n    </Field>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\"\n\nexport default function FieldCheckboxGroupDemo() {\n  return (\n    <Field\n      name=\"frameworks\"\n      className=\"gap-4\"\n      render={(props) => <Fieldset {...props} />}\n    >\n      <FieldsetLegend className=\"text-sm font-medium\">\n        Updated Frameworks\n      </FieldsetLegend>\n      <CheckboxGroup defaultValue={[\"react\"]}>\n        <FieldLabel>\n          <Checkbox value=\"react\" /> Updated React\n        </FieldLabel>\n        <FieldLabel>\n          <Checkbox value=\"vue\" /> Updated Vue\n        </FieldLabel>\n        <FieldLabel>\n          <Checkbox value=\"svelte\" /> Updated Svelte\n        </FieldLabel>\n      </CheckboxGroup>\n      <FieldDescription>\n        Updated Select one or more frameworks.\n      </FieldDescription>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-checkbox.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-checkbox.tsx",
-      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\"\n\nexport default function FieldCheckboxDemo() {\n  return (\n    <Field>\n      <FieldLabel>\n        <Checkbox />\n        Accept terms and conditions\n      </FieldLabel>\n    </Field>\n  )\n}\n",
+      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\"\n\nexport default function FieldCheckboxDemo() {\n  return (\n    <Field>\n      <FieldLabel>\n        <Checkbox />\n        Updated Accept terms and conditions\n      </FieldLabel>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-combobox-multiple.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-combobox-multiple.tsx",
-      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n]\n\nexport default function FieldComboboxMultiple() {\n  return (\n    <Field>\n      <FieldLabel>Fruits</FieldLabel>\n      <Combobox items={items} multiple defaultValue={[items[0], items[4]]}>\n        <ComboboxChips>\n          <ComboboxValue>\n            {(value: { value: string; label: string }[]) => (\n              <>\n                {value?.map((item) => (\n                  <ComboboxChip key={item.value} aria-label={item.label}>\n                    {item.label}\n                  </ComboboxChip>\n                ))}\n                <ComboboxInput\n                  placeholder={value.length > 0 ? undefined : \"Select items…\"}\n                  aria-label=\"Select items\"\n                />\n              </>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxPopup>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.value} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      <FieldDescription>Select multiple items.</FieldDescription>\n    </Field>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nconst items = [\n  { label: \"Updated Apple\", value: \"apple\" },\n  { label: \"Updated Banana\", value: \"banana\" },\n  { label: \"Updated Orange\", value: \"orange\" },\n  { label: \"Updated Grape\", value: \"grape\" },\n  { label: \"Updated Strawberry\", value: \"strawberry\" },\n  { label: \"Updated Mango\", value: \"mango\" },\n  { label: \"Updated Pineapple\", value: \"pineapple\" },\n  { label: \"Updated Kiwi\", value: \"kiwi\" },\n  { label: \"Updated Peach\", value: \"peach\" },\n  { label: \"Updated Pear\", value: \"pear\" },\n]\n\nexport default function FieldComboboxMultiple() {\n  return (\n    <Field>\n      <FieldLabel>Updated Fruits</FieldLabel>\n      <Combobox items={items} multiple defaultValue={[items[0], items[4]]}>\n        <ComboboxChips>\n          <ComboboxValue>\n            {(value: { value: string; label: string }[]) => (\n              <>\n                {value?.map((item) => (\n                  <ComboboxChip key={item.value} aria-label={item.label}>\n                    {item.label}\n                  </ComboboxChip>\n                ))}\n                <ComboboxInput\n                  placeholder={value.length > 0 ? undefined : \"Select items…\"}\n                  aria-label=\"Updated Select items\"\n                />\n              </>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxPopup>\n          <ComboboxEmpty>Updated No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.value} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      <FieldDescription>Updated Select multiple items.</FieldDescription>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-combobox.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-combobox.tsx",
-      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nconst items = [\n  { value: \"apple\", label: \"Apple\" },\n  { value: \"banana\", label: \"Banana\" },\n  { value: \"orange\", label: \"Orange\" },\n  { value: \"grape\", label: \"Grape\" },\n  { value: \"strawberry\", label: \"Strawberry\" },\n  { value: \"mango\", label: \"Mango\" },\n  { value: \"pineapple\", label: \"Pineapple\" },\n  { value: \"kiwi\", label: \"Kiwi\" },\n  { value: \"peach\", label: \"Peach\" },\n  { value: \"pear\", label: \"Pear\" },\n]\n\nexport default function FieldComboboxDemo() {\n  return (\n    <Field>\n      <FieldLabel>Fruits</FieldLabel>\n      <Combobox items={items}>\n        <ComboboxInput\n          placeholder=\"Select an item...\"\n          aria-label=\"Select an item\"\n        />\n        <ComboboxPopup>\n          <ComboboxEmpty>No results found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.value} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      <FieldDescription>Select a item.</FieldDescription>\n    </Field>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nconst items = [\n  { value: \"apple\", label: \"Updated Apple\" },\n  { value: \"banana\", label: \"Updated Banana\" },\n  { value: \"orange\", label: \"Updated Orange\" },\n  { value: \"grape\", label: \"Updated Grape\" },\n  { value: \"strawberry\", label: \"Updated Strawberry\" },\n  { value: \"mango\", label: \"Updated Mango\" },\n  { value: \"pineapple\", label: \"Updated Pineapple\" },\n  { value: \"kiwi\", label: \"Updated Kiwi\" },\n  { value: \"peach\", label: \"Updated Peach\" },\n  { value: \"pear\", label: \"Updated Pear\" },\n]\n\nexport default function FieldComboboxDemo() {\n  return (\n    <Field>\n      <FieldLabel>Updated Fruits</FieldLabel>\n      <Combobox items={items}>\n        <ComboboxInput\n          placeholder=\"Updated Select an item...\"\n          aria-label=\"Updated Select an item\"\n        />\n        <ComboboxPopup>\n          <ComboboxEmpty>Updated No results found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.value} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      <FieldDescription>Updated Select a item.</FieldDescription>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-complete-form.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-complete-form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function FieldCompleteFormDemo() {\n  const [loading, setLoading] = React.useState(false)\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    const data = {\n      fullName: formData.get(\"fullName\"),\n      email: formData.get(\"email\"),\n      role: formData.get(\"role\"),\n      newsletter: formData.get(\"newsletter\"),\n    }\n    alert(\n      `Full name: ${data.fullName || \"\"}\\nEmail: ${data.email || \"\"}\\nRole: ${\n        data.role || \"\"\n      }\\nNewsletter: ${data.newsletter}`\n    )\n  }\n  return (\n    <Form onSubmit={onSubmit}>\n      <Field>\n        <FieldLabel>\n          Full Name <span className=\"text-destructive\">*</span>\n        </FieldLabel>\n        <FieldControl\n          name=\"fullName\"\n          type=\"text\"\n          placeholder=\"John Doe\"\n          disabled={loading}\n          required\n        />\n        <FieldError>Please enter a valid name.</FieldError>\n      </Field>\n\n      <Field>\n        <FieldLabel>\n          Email <span className=\"text-destructive\">*</span>\n        </FieldLabel>\n        <FieldControl\n          name=\"email\"\n          type=\"email\"\n          placeholder=\"john@example.com\"\n          disabled={loading}\n          required\n        />\n        <FieldError>Please enter a valid email.</FieldError>\n      </Field>\n\n      <Field>\n        <FieldLabel>Role</FieldLabel>\n        <Select\n          name=\"role\"\n          items={[\n            { label: \"Select your role\", value: null },\n            { label: \"Developer\", value: \"developer\" },\n            { label: \"Designer\", value: \"designer\" },\n            { label: \"Product Manager\", value: \"manager\" },\n            { label: \"Other\", value: \"other\" },\n          ]}\n          disabled={loading}\n        >\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectPopup>\n            <SelectItem value=\"developer\">Developer</SelectItem>\n            <SelectItem value=\"designer\">Designer</SelectItem>\n            <SelectItem value=\"manager\">Product Manager</SelectItem>\n            <SelectItem value=\"other\">Other</SelectItem>\n          </SelectPopup>\n        </Select>\n        <FieldDescription>This is an optional field</FieldDescription>\n      </Field>\n\n      <Field>\n        <div className=\"flex items-center gap-2\">\n          <Checkbox name=\"newsletter\" disabled={loading} />\n          <FieldLabel className=\"cursor-pointer\">\n            Subscribe to newsletter\n          </FieldLabel>\n        </div>\n      </Field>\n\n      <Button type=\"submit\" disabled={loading}>\n        Submit\n      </Button>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function FieldCompleteFormDemo() {\n  const [loading, setLoading] = React.useState(false)\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    const data = {\n      fullName: formData.get(\"fullName\"),\n      email: formData.get(\"email\"),\n      role: formData.get(\"role\"),\n      newsletter: formData.get(\"newsletter\"),\n    }\n    alert(\n      `Full name: ${data.fullName || \"\"}\\nEmail: ${data.email || \"\"}\\nRole: ${\n        data.role || \"\"\n      }\\nNewsletter: ${data.newsletter}`\n    )\n  }\n  return (\n    <Form onSubmit={onSubmit}>\n      <Field>\n        <FieldLabel>\n          Updated Full Name <span className=\"text-destructive\">*</span>\n        </FieldLabel>\n        <FieldControl\n          name=\"fullName\"\n          type=\"text\"\n          placeholder=\"Updated John Doe\"\n          disabled={loading}\n          required\n        />\n        <FieldError>Updated Please enter a valid name.</FieldError>\n      </Field>\n\n      <Field>\n        <FieldLabel>\n          Updated Email <span className=\"text-destructive\">*</span>\n        </FieldLabel>\n        <FieldControl\n          name=\"email\"\n          type=\"email\"\n          placeholder=\"john@example.com\"\n          disabled={loading}\n          required\n        />\n        <FieldError>Updated Please enter a valid email.</FieldError>\n      </Field>\n\n      <Field>\n        <FieldLabel>Updated Role</FieldLabel>\n        <Select\n          name=\"role\"\n          items={[\n            { label: \"Updated Select your role\", value: null },\n            { label: \"Updated Developer\", value: \"developer\" },\n            { label: \"Updated Designer\", value: \"designer\" },\n            { label: \"Updated Product Manager\", value: \"manager\" },\n            { label: \"Updated Other\", value: \"other\" },\n          ]}\n          disabled={loading}\n        >\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectPopup>\n            <SelectItem value=\"developer\">Updated Developer</SelectItem>\n            <SelectItem value=\"designer\">Updated Designer</SelectItem>\n            <SelectItem value=\"manager\">Updated Product Manager</SelectItem>\n            <SelectItem value=\"other\">Updated Other</SelectItem>\n          </SelectPopup>\n        </Select>\n        <FieldDescription>Updated This is an optional field</FieldDescription>\n      </Field>\n\n      <Field>\n        <div className=\"flex items-center gap-2\">\n          <Checkbox name=\"newsletter\" disabled={loading} />\n          <FieldLabel className=\"cursor-pointer\">\n            Updated Subscribe to newsletter\n          </FieldLabel>\n        </div>\n      </Field>\n\n      <Button type=\"submit\" disabled={loading}>\n        Updated Submit\n      </Button>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-demo.tsx",
-      "content": "import {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nexport default function FieldDemo() {\n  return (\n    <Field>\n      <FieldLabel>Name</FieldLabel>\n      <FieldControl type=\"text\" placeholder=\"Enter your name\" />\n      <FieldDescription>Visible on your profile</FieldDescription>\n    </Field>\n  )\n}\n",
+      "content": "import {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nexport default function FieldDemo() {\n  return (\n    <Field>\n      <FieldLabel>Updated Name</FieldLabel>\n      <FieldControl type=\"text\" placeholder=\"Updated Enter your name\" />\n      <FieldDescription>Updated Visible on your profile</FieldDescription>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-disabled.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-disabled.tsx",
-      "content": "import {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nexport default function FieldDisabledDemo() {\n  return (\n    <Field disabled>\n      <FieldLabel>Email</FieldLabel>\n      <FieldControl type=\"email\" placeholder=\"Enter your email\" disabled />\n      <FieldDescription>This field is currently disabled.</FieldDescription>\n    </Field>\n  )\n}\n",
+      "content": "import {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nexport default function FieldDisabledDemo() {\n  return (\n    <Field disabled>\n      <FieldLabel>Updated Email</FieldLabel>\n      <FieldControl\n        type=\"email\"\n        placeholder=\"Updated Enter your email\"\n        disabled\n      />\n      <FieldDescription>\n        Updated This field is currently disabled.\n      </FieldDescription>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-error.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-error.tsx",
-      "content": "import {\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nexport default function FieldWithErrorDemo() {\n  return (\n    <Field>\n      <FieldLabel>Email</FieldLabel>\n      <FieldControl type=\"email\" placeholder=\"Enter your email\" />\n      <FieldError>Please enter a valid email address.</FieldError>\n    </Field>\n  )\n}\n",
+      "content": "import {\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nexport default function FieldWithErrorDemo() {\n  return (\n    <Field>\n      <FieldLabel>Updated Email</FieldLabel>\n      <FieldControl type=\"email\" placeholder=\"Updated Enter your email\" />\n      <FieldError>Updated Please enter a valid email address.</FieldError>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-number-field.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-number-field.tsx",
-      "content": "import { Field, FieldDescription } from \"@/registry/default/ui/field\"\nimport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/registry/default/ui/number-field\"\n\nexport default function FieldNumberFieldDemo() {\n  return (\n    <Field>\n      <NumberField defaultValue={1} min={1} max={100}>\n        <NumberFieldScrubArea label=\"Quantity\" />\n        <NumberFieldGroup>\n          <NumberFieldDecrement />\n          <NumberFieldInput />\n          <NumberFieldIncrement />\n        </NumberFieldGroup>\n      </NumberField>\n      <FieldDescription>Choose a value between 1 and 100.</FieldDescription>\n    </Field>\n  )\n}\n",
+      "content": "import { Field, FieldDescription } from \"@/registry/default/ui/field\"\nimport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/registry/default/ui/number-field\"\n\nexport default function FieldNumberFieldDemo() {\n  return (\n    <Field>\n      <NumberField defaultValue={1} min={1} max={100}>\n        <NumberFieldScrubArea label=\"Updated Quantity\" />\n        <NumberFieldGroup>\n          <NumberFieldDecrement />\n          <NumberFieldInput />\n          <NumberFieldIncrement />\n        </NumberFieldGroup>\n      </NumberField>\n      <FieldDescription>\n        Updated Choose a value between 1 and 100.\n      </FieldDescription>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-radio.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-radio.tsx",
-      "content": "\"use client\"\n\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\"\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\"\n\nexport default function FieldRadioDemo() {\n  return (\n    <Field\n      name=\"plan\"\n      className=\"gap-4\"\n      render={(props) => <Fieldset {...props} />}\n    >\n      <FieldsetLegend className=\"text-sm font-medium\">\n        Choose Plan\n      </FieldsetLegend>\n      <RadioGroup defaultValue=\"free\">\n        <FieldLabel>\n          <Radio value=\"free\" /> Free\n        </FieldLabel>\n        <FieldLabel>\n          <Radio value=\"pro\" /> Pro\n        </FieldLabel>\n        <FieldLabel>\n          <Radio value=\"enterprise\" /> Enterprise\n        </FieldLabel>\n      </RadioGroup>\n      <FieldDescription>Select the plan that fits your needs.</FieldDescription>\n    </Field>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\"\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\"\n\nexport default function FieldRadioDemo() {\n  return (\n    <Field\n      name=\"plan\"\n      className=\"gap-4\"\n      render={(props) => <Fieldset {...props} />}\n    >\n      <FieldsetLegend className=\"text-sm font-medium\">\n        Updated Choose Plan\n      </FieldsetLegend>\n      <RadioGroup defaultValue=\"free\">\n        <FieldLabel>\n          <Radio value=\"free\" /> Updated Free\n        </FieldLabel>\n        <FieldLabel>\n          <Radio value=\"pro\" /> Updated Pro\n        </FieldLabel>\n        <FieldLabel>\n          <Radio value=\"enterprise\" /> Updated Enterprise\n        </FieldLabel>\n      </RadioGroup>\n      <FieldDescription>\n        Updated Select the plan that fits your needs.\n      </FieldDescription>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-required.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-required.tsx",
-      "content": "import {\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nexport default function FieldRequiredDemo() {\n  return (\n    <Field>\n      <FieldLabel>\n        Password <span className=\"text-destructive-foreground\">*</span>\n      </FieldLabel>\n      <FieldControl type=\"password\" placeholder=\"Enter password\" required />\n      <FieldError>Please fill out this field.</FieldError>\n    </Field>\n  )\n}\n",
+      "content": "import {\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\n\nexport default function FieldRequiredDemo() {\n  return (\n    <Field>\n      <FieldLabel>\n        Updated Password <span className=\"text-destructive-foreground\">*</span>\n      </FieldLabel>\n      <FieldControl\n        type=\"password\"\n        placeholder=\"Updated Enter password\"\n        required\n      />\n      <FieldError>Updated Please fill out this field.</FieldError>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-select.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-select.tsx",
-      "content": "import {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst items = [\n  { label: \"Select a country\", value: null },\n  { label: \"United States\", value: \"us\" },\n  { label: \"United Kingdom\", value: \"uk\" },\n  { label: \"Canada\", value: \"ca\" },\n  { label: \"Australia\", value: \"au\" },\n]\n\nexport default function FieldSelectDemo() {\n  return (\n    <Field>\n      <FieldLabel>Country</FieldLabel>\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectPopup>\n          {items.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectPopup>\n      </Select>\n      <FieldDescription>This is an optional field</FieldDescription>\n    </Field>\n  )\n}\n",
+      "content": "import {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst items = [\n  { label: \"Updated Select a country\", value: null },\n  { label: \"Updated United States\", value: \"us\" },\n  { label: \"Updated United Kingdom\", value: \"uk\" },\n  { label: \"Updated Canada\", value: \"ca\" },\n  { label: \"Updated Australia\", value: \"au\" },\n]\n\nexport default function FieldSelectDemo() {\n  return (\n    <Field>\n      <FieldLabel>Updated Country</FieldLabel>\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectPopup>\n          {items.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectPopup>\n      </Select>\n      <FieldDescription>Updated This is an optional field</FieldDescription>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-slider.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-slider.tsx",
-      "content": "import {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Slider } from \"@/registry/default/ui/slider\"\n\nexport default function FieldSelectDemo() {\n  return (\n    <Field className=\"items-stretch gap-3\">\n      <FieldLabel>Country</FieldLabel>\n      <Slider defaultValue={50} />\n      <FieldDescription>This is an optional field</FieldDescription>\n    </Field>\n  )\n}\n",
+      "content": "import {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Slider } from \"@/registry/default/ui/slider\"\n\nexport default function FieldSelectDemo() {\n  return (\n    <Field className=\"items-stretch gap-3\">\n      <FieldLabel>Updated Country</FieldLabel>\n      <Slider defaultValue={50} />\n      <FieldDescription>Updated This is an optional field</FieldDescription>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-switch.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-switch.tsx",
-      "content": "import { Field, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function FieldSwitchDemo() {\n  return (\n    <Field>\n      <FieldLabel>\n        <Switch />\n        Email notifications\n      </FieldLabel>\n    </Field>\n  )\n}\n",
+      "content": "import { Field, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function FieldSwitchDemo() {\n  return (\n    <Field>\n      <FieldLabel>\n        <Switch />\n        Updated Email notifications\n      </FieldLabel>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-textarea.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-textarea.tsx",
-      "content": "\"use client\"\n\nimport {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function FieldTextareaDemo() {\n  return (\n    <Field>\n      <FieldLabel>Bio</FieldLabel>\n      <FieldControl\n        render={(props) => (\n          <Textarea placeholder=\"Tell us about yourself…\" {...props} />\n        )}\n      />\n      <FieldDescription>\n        Write a short bio. Maximum 500 characters.\n      </FieldDescription>\n    </Field>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function FieldTextareaDemo() {\n  return (\n    <Field>\n      <FieldLabel>Updated Bio</FieldLabel>\n      <FieldControl\n        render={(props) => (\n          <Textarea placeholder=\"Updated Tell us about yourself…\" {...props} />\n        )}\n      />\n      <FieldDescription>\n        Updated Write a short bio. Maximum 500 characters.\n      </FieldDescription>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/field-validity.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/field-validity.tsx",
-      "content": "\"use client\"\n\nimport {\n  Field,\n  FieldControl,\n  FieldLabel,\n  FieldValidity,\n} from \"@/registry/default/ui/field\"\n\nexport default function FieldWithValidityDemo() {\n  return (\n    <Field>\n      <FieldLabel>Email</FieldLabel>\n      <FieldControl type=\"email\" placeholder=\"Enter your email\" required />\n      <FieldValidity>\n        {(validity) => (\n          <div className=\"flex w-full flex-col gap-2\">\n            {validity.error && (\n              <p className=\"text-xs text-destructive-foreground\">\n                {validity.error}\n              </p>\n            )}\n            <div className=\"w-full rounded-md bg-muted p-2\">\n              <pre className=\"no-scrollbar max-h-60 overflow-y-auto font-mono text-xs\">\n                {JSON.stringify(validity, null, 2)}\n              </pre>\n            </div>\n          </div>\n        )}\n      </FieldValidity>\n    </Field>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Field,\n  FieldControl,\n  FieldLabel,\n  FieldValidity,\n} from \"@/registry/default/ui/field\"\n\nexport default function FieldWithValidityDemo() {\n  return (\n    <Field>\n      <FieldLabel>Updated Email</FieldLabel>\n      <FieldControl\n        type=\"email\"\n        placeholder=\"Updated Enter your email\"\n        required\n      />\n      <FieldValidity>\n        {(validity) => (\n          <div className=\"flex w-full flex-col gap-2\">\n            {validity.error && (\n              <p className=\"text-xs text-destructive-foreground\">\n                {validity.error}\n              </p>\n            )}\n            <div className=\"w-full rounded-md bg-muted p-2\">\n              <pre className=\"no-scrollbar max-h-60 overflow-y-auto font-mono text-xs\">\n                {JSON.stringify(validity, null, 2)}\n              </pre>\n            </div>\n          </div>\n        )}\n      </FieldValidity>\n    </Field>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/fieldset-demo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/fieldset-demo.tsx",
-      "content": "import {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\"\n\nexport default function FieldsetDemo() {\n  return (\n    <Fieldset>\n      <FieldsetLegend>Billing Details</FieldsetLegend>\n      <Field>\n        <FieldLabel>Company</FieldLabel>\n        <FieldControl type=\"text\" placeholder=\"Enter company name\" />\n        <FieldDescription>\n          The name that will appear on invoices.\n        </FieldDescription>\n      </Field>\n\n      <Field>\n        <FieldLabel>Tax ID</FieldLabel>\n        <FieldControl\n          type=\"text\"\n          placeholder=\"Enter tax identification number\"\n        />\n        <FieldDescription>\n          Your business tax identification number.\n        </FieldDescription>\n      </Field>\n    </Fieldset>\n  )\n}\n",
+      "content": "import {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\"\n\nexport default function FieldsetDemo() {\n  return (\n    <Fieldset>\n      <FieldsetLegend>Updated Billing Details</FieldsetLegend>\n      <Field>\n        <FieldLabel>Updated Company</FieldLabel>\n        <FieldControl type=\"text\" placeholder=\"Updated Enter company name\" />\n        <FieldDescription>\n          Updated The name that will appear on invoices.\n        </FieldDescription>\n      </Field>\n\n      <Field>\n        <FieldLabel>Updated Tax ID</FieldLabel>\n        <FieldControl\n          type=\"text\"\n          placeholder=\"Updated Enter tax identification number\"\n        />\n        <FieldDescription>\n          Updated Your business tax identification number.\n        </FieldDescription>\n      </Field>\n    </Fieldset>\n  )\n}\n",
       "type": "registry:example"
     }
   ],