love-ui 1.2.13 → 1.2.15

package/public/r/marquee-no-fade.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "marquee-no-fade",
-  "description": "Marquee without fade edges.",
-  "registryDependencies": [
-    "@loveui/marquee"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/marquee-no-fade.tsx",
-      "content": "\"use client\"\n\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeItem,\n} from \"../../../../../packages/marquee\"\n\nconst Example = () => (\n  <Marquee>\n    <MarqueeContent>\n      {new Array(10).fill(null).map((_, index) => (\n        <MarqueeItem className=\"h-16 w-16\" key={index}>\n          <img\n            alt={`Placeholder ${index}`}\n            className=\"overflow-hidden rounded-full\"\n            src={`https://placehold.co/64x64?random=${index}`}\n          />\n        </MarqueeItem>\n      ))}\n    </MarqueeContent>\n  </Marquee>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "marketing",
-    "marquee"
-  ],
-  "type": "registry:example"
-}

package/public/r/marquee-raw.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "marquee-raw",
-  "description": "Marquee rendering raw children.",
-  "registryDependencies": [
-    "@loveui/marquee"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/marquee-raw.tsx",
-      "content": "\"use client\"\n\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeFade,\n  MarqueeItem,\n} from \"../../../../../packages/marquee\"\n\nconst Example = () => (\n  <div className=\"flex size-full items-center justify-center bg-background\">\n    <Marquee>\n      <MarqueeFade side=\"left\" />\n      <MarqueeFade side=\"right\" />\n      <MarqueeContent autoFill={false} loop={1} pauseOnHover={false}>\n        {new Array(10).fill(null).map((_, index) => (\n          <MarqueeItem className=\"h-16 w-16\" key={index}>\n            <img\n              alt={`Placeholder ${index}`}\n              className=\"overflow-hidden rounded-full\"\n              src={`https://placehold.co/64x64?random=${index}`}\n            />\n          </MarqueeItem>\n        ))}\n      </MarqueeContent>\n    </Marquee>\n  </div>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "marketing",
-    "marquee",
-    "customization"
-  ],
-  "type": "registry:example"
-}

package/public/r/marquee-spacing.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "marquee-spacing",
-  "description": "Marquee with adjustable spacing between items.",
-  "registryDependencies": [
-    "@loveui/marquee"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/marquee-spacing.tsx",
-      "content": "\"use client\"\n\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeFade,\n  MarqueeItem,\n} from \"../../../../../packages/marquee\"\n\nconst Example = () => (\n  <div className=\"flex size-full items-center justify-center bg-background\">\n    <Marquee>\n      <MarqueeFade side=\"left\" />\n      <MarqueeFade side=\"right\" />\n      <MarqueeContent>\n        {new Array(10).fill(null).map((_, index) => (\n          <MarqueeItem className=\"-mx-2 h-16 w-16\" key={index}>\n            <img\n              alt={`Placeholder ${index}`}\n              className=\"overflow-hidden rounded-full ring-2 ring-background\"\n              src={`https://placehold.co/64x64?random=${index}`}\n            />\n          </MarqueeItem>\n        ))}\n      </MarqueeContent>\n    </Marquee>\n  </div>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "marketing",
-    "marquee",
-    "spacing"
-  ],
-  "type": "registry:example"
-}

package/public/r/marquee.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "marquee",
-  "description": "Continuous marquee loop for showcasing logos.",
-  "registryDependencies": [
-    "@loveui/marquee"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/marquee.tsx",
-      "content": "\"use client\"\n\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeFade,\n  MarqueeItem,\n} from \"../../../../../packages/marquee\"\n\nconst Example = () => (\n  <div className=\"flex size-full items-center justify-center bg-background\">\n    <Marquee>\n      <MarqueeFade side=\"left\" />\n      <MarqueeFade side=\"right\" />\n      <MarqueeContent>\n        {new Array(10).fill(null).map((_, index) => (\n          <MarqueeItem className=\"h-32 w-32\" key={index}>\n            <img\n              alt={`Placeholder ${index}`}\n              className=\"overflow-hidden rounded-full\"\n              src={`https://placehold.co/128x128?random=${index}`}\n            />\n          </MarqueeItem>\n        ))}\n      </MarqueeContent>\n    </Marquee>\n  </div>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "marketing",
-    "marquee"
-  ],
-  "type": "registry:example"
-}

package/public/r/menu-checkbox.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "menu-checkbox",
-  "description": "Menu with checkbox items",
-  "registryDependencies": [
-    "@loveui/menu",
-    "@loveui/button"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/menu-checkbox.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Menu,\n  MenuCheckboxItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\"\n\nexport default function MenuCheckboxDemo() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>\n        Updated Open menu\n      </MenuTrigger>\n      <MenuPopup>\n        <MenuCheckboxItem defaultChecked>Updated Auto save</MenuCheckboxItem>\n        <MenuCheckboxItem>Updated Notifications</MenuCheckboxItem>\n      </MenuPopup>\n    </Menu>\n  )\n}\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "menu",
-    "checkbox"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "menu-close-on-click",
-  "description": "Close menu when items are clicked",
-  "registryDependencies": [
-    "@loveui/menu",
-    "@loveui/button"
-  ],
-  "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\" />}>\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"
-    }
-  ],
-  "categories": [
-    "menu"
-  ],
-  "type": "registry:example"
-}

package/public/r/menu-demo.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "menu-demo",
-  "description": "Basic menu",
-  "registryDependencies": [
-    "@loveui/menu",
-    "@loveui/button"
-  ],
-  "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\" />}>\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"
-    }
-  ],
-  "categories": [
-    "menu"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "menu-group-labels",
-  "description": "Menu items grouped with labels",
-  "registryDependencies": [
-    "@loveui/menu",
-    "@loveui/button"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/menu-group-labels.tsx",
-      "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"
-    }
-  ],
-  "categories": [
-    "menu",
-    "label"
-  ],
-  "type": "registry:example"
-}

package/public/r/menu-hover.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "menu-hover",
-  "description": "Open the menu on hover",
-  "registryDependencies": [
-    "@loveui/menu",
-    "@loveui/button"
-  ],
-  "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\" />}>\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"
-    }
-  ],
-  "categories": [
-    "menu"
-  ],
-  "type": "registry:example"
-}

package/public/r/menu-link.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "menu-link",
-  "description": "Menu items as links",
-  "registryDependencies": [
-    "@loveui/menu",
-    "@loveui/button"
-  ],
-  "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\" />}>\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"
-    }
-  ],
-  "categories": [
-    "menu",
-    "link"
-  ],
-  "type": "registry:example"
-}

package/public/r/menu-nested.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "menu-nested",
-  "description": "Menu with submenu",
-  "registryDependencies": [
-    "@loveui/menu",
-    "@loveui/button"
-  ],
-  "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\" />}>\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"
-    }
-  ],
-  "categories": [
-    "menu"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "menu-radio-group",
-  "description": "Menu with radio options",
-  "registryDependencies": [
-    "@loveui/menu",
-    "@loveui/button"
-  ],
-  "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\" />}>\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"
-    }
-  ],
-  "categories": [
-    "menu",
-    "radio"
-  ],
-  "type": "registry:example"
-}

