love-ui 1.2.12 → 1.2.14

package/public/r/menu-close-on-click.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/menu-close-on-click.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuCloseOnClickDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuItem closeOnClick>Profile</MenuItem>\n        <MenuItem closeOnClick>Settings</MenuItem>\n        <MenuItem closeOnClick>Log out</MenuItem>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuCloseOnClickDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>\n        Updated Open menu\n      </MenuTrigger>\n      <MenuPopup>\n        <MenuItem closeOnClick>Updated Profile</MenuItem>\n        <MenuItem closeOnClick>Updated Settings</MenuItem>\n        <MenuItem closeOnClick>Updated Log out</MenuItem>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/menu-demo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/menu-demo.tsx",
-      "content": "import {\n  PauseIcon,\n  PlayIcon,\n  SkipBackIcon,\n  SkipForwardIcon,\n  TrashIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuCheckboxItem,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuPopup,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuShortcut,\n  MenuSub,\n  MenuSubPopup,\n  MenuSubTrigger,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuGroup>\n          <MenuGroupLabel>Playback</MenuGroupLabel>\n          <MenuItem>\n            <PlayIcon className=\"opacity-72\" />\n            Play\n            <MenuShortcut>⌘P</MenuShortcut>\n          </MenuItem>\n          <MenuItem disabled>\n            <PauseIcon className=\"opacity-72\" />\n            Pause\n            <MenuShortcut>⇧⌘P</MenuShortcut>\n          </MenuItem>\n          <MenuItem>\n            <SkipBackIcon className=\"opacity-72\" />\n            Previous\n            <MenuShortcut>⌘[</MenuShortcut>\n          </MenuItem>\n          <MenuItem>\n            <SkipForwardIcon className=\"opacity-72\" />\n            Next\n            <MenuShortcut>⌘]</MenuShortcut>\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuCheckboxItem>Shuffle</MenuCheckboxItem>\n        <MenuCheckboxItem>Repeat</MenuCheckboxItem>\n        <MenuCheckboxItem disabled>Enhanced Audio</MenuCheckboxItem>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuGroupLabel>Sort by</MenuGroupLabel>\n          <MenuRadioGroup>\n            <MenuRadioItem value=\"artist\">Artist</MenuRadioItem>\n            <MenuRadioItem value=\"album\">Album</MenuRadioItem>\n            <MenuRadioItem value=\"title\">Title</MenuRadioItem>\n          </MenuRadioGroup>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuSub>\n          <MenuSubTrigger>Add to Playlist</MenuSubTrigger>\n          <MenuSubPopup>\n            <MenuItem>Jazz</MenuItem>\n            <MenuSub>\n              <MenuSubTrigger>Rock</MenuSubTrigger>\n              <MenuSubPopup>\n                <MenuItem>Hard Rock</MenuItem>\n                <MenuItem>Soft Rock</MenuItem>\n                <MenuItem>Classic Rock</MenuItem>\n                <MenuSeparator />\n                <MenuItem>Metal</MenuItem>\n                <MenuItem>Punk</MenuItem>\n                <MenuItem>Grunge</MenuItem>\n                <MenuItem>Alternative</MenuItem>\n                <MenuItem>Indie</MenuItem>\n                <MenuItem>Electronic</MenuItem>\n              </MenuSubPopup>\n            </MenuSub>\n            <MenuItem>Pop</MenuItem>\n          </MenuSubPopup>\n        </MenuSub>\n        <MenuSeparator />\n        <MenuItem variant=\"destructive\">\n          <TrashIcon />\n          Delete\n          <MenuShortcut>⌘⌫</MenuShortcut>\n        </MenuItem>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
+      "content": "import {\n  PauseIcon,\n  PlayIcon,\n  SkipBackIcon,\n  SkipForwardIcon,\n  TrashIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuCheckboxItem,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuPopup,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuShortcut,\n  MenuSub,\n  MenuSubPopup,\n  MenuSubTrigger,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>\n        Updated Open menu\n      </MenuTrigger>\n      <MenuPopup>\n        <MenuGroup>\n          <MenuGroupLabel>Updated Playback</MenuGroupLabel>\n          <MenuItem>\n            <PlayIcon className=\"opacity-72\" />\n            Updated Play\n            <MenuShortcut>Updated ⌘P</MenuShortcut>\n          </MenuItem>\n          <MenuItem disabled>\n            <PauseIcon className=\"opacity-72\" />\n            Updated Pause\n            <MenuShortcut>Updated ⇧⌘P</MenuShortcut>\n          </MenuItem>\n          <MenuItem>\n            <SkipBackIcon className=\"opacity-72\" />\n            Updated Previous\n            <MenuShortcut>⌘[</MenuShortcut>\n          </MenuItem>\n          <MenuItem>\n            <SkipForwardIcon className=\"opacity-72\" />\n            Updated Next\n            <MenuShortcut>⌘]</MenuShortcut>\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuCheckboxItem>Updated Shuffle</MenuCheckboxItem>\n        <MenuCheckboxItem>Updated Repeat</MenuCheckboxItem>\n        <MenuCheckboxItem disabled>Updated Enhanced Audio</MenuCheckboxItem>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuGroupLabel>Updated Sort by</MenuGroupLabel>\n          <MenuRadioGroup>\n            <MenuRadioItem value=\"artist\">Updated Artist</MenuRadioItem>\n            <MenuRadioItem value=\"album\">Updated Album</MenuRadioItem>\n            <MenuRadioItem value=\"title\">Updated Title</MenuRadioItem>\n          </MenuRadioGroup>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuSub>\n          <MenuSubTrigger>Updated Add to Playlist</MenuSubTrigger>\n          <MenuSubPopup>\n            <MenuItem>Updated Jazz</MenuItem>\n            <MenuSub>\n              <MenuSubTrigger>Updated Rock</MenuSubTrigger>\n              <MenuSubPopup>\n                <MenuItem>Updated Hard Rock</MenuItem>\n                <MenuItem>Updated Soft Rock</MenuItem>\n                <MenuItem>Updated Classic Rock</MenuItem>\n                <MenuSeparator />\n                <MenuItem>Updated Metal</MenuItem>\n                <MenuItem>Updated Punk</MenuItem>\n                <MenuItem>Updated Grunge</MenuItem>\n                <MenuItem>Updated Alternative</MenuItem>\n                <MenuItem>Updated Indie</MenuItem>\n                <MenuItem>Updated Electronic</MenuItem>\n              </MenuSubPopup>\n            </MenuSub>\n            <MenuItem>Updated Pop</MenuItem>\n          </MenuSubPopup>\n        </MenuSub>\n        <MenuSeparator />\n        <MenuItem variant=\"destructive\">\n          <TrashIcon />\n          Updated Delete\n          <MenuShortcut>⌘⌫</MenuShortcut>\n        </MenuItem>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/menu-group-labels.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/menu-group-labels.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuPopup,\n  MenuSeparator,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuGroupLabelsDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuGroup>\n          <MenuGroupLabel>Account</MenuGroupLabel>\n          <MenuItem>Profile</MenuItem>\n          <MenuItem>Billing</MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuGroupLabel>Support</MenuGroupLabel>\n          <MenuItem>Docs</MenuItem>\n          <MenuItem>Contact</MenuItem>\n        </MenuGroup>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuSeparator,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuGroupLabelsDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>\n        Updated Open menu\n      </MenuTrigger>\n      <MenuPopup>\n        <MenuItem disabled>Updated Account</MenuItem>\n        <MenuItem>Updated Profile</MenuItem>\n        <MenuItem>Updated Billing</MenuItem>\n        <MenuSeparator />\n        <MenuItem disabled>Updated Support</MenuItem>\n        <MenuItem>Updated Docs</MenuItem>\n        <MenuItem>Updated Contact</MenuItem>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/menu-hover.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/menu-hover.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuHoverDemo() {\n  return (\n    <Menu openOnHover>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Hover me</MenuTrigger>\n      <MenuPopup>\n        <MenuItem>Item one</MenuItem>\n        <MenuItem>Item two</MenuItem>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuHoverDemo() {\n  return (\n    <Menu openOnHover>\n      <MenuTrigger render={<Button variant=\"outline\" />}>\n        Updated Hover me\n      </MenuTrigger>\n      <MenuPopup>\n        <MenuItem>Updated Item one</MenuItem>\n        <MenuItem>Updated Item two</MenuItem>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/menu-link.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/menu-link.tsx",
-      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuLinkDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuItem render={<Link href=\"/docs\" />}>Docs</MenuItem>\n        <MenuItem render={<Link href=\"/particles\" />}>Particles</MenuItem>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuLinkDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>\n        Updated Open menu\n      </MenuTrigger>\n      <MenuPopup>\n        <MenuItem render={<Link href=\"/docs\" />}>Updated Docs</MenuItem>\n        <MenuItem render={<Link href=\"/particles\" />}>\n          Updated Particles\n        </MenuItem>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/menu-nested.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/menu-nested.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuSub,\n  MenuSubPopup,\n  MenuSubTrigger,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuNestedDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuItem>Item one</MenuItem>\n        <MenuSub>\n          <MenuSubTrigger>More</MenuSubTrigger>\n          <MenuSubPopup>\n            <MenuItem>Sub item A</MenuItem>\n            <MenuItem>Sub item B</MenuItem>\n          </MenuSubPopup>\n        </MenuSub>\n        <MenuItem>Item two</MenuItem>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuSub,\n  MenuSubPopup,\n  MenuSubTrigger,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuNestedDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>\n        Updated Open menu\n      </MenuTrigger>\n      <MenuPopup>\n        <MenuItem>Updated Item one</MenuItem>\n        <MenuSub>\n          <MenuSubTrigger>Updated More</MenuSubTrigger>\n          <MenuSubPopup>\n            <MenuItem>Updated Sub item A</MenuItem>\n            <MenuItem>Updated Sub item B</MenuItem>\n          </MenuSubPopup>\n        </MenuSub>\n        <MenuItem>Updated Item two</MenuItem>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/menu-radio-group.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/menu-radio-group.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuPopup,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuRadioGroupDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuRadioGroup defaultValue=\"system\">\n          <MenuRadioItem value=\"light\">Light</MenuRadioItem>\n          <MenuRadioItem value=\"dark\">Dark</MenuRadioItem>\n          <MenuRadioItem value=\"system\">System</MenuRadioItem>\n        </MenuRadioGroup>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuPopup,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuRadioGroupDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>\n        Updated Open menu\n      </MenuTrigger>\n      <MenuPopup>\n        <MenuRadioGroup defaultValue=\"system\">\n          <MenuRadioItem value=\"light\">Updated Light</MenuRadioItem>\n          <MenuRadioItem value=\"dark\">Updated Dark</MenuRadioItem>\n          <MenuRadioItem value=\"system\">Updated System</MenuRadioItem>\n        </MenuRadioGroup>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/meter-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/meter-demo.tsx",
-      "content": "import {\n  Meter,\n  MeterIndicator,\n  MeterLabel,\n  MeterTrack,\n  MeterValue,\n} from \"@/registry/default/ui/meter\"\n\nexport default function MeterDemo() {\n  return (\n    <Meter value={75}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <MeterLabel>Storage usage</MeterLabel>\n        <MeterValue />\n      </div>\n      <MeterTrack>\n        <MeterIndicator />\n      </MeterTrack>\n    </Meter>\n  )\n}\n",
+      "content": "import {\n  Meter,\n  MeterIndicator,\n  MeterLabel,\n  MeterTrack,\n  MeterValue,\n} from \"@/registry/default/ui/meter\"\n\nexport default function MeterDemo() {\n  return (\n    <Meter value={75}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <MeterLabel>Updated Storage usage</MeterLabel>\n        <MeterValue />\n      </div>\n      <MeterTrack>\n        <MeterIndicator />\n      </MeterTrack>\n    </Meter>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/meter-with-formatted-value.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/meter-with-formatted-value.tsx",
-      "content": "\"use client\"\n\nimport {\n  Meter,\n  MeterIndicator,\n  MeterLabel,\n  MeterTrack,\n  MeterValue,\n} from \"@/registry/default/ui/meter\"\n\nexport default function MeterWithFormattedValueDemo() {\n  return (\n    <Meter value={3} max={5}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <MeterLabel>Rating</MeterLabel>\n        <MeterValue>{(_formatted, value) => `${value} / 5`}</MeterValue>\n      </div>\n      <MeterTrack>\n        <MeterIndicator />\n      </MeterTrack>\n    </Meter>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Meter,\n  MeterIndicator,\n  MeterLabel,\n  MeterTrack,\n  MeterValue,\n} from \"@/registry/default/ui/meter\"\n\nexport default function MeterWithFormattedValueDemo() {\n  return (\n    <Meter value={3} max={5}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <MeterLabel>Updated Rating</MeterLabel>\n        <MeterValue>{(_formatted, value) => `${value} / 5`}</MeterValue>\n      </div>\n      <MeterTrack>\n        <MeterIndicator />\n      </MeterTrack>\n    </Meter>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/meter-with-range.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/meter-with-range.tsx",
-      "content": "\"use client\"\n\nimport {\n  Meter,\n  MeterIndicator,\n  MeterLabel,\n  MeterTrack,\n  MeterValue,\n} from \"@/registry/default/ui/meter\"\n\nexport default function MeterWithRangeDemo() {\n  return (\n    <Meter value={700} min={500} max={1000}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <MeterLabel>Bandwidth (Mbps)</MeterLabel>\n        <MeterValue>{(_formatted, value) => value}</MeterValue>\n      </div>\n      <MeterTrack>\n        <MeterIndicator />\n      </MeterTrack>\n    </Meter>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Meter,\n  MeterIndicator,\n  MeterLabel,\n  MeterTrack,\n  MeterValue,\n} from \"@/registry/default/ui/meter\"\n\nexport default function MeterWithRangeDemo() {\n  return (\n    <Meter value={700} min={500} max={1000}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <MeterLabel>Updated Bandwidth (Mbps)</MeterLabel>\n        <MeterValue>{(_formatted, value) => value}</MeterValue>\n      </div>\n      <MeterTrack>\n        <MeterIndicator />\n      </MeterTrack>\n    </Meter>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/mini-calendar-controlled.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/mini-calendar-controlled.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  MiniCalendar,\n  MiniCalendarDay,\n  MiniCalendarDays,\n  MiniCalendarNavigation,\n} from \"../../../../../packages/mini-calendar\"\n\nconst Example = () => {\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"space-y-4\">\n      <MiniCalendar onValueChange={setSelectedDate} value={selectedDate}>\n        <MiniCalendarNavigation direction=\"prev\" />\n        <MiniCalendarDays>\n          {(date) => <MiniCalendarDay date={date} key={date.toISOString()} />}\n        </MiniCalendarDays>\n        <MiniCalendarNavigation direction=\"next\" />\n      </MiniCalendar>\n\n      {selectedDate && (\n        <p className=\"text-sm text-muted-foreground\">\n          Selected:{\" \"}\n          {selectedDate.toLocaleDateString(\"en-US\", {\n            weekday: \"long\",\n            year: \"numeric\",\n            month: \"long\",\n            day: \"numeric\",\n          })}\n        </p>\n      )}\n    </div>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  MiniCalendar,\n  MiniCalendarDay,\n  MiniCalendarDays,\n  MiniCalendarNavigation,\n} from \"../../../../../packages/mini-calendar\"\n\nconst Example = () => {\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined)\n\n  return (\n    <div className=\"space-y-4\">\n      <MiniCalendar onValueChange={setSelectedDate} value={selectedDate}>\n        <MiniCalendarNavigation direction=\"prev\" />\n        <MiniCalendarDays>\n          {(date) => <MiniCalendarDay date={date} key={date.toISOString()} />}\n        </MiniCalendarDays>\n        <MiniCalendarNavigation direction=\"next\" />\n      </MiniCalendar>\n\n      {selectedDate && (\n        <p className=\"text-sm text-muted-foreground\">\n          Updated Selected:{\" \"}\n          {selectedDate.toLocaleDateString(\"en-US\", {\n            weekday: \"long\",\n            year: \"numeric\",\n            month: \"long\",\n            day: \"numeric\",\n          })}\n        </p>\n      )}\n    </div>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/multiselect.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "multiselect",
+  "type": "registry:ui",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/command.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/ui/multiselect.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect } from \"react\"\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\nimport {\n  Command,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\n\nexport interface Option {\n  value: string\n  label: string\n  disable?: boolean\n  /** fixed option that can't be removed. */\n  fixed?: boolean\n  /** Group the options by providing key. */\n  [key: string]: string | boolean | undefined\n}\ninterface GroupOption {\n  [key: string]: Option[]\n}\n\ninterface MultipleSelectorProps {\n  value?: Option[]\n  defaultOptions?: Option[]\n  /** manually controlled options */\n  options?: Option[]\n  placeholder?: string\n  /** Loading component. */\n  loadingIndicator?: React.ReactNode\n  /** Empty component. */\n  emptyIndicator?: React.ReactNode\n  /** Debounce time for async search. Only work with `onSearch`. */\n  delay?: number\n  /**\n   * Only work with `onSearch` prop. Trigger search when `onFocus`.\n   * For example, when user click on the input, it will trigger the search to get initial options.\n   **/\n  triggerSearchOnFocus?: boolean\n  /** async search */\n  onSearch?: (value: string) => Promise<Option[]>\n  /**\n   * sync search. This search will not showing loadingIndicator.\n   * The rest props are the same as async search.\n   * i.e.: creatable, groupBy, delay.\n   **/\n  onSearchSync?: (value: string) => Option[]\n  onChange?: (options: Option[]) => void\n  /** Limit the maximum number of selected options. */\n  maxSelected?: number\n  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */\n  onMaxSelected?: (maxLimit: number) => void\n  /** Hide the placeholder when there are options selected. */\n  hidePlaceholderWhenSelected?: boolean\n  disabled?: boolean\n  /** Group the options base on provided key. */\n  groupBy?: string\n  className?: string\n  badgeClassName?: string\n  /**\n   * First item selected is a default behavior by cmdk. That is why the default is true.\n   * This is a workaround solution by add a dummy item.\n   *\n   * @reference: https://github.com/pacocoursey/cmdk/issues/171\n   */\n  selectFirstItem?: boolean\n  /** Allow user to create option when there is no option matched. */\n  creatable?: boolean\n  /** Props of `Command` */\n  commandProps?: React.ComponentPropsWithoutRef<typeof Command>\n  /** Props of `CommandInput` */\n  inputProps?: Omit<\n    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,\n    \"value\" | \"placeholder\" | \"disabled\"\n  >\n  /** hide the clear all button. */\n  hideClearAllButton?: boolean\n}\n\nexport interface MultipleSelectorRef {\n  selectedValue: Option[]\n  input: HTMLInputElement\n  focus: () => void\n  reset: () => void\n}\n\nexport function useDebounce<T>(value: T, delay?: number): T {\n  const [debouncedValue, setDebouncedValue] = React.useState<T>(value)\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay || 500)\n\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [value, delay])\n\n  return debouncedValue\n}\n\nfunction transToGroupOption(options: Option[], groupBy?: string) {\n  if (options.length === 0) {\n    return {}\n  }\n  if (!groupBy) {\n    return {\n      \"\": options,\n    }\n  }\n\n  const groupOption: GroupOption = {}\n  options.forEach((option) => {\n    const key = (option[groupBy] as string) || \"\"\n    if (!groupOption[key]) {\n      groupOption[key] = []\n    }\n    groupOption[key].push(option)\n  })\n  return groupOption\n}\n\nfunction removePickedOption(groupOption: GroupOption, picked: Option[]) {\n  const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption\n\n  for (const [key, value] of Object.entries(cloneOption)) {\n    cloneOption[key] = value.filter(\n      (val) => !picked.find((p) => p.value === val.value)\n    )\n  }\n  return cloneOption\n}\n\nfunction isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {\n  for (const [, value] of Object.entries(groupOption)) {\n    if (\n      value.some((option) => targetOption.find((p) => p.value === option.value))\n    ) {\n      return true\n    }\n  }\n  return false\n}\n\nconst CommandEmpty = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  const render = useCommandState((state) => state.filtered.count === 0)\n\n  if (!render) return null\n\n  return (\n    <div\n      className={cn(\"px-2 py-4 text-center text-sm\", className)}\n      role=\"presentation\"\n      {...props}\n    />\n  )\n}\n\nCommandEmpty.displayName = \"CommandEmpty\"\n\nconst MultipleSelector = ({\n  value,\n  onChange,\n  placeholder,\n  defaultOptions: arrayDefaultOptions = [],\n  options: arrayOptions,\n  delay,\n  onSearch,\n  onSearchSync,\n  loadingIndicator,\n  emptyIndicator,\n  maxSelected = Number.MAX_SAFE_INTEGER,\n  onMaxSelected,\n  hidePlaceholderWhenSelected,\n  disabled,\n  groupBy,\n  className,\n  badgeClassName,\n  selectFirstItem = true,\n  creatable = false,\n  triggerSearchOnFocus = false,\n  commandProps,\n  inputProps,\n  hideClearAllButton = false,\n}: MultipleSelectorProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const [open, setOpen] = React.useState(false)\n  const [onScrollbar, setOnScrollbar] = React.useState(false)\n  const [isLoading, setIsLoading] = React.useState(false)\n  const dropdownRef = React.useRef<HTMLDivElement>(null) // Added this\n\n  const [selected, setSelected] = React.useState<Option[]>(value || [])\n  const [options, setOptions] = React.useState<GroupOption>(\n    transToGroupOption(arrayDefaultOptions, groupBy)\n  )\n  const [inputValue, setInputValue] = React.useState(\"\")\n  const debouncedSearchTerm = useDebounce(inputValue, delay || 500)\n\n  const handleClickOutside = (event: MouseEvent | TouchEvent) => {\n    if (\n      dropdownRef.current &&\n      !dropdownRef.current.contains(event.target as Node) &&\n      inputRef.current &&\n      !inputRef.current.contains(event.target as Node)\n    ) {\n      setOpen(false)\n      inputRef.current.blur()\n    }\n  }\n\n  const handleUnselect = React.useCallback(\n    (option: Option) => {\n      const newOptions = selected.filter((s) => s.value !== option.value)\n      setSelected(newOptions)\n      onChange?.(newOptions)\n    },\n    [onChange, selected]\n  )\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const input = inputRef.current\n      if (input) {\n        if (e.key === \"Delete\" || e.key === \"Backspace\") {\n          if (input.value === \"\" && selected.length > 0) {\n            const lastSelectOption = selected[selected.length - 1]\n            // If last item is fixed, we should not remove it.\n            if (!lastSelectOption.fixed) {\n              handleUnselect(selected[selected.length - 1])\n            }\n          }\n        }\n        // This is not a default behavior of the <input /> field\n        if (e.key === \"Escape\") {\n          input.blur()\n        }\n      }\n    },\n    [handleUnselect, selected]\n  )\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener(\"mousedown\", handleClickOutside)\n      document.addEventListener(\"touchend\", handleClickOutside)\n    } else {\n      document.removeEventListener(\"mousedown\", handleClickOutside)\n      document.removeEventListener(\"touchend\", handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside)\n      document.removeEventListener(\"touchend\", handleClickOutside)\n    }\n  }, [open])\n\n  useEffect(() => {\n    if (value) {\n      setSelected(value)\n    }\n  }, [value])\n\n  useEffect(() => {\n    /** If `onSearch` is provided, do not trigger options updated. */\n    if (!arrayOptions || onSearch) {\n      return\n    }\n    const newOption = transToGroupOption(arrayOptions || [], groupBy)\n    if (JSON.stringify(newOption) !== JSON.stringify(options)) {\n      setOptions(newOption)\n    }\n  }, [arrayDefaultOptions, arrayOptions, groupBy, onSearch, options])\n\n  useEffect(() => {\n    /** sync search */\n\n    const doSearchSync = () => {\n      const res = onSearchSync?.(debouncedSearchTerm)\n      setOptions(transToGroupOption(res || [], groupBy))\n    }\n\n    const exec = async () => {\n      if (!onSearchSync || !open) return\n\n      if (triggerSearchOnFocus) {\n        doSearchSync()\n      }\n\n      if (debouncedSearchTerm) {\n        doSearchSync()\n      }\n    }\n\n    void exec()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus])\n\n  useEffect(() => {\n    /** async search */\n\n    const doSearch = async () => {\n      setIsLoading(true)\n      const res = await onSearch?.(debouncedSearchTerm)\n      setOptions(transToGroupOption(res || [], groupBy))\n      setIsLoading(false)\n    }\n\n    const exec = async () => {\n      if (!onSearch || !open) return\n\n      if (triggerSearchOnFocus) {\n        await doSearch()\n      }\n\n      if (debouncedSearchTerm) {\n        await doSearch()\n      }\n    }\n\n    void exec()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus])\n\n  const CreatableItem = () => {\n    if (!creatable) return undefined\n    if (\n      isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||\n      selected.find((s) => s.value === inputValue)\n    ) {\n      return undefined\n    }\n\n    const Item = (\n      <CommandItem\n        value={inputValue}\n        className=\"cursor-pointer\"\n        onMouseDown={(e) => {\n          e.preventDefault()\n          e.stopPropagation()\n        }}\n        onSelect={(value: string) => {\n          if (selected.length >= maxSelected) {\n            onMaxSelected?.(selected.length)\n            return\n          }\n          setInputValue(\"\")\n          const newOptions = [...selected, { value, label: value }]\n          setSelected(newOptions)\n          onChange?.(newOptions)\n        }}\n      >\n        {`Create \"${inputValue}\"`}\n      </CommandItem>\n    )\n\n    // For normal creatable\n    if (!onSearch && inputValue.length > 0) {\n      return Item\n    }\n\n    // For async search creatable. avoid showing creatable item before loading at first.\n    if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {\n      return Item\n    }\n\n    return undefined\n  }\n\n  const EmptyItem = React.useCallback(() => {\n    if (!emptyIndicator) return undefined\n\n    // For async search that showing emptyIndicator\n    if (onSearch && !creatable && Object.keys(options).length === 0) {\n      return (\n        <CommandItem value=\"-\" disabled>\n          {emptyIndicator}\n        </CommandItem>\n      )\n    }\n\n    return <CommandEmpty>{emptyIndicator}</CommandEmpty>\n  }, [creatable, emptyIndicator, onSearch, options])\n\n  const selectables = React.useMemo<GroupOption>(\n    () => removePickedOption(options, selected),\n    [options, selected]\n  )\n\n  /** Avoid Creatable Selector freezing or lagging when paste a long string. */\n  const commandFilter = React.useCallback(() => {\n    if (commandProps?.filter) {\n      return commandProps.filter\n    }\n\n    if (creatable) {\n      return (value: string, search: string) => {\n        return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1\n      }\n    }\n    // Using default filter in `cmdk`. We don&lsquo;t have to provide it.\n    return undefined\n  }, [creatable, commandProps?.filter])\n\n  return (\n    <Command\n      ref={dropdownRef}\n      {...commandProps}\n      onKeyDown={(e) => {\n        handleKeyDown(e)\n        commandProps?.onKeyDown?.(e)\n      }}\n      className={cn(\n        \"h-auto overflow-visible bg-transparent\",\n        commandProps?.className\n      )}\n      shouldFilter={\n        commandProps?.shouldFilter !== undefined\n          ? commandProps.shouldFilter\n          : !onSearch\n      } // When onSearch is provided, we don&lsquo;t want to filter the options. You can still override it.\n      filter={commandFilter()}\n    >\n      <div\n        className={cn(\n          \"relative min-h-[38px] rounded-md border border-input text-sm transition-[color,box-shadow] outline-none focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\n          {\n            \"p-1\": selected.length !== 0,\n            \"cursor-text\": !disabled && selected.length !== 0,\n          },\n          !hideClearAllButton && \"pe-9\",\n          className\n        )}\n        onClick={() => {\n          if (disabled) return\n          inputRef?.current?.focus()\n        }}\n      >\n        <div className=\"flex flex-wrap gap-1\">\n          {selected.map((option) => {\n            return (\n              <div\n                key={option.value}\n                className={cn(\n                  \"animate-fadeIn relative inline-flex h-7 cursor-default items-center rounded-md border bg-background ps-2 pe-7 pl-2 text-xs font-medium text-secondary-foreground transition-all hover:bg-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-fixed:pe-2\",\n                  badgeClassName\n                )}\n                data-fixed={option.fixed}\n                data-disabled={disabled || undefined}\n              >\n                {option.label}\n                <button\n                  className=\"absolute -inset-y-px -end-px flex size-7 items-center justify-center rounded-e-md border border-transparent p-0 text-muted-foreground/80 outline-hidden transition-[color,box-shadow] outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n                  onKeyDown={(e) => {\n                    if (e.key === \"Enter\") {\n                      handleUnselect(option)\n                    }\n                  }}\n                  onMouseDown={(e) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                  }}\n                  onClick={() => handleUnselect(option)}\n                  aria-label=\"Remove\"\n                >\n                  <XIcon size={14} aria-hidden=\"true\" />\n                </button>\n              </div>\n            )\n          })}\n          {/* Avoid having the \"Search\" Icon */}\n          <CommandPrimitive.Input\n            {...inputProps}\n            ref={inputRef}\n            value={inputValue}\n            disabled={disabled}\n            onValueChange={(value) => {\n              setInputValue(value)\n              inputProps?.onValueChange?.(value)\n            }}\n            onBlur={(event) => {\n              if (!onScrollbar) {\n                setOpen(false)\n              }\n              inputProps?.onBlur?.(event)\n            }}\n            onFocus={(event) => {\n              setOpen(true)\n              if (triggerSearchOnFocus) {\n                onSearch?.(debouncedSearchTerm)\n              }\n              inputProps?.onFocus?.(event)\n            }}\n            placeholder={\n              hidePlaceholderWhenSelected && selected.length !== 0\n                ? \"\"\n                : placeholder\n            }\n            className={cn(\n              \"flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground/70 disabled:cursor-not-allowed\",\n              {\n                \"w-full\": hidePlaceholderWhenSelected,\n                \"px-3 py-2\": selected.length === 0,\n                \"ml-1\": selected.length !== 0,\n              },\n              inputProps?.className\n            )}\n          />\n          <button\n            type=\"button\"\n            onClick={() => {\n              setSelected(selected.filter((s) => s.fixed))\n              onChange?.(selected.filter((s) => s.fixed))\n            }}\n            className={cn(\n              \"absolute end-0 top-0 flex size-9 items-center justify-center rounded-md border border-transparent text-muted-foreground/80 transition-[color,box-shadow] outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n              (hideClearAllButton ||\n                disabled ||\n                selected.length < 1 ||\n                selected.filter((s) => s.fixed).length === selected.length) &&\n                \"hidden\"\n            )}\n            aria-label=\"Clear all\"\n          >\n            <XIcon size={16} aria-hidden=\"true\" />\n          </button>\n        </div>\n      </div>\n      <div className=\"relative\">\n        <div\n          className={cn(\n            \"absolute top-2 z-10 w-full overflow-hidden rounded-md border border-input\",\n            \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n            !open && \"hidden\"\n          )}\n          data-state={open ? \"open\" : \"closed\"}\n        >\n          {open && (\n            <CommandList\n              className=\"bg-popover text-popover-foreground shadow-lg outline-hidden\"\n              onMouseLeave={() => {\n                setOnScrollbar(false)\n              }}\n              onMouseEnter={() => {\n                setOnScrollbar(true)\n              }}\n              onMouseUp={() => {\n                inputRef?.current?.focus()\n              }}\n            >\n              {isLoading ? (\n                <>{loadingIndicator}</>\n              ) : (\n                <>\n                  {EmptyItem()}\n                  {CreatableItem()}\n                  {!selectFirstItem && (\n                    <CommandItem value=\"-\" className=\"hidden\" />\n                  )}\n                  {Object.entries(selectables).map(([key, dropdowns]) => (\n                    <CommandGroup\n                      key={key}\n                      heading={key}\n                      className=\"h-full overflow-auto\"\n                    >\n                      <>\n                        {dropdowns.map((option) => {\n                          return (\n                            <CommandItem\n                              key={option.value}\n                              value={option.value}\n                              disabled={option.disable}\n                              onMouseDown={(e) => {\n                                e.preventDefault()\n                                e.stopPropagation()\n                              }}\n                              onSelect={() => {\n                                if (selected.length >= maxSelected) {\n                                  onMaxSelected?.(selected.length)\n                                  return\n                                }\n                                setInputValue(\"\")\n                                const newOptions = [...selected, option]\n                                setSelected(newOptions)\n                                onChange?.(newOptions)\n                              }}\n                              className={cn(\n                                \"cursor-pointer\",\n                                option.disable &&\n                                  \"pointer-events-none cursor-not-allowed opacity-50\"\n                              )}\n                            >\n                              {option.label}\n                            </CommandItem>\n                          )\n                        })}\n                      </>\n                    </CommandGroup>\n                  ))}\n                </>\n              )}\n            </CommandList>\n          )}\n        </div>\n      </div>\n    </Command>\n  )\n}\n\nMultipleSelector.displayName = \"MultipleSelector\"\nexport default MultipleSelector\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/public/r/navigation-menu.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "navigation-menu",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/default/ui/navigation-menu.tsx",
+      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active]:bg-accent data-[active]:text-accent-foreground data-[active]:hover:bg-accent data-[active]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/examples/number-field-form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Field } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/registry/default/ui/number-field\"\n\nconst schema = z.object({\n  quantity: z.coerce\n    .number({ message: \"Please enter a quantity.\" })\n    .min(1, { message: \"Quantity must be at least 1.\" })\n    .max(100, { message: \"Maximum quantity is 100.\" }),\n})\n\ntype Errors = Record<string, string | string[]>\n\nasync function submitForm(event: React.FormEvent<HTMLFormElement>) {\n  event.preventDefault()\n\n  const formData = new FormData(event.currentTarget)\n  const result = schema.safeParse(Object.fromEntries(formData as any))\n\n  if (!result.success) {\n    const { fieldErrors } = z.flattenError(result.error)\n    return { errors: fieldErrors as Errors }\n  }\n\n  return {\n    errors: {} as Errors,\n    data: result.data,\n  }\n}\n\nexport default function NumberFieldFormDemo() {\n  const [loading, setLoading] = React.useState(false)\n\n  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    setLoading(true)\n    const response = await submitForm(event)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    if (Object.keys(response.errors).length === 0) {\n      alert(`Quantity: ${response.data?.quantity}`)\n    }\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-64\">\n      <Field name=\"quantity\">\n        <NumberField defaultValue={1} min={1} max={100} disabled={loading}>\n          <NumberFieldScrubArea label=\"Quantity\" />\n          <NumberFieldGroup>\n            <NumberFieldDecrement />\n            <NumberFieldInput />\n            <NumberFieldIncrement />\n          </NumberFieldGroup>\n        </NumberField>\n      </Field>\n\n      <Button type=\"submit\" disabled={loading}>\n        Submit\n      </Button>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Field } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/registry/default/ui/number-field\"\n\nconst schema = z.object({\n  quantity: z.coerce\n    .number({ message: \"Updated Please enter a quantity.\" })\n    .min(1, { message: \"Updated Quantity must be at least 1.\" })\n    .max(100, { message: \"Updated Maximum quantity is 100.\" }),\n})\n\ntype Errors = Record<string, string | string[]>\n\nasync function submitForm(event: React.FormEvent<HTMLFormElement>) {\n  event.preventDefault()\n\n  const formData = new FormData(event.currentTarget)\n  const result = schema.safeParse(Object.fromEntries(formData as any))\n\n  if (!result.success) {\n    const { fieldErrors } = z.flattenError(result.error)\n    return { errors: fieldErrors as Errors }\n  }\n\n  return {\n    errors: {} as Errors,\n    data: result.data,\n  }\n}\n\nexport default function NumberFieldFormDemo() {\n  const [loading, setLoading] = React.useState(false)\n\n  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    setLoading(true)\n    const response = await submitForm(event)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    if (Object.keys(response.errors).length === 0) {\n      alert(`Quantity: ${response.data?.quantity}`)\n    }\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-64\">\n      <Field name=\"quantity\">\n        <NumberField defaultValue={1} min={1} max={100} disabled={loading}>\n          <NumberFieldScrubArea label=\"Updated Quantity\" />\n          <NumberFieldGroup>\n            <NumberFieldDecrement />\n            <NumberFieldInput />\n            <NumberFieldIncrement />\n          </NumberFieldGroup>\n        </NumberField>\n      </Field>\n\n      <Button type=\"submit\" disabled={loading}>\n        Updated Submit\n      </Button>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

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

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/examples/number-field-with-label.tsx",
-      "content": "import * as React from \"react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\"\n\nexport default function NumberFieldWithLabel() {\n  const id = React.useId()\n  return (\n    <div className=\"flex flex-col items-start gap-2\">\n      <Label htmlFor={id}>Quantity</Label>\n      <NumberField id={id} defaultValue={0}>\n        <NumberFieldGroup>\n          <NumberFieldDecrement />\n          <NumberFieldInput />\n          <NumberFieldIncrement />\n        </NumberFieldGroup>\n      </NumberField>\n    </div>\n  )\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\"\n\nexport default function NumberFieldWithLabel() {\n  const id = React.useId()\n  return (\n    <div className=\"flex flex-col items-start gap-2\">\n      <Label htmlFor={id}>Updated Quantity</Label>\n      <NumberField id={id} defaultValue={0}>\n        <NumberFieldGroup>\n          <NumberFieldDecrement />\n          <NumberFieldInput />\n          <NumberFieldIncrement />\n        </NumberFieldGroup>\n      </NumberField>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

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

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/number-field-with-scrub.tsx",
-      "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/registry/default/ui/number-field\"\n\nexport default function NumberFieldDemoWithScrub() {\n  return (\n    <NumberField defaultValue={0}>\n      <NumberFieldScrubArea label=\"Quantity\" />\n      <NumberFieldGroup>\n        <NumberFieldDecrement />\n        <NumberFieldInput />\n        <NumberFieldIncrement />\n      </NumberFieldGroup>\n    </NumberField>\n  )\n}\n",
+      "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/registry/default/ui/number-field\"\n\nexport default function NumberFieldDemoWithScrub() {\n  return (\n    <NumberField defaultValue={0}>\n      <NumberFieldScrubArea label=\"Updated Quantity\" />\n      <NumberFieldGroup>\n        <NumberFieldDecrement />\n        <NumberFieldInput />\n        <NumberFieldIncrement />\n      </NumberFieldGroup>\n    </NumberField>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

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

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/number-field-with-step.tsx",
-      "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/registry/default/ui/number-field\"\n\nexport default function NumberFieldWithStep() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <NumberField defaultValue={0} step={10}>\n        <NumberFieldScrubArea label=\"Step 10\" />\n        <NumberFieldGroup>\n          <NumberFieldDecrement />\n          <NumberFieldInput />\n          <NumberFieldIncrement />\n        </NumberFieldGroup>\n      </NumberField>\n      <NumberField defaultValue={0} step={0.1}>\n        <NumberFieldScrubArea label=\"Step 0.1\" />\n        <NumberFieldGroup>\n          <NumberFieldDecrement />\n          <NumberFieldInput />\n          <NumberFieldIncrement />\n        </NumberFieldGroup>\n      </NumberField>\n    </div>\n  )\n}\n",
+      "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/registry/default/ui/number-field\"\n\nexport default function NumberFieldWithStep() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <NumberField defaultValue={0} step={10}>\n        <NumberFieldScrubArea label=\"Updated Step 10\" />\n        <NumberFieldGroup>\n          <NumberFieldDecrement />\n          <NumberFieldInput />\n          <NumberFieldIncrement />\n        </NumberFieldGroup>\n      </NumberField>\n      <NumberField defaultValue={0} step={0.1}>\n        <NumberFieldScrubArea label=\"Updated Step 0.1\" />\n        <NumberFieldGroup>\n          <NumberFieldDecrement />\n          <NumberFieldInput />\n          <NumberFieldIncrement />\n        </NumberFieldGroup>\n      </NumberField>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/pill-avatar-group.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/pill-avatar-group.tsx",
-      "content": "\"use client\"\n\nimport { Pill, PillAvatar, PillAvatarGroup } from \"../../../../../packages/pill\"\n\nconst Example = () => (\n  <Pill>\n    <PillAvatarGroup>\n      <PillAvatar\n        fallback=\"CL\"\n        src=\"https://pbs.twimg.com/profile_images/1748718473595789312/PbqJh9hk_400x400.jpg\"\n      />\n      <PillAvatar\n        fallback=\"SC\"\n        src=\"https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg\"\n      />\n      <PillAvatar\n        fallback=\"LR\"\n        src=\"https://pbs.twimg.com/profile_images/1862717563311968256/xfgt1L9l_400x400.jpg\"\n      />\n    </PillAvatarGroup>\n    Loved by millions\n  </Pill>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { Pill, PillAvatar, PillAvatarGroup } from \"../../../../../packages/pill\"\n\nconst Example = () => (\n  <Pill>\n    <PillAvatarGroup>\n      <PillAvatar\n        fallback=\"CL\"\n        src=\"https://pbs.twimg.com/profile_images/1748718473595789312/PbqJh9hk_400x400.jpg\"\n      />\n      <PillAvatar\n        fallback=\"SC\"\n        src=\"https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg\"\n      />\n      <PillAvatar\n        fallback=\"LR\"\n        src=\"https://pbs.twimg.com/profile_images/1862717563311968256/xfgt1L9l_400x400.jpg\"\n      />\n    </PillAvatarGroup>\n    Updated Loved by millions\n  </Pill>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/pill-delta.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/pill-delta.tsx",
-      "content": "\"use client\"\n\nimport { Pill, PillDelta } from \"../../../../../packages/pill\"\n\nconst Example = () => (\n  <>\n    <Pill>\n      <PillDelta delta={10} />\n      Up 10%\n    </Pill>\n    <Pill>\n      <PillDelta delta={-5} />\n      Down 5%\n    </Pill>\n    <Pill>\n      <PillDelta delta={0} />\n      No change\n    </Pill>\n  </>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { Pill, PillDelta } from \"../../../../../packages/pill\"\n\nconst Example = () => (\n  <>\n    <Pill>\n      <PillDelta delta={10} />\n      Updated Up 10%\n    </Pill>\n    <Pill>\n      <PillDelta delta={-5} />\n      Updated Down 5%\n    </Pill>\n    <Pill>\n      <PillDelta delta={0} />\n      Updated No change\n    </Pill>\n  </>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/pill-icon.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/pill-icon.tsx",
-      "content": "\"use client\"\n\nimport { UsersIcon } from \"lucide-react\"\n\nimport { Pill, PillIcon } from \"../../../../../packages/pill\"\n\nconst Example = () => (\n  <Pill>\n    <PillIcon icon={UsersIcon} />\n    17 users\n  </Pill>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { UsersIcon } from \"lucide-react\"\n\nimport { Pill, PillIcon } from \"../../../../../packages/pill\"\n\nconst Example = () => (\n  <Pill>\n    <PillIcon icon={UsersIcon} />\n    Updated 17 users\n  </Pill>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/pill-indicator.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/pill-indicator.tsx",
-      "content": "\"use client\"\n\nimport { Pill, PillIndicator } from \"../../../../../packages/pill\"\n\nconst Example = () => (\n  <>\n    <Pill>\n      <PillIndicator pulse variant=\"success\" />\n      Active\n    </Pill>\n    <Pill>\n      <PillIndicator variant=\"error\" />\n      Error\n    </Pill>\n  </>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { Pill, PillIndicator } from \"../../../../../packages/pill\"\n\nconst Example = () => (\n  <>\n    <Pill>\n      <PillIndicator pulse variant=\"success\" />\n      Updated Active\n    </Pill>\n    <Pill>\n      <PillIndicator variant=\"error\" />\n      Updated Error\n    </Pill>\n  </>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/pill-status.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/pill-status.tsx",
-      "content": "\"use client\"\n\nimport { CheckCircleIcon } from \"lucide-react\"\n\nimport { Pill, PillStatus } from \"../../../../../packages/pill\"\n\nconst Example = () => (\n  <Pill>\n    <PillStatus>\n      <CheckCircleIcon className=\"text-emerald-500\" size={12} />\n      Passed\n    </PillStatus>\n    Approval Status\n  </Pill>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { CheckCircleIcon } from \"lucide-react\"\n\nimport { Pill, PillStatus } from \"../../../../../packages/pill\"\n\nconst Example = () => (\n  <Pill>\n    <PillStatus>\n      <CheckCircleIcon className=\"text-emerald-500\" size={12} />\n      Updated Passed\n    </PillStatus>\n    Updated Approval Status\n  </Pill>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/pill.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/pill.tsx",
-      "content": "\"use client\"\n\nimport { CheckCircleIcon, UsersIcon, XIcon } from \"lucide-react\"\n\nimport {\n  Pill,\n  PillAvatar,\n  PillAvatarGroup,\n  PillButton,\n  PillDelta,\n  PillIcon,\n  PillIndicator,\n  PillStatus,\n} from \"../../../../../packages/pill\"\n\nconst Example = () => (\n  <div className=\"flex flex-wrap items-center justify-center gap-2\">\n    <Pill>\n      <PillAvatar\n        fallback=\"CL\"\n        src=\"https://pbs.twimg.com/profile_images/1748718473595789312/PbqJh9hk_400x400.jpg\"\n      />\n      @loveconnor\n    </Pill>\n    <Pill>\n      <PillStatus>\n        <CheckCircleIcon className=\"text-emerald-500\" size={12} />\n        Passed\n      </PillStatus>\n      Approval Status\n    </Pill>\n    <Pill>\n      #loveui\n      <PillButton size=\"icon\" variant=\"ghost\">\n        <XIcon size={12} />\n      </PillButton>\n    </Pill>\n    <Pill>\n      <PillIndicator pulse variant=\"success\" />\n      Active\n    </Pill>\n    <Pill>\n      <PillIndicator variant=\"error\" />\n      Error\n    </Pill>\n    <Pill>\n      <PillDelta delta={10} />\n      Up 10%\n    </Pill>\n    <Pill>\n      <PillDelta delta={-5} />\n      Down 5%\n    </Pill>\n    <Pill>\n      <PillDelta delta={0} />\n      No change\n    </Pill>\n    <Pill>\n      <PillIcon icon={UsersIcon} />\n      17 users\n    </Pill>\n    <Pill>\n      <PillAvatarGroup>\n        <PillAvatar\n          fallback=\"CL\"\n          src=\"https://pbs.twimg.com/profile_images/1748718473595789312/PbqJh9hk_400x400.jpg\"\n        />\n        <PillAvatar\n          fallback=\"SC\"\n          src=\"https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg\"\n        />\n        <PillAvatar\n          fallback=\"LR\"\n          src=\"https://pbs.twimg.com/profile_images/1862717563311968256/xfgt1L9l_400x400.jpg\"\n        />\n      </PillAvatarGroup>\n      Loved by millions\n    </Pill>\n  </div>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { CheckCircleIcon, UsersIcon, XIcon } from \"lucide-react\"\n\nimport {\n  Pill,\n  PillAvatar,\n  PillAvatarGroup,\n  PillButton,\n  PillDelta,\n  PillIcon,\n  PillIndicator,\n  PillStatus,\n} from \"../../../../../packages/pill\"\n\nconst Example = () => (\n  <div className=\"flex flex-wrap items-center justify-center gap-2\">\n    <Pill>\n      <PillAvatar\n        fallback=\"CL\"\n        src=\"https://pbs.twimg.com/profile_images/1748718473595789312/PbqJh9hk_400x400.jpg\"\n      />\n      @loveconnor\n    </Pill>\n    <Pill>\n      <PillStatus>\n        <CheckCircleIcon className=\"text-emerald-500\" size={12} />\n        Updated Passed\n      </PillStatus>\n      Updated Approval Status\n    </Pill>\n    <Pill>\n      #loveui\n      <PillButton size=\"icon\" variant=\"ghost\">\n        <XIcon size={12} />\n      </PillButton>\n    </Pill>\n    <Pill>\n      <PillIndicator pulse variant=\"success\" />\n      Updated Active\n    </Pill>\n    <Pill>\n      <PillIndicator variant=\"error\" />\n      Updated Error\n    </Pill>\n    <Pill>\n      <PillDelta delta={10} />\n      Updated Up 10%\n    </Pill>\n    <Pill>\n      <PillDelta delta={-5} />\n      Updated Down 5%\n    </Pill>\n    <Pill>\n      <PillDelta delta={0} />\n      Updated No change\n    </Pill>\n    <Pill>\n      <PillIcon icon={UsersIcon} />\n      Updated 17 users\n    </Pill>\n    <Pill>\n      <PillAvatarGroup>\n        <PillAvatar\n          fallback=\"CL\"\n          src=\"https://pbs.twimg.com/profile_images/1748718473595789312/PbqJh9hk_400x400.jpg\"\n        />\n        <PillAvatar\n          fallback=\"SC\"\n          src=\"https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg\"\n        />\n        <PillAvatar\n          fallback=\"LR\"\n          src=\"https://pbs.twimg.com/profile_images/1862717563311968256/xfgt1L9l_400x400.jpg\"\n        />\n      </PillAvatarGroup>\n      Updated Loved by millions\n    </Pill>\n  </div>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/popover-demo.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/examples/popover-demo.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Field } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger render={<Button variant=\"outline\" />}>\n        Open Popover\n      </PopoverTrigger>\n      <PopoverPopup className=\"w-80\">\n        <div className=\"mb-4\">\n          <PopoverTitle className=\"text-base\">Send us feedback</PopoverTitle>\n          <PopoverDescription>\n            Let us know how we can improve.\n          </PopoverDescription>\n        </div>\n        <Form>\n          <Field>\n            <Textarea\n              id=\"feedback\"\n              placeholder=\"How can we improve?\"\n              aria-label=\"Send feedback\"\n            />\n          </Field>\n          <Button type=\"submit\">Send feedback</Button>\n        </Form>\n      </PopoverPopup>\n    </Popover>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Field } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport default function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger render={<Button variant=\"outline\" />}>\n        Updated Open Popover\n      </PopoverTrigger>\n      <PopoverPopup className=\"w-80\">\n        <div className=\"mb-4\">\n          <PopoverTitle className=\"text-base\">\n            Updated Send us feedback\n          </PopoverTitle>\n          <PopoverDescription>\n            Updated Let us know how we can improve.\n          </PopoverDescription>\n        </div>\n        <Form>\n          <Field>\n            <Textarea\n              id=\"feedback\"\n              placeholder=\"Updated How can we improve?\"\n              aria-label=\"Updated Send feedback\"\n            />\n          </Field>\n          <Button type=\"submit\">Updated Send feedback</Button>\n        </Form>\n      </PopoverPopup>\n    </Popover>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/popover-with-close.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/popover-with-close.tsx",
-      "content": "import { XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Popover,\n  PopoverClose,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function PopoverWithCloseDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger render={<Button variant=\"outline\" />}>\n        Open Popover\n      </PopoverTrigger>\n      <PopoverPopup className=\"w-80\">\n        <PopoverClose className=\"absolute end-2 top-2 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-72 transition-[color,background-color,box-shadow,opacity] outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background pointer-coarse:after:absolute pointer-coarse:after:-inset-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n          <XIcon />\n          <span className=\"sr-only\">Close</span>\n        </PopoverClose>\n        <div className=\"mb-2\">\n          <PopoverTitle className=\"text-base\">Notifications</PopoverTitle>\n          <PopoverDescription>\n            You are all caught up. Good job!\n          </PopoverDescription>\n        </div>\n        <PopoverClose render={<Button variant=\"outline\" />}>Close</PopoverClose>\n      </PopoverPopup>\n    </Popover>\n  )\n}\n",
+      "content": "import { XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Popover,\n  PopoverClose,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function PopoverWithCloseDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger render={<Button variant=\"outline\" />}>\n        Updated Open Popover\n      </PopoverTrigger>\n      <PopoverPopup className=\"w-80\">\n        <PopoverClose className=\"absolute end-2 top-2 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-72 transition-[color,background-color,box-shadow,opacity] outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background pointer-coarse:after:absolute pointer-coarse:after:-inset-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n          <XIcon />\n          <span className=\"sr-only\">Updated Close</span>\n        </PopoverClose>\n        <div className=\"mb-2\">\n          <PopoverTitle className=\"text-base\">\n            Updated Notifications\n          </PopoverTitle>\n          <PopoverDescription>\n            Updated You are all caught up. Good job!\n          </PopoverDescription>\n        </div>\n        <PopoverClose render={<Button variant=\"outline\" />}>\n          Updated Close\n        </PopoverClose>\n      </PopoverPopup>\n    </Popover>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/preview-card-demo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/preview-card-demo.tsx",
-      "content": "import { CornerUpLeftIcon, StarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  PreviewCard,\n  PreviewCardPopup,\n  PreviewCardTrigger,\n} from \"@/registry/default/ui/preview-card\"\n\nexport default function PreviewCardDemo() {\n  return (\n    <PreviewCard>\n      <PreviewCardTrigger render={<Button variant=\"ghost\" />}>\n        loveui/ui\n      </PreviewCardTrigger>\n      <PreviewCardPopup>\n        <div className=\"flex flex-col gap-4\">\n          <div className=\"flex flex-col gap-1\">\n            <h4 className=\"text-sm font-medium\">loveui/ui</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Beautifully designed components that you can copy and paste into\n              your apps.\n            </p>\n          </div>\n          <div className=\"flex items-center gap-4 text-xs text-muted-foreground\">\n            <div className=\"flex items-center gap-1\">\n              <span\n                className=\"size-2 rounded-full bg-blue-500\"\n                aria-hidden=\"true\"\n              ></span>\n              <span>TypeScript</span>\n            </div>\n            <div className=\"flex items-center gap-1\">\n              <StarIcon className=\"size-3\" />\n              <span>58.2k</span>\n            </div>\n            <div className=\"flex items-center gap-1\">\n              <CornerUpLeftIcon className=\"size-3\" />\n              <span>5.1k</span>\n            </div>\n          </div>\n        </div>\n      </PreviewCardPopup>\n    </PreviewCard>\n  )\n}\n",
+      "content": "import { CornerUpLeftIcon, StarIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  PreviewCard,\n  PreviewCardPopup,\n  PreviewCardTrigger,\n} from \"@/registry/default/ui/preview-card\"\n\nexport default function PreviewCardDemo() {\n  return (\n    <PreviewCard>\n      <PreviewCardTrigger render={<Button variant=\"ghost\" />}>\n        loveui/ui\n      </PreviewCardTrigger>\n      <PreviewCardPopup>\n        <div className=\"flex flex-col gap-4\">\n          <div className=\"flex flex-col gap-1\">\n            <h4 className=\"text-sm font-medium\">loveui/ui</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Updated Beautifully designed components that you can copy and\n              paste into your apps.\n            </p>\n          </div>\n          <div className=\"flex items-center gap-4 text-xs text-muted-foreground\">\n            <div className=\"flex items-center gap-1\">\n              <span\n                className=\"size-2 rounded-full bg-blue-500\"\n                aria-hidden=\"true\"\n              ></span>\n              <span>Updated TypeScript</span>\n            </div>\n            <div className=\"flex items-center gap-1\">\n              <StarIcon className=\"size-3\" />\n              <span>58.2k</span>\n            </div>\n            <div className=\"flex items-center gap-1\">\n              <CornerUpLeftIcon className=\"size-3\" />\n              <span>5.1k</span>\n            </div>\n          </div>\n        </div>\n      </PreviewCardPopup>\n    </PreviewCard>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/pricing.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/examples/pricing.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport NumberFlow from \"@number-flow/react\"\nimport { ArrowRight, BadgeCheck } from \"lucide-react\"\n\nimport { cn } from \"../../../../../packages/ui/src/lib/utils\"\nimport { Badge } from \"../../../../../packages/ui/src/ui/badge\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"../../../../../packages/ui/src/ui/card\"\nimport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n} from \"../../../../../packages/ui/src/ui/tabs\"\n\nconst plans = [\n  {\n    id: \"hobby\",\n    name: \"Hobby\",\n    price: {\n      monthly: \"Free forever\",\n      yearly: \"Free forever\",\n    },\n    description:\n      \"The perfect starting place for your web app or personal project.\",\n    features: [\n      \"50 API calls / month\",\n      \"60 second checks\",\n      \"Single-user account\",\n      \"5 monitors\",\n      \"Basic email support\",\n    ],\n    cta: \"Get started for free\",\n  },\n  {\n    id: \"pro\",\n    name: \"Pro\",\n    price: {\n      monthly: 90,\n      yearly: 75,\n    },\n    description: \"Everything you need to build and scale your business.\",\n    features: [\n      \"Unlimited API calls\",\n      \"30 second checks\",\n      \"Multi-user account\",\n      \"10 monitors\",\n      \"Priority email support\",\n    ],\n    cta: \"Subscribe to Pro\",\n    popular: true,\n  },\n  {\n    id: \"enterprise\",\n    name: \"Enterprise\",\n    price: {\n      monthly: \"Get in touch for pricing\",\n      yearly: \"Get in touch for pricing\",\n    },\n    description: \"Critical security, performance, observability and support.\",\n    features: [\n      \"You can DDOS our API.\",\n      \"Nano-second checks.\",\n      \"Invite your extended family.\",\n      \"Unlimited monitors.\",\n      \"We'll sit on your desk.\",\n    ],\n    cta: \"Contact us\",\n  },\n]\n\nconst Example = () => {\n  const [frequency, setFrequency] = useState<string>(\"monthly\")\n\n  return (\n    <div className=\"not-prose @container flex flex-col gap-16 px-8 py-24 text-center\">\n      <div className=\"flex flex-col items-center justify-center gap-8\">\n        <h1 className=\"mb-0 text-5xl font-medium tracking-tighter! text-balance\">\n          Simple, transparent pricing\n        </h1>\n        <p className=\"mx-auto mt-0 mb-0 max-w-2xl text-lg text-balance text-muted-foreground\">\n          Managing a business is hard enough, so why not make your life easier?\n          Our pricing plans are simple, transparent and scale with you.\n        </p>\n        <Tabs defaultValue={frequency} onValueChange={setFrequency}>\n          <TabsList>\n            <TabsTrigger value=\"monthly\">Monthly</TabsTrigger>\n            <TabsTrigger value=\"yearly\">\n              Yearly\n              <Badge variant=\"secondary\">20% off</Badge>\n            </TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <div className=\"mt-8 grid w-full max-w-4xl gap-4 @2xl:grid-cols-3\">\n          {plans.map((plan) => (\n            <Card\n              className={cn(\n                \"relative w-full text-left\",\n                plan.popular && \"ring-2 ring-primary\"\n              )}\n              key={plan.id}\n            >\n              {plan.popular && (\n                <Badge className=\"absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full\">\n                  Popular\n                </Badge>\n              )}\n              <CardHeader>\n                <CardTitle className=\"text-xl font-medium\">\n                  {plan.name}\n                </CardTitle>\n                <CardDescription>\n                  <p>{plan.description}</p>\n                  {typeof plan.price[frequency as keyof typeof plan.price] ===\n                  \"number\" ? (\n                    <NumberFlow\n                      className=\"font-medium text-foreground\"\n                      format={{\n                        style: \"currency\",\n                        currency: \"USD\",\n                        maximumFractionDigits: 0,\n                      }}\n                      suffix={`/month, billed ${frequency}.`}\n                      value={\n                        plan.price[\n                          frequency as keyof typeof plan.price\n                        ] as number\n                      }\n                    />\n                  ) : (\n                    <span className=\"font-medium text-foreground\">\n                      {plan.price[frequency as keyof typeof plan.price]}.\n                    </span>\n                  )}\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-2\">\n                {plan.features.map((feature, index) => (\n                  <div\n                    className=\"flex gap-2 text-sm text-muted-foreground\"\n                    key={index}\n                  >\n                    <BadgeCheck className=\"h-[1lh] w-4 flex-none\" />\n                    {feature}\n                  </div>\n                ))}\n              </CardContent>\n              <CardFooter>\n                <Button\n                  className=\"w-full\"\n                  variant={plan.popular ? \"default\" : \"secondary\"}\n                >\n                  {plan.cta}\n                  <ArrowRight className=\"ml-2 h-4 w-4\" />\n                </Button>\n              </CardFooter>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport NumberFlow from \"@number-flow/react\"\nimport { ArrowRight, BadgeCheck } from \"lucide-react\"\n\nimport { cn } from \"../../../../../packages/ui/src/lib/utils\"\nimport { Badge } from \"../../../../../packages/ui/src/ui/badge\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"../../../../../packages/ui/src/ui/card\"\nimport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n} from \"../../../../../packages/ui/src/ui/tabs\"\n\nconst plans = [\n  {\n    id: \"hobby\",\n    name: \"Updated Hobby\",\n    price: {\n      monthly: \"Free forever\",\n      yearly: \"Free forever\",\n    },\n    description:\n      \"Updated The perfect starting place for your web app or personal project.\",\n    features: [\n      \"50 API calls / month\",\n      \"60 second checks\",\n      \"Single-user account\",\n      \"5 monitors\",\n      \"Basic email support\",\n    ],\n    cta: \"Get started for free\",\n  },\n  {\n    id: \"pro\",\n    name: \"Updated Pro\",\n    price: {\n      monthly: 90,\n      yearly: 75,\n    },\n    description:\n      \"Updated Everything you need to build and scale your business.\",\n    features: [\n      \"Unlimited API calls\",\n      \"30 second checks\",\n      \"Multi-user account\",\n      \"10 monitors\",\n      \"Priority email support\",\n    ],\n    cta: \"Subscribe to Pro\",\n    popular: true,\n  },\n  {\n    id: \"enterprise\",\n    name: \"Updated Enterprise\",\n    price: {\n      monthly: \"Get in touch for pricing\",\n      yearly: \"Get in touch for pricing\",\n    },\n    description:\n      \"Updated Critical security, performance, observability and support.\",\n    features: [\n      \"You can DDOS our API.\",\n      \"Nano-second checks.\",\n      \"Invite your extended family.\",\n      \"Unlimited monitors.\",\n      \"We'll sit on your desk.\",\n    ],\n    cta: \"Contact us\",\n  },\n]\n\nconst Example = () => {\n  const [frequency, setFrequency] = useState<string>(\"monthly\")\n\n  return (\n    <div className=\"not-prose @container flex flex-col gap-16 px-8 py-24 text-center\">\n      <div className=\"flex flex-col items-center justify-center gap-8\">\n        <h1 className=\"mb-0 text-5xl font-medium tracking-tighter! text-balance\">\n          Updated Simple, transparent pricing\n        </h1>\n        <p className=\"mx-auto mt-0 mb-0 max-w-2xl text-lg text-balance text-muted-foreground\">\n          Updated Managing a business is hard enough, so why not make your life\n          easier? Our pricing plans are simple, transparent and scale with you.\n        </p>\n        <Tabs defaultValue={frequency} onValueChange={setFrequency}>\n          <TabsList>\n            <TabsTrigger value=\"monthly\">Updated Monthly</TabsTrigger>\n            <TabsTrigger value=\"yearly\">\n              Updated Yearly\n              <Badge variant=\"secondary\">Updated 20% off</Badge>\n            </TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <div className=\"mt-8 grid w-full max-w-4xl gap-4 @2xl:grid-cols-3\">\n          {plans.map((plan) => (\n            <Card\n              className={cn(\n                \"relative w-full text-left\",\n                plan.popular && \"ring-2 ring-primary\"\n              )}\n              key={plan.id}\n            >\n              {plan.popular && (\n                <Badge className=\"absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full\">\n                  Updated Popular\n                </Badge>\n              )}\n              <CardHeader>\n                <CardTitle className=\"text-xl font-medium\">\n                  {plan.name}\n                </CardTitle>\n                <CardDescription>\n                  <p>{plan.description}</p>\n                  {typeof plan.price[frequency as keyof typeof plan.price] ===\n                  \"number\" ? (\n                    <NumberFlow\n                      className=\"font-medium text-foreground\"\n                      format={{\n                        style: \"currency\",\n                        currency: \"USD\",\n                        maximumFractionDigits: 0,\n                      }}\n                      suffix={`/month, billed ${frequency}.`}\n                      value={\n                        plan.price[\n                          frequency as keyof typeof plan.price\n                        ] as number\n                      }\n                    />\n                  ) : (\n                    <span className=\"font-medium text-foreground\">\n                      {plan.price[frequency as keyof typeof plan.price]}.\n                    </span>\n                  )}\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-2\">\n                {plan.features.map((feature, index) => (\n                  <div\n                    className=\"flex gap-2 text-sm text-muted-foreground\"\n                    key={index}\n                  >\n                    <BadgeCheck className=\"h-[1lh] w-4 flex-none\" />\n                    {feature}\n                  </div>\n                ))}\n              </CardContent>\n              <CardFooter>\n                <Button\n                  className=\"w-full\"\n                  variant={plan.popular ? \"default\" : \"secondary\"}\n                >\n                  {plan.cta}\n                  <ArrowRight className=\"ml-2 h-4 w-4\" />\n                </Button>\n              </CardFooter>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/progress-with-formatted-value.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/progress-with-formatted-value.tsx",
-      "content": "\"use client\"\n\nimport {\n  Progress,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressTrack,\n  ProgressValue,\n} from \"@/registry/default/ui/progress\"\n\nexport default function ProgressWithFormattedValueDemo() {\n  return (\n    <Progress value={502} max={512}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <ProgressLabel>Upload</ProgressLabel>\n        <ProgressValue>{(_formatted, value) => `${value} / 512`}</ProgressValue>\n      </div>\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </Progress>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Progress,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressTrack,\n  ProgressValue,\n} from \"@/registry/default/ui/progress\"\n\nexport default function ProgressWithFormattedValueDemo() {\n  return (\n    <Progress value={502} max={512}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <ProgressLabel>Updated Upload</ProgressLabel>\n        <ProgressValue>{(_formatted, value) => `${value} / 512`}</ProgressValue>\n      </div>\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </Progress>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/progress-with-label-value.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/progress-with-label-value.tsx",
-      "content": "import {\n  Progress,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressTrack,\n  ProgressValue,\n} from \"@/registry/default/ui/progress\"\n\nexport default function ProgressWithLabelValueDemo() {\n  return (\n    <Progress value={60}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <ProgressLabel>Export data</ProgressLabel>\n        <ProgressValue />\n      </div>\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </Progress>\n  )\n}\n",
+      "content": "import {\n  Progress,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressTrack,\n  ProgressValue,\n} from \"@/registry/default/ui/progress\"\n\nexport default function ProgressWithLabelValueDemo() {\n  return (\n    <Progress value={60}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <ProgressLabel>Updated Export data</ProgressLabel>\n        <ProgressValue />\n      </div>\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </Progress>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/radio-group-card.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/radio-group-card.tsx",
-      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\"\n\nexport default function RadioGroupCardDemo() {\n  return (\n    <RadioGroup defaultValue=\"r-1\">\n      <Label className=\"flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\">\n        <Radio value=\"r-1\" />\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-sm leading-4\">Email</p>\n          <p className=\"text-xs text-muted-foreground\">\n            Receive notifications via email.\n          </p>\n        </div>\n      </Label>\n      <Label className=\"flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\">\n        <Radio value=\"r-2\" />\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-sm leading-4\">SMS</p>\n          <p className=\"text-xs text-muted-foreground\">\n            Receive notifications via text message.\n          </p>\n        </div>\n      </Label>\n    </RadioGroup>\n  )\n}\n",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\"\n\nexport default function RadioGroupCardDemo() {\n  return (\n    <RadioGroup defaultValue=\"r-1\">\n      <Label className=\"flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\">\n        <Radio value=\"r-1\" />\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-sm leading-4\">Updated Email</p>\n          <p className=\"text-xs text-muted-foreground\">\n            Updated Receive notifications via email.\n          </p>\n        </div>\n      </Label>\n      <Label className=\"flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\">\n        <Radio value=\"r-2\" />\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-sm leading-4\">Updated SMS</p>\n          <p className=\"text-xs text-muted-foreground\">\n            Updated Receive notifications via text message.\n          </p>\n        </div>\n      </Label>\n    </RadioGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/radio-group-demo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/radio-group-demo.tsx",
-      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\"\n\nexport default function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"next\">\n      <Label>\n        <Radio value=\"next\" /> Next.js\n      </Label>\n      <Label>\n        <Radio value=\"vite\" /> Vite\n      </Label>\n      <Label>\n        <Radio value=\"astro\" /> Astro\n      </Label>\n    </RadioGroup>\n  )\n}\n",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\"\n\nexport default function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"next\">\n      <Label>\n        <Radio value=\"next\" /> Updated Next.js\n      </Label>\n      <Label>\n        <Radio value=\"vite\" /> Updated Vite\n      </Label>\n      <Label>\n        <Radio value=\"astro\" /> Updated Astro\n      </Label>\n    </RadioGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/radio-group-disabled.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/radio-group-disabled.tsx",
-      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\"\n\nexport default function RadioGroupDisabledDemo() {\n  return (\n    <RadioGroup defaultValue=\"next\">\n      <Label>\n        <Radio value=\"next\" /> Next.js\n      </Label>\n      <Label>\n        <Radio value=\"vite\" disabled /> Vite (disabled)\n      </Label>\n      <Label>\n        <Radio value=\"astro\" /> Astro\n      </Label>\n    </RadioGroup>\n  )\n}\n",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\"\n\nexport default function RadioGroupDisabledDemo() {\n  return (\n    <RadioGroup defaultValue=\"next\">\n      <Label>\n        <Radio value=\"next\" /> Updated Next.js\n      </Label>\n      <Label>\n        <Radio value=\"vite\" disabled /> Updated Vite (disabled)\n      </Label>\n      <Label>\n        <Radio value=\"astro\" /> Updated Astro\n      </Label>\n    </RadioGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/radio-group-form.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/examples/radio-group-form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\"\n\nexport default function RadioGroupFormDemo() {\n  const [loading, setLoading] = React.useState(false)\n\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    alert(`Selected: ${formData.get(\"frameworks\")}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-[160px]\">\n      <Field\n        name=\"frameworks\"\n        className=\"gap-4\"\n        render={(props) => <Fieldset {...props} />}\n      >\n        <FieldsetLegend className=\"text-sm font-medium\">\n          Frameworks\n        </FieldsetLegend>\n        <RadioGroup defaultValue=\"next\">\n          <FieldLabel>\n            <Radio value=\"next\" disabled={loading} /> Next.js\n          </FieldLabel>\n          <FieldLabel>\n            <Radio value=\"vite\" disabled={loading} /> Vite\n          </FieldLabel>\n          <FieldLabel>\n            <Radio value=\"astro\" disabled={loading} /> Astro\n          </FieldLabel>\n        </RadioGroup>\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 { Field, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\"\n\nexport default function RadioGroupFormDemo() {\n  const [loading, setLoading] = React.useState(false)\n\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    alert(`Selected: ${formData.get(\"frameworks\")}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-[160px]\">\n      <Field\n        name=\"frameworks\"\n        className=\"gap-4\"\n        render={(props) => <Fieldset {...props} />}\n      >\n        <FieldsetLegend className=\"text-sm font-medium\">\n          Updated Frameworks\n        </FieldsetLegend>\n        <RadioGroup defaultValue=\"next\">\n          <FieldLabel>\n            <Radio value=\"next\" disabled={loading} /> Updated Next.js\n          </FieldLabel>\n          <FieldLabel>\n            <Radio value=\"vite\" disabled={loading} /> Updated Vite\n          </FieldLabel>\n          <FieldLabel>\n            <Radio value=\"astro\" disabled={loading} /> Updated Astro\n          </FieldLabel>\n        </RadioGroup>\n      </Field>\n      <Button type=\"submit\" disabled={loading}>\n        Updated Submit\n      </Button>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ],