love-ui 1.2.12 → 1.2.14

package/public/r/toggle-lg.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/toggle-lg.tsx",
-      "content": "import { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleLg() {\n  return (\n    <Toggle variant=\"outline\" size=\"lg\">\n      Large\n    </Toggle>\n  )\n}\n",
+      "content": "import { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleLg() {\n  return (\n    <Toggle variant=\"outline\" size=\"lg\">\n      Updated Large\n    </Toggle>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/toggle-outline.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/toggle-outline.tsx",
-      "content": "import { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleOutline() {\n  return <Toggle variant=\"outline\">Outline Toggle</Toggle>\n}\n",
+      "content": "import { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleOutline() {\n  return <Toggle variant=\"outline\">Updated Outline Toggle</Toggle>\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/toggle-sm.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/toggle-sm.tsx",
-      "content": "import { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleSm() {\n  return (\n    <Toggle variant=\"outline\" size=\"sm\">\n      Small\n    </Toggle>\n  )\n}\n",
+      "content": "import { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleSm() {\n  return (\n    <Toggle variant=\"outline\" size=\"sm\">\n      Updated Small\n    </Toggle>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/toggle-with-icon.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/toggle-with-icon.tsx",
-      "content": "import { BoldIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleWithIcon() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n      <BoldIcon />\n    </Toggle>\n  )\n}\n",
+      "content": "import { BoldIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/default/ui/toggle\"\n\nexport default function ToggleWithIcon() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Updated Toggle bold\">\n      <BoldIcon />\n    </Toggle>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/toolbar-demo.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/examples/toolbar-demo.tsx",
-      "content": "import {\n  AlignCenterIcon,\n  AlignLeftIcon,\n  AlignRightIcon,\n  DollarSignIcon,\n  PercentIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\"\nimport {\n  Toolbar,\n  ToolbarButton,\n  ToolbarGroup,\n  ToolbarSeparator,\n} from \"@/registry/default/ui/toolbar\"\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nconst items = [\n  { label: \"Helvetica\", value: \"helvetica\" },\n  { label: \"Arial\", value: \"arial\" },\n  { label: \"Times New Roman\", value: \"times-new-roman\" },\n]\n\nexport default function ToolbarDemo() {\n  return (\n    <TooltipProvider>\n      <Toolbar>\n        <ToggleGroup className=\"border-none p-0\" defaultValue={[\"left\"]}>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  render={<Toggle value=\"left\" />}\n                  aria-label=\"Align left\"\n                >\n                  <AlignLeftIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Align left</TooltipPopup>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  render={<Toggle value=\"center\" aria-label=\"Toggle center\" />}\n                  aria-label=\"Align center\"\n                >\n                  <AlignCenterIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Align center</TooltipPopup>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  render={<Toggle value=\"right\" aria-label=\"Toggle right\" />}\n                  aria-label=\"Align right\"\n                >\n                  <AlignRightIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Align right</TooltipPopup>\n          </Tooltip>\n        </ToggleGroup>\n        <ToolbarSeparator />\n        <ToolbarGroup>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  render={<Button variant=\"ghost\" size=\"icon\" />}\n                  aria-label=\"Format as currency\"\n                >\n                  <DollarSignIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Format as currency</TooltipPopup>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  render={<Button variant=\"ghost\" size=\"icon\" />}\n                  aria-label=\"Format as percent\"\n                >\n                  <PercentIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Format as percent</TooltipPopup>\n          </Tooltip>\n        </ToolbarGroup>\n        <ToolbarSeparator />\n        <ToolbarGroup>\n          <Select items={items} defaultValue=\"helvetica\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <ToolbarButton\n                    nativeButton={false}\n                    render={\n                      <SelectTrigger>\n                        <SelectValue />\n                      </SelectTrigger>\n                    }\n                  />\n                }\n              />\n              <TooltipPopup sideOffset={8}>\n                Select a different font\n              </TooltipPopup>\n            </Tooltip>\n            <SelectPopup>\n              {items.map(({ label, value }) => (\n                <SelectItem key={value} value={value}>\n                  {label}\n                </SelectItem>\n              ))}\n            </SelectPopup>\n          </Select>\n        </ToolbarGroup>\n        <ToolbarSeparator />\n        <ToolbarGroup>\n          <ToolbarButton render={<Button />}>Save</ToolbarButton>\n        </ToolbarGroup>\n      </Toolbar>\n    </TooltipProvider>\n  )\n}\n",
+      "content": "import {\n  AlignCenterIcon,\n  AlignLeftIcon,\n  AlignRightIcon,\n  DollarSignIcon,\n  PercentIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\"\nimport {\n  Toolbar,\n  ToolbarButton,\n  ToolbarGroup,\n  ToolbarSeparator,\n} from \"@/registry/default/ui/toolbar\"\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nconst items = [\n  { label: \"Updated Helvetica\", value: \"helvetica\" },\n  { label: \"Updated Arial\", value: \"arial\" },\n  { label: \"Updated Times New Roman\", value: \"times-new-roman\" },\n]\n\nexport default function ToolbarDemo() {\n  return (\n    <TooltipProvider>\n      <Toolbar>\n        <ToggleGroup className=\"border-none p-0\" defaultValue={[\"left\"]}>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  render={<Toggle value=\"left\" />}\n                  aria-label=\"Updated Align left\"\n                >\n                  <AlignLeftIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Updated Align left</TooltipPopup>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  render={\n                    <Toggle value=\"center\" aria-label=\"Updated Toggle center\" />\n                  }\n                  aria-label=\"Updated Align center\"\n                >\n                  <AlignCenterIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Updated Align center</TooltipPopup>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  render={\n                    <Toggle value=\"right\" aria-label=\"Updated Toggle right\" />\n                  }\n                  aria-label=\"Updated Align right\"\n                >\n                  <AlignRightIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Updated Align right</TooltipPopup>\n          </Tooltip>\n        </ToggleGroup>\n        <ToolbarSeparator />\n        <ToolbarGroup>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  render={<Button variant=\"ghost\" size=\"icon\" />}\n                  aria-label=\"Updated Format as currency\"\n                >\n                  <DollarSignIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>\n              Updated Format as currency\n            </TooltipPopup>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  render={<Button variant=\"ghost\" size=\"icon\" />}\n                  aria-label=\"Updated Format as percent\"\n                >\n                  <PercentIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>\n              Updated Format as percent\n            </TooltipPopup>\n          </Tooltip>\n        </ToolbarGroup>\n        <ToolbarSeparator />\n        <ToolbarGroup>\n          <Select items={items} defaultValue=\"helvetica\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <ToolbarButton\n                    nativeButton={false}\n                    render={\n                      <SelectTrigger>\n                        <SelectValue />\n                      </SelectTrigger>\n                    }\n                  />\n                }\n              />\n              <TooltipPopup sideOffset={8}>\n                Updated Select a different font\n              </TooltipPopup>\n            </Tooltip>\n            <SelectPopup>\n              {items.map(({ label, value }) => (\n                <SelectItem key={value} value={value}>\n                  {label}\n                </SelectItem>\n              ))}\n            </SelectPopup>\n          </Select>\n        </ToolbarGroup>\n        <ToolbarSeparator />\n        <ToolbarGroup>\n          <ToolbarButton render={<Button />}>Updated Save</ToolbarButton>\n        </ToolbarGroup>\n      </Toolbar>\n    </TooltipProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/tooltip-demo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/tooltip-demo.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>\n        Hover me\n      </TooltipTrigger>\n      <TooltipPopup>Helpful hint</TooltipPopup>\n    </Tooltip>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function TooltipDemo() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>\n        Updated Hover me\n      </TooltipTrigger>\n      <TooltipPopup>Updated Helpful hint</TooltipPopup>\n    </Tooltip>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/tooltip-grouped.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/tooltip-grouped.tsx",
-      "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\"\n\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\"\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function TooltipDemo() {\n  return (\n    <TooltipProvider>\n      <ToggleGroup defaultValue={[\"bold\"]} multiple>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle value=\"bold\" aria-label=\"Toggle bold\" />}\n          >\n            <BoldIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Bold</TooltipPopup>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle value=\"italic\" aria-label=\"Toggle italic\" />}\n          >\n            <ItalicIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Italic</TooltipPopup>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle value=\"underline\" aria-label=\"Toggle underline\" />}\n          >\n            <UnderlineIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Underline</TooltipPopup>\n        </Tooltip>\n      </ToggleGroup>\n    </TooltipProvider>\n  )\n}\n",
+      "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\"\n\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\"\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function TooltipDemo() {\n  return (\n    <TooltipProvider>\n      <ToggleGroup defaultValue={[\"bold\"]} multiple>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle value=\"bold\" aria-label=\"Updated Toggle bold\" />}\n          >\n            <BoldIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Updated Bold</TooltipPopup>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Toggle value=\"italic\" aria-label=\"Updated Toggle italic\" />\n            }\n          >\n            <ItalicIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Updated Italic</TooltipPopup>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Toggle value=\"underline\" aria-label=\"Updated Toggle underline\" />\n            }\n          >\n            <UnderlineIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Updated Underline</TooltipPopup>\n        </Tooltip>\n      </ToggleGroup>\n    </TooltipProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/tree-controlled.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/tree-controlled.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"../../../../../packages/tree\"\n\nexport default function TreeControlledExample() {\n  const [selectedIds, setSelectedIds] = useState<string[]>([])\n  const [expandedIds] = useState<string[]>([\n    \"team\",\n    \"engineering\",\n    \"design\",\n    \"product\",\n  ])\n\n  const handleClearSelection = () => {\n    setSelectedIds([])\n  }\n\n  const handleSelectAll = () => {\n    const allIds = [\"alice\", \"bob\", \"carol\", \"david\", \"eve\", \"frank\"]\n    setSelectedIds(allIds)\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex gap-2\">\n        <Button onClick={handleSelectAll} size=\"sm\" variant=\"outline\">\n          Select All Team Members\n        </Button>\n        <Button onClick={handleClearSelection} size=\"sm\" variant=\"outline\">\n          Clear Selection\n        </Button>\n      </div>\n\n      <TreeProvider\n        defaultExpandedIds={expandedIds}\n        multiSelect\n        onSelectionChange={setSelectedIds}\n        selectedIds={selectedIds}\n      >\n        <TreeView>\n          <TreeNode isLast nodeId=\"team\">\n            <TreeNodeTrigger>\n              <TreeExpander hasChildren />\n              <TreeIcon hasChildren />\n              <TreeLabel>Team</TreeLabel>\n            </TreeNodeTrigger>\n            <TreeNodeContent hasChildren>\n              <TreeNode level={1} nodeId=\"engineering\">\n                <TreeNodeTrigger>\n                  <TreeExpander hasChildren />\n                  <TreeIcon hasChildren />\n                  <TreeLabel>Engineering</TreeLabel>\n                </TreeNodeTrigger>\n                <TreeNodeContent hasChildren>\n                  <TreeNode level={2} nodeId=\"alice\">\n                    <TreeNodeTrigger>\n                      <TreeExpander />\n                      <TreeIcon />\n                      <TreeLabel>Connor Love</TreeLabel>\n                    </TreeNodeTrigger>\n                  </TreeNode>\n                  <TreeNode isLast level={2} nodeId=\"bob\">\n                    <TreeNodeTrigger>\n                      <TreeExpander />\n                      <TreeIcon />\n                      <TreeLabel>Ian Schroeder</TreeLabel>\n                    </TreeNodeTrigger>\n                  </TreeNode>\n                </TreeNodeContent>\n              </TreeNode>\n              <TreeNode level={1} nodeId=\"design\">\n                <TreeNodeTrigger>\n                  <TreeExpander hasChildren />\n                  <TreeIcon hasChildren />\n                  <TreeLabel>Design</TreeLabel>\n                </TreeNodeTrigger>\n                <TreeNodeContent hasChildren>\n                  <TreeNode level={2} nodeId=\"carol\">\n                    <TreeNodeTrigger>\n                      <TreeExpander />\n                      <TreeIcon />\n                      <TreeLabel>Owen Caudy</TreeLabel>\n                    </TreeNodeTrigger>\n                  </TreeNode>\n                  <TreeNode isLast level={2} nodeId=\"david\">\n                    <TreeNodeTrigger>\n                      <TreeExpander />\n                      <TreeIcon />\n                      <TreeLabel>Tyler PennyPacker</TreeLabel>\n                    </TreeNodeTrigger>\n                  </TreeNode>\n                </TreeNodeContent>\n              </TreeNode>\n              <TreeNode isLast level={1} nodeId=\"product\">\n                <TreeNodeTrigger>\n                  <TreeExpander hasChildren />\n                  <TreeIcon hasChildren />\n                  <TreeLabel>Product</TreeLabel>\n                </TreeNodeTrigger>\n                <TreeNodeContent hasChildren>\n                  <TreeNode level={2} nodeId=\"eve\">\n                    <TreeNodeTrigger>\n                      <TreeExpander />\n                      <TreeIcon />\n                      <TreeLabel>Tyler Love</TreeLabel>\n                    </TreeNodeTrigger>\n                  </TreeNode>\n                  <TreeNode isLast level={2} nodeId=\"frank\">\n                    <TreeNodeTrigger>\n                      <TreeExpander />\n                      <TreeIcon />\n                      <TreeLabel>Ben Dyer</TreeLabel>\n                    </TreeNodeTrigger>\n                  </TreeNode>\n                </TreeNodeContent>\n              </TreeNode>\n            </TreeNodeContent>\n          </TreeNode>\n        </TreeView>\n      </TreeProvider>\n\n      {selectedIds.length > 0 && (\n        <div className=\"text-sm text-muted-foreground\">\n          Selected: {selectedIds.join(\", \")}\n        </div>\n      )}\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"../../../../../packages/tree\"\n\nexport default function TreeControlledExample() {\n  const [selectedIds, setSelectedIds] = useState<string[]>([])\n  const [expandedIds] = useState<string[]>([\n    \"team\",\n    \"engineering\",\n    \"design\",\n    \"product\",\n  ])\n\n  const handleClearSelection = () => {\n    setSelectedIds([])\n  }\n\n  const handleSelectAll = () => {\n    const allIds = [\"alice\", \"bob\", \"carol\", \"david\", \"eve\", \"frank\"]\n    setSelectedIds(allIds)\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex gap-2\">\n        <Button onClick={handleSelectAll} size=\"sm\" variant=\"outline\">\n          Updated Select All Team Members\n        </Button>\n        <Button onClick={handleClearSelection} size=\"sm\" variant=\"outline\">\n          Updated Clear Selection\n        </Button>\n      </div>\n\n      <TreeProvider\n        defaultExpandedIds={expandedIds}\n        multiSelect\n        onSelectionChange={setSelectedIds}\n        selectedIds={selectedIds}\n      >\n        <TreeView>\n          <TreeNode isLast nodeId=\"team\">\n            <TreeNodeTrigger>\n              <TreeExpander hasChildren />\n              <TreeIcon hasChildren />\n              <TreeLabel>Updated Team</TreeLabel>\n            </TreeNodeTrigger>\n            <TreeNodeContent hasChildren>\n              <TreeNode level={1} nodeId=\"engineering\">\n                <TreeNodeTrigger>\n                  <TreeExpander hasChildren />\n                  <TreeIcon hasChildren />\n                  <TreeLabel>Updated Engineering</TreeLabel>\n                </TreeNodeTrigger>\n                <TreeNodeContent hasChildren>\n                  <TreeNode level={2} nodeId=\"alice\">\n                    <TreeNodeTrigger>\n                      <TreeExpander />\n                      <TreeIcon />\n                      <TreeLabel>Updated Connor Love</TreeLabel>\n                    </TreeNodeTrigger>\n                  </TreeNode>\n                  <TreeNode isLast level={2} nodeId=\"bob\">\n                    <TreeNodeTrigger>\n                      <TreeExpander />\n                      <TreeIcon />\n                      <TreeLabel>Updated Ian Schroeder</TreeLabel>\n                    </TreeNodeTrigger>\n                  </TreeNode>\n                </TreeNodeContent>\n              </TreeNode>\n              <TreeNode level={1} nodeId=\"design\">\n                <TreeNodeTrigger>\n                  <TreeExpander hasChildren />\n                  <TreeIcon hasChildren />\n                  <TreeLabel>Updated Design</TreeLabel>\n                </TreeNodeTrigger>\n                <TreeNodeContent hasChildren>\n                  <TreeNode level={2} nodeId=\"carol\">\n                    <TreeNodeTrigger>\n                      <TreeExpander />\n                      <TreeIcon />\n                      <TreeLabel>Updated Owen Caudy</TreeLabel>\n                    </TreeNodeTrigger>\n                  </TreeNode>\n                  <TreeNode isLast level={2} nodeId=\"david\">\n                    <TreeNodeTrigger>\n                      <TreeExpander />\n                      <TreeIcon />\n                      <TreeLabel>Updated Tyler PennyPacker</TreeLabel>\n                    </TreeNodeTrigger>\n                  </TreeNode>\n                </TreeNodeContent>\n              </TreeNode>\n              <TreeNode isLast level={1} nodeId=\"product\">\n                <TreeNodeTrigger>\n                  <TreeExpander hasChildren />\n                  <TreeIcon hasChildren />\n                  <TreeLabel>Updated Product</TreeLabel>\n                </TreeNodeTrigger>\n                <TreeNodeContent hasChildren>\n                  <TreeNode level={2} nodeId=\"eve\">\n                    <TreeNodeTrigger>\n                      <TreeExpander />\n                      <TreeIcon />\n                      <TreeLabel>Updated Tyler Love</TreeLabel>\n                    </TreeNodeTrigger>\n                  </TreeNode>\n                  <TreeNode isLast level={2} nodeId=\"frank\">\n                    <TreeNodeTrigger>\n                      <TreeExpander />\n                      <TreeIcon />\n                      <TreeLabel>Updated Ben Dyer</TreeLabel>\n                    </TreeNodeTrigger>\n                  </TreeNode>\n                </TreeNodeContent>\n              </TreeNode>\n            </TreeNodeContent>\n          </TreeNode>\n        </TreeView>\n      </TreeProvider>\n\n      {selectedIds.length > 0 && (\n        <div className=\"text-sm text-muted-foreground\">\n          Updated Selected: {selectedIds.join(\", \")}\n        </div>\n      )}\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/tree-custom-icons.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/tree-custom-icons.tsx",
-      "content": "\"use client\"\n\nimport {\n  Database,\n  Globe,\n  Key,\n  Lock,\n  Server,\n  Shield,\n  Table,\n  User,\n  Users,\n} from \"lucide-react\"\n\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"../../../../../packages/tree\"\n\nexport default function TreeCustomIconsExample() {\n  return (\n    <TreeProvider\n      defaultExpandedIds={[\"database\", \"users-table\", \"roles-table\", \"api\"]}\n    >\n      <TreeView>\n        <TreeNode nodeId=\"database\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon\n              hasChildren\n              icon={<Database className=\"h-4 w-4 text-blue-500\" />}\n            />\n            <TreeLabel>Database</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"users-table\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon\n                  hasChildren\n                  icon={<Table className=\"h-4 w-4 text-green-500\" />}\n                />\n                <TreeLabel>Users</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"id-field\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon\n                      icon={<Key className=\"h-4 w-4 text-yellow-500\" />}\n                    />\n                    <TreeLabel>id</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode level={2} nodeId=\"email-field\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon\n                      icon={<Globe className=\"h-4 w-4 text-purple-500\" />}\n                    />\n                    <TreeLabel>email</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"password-field\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon\n                      icon={<Lock className=\"h-4 w-4 text-red-500\" />}\n                    />\n                    <TreeLabel>password</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n            <TreeNode isLast level={1} nodeId=\"roles-table\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon\n                  hasChildren\n                  icon={<Table className=\"h-4 w-4 text-green-500\" />}\n                />\n                <TreeLabel>Roles</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"admin-role\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon\n                      icon={<Shield className=\"h-4 w-4 text-orange-500\" />}\n                    />\n                    <TreeLabel>Admin</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"user-role\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon\n                      icon={<User className=\"h-4 w-4 text-blue-400\" />}\n                    />\n                    <TreeLabel>User</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n        <TreeNode isLast nodeId=\"api\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon\n              hasChildren\n              icon={<Server className=\"h-4 w-4 text-indigo-500\" />}\n            />\n            <TreeLabel>API</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"auth-endpoint\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon icon={<Lock className=\"h-4 w-4 text-red-500\" />} />\n                <TreeLabel>Authentication</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n            <TreeNode isLast level={1} nodeId=\"users-endpoint\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon icon={<Users className=\"h-4 w-4 text-blue-500\" />} />\n                <TreeLabel>Users Management</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n      </TreeView>\n    </TreeProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Database,\n  Globe,\n  Key,\n  Lock,\n  Server,\n  Shield,\n  Table,\n  User,\n  Users,\n} from \"lucide-react\"\n\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"../../../../../packages/tree\"\n\nexport default function TreeCustomIconsExample() {\n  return (\n    <TreeProvider\n      defaultExpandedIds={[\"database\", \"users-table\", \"roles-table\", \"api\"]}\n    >\n      <TreeView>\n        <TreeNode nodeId=\"database\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon\n              hasChildren\n              icon={<Database className=\"h-4 w-4 text-blue-500\" />}\n            />\n            <TreeLabel>Updated Database</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"users-table\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon\n                  hasChildren\n                  icon={<Table className=\"h-4 w-4 text-green-500\" />}\n                />\n                <TreeLabel>Updated Users</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"id-field\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon\n                      icon={<Key className=\"h-4 w-4 text-yellow-500\" />}\n                    />\n                    <TreeLabel>id</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode level={2} nodeId=\"email-field\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon\n                      icon={<Globe className=\"h-4 w-4 text-purple-500\" />}\n                    />\n                    <TreeLabel>email</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"password-field\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon\n                      icon={<Lock className=\"h-4 w-4 text-red-500\" />}\n                    />\n                    <TreeLabel>password</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n            <TreeNode isLast level={1} nodeId=\"roles-table\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon\n                  hasChildren\n                  icon={<Table className=\"h-4 w-4 text-green-500\" />}\n                />\n                <TreeLabel>Updated Roles</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"admin-role\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon\n                      icon={<Shield className=\"h-4 w-4 text-orange-500\" />}\n                    />\n                    <TreeLabel>Updated Admin</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"user-role\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon\n                      icon={<User className=\"h-4 w-4 text-blue-400\" />}\n                    />\n                    <TreeLabel>Updated User</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n        <TreeNode isLast nodeId=\"api\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon\n              hasChildren\n              icon={<Server className=\"h-4 w-4 text-indigo-500\" />}\n            />\n            <TreeLabel>Updated API</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"auth-endpoint\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon icon={<Lock className=\"h-4 w-4 text-red-500\" />} />\n                <TreeLabel>Updated Authentication</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n            <TreeNode isLast level={1} nodeId=\"users-endpoint\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon icon={<Users className=\"h-4 w-4 text-blue-500\" />} />\n                <TreeLabel>Updated Users Management</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n      </TreeView>\n    </TreeProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/tree-no-lines.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/tree-no-lines.tsx",
-      "content": "\"use client\"\n\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"../../../../../packages/tree\"\n\nexport default function TreeNoLinesExample() {\n  return (\n    <TreeProvider\n      defaultExpandedIds={[\"projects\", \"website-redesign\"]}\n      showLines={false}\n    >\n      <TreeView>\n        <TreeNode nodeId=\"projects\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon hasChildren />\n            <TreeLabel>Projects</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"website-redesign\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>Website Redesign</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"homepage\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Homepage</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode level={2} nodeId=\"about-page\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>About Page</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"contact-form\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Contact Form</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n            <TreeNode isLast level={1} nodeId=\"mobile-app\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>Mobile App</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"ios-version\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>iOS Version</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"android-version\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Android Version</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n        <TreeNode isLast nodeId=\"resources\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon hasChildren />\n            <TreeLabel>Resources</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"documentation\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon />\n                <TreeLabel>Documentation</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n            <TreeNode level={1} nodeId=\"api-reference\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon />\n                <TreeLabel>API Reference</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n            <TreeNode isLast level={1} nodeId=\"examples\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon />\n                <TreeLabel>Examples</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n      </TreeView>\n    </TreeProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"../../../../../packages/tree\"\n\nexport default function TreeNoLinesExample() {\n  return (\n    <TreeProvider\n      defaultExpandedIds={[\"projects\", \"website-redesign\"]}\n      showLines={false}\n    >\n      <TreeView>\n        <TreeNode nodeId=\"projects\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon hasChildren />\n            <TreeLabel>Updated Projects</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"website-redesign\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>Updated Website Redesign</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"homepage\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Updated Homepage</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode level={2} nodeId=\"about-page\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Updated About Page</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"contact-form\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Updated Contact Form</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n            <TreeNode isLast level={1} nodeId=\"mobile-app\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>Updated Mobile App</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"ios-version\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Updated iOS Version</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"android-version\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Updated Android Version</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n        <TreeNode isLast nodeId=\"resources\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon hasChildren />\n            <TreeLabel>Updated Resources</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"documentation\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon />\n                <TreeLabel>Updated Documentation</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n            <TreeNode level={1} nodeId=\"api-reference\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon />\n                <TreeLabel>Updated API Reference</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n            <TreeNode isLast level={1} nodeId=\"examples\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon />\n                <TreeLabel>Updated Examples</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n      </TreeView>\n    </TreeProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/tree-simple.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/tree-simple.tsx",
-      "content": "\"use client\"\n\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"../../../../../packages/tree\"\n\nexport default function TreeSimpleExample() {\n  return (\n    <TreeProvider>\n      <TreeView>\n        <TreeNode nodeId=\"documents\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon hasChildren />\n            <TreeLabel>Documents</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"work\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>Work</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"project-a\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Project A.pdf</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"project-b\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Project B.pdf</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n            <TreeNode isLast level={1} nodeId=\"personal\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>Personal</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"resume\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Resume.docx</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"cover-letter\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Cover Letter.docx</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n        <TreeNode isLast nodeId=\"downloads\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon hasChildren />\n            <TreeLabel>Downloads</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"installer\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon />\n                <TreeLabel>installer.exe</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n            <TreeNode isLast level={1} nodeId=\"update\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon />\n                <TreeLabel>update.zip</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n      </TreeView>\n    </TreeProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"../../../../../packages/tree\"\n\nexport default function TreeSimpleExample() {\n  return (\n    <TreeProvider>\n      <TreeView>\n        <TreeNode nodeId=\"documents\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon hasChildren />\n            <TreeLabel>Updated Documents</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"work\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>Updated Work</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"project-a\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Updated Project A.pdf</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"project-b\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Updated Project B.pdf</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n            <TreeNode isLast level={1} nodeId=\"personal\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>Updated Personal</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"resume\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Updated Resume.docx</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"cover-letter\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon />\n                    <TreeLabel>Updated Cover Letter.docx</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n        <TreeNode isLast nodeId=\"downloads\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon hasChildren />\n            <TreeLabel>Updated Downloads</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"installer\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon />\n                <TreeLabel>installer.exe</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n            <TreeNode isLast level={1} nodeId=\"update\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon />\n                <TreeLabel>update.zip</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n      </TreeView>\n    </TreeProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/tree.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/tree.tsx",
-      "content": "\"use client\"\n\nimport { FileCode, FileJson, FileText } from \"lucide-react\"\n\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"../../../../../packages/tree\"\n\nexport default function TreeExample() {\n  return (\n    <TreeProvider\n      defaultExpandedIds={[\"src\", \"components\", \"ui\"]}\n      onSelectionChange={(ids) => console.log(\"Selected:\", ids)}\n    >\n      <TreeView>\n        <TreeNode nodeId=\"src\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon hasChildren />\n            <TreeLabel>src</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"components\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>components</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"ui\">\n                  <TreeNodeTrigger>\n                    <TreeExpander hasChildren />\n                    <TreeIcon hasChildren />\n                    <TreeLabel>ui</TreeLabel>\n                  </TreeNodeTrigger>\n                  <TreeNodeContent hasChildren>\n                    <TreeNode level={3} nodeId=\"button.tsx\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileCode className=\"h-4 w-4\" />} />\n                        <TreeLabel>button.tsx</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode level={3} nodeId=\"card.tsx\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileCode className=\"h-4 w-4\" />} />\n                        <TreeLabel>card.tsx</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode isLast level={3} nodeId=\"dialog.tsx\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileCode className=\"h-4 w-4\" />} />\n                        <TreeLabel>dialog.tsx</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                  </TreeNodeContent>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"layout\">\n                  <TreeNodeTrigger>\n                    <TreeExpander hasChildren />\n                    <TreeIcon hasChildren />\n                    <TreeLabel>layout</TreeLabel>\n                  </TreeNodeTrigger>\n                  <TreeNodeContent hasChildren>\n                    <TreeNode level={3} nodeId=\"header.tsx\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileCode className=\"h-4 w-4\" />} />\n                        <TreeLabel>header.tsx</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode isLast level={3} nodeId=\"footer.tsx\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileCode className=\"h-4 w-4\" />} />\n                        <TreeLabel>footer.tsx</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                  </TreeNodeContent>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n        <TreeNode nodeId=\"public\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon hasChildren />\n            <TreeLabel>public</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode isLast level={1} nodeId=\"images\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>images</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"logo.svg\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon icon={<FileText className=\"h-4 w-4\" />} />\n                    <TreeLabel>logo.svg</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"hero.png\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon icon={<FileText className=\"h-4 w-4\" />} />\n                    <TreeLabel>hero.png</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n        <TreeNode nodeId=\"package.json\">\n          <TreeNodeTrigger>\n            <TreeExpander />\n            <TreeIcon icon={<FileJson className=\"h-4 w-4\" />} />\n            <TreeLabel>package.json</TreeLabel>\n          </TreeNodeTrigger>\n        </TreeNode>\n        <TreeNode nodeId=\"tsconfig.json\">\n          <TreeNodeTrigger>\n            <TreeExpander />\n            <TreeIcon icon={<FileJson className=\"h-4 w-4\" />} />\n            <TreeLabel>tsconfig.json</TreeLabel>\n          </TreeNodeTrigger>\n        </TreeNode>\n        <TreeNode isLast nodeId=\"README.md\">\n          <TreeNodeTrigger>\n            <TreeExpander />\n            <TreeIcon icon={<FileText className=\"h-4 w-4\" />} />\n            <TreeLabel>README.md</TreeLabel>\n          </TreeNodeTrigger>\n        </TreeNode>\n      </TreeView>\n    </TreeProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { FileCode, FileJson, FileText } from \"lucide-react\"\n\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"../../../../../packages/tree\"\n\nexport default function TreeExample() {\n  return (\n    <TreeProvider\n      defaultExpandedIds={[\"src\", \"components\", \"ui\"]}\n      onSelectionChange={(ids) => console.log(\"Selected:\", ids)}\n    >\n      <TreeView>\n        <TreeNode nodeId=\"src\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon hasChildren />\n            <TreeLabel>src</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode level={1} nodeId=\"components\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>components</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"ui\">\n                  <TreeNodeTrigger>\n                    <TreeExpander hasChildren />\n                    <TreeIcon hasChildren />\n                    <TreeLabel>ui</TreeLabel>\n                  </TreeNodeTrigger>\n                  <TreeNodeContent hasChildren>\n                    <TreeNode level={3} nodeId=\"button.tsx\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileCode className=\"h-4 w-4\" />} />\n                        <TreeLabel>button.tsx</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode level={3} nodeId=\"card.tsx\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileCode className=\"h-4 w-4\" />} />\n                        <TreeLabel>card.tsx</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode isLast level={3} nodeId=\"dialog.tsx\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileCode className=\"h-4 w-4\" />} />\n                        <TreeLabel>dialog.tsx</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                  </TreeNodeContent>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"layout\">\n                  <TreeNodeTrigger>\n                    <TreeExpander hasChildren />\n                    <TreeIcon hasChildren />\n                    <TreeLabel>layout</TreeLabel>\n                  </TreeNodeTrigger>\n                  <TreeNodeContent hasChildren>\n                    <TreeNode level={3} nodeId=\"header.tsx\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileCode className=\"h-4 w-4\" />} />\n                        <TreeLabel>header.tsx</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode isLast level={3} nodeId=\"footer.tsx\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileCode className=\"h-4 w-4\" />} />\n                        <TreeLabel>footer.tsx</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                  </TreeNodeContent>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n        <TreeNode nodeId=\"public\">\n          <TreeNodeTrigger>\n            <TreeExpander hasChildren />\n            <TreeIcon hasChildren />\n            <TreeLabel>public</TreeLabel>\n          </TreeNodeTrigger>\n          <TreeNodeContent hasChildren>\n            <TreeNode isLast level={1} nodeId=\"images\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>images</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={2} nodeId=\"logo.svg\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon icon={<FileText className=\"h-4 w-4\" />} />\n                    <TreeLabel>logo.svg</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={2} nodeId=\"hero.png\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon icon={<FileText className=\"h-4 w-4\" />} />\n                    <TreeLabel>hero.png</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n          </TreeNodeContent>\n        </TreeNode>\n        <TreeNode nodeId=\"package.json\">\n          <TreeNodeTrigger>\n            <TreeExpander />\n            <TreeIcon icon={<FileJson className=\"h-4 w-4\" />} />\n            <TreeLabel>package.json</TreeLabel>\n          </TreeNodeTrigger>\n        </TreeNode>\n        <TreeNode nodeId=\"tsconfig.json\">\n          <TreeNodeTrigger>\n            <TreeExpander />\n            <TreeIcon icon={<FileJson className=\"h-4 w-4\" />} />\n            <TreeLabel>tsconfig.json</TreeLabel>\n          </TreeNodeTrigger>\n        </TreeNode>\n        <TreeNode isLast nodeId=\"README.md\">\n          <TreeNodeTrigger>\n            <TreeExpander />\n            <TreeIcon icon={<FileText className=\"h-4 w-4\" />} />\n            <TreeLabel>Updated README.md</TreeLabel>\n          </TreeNodeTrigger>\n        </TreeNode>\n      </TreeView>\n    </TreeProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/typography.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/typography.tsx",
-      "content": "\"use client\"\n\nimport \"../../../../../packages/typography/styles.css\"\n\nimport Image from \"next/image\"\n\nconst Example = () => (\n  <div className=\"size-full overflow-y-auto\">\n    <div className=\"typography\">\n      <h1>The Art of Sourdough: From Starter to Artisan Loaf</h1>\n\n      <p>\n        Few things are as satisfying as pulling a perfectly golden, crackling\n        sourdough loaf from your own oven. The ancient art of wild yeast\n        fermentation has experienced a renaissance, with home bakers around the\n        world cultivating their own <code>starter cultures</code> and mastering\n        the delicate balance of flour, water, time, and temperature.\n      </p>\n\n      <h2>Getting Started</h2>\n      <p>\n        Creating your first sourdough starter is a journey that requires\n        patience and attention. Unlike commercial yeast, wild yeast and\n        beneficial bacteria work slowly, developing complex flavors that simply\n        cannot be rushed or replicated with instant ingredients.\n      </p>\n\n      <h3>Essential Equipment</h3>\n      <ul>\n        <li>Large mixing bowl (glass or ceramic preferred)</li>\n        <li>Kitchen scale for precise measurements</li>\n        <li>Dutch oven or baking stone</li>\n      </ul>\n\n      <h3>Basic Ingredients</h3>\n      <ol>\n        <li>Bread flour (12-13% protein content)</li>\n        <li>Filtered or spring water (chlorine-free)</li>\n        <li>Your active sourdough starter</li>\n      </ol>\n\n      <h2>Baking Day Checklist</h2>\n      <ul>\n        <li>\n          <input checked disabled type=\"checkbox\" />{\" \"}\n          <p>Feed starter 8-12 hours before</p>\n        </li>\n        <li>\n          <input disabled type=\"checkbox\" /> <p>Mix and autolyse dough</p>\n        </li>\n        <li>\n          <input disabled type=\"checkbox\" /> <p>Complete stretch and folds</p>\n        </li>\n      </ul>\n\n      <h2>Visual Guide</h2>\n      <p>\n        A properly developed loaf should have an open, airy crumb structure with\n        irregular holes. The crust should be deep golden brown with natural\n        caramelization.\n      </p>\n      <center>\n        <Image\n          alt=\"Artisan sourdough bread\"\n          height={400}\n          src=\"https://placehold.co/600x400\"\n          unoptimized\n          width={600}\n        />\n      </center>\n\n      <h2>Starter Recipe</h2>\n      <pre>\n        <code>{`Day 1: Mix 50g flour + 50g water\nDay 2-7: Discard half, feed daily\nWeek 2: Ready when doubles in 4-6 hours\nTemperature: 75-80°F (24-27°C) optimal`}</code>\n      </pre>\n\n      <h2>Baker's Wisdom</h2>\n      <blockquote>\n        \"Bread baking is one of those almost hypnotic businesses, like a dance\n        from some ancient ceremony. It leaves you filled with one of the world's\n        sweetest smells... there is no chiropractic treatment, no Yoga exercise,\n        no hour of meditation in a music-throbbing chapel that will leave you\n        emptier of bad thoughts than this homely ceremony of making bread.\" —\n        M.F.K. Fisher\n      </blockquote>\n\n      <h2>Fermentation Timeline</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Stage</th>\n            <th>Duration</th>\n            <th>Temperature</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>Bulk Fermentation</td>\n            <td>4-6 hours</td>\n            <td>75-78°F</td>\n          </tr>\n          <tr>\n            <td>Cold Proof</td>\n            <td>12-48 hours</td>\n            <td>38-40°F</td>\n          </tr>\n          <tr>\n            <td>Baking</td>\n            <td>35-45 minutes</td>\n            <td>450-500°F</td>\n          </tr>\n        </tbody>\n      </table>\n\n      <h2>Tips & Techniques</h2>\n      <p>\n        Always use <strong>high-quality flour</strong> for best results,{\" \"}\n        <em>organic when possible</em>. <u>Temperature control</u> is crucial —\n        consider using a{\" \"}\n        <a href=\"https://example.com\">proofing box or heating pad</a>. The{\" \"}\n        <code>stretch and fold</code> technique develops gluten without\n        kneading.\n      </p>\n\n      <h2>Terminology</h2>\n      <dl>\n        <dt>Autolyse</dt>\n        <dd>\n          Resting period where flour absorbs water before adding starter and\n          salt\n        </dd>\n        <dt>Bulk Fermentation</dt>\n        <dd>\n          First rise after mixing, typically 4-6 hours at room temperature\n        </dd>\n        <dt>Banneton</dt>\n        <dd>Proofing basket used to support dough during final rise</dd>\n      </dl>\n\n      <h2>Troubleshooting</h2>\n      <details>\n        <summary>Why is my bread too dense?</summary>\n        <p>\n          Dense bread often results from under-fermentation, insufficient gluten\n          development, or weak starter. Ensure your starter passes the float\n          test and allow adequate bulk fermentation time.\n        </p>\n      </details>\n\n      <h2>Advanced Techniques</h2>\n      <p>\n        Master bakers focus on <strong>precise hydration ratios</strong> and{\" \"}\n        <em>careful temperature management</em>. <u>Score patterns</u> aren't\n        just decorative — they control{\" \"}\n        <a href=\"https://example.com\">oven spring direction</a>.{\" \"}\n        <mark>The key is consistent practice</mark> and{\" \"}\n        <small>making detailed notes</small>.{\" \"}\n        <abbr title=\"Percentage of water to flour\">Hydration</abbr> typically\n        ranges from 65-85%.\n      </p>\n\n      <h2>Baker's Math</h2>\n      <p>\n        Professional bakers use percentages: 1000g flour at 75% hydration\n        requires 750g water\n        <sup>*</sup>. Common chemical leavening uses CO<sub>2</sub> production.\n      </p>\n\n      <h2>Final Thoughts</h2>\n      <p>\n        Sourdough baking is equal parts science and art. Every loaf teaches you\n        something new about fermentation, gluten development, and the interplay\n        of time and temperature. Keep detailed notes, trust the process, and\n        remember that even imperfect loaves taste wonderful fresh from the oven.\n      </p>\n    </div>\n  </div>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport \"../../../../../packages/typography/styles.css\"\n\nimport Image from \"next/image\"\n\nconst Example = () => (\n  <div className=\"size-full overflow-y-auto\">\n    <div className=\"typography\">\n      <h1>Updated The Art of Sourdough: From Starter to Artisan Loaf</h1>\n\n      <p>\n        Updated Few things are as satisfying as pulling a perfectly golden,\n        crackling sourdough loaf from your own oven. The ancient art of wild\n        yeast fermentation has experienced a renaissance, with home bakers\n        around the world cultivating their own{\" \"}\n        <code>Updated starter cultures</code> Updated and mastering the delicate\n        balance of flour, water, time, and temperature.\n      </p>\n\n      <h2>Updated Getting Started</h2>\n      <p>\n        Updated Creating your first sourdough starter is a journey that requires\n        patience and attention. Unlike commercial yeast, wild yeast and\n        beneficial bacteria work slowly, developing complex flavors that simply\n        cannot be rushed or replicated with instant ingredients.\n      </p>\n\n      <h3>Updated Essential Equipment</h3>\n      <ul>\n        <li>Updated Large mixing bowl (glass or ceramic preferred)</li>\n        <li>Updated Kitchen scale for precise measurements</li>\n        <li>Updated Dutch oven or baking stone</li>\n      </ul>\n\n      <h3>Updated Basic Ingredients</h3>\n      <ol>\n        <li>Updated Bread flour (12-13% protein content)</li>\n        <li>Updated Filtered or spring water (chlorine-free)</li>\n        <li>Updated Your active sourdough starter</li>\n      </ol>\n\n      <h2>Updated Baking Day Checklist</h2>\n      <ul>\n        <li>\n          <input checked disabled type=\"checkbox\" />{\" \"}\n          <p>Updated Feed starter 8-12 hours before</p>\n        </li>\n        <li>\n          <input disabled type=\"checkbox\" />{\" \"}\n          <p>Updated Mix and autolyse dough</p>\n        </li>\n        <li>\n          <input disabled type=\"checkbox\" />{\" \"}\n          <p>Updated Complete stretch and folds</p>\n        </li>\n      </ul>\n\n      <h2>Updated Visual Guide</h2>\n      <p>\n        Updated A properly developed loaf should have an open, airy crumb\n        structure with irregular holes. The crust should be deep golden brown\n        with natural caramelization.\n      </p>\n      <center>\n        <Image\n          alt=\"Updated Artisan sourdough bread\"\n          height={400}\n          src=\"https://placehold.co/600x400\"\n          unoptimized\n          width={600}\n        />\n      </center>\n\n      <h2>Updated Starter Recipe</h2>\n      <pre>\n        <code>{`Updated Day 1: Mix 50g flour + 50g water\nDay 2-7: Discard half, feed daily\nWeek 2: Ready when doubles in 4-6 hours\nTemperature: 75-80°F (24-27°C) optimal`}</code>\n      </pre>\n\n      <h2>Updated Baker's Wisdom</h2>\n      <blockquote>\n        Updated \"Bread baking is one of those almost hypnotic businesses, like a\n        dance from some ancient ceremony. It leaves you filled with one of the\n        world's sweetest smells... there is no chiropractic treatment, no Yoga\n        exercise, no hour of meditation in a music-throbbing chapel that will\n        leave you emptier of bad thoughts than this homely ceremony of making\n        bread.\" — M.F.K. Fisher\n      </blockquote>\n\n      <h2>Updated Fermentation Timeline</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Updated Stage</th>\n            <th>Updated Duration</th>\n            <th>Updated Temperature</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>Updated Bulk Fermentation</td>\n            <td>Updated 4-6 hours</td>\n            <td>Updated 75-78°F</td>\n          </tr>\n          <tr>\n            <td>Updated Cold Proof</td>\n            <td>Updated 12-48 hours</td>\n            <td>Updated 38-40°F</td>\n          </tr>\n          <tr>\n            <td>Updated Baking</td>\n            <td>Updated 35-45 minutes</td>\n            <td>Updated 450-500°F</td>\n          </tr>\n        </tbody>\n      </table>\n\n      <h2>Updated Tips & Techniques</h2>\n      <p>\n        Updated Always use <strong>Updated high-quality flour</strong> Updated\n        for best results, <em>Updated organic when possible</em>.{\" \"}\n        <u>Updated Temperature control</u> Updated is crucial — consider using a{\" \"}\n        <a href=\"https://example.com\">Updated proofing box or heating pad</a>\n        Updated . The <code>Updated stretch and fold</code> Updated technique\n        develops gluten without kneading.\n      </p>\n\n      <h2>Updated Terminology</h2>\n      <dl>\n        <dt>Updated Autolyse</dt>\n        <dd>\n          Updated Resting period where flour absorbs water before adding starter\n          and salt\n        </dd>\n        <dt>Updated Bulk Fermentation</dt>\n        <dd>\n          Updated First rise after mixing, typically 4-6 hours at room\n          temperature\n        </dd>\n        <dt>Updated Banneton</dt>\n        <dd>Updated Proofing basket used to support dough during final rise</dd>\n      </dl>\n\n      <h2>Updated Troubleshooting</h2>\n      <details>\n        <summary>Updated Why is my bread too dense?</summary>\n        <p>\n          Updated Dense bread often results from under-fermentation,\n          insufficient gluten development, or weak starter. Ensure your starter\n          passes the float test and allow adequate bulk fermentation time.\n        </p>\n      </details>\n\n      <h2>Updated Advanced Techniques</h2>\n      <p>\n        Updated Master bakers focus on{\" \"}\n        <strong>Updated precise hydration ratios</strong> and{\" \"}\n        <em>Updated careful temperature management</em>.{\" \"}\n        <u>Updated Score patterns</u> Updated aren't just decorative — they\n        control <a href=\"https://example.com\">Updated oven spring direction</a>.{\" \"}\n        <mark>Updated The key is consistent practice</mark> and{\" \"}\n        <small>Updated making detailed notes</small>.{\" \"}\n        <abbr title=\"Updated Percentage of water to flour\">\n          Updated Hydration\n        </abbr>{\" \"}\n        Updated typically ranges from 65-85%.\n      </p>\n\n      <h2>Updated Baker's Math</h2>\n      <p>\n        Updated Professional bakers use percentages: 1000g flour at 75%\n        hydration requires 750g water\n        <sup>*</sup>Updated . Common chemical leavening uses CO<sub>2</sub>{\" \"}\n        production.\n      </p>\n\n      <h2>Updated Final Thoughts</h2>\n      <p>\n        Updated Sourdough baking is equal parts science and art. Every loaf\n        teaches you something new about fermentation, gluten development, and\n        the interplay of time and temperature. Keep detailed notes, trust the\n        process, and remember that even imperfect loaves taste wonderful fresh\n        from the oven.\n      </p>\n    </div>\n  </div>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/ui.json

@@ -11,18 +11,23 @@
     "@loveui/breadcrumb",
     "@loveui/button",
     "@loveui/card",
+    "@loveui/chart",
     "@loveui/checkbox",
     "@loveui/checkbox-group",
     "@loveui/collapsible",
     "@loveui/combobox",
+    "@loveui/context-menu",
     "@loveui/dialog",
     "@loveui/empty",
     "@loveui/field",
+    "@loveui/field-2",
     "@loveui/fieldset",
     "@loveui/form",
     "@loveui/frame",
     "@loveui/group",
     "@loveui/input",
+    "@loveui/input-group",
+    "@loveui/kbd",
     "@loveui/label",
     "@loveui/menu",
     "@loveui/meter",

package/public/r/use-character-limit.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-character-limit",
+  "type": "registry:hook",
+  "files": [
+    {
+      "path": "registry/default/hooks/use-character-limit.ts",
+      "content": "\"use client\"\n\nimport { ChangeEvent, useState } from \"react\"\n\ntype UseCharacterLimitProps = {\n  maxLength: number\n  initialValue?: string\n}\n\nexport function useCharacterLimit({\n  maxLength,\n  initialValue = \"\",\n}: UseCharacterLimitProps) {\n  const [value, setValue] = useState(initialValue)\n  const [characterCount, setCharacterCount] = useState(initialValue.length)\n\n  const handleChange = (\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    const newValue = e.target.value\n    if (newValue.length <= maxLength) {\n      setValue(newValue)\n      setCharacterCount(newValue.length)\n    }\n  }\n\n  return {\n    value,\n    characterCount,\n    handleChange,\n    maxLength,\n  }\n}\n",
+      "type": "registry:hook"
+    }
+  ]
+}

package/public/r/use-file-upload.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-file-upload",
+  "type": "registry:hook",
+  "files": [
+    {
+      "path": "registry/default/hooks/use-file-upload.ts",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n  type InputHTMLAttributes,\n} from \"react\"\n\nexport type FileMetadata = {\n  name: string\n  size: number\n  type: string\n  url: string\n  id: string\n}\n\nexport type FileWithPreview = {\n  file: File | FileMetadata\n  id: string\n  preview?: string\n}\n\nexport type FileUploadOptions = {\n  maxFiles?: number // Only used when multiple is true, defaults to Infinity\n  maxSize?: number // in bytes\n  accept?: string\n  multiple?: boolean // Defaults to false\n  initialFiles?: FileMetadata[]\n  onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added\n}\n\nexport type FileUploadState = {\n  files: FileWithPreview[]\n  isDragging: boolean\n  errors: string[]\n}\n\nexport type FileUploadActions = {\n  addFiles: (files: FileList | File[]) => void\n  removeFile: (id: string) => void\n  clearFiles: () => void\n  clearErrors: () => void\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void\n  handleDragOver: (e: DragEvent<HTMLElement>) => void\n  handleDrop: (e: DragEvent<HTMLElement>) => void\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void\n  openFileDialog: () => void\n  getInputProps: (\n    props?: InputHTMLAttributes<HTMLInputElement>\n  ) => InputHTMLAttributes<HTMLInputElement> & {\n    // Use `any` here to avoid cross-React ref type conflicts across packages\n    ref: any\n  }\n}\n\nexport const useFileUpload = (\n  options: FileUploadOptions = {}\n): [FileUploadState, FileUploadActions] => {\n  const {\n    maxFiles = Infinity,\n    maxSize = Infinity,\n    accept = \"*\",\n    multiple = false,\n    initialFiles = [],\n    onFilesChange,\n    onFilesAdded,\n  } = options\n\n  const [state, setState] = useState<FileUploadState>({\n    files: initialFiles.map((file) => ({\n      file,\n      id: file.id,\n      preview: file.url,\n    })),\n    isDragging: false,\n    errors: [],\n  })\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const validateFile = useCallback(\n    (file: File | FileMetadata): string | null => {\n      if (file instanceof File) {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      } else {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      }\n\n      if (accept !== \"*\") {\n        const acceptedTypes = accept.split(\",\").map((type) => type.trim())\n        const fileType = file instanceof File ? file.type || \"\" : file.type\n        const fileExtension = `.${file instanceof File ? file.name.split(\".\").pop() : file.name.split(\".\").pop()}`\n\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.startsWith(\".\")) {\n            return fileExtension.toLowerCase() === type.toLowerCase()\n          }\n          if (type.endsWith(\"/*\")) {\n            const baseType = type.split(\"/\")[0]\n            return fileType.startsWith(`${baseType}/`)\n          }\n          return fileType === type\n        })\n\n        if (!isAccepted) {\n          return `File \"${file instanceof File ? file.name : file.name}\" is not an accepted file type.`\n        }\n      }\n\n      return null\n    },\n    [accept, maxSize]\n  )\n\n  const createPreview = useCallback(\n    (file: File | FileMetadata): string | undefined => {\n      if (file instanceof File) {\n        return URL.createObjectURL(file)\n      }\n      return file.url\n    },\n    []\n  )\n\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\n    if (file instanceof File) {\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`\n    }\n    return file.id\n  }, [])\n\n  const clearFiles = useCallback(() => {\n    setState((prev) => {\n      // Clean up object URLs\n      prev.files.forEach((file) => {\n        if (\n          file.preview &&\n          file.file instanceof File &&\n          file.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n\n      const newState = {\n        ...prev,\n        files: [],\n        errors: [],\n      }\n\n      onFilesChange?.(newState.files)\n      return newState\n    })\n  }, [onFilesChange])\n\n  const addFiles = useCallback(\n    (newFiles: FileList | File[]) => {\n      if (!newFiles || newFiles.length === 0) return\n\n      const newFilesArray = Array.from(newFiles)\n      const errors: string[] = []\n\n      // Clear existing errors when new files are uploaded\n      setState((prev) => ({ ...prev, errors: [] }))\n\n      // In single file mode, clear existing files first\n      if (!multiple) {\n        clearFiles()\n      }\n\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\n      if (\n        multiple &&\n        maxFiles !== Infinity &&\n        state.files.length + newFilesArray.length > maxFiles\n      ) {\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`)\n        setState((prev) => ({ ...prev, errors }))\n        return\n      }\n\n      const validFiles: FileWithPreview[] = []\n\n      newFilesArray.forEach((file) => {\n        // Only check for duplicates if multiple files are allowed\n        if (multiple) {\n          const isDuplicate = state.files.some(\n            (existingFile) =>\n              existingFile.file.name === file.name &&\n              existingFile.file.size === file.size\n          )\n\n          // Skip duplicate files silently\n          if (isDuplicate) {\n            return\n          }\n        }\n\n        // Check file size\n        if (file.size > maxSize) {\n          errors.push(\n            multiple\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`\n          )\n          return\n        }\n\n        const error = validateFile(file)\n        if (error) {\n          errors.push(error)\n        } else {\n          validFiles.push({\n            file,\n            id: generateUniqueId(file),\n            preview: createPreview(file),\n          })\n        }\n      })\n\n      // Only update state if we have valid files to add\n      if (validFiles.length > 0) {\n        // Call the onFilesAdded callback with the newly added valid files\n        onFilesAdded?.(validFiles)\n\n        setState((prev) => {\n          const newFiles = !multiple\n            ? validFiles\n            : [...prev.files, ...validFiles]\n          onFilesChange?.(newFiles)\n          return {\n            ...prev,\n            files: newFiles,\n            errors,\n          }\n        })\n      } else if (errors.length > 0) {\n        setState((prev) => ({\n          ...prev,\n          errors,\n        }))\n      }\n\n      // Reset input value after handling files\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n    },\n    [\n      state.files,\n      maxFiles,\n      multiple,\n      maxSize,\n      validateFile,\n      createPreview,\n      generateUniqueId,\n      clearFiles,\n      onFilesChange,\n      onFilesAdded,\n    ]\n  )\n\n  const removeFile = useCallback(\n    (id: string) => {\n      setState((prev) => {\n        const fileToRemove = prev.files.find((file) => file.id === id)\n        if (\n          fileToRemove &&\n          fileToRemove.preview &&\n          fileToRemove.file instanceof File &&\n          fileToRemove.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(fileToRemove.preview)\n        }\n\n        const newFiles = prev.files.filter((file) => file.id !== id)\n        onFilesChange?.(newFiles)\n\n        return {\n          ...prev,\n          files: newFiles,\n          errors: [],\n        }\n      })\n    },\n    [onFilesChange]\n  )\n\n  const clearErrors = useCallback(() => {\n    setState((prev) => ({\n      ...prev,\n      errors: [],\n    }))\n  }, [])\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setState((prev) => ({ ...prev, isDragging: true }))\n  }, [])\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\n      return\n    }\n\n    setState((prev) => ({ ...prev, isDragging: false }))\n  }, [])\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLElement>) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setState((prev) => ({ ...prev, isDragging: false }))\n\n      // Don't process files if the input is disabled\n      if (inputRef.current?.disabled) {\n        return\n      }\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        // In single file mode, only use the first file\n        if (!multiple) {\n          const file = e.dataTransfer.files[0]\n          addFiles([file])\n        } else {\n          addFiles(e.dataTransfer.files)\n        }\n      }\n    },\n    [addFiles, multiple]\n  )\n\n  const handleFileChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        addFiles(e.target.files)\n      }\n    },\n    [addFiles]\n  )\n\n  const openFileDialog = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [])\n\n  const getInputProps = useCallback(\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\n      return {\n        ...props,\n        type: \"file\" as const,\n        onChange: handleFileChange,\n        accept: props.accept || accept,\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\n        ref: inputRef as any,\n      }\n    },\n    [accept, multiple, handleFileChange]\n  )\n\n  return [\n    state,\n    {\n      addFiles,\n      removeFile,\n      clearFiles,\n      clearErrors,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      handleFileChange,\n      openFileDialog,\n      getInputProps,\n    },\n  ]\n}\n\n// Helper function to format bytes to human-readable format\nexport const formatBytes = (bytes: number, decimals = 2): string => {\n  if (bytes === 0) return \"0 Bytes\"\n\n  const k = 1024\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"]\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k))\n\n  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i]\n}\n",
+      "type": "registry:hook"
+    }
+  ]
+}

package/public/r/use-pagination.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-pagination",
+  "type": "registry:hook",
+  "files": [
+    {
+      "path": "registry/default/hooks/use-pagination.ts",
+      "content": "type UsePaginationProps = {\n  currentPage: number\n  totalPages: number\n  paginationItemsToDisplay: number\n}\n\ntype UsePaginationReturn = {\n  pages: number[]\n  showLeftEllipsis: boolean\n  showRightEllipsis: boolean\n}\n\nexport function usePagination({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay,\n}: UsePaginationProps): UsePaginationReturn {\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2\n  const showRightEllipsis =\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2\n\n  function calculatePaginationRange(): number[] {\n    if (totalPages <= paginationItemsToDisplay) {\n      return Array.from({ length: totalPages }, (_, i) => i + 1)\n    }\n\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2)\n    const initialRange = {\n      start: currentPage - halfDisplay,\n      end: currentPage + halfDisplay,\n    }\n\n    const adjustedRange = {\n      start: Math.max(1, initialRange.start),\n      end: Math.min(totalPages, initialRange.end),\n    }\n\n    if (adjustedRange.start === 1) {\n      adjustedRange.end = paginationItemsToDisplay\n    }\n    if (adjustedRange.end === totalPages) {\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1\n    }\n\n    if (showLeftEllipsis) adjustedRange.start++\n    if (showRightEllipsis) adjustedRange.end--\n\n    return Array.from(\n      { length: adjustedRange.end - adjustedRange.start + 1 },\n      (_, i) => adjustedRange.start + i\n    )\n  }\n\n  const pages = calculatePaginationRange()\n\n  return {\n    pages,\n    showLeftEllipsis,\n    showRightEllipsis,\n  }\n}\n",
+      "type": "registry:hook"
+    }
+  ]
+}

package/public/r/use-slider-with-input.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-slider-with-input",
+  "type": "registry:hook",
+  "files": [
+    {
+      "path": "registry/default/hooks/use-slider-with-input.ts",
+      "content": "\"use client\"\n\nimport { useCallback, useState } from \"react\"\n\ntype UseSliderWithInputProps = {\n  minValue?: number\n  maxValue?: number\n  initialValue?: number[]\n  defaultValue?: number[]\n}\n\nexport function useSliderWithInput({\n  minValue = 0,\n  maxValue = 100,\n  initialValue = [minValue],\n  defaultValue = [minValue],\n}: UseSliderWithInputProps) {\n  const [sliderValue, setSliderValue] = useState(initialValue)\n  const [inputValues, setInputValues] = useState(\n    initialValue.map((v) => v.toString())\n  )\n\n  const showReset =\n    sliderValue.length === defaultValue.length &&\n    !sliderValue.every((value, index) => value === defaultValue[index])\n\n  const validateAndUpdateValue = useCallback(\n    (rawValue: string, index: number) => {\n      if (rawValue === \"\" || rawValue === \"-\") {\n        const newInputValues = [...inputValues]\n        newInputValues[index] = \"0\"\n        setInputValues(newInputValues)\n\n        const newSliderValues = [...sliderValue]\n        newSliderValues[index] = 0\n        setSliderValue(newSliderValues)\n        return\n      }\n\n      const numValue = parseFloat(rawValue)\n\n      if (isNaN(numValue)) {\n        const newInputValues = [...inputValues]\n        newInputValues[index] = sliderValue[index]!.toString()\n        setInputValues(newInputValues)\n        return\n      }\n\n      let clampedValue = Math.min(maxValue, Math.max(minValue, numValue))\n\n      if (sliderValue.length > 1) {\n        if (index === 0) {\n          clampedValue = Math.min(clampedValue, sliderValue[1]!)\n        } else {\n          clampedValue = Math.max(clampedValue, sliderValue[0]!)\n        }\n      }\n\n      const newSliderValues = [...sliderValue]\n      newSliderValues[index] = clampedValue\n      setSliderValue(newSliderValues)\n\n      const newInputValues = [...inputValues]\n      newInputValues[index] = clampedValue.toString()\n      setInputValues(newInputValues)\n    },\n    [sliderValue, inputValues, minValue, maxValue]\n  )\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\n      const newValue = e.target.value\n      if (newValue === \"\" || /^-?\\d*\\.?\\d*$/.test(newValue)) {\n        const newInputValues = [...inputValues]\n        newInputValues[index] = newValue\n        setInputValues(newInputValues)\n      }\n    },\n    [inputValues]\n  )\n\n  const handleSliderChange = useCallback((newValue: number[]) => {\n    setSliderValue(newValue)\n    setInputValues(newValue.map((v) => v.toString()))\n  }, [])\n\n  const resetToDefault = useCallback(() => {\n    setSliderValue(defaultValue)\n    setInputValues(defaultValue.map((v) => v.toString()))\n  }, [defaultValue])\n\n  return {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n    resetToDefault,\n    showReset,\n  }\n}\n",
+      "type": "registry:hook"
+    }
+  ]
+}

package/public/r/use-toast.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-toast",
+  "type": "registry:hook",
+  "files": [
+    {
+      "path": "registry/default/hooks/use-toast.ts",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/default/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionElement\n}\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"]\n      toast: ToasterToast\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"]\n      toast: Partial<ToasterToast>\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: \"REMOVE_TOAST\",\n      toastId: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      }\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      }\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      }\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        }\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      }\n  }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action)\n  listeners.forEach((listener) => {\n    listener(memoryState)\n  })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: \"UPDATE_TOAST\",\n      toast: { ...props, id },\n    })\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss()\n      },\n    },\n  })\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  }\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState)\n\n  React.useEffect(() => {\n    listeners.push(setState)\n    return () => {\n      const index = listeners.indexOf(setState)\n      if (index > -1) {\n        listeners.splice(index, 1)\n      }\n    }\n  }, [state])\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n  }\n}\n\nexport { toast, useToast }\n",
+      "type": "registry:hook"
+    }
+  ]
+}

package/public/r/utils.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "utils",
+  "type": "registry:lib",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "registry/default/lib/utils.ts",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib"
+    }
+  ]
+}