love-ui 1.2.12 → 1.2.14

package/public/r/stepper.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "stepper",
+  "type": "registry:ui",
+  "dependencies": [
+    "radix-ui"
+  ],
+  "files": [
+    {
+      "path": "registry/default/ui/stepper.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { createContext, useContext } from \"react\"\nimport { CheckIcon, LoaderCircleIcon } from \"lucide-react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\n\n// Types\ntype StepperContextValue = {\n  activeStep: number\n  setActiveStep: (step: number) => void\n  orientation: \"horizontal\" | \"vertical\"\n}\n\ntype StepItemContextValue = {\n  step: number\n  state: StepState\n  isDisabled: boolean\n  isLoading: boolean\n}\n\ntype StepState = \"active\" | \"completed\" | \"inactive\" | \"loading\"\n\n// Contexts\nconst StepperContext = createContext<StepperContextValue | undefined>(undefined)\nconst StepItemContext = createContext<StepItemContextValue | undefined>(\n  undefined\n)\n\nconst useStepper = () => {\n  const context = useContext(StepperContext)\n  if (!context) {\n    throw new Error(\"useStepper must be used within a Stepper\")\n  }\n  return context\n}\n\nconst useStepItem = () => {\n  const context = useContext(StepItemContext)\n  if (!context) {\n    throw new Error(\"useStepItem must be used within a StepperItem\")\n  }\n  return context\n}\n\n// Components\ninterface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  defaultValue?: number\n  value?: number\n  onValueChange?: (value: number) => void\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nfunction Stepper({\n  defaultValue = 0,\n  value,\n  onValueChange,\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: StepperProps) {\n  const [activeStep, setInternalStep] = React.useState(defaultValue)\n\n  const setActiveStep = React.useCallback(\n    (step: number) => {\n      if (value === undefined) {\n        setInternalStep(step)\n      }\n      onValueChange?.(step)\n    },\n    [value, onValueChange]\n  )\n\n  const currentStep = value ?? activeStep\n\n  return (\n    <StepperContext.Provider\n      value={{\n        activeStep: currentStep,\n        setActiveStep,\n        orientation,\n      }}\n    >\n      <div\n        data-slot=\"stepper\"\n        className={cn(\n          \"group/stepper inline-flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col\",\n          className\n        )}\n        data-orientation={orientation}\n        {...props}\n      />\n    </StepperContext.Provider>\n  )\n}\n\n// StepperItem\ninterface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  step: number\n  completed?: boolean\n  disabled?: boolean\n  loading?: boolean\n}\n\nfunction StepperItem({\n  step,\n  completed = false,\n  disabled = false,\n  loading = false,\n  className,\n  children,\n  ...props\n}: StepperItemProps) {\n  const { activeStep } = useStepper()\n\n  const state: StepState =\n    completed || step < activeStep\n      ? \"completed\"\n      : activeStep === step\n        ? \"active\"\n        : \"inactive\"\n\n  const isLoading = loading && step === activeStep\n\n  return (\n    <StepItemContext.Provider\n      value={{ step, state, isDisabled: disabled, isLoading }}\n    >\n      <div\n        data-slot=\"stepper-item\"\n        className={cn(\n          \"group/step flex items-center group-data-[orientation=horizontal]/stepper:flex-row group-data-[orientation=vertical]/stepper:flex-col\",\n          className\n        )}\n        data-state={state}\n        {...(isLoading ? { \"data-loading\": true } : {})}\n        {...props}\n      >\n        {children}\n      </div>\n    </StepItemContext.Provider>\n  )\n}\n\n// StepperTrigger\ninterface StepperTriggerProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n}\n\nfunction StepperTrigger({\n  asChild = false,\n  className,\n  children,\n  ...props\n}: StepperTriggerProps) {\n  const { setActiveStep } = useStepper()\n  const { step, isDisabled } = useStepItem()\n\n  if (asChild) {\n    const Comp = asChild ? Slot.Root : \"span\"\n    return (\n      <Comp data-slot=\"stepper-trigger\" className={className}>\n        {children}\n      </Comp>\n    )\n  }\n\n  return (\n    <button\n      data-slot=\"stepper-trigger\"\n      className={cn(\n        \"inline-flex items-center gap-3 rounded-full outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50\",\n        className\n      )}\n      onClick={() => setActiveStep(step)}\n      disabled={isDisabled}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n}\n\n// StepperIndicator\ninterface StepperIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\nfunction StepperIndicator({\n  asChild = false,\n  className,\n  children,\n  ...props\n}: StepperIndicatorProps) {\n  const { state, step, isLoading } = useStepItem()\n\n  return (\n    <span\n      data-slot=\"stepper-indicator\"\n      className={cn(\n        \"relative flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground\",\n        className\n      )}\n      data-state={state}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          <span className=\"transition-all group-data-loading/step:scale-0 group-data-loading/step:opacity-0 group-data-loading/step:transition-none group-data-[state=completed]/step:scale-0 group-data-[state=completed]/step:opacity-0\">\n            {step}\n          </span>\n          <CheckIcon\n            className=\"absolute scale-0 opacity-0 transition-all group-data-[state=completed]/step:scale-100 group-data-[state=completed]/step:opacity-100\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          {isLoading && (\n            <span className=\"absolute transition-all\">\n              <LoaderCircleIcon\n                className=\"animate-spin\"\n                size={14}\n                aria-hidden=\"true\"\n              />\n            </span>\n          )}\n        </>\n      )}\n    </span>\n  )\n}\n\n// StepperTitle\nfunction StepperTitle({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLHeadingElement>) {\n  return (\n    <h3\n      data-slot=\"stepper-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\n// StepperDescription\nfunction StepperDescription({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) {\n  return (\n    <p\n      data-slot=\"stepper-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n// StepperSeparator\nfunction StepperSeparator({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot=\"stepper-separator\"\n      className={cn(\n        \"m-0.5 bg-muted group-data-[orientation=horizontal]/stepper:h-0.5 group-data-[orientation=horizontal]/stepper:w-full group-data-[orientation=horizontal]/stepper:flex-1 group-data-[orientation=vertical]/stepper:h-12 group-data-[orientation=vertical]/stepper:w-0.5 group-data-[state=completed]/step:bg-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Stepper,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/public/r/stories-images.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/stories-images.tsx",
-      "content": "\"use client\"\n\nimport {\n  Stories,\n  StoriesContent,\n  Story,\n  StoryAuthor,\n  StoryAuthorImage,\n  StoryAuthorName,\n  StoryImage,\n  StoryOverlay,\n  StoryTitle,\n} from \"../../../../../packages/stories\"\n\nconst stories = [\n  {\n    id: 1,\n    author: \"Connor\",\n    avatar:\n      \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop&crop=face\",\n    fallback: \"CL\",\n    preview:\n      \"https://images.unsplash.com/photo-1753731683731-1032f9457b02?w=1636&fit=crop\",\n    title: \"Mountain Adventure\",\n  },\n  {\n    id: 2,\n    author: \"Thomas\",\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108755-2616b612b786?w=40&h=40&fit=crop&crop=face\",\n    fallback: \"MO\",\n    preview:\n      \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=533&fit=crop\",\n    title: \"Ocean Waves\",\n  },\n  {\n    id: 3,\n    author: \"Nathan\",\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop&crop=face\",\n    fallback: \"N\",\n    preview:\n      \"https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=300&h=533&fit=crop\",\n    title: \"Forest Trail\",\n  },\n  {\n    id: 4,\n    author: \"Tyler\",\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&h=40&fit=crop&crop=face\",\n    fallback: \"TY\",\n    preview:\n      \"https://images.unsplash.com/photo-1541336032412-2048a678540d?w=300&h=533&fit=crop\",\n    title: \"City Lights\",\n  },\n  {\n    id: 5,\n    author: \"Owen\",\n    avatar:\n      \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&h=40&fit=crop&crop=face\",\n    fallback: \"OW\",\n    preview:\n      \"https://images.unsplash.com/photo-1509316785289-025f5b846b35?w=300&fit=crop\",\n    title: \"Desert Road\",\n  },\n]\n\nconst Example = () => (\n  <Stories>\n    <StoriesContent>\n      {stories.map((story) => (\n        <Story className=\"aspect-[3/4] w-[200px]\" key={story.id}>\n          <StoryImage alt={story.title} src={story.preview} />\n          <StoryOverlay side=\"top\" />\n          <StoryOverlay side=\"bottom\" />\n          <StoryTitle className=\"truncate text-sm font-medium\">\n            {story.title}\n          </StoryTitle>\n          <StoryAuthor>\n            <StoryAuthorImage\n              fallback={story.fallback}\n              name={story.author}\n              src={story.avatar}\n            />\n            <StoryAuthorName>{story.author}</StoryAuthorName>\n          </StoryAuthor>\n        </Story>\n      ))}\n    </StoriesContent>\n  </Stories>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  Stories,\n  StoriesContent,\n  Story,\n  StoryAuthor,\n  StoryAuthorImage,\n  StoryAuthorName,\n  StoryImage,\n  StoryOverlay,\n  StoryTitle,\n} from \"../../../../../packages/stories\"\n\nconst stories = [\n  {\n    id: 1,\n    author: \"Connor\",\n    avatar:\n      \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop&crop=face\",\n    fallback: \"CL\",\n    preview:\n      \"https://images.unsplash.com/photo-1753731683731-1032f9457b02?w=1636&fit=crop\",\n    title: \"Updated Mountain Adventure\",\n  },\n  {\n    id: 2,\n    author: \"Thomas\",\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108755-2616b612b786?w=40&h=40&fit=crop&crop=face\",\n    fallback: \"MO\",\n    preview:\n      \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=533&fit=crop\",\n    title: \"Updated Ocean Waves\",\n  },\n  {\n    id: 3,\n    author: \"Nathan\",\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop&crop=face\",\n    fallback: \"N\",\n    preview:\n      \"https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=300&h=533&fit=crop\",\n    title: \"Updated Forest Trail\",\n  },\n  {\n    id: 4,\n    author: \"Tyler\",\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&h=40&fit=crop&crop=face\",\n    fallback: \"TY\",\n    preview:\n      \"https://images.unsplash.com/photo-1541336032412-2048a678540d?w=300&h=533&fit=crop\",\n    title: \"Updated City Lights\",\n  },\n  {\n    id: 5,\n    author: \"Owen\",\n    avatar:\n      \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&h=40&fit=crop&crop=face\",\n    fallback: \"OW\",\n    preview:\n      \"https://images.unsplash.com/photo-1509316785289-025f5b846b35?w=300&fit=crop\",\n    title: \"Updated Desert Road\",\n  },\n]\n\nconst Example = () => (\n  <Stories>\n    <StoriesContent>\n      {stories.map((story) => (\n        <Story className=\"aspect-[3/4] w-[200px]\" key={story.id}>\n          <StoryImage alt={story.title} src={story.preview} />\n          <StoryOverlay side=\"top\" />\n          <StoryOverlay side=\"bottom\" />\n          <StoryTitle className=\"truncate text-sm font-medium\">\n            {story.title}\n          </StoryTitle>\n          <StoryAuthor>\n            <StoryAuthorImage\n              fallback={story.fallback}\n              name={story.author}\n              src={story.avatar}\n            />\n            <StoryAuthorName>{story.author}</StoryAuthorName>\n          </StoryAuthor>\n        </Story>\n      ))}\n    </StoriesContent>\n  </Stories>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/switch-card.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/switch-card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function SwitchCardDemo() {\n  const id = React.useId()\n\n  return (\n    <Label\n      htmlFor={id}\n      className=\"flex items-center gap-6 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\"\n    >\n      <div className=\"flex flex-col gap-1\">\n        <p className=\"text-sm leading-4\">Enable notifications</p>\n        <p className=\"text-xs text-muted-foreground\">\n          You can enable or disable notifications at any time.\n        </p>\n      </div>\n      <Switch id={id} defaultChecked />\n    </Label>\n  )\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function SwitchCardDemo() {\n  const id = React.useId()\n\n  return (\n    <Label\n      htmlFor={id}\n      className=\"flex items-center gap-6 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\"\n    >\n      <div className=\"flex flex-col gap-1\">\n        <p className=\"text-sm leading-4\">Updated Enable notifications</p>\n        <p className=\"text-xs text-muted-foreground\">\n          Updated You can enable or disable notifications at any time.\n        </p>\n      </div>\n      <Switch id={id} defaultChecked />\n    </Label>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/switch-demo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/switch-demo.tsx",
-      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function SwitchWithLabel() {\n  return (\n    <Label>\n      <Switch />\n      Marketing emails\n    </Label>\n  )\n}\n",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function SwitchWithLabel() {\n  return (\n    <Label>\n      <Switch />\n      Updated Marketing emails\n    </Label>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/switch-disabled.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/switch-disabled.tsx",
-      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function SwitchWithLabel() {\n  return (\n    <Label>\n      <Switch disabled />\n      Marketing emails\n    </Label>\n  )\n}\n",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function SwitchWithLabel() {\n  return (\n    <Label>\n      <Switch disabled />\n      Updated Marketing emails\n    </Label>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/switch-form.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/examples/switch-form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function SwitchFormDemo() {\n  const [loading, setLoading] = React.useState(false)\n\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    console.log(formData.get(\"marketing\"))\n\n    const enabled = formData.get(\"marketing\")\n    alert(`Marketing emails: ${enabled}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"w-auto\">\n      <Field name=\"marketing\">\n        <FieldLabel>\n          <Switch name=\"marketing\" defaultChecked disabled={loading} />\n          Enable marketing emails\n        </FieldLabel>\n      </Field>\n      <Button type=\"submit\" disabled={loading}>\n        Submit\n      </Button>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function SwitchFormDemo() {\n  const [loading, setLoading] = React.useState(false)\n\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    console.log(formData.get(\"marketing\"))\n\n    const enabled = formData.get(\"marketing\")\n    alert(`Marketing emails: ${enabled}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"w-auto\">\n      <Field name=\"marketing\">\n        <FieldLabel>\n          <Switch name=\"marketing\" defaultChecked disabled={loading} />\n          Updated Enable marketing emails\n        </FieldLabel>\n      </Field>\n      <Button type=\"submit\" disabled={loading}>\n        Updated Submit\n      </Button>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/switch-with-description.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/switch-with-description.tsx",
-      "content": "import * as React from \"react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function SwitchWithDescriptionDemo() {\n  const id = React.useId()\n\n  return (\n    <div className=\"flex items-start gap-2\">\n      <Switch id={id} defaultChecked />\n      <div className=\"flex flex-col gap-1\">\n        <Label htmlFor={id}>Marketing emails</Label>\n        <p className=\"text-xs text-muted-foreground\">\n          By enabling marketing emails, you agree to receive emails.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport default function SwitchWithDescriptionDemo() {\n  const id = React.useId()\n\n  return (\n    <div className=\"flex items-start gap-2\">\n      <Switch id={id} defaultChecked />\n      <div className=\"flex flex-col gap-1\">\n        <Label htmlFor={id}>Updated Marketing emails</Label>\n        <p className=\"text-xs text-muted-foreground\">\n          Updated By enabling marketing emails, you agree to receive emails.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/table-demo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/table-demo.tsx",
-      "content": "import { Badge } from \"@/registry/default/ui/badge\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nexport default function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>A list of current projects.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead>Project</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Team</TableHead>\n          <TableHead className=\"text-right\">Budget</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        <TableRow>\n          <TableCell className=\"font-medium\">Website Redesign</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                className=\"size-1.5 rounded-full bg-emerald-500\"\n                aria-hidden=\"true\"\n              />\n              Paid\n            </Badge>\n          </TableCell>\n          <TableCell>Frontend Team</TableCell>\n          <TableCell className=\"text-right\">$12,500</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">Mobile App</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                className=\"size-1.5 rounded-full bg-muted-foreground/64\"\n                aria-hidden=\"true\"\n              />\n              Unpaid\n            </Badge>\n          </TableCell>\n          <TableCell>Mobile Team</TableCell>\n          <TableCell className=\"text-right\">$8,750</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">API Integration</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                className=\"size-1.5 rounded-full bg-amber-500\"\n                aria-hidden=\"true\"\n              />\n              Pending\n            </Badge>\n          </TableCell>\n          <TableCell>Backend Team</TableCell>\n          <TableCell className=\"text-right\">$5,200</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">Database Migration</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                className=\"size-1.5 rounded-full bg-emerald-500\"\n                aria-hidden=\"true\"\n              />\n              Paid\n            </Badge>\n          </TableCell>\n          <TableCell>DevOps Team</TableCell>\n          <TableCell className=\"text-right\">$3,800</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">User Dashboard</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                className=\"size-1.5 rounded-full bg-emerald-500\"\n                aria-hidden=\"true\"\n              />\n              Paid\n            </Badge>\n          </TableCell>\n          <TableCell>UX Team</TableCell>\n          <TableCell className=\"text-right\">$7,200</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">Security Audit</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                className=\"size-1.5 rounded-full bg-red-500\"\n                aria-hidden=\"true\"\n              />\n              Failed\n            </Badge>\n          </TableCell>\n          <TableCell>Security Team</TableCell>\n          <TableCell className=\"text-right\">$2,100</TableCell>\n        </TableRow>\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total Budget</TableCell>\n          <TableCell className=\"text-right font-medium\">$39,550</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nexport default function TableDemo() {\n  return (\n    <Table>\n      <TableCaption>Updated A list of current projects.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead>Updated Project</TableHead>\n          <TableHead>Updated Status</TableHead>\n          <TableHead>Updated Team</TableHead>\n          <TableHead className=\"text-right\">Updated Budget</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        <TableRow>\n          <TableCell className=\"font-medium\">\n            Updated Website Redesign\n          </TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                className=\"size-1.5 rounded-full bg-emerald-500\"\n                aria-hidden=\"true\"\n              />\n              Updated Paid\n            </Badge>\n          </TableCell>\n          <TableCell>Updated Frontend Team</TableCell>\n          <TableCell className=\"text-right\">$12,500</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">Updated Mobile App</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                className=\"size-1.5 rounded-full bg-muted-foreground/64\"\n                aria-hidden=\"true\"\n              />\n              Updated Unpaid\n            </Badge>\n          </TableCell>\n          <TableCell>Updated Mobile Team</TableCell>\n          <TableCell className=\"text-right\">$8,750</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">Updated API Integration</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                className=\"size-1.5 rounded-full bg-amber-500\"\n                aria-hidden=\"true\"\n              />\n              Updated Pending\n            </Badge>\n          </TableCell>\n          <TableCell>Updated Backend Team</TableCell>\n          <TableCell className=\"text-right\">$5,200</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">\n            Updated Database Migration\n          </TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                className=\"size-1.5 rounded-full bg-emerald-500\"\n                aria-hidden=\"true\"\n              />\n              Updated Paid\n            </Badge>\n          </TableCell>\n          <TableCell>Updated DevOps Team</TableCell>\n          <TableCell className=\"text-right\">$3,800</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">Updated User Dashboard</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                className=\"size-1.5 rounded-full bg-emerald-500\"\n                aria-hidden=\"true\"\n              />\n              Updated Paid\n            </Badge>\n          </TableCell>\n          <TableCell>Updated UX Team</TableCell>\n          <TableCell className=\"text-right\">$7,200</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">Updated Security Audit</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                className=\"size-1.5 rounded-full bg-red-500\"\n                aria-hidden=\"true\"\n              />\n              Updated Failed\n            </Badge>\n          </TableCell>\n          <TableCell>Updated Security Team</TableCell>\n          <TableCell className=\"text-right\">$2,100</TableCell>\n        </TableRow>\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Updated Total Budget</TableCell>\n          <TableCell className=\"text-right font-medium\">$39,550</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/table-framed.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/table-framed.tsx",
-      "content": "import { Badge } from \"@/registry/default/ui/badge\"\nimport { Frame, FramePanel } from \"@/registry/default/ui/frame\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nexport default function TableFramed() {\n  return (\n    <Frame className=\"w-full\">\n      <FramePanel>\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Project</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead>Team</TableHead>\n              <TableHead className=\"text-right\">Budget</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow>\n              <TableCell className=\"font-medium\">Website Redesign</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-emerald-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Paid\n                </Badge>\n              </TableCell>\n              <TableCell>Frontend Team</TableCell>\n              <TableCell className=\"text-right\">$12,500</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">Mobile App</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-muted-foreground/64\"\n                    aria-hidden=\"true\"\n                  />\n                  Unpaid\n                </Badge>\n              </TableCell>\n              <TableCell>Mobile Team</TableCell>\n              <TableCell className=\"text-right\">$8,750</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">API Integration</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-amber-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Pending\n                </Badge>\n              </TableCell>\n              <TableCell>Backend Team</TableCell>\n              <TableCell className=\"text-right\">$5,200</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">Database Migration</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-emerald-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Paid\n                </Badge>\n              </TableCell>\n              <TableCell>DevOps Team</TableCell>\n              <TableCell className=\"text-right\">$3,800</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">User Dashboard</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-emerald-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Paid\n                </Badge>\n              </TableCell>\n              <TableCell>UX Team</TableCell>\n              <TableCell className=\"text-right\">$7,200</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">Security Audit</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-red-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Failed\n                </Badge>\n              </TableCell>\n              <TableCell>Security Team</TableCell>\n              <TableCell className=\"text-right\">$2,100</TableCell>\n            </TableRow>\n          </TableBody>\n          <TableFooter>\n            <TableRow>\n              <TableCell colSpan={3}>Total Budget</TableCell>\n              <TableCell className=\"text-right font-medium\">$39,550</TableCell>\n            </TableRow>\n          </TableFooter>\n        </Table>\n      </FramePanel>\n    </Frame>\n  )\n}\n",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\nimport { Frame, FramePanel } from \"@/registry/default/ui/frame\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nexport default function TableFramed() {\n  return (\n    <Frame className=\"w-full\">\n      <FramePanel>\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Updated Project</TableHead>\n              <TableHead>Updated Status</TableHead>\n              <TableHead>Updated Team</TableHead>\n              <TableHead className=\"text-right\">Updated Budget</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow>\n              <TableCell className=\"font-medium\">\n                Updated Website Redesign\n              </TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-emerald-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Updated Paid\n                </Badge>\n              </TableCell>\n              <TableCell>Updated Frontend Team</TableCell>\n              <TableCell className=\"text-right\">$12,500</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">Updated Mobile App</TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-muted-foreground/64\"\n                    aria-hidden=\"true\"\n                  />\n                  Updated Unpaid\n                </Badge>\n              </TableCell>\n              <TableCell>Updated Mobile Team</TableCell>\n              <TableCell className=\"text-right\">$8,750</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">\n                Updated API Integration\n              </TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-amber-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Updated Pending\n                </Badge>\n              </TableCell>\n              <TableCell>Updated Backend Team</TableCell>\n              <TableCell className=\"text-right\">$5,200</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">\n                Updated Database Migration\n              </TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-emerald-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Updated Paid\n                </Badge>\n              </TableCell>\n              <TableCell>Updated DevOps Team</TableCell>\n              <TableCell className=\"text-right\">$3,800</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">\n                Updated User Dashboard\n              </TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-emerald-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Updated Paid\n                </Badge>\n              </TableCell>\n              <TableCell>Updated UX Team</TableCell>\n              <TableCell className=\"text-right\">$7,200</TableCell>\n            </TableRow>\n            <TableRow>\n              <TableCell className=\"font-medium\">\n                Updated Security Audit\n              </TableCell>\n              <TableCell>\n                <Badge variant=\"outline\">\n                  <span\n                    className=\"size-1.5 rounded-full bg-red-500\"\n                    aria-hidden=\"true\"\n                  />\n                  Updated Failed\n                </Badge>\n              </TableCell>\n              <TableCell>Updated Security Team</TableCell>\n              <TableCell className=\"text-right\">$2,100</TableCell>\n            </TableRow>\n          </TableBody>\n          <TableFooter>\n            <TableRow>\n              <TableCell colSpan={3}>Updated Total Budget</TableCell>\n              <TableCell className=\"text-right font-medium\">$39,550</TableCell>\n            </TableRow>\n          </TableFooter>\n        </Table>\n      </FramePanel>\n    </Frame>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/table-simple.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/table-simple.tsx",
-      "content": "\"use client\"\n\nimport { faker } from \"@faker-js/faker\"\n\nimport type { ColumnDef } from \"../../../../../packages/table\"\nimport {\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableHead,\n  TableHeader,\n  TableHeaderGroup,\n  TableProvider,\n  TableRow,\n} from \"../../../../../packages/table\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Planned\", color: \"#6B7280\" },\n  { id: faker.string.uuid(), name: \"In Progress\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Done\", color: \"#10B981\" },\n]\n\nconst users = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\nconst exampleProducts = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleInitiatives = Array.from({ length: 2 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleReleases = Array.from({ length: 3 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleFeatures = Array.from({ length: 20 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),\n    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),\n    status: faker.helpers.arrayElement(statuses),\n    owner: faker.helpers.arrayElement(users),\n    product: faker.helpers.arrayElement(exampleProducts),\n    initiative: faker.helpers.arrayElement(exampleInitiatives),\n    release: faker.helpers.arrayElement(exampleReleases),\n  }))\n\nconst Example = () => {\n  const columns: ColumnDef<(typeof exampleFeatures)[number]>[] = [\n    {\n      accessorKey: \"name\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Name\" />\n      ),\n    },\n    {\n      accessorKey: \"status\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Status\" />\n      ),\n      cell: ({ row }) => row.original.status.name,\n    },\n    {\n      accessorKey: \"product\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Product\" />\n      ),\n      cell: ({ row }) => row.original.product.name,\n    },\n    {\n      accessorKey: \"startAt\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Start At\" />\n      ),\n      cell: ({ row }) =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"medium\",\n        }).format(row.original.startAt),\n    },\n    {\n      accessorKey: \"endAt\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"End At\" />\n      ),\n      cell: ({ row }) =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"medium\",\n        }).format(row.original.endAt),\n    },\n    {\n      id: \"release\",\n      accessorFn: (row) => row.release.id,\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Release\" />\n      ),\n      cell: ({ row }) => row.original.release.name,\n    },\n  ]\n\n  return (\n    <TableProvider columns={columns} data={exampleFeatures}>\n      <TableHeader>\n        {({ headerGroup }) => (\n          <TableHeaderGroup headerGroup={headerGroup} key={headerGroup.id}>\n            {({ header }) => <TableHead header={header} key={header.id} />}\n          </TableHeaderGroup>\n        )}\n      </TableHeader>\n      <TableBody>\n        {({ row }) => (\n          <TableRow key={row.id} row={row}>\n            {({ cell }) => <TableCell cell={cell} key={cell.id} />}\n          </TableRow>\n        )}\n      </TableBody>\n    </TableProvider>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { faker } from \"@faker-js/faker\"\n\nimport type { ColumnDef } from \"../../../../../packages/table\"\nimport {\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableHead,\n  TableHeader,\n  TableHeaderGroup,\n  TableProvider,\n  TableRow,\n} from \"../../../../../packages/table\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Updated Planned\", color: \"#6B7280\" },\n  { id: faker.string.uuid(), name: \"Updated In Progress\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Updated Done\", color: \"#10B981\" },\n]\n\nconst users = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\nconst exampleProducts = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleInitiatives = Array.from({ length: 2 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleReleases = Array.from({ length: 3 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleFeatures = Array.from({ length: 20 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),\n    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),\n    status: faker.helpers.arrayElement(statuses),\n    owner: faker.helpers.arrayElement(users),\n    product: faker.helpers.arrayElement(exampleProducts),\n    initiative: faker.helpers.arrayElement(exampleInitiatives),\n    release: faker.helpers.arrayElement(exampleReleases),\n  }))\n\nconst Example = () => {\n  const columns: ColumnDef<(typeof exampleFeatures)[number]>[] = [\n    {\n      accessorKey: \"name\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated Name\" />\n      ),\n    },\n    {\n      accessorKey: \"status\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated Status\" />\n      ),\n      cell: ({ row }) => row.original.status.name,\n    },\n    {\n      accessorKey: \"product\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated Product\" />\n      ),\n      cell: ({ row }) => row.original.product.name,\n    },\n    {\n      accessorKey: \"startAt\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated Start At\" />\n      ),\n      cell: ({ row }) =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"medium\",\n        }).format(row.original.startAt),\n    },\n    {\n      accessorKey: \"endAt\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated End At\" />\n      ),\n      cell: ({ row }) =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"medium\",\n        }).format(row.original.endAt),\n    },\n    {\n      id: \"release\",\n      accessorFn: (row) => row.release.id,\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated Release\" />\n      ),\n      cell: ({ row }) => row.original.release.name,\n    },\n  ]\n\n  return (\n    <TableProvider columns={columns} data={exampleFeatures}>\n      <TableHeader>\n        {({ headerGroup }) => (\n          <TableHeaderGroup headerGroup={headerGroup} key={headerGroup.id}>\n            {({ header }) => <TableHead header={header} key={header.id} />}\n          </TableHeaderGroup>\n        )}\n      </TableHeader>\n      <TableBody>\n        {({ row }) => (\n          <TableRow key={row.id} row={row}>\n            {({ cell }) => <TableCell cell={cell} key={cell.id} />}\n          </TableRow>\n        )}\n      </TableBody>\n    </TableProvider>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/table.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/table.tsx",
-      "content": "\"use client\"\n\nimport { faker } from \"@faker-js/faker\"\nimport { ChevronRightIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default//ui/avatar\"\n\nimport type { ColumnDef } from \"../../../../../packages/table\"\nimport {\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableHead,\n  TableHeader,\n  TableHeaderGroup,\n  TableProvider,\n  TableRow,\n} from \"../../../../../packages/table\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Planned\", color: \"#6B7280\" },\n  { id: faker.string.uuid(), name: \"In Progress\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Done\", color: \"#10B981\" },\n]\n\nconst users = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\nconst exampleGroups = Array.from({ length: 6 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleProducts = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleInitiatives = Array.from({ length: 2 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleReleases = Array.from({ length: 3 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleFeatures = Array.from({ length: 20 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),\n    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),\n    status: faker.helpers.arrayElement(statuses),\n    owner: faker.helpers.arrayElement(users),\n    group: faker.helpers.arrayElement(exampleGroups),\n    product: faker.helpers.arrayElement(exampleProducts),\n    initiative: faker.helpers.arrayElement(exampleInitiatives),\n    release: faker.helpers.arrayElement(exampleReleases),\n  }))\n\nconst Example = () => {\n  const columns: ColumnDef<(typeof exampleFeatures)[number]>[] = [\n    {\n      accessorKey: \"name\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Name\" />\n      ),\n      cell: ({ row }) => (\n        <div className=\"flex items-center gap-2\">\n          <div className=\"relative\">\n            <Avatar className=\"size-6\">\n              <AvatarImage src={row.original.owner.image} />\n              <AvatarFallback>\n                {row.original.owner.name?.slice(0, 2)}\n              </AvatarFallback>\n            </Avatar>\n            <div\n              className=\"absolute right-0 bottom-0 h-2 w-2 rounded-full ring-2 ring-background\"\n              style={{\n                backgroundColor: row.original.status.color,\n              }}\n            />\n          </div>\n          <div>\n            <span className=\"font-medium\">{row.original.name}</span>\n            <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n              <span>{row.original.product.name}</span>\n              <ChevronRightIcon size={12} />\n              <span>{row.original.group.name}</span>\n            </div>\n          </div>\n        </div>\n      ),\n    },\n    {\n      accessorKey: \"startAt\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Start At\" />\n      ),\n      cell: ({ row }) =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"medium\",\n        }).format(row.original.startAt),\n    },\n    {\n      accessorKey: \"endAt\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"End At\" />\n      ),\n      cell: ({ row }) =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"medium\",\n        }).format(row.original.endAt),\n    },\n    {\n      id: \"release\",\n      accessorFn: (row) => row.release.id,\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Release\" />\n      ),\n      cell: ({ row }) => row.original.release.name,\n    },\n  ]\n\n  return (\n    <TableProvider columns={columns} data={exampleFeatures}>\n      <TableHeader>\n        {({ headerGroup }) => (\n          <TableHeaderGroup headerGroup={headerGroup} key={headerGroup.id}>\n            {({ header }) => <TableHead header={header} key={header.id} />}\n          </TableHeaderGroup>\n        )}\n      </TableHeader>\n      <TableBody>\n        {({ row }) => (\n          <TableRow key={row.id} row={row}>\n            {({ cell }) => <TableCell cell={cell} key={cell.id} />}\n          </TableRow>\n        )}\n      </TableBody>\n    </TableProvider>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { faker } from \"@faker-js/faker\"\nimport { ChevronRightIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default//ui/avatar\"\n\nimport type { ColumnDef } from \"../../../../../packages/table\"\nimport {\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableHead,\n  TableHeader,\n  TableHeaderGroup,\n  TableProvider,\n  TableRow,\n} from \"../../../../../packages/table\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Updated Planned\", color: \"#6B7280\" },\n  { id: faker.string.uuid(), name: \"Updated In Progress\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Updated Done\", color: \"#10B981\" },\n]\n\nconst users = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\nconst exampleGroups = Array.from({ length: 6 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleProducts = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleInitiatives = Array.from({ length: 2 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleReleases = Array.from({ length: 3 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleFeatures = Array.from({ length: 20 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),\n    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),\n    status: faker.helpers.arrayElement(statuses),\n    owner: faker.helpers.arrayElement(users),\n    group: faker.helpers.arrayElement(exampleGroups),\n    product: faker.helpers.arrayElement(exampleProducts),\n    initiative: faker.helpers.arrayElement(exampleInitiatives),\n    release: faker.helpers.arrayElement(exampleReleases),\n  }))\n\nconst Example = () => {\n  const columns: ColumnDef<(typeof exampleFeatures)[number]>[] = [\n    {\n      accessorKey: \"name\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated Name\" />\n      ),\n      cell: ({ row }) => (\n        <div className=\"flex items-center gap-2\">\n          <div className=\"relative\">\n            <Avatar className=\"size-6\">\n              <AvatarImage src={row.original.owner.image} />\n              <AvatarFallback>\n                {row.original.owner.name?.slice(0, 2)}\n              </AvatarFallback>\n            </Avatar>\n            <div\n              className=\"absolute right-0 bottom-0 h-2 w-2 rounded-full ring-2 ring-background\"\n              style={{\n                backgroundColor: row.original.status.color,\n              }}\n            />\n          </div>\n          <div>\n            <span className=\"font-medium\">{row.original.name}</span>\n            <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n              <span>{row.original.product.name}</span>\n              <ChevronRightIcon size={12} />\n              <span>{row.original.group.name}</span>\n            </div>\n          </div>\n        </div>\n      ),\n    },\n    {\n      accessorKey: \"startAt\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated Start At\" />\n      ),\n      cell: ({ row }) =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"medium\",\n        }).format(row.original.startAt),\n    },\n    {\n      accessorKey: \"endAt\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated End At\" />\n      ),\n      cell: ({ row }) =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"medium\",\n        }).format(row.original.endAt),\n    },\n    {\n      id: \"release\",\n      accessorFn: (row) => row.release.id,\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated Release\" />\n      ),\n      cell: ({ row }) => row.original.release.name,\n    },\n  ]\n\n  return (\n    <TableProvider columns={columns} data={exampleFeatures}>\n      <TableHeader>\n        {({ headerGroup }) => (\n          <TableHeaderGroup headerGroup={headerGroup} key={headerGroup.id}>\n            {({ header }) => <TableHead header={header} key={header.id} />}\n          </TableHeaderGroup>\n        )}\n      </TableHeader>\n      <TableBody>\n        {({ row }) => (\n          <TableRow key={row.id} row={row}>\n            {({ cell }) => <TableCell cell={cell} key={cell.id} />}\n          </TableRow>\n        )}\n      </TableBody>\n    </TableProvider>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/tabs-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/tabs-demo.tsx",
-      "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\"\n\nexport default function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <TabsList>\n        <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n        <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n        <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  )\n}\n",
+      "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\"\n\nexport default function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <TabsList>\n        <TabsTab value=\"tab-1\">Updated Tab 1</TabsTab>\n        <TabsTab value=\"tab-2\">Updated Tab 2</TabsTab>\n        <TabsTab value=\"tab-3\">Updated Tab 3</TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Updated Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Updated Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Updated Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/tabs-underline-vertical.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/tabs-underline-vertical.tsx",
-      "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\"\n\nexport default function TabsUnderlineVertical() {\n  return (\n    <Tabs\n      defaultValue=\"tab-1\"\n      orientation=\"vertical\"\n      className=\"w-full flex-row\"\n    >\n      <div className=\"border-s\">\n        <TabsList variant=\"underline\">\n          <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n          <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n          <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n        </TabsList>\n      </div>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  )\n}\n",
+      "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\"\n\nexport default function TabsUnderlineVertical() {\n  return (\n    <Tabs\n      defaultValue=\"tab-1\"\n      orientation=\"vertical\"\n      className=\"w-full flex-row\"\n    >\n      <div className=\"border-s\">\n        <TabsList variant=\"underline\">\n          <TabsTab value=\"tab-1\">Updated Tab 1</TabsTab>\n          <TabsTab value=\"tab-2\">Updated Tab 2</TabsTab>\n          <TabsTab value=\"tab-3\">Updated Tab 3</TabsTab>\n        </TabsList>\n      </div>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Updated Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Updated Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Updated Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/tabs-underline.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/tabs-underline.tsx",
-      "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\"\n\nexport default function TabsUnderline() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <div className=\"border-b\">\n        <TabsList variant=\"underline\">\n          <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n          <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n          <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n        </TabsList>\n      </div>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  )\n}\n",
+      "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\"\n\nexport default function TabsUnderline() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <div className=\"border-b\">\n        <TabsList variant=\"underline\">\n          <TabsTab value=\"tab-1\">Updated Tab 1</TabsTab>\n          <TabsTab value=\"tab-2\">Updated Tab 2</TabsTab>\n          <TabsTab value=\"tab-3\">Updated Tab 3</TabsTab>\n        </TabsList>\n      </div>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Updated Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Updated Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Updated Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/tabs-vertical.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/tabs-vertical.tsx",
-      "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\"\n\nexport default function TabsVertical() {\n  return (\n    <Tabs defaultValue=\"tab-1\" orientation=\"vertical\" className=\"w-full\">\n      <TabsList>\n        <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n        <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n        <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  )\n}\n",
+      "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\"\n\nexport default function TabsVertical() {\n  return (\n    <Tabs defaultValue=\"tab-1\" orientation=\"vertical\" className=\"w-full\">\n      <TabsList>\n        <TabsTab value=\"tab-1\">Updated Tab 1</TabsTab>\n        <TabsTab value=\"tab-2\">Updated Tab 2</TabsTab>\n        <TabsTab value=\"tab-3\">Updated Tab 3</TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Updated Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Updated Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-xs text-muted-foreground\">\n          Updated Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/tags-create.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/tags-create.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { CheckIcon, PlusIcon } from \"lucide-react\"\n\nimport {\n  Tags,\n  TagsContent,\n  TagsEmpty,\n  TagsGroup,\n  TagsInput,\n  TagsItem,\n  TagsList,\n  TagsTrigger,\n  TagsValue,\n} from \"../../../../../packages/tags\"\n\nconst defaultTags = [\n  { id: \"react\", label: \"React\" },\n  { id: \"typescript\", label: \"TypeScript\" },\n  { id: \"javascript\", label: \"JavaScript\" },\n  { id: \"nextjs\", label: \"Next.js\" },\n  { id: \"vuejs\", label: \"Vue.js\" },\n  { id: \"angular\", label: \"Angular\" },\n  { id: \"svelte\", label: \"Svelte\" },\n  { id: \"nodejs\", label: \"Node.js\" },\n  { id: \"python\", label: \"Python\" },\n  { id: \"ruby\", label: \"Ruby\" },\n  { id: \"java\", label: \"Java\" },\n  { id: \"csharp\", label: \"C#\" },\n  { id: \"php\", label: \"PHP\" },\n  { id: \"go\", label: \"Go\" },\n]\n\nconst Example = () => {\n  const [selected, setSelected] = useState<string[]>([])\n  const [newTag, setNewTag] = useState<string>(\"\")\n  const [tags, setTags] = useState<{ id: string; label: string }[]>(defaultTags)\n\n  const handleRemove = (value: string) => {\n    if (!selected.includes(value)) {\n      return\n    }\n\n    console.log(`removed: ${value}`)\n    setSelected((prev) => prev.filter((v) => v !== value))\n  }\n\n  const handleSelect = (value: string) => {\n    if (selected.includes(value)) {\n      handleRemove(value)\n      return\n    }\n\n    console.log(`selected: ${value}`)\n    setSelected((prev) => [...prev, value])\n  }\n\n  const handleCreateTag = () => {\n    console.log(`created: ${newTag}`)\n\n    setTags((prev) => [\n      ...prev,\n      {\n        id: newTag,\n        label: newTag,\n      },\n    ])\n    setSelected((prev) => [...prev, newTag])\n    setNewTag(\"\")\n  }\n\n  return (\n    <Tags className=\"max-w-[300px]\">\n      <TagsTrigger>\n        {selected.map((tag) => (\n          <TagsValue key={tag} onRemove={() => handleRemove(tag)}>\n            {tags.find((t) => t.id === tag)?.label}\n          </TagsValue>\n        ))}\n      </TagsTrigger>\n      <TagsContent>\n        <TagsInput onValueChange={setNewTag} placeholder=\"Search tag...\" />\n        <TagsList>\n          <TagsEmpty>\n            <button\n              className=\"mx-auto flex cursor-pointer items-center gap-2\"\n              onClick={handleCreateTag}\n              type=\"button\"\n            >\n              <PlusIcon className=\"text-muted-foreground\" size={14} />\n              Create new tag: {newTag}\n            </button>\n          </TagsEmpty>\n          <TagsGroup>\n            {tags.map((tag) => (\n              <TagsItem key={tag.id} onSelect={handleSelect} value={tag.id}>\n                {tag.label}\n                {selected.includes(tag.id) && (\n                  <CheckIcon className=\"text-muted-foreground\" size={14} />\n                )}\n              </TagsItem>\n            ))}\n          </TagsGroup>\n        </TagsList>\n      </TagsContent>\n    </Tags>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { CheckIcon, PlusIcon } from \"lucide-react\"\n\nimport {\n  Tags,\n  TagsContent,\n  TagsEmpty,\n  TagsGroup,\n  TagsInput,\n  TagsItem,\n  TagsList,\n  TagsTrigger,\n  TagsValue,\n} from \"../../../../../packages/tags\"\n\nconst defaultTags = [\n  { id: \"react\", label: \"Updated React\" },\n  { id: \"typescript\", label: \"Updated TypeScript\" },\n  { id: \"javascript\", label: \"Updated JavaScript\" },\n  { id: \"nextjs\", label: \"Updated Next.js\" },\n  { id: \"vuejs\", label: \"Updated Vue.js\" },\n  { id: \"angular\", label: \"Updated Angular\" },\n  { id: \"svelte\", label: \"Updated Svelte\" },\n  { id: \"nodejs\", label: \"Updated Node.js\" },\n  { id: \"python\", label: \"Updated Python\" },\n  { id: \"ruby\", label: \"Updated Ruby\" },\n  { id: \"java\", label: \"Updated Java\" },\n  { id: \"csharp\", label: \"Updated C#\" },\n  { id: \"php\", label: \"Updated PHP\" },\n  { id: \"go\", label: \"Updated Go\" },\n]\n\nconst Example = () => {\n  const [selected, setSelected] = useState<string[]>([])\n  const [newTag, setNewTag] = useState<string>(\"\")\n  const [tags, setTags] = useState<{ id: string; label: string }[]>(defaultTags)\n\n  const handleRemove = (value: string) => {\n    if (!selected.includes(value)) {\n      return\n    }\n\n    console.log(`removed: ${value}`)\n    setSelected((prev) => prev.filter((v) => v !== value))\n  }\n\n  const handleSelect = (value: string) => {\n    if (selected.includes(value)) {\n      handleRemove(value)\n      return\n    }\n\n    console.log(`selected: ${value}`)\n    setSelected((prev) => [...prev, value])\n  }\n\n  const handleCreateTag = () => {\n    console.log(`created: ${newTag}`)\n\n    setTags((prev) => [\n      ...prev,\n      {\n        id: newTag,\n        label: newTag,\n      },\n    ])\n    setSelected((prev) => [...prev, newTag])\n    setNewTag(\"\")\n  }\n\n  return (\n    <Tags className=\"max-w-[300px]\">\n      <TagsTrigger>\n        {selected.map((tag) => (\n          <TagsValue key={tag} onRemove={() => handleRemove(tag)}>\n            {tags.find((t) => t.id === tag)?.label}\n          </TagsValue>\n        ))}\n      </TagsTrigger>\n      <TagsContent>\n        <TagsInput\n          onValueChange={setNewTag}\n          placeholder=\"Updated Search tag...\"\n        />\n        <TagsList>\n          <TagsEmpty>\n            <button\n              className=\"mx-auto flex cursor-pointer items-center gap-2\"\n              onClick={handleCreateTag}\n              type=\"button\"\n            >\n              <PlusIcon className=\"text-muted-foreground\" size={14} />\n              Updated Create new tag: {newTag}\n            </button>\n          </TagsEmpty>\n          <TagsGroup>\n            {tags.map((tag) => (\n              <TagsItem key={tag.id} onSelect={handleSelect} value={tag.id}>\n                {tag.label}\n                {selected.includes(tag.id) && (\n                  <CheckIcon className=\"text-muted-foreground\" size={14} />\n                )}\n              </TagsItem>\n            ))}\n          </TagsGroup>\n        </TagsList>\n      </TagsContent>\n    </Tags>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/tags-filter.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/tags-filter.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Tags,\n  TagsContent,\n  TagsEmpty,\n  TagsGroup,\n  TagsInput,\n  TagsItem,\n  TagsList,\n  TagsTrigger,\n  TagsValue,\n} from \"../../../../../packages/tags\"\n\nconst defaultTags = [\n  { id: \"react\", label: \"React\" },\n  { id: \"typescript\", label: \"TypeScript\" },\n  { id: \"javascript\", label: \"JavaScript\" },\n  { id: \"nextjs\", label: \"Next.js\" },\n  { id: \"vuejs\", label: \"Vue.js\" },\n  { id: \"angular\", label: \"Angular\" },\n  { id: \"svelte\", label: \"Svelte\" },\n  { id: \"nodejs\", label: \"Node.js\" },\n  { id: \"python\", label: \"Python\" },\n  { id: \"ruby\", label: \"Ruby\" },\n  { id: \"java\", label: \"Java\" },\n  { id: \"csharp\", label: \"C#\" },\n  { id: \"php\", label: \"PHP\" },\n  { id: \"go\", label: \"Go\" },\n]\n\nconst Example = () => {\n  const [selected, setSelected] = useState<string[]>([])\n  const [newTag, setNewTag] = useState<string>(\"\")\n  const [tags, setTags] = useState<{ id: string; label: string }[]>(defaultTags)\n\n  const handleRemove = (value: string) => {\n    if (!selected.includes(value)) {\n      return\n    }\n\n    console.log(`removed: ${value}`)\n    setSelected((prev) => prev.filter((v) => v !== value))\n  }\n\n  const handleSelect = (value: string) => {\n    if (selected.includes(value)) {\n      handleRemove(value)\n      return\n    }\n\n    console.log(`selected: ${value}`)\n    setSelected((prev) => [...prev, value])\n  }\n\n  return (\n    <Tags className=\"max-w-[300px]\">\n      <TagsTrigger>\n        {selected.map((tag) => (\n          <TagsValue key={tag} onRemove={() => handleRemove(tag)}>\n            {tags.find((t) => t.id === tag)?.label}\n          </TagsValue>\n        ))}\n      </TagsTrigger>\n      <TagsContent>\n        <TagsInput onValueChange={setNewTag} placeholder=\"Search tag...\" />\n        <TagsList>\n          <TagsEmpty />\n          <TagsGroup>\n            {tags\n              .filter((tag) => !selected.includes(tag.id))\n              .map((tag) => (\n                <TagsItem key={tag.id} onSelect={handleSelect} value={tag.id}>\n                  {tag.label}\n                </TagsItem>\n              ))}\n          </TagsGroup>\n        </TagsList>\n      </TagsContent>\n    </Tags>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Tags,\n  TagsContent,\n  TagsEmpty,\n  TagsGroup,\n  TagsInput,\n  TagsItem,\n  TagsList,\n  TagsTrigger,\n  TagsValue,\n} from \"../../../../../packages/tags\"\n\nconst defaultTags = [\n  { id: \"react\", label: \"Updated React\" },\n  { id: \"typescript\", label: \"Updated TypeScript\" },\n  { id: \"javascript\", label: \"Updated JavaScript\" },\n  { id: \"nextjs\", label: \"Updated Next.js\" },\n  { id: \"vuejs\", label: \"Updated Vue.js\" },\n  { id: \"angular\", label: \"Updated Angular\" },\n  { id: \"svelte\", label: \"Updated Svelte\" },\n  { id: \"nodejs\", label: \"Updated Node.js\" },\n  { id: \"python\", label: \"Updated Python\" },\n  { id: \"ruby\", label: \"Updated Ruby\" },\n  { id: \"java\", label: \"Updated Java\" },\n  { id: \"csharp\", label: \"Updated C#\" },\n  { id: \"php\", label: \"Updated PHP\" },\n  { id: \"go\", label: \"Updated Go\" },\n]\n\nconst Example = () => {\n  const [selected, setSelected] = useState<string[]>([])\n  const [newTag, setNewTag] = useState<string>(\"\")\n  const [tags, setTags] = useState<{ id: string; label: string }[]>(defaultTags)\n\n  const handleRemove = (value: string) => {\n    if (!selected.includes(value)) {\n      return\n    }\n\n    console.log(`removed: ${value}`)\n    setSelected((prev) => prev.filter((v) => v !== value))\n  }\n\n  const handleSelect = (value: string) => {\n    if (selected.includes(value)) {\n      handleRemove(value)\n      return\n    }\n\n    console.log(`selected: ${value}`)\n    setSelected((prev) => [...prev, value])\n  }\n\n  return (\n    <Tags className=\"max-w-[300px]\">\n      <TagsTrigger>\n        {selected.map((tag) => (\n          <TagsValue key={tag} onRemove={() => handleRemove(tag)}>\n            {tags.find((t) => t.id === tag)?.label}\n          </TagsValue>\n        ))}\n      </TagsTrigger>\n      <TagsContent>\n        <TagsInput\n          onValueChange={setNewTag}\n          placeholder=\"Updated Search tag...\"\n        />\n        <TagsList>\n          <TagsEmpty />\n          <TagsGroup>\n            {tags\n              .filter((tag) => !selected.includes(tag.id))\n              .map((tag) => (\n                <TagsItem key={tag.id} onSelect={handleSelect} value={tag.id}>\n                  {tag.label}\n                </TagsItem>\n              ))}\n          </TagsGroup>\n        </TagsList>\n      </TagsContent>\n    </Tags>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/tags.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/tags.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport {\n  Tags,\n  TagsContent,\n  TagsEmpty,\n  TagsGroup,\n  TagsInput,\n  TagsItem,\n  TagsList,\n  TagsTrigger,\n  TagsValue,\n} from \"../../../../../packages/tags\"\n\nconst tags = [\n  { id: \"react\", label: \"React\" },\n  { id: \"typescript\", label: \"TypeScript\" },\n  { id: \"javascript\", label: \"JavaScript\" },\n  { id: \"nextjs\", label: \"Next.js\" },\n  { id: \"vuejs\", label: \"Vue.js\" },\n  { id: \"angular\", label: \"Angular\" },\n  { id: \"svelte\", label: \"Svelte\" },\n  { id: \"nodejs\", label: \"Node.js\" },\n  { id: \"python\", label: \"Python\" },\n  { id: \"ruby\", label: \"Ruby\" },\n  { id: \"java\", label: \"Java\" },\n  { id: \"csharp\", label: \"C#\" },\n  { id: \"php\", label: \"PHP\" },\n  { id: \"go\", label: \"Go\" },\n]\n\nconst Example = () => {\n  const [selected, setSelected] = useState<string[]>([])\n\n  const handleRemove = (value: string) => {\n    if (!selected.includes(value)) {\n      return\n    }\n\n    console.log(`removed: ${value}`)\n    setSelected((prev) => prev.filter((v) => v !== value))\n  }\n\n  const handleSelect = (value: string) => {\n    if (selected.includes(value)) {\n      handleRemove(value)\n      return\n    }\n\n    console.log(`selected: ${value}`)\n    setSelected((prev) => [...prev, value])\n  }\n\n  return (\n    <Tags className=\"max-w-[300px]\">\n      <TagsTrigger>\n        {selected.map((tag) => (\n          <TagsValue key={tag} onRemove={() => handleRemove(tag)}>\n            {tags.find((t) => t.id === tag)?.label}\n          </TagsValue>\n        ))}\n      </TagsTrigger>\n      <TagsContent>\n        <TagsInput placeholder=\"Search tag...\" />\n        <TagsList>\n          <TagsEmpty />\n          <TagsGroup>\n            {tags.map((tag) => (\n              <TagsItem key={tag.id} onSelect={handleSelect} value={tag.id}>\n                {tag.label}\n                {selected.includes(tag.id) && (\n                  <CheckIcon className=\"text-muted-foreground\" size={14} />\n                )}\n              </TagsItem>\n            ))}\n          </TagsGroup>\n        </TagsList>\n      </TagsContent>\n    </Tags>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport {\n  Tags,\n  TagsContent,\n  TagsEmpty,\n  TagsGroup,\n  TagsInput,\n  TagsItem,\n  TagsList,\n  TagsTrigger,\n  TagsValue,\n} from \"../../../../../packages/tags\"\n\nconst tags = [\n  { id: \"react\", label: \"Updated React\" },\n  { id: \"typescript\", label: \"Updated TypeScript\" },\n  { id: \"javascript\", label: \"Updated JavaScript\" },\n  { id: \"nextjs\", label: \"Updated Next.js\" },\n  { id: \"vuejs\", label: \"Updated Vue.js\" },\n  { id: \"angular\", label: \"Updated Angular\" },\n  { id: \"svelte\", label: \"Updated Svelte\" },\n  { id: \"nodejs\", label: \"Updated Node.js\" },\n  { id: \"python\", label: \"Updated Python\" },\n  { id: \"ruby\", label: \"Updated Ruby\" },\n  { id: \"java\", label: \"Updated Java\" },\n  { id: \"csharp\", label: \"Updated C#\" },\n  { id: \"php\", label: \"Updated PHP\" },\n  { id: \"go\", label: \"Updated Go\" },\n]\n\nconst Example = () => {\n  const [selected, setSelected] = useState<string[]>([])\n\n  const handleRemove = (value: string) => {\n    if (!selected.includes(value)) {\n      return\n    }\n\n    console.log(`removed: ${value}`)\n    setSelected((prev) => prev.filter((v) => v !== value))\n  }\n\n  const handleSelect = (value: string) => {\n    if (selected.includes(value)) {\n      handleRemove(value)\n      return\n    }\n\n    console.log(`selected: ${value}`)\n    setSelected((prev) => [...prev, value])\n  }\n\n  return (\n    <Tags className=\"max-w-[300px]\">\n      <TagsTrigger>\n        {selected.map((tag) => (\n          <TagsValue key={tag} onRemove={() => handleRemove(tag)}>\n            {tags.find((t) => t.id === tag)?.label}\n          </TagsValue>\n        ))}\n      </TagsTrigger>\n      <TagsContent>\n        <TagsInput placeholder=\"Updated Search tag...\" />\n        <TagsList>\n          <TagsEmpty />\n          <TagsGroup>\n            {tags.map((tag) => (\n              <TagsItem key={tag.id} onSelect={handleSelect} value={tag.id}>\n                {tag.label}\n                {selected.includes(tag.id) && (\n                  <CheckIcon className=\"text-muted-foreground\" size={14} />\n                )}\n              </TagsItem>\n            ))}\n          </TagsGroup>\n        </TagsList>\n      </TagsContent>\n    </Tags>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/template-auth-eight.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-auth-eight",
+  "type": "registry:block",
+  "title": "auth/eight",
+  "description": "Page template \"auth/eight\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/auth/eight/app/page.tsx",
+      "type": "registry:page",
+      "target": "components/page-templates/auth/eight/app/page.tsx",
+      "content": "import Link from \"next/link\"\nimport { Button } from \"@/ui/button\"\nimport { Input } from \"@/ui/input\"\nimport { Label } from \"@/ui/label\"\n\nexport default function SignUp() {\n  return (\n    <section className=\"flex min-h-screen bg-background px-4 py-16 md:py-24\">\n      <div className=\"m-auto w-full max-w-sm rounded-2xl border bg-muted p-8\">\n        <div>\n          <h1 className=\"mt-6 text-2xl font-medium\">Get started</h1>\n          <p className=\"mt-1 text-sm text-muted-foreground\">\n            Create your account in seconds\n          </p>\n        </div>\n\n        <form action=\"\" className=\"mt-8 space-y-5\">\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"email\" className=\"text-sm\">\n              Email\n            </Label>\n            <Input\n              type=\"email\"\n              id=\"email\"\n              name=\"email\"\n              placeholder=\"you@example.com\"\n              required\n            />\n          </div>\n\n          <Button className=\"w-full\">Continue with Email</Button>\n        </form>\n\n        <div className=\"my-6 flex items-center gap-3\">\n          <hr className=\"flex-1\" />\n          <span className=\"text-xs text-muted-foreground\">or</span>\n          <hr className=\"flex-1\" />\n        </div>\n\n        <div className=\"space-y-2\">\n          <Button type=\"button\" variant=\"outline\" className=\"w-full\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"size-4\"\n              viewBox=\"0 0 256 262\"\n            >\n              <path\n                fill=\"#4285f4\"\n                d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n              ></path>\n              <path\n                fill=\"#34a853\"\n                d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n              ></path>\n              <path\n                fill=\"#fbbc05\"\n                d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"\n              ></path>\n              <path\n                fill=\"#eb4335\"\n                d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n              ></path>\n            </svg>\n            <span>Continue with Google</span>\n          </Button>\n          <Button type=\"button\" variant=\"outline\" className=\"w-full\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"size-4\"\n              viewBox=\"0 0 256 256\"\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"M128 0C57.317 0 0 57.317 0 128c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.117-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128C256 57.317 198.683 0 128 0\"\n              />\n            </svg>\n            <span>Continue with GitHub</span>\n          </Button>\n        </div>\n\n        <p className=\"mt-8 text-center text-sm text-muted-foreground\">\n          Already have an account?{\" \"}\n          <Link href=\"#\" className=\"font-medium text-primary hover:underline\">\n            Sign in\n          </Link>\n        </p>\n      </div>\n    </section>\n  )\n}\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "auth"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json",
+    "https://www.loveui.dev/r/input.json",
+    "https://www.loveui.dev/r/label.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "auth/eight"
+  }
+}

package/public/r/template-auth-five.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-auth-five",
+  "type": "registry:block",
+  "title": "auth/five",
+  "description": "Page template \"auth/five\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/auth/five/app/page.tsx",
+      "type": "registry:page",
+      "target": "components/page-templates/auth/five/app/page.tsx",
+      "content": "import Link from \"next/link\"\nimport { Button } from \"@/ui/button\"\nimport { Input } from \"@/ui/input\"\nimport { Label } from \"@/ui/label\"\n\nexport default function Login() {\n  return (\n    <section className=\"flex min-h-screen bg-background px-4 py-16 md:py-24\">\n      <div className=\"m-auto w-full max-w-sm rounded-2xl border bg-muted p-8\">\n        <div>\n          <h1 className=\"mt-6 text-2xl font-medium\">Sign in</h1>\n          <p className=\"mt-1 text-sm text-muted-foreground\">\n            Enter your email to continue\n          </p>\n        </div>\n\n        <form action=\"\" className=\"mt-8 space-y-5\">\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"email\" className=\"text-sm\">\n              Email\n            </Label>\n            <Input\n              type=\"email\"\n              id=\"email\"\n              name=\"email\"\n              placeholder=\"you@example.com\"\n              required\n            />\n          </div>\n\n          <Button className=\"w-full\">Continue with Email</Button>\n        </form>\n\n        <div className=\"my-6 flex items-center gap-3\">\n          <hr className=\"flex-1\" />\n          <span className=\"text-xs text-muted-foreground\">or</span>\n          <hr className=\"flex-1\" />\n        </div>\n\n        <div className=\"space-y-2\">\n          <Button type=\"button\" variant=\"outline\" className=\"w-full\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"size-4\"\n              viewBox=\"0 0 256 262\"\n            >\n              <path\n                fill=\"#4285f4\"\n                d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n              ></path>\n              <path\n                fill=\"#34a853\"\n                d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n              ></path>\n              <path\n                fill=\"#fbbc05\"\n                d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"\n              ></path>\n              <path\n                fill=\"#eb4335\"\n                d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n              ></path>\n            </svg>\n            <span>Continue with Google</span>\n          </Button>\n          <Button type=\"button\" variant=\"outline\" className=\"w-full\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"size-4\"\n              viewBox=\"0 0 256 256\"\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"M128 0C57.317 0 0 57.317 0 128c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.117-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128C256 57.317 198.683 0 128 0\"\n              />\n            </svg>\n            <span>Continue with GitHub</span>\n          </Button>\n        </div>\n\n        <p className=\"mt-8 text-center text-sm text-muted-foreground\">\n          Don't have an account?{\" \"}\n          <Link href=\"#\" className=\"font-medium text-primary hover:underline\">\n            Sign up\n          </Link>\n        </p>\n      </div>\n    </section>\n  )\n}\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "auth"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json",
+    "https://www.loveui.dev/r/input.json",
+    "https://www.loveui.dev/r/label.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "auth/five"
+  }
+}

