love-ui 1.2.12 → 1.2.14

package/public/r/combobox-autohighlight.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-autohighlight.tsx",
-      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\"\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 ComboboxAutohighlight() {\n  return (\n    <Combobox items={items} autoHighlight>\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  )\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\"\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 ComboboxAutohighlight() {\n  return (\n    <Combobox items={items} autoHighlight>\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  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-controlled.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-controlled.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxTrigger,\n} from \"../../../../../packages/combobox\"\n\nconst plants = [\n  {\n    value: \"monstera-deliciosa\",\n    label: \"Monstera Deliciosa (Swiss Cheese Plant)\",\n  },\n  {\n    value: \"ficus-lyrata\",\n    label: \"Ficus Lyrata (Fiddle Leaf Fig)\",\n  },\n  {\n    value: \"sansevieria-trifasciata\",\n    label: \"Sansevieria Trifasciata (Snake Plant)\",\n  },\n  {\n    value: \"spathiphyllum-wallisii\",\n    label: \"Spathiphyllum Wallisii (Peace Lily)\",\n  },\n  {\n    value: \"epipremnum-aureum\",\n    label: \"Epipremnum Aureum (Golden Pothos)\",\n  },\n  {\n    value: \"calathea-orbifolia\",\n    label: \"Calathea Orbifolia (Prayer Plant)\",\n  },\n]\n\nconst Example = () => {\n  const [open, setOpen] = useState(false)\n  const [value, setValue] = useState(plants[0].value)\n\n  return (\n    <Combobox\n      data={plants}\n      onOpenChange={setOpen}\n      onValueChange={setValue}\n      open={open}\n      type=\"plant\"\n      value={value}\n    >\n      <ComboboxTrigger />\n      <ComboboxContent>\n        <ComboboxInput />\n        <ComboboxEmpty />\n        <ComboboxList>\n          <ComboboxGroup>\n            {plants.map((plant) => (\n              <ComboboxItem key={plant.value} value={plant.value}>\n                {plant.label}\n              </ComboboxItem>\n            ))}\n          </ComboboxGroup>\n        </ComboboxList>\n      </ComboboxContent>\n    </Combobox>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxTrigger,\n} from \"../../../../../packages/combobox\"\n\nconst plants = [\n  {\n    value: \"monstera-deliciosa\",\n    label: \"Updated Monstera Deliciosa (Swiss Cheese Plant)\",\n  },\n  {\n    value: \"ficus-lyrata\",\n    label: \"Updated Ficus Lyrata (Fiddle Leaf Fig)\",\n  },\n  {\n    value: \"sansevieria-trifasciata\",\n    label: \"Updated Sansevieria Trifasciata (Snake Plant)\",\n  },\n  {\n    value: \"spathiphyllum-wallisii\",\n    label: \"Updated Spathiphyllum Wallisii (Peace Lily)\",\n  },\n  {\n    value: \"epipremnum-aureum\",\n    label: \"Updated Epipremnum Aureum (Golden Pothos)\",\n  },\n  {\n    value: \"calathea-orbifolia\",\n    label: \"Updated Calathea Orbifolia (Prayer Plant)\",\n  },\n]\n\nconst Example = () => {\n  const [open, setOpen] = useState(false)\n  const [value, setValue] = useState(plants[0].value)\n\n  return (\n    <Combobox\n      data={plants}\n      onOpenChange={setOpen}\n      onValueChange={setValue}\n      open={open}\n      type=\"plant\"\n      value={value}\n    >\n      <ComboboxTrigger />\n      <ComboboxContent>\n        <ComboboxInput />\n        <ComboboxEmpty />\n        <ComboboxList>\n          <ComboboxGroup>\n            {plants.map((plant) => (\n              <ComboboxItem key={plant.value} value={plant.value}>\n                {plant.label}\n              </ComboboxItem>\n            ))}\n          </ComboboxGroup>\n        </ComboboxList>\n      </ComboboxContent>\n    </Combobox>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-create-new.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-create-new.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxCreateNew,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxTrigger,\n} from \"../../../../../packages/combobox\"\n\nconst initialFrameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n  {\n    value: \"vite\",\n    label: \"Vite\",\n  },\n]\n\nconst Example = () => {\n  const [frameworks, setFrameworks] = useState(initialFrameworks)\n  const [value, setValue] = useState(\"\")\n\n  const handleCreateNew = (newValue: string) => {\n    console.log(\"Creating new framework:\", newValue)\n\n    // Add the new framework to the list\n    const newFramework = {\n      value: newValue.toLowerCase().replace(/\\s+/g, \"-\"),\n      label: newValue,\n    }\n\n    setFrameworks((prev) => [...prev, newFramework])\n    setValue(newFramework.value)\n  }\n\n  return (\n    <Combobox\n      data={frameworks}\n      onValueChange={setValue}\n      type=\"framework\"\n      value={value}\n    >\n      <ComboboxTrigger className=\"w-[300px]\" />\n      <ComboboxContent>\n        <ComboboxInput />\n        <ComboboxEmpty>\n          <ComboboxCreateNew onCreateNew={handleCreateNew} />\n        </ComboboxEmpty>\n        <ComboboxList>\n          <ComboboxGroup>\n            {frameworks.map((framework) => (\n              <ComboboxItem key={framework.value} value={framework.value}>\n                {framework.label}\n              </ComboboxItem>\n            ))}\n          </ComboboxGroup>\n        </ComboboxList>\n      </ComboboxContent>\n    </Combobox>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxCreateNew,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxTrigger,\n} from \"../../../../../packages/combobox\"\n\nconst initialFrameworks = [\n  {\n    value: \"next.js\",\n    label: \"Updated Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"Updated SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Updated Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Updated Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Updated Astro\",\n  },\n  {\n    value: \"vite\",\n    label: \"Updated Vite\",\n  },\n]\n\nconst Example = () => {\n  const [frameworks, setFrameworks] = useState(initialFrameworks)\n  const [value, setValue] = useState(\"\")\n\n  const handleCreateNew = (newValue: string) => {\n    console.log(\"Creating new framework:\", newValue)\n\n    // Add the new framework to the list\n    const newFramework = {\n      value: newValue.toLowerCase().replace(/\\s+/g, \"-\"),\n      label: newValue,\n    }\n\n    setFrameworks((prev) => [...prev, newFramework])\n    setValue(newFramework.value)\n  }\n\n  return (\n    <Combobox\n      data={frameworks}\n      onValueChange={setValue}\n      type=\"framework\"\n      value={value}\n    >\n      <ComboboxTrigger className=\"w-[300px]\" />\n      <ComboboxContent>\n        <ComboboxInput />\n        <ComboboxEmpty>\n          <ComboboxCreateNew onCreateNew={handleCreateNew} />\n        </ComboboxEmpty>\n        <ComboboxList>\n          <ComboboxGroup>\n            {frameworks.map((framework) => (\n              <ComboboxItem key={framework.value} value={framework.value}>\n                {framework.label}\n              </ComboboxItem>\n            ))}\n          </ComboboxGroup>\n        </ComboboxList>\n      </ComboboxContent>\n    </Combobox>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-demo.tsx",
-      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\"\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 ComboboxDemo() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput placeholder=\"Select a item…\" aria-label=\"Select a item\" />\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  )\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\"\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 ComboboxDemo() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput\n        placeholder=\"Updated Select a item…\"\n        aria-label=\"Updated Select a item\"\n      />\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  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-disabled.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-disabled.tsx",
-      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\"\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 ComboboxDisabled() {\n  return (\n    <Combobox items={items} defaultValue={items[2]} disabled>\n      <ComboboxInput\n        placeholder=\"Select an item…\"\n        aria-label=\"Select an item\"\n      />\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  )\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\"\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 ComboboxDisabled() {\n  return (\n    <Combobox items={items} defaultValue={items[2]} disabled>\n      <ComboboxInput\n        placeholder=\"Updated Select an item…\"\n        aria-label=\"Updated Select an item\"\n      />\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  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-fixed-width.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-fixed-width.tsx",
-      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxTrigger,\n} from \"../../../../../packages/combobox\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n  {\n    value: \"vite\",\n    label: \"Vite\",\n  },\n]\n\nconst Example = () => (\n  <Combobox\n    data={frameworks}\n    onOpenChange={(open) => console.log(\"Combobox is open?\", open)}\n    onValueChange={(newValue) => console.log(\"Combobox value:\", newValue)}\n    type=\"framework\"\n  >\n    <ComboboxTrigger className=\"w-[70%]\" />\n    <ComboboxContent>\n      <ComboboxInput />\n      <ComboboxEmpty />\n      <ComboboxList>\n        <ComboboxGroup>\n          {frameworks.map((framework) => (\n            <ComboboxItem key={framework.value} value={framework.value}>\n              {framework.label}\n            </ComboboxItem>\n          ))}\n        </ComboboxGroup>\n      </ComboboxList>\n    </ComboboxContent>\n  </Combobox>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxTrigger,\n} from \"../../../../../packages/combobox\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Updated Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"Updated SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Updated Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Updated Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Updated Astro\",\n  },\n  {\n    value: \"vite\",\n    label: \"Updated Vite\",\n  },\n]\n\nconst Example = () => (\n  <Combobox\n    data={frameworks}\n    onOpenChange={(open) => console.log(\"Combobox is open?\", open)}\n    onValueChange={(newValue) => console.log(\"Combobox value:\", newValue)}\n    type=\"framework\"\n  >\n    <ComboboxTrigger className=\"w-[70%]\" />\n    <ComboboxContent>\n      <ComboboxInput />\n      <ComboboxEmpty />\n      <ComboboxList>\n        <ComboboxGroup>\n          {frameworks.map((framework) => (\n            <ComboboxItem key={framework.value} value={framework.value}>\n              {framework.label}\n            </ComboboxItem>\n          ))}\n        </ComboboxGroup>\n      </ComboboxList>\n    </ComboboxContent>\n  </Combobox>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-form.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\"\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\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 ComboboxForm() {\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    const selectedItem = formData.get(\"item\")\n    const itemValue =\n      items.find((item) => item.label === selectedItem)?.value || selectedItem\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    alert(`Favorite item: ${itemValue || \"\"}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-64\">\n      <Field>\n        <FieldLabel>Favorite item</FieldLabel>\n        <Combobox items={items} name=\"item\" disabled={loading} required>\n          <ComboboxInput placeholder=\"Select an item...\" />\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        <FieldError>Please select a item.</FieldError>\n      </Field>\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 {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\"\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\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 ComboboxForm() {\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    const selectedItem = formData.get(\"item\")\n    const itemValue =\n      items.find((item) => item.label === selectedItem)?.value || selectedItem\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    alert(`Favorite item: ${itemValue || \"\"}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-64\">\n      <Field>\n        <FieldLabel>Updated Favorite item</FieldLabel>\n        <Combobox items={items} name=\"item\" disabled={loading} required>\n          <ComboboxInput placeholder=\"Updated Select an item...\" />\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        <FieldError>Updated Please select a item.</FieldError>\n      </Field>\n      <Button type=\"submit\" disabled={loading}>\n        Updated Submit\n      </Button>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-grouped.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-grouped.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxSeparator,\n} from \"@/registry/default/ui/combobox\"\n\n// Grouped items demo\ntype Tag = { id: string; label: string; group: \"Status\" | \"Priority\" | \"Team\" }\ntype TagGroup = { value: string; items: Tag[] }\n\nconst tagsData: Tag[] = [\n  // Status\n  { id: \"s-open\", label: \"Open\", group: \"Status\" },\n  { id: \"s-in-progress\", label: \"In progress\", group: \"Status\" },\n  { id: \"s-blocked\", label: \"Blocked\", group: \"Status\" },\n  { id: \"s-resolved\", label: \"Resolved\", group: \"Status\" },\n  { id: \"s-closed\", label: \"Closed\", group: \"Status\" },\n  // Priority\n  { id: \"p-low\", label: \"Low\", group: \"Priority\" },\n  { id: \"p-medium\", label: \"Medium\", group: \"Priority\" },\n  { id: \"p-high\", label: \"High\", group: \"Priority\" },\n  { id: \"p-urgent\", label: \"Urgent\", group: \"Priority\" },\n  // Team\n  { id: \"t-design\", label: \"Design\", group: \"Team\" },\n  { id: \"t-frontend\", label: \"Frontend\", group: \"Team\" },\n  { id: \"t-backend\", label: \"Backend\", group: \"Team\" },\n  { id: \"t-devops\", label: \"DevOps\", group: \"Team\" },\n  { id: \"t-qa\", label: \"QA\", group: \"Team\" },\n  { id: \"t-mobile\", label: \"Mobile\", group: \"Team\" },\n  { id: \"t-data\", label: \"Data\", group: \"Team\" },\n  { id: \"t-security\", label: \"Security\", group: \"Team\" },\n  { id: \"t-platform\", label: \"Platform\", group: \"Team\" },\n  { id: \"t-infra\", label: \"Infrastructure\", group: \"Team\" },\n  { id: \"t-product\", label: \"Product\", group: \"Team\" },\n  { id: \"t-marketing\", label: \"Marketing\", group: \"Team\" },\n  { id: \"t-sales\", label: \"Sales\", group: \"Team\" },\n  { id: \"t-support\", label: \"Support\", group: \"Team\" },\n  { id: \"t-research\", label: \"Research\", group: \"Team\" },\n  { id: \"t-content\", label: \"Content\", group: \"Team\" },\n  { id: \"t-analytics\", label: \"Analytics\", group: \"Team\" },\n  { id: \"t-operations\", label: \"Operations\", group: \"Team\" },\n  { id: \"t-finance\", label: \"Finance\", group: \"Team\" },\n  { id: \"t-hr\", label: \"HR\", group: \"Team\" },\n  { id: \"t-legal\", label: \"Legal\", group: \"Team\" },\n  { id: \"t-growth\", label: \"Growth\", group: \"Team\" },\n  { id: \"t-partner\", label: \"Partner\", group: \"Team\" },\n  { id: \"t-community\", label: \"Community\", group: \"Team\" },\n  { id: \"t-docs\", label: \"Docs\", group: \"Team\" },\n  { id: \"t-l10n\", label: \"Localization\", group: \"Team\" },\n  { id: \"t-a11y\", label: \"Accessibility\", group: \"Team\" },\n  { id: \"t-sre\", label: \"SRE\", group: \"Team\" },\n  { id: \"t-release\", label: \"Release\", group: \"Team\" },\n  { id: \"t-architecture\", label: \"Architecture\", group: \"Team\" },\n  { id: \"t-ux\", label: \"UX\", group: \"Team\" },\n  { id: \"t-ui\", label: \"UI\", group: \"Team\" },\n  { id: \"t-management\", label: \"Management\", group: \"Team\" },\n]\n\nfunction groupTags(tags: Tag[]): TagGroup[] {\n  const groups: Record<string, Tag[]> = {}\n  for (const t of tags) {\n    ;(groups[t.group] ??= []).push(t)\n  }\n  const order: Array<TagGroup[\"value\"]> = [\"Status\", \"Priority\", \"Team\"]\n  return order.map((value) => ({ value, items: groups[value] ?? [] }))\n}\n\nconst groupedTags: TagGroup[] = groupTags(tagsData)\n\nexport default function ComboboxGrouped() {\n  return (\n    <Combobox items={groupedTags}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <ComboboxInput placeholder=\"e.g. feature\" aria-label=\"Search tags\" />\n      </div>\n      <ComboboxPopup>\n        <ComboboxEmpty>No tags found.</ComboboxEmpty>\n        <ComboboxList>\n          {(group: TagGroup) => (\n            <React.Fragment key={group.value}>\n              <ComboboxGroup items={group.items}>\n                <ComboboxGroupLabel>{group.value}</ComboboxGroupLabel>\n                <ComboboxCollection>\n                  {(tag: Tag) => (\n                    <ComboboxItem key={tag.id} value={tag}>\n                      {tag.label}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n              {group.value !== \"Team\" && <ComboboxSeparator />}\n            </React.Fragment>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxSeparator,\n} from \"@/registry/default/ui/combobox\"\n\n// Grouped items demo\ntype Tag = { id: string; label: string; group: \"Status\" | \"Priority\" | \"Team\" }\ntype TagGroup = { value: string; items: Tag[] }\n\nconst tagsData: Tag[] = [\n  // Status\n  { id: \"s-open\", label: \"Updated Open\", group: \"Status\" },\n  { id: \"s-in-progress\", label: \"Updated In progress\", group: \"Status\" },\n  { id: \"s-blocked\", label: \"Updated Blocked\", group: \"Status\" },\n  { id: \"s-resolved\", label: \"Updated Resolved\", group: \"Status\" },\n  { id: \"s-closed\", label: \"Updated Closed\", group: \"Status\" },\n  // Priority\n  { id: \"p-low\", label: \"Updated Low\", group: \"Priority\" },\n  { id: \"p-medium\", label: \"Updated Medium\", group: \"Priority\" },\n  { id: \"p-high\", label: \"Updated High\", group: \"Priority\" },\n  { id: \"p-urgent\", label: \"Updated Urgent\", group: \"Priority\" },\n  // Team\n  { id: \"t-design\", label: \"Updated Design\", group: \"Team\" },\n  { id: \"t-frontend\", label: \"Updated Frontend\", group: \"Team\" },\n  { id: \"t-backend\", label: \"Updated Backend\", group: \"Team\" },\n  { id: \"t-devops\", label: \"Updated DevOps\", group: \"Team\" },\n  { id: \"t-qa\", label: \"Updated QA\", group: \"Team\" },\n  { id: \"t-mobile\", label: \"Updated Mobile\", group: \"Team\" },\n  { id: \"t-data\", label: \"Updated Data\", group: \"Team\" },\n  { id: \"t-security\", label: \"Updated Security\", group: \"Team\" },\n  { id: \"t-platform\", label: \"Updated Platform\", group: \"Team\" },\n  { id: \"t-infra\", label: \"Updated Infrastructure\", group: \"Team\" },\n  { id: \"t-product\", label: \"Updated Product\", group: \"Team\" },\n  { id: \"t-marketing\", label: \"Updated Marketing\", group: \"Team\" },\n  { id: \"t-sales\", label: \"Updated Sales\", group: \"Team\" },\n  { id: \"t-support\", label: \"Updated Support\", group: \"Team\" },\n  { id: \"t-research\", label: \"Updated Research\", group: \"Team\" },\n  { id: \"t-content\", label: \"Updated Content\", group: \"Team\" },\n  { id: \"t-analytics\", label: \"Updated Analytics\", group: \"Team\" },\n  { id: \"t-operations\", label: \"Updated Operations\", group: \"Team\" },\n  { id: \"t-finance\", label: \"Updated Finance\", group: \"Team\" },\n  { id: \"t-hr\", label: \"Updated HR\", group: \"Team\" },\n  { id: \"t-legal\", label: \"Updated Legal\", group: \"Team\" },\n  { id: \"t-growth\", label: \"Updated Growth\", group: \"Team\" },\n  { id: \"t-partner\", label: \"Updated Partner\", group: \"Team\" },\n  { id: \"t-community\", label: \"Updated Community\", group: \"Team\" },\n  { id: \"t-docs\", label: \"Updated Docs\", group: \"Team\" },\n  { id: \"t-l10n\", label: \"Updated Localization\", group: \"Team\" },\n  { id: \"t-a11y\", label: \"Updated Accessibility\", group: \"Team\" },\n  { id: \"t-sre\", label: \"Updated SRE\", group: \"Team\" },\n  { id: \"t-release\", label: \"Updated Release\", group: \"Team\" },\n  { id: \"t-architecture\", label: \"Updated Architecture\", group: \"Team\" },\n  { id: \"t-ux\", label: \"Updated UX\", group: \"Team\" },\n  { id: \"t-ui\", label: \"Updated UI\", group: \"Team\" },\n  { id: \"t-management\", label: \"Updated Management\", group: \"Team\" },\n]\n\nfunction groupTags(tags: Tag[]): TagGroup[] {\n  const groups: Record<string, Tag[]> = {}\n  for (const t of tags) {\n    ;(groups[t.group] ??= []).push(t)\n  }\n  const order: Array<TagGroup[\"value\"]> = [\"Status\", \"Priority\", \"Team\"]\n  return order.map((value) => ({ value, items: groups[value] ?? [] }))\n}\n\nconst groupedTags: TagGroup[] = groupTags(tagsData)\n\nexport default function ComboboxGrouped() {\n  return (\n    <Combobox items={groupedTags}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <ComboboxInput\n          placeholder=\"Updated e.g. feature\"\n          aria-label=\"Updated Search tags\"\n        />\n      </div>\n      <ComboboxPopup>\n        <ComboboxEmpty>Updated No tags found.</ComboboxEmpty>\n        <ComboboxList>\n          {(group: TagGroup) => (\n            <React.Fragment key={group.value}>\n              <ComboboxGroup items={group.items}>\n                <ComboboxGroupLabel>{group.value}</ComboboxGroupLabel>\n                <ComboboxCollection>\n                  {(tag: Tag) => (\n                    <ComboboxItem key={tag.id} value={tag}>\n                      {tag.label}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n              {group.value !== \"Team\" && <ComboboxSeparator />}\n            </React.Fragment>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-lg.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-lg.tsx",
-      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\"\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 ComboboxLg() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput\n        size=\"lg\"\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  )\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\"\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 ComboboxLg() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput\n        size=\"lg\"\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  )\n}\n",
       "type": "registry:example"
     }
   ],

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

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-multiple-form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\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 { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\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 ComboboxMultipleForm() {\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    const selectedItems = formData.getAll(\"items\")\n    const itemValues = selectedItems.map(\n      (selectedItem) =>\n        items.find((item) => item.label === selectedItem)?.value || selectedItem\n    )\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    alert(`Favorite items: ${itemValues.join(\", \") || \"\"}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-64\">\n      <Field>\n        <FieldLabel>Favorite items</FieldLabel>\n        <Combobox\n          items={items}\n          multiple\n          name=\"items\"\n          disabled={loading}\n          required\n        >\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                  />\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        <FieldError>Please select at least one item.</FieldError>\n      </Field>\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 {\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 { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\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 ComboboxMultipleForm() {\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    const selectedItems = formData.getAll(\"items\")\n    const itemValues = selectedItems.map(\n      (selectedItem) =>\n        items.find((item) => item.label === selectedItem)?.value || selectedItem\n    )\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    alert(`Favorite items: ${itemValues.join(\", \") || \"\"}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-64\">\n      <Field>\n        <FieldLabel>Updated Favorite items</FieldLabel>\n        <Combobox\n          items={items}\n          multiple\n          name=\"items\"\n          disabled={loading}\n          required\n        >\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                  />\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        <FieldError>Updated Please select at least one item.</FieldError>\n      </Field>\n      <Button type=\"submit\" disabled={loading}>\n        Updated Submit\n      </Button>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-multiple.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/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\"\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 ComboboxMultiple() {\n  return (\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 a item...\"}\n                aria-label=\"Select a item\"\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  )\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\"\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 ComboboxMultiple() {\n  return (\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 a item...\"}\n                aria-label=\"Updated Select a item\"\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  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-sm.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-sm.tsx",
-      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\"\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 ComboboxSm() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput\n        size=\"sm\"\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  )\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\"\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 ComboboxSm() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput\n        size=\"sm\"\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  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-with-clear.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-with-clear.tsx",
-      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\"\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 ComboboxWithClear() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput\n        placeholder=\"Select a item…\"\n        aria-label=\"Select a item\"\n        showClear\n      />\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  )\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\"\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 ComboboxWithClear() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput\n        placeholder=\"Updated Select a item…\"\n        aria-label=\"Updated Select a item\"\n        showClear\n      />\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  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-with-inner-input.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-with-inner-input.tsx",
-      "content": "\"use client\"\n\nimport { ChevronsUpDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\"\n\ninterface Country {\n  code: string\n  value: string | null\n  continent: string\n  label: string\n}\n\nconst countries: Country[] = [\n  { code: \"\", value: null, continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"sg\",\n    value: \"Ghana, Africa\",\n    label: \"Ghana, Africa\",\n    continent: \"Asia\",\n  },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nexport default function ComboboxWithInnerInput() {\n  return (\n    <Combobox items={countries} defaultValue={countries[0]}>\n      <ComboboxTrigger\n        render={\n          <Button\n            variant=\"outline\"\n            className=\"w-full justify-between font-normal\"\n          />\n        }\n      >\n        <ComboboxValue />\n        <div className=\"flex\">\n          <ChevronsUpDownIcon className=\"-me-1 size-4 opacity-72\" />\n        </div>\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label=\"Select country\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"e.g. United Kingdom\"\n            showTrigger={false}\n          />\n        </div>\n        <ComboboxEmpty>No countries found.</ComboboxEmpty>\n        <ComboboxList>\n          {(country: Country) => (\n            <ComboboxItem key={country.code} value={country}>\n              {country.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronsUpDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\"\n\ninterface Country {\n  code: string\n  value: string | null\n  continent: string\n  label: string\n}\n\nconst countries: Country[] = [\n  { code: \"\", value: null, continent: \"\", label: \"Updated Select country\" },\n  {\n    code: \"af\",\n    value: \"afghanistan\",\n    label: \"Updated Afghanistan\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"al\",\n    value: \"albania\",\n    label: \"Updated Albania\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"dz\",\n    value: \"algeria\",\n    label: \"Updated Algeria\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"ad\",\n    value: \"andorra\",\n    label: \"Updated Andorra\",\n    continent: \"Europe\",\n  },\n  { code: \"ao\", value: \"angola\", label: \"Updated Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Updated Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Updated Armenia\", continent: \"Asia\" },\n  {\n    code: \"au\",\n    value: \"australia\",\n    label: \"Updated Australia\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"at\",\n    value: \"austria\",\n    label: \"Updated Austria\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"az\",\n    value: \"azerbaijan\",\n    label: \"Updated Azerbaijan\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Updated Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Updated Bahrain\", continent: \"Asia\" },\n  {\n    code: \"bd\",\n    value: \"bangladesh\",\n    label: \"Updated Bangladesh\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Updated Barbados\",\n    continent: \"North America\",\n  },\n  {\n    code: \"by\",\n    value: \"belarus\",\n    label: \"Updated Belarus\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"be\",\n    value: \"belgium\",\n    label: \"Updated Belgium\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"bz\",\n    value: \"belize\",\n    label: \"Updated Belize\",\n    continent: \"North America\",\n  },\n  { code: \"bj\", value: \"benin\", label: \"Updated Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Updated Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Updated Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Updated Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"bw\",\n    value: \"botswana\",\n    label: \"Updated Botswana\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"br\",\n    value: \"brazil\",\n    label: \"Updated Brazil\",\n    continent: \"South America\",\n  },\n  { code: \"bn\", value: \"brunei\", label: \"Updated Brunei\", continent: \"Asia\" },\n  {\n    code: \"bg\",\n    value: \"bulgaria\",\n    label: \"Updated Bulgaria\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Updated Burkina Faso\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"bi\",\n    value: \"burundi\",\n    label: \"Updated Burundi\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"kh\",\n    value: \"cambodia\",\n    label: \"Updated Cambodia\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"cm\",\n    value: \"cameroon\",\n    label: \"Updated Cameroon\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"ca\",\n    value: \"canada\",\n    label: \"Updated Canada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"cv\",\n    value: \"cape-verde\",\n    label: \"Updated Cape Verde\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Updated Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Updated Chad\", continent: \"Africa\" },\n  {\n    code: \"cl\",\n    value: \"chile\",\n    label: \"Updated Chile\",\n    continent: \"South America\",\n  },\n  { code: \"cn\", value: \"china\", label: \"Updated China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Updated Colombia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"km\",\n    value: \"comoros\",\n    label: \"Updated Comoros\",\n    continent: \"Africa\",\n  },\n  { code: \"cg\", value: \"congo\", label: \"Updated Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Updated Costa Rica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"hr\",\n    value: \"croatia\",\n    label: \"Updated Croatia\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"cu\",\n    value: \"cuba\",\n    label: \"Updated Cuba\",\n    continent: \"North America\",\n  },\n  { code: \"cy\", value: \"cyprus\", label: \"Updated Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Updated Czech Republic\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"dk\",\n    value: \"denmark\",\n    label: \"Updated Denmark\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"dj\",\n    value: \"djibouti\",\n    label: \"Updated Djibouti\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Updated Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Updated Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Updated Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Updated Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"Updated El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Updated Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"er\",\n    value: \"eritrea\",\n    label: \"Updated Eritrea\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"ee\",\n    value: \"estonia\",\n    label: \"Updated Estonia\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"et\",\n    value: \"ethiopia\",\n    label: \"Updated Ethiopia\",\n    continent: \"Africa\",\n  },\n  { code: \"fj\", value: \"fiji\", label: \"Updated Fiji\", continent: \"Oceania\" },\n  {\n    code: \"fi\",\n    value: \"finland\",\n    label: \"Updated Finland\",\n    continent: \"Europe\",\n  },\n  { code: \"fr\", value: \"france\", label: \"Updated France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Updated Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Updated Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Updated Georgia\", continent: \"Asia\" },\n  {\n    code: \"de\",\n    value: \"germany\",\n    label: \"Updated Germany\",\n    continent: \"Europe\",\n  },\n  { code: \"gh\", value: \"ghana\", label: \"Updated Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Updated Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Updated Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Updated Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Updated Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Updated Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"gy\",\n    value: \"guyana\",\n    label: \"Updated Guyana\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ht\",\n    value: \"haiti\",\n    label: \"Updated Haiti\",\n    continent: \"North America\",\n  },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Updated Honduras\",\n    continent: \"North America\",\n  },\n  {\n    code: \"hu\",\n    value: \"hungary\",\n    label: \"Updated Hungary\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"is\",\n    value: \"iceland\",\n    label: \"Updated Iceland\",\n    continent: \"Europe\",\n  },\n  { code: \"in\", value: \"india\", label: \"Updated India\", continent: \"Asia\" },\n  {\n    code: \"id\",\n    value: \"indonesia\",\n    label: \"Updated Indonesia\",\n    continent: \"Asia\",\n  },\n  { code: \"ir\", value: \"iran\", label: \"Updated Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Updated Iraq\", continent: \"Asia\" },\n  {\n    code: \"ie\",\n    value: \"ireland\",\n    label: \"Updated Ireland\",\n    continent: \"Europe\",\n  },\n  { code: \"il\", value: \"israel\", label: \"Updated Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Updated Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Updated Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Updated Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Updated Jordan\", continent: \"Asia\" },\n  {\n    code: \"kz\",\n    value: \"kazakhstan\",\n    label: \"Updated Kazakhstan\",\n    continent: \"Asia\",\n  },\n  { code: \"ke\", value: \"kenya\", label: \"Updated Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Updated Kuwait\", continent: \"Asia\" },\n  {\n    code: \"kg\",\n    value: \"kyrgyzstan\",\n    label: \"Updated Kyrgyzstan\",\n    continent: \"Asia\",\n  },\n  { code: \"la\", value: \"laos\", label: \"Updated Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Updated Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Updated Lebanon\", continent: \"Asia\" },\n  {\n    code: \"ls\",\n    value: \"lesotho\",\n    label: \"Updated Lesotho\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"lr\",\n    value: \"liberia\",\n    label: \"Updated Liberia\",\n    continent: \"Africa\",\n  },\n  { code: \"ly\", value: \"libya\", label: \"Updated Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Updated Liechtenstein\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"lt\",\n    value: \"lithuania\",\n    label: \"Updated Lithuania\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"lu\",\n    value: \"luxembourg\",\n    label: \"Updated Luxembourg\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"mg\",\n    value: \"madagascar\",\n    label: \"Updated Madagascar\",\n    continent: \"Africa\",\n  },\n  { code: \"mw\", value: \"malawi\", label: \"Updated Malawi\", continent: \"Africa\" },\n  {\n    code: \"my\",\n    value: \"malaysia\",\n    label: \"Updated Malaysia\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"mv\",\n    value: \"maldives\",\n    label: \"Updated Maldives\",\n    continent: \"Asia\",\n  },\n  { code: \"ml\", value: \"mali\", label: \"Updated Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Updated Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Updated Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"mr\",\n    value: \"mauritania\",\n    label: \"Updated Mauritania\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"mu\",\n    value: \"mauritius\",\n    label: \"Updated Mauritius\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"mx\",\n    value: \"mexico\",\n    label: \"Updated Mexico\",\n    continent: \"North America\",\n  },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Updated Micronesia\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"md\",\n    value: \"moldova\",\n    label: \"Updated Moldova\",\n    continent: \"Europe\",\n  },\n  { code: \"mc\", value: \"monaco\", label: \"Updated Monaco\", continent: \"Europe\" },\n  {\n    code: \"mn\",\n    value: \"mongolia\",\n    label: \"Updated Mongolia\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"me\",\n    value: \"montenegro\",\n    label: \"Updated Montenegro\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ma\",\n    value: \"morocco\",\n    label: \"Updated Morocco\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"mz\",\n    value: \"mozambique\",\n    label: \"Updated Mozambique\",\n    continent: \"Africa\",\n  },\n  { code: \"mm\", value: \"myanmar\", label: \"Updated Myanmar\", continent: \"Asia\" },\n  {\n    code: \"na\",\n    value: \"namibia\",\n    label: \"Updated Namibia\",\n    continent: \"Africa\",\n  },\n  { code: \"nr\", value: \"nauru\", label: \"Updated Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Updated Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Updated Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"Updated New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Updated Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Updated Niger\", continent: \"Africa\" },\n  {\n    code: \"ng\",\n    value: \"nigeria\",\n    label: \"Updated Nigeria\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"kp\",\n    value: \"north-korea\",\n    label: \"Updated North Korea\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"Updated North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Updated Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Updated Oman\", continent: \"Asia\" },\n  {\n    code: \"pk\",\n    value: \"pakistan\",\n    label: \"Updated Pakistan\",\n    continent: \"Asia\",\n  },\n  { code: \"pw\", value: \"palau\", label: \"Updated Palau\", continent: \"Oceania\" },\n  {\n    code: \"ps\",\n    value: \"palestine\",\n    label: \"Updated Palestine\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"pa\",\n    value: \"panama\",\n    label: \"Updated Panama\",\n    continent: \"North America\",\n  },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Updated Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Updated Paraguay\",\n    continent: \"South America\",\n  },\n  {\n    code: \"pe\",\n    value: \"peru\",\n    label: \"Updated Peru\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ph\",\n    value: \"philippines\",\n    label: \"Updated Philippines\",\n    continent: \"Asia\",\n  },\n  { code: \"pl\", value: \"poland\", label: \"Updated Poland\", continent: \"Europe\" },\n  {\n    code: \"pt\",\n    value: \"portugal\",\n    label: \"Updated Portugal\",\n    continent: \"Europe\",\n  },\n  { code: \"qa\", value: \"qatar\", label: \"Updated Qatar\", continent: \"Asia\" },\n  {\n    code: \"ro\",\n    value: \"romania\",\n    label: \"Updated Romania\",\n    continent: \"Europe\",\n  },\n  { code: \"ru\", value: \"russia\", label: \"Updated Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Updated Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Updated Samoa\", continent: \"Oceania\" },\n  {\n    code: \"sm\",\n    value: \"san-marino\",\n    label: \"Updated San Marino\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Updated Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"sn\",\n    value: \"senegal\",\n    label: \"Updated Senegal\",\n    continent: \"Africa\",\n  },\n  { code: \"rs\", value: \"serbia\", label: \"Updated Serbia\", continent: \"Europe\" },\n  {\n    code: \"sc\",\n    value: \"seychelles\",\n    label: \"Updated Seychelles\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Updated Sierra Leone\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"sg\",\n    value: \"Ghana, Africa\",\n    label: \"Updated Ghana, Africa\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"sk\",\n    value: \"slovakia\",\n    label: \"Updated Slovakia\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"si\",\n    value: \"slovenia\",\n    label: \"Updated Slovenia\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Updated Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"so\",\n    value: \"somalia\",\n    label: \"Updated Somalia\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"Updated South Africa\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"kr\",\n    value: \"south-korea\",\n    label: \"Updated South Korea\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"Updated South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Updated Spain\", continent: \"Europe\" },\n  {\n    code: \"lk\",\n    value: \"sri-lanka\",\n    label: \"Updated Sri Lanka\",\n    continent: \"Asia\",\n  },\n  { code: \"sd\", value: \"sudan\", label: \"Updated Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Updated Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Updated Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Updated Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Updated Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Updated Taiwan\", continent: \"Asia\" },\n  {\n    code: \"tj\",\n    value: \"tajikistan\",\n    label: \"Updated Tajikistan\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"tz\",\n    value: \"tanzania\",\n    label: \"Updated Tanzania\",\n    continent: \"Africa\",\n  },\n  {\n    code: \"th\",\n    value: \"thailand\",\n    label: \"Updated Thailand\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"tl\",\n    value: \"timor-leste\",\n    label: \"Updated Timor-Leste\",\n    continent: \"Asia\",\n  },\n  { code: \"tg\", value: \"togo\", label: \"Updated Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Updated Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Updated Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  {\n    code: \"tn\",\n    value: \"tunisia\",\n    label: \"Updated Tunisia\",\n    continent: \"Africa\",\n  },\n  { code: \"tr\", value: \"turkey\", label: \"Updated Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Updated Turkmenistan\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"tv\",\n    value: \"tuvalu\",\n    label: \"Updated Tuvalu\",\n    continent: \"Oceania\",\n  },\n  { code: \"ug\", value: \"uganda\", label: \"Updated Uganda\", continent: \"Africa\" },\n  {\n    code: \"ua\",\n    value: \"ukraine\",\n    label: \"Updated Ukraine\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"Updated United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"Updated United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"Updated United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Updated Uruguay\",\n    continent: \"South America\",\n  },\n  {\n    code: \"uz\",\n    value: \"uzbekistan\",\n    label: \"Updated Uzbekistan\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"vu\",\n    value: \"vanuatu\",\n    label: \"Updated Vanuatu\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Updated Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Updated Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Updated Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Updated Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Updated Zambia\", continent: \"Africa\" },\n  {\n    code: \"zw\",\n    value: \"zimbabwe\",\n    label: \"Updated Zimbabwe\",\n    continent: \"Africa\",\n  },\n]\n\nexport default function ComboboxWithInnerInput() {\n  return (\n    <Combobox items={countries} defaultValue={countries[0]}>\n      <ComboboxTrigger\n        render={\n          <Button\n            variant=\"outline\"\n            className=\"w-full justify-between font-normal\"\n          />\n        }\n      >\n        <ComboboxValue />\n        <div className=\"flex\">\n          <ChevronsUpDownIcon className=\"-me-1 size-4 opacity-72\" />\n        </div>\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label=\"Updated Select country\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"Updated e.g. United Kingdom\"\n            showTrigger={false}\n          />\n        </div>\n        <ComboboxEmpty>Updated No countries found.</ComboboxEmpty>\n        <ComboboxList>\n          {(country: Country) => (\n            <ComboboxItem key={country.code} value={country}>\n              {country.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/combobox-with-label.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/combobox-with-label.tsx",
-      "content": "\"use client\"\n\nimport { useId } from \"react\"\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\"\nimport { Label } from \"@/registry/default/ui/label\"\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 ComboboxWithLabel() {\n  const id = useId()\n  return (\n    <Combobox items={items}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <Label htmlFor={id}>Fruits</Label>\n        <ComboboxInput\n          id={id}\n          placeholder=\"Select an item...\"\n          aria-label=\"Select an item\"\n        />\n      </div>\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  )\n}\n",
+      "content": "\"use client\"\n\nimport { useId } from \"react\"\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\"\nimport { Label } from \"@/registry/default/ui/label\"\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 ComboboxWithLabel() {\n  const id = useId()\n  return (\n    <Combobox items={items}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <Label htmlFor={id}>Updated Fruits</Label>\n        <ComboboxInput\n          id={id}\n          placeholder=\"Updated Select an item...\"\n          aria-label=\"Updated Select an item\"\n        />\n      </div>\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  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/command.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command",
+  "type": "registry:ui",
+  "dependencies": [
+    "cmdk"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/dialog.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/ui/command.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/default/ui/dialog\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent className=\"overflow-hidden p-0 sm:max-w-lg [&>button:last-child]:hidden\">\n        <Command className=\"max-h-[100svh] **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      className=\"flex items-center border-b border-input px-5\"\n      cmdk-input-wrapper=\"\"\n    >\n      <SearchIcon size={20} className=\"me-3 text-muted-foreground/80\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input-wrapper\"\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground/70 disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"max-h-80 flex-1 overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-2 text-foreground [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-3 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <kbd\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ms-auto -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/public/r/comp-01.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-01",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-01.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Simple input</Label>\n      <Input id={id} placeholder=\"Email\" type=\"email\" />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label"
+    ]
+  }
+}

package/public/r/comp-02.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-02",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-02.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>\n        Required input <span className=\"text-destructive\">*</span>\n      </Label>\n      <Input id={id} placeholder=\"Email\" type=\"email\" required />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "required"
+    ]
+  }
+}

package/public/r/comp-03.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-03",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-03.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with helper text</Label>\n      <Input id={id} placeholder=\"Email\" type=\"email\" />\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        We won&lsquo;t share your email with anyone\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "helper"
+    ]
+  }
+}

package/public/r/comp-04.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-04",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-04.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label htmlFor={id} className=\"leading-6\">\n          Input with hint\n        </Label>\n        <span className=\"text-sm text-muted-foreground\">Optional</span>\n      </div>\n      <Input id={id} placeholder=\"Email\" type=\"email\" />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "hint"
+    ]
+  }
+}

package/public/r/comp-05.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-05",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-05.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <>\n      <div className=\"[--ring:var(--color-indigo-300)] *:not-first:mt-2 in-[.dark]:[--ring:var(--color-indigo-900)]\">\n        <Label htmlFor={id}>Input with colored border and ring</Label>\n        <Input id={id} placeholder=\"Email\" type=\"email\" />\n      </div>\n    </>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label"
+    ]
+  }
+}

package/public/r/comp-06.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-06",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-06.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with error</Label>\n      <Input\n        id={id}\n        className=\"peer\"\n        placeholder=\"Email\"\n        type=\"email\"\n        defaultValue=\"invalid@email.com\"\n        aria-invalid\n      />\n      <p\n        className=\"mt-2 text-xs peer-aria-invalid:text-destructive\"\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        Email is invalid\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "error"
+    ]
+  }
+}