package/public/r/menu.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "menu",
-  "dependencies": [
-    "@base-ui-components/react"
-  ],
-  "files": [
-    {
-      "path": "registry/default/ui/menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui-components/react/menu\"\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Menu = MenuPrimitive.Root\n\nconst MenuPortal = MenuPrimitive.Portal\n\nfunction MenuTrigger(props: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"menu-trigger\" {...props} />\n}\n\nfunction MenuPopup({\n  className,\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"]\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"]\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"]\n}) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        data-slot=\"menu-positioner\"\n        className=\"z-50\"\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n      >\n        <span className=\"relative flex origin-(--transform-origin) rounded-lg border bg-popover bg-clip-padding shadow-lg transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-starting-style:scale-98 has-data-starting-style:opacity-0 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\">\n          <MenuPrimitive.Popup\n            data-slot=\"menu-popup\"\n            className={cn(\n              \"max-h-(--available-height) min-w-32 overflow-y-auto p-1\",\n              className\n            )}\n            {...props}\n          />\n        </span>\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction MenuGroup(props: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />\n}\n\nfunction MenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-sm px-2 py-1 text-base outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-64 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground sm:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menu-checkbox-item\"\n      className={cn(\n        \"grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-disabled:pointer-events-none data-disabled:opacity-64 data-highlighted:bg-accent data-highlighted:text-accent-foreground sm:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <MenuPrimitive.CheckboxItemIndicator className=\"col-start-1\">\n        <CheckIcon />\n      </MenuPrimitive.CheckboxItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props) {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />\n}\n\nfunction MenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menu-radio-item\"\n      className={cn(\n        \"grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-disabled:pointer-events-none data-disabled:opacity-64 data-highlighted:bg-accent data-highlighted:text-accent-foreground sm:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <MenuPrimitive.RadioItemIndicator className=\"col-start-1\">\n        <CheckIcon />\n      </MenuPrimitive.RadioItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenuGroupLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:ps-9 sm:data-inset:ps-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"menu-separator\"\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menu-shortcut\"\n      className={cn(\n        \"ms-auto text-xs tracking-widest text-muted-foreground/64\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuSub(props: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"menu-sub\" {...props} />\n}\n\nfunction MenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-disabled:opacity-64 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:ps-8 sm:text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction MenuSubPopup({\n  className,\n  sideOffset = 0,\n  alignOffset = -4,\n  align = \"start\",\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"]\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"]\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"]\n}) {\n  return (\n    <MenuPopup\n      className={className}\n      sideOffset={sideOffset}\n      align={align}\n      alignOffset={alignOffset}\n      data-slot=\"menu-sub-content\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menu,\n  Menu as DropdownMenu,\n  MenuPortal,\n  MenuPortal as DropdownMenuPortal,\n  MenuTrigger,\n  MenuTrigger as DropdownMenuTrigger,\n  MenuPopup,\n  MenuPopup as DropdownMenuContent,\n  MenuGroup,\n  MenuGroup as DropdownMenuGroup,\n  MenuItem,\n  MenuItem as DropdownMenuItem,\n  MenuCheckboxItem,\n  MenuCheckboxItem as DropdownMenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioGroup as DropdownMenuRadioGroup,\n  MenuRadioItem,\n  MenuRadioItem as DropdownMenuRadioItem,\n  MenuGroupLabel,\n  MenuGroupLabel as DropdownMenuLabel,\n  MenuSeparator,\n  MenuSeparator as DropdownMenuSeparator,\n  MenuShortcut,\n  MenuShortcut as DropdownMenuShortcut,\n  MenuSub,\n  MenuSub as DropdownMenuSub,\n  MenuSubTrigger,\n  MenuSubTrigger as DropdownMenuSubTrigger,\n  MenuSubPopup,\n  MenuSubPopup as DropdownMenuSubContent,\n}\n",
-      "type": "registry:ui"
-    }
-  ],
-  "cssVars": {
-    "light": {
-      "destructive-foreground": "oklch(0.505 0.213 27.518)"
-    },
-    "dark": {
-      "destructive-foreground": "oklch(0.704 0.191 22.216)"
-    }
-  },
-  "type": "registry:ui"
-}

package/public/r/meter-demo.json

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "meter-demo",
-  "description": "Basic meter",
-  "registryDependencies": [
-    "@loveui/meter"
-  ],
-  "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>Updated Storage usage</MeterLabel>\n        <MeterValue />\n      </div>\n      <MeterTrack>\n        <MeterIndicator />\n      </MeterTrack>\n    </Meter>\n  )\n}\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "meter"
-  ],
-  "type": "registry:example"
-}

package/public/r/meter-simple.json

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "meter-simple",
-  "description": "Meter without label and value",
-  "registryDependencies": [
-    "@loveui/meter"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/meter-simple.tsx",
-      "content": "import { Meter } from \"@/registry/default/ui/meter\"\n\nexport default function MeterSimpleDemo() {\n  return <Meter value={50} />\n}\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "meter"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "meter-with-formatted-value",
-  "description": "Meter with a custom formatted value",
-  "registryDependencies": [
-    "@loveui/meter"
-  ],
-  "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>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"
-    }
-  ],
-  "categories": [
-    "meter"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "meter-with-range",
-  "description": "Meter with min and max values",
-  "registryDependencies": [
-    "@loveui/meter"
-  ],
-  "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>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"
-    }
-  ],
-  "categories": [
-    "meter"
-  ],
-  "type": "registry:example"
-}

package/public/r/meter.json