package/public/r/template-auth-four.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-auth-four",
+  "type": "registry:block",
+  "title": "auth/four",
+  "description": "Page template \"auth/four\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/auth/four/app/page.tsx",
+      "type": "registry:page",
+      "target": "components/page-templates/auth/four/app/page.tsx",
+      "content": "import Link from \"next/link\"\nimport { Button } from \"@/ui/button\"\nimport { Card } from \"@/ui/card\"\nimport { Input } from \"@/ui/input\"\nimport { Label } from \"@/ui/label\"\n\nexport default function Login() {\n  return (\n    <section className=\"flex grid min-h-screen grid-rows-[auto_1fr] bg-background px-4 py-16 md:py-24\">\n      <div className=\"m-auto w-full max-w-sm\">\n        <div className=\"text-center\">\n          <h1 className=\"text-4xl font-medium\">Welcome back</h1>\n          <p className=\"mt-2 text-sm text-muted-foreground\">\n            Sign in to your account to continue\n          </p>\n        </div>\n        <Card variant=\"outline\" className=\"mt-6 p-8\">\n          <form action=\"\" className=\"space-y-5\">\n            <div className=\"space-y-3\">\n              <Label htmlFor=\"email\" className=\"text-sm\">\n                Email\n              </Label>\n              <Input\n                type=\"email\"\n                id=\"email\"\n                name=\"email\"\n                placeholder=\"you@example.com\"\n                required\n              />\n            </div>\n\n            <div className=\"space-y-3\">\n              <div className=\"flex items-center justify-between\">\n                <Label htmlFor=\"password\" className=\"text-sm\">\n                  Password\n                </Label>\n                <Link\n                  href=\"#\"\n                  className=\"text-xs text-muted-foreground hover:text-foreground\"\n                >\n                  Forgot password?\n                </Link>\n              </div>\n              <Input type=\"password\" id=\"password\" name=\"password\" required />\n            </div>\n\n            <Button className=\"w-full\">Sign In</Button>\n          </form>\n\n          <div className=\"my-6 flex items-center gap-3\">\n            <hr className=\"flex-1\" />\n            <span className=\"text-xs text-muted-foreground\">\n              or continue with\n            </span>\n            <hr className=\"flex-1\" />\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-3\">\n            <Button type=\"button\" variant=\"outline\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"size-4\"\n                viewBox=\"0 0 256 262\"\n              >\n                <path\n                  fill=\"#4285f4\"\n                  d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n                ></path>\n                <path\n                  fill=\"#34a853\"\n                  d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n                ></path>\n                <path\n                  fill=\"#fbbc05\"\n                  d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"\n                ></path>\n                <path\n                  fill=\"#eb4335\"\n                  d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n                ></path>\n              </svg>\n              <span>Google</span>\n            </Button>\n            <Button type=\"button\" variant=\"outline\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"size-4\"\n                viewBox=\"0 0 256 256\"\n              >\n                <path\n                  fill=\"currentColor\"\n                  d=\"M128 0C57.317 0 0 57.317 0 128c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.117-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128C256 57.317 198.683 0 128 0\"\n                />\n              </svg>\n              <span>GitHub</span>\n            </Button>\n          </div>\n        </Card>\n\n        <p className=\"mt-6 text-center text-sm text-muted-foreground\">\n          Don't have an account?{\" \"}\n          <Link href=\"#\" className=\"font-medium text-primary hover:underline\">\n            Sign up\n          </Link>\n        </p>\n      </div>\n    </section>\n  )\n}\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "auth"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json",
+    "https://www.loveui.dev/r/card.json",
+    "https://www.loveui.dev/r/input.json",
+    "https://www.loveui.dev/r/label.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "auth/four"
+  }
+}

package/public/r/template-auth-nine.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "template-auth-nine",
+  "type": "registry:block",
+  "title": "auth/nine",
+  "description": "Page template \"auth/nine\"",
+  "files": [
+    {
+      "path": "registry/page-templates/default/templates/auth/nine/app/page.tsx",
+      "type": "registry:page",
+      "target": "components/page-templates/auth/nine/app/page.tsx",
+      "content": "import Link from \"next/link\"\nimport { Button } from \"@/ui/button\"\nimport { Input } from \"@/ui/input\"\nimport { Label } from \"@/ui/label\"\n\nexport default function SignUp() {\n  return (\n    <section className=\"flex min-h-screen bg-background px-4 py-16 md:py-24\">\n      <div className=\"m-auto w-full max-w-xs\">\n        <div className=\"text-center\">\n          <h1 className=\"mt-3 text-4xl font-medium\">Sign up</h1>\n        </div>\n\n        <form action=\"\" className=\"mt-12 space-y-4\">\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"email\" className=\"text-sm\">\n              Email\n            </Label>\n            <Input\n              type=\"email\"\n              id=\"email\"\n              name=\"email\"\n              placeholder=\"you@example.com\"\n              required\n            />\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"password\" className=\"text-sm\">\n              Password\n            </Label>\n            <Input type=\"password\" id=\"password\" name=\"password\" required />\n          </div>\n\n          <Button className=\"w-full\">Continue</Button>\n        </form>\n\n        <div className=\"mt-6 space-y-3 border-t pt-6\">\n          <Button type=\"button\" variant=\"outline\" className=\"w-full\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"size-4\"\n              viewBox=\"0 0 256 262\"\n            >\n              <path\n                fill=\"#4285f4\"\n                d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n              ></path>\n              <path\n                fill=\"#34a853\"\n                d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n              ></path>\n              <path\n                fill=\"#fbbc05\"\n                d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"\n              ></path>\n              <path\n                fill=\"#eb4335\"\n                d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n              ></path>\n            </svg>\n            <span>Google</span>\n          </Button>\n          <Button type=\"button\" variant=\"outline\" className=\"w-full\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className=\"size-4\"\n              viewBox=\"0 0 256 256\"\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"M128 0C57.317 0 0 57.317 0 128c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.117-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128C256 57.317 198.683 0 128 0\"\n              />\n            </svg>\n            <span>GitHub</span>\n          </Button>\n        </div>\n\n        <p className=\"mt-6 text-center text-sm text-muted-foreground\">\n          Already have an account?{\" \"}\n          <Link href=\"#\" className=\"font-medium text-primary hover:underline\">\n            Sign in\n          </Link>\n        </p>\n      </div>\n    </section>\n  )\n}\n"
+    }
+  ],
+  "categories": [
+    "page-template",
+    "auth"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/button.json",
+    "https://www.loveui.dev/r/input.json",
+    "https://www.loveui.dev/r/label.json"
+  ],
+  "meta": {
+    "source": "page-template",
+    "templatePath": "auth/nine"
+  }
+}