@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "meter",
-  "dependencies": [
-    "@base-ui-components/react"
-  ],
-  "files": [
-    {
-      "path": "registry/default/ui/meter.tsx",
-      "content": "\"use client\"\n\nimport { Meter as MeterPrimitive } from \"@base-ui-components/react/meter\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Meter({ className, children, ...props }: MeterPrimitive.Root.Props) {\n  return (\n    <MeterPrimitive.Root\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      {...props}\n    >\n      {children ? (\n        children\n      ) : (\n        <MeterTrack>\n          <MeterIndicator />\n        </MeterTrack>\n      )}\n    </MeterPrimitive.Root>\n  )\n}\n\nfunction MeterLabel({ className, ...props }: MeterPrimitive.Label.Props) {\n  return (\n    <MeterPrimitive.Label\n      data-slot=\"meter-label\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MeterTrack({ className, ...props }: MeterPrimitive.Track.Props) {\n  return (\n    <MeterPrimitive.Track\n      data-slot=\"meter-track\"\n      className={cn(\"block h-2 w-full overflow-hidden bg-input\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MeterIndicator({\n  className,\n  ...props\n}: MeterPrimitive.Indicator.Props) {\n  return (\n    <MeterPrimitive.Indicator\n      data-slot=\"meter-indicator\"\n      className={cn(\"bg-primary transition-all duration-500\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MeterValue({ className, ...props }: MeterPrimitive.Value.Props) {\n  return (\n    <MeterPrimitive.Value\n      data-slot=\"meter-value\"\n      className={cn(\"text-sm tabular-nums\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Meter, MeterLabel, MeterTrack, MeterIndicator, MeterValue }\n",
-      "type": "registry:ui"
-    }
-  ],
-  "type": "registry:ui"
-}

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

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "mini-calendar-controlled",
-  "description": "Controlled mini calendar showing the selected date.",
-  "registryDependencies": [
-    "@loveui/mini-calendar"
-  ],
-  "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          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"
-    }
-  ],
-  "categories": [
-    "mini-calendar",
-    "project management",
-    "controlled"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "mini-calendar-custom",
-  "description": "Mini calendar with custom day rendering.",
-  "registryDependencies": [
-    "@loveui/mini-calendar"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/mini-calendar-custom.tsx",
-      "content": "\"use client\"\n\nimport { ArrowLeftIcon, ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nimport {\n  MiniCalendar,\n  MiniCalendarDay,\n  MiniCalendarDays,\n  MiniCalendarNavigation,\n} from \"../../../../../packages/mini-calendar\"\n\nconst Example = () => (\n  <MiniCalendar className=\"bg-card p-4 shadow-lg\">\n    <div className=\"flex items-center gap-4\">\n      <MiniCalendarNavigation asChild direction=\"prev\">\n        <Button size=\"icon\" variant=\"outline\">\n          <ArrowLeftIcon className=\"size-4\" />\n        </Button>\n      </MiniCalendarNavigation>\n\n      <MiniCalendarDays className=\"gap-2\">\n        {(date) => <MiniCalendarDay date={date} key={date.toISOString()} />}\n      </MiniCalendarDays>\n\n      <MiniCalendarNavigation asChild direction=\"next\">\n        <Button size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon className=\"size-4\" />\n        </Button>\n      </MiniCalendarNavigation>\n    </div>\n  </MiniCalendar>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "mini-calendar",
-    "project management",
-    "customization"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "mini-calendar-days",
-  "description": "Mini calendar rendering weekday headings and focus states.",
-  "registryDependencies": [
-    "@loveui/mini-calendar"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/mini-calendar-days.tsx",
-      "content": "\"use client\"\n\nimport {\n  MiniCalendar,\n  MiniCalendarDay,\n  MiniCalendarDays,\n  MiniCalendarNavigation,\n} from \"../../../../../packages/mini-calendar\"\n\nconst Example = () => (\n  <MiniCalendar days={7}>\n    <MiniCalendarNavigation direction=\"prev\" />\n    <MiniCalendarDays>\n      {(date) => <MiniCalendarDay date={date} key={date.toISOString()} />}\n    </MiniCalendarDays>\n    <MiniCalendarNavigation direction=\"next\" />\n  </MiniCalendar>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "mini-calendar",
-    "project management"
-  ],
-  "type": "registry:example"
-}

package/public/r/mini-calendar.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "mini-calendar",
-  "description": "Compact calendar navigation for quick date selection.",
-  "registryDependencies": [
-    "@loveui/mini-calendar"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/mini-calendar.tsx",
-      "content": "\"use client\"\n\nimport {\n  MiniCalendar,\n  MiniCalendarDay,\n  MiniCalendarDays,\n  MiniCalendarNavigation,\n} from \"../../../../../packages/mini-calendar\"\n\nconst Example = () => (\n  <MiniCalendar>\n    <MiniCalendarNavigation direction=\"prev\" />\n    <MiniCalendarDays>\n      {(date) => <MiniCalendarDay date={date} key={date.toISOString()} />}\n    </MiniCalendarDays>\n    <MiniCalendarNavigation direction=\"next\" />\n  </MiniCalendar>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "mini-calendar",
-    "project management"
-  ],
-  "type": "registry:example"
-}

package/public/r/multiselect.json

@@ -1,15 +0,0 @@
-{
-  "$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

@@ -1,12 +0,0 @@
-{
-  "$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"
-    }
-  ]
-}