love-ui 1.2.12 → 1.2.14

package/public/r/button-loading.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/button-loading.tsx",
-      "content": "import { LoaderCircleIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button disabled>\n      <LoaderCircleIcon className=\"animate-spin\" />\n      Loading...\n    </Button>\n  )\n}\n",
+      "content": "import { LoaderCircleIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button disabled>\n      <LoaderCircleIcon className=\"animate-spin\" />\n      Updated Loading...\n    </Button>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/button-outline.json

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

package/public/r/button-secondary.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/button-secondary.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonSecondary() {\n  return <Button variant=\"secondary\">Updated Secondary</Button>\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/button-sm.json

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

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

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/button-with-icon.tsx",
-      "content": "import { DownloadIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button>\n      <DownloadIcon />\n      Download\n    </Button>\n  )\n}\n",
+      "content": "import { DownloadIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button>\n      <DownloadIcon />\n      Updated Download\n    </Button>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/button-with-link.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/button-with-link.tsx",
-      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonWithLink() {\n  return <Button render={<Link href=\"/\" />}>Link</Button>\n}\n",
+      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonWithLink() {\n  return <Button render={<Link href=\"/\" />}>Updated Link</Button>\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/button-xl.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/button-xl.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonXl() {\n  return <Button size=\"xl\">Button</Button>\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonXl() {\n  return <Button size=\"xl\">Updated Button</Button>\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/button-xs.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/button-xs.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonXs() {\n  return <Button size=\"xs\">Button</Button>\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonXs() {\n  return <Button size=\"xs\">Updated Button</Button>\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/calendar-headless.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/calendar-headless.tsx",
-      "content": "\"use client\"\n\nimport { faker } from \"@faker-js/faker\"\n\nimport {\n  CalendarBody,\n  CalendarHeader,\n  CalendarItem,\n  CalendarProvider,\n} from \"../../../../../packages/calendar\"\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 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  }))\n\nconst Example = () => (\n  <CalendarProvider>\n    <CalendarHeader />\n    <CalendarBody features={exampleFeatures}>\n      {({ feature }) => <CalendarItem feature={feature} key={feature.id} />}\n    </CalendarBody>\n  </CalendarProvider>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { faker } from \"@faker-js/faker\"\n\nimport {\n  CalendarBody,\n  CalendarHeader,\n  CalendarItem,\n  CalendarProvider,\n} from \"../../../../../packages/calendar\"\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 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  }))\n\nconst Example = () => (\n  <CalendarProvider>\n    <CalendarHeader />\n    <CalendarBody features={exampleFeatures}>\n      {({ feature }) => <CalendarItem feature={feature} key={feature.id} />}\n    </CalendarBody>\n  </CalendarProvider>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/calendar-rac.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "calendar-rac",
+  "type": "registry:ui",
+  "dependencies": [
+    "react-aria-components",
+    "@internationalized/date"
+  ],
+  "files": [
+    {
+      "path": "registry/default/ui/calendar-rac.tsx",
+      "content": "\"use client\"\n\nimport { ComponentProps } from \"react\"\nimport { getLocalTimeZone, today } from \"@internationalized/date\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\nimport {\n  Button,\n  CalendarCell as CalendarCellRac,\n  CalendarGridBody as CalendarGridBodyRac,\n  CalendarGridHeader as CalendarGridHeaderRac,\n  CalendarGrid as CalendarGridRac,\n  CalendarHeaderCell as CalendarHeaderCellRac,\n  Calendar as CalendarRac,\n  composeRenderProps,\n  Heading as HeadingRac,\n  RangeCalendar as RangeCalendarRac,\n} from \"react-aria-components\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\n\ninterface BaseCalendarProps {\n  className?: string\n}\n\ntype CalendarProps = ComponentProps<typeof CalendarRac> & BaseCalendarProps\ntype RangeCalendarProps = ComponentProps<typeof RangeCalendarRac> &\n  BaseCalendarProps\n\nfunction CalendarHeader() {\n  return (\n    <header className=\"flex w-full items-center gap-1 pb-1\">\n      <Button\n        slot=\"previous\"\n        className=\"flex size-9 items-center justify-center rounded-md text-muted-foreground/80 transition-[color,box-shadow] outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n      >\n        <ChevronLeftIcon size={16} />\n      </Button>\n      <HeadingRac className=\"grow text-center text-sm font-medium\" />\n      <Button\n        slot=\"next\"\n        className=\"flex size-9 items-center justify-center rounded-md text-muted-foreground/80 transition-[color,box-shadow] outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n      >\n        <ChevronRightIcon size={16} />\n      </Button>\n    </header>\n  )\n}\n\nfunction CalendarGridComponent({ isRange = false }: { isRange?: boolean }) {\n  const now = today(getLocalTimeZone())\n\n  return (\n    <CalendarGridRac>\n      <CalendarGridHeaderRac>\n        {(day) => (\n          <CalendarHeaderCellRac className=\"size-9 rounded-md p-0 text-xs font-medium text-muted-foreground/80\">\n            {day}\n          </CalendarHeaderCellRac>\n        )}\n      </CalendarGridHeaderRac>\n      <CalendarGridBodyRac className=\"[&_td]:px-0 [&_td]:py-px\">\n        {(date) => (\n          <CalendarCellRac\n            date={date}\n            className={cn(\n              \"relative flex size-9 items-center justify-center rounded-md p-0 text-sm font-normal whitespace-nowrap text-foreground [transition-property:color,background-color,border-radius,box-shadow] duration-150 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-focus-visible:z-10 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50 data-hovered:bg-accent data-hovered:text-foreground data-selected:bg-primary data-selected:text-primary-foreground data-unavailable:pointer-events-none data-unavailable:line-through data-unavailable:opacity-30\",\n              // Range-specific styles\n              isRange &&\n                \"data-invalid:bg-red-100 data-selected:rounded-none data-selected:bg-accent data-selected:text-foreground data-selection-end:rounded-e-md data-selection-end:bg-primary data-selection-end:text-primary-foreground data-invalid:data-selection-end:bg-destructive data-invalid:data-selection-end:text-white data-selection-start:rounded-s-md data-selection-start:bg-primary data-selection-start:text-primary-foreground data-invalid:data-selection-start:bg-destructive data-invalid:data-selection-start:text-white\",\n              // Today indicator styles\n              date.compare(now) === 0 &&\n                cn(\n                  \"after:pointer-events-none after:absolute after:start-1/2 after:bottom-1 after:z-10 after:size-[3px] after:-translate-x-1/2 after:rounded-full after:bg-primary\",\n                  isRange\n                    ? \"data-selection-end:after:bg-background data-selection-start:after:bg-background\"\n                    : \"data-selected:after:bg-background\"\n                )\n            )}\n          />\n        )}\n      </CalendarGridBodyRac>\n    </CalendarGridRac>\n  )\n}\n\nfunction Calendar({ className, ...props }: CalendarProps) {\n  return (\n    <CalendarRac\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        cn(\"w-fit\", className)\n      )}\n    >\n      <CalendarHeader />\n      <CalendarGridComponent />\n    </CalendarRac>\n  )\n}\n\nfunction RangeCalendar({ className, ...props }: RangeCalendarProps) {\n  return (\n    <RangeCalendarRac\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        cn(\"w-fit\", className)\n      )}\n    >\n      <CalendarHeader />\n      <CalendarGridComponent isRange />\n    </RangeCalendarRac>\n  )\n}\n\nexport { Calendar, RangeCalendar }\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/public/r/calendar.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/calendar.tsx",
-      "content": "\"use client\"\n\nimport { faker } from \"@faker-js/faker\"\n\nimport {\n  CalendarBody,\n  CalendarDate,\n  CalendarDatePagination,\n  CalendarDatePicker,\n  CalendarHeader,\n  CalendarItem,\n  CalendarMonthPicker,\n  CalendarProvider,\n  CalendarYearPicker,\n} from \"../../../../../packages/calendar\"\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 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  }))\n\nconst earliestYear =\n  exampleFeatures\n    .map((feature) => feature.startAt.getFullYear())\n    .sort()\n    .at(0) ?? new Date().getFullYear()\n\nconst latestYear =\n  exampleFeatures\n    .map((feature) => feature.endAt.getFullYear())\n    .sort()\n    .at(-1) ?? new Date().getFullYear()\n\nconst Example = () => (\n  <CalendarProvider>\n    <CalendarDate>\n      <CalendarDatePicker>\n        <CalendarMonthPicker />\n        <CalendarYearPicker end={latestYear} start={earliestYear} />\n      </CalendarDatePicker>\n      <CalendarDatePagination />\n    </CalendarDate>\n    <CalendarHeader />\n    <CalendarBody features={exampleFeatures}>\n      {({ feature }) => <CalendarItem feature={feature} key={feature.id} />}\n    </CalendarBody>\n  </CalendarProvider>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { faker } from \"@faker-js/faker\"\n\nimport {\n  CalendarBody,\n  CalendarDate,\n  CalendarDatePagination,\n  CalendarDatePicker,\n  CalendarHeader,\n  CalendarItem,\n  CalendarMonthPicker,\n  CalendarProvider,\n  CalendarYearPicker,\n} from \"../../../../../packages/calendar\"\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 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  }))\n\nconst earliestYear =\n  exampleFeatures\n    .map((feature) => feature.startAt.getFullYear())\n    .sort()\n    .at(0) ?? new Date().getFullYear()\n\nconst latestYear =\n  exampleFeatures\n    .map((feature) => feature.endAt.getFullYear())\n    .sort()\n    .at(-1) ?? new Date().getFullYear()\n\nconst Example = () => (\n  <CalendarProvider>\n    <CalendarDate>\n      <CalendarDatePicker>\n        <CalendarMonthPicker />\n        <CalendarYearPicker end={latestYear} start={earliestYear} />\n      </CalendarDatePicker>\n      <CalendarDatePagination />\n    </CalendarDate>\n    <CalendarHeader />\n    <CalendarBody features={exampleFeatures}>\n      {({ feature }) => <CalendarItem feature={feature} key={feature.id} />}\n    </CalendarBody>\n  </CalendarProvider>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/card-demo.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/examples/card-demo.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardPanel,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Field, FieldControl, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst frameworkOptions = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Remix\", value: \"remix\" },\n  { label: \"Astro\", value: \"astro\" },\n]\n\nexport default function CardDemo() {\n  return (\n    <Card className=\"w-full max-w-xs\">\n      <CardHeader>\n        <CardTitle>Create project</CardTitle>\n        <CardDescription>Deploy your new project in one-click.</CardDescription>\n      </CardHeader>\n      <Form>\n        <CardPanel>\n          <div className=\"flex flex-col gap-4\">\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <FieldControl type=\"text\" placeholder=\"Name of your project\" />\n            </Field>\n            <Field>\n              <FieldLabel>Framework</FieldLabel>\n              <Select items={frameworkOptions} defaultValue=\"next\">\n                <SelectTrigger>\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectPopup>\n                  {frameworkOptions.map(({ label, value }) => (\n                    <SelectItem key={value} value={value}>\n                      {label}\n                    </SelectItem>\n                  ))}\n                </SelectPopup>\n              </Select>\n            </Field>\n          </div>\n        </CardPanel>\n        <CardFooter>\n          <Button className=\"w-full\" type=\"submit\">\n            Deploy\n          </Button>\n        </CardFooter>\n      </Form>\n    </Card>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardPanel,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Field, FieldControl, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst frameworkOptions = [\n  { label: \"Updated Next.js\", value: \"next\" },\n  { label: \"Updated Vite\", value: \"vite\" },\n  { label: \"Updated Remix\", value: \"remix\" },\n  { label: \"Updated Astro\", value: \"astro\" },\n]\n\nexport default function CardDemo() {\n  return (\n    <Card className=\"w-full max-w-xs\">\n      <CardHeader>\n        <CardTitle>Updated Create project</CardTitle>\n        <CardDescription>\n          Updated Deploy your new project in one-click.\n        </CardDescription>\n      </CardHeader>\n      <Form>\n        <CardPanel>\n          <div className=\"flex flex-col gap-4\">\n            <Field>\n              <FieldLabel>Updated Name</FieldLabel>\n              <FieldControl\n                type=\"text\"\n                placeholder=\"Updated Name of your project\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel>Updated Framework</FieldLabel>\n              <Select items={frameworkOptions} defaultValue=\"next\">\n                <SelectTrigger>\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectPopup>\n                  {frameworkOptions.map(({ label, value }) => (\n                    <SelectItem key={value} value={value}>\n                      {label}\n                    </SelectItem>\n                  ))}\n                </SelectPopup>\n              </Select>\n            </Field>\n          </div>\n        </CardPanel>\n        <CardFooter>\n          <Button className=\"w-full\" type=\"submit\">\n            Updated Deploy\n          </Button>\n        </CardFooter>\n      </Form>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/chart.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart",
+  "dependencies": [
+    "recharts"
+  ],
+  "files": [
+    {
+      "path": "registry/default/ui/chart.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as any\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/checkbox-card.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/checkbox-card.tsx",
-      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function CheckboxCardDemo() {\n  return (\n    <Label className=\"flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\">\n      <Checkbox defaultChecked />\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    </Label>\n  )\n}\n",
+      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function CheckboxCardDemo() {\n  return (\n    <Label className=\"flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\">\n      <Checkbox defaultChecked />\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    </Label>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/checkbox-demo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/checkbox-demo.tsx",
-      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function CheckboxDemo() {\n  return (\n    <Label>\n      <Checkbox />\n      Accept terms and conditions\n    </Label>\n  )\n}\n",
+      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function CheckboxDemo() {\n  return (\n    <Label>\n      <Checkbox />\n      Updated Accept terms and conditions\n    </Label>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/checkbox-disabled.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/checkbox-disabled.tsx",
-      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function CheckboxDisabledDemo() {\n  return (\n    <Label>\n      <Checkbox defaultChecked disabled />\n      Accept terms and conditions\n    </Label>\n  )\n}\n",
+      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function CheckboxDisabledDemo() {\n  return (\n    <Label>\n      <Checkbox defaultChecked disabled />\n      Updated Accept terms and conditions\n    </Label>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/checkbox-form.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/examples/checkbox-form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\n\nexport default function CheckboxFormDemo() {\n  const [loading, setLoading] = React.useState(false)\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    const accepted = formData.get(\"terms\")\n    alert(`Terms: ${accepted}`)\n  }\n  return (\n    <Form onSubmit={onSubmit} className=\"w-auto\">\n      <Field name=\"terms\">\n        <FieldLabel>\n          <Checkbox\n            name=\"terms\"\n            value=\"yes\"\n            defaultChecked\n            disabled={loading}\n          />\n          Accept terms and conditions\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 { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\n\nexport default function CheckboxFormDemo() {\n  const [loading, setLoading] = React.useState(false)\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    const accepted = formData.get(\"terms\")\n    alert(`Terms: ${accepted}`)\n  }\n  return (\n    <Form onSubmit={onSubmit} className=\"w-auto\">\n      <Field name=\"terms\">\n        <FieldLabel>\n          <Checkbox\n            name=\"terms\"\n            value=\"yes\"\n            defaultChecked\n            disabled={loading}\n          />\n          Updated Accept terms and conditions\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/checkbox-group-demo.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/checkbox-group-demo.tsx",
-      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function CheckboxGroupDemo() {\n  return (\n    <CheckboxGroup aria-label=\"Select frameworks\" defaultValue={[\"next\"]}>\n      <Label>\n        <Checkbox value=\"next\" />\n        Next.js\n      </Label>\n      <Label>\n        <Checkbox value=\"vite\" />\n        Vite\n      </Label>\n      <Label>\n        <Checkbox value=\"astro\" />\n        Astro\n      </Label>\n    </CheckboxGroup>\n  )\n}\n",
+      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function CheckboxGroupDemo() {\n  return (\n    <CheckboxGroup\n      aria-label=\"Updated Select frameworks\"\n      defaultValue={[\"next\"]}\n    >\n      <Label>\n        <Checkbox value=\"next\" />\n        Updated Next.js\n      </Label>\n      <Label>\n        <Checkbox value=\"vite\" />\n        Updated Vite\n      </Label>\n      <Label>\n        <Checkbox value=\"astro\" />\n        Updated Astro\n      </Label>\n    </CheckboxGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

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

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/checkbox-group-disabled.tsx",
-      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function CheckboxGroupDemo() {\n  return (\n    <CheckboxGroup aria-label=\"Select frameworks\" defaultValue={[\"next\"]}>\n      <Label>\n        <Checkbox value=\"next\" />\n        Next.js\n      </Label>\n      <Label>\n        <Checkbox value=\"vite\" disabled />\n        Vite\n      </Label>\n      <Label>\n        <Checkbox value=\"astro\" />\n        Astro\n      </Label>\n    </CheckboxGroup>\n  )\n}\n",
+      "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function CheckboxGroupDemo() {\n  return (\n    <CheckboxGroup\n      aria-label=\"Updated Select frameworks\"\n      defaultValue={[\"next\"]}\n    >\n      <Label>\n        <Checkbox value=\"next\" />\n        Updated Next.js\n      </Label>\n      <Label>\n        <Checkbox value=\"vite\" disabled />\n        Updated Vite\n      </Label>\n      <Label>\n        <Checkbox value=\"astro\" />\n        Updated Astro\n      </Label>\n    </CheckboxGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

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

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

package/public/r/checkbox-group-nested-parent.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/checkbox-group-nested-parent.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst mainPermissions = [\n  { id: \"view-dashboard\", name: \"View Dashboard\" },\n  { id: \"manage-users\", name: \"Manage Users\" },\n  { id: \"access-reports\", name: \"Access Reports\" },\n]\n\nconst userManagementPermissions = [\n  { id: \"create-user\", name: \"Create User\" },\n  { id: \"edit-user\", name: \"Edit User\" },\n  { id: \"delete-user\", name: \"Delete User\" },\n  { id: \"assign-roles\", name: \"Assign Roles\" },\n]\n\nexport default function CheckboxGroupNestedParentDemo() {\n  const [mainValue, setMainValue] = React.useState<string[]>([])\n  const [managementValue, setManagementValue] = React.useState<string[]>([])\n\n  const managementIsPartial =\n    managementValue.length > 0 &&\n    managementValue.length !== userManagementPermissions.length\n\n  return (\n    <CheckboxGroup\n      aria-labelledby=\"user-permissions-caption\"\n      value={mainValue}\n      onValueChange={(value) => {\n        if (value.includes(\"manage-users\")) {\n          setManagementValue(userManagementPermissions.map((p) => p.id))\n        } else if (\n          managementValue.length === userManagementPermissions.length\n        ) {\n          setManagementValue([])\n        }\n        setMainValue(value)\n      }}\n      allValues={mainPermissions.map((p) => p.id)}\n    >\n      <Label id=\"user-permissions-caption\">\n        <Checkbox parent indeterminate={managementIsPartial} />\n        User Permissions\n      </Label>\n\n      {mainPermissions\n        .filter((p) => p.id !== \"manage-users\")\n        .map((p) => (\n          <Label key={p.id} className=\"ms-4\">\n            <Checkbox value={p.id} />\n            {p.name}\n          </Label>\n        ))}\n\n      <CheckboxGroup\n        aria-labelledby=\"manage-users-caption\"\n        value={managementValue}\n        onValueChange={(value) => {\n          if (value.length === userManagementPermissions.length) {\n            setMainValue((prev) =>\n              Array.from(new Set([...prev, \"manage-users\"]))\n            )\n          } else {\n            setMainValue((prev) => prev.filter((v) => v !== \"manage-users\"))\n          }\n          setManagementValue(value)\n        }}\n        allValues={userManagementPermissions.map((p) => p.id)}\n        className=\"ms-4\"\n      >\n        <Label id=\"manage-users-caption\">\n          <Checkbox parent />\n          Manage Users\n        </Label>\n\n        {userManagementPermissions.map((p) => (\n          <Label key={p.id} className=\"ms-4\">\n            <Checkbox value={p.id} />\n            {p.name}\n          </Label>\n        ))}\n      </CheckboxGroup>\n    </CheckboxGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst mainPermissions = [\n  { id: \"view-dashboard\", name: \"Updated View Dashboard\" },\n  { id: \"manage-users\", name: \"Updated Manage Users\" },\n  { id: \"access-reports\", name: \"Updated Access Reports\" },\n]\n\nconst userManagementPermissions = [\n  { id: \"create-user\", name: \"Updated Create User\" },\n  { id: \"edit-user\", name: \"Updated Edit User\" },\n  { id: \"delete-user\", name: \"Updated Delete User\" },\n  { id: \"assign-roles\", name: \"Updated Assign Roles\" },\n]\n\nexport default function CheckboxGroupNestedParentDemo() {\n  const [mainValue, setMainValue] = React.useState<string[]>([])\n  const [managementValue, setManagementValue] = React.useState<string[]>([])\n\n  const managementIsPartial =\n    managementValue.length > 0 &&\n    managementValue.length !== userManagementPermissions.length\n\n  return (\n    <CheckboxGroup\n      aria-labelledby=\"user-permissions-caption\"\n      value={mainValue}\n      onValueChange={(value) => {\n        if (value.includes(\"manage-users\")) {\n          setManagementValue(userManagementPermissions.map((p) => p.id))\n        } else if (\n          managementValue.length === userManagementPermissions.length\n        ) {\n          setManagementValue([])\n        }\n        setMainValue(value)\n      }}\n      allValues={mainPermissions.map((p) => p.id)}\n    >\n      <Label id=\"user-permissions-caption\">\n        <Checkbox parent indeterminate={managementIsPartial} />\n        Updated User Permissions\n      </Label>\n\n      {mainPermissions\n        .filter((p) => p.id !== \"manage-users\")\n        .map((p) => (\n          <Label key={p.id} className=\"ms-4\">\n            <Checkbox value={p.id} />\n            {p.name}\n          </Label>\n        ))}\n\n      <CheckboxGroup\n        aria-labelledby=\"manage-users-caption\"\n        value={managementValue}\n        onValueChange={(value) => {\n          if (value.length === userManagementPermissions.length) {\n            setMainValue((prev) =>\n              Array.from(new Set([...prev, \"manage-users\"]))\n            )\n          } else {\n            setMainValue((prev) => prev.filter((v) => v !== \"manage-users\"))\n          }\n          setManagementValue(value)\n        }}\n        allValues={userManagementPermissions.map((p) => p.id)}\n        className=\"ms-4\"\n      >\n        <Label id=\"manage-users-caption\">\n          <Checkbox parent />\n          Updated Manage Users\n        </Label>\n\n        {userManagementPermissions.map((p) => (\n          <Label key={p.id} className=\"ms-4\">\n            <Checkbox value={p.id} />\n            {p.name}\n          </Label>\n        ))}\n      </CheckboxGroup>\n    </CheckboxGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/checkbox-group-parent.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/checkbox-group-parent.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst frameworks = [\n  { id: \"next\", name: \"Next.js\" },\n  { id: \"vite\", name: \"Vite\" },\n  { id: \"astro\", name: \"Astro\" },\n]\n\nexport default function CheckboxGroupParentDemo() {\n  const [value, setValue] = React.useState<string[]>([])\n\n  return (\n    <CheckboxGroup\n      aria-labelledby=\"frameworks-caption\"\n      value={value}\n      onValueChange={setValue}\n      allValues={frameworks.map((framework) => framework.id)}\n    >\n      <Label id=\"frameworks-caption\">\n        <Checkbox name=\"frameworks\" parent />\n        Frameworks\n      </Label>\n\n      {frameworks.map((framework) => (\n        <Label key={framework.id} className=\"ms-4\">\n          <Checkbox value={framework.id} />\n          {framework.name}\n        </Label>\n      ))}\n    </CheckboxGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst frameworks = [\n  { id: \"next\", name: \"Updated Next.js\" },\n  { id: \"vite\", name: \"Updated Vite\" },\n  { id: \"astro\", name: \"Updated Astro\" },\n]\n\nexport default function CheckboxGroupParentDemo() {\n  const [value, setValue] = React.useState<string[]>([])\n\n  return (\n    <CheckboxGroup\n      aria-labelledby=\"frameworks-caption\"\n      value={value}\n      onValueChange={setValue}\n      allValues={frameworks.map((framework) => framework.id)}\n    >\n      <Label id=\"frameworks-caption\">\n        <Checkbox name=\"frameworks\" parent />\n        Updated Frameworks\n      </Label>\n\n      {frameworks.map((framework) => (\n        <Label key={framework.id} className=\"ms-4\">\n          <Checkbox value={framework.id} />\n          {framework.name}\n        </Label>\n      ))}\n    </CheckboxGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/checkbox-tree.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox-tree",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/default/ui/checkbox-tree.tsx",
+      "content": "/**\n * IMPORTANT: This component was built for demo purposes only and has not been tested in production.\n * It serves as a proof of concept for a checkbox tree implementation.\n * If you're interested in collaborating to create a more robust, production-ready\n * headless component, your contributions are welcome!\n */\n\n\"use client\"\n\nimport React, { useCallback, useMemo, useState } from \"react\"\n\ninterface TreeNode {\n  id: string\n  label: string\n  defaultChecked?: boolean\n  children?: TreeNode[]\n}\n\nfunction useCheckboxTree(initialTree: TreeNode) {\n  const initialCheckedNodes = useMemo(() => {\n    const checkedSet = new Set<string>()\n    const initializeCheckedNodes = (node: TreeNode) => {\n      if (node.defaultChecked) {\n        checkedSet.add(node.id)\n      }\n      node.children?.forEach(initializeCheckedNodes)\n    }\n    initializeCheckedNodes(initialTree)\n    return checkedSet\n  }, [initialTree])\n\n  const [checkedNodes, setCheckedNodes] =\n    useState<Set<string>>(initialCheckedNodes)\n\n  const isChecked = useCallback(\n    (node: TreeNode): boolean | \"indeterminate\" => {\n      if (!node.children) {\n        return checkedNodes.has(node.id)\n      }\n\n      const childrenChecked = node.children.map((child) => isChecked(child))\n      if (childrenChecked.every((status) => status === true)) {\n        return true\n      }\n      if (\n        childrenChecked.some(\n          (status) => status === true || status === \"indeterminate\"\n        )\n      ) {\n        return \"indeterminate\"\n      }\n      return false\n    },\n    [checkedNodes]\n  )\n\n  const handleCheck = useCallback(\n    (node: TreeNode) => {\n      const newCheckedNodes = new Set(checkedNodes)\n\n      const toggleNode = (n: TreeNode, check: boolean) => {\n        if (check) {\n          newCheckedNodes.add(n.id)\n        } else {\n          newCheckedNodes.delete(n.id)\n        }\n        n.children?.forEach((child) => toggleNode(child, check))\n      }\n\n      const currentStatus = isChecked(node)\n      const newCheck = currentStatus !== true\n\n      toggleNode(node, newCheck)\n      setCheckedNodes(newCheckedNodes)\n    },\n    [checkedNodes, isChecked]\n  )\n\n  return { isChecked, handleCheck }\n}\n\ninterface CheckboxTreeProps {\n  tree: TreeNode\n  renderNode: (props: {\n    node: TreeNode\n    isChecked: boolean | \"indeterminate\"\n    onCheckedChange: () => void\n    children: React.ReactNode\n  }) => React.ReactNode\n}\n\nexport function CheckboxTree({ tree, renderNode }: CheckboxTreeProps) {\n  const { isChecked, handleCheck } = useCheckboxTree(tree)\n\n  const renderTreeNode = (node: TreeNode): React.ReactNode => {\n    const children = node.children?.map(renderTreeNode)\n\n    return renderNode({\n      node,\n      isChecked: isChecked(node),\n      onCheckedChange: () => handleCheck(node),\n      children,\n    })\n  }\n\n  return renderTreeNode(tree)\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/checkbox-with-description.tsx",
-      "content": "import * as React from \"react\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function CheckboxWithDescriptionDemo() {\n  const id = React.useId()\n\n  return (\n    <div className=\"flex items-start gap-2\">\n      <Checkbox id={id} defaultChecked />\n      <div className=\"flex flex-col gap-1\">\n        <Label htmlFor={id}>Accept terms and conditions</Label>\n        <p className=\"text-xs text-muted-foreground\">\n          By clicking this checkbox, you agree to the terms and conditions.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function CheckboxWithDescriptionDemo() {\n  const id = React.useId()\n\n  return (\n    <div className=\"flex items-start gap-2\">\n      <Checkbox id={id} defaultChecked />\n      <div className=\"flex flex-col gap-1\">\n        <Label htmlFor={id}>Updated Accept terms and conditions</Label>\n        <p className=\"text-xs text-muted-foreground\">\n          Updated By clicking this checkbox, you agree to the terms and\n          conditions.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/choicebox-inline.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/choicebox-inline.tsx",
-      "content": "import {\n  Choicebox,\n  ChoiceboxIndicator,\n  ChoiceboxItem,\n  ChoiceboxItemDescription,\n  ChoiceboxItemHeader,\n  ChoiceboxItemTitle,\n} from \"../../../../../packages/choicebox\"\n\nconst options = [\n  {\n    id: \"1\",\n    label: \"Option 1\",\n    description: \"This is the first option\",\n  },\n  {\n    id: \"2\",\n    label: \"Option 2\",\n    description: \"This is the second option\",\n  },\n]\n\nconst Example = () => (\n  <Choicebox\n    defaultValue=\"1\"\n    style={{\n      gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n    }}\n  >\n    {options.map((option) => (\n      <ChoiceboxItem key={option.id} value={option.id}>\n        <ChoiceboxItemHeader>\n          <ChoiceboxItemTitle>{option.label}</ChoiceboxItemTitle>\n          <ChoiceboxItemDescription>\n            {option.description}\n          </ChoiceboxItemDescription>\n        </ChoiceboxItemHeader>\n        <ChoiceboxIndicator />\n      </ChoiceboxItem>\n    ))}\n  </Choicebox>\n)\n\nexport default Example\n",
+      "content": "import {\n  Choicebox,\n  ChoiceboxIndicator,\n  ChoiceboxItem,\n  ChoiceboxItemDescription,\n  ChoiceboxItemHeader,\n  ChoiceboxItemTitle,\n} from \"../../../../../packages/choicebox\"\n\nconst options = [\n  {\n    id: \"1\",\n    label: \"Updated Option 1\",\n    description: \"Updated This is the first option\",\n  },\n  {\n    id: \"2\",\n    label: \"Updated Option 2\",\n    description: \"Updated This is the second option\",\n  },\n]\n\nconst Example = () => (\n  <Choicebox\n    defaultValue=\"1\"\n    style={{\n      gridTemplateColumns: `repeat(${options.length}, 1fr)`,\n    }}\n  >\n    {options.map((option) => (\n      <ChoiceboxItem key={option.id} value={option.id}>\n        <ChoiceboxItemHeader>\n          <ChoiceboxItemTitle>{option.label}</ChoiceboxItemTitle>\n          <ChoiceboxItemDescription>\n            {option.description}\n          </ChoiceboxItemDescription>\n        </ChoiceboxItemHeader>\n        <ChoiceboxIndicator />\n      </ChoiceboxItem>\n    ))}\n  </Choicebox>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/choicebox.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/choicebox.tsx",
-      "content": "import {\n  Choicebox,\n  ChoiceboxIndicator,\n  ChoiceboxItem,\n  ChoiceboxItemDescription,\n  ChoiceboxItemHeader,\n  ChoiceboxItemSubtitle,\n  ChoiceboxItemTitle,\n} from \"../../../../../packages/choicebox\"\n\nconst options = [\n  {\n    id: \"1\",\n    label: \"Option 1\",\n    subtitle: \"(the first option)\",\n    description: \"This is the first option\",\n  },\n  {\n    id: \"2\",\n    label: \"Option 2\",\n    subtitle: \"(the second option)\",\n    description: \"This is the second option\",\n  },\n]\n\nconst Example = () => (\n  <Choicebox defaultValue=\"1\">\n    {options.map((option) => (\n      <ChoiceboxItem key={option.id} value={option.id}>\n        <ChoiceboxItemHeader>\n          <ChoiceboxItemTitle>\n            {option.label}\n            <ChoiceboxItemSubtitle>{option.subtitle}</ChoiceboxItemSubtitle>\n          </ChoiceboxItemTitle>\n          <ChoiceboxItemDescription>\n            {option.description}\n          </ChoiceboxItemDescription>\n        </ChoiceboxItemHeader>\n        <ChoiceboxIndicator />\n      </ChoiceboxItem>\n    ))}\n  </Choicebox>\n)\n\nexport default Example\n",
+      "content": "import {\n  Choicebox,\n  ChoiceboxIndicator,\n  ChoiceboxItem,\n  ChoiceboxItemDescription,\n  ChoiceboxItemHeader,\n  ChoiceboxItemSubtitle,\n  ChoiceboxItemTitle,\n} from \"../../../../../packages/choicebox\"\n\nconst options = [\n  {\n    id: \"1\",\n    label: \"Updated Option 1\",\n    subtitle: \"Updated (the first option)\",\n    description: \"Updated This is the first option\",\n  },\n  {\n    id: \"2\",\n    label: \"Updated Option 2\",\n    subtitle: \"Updated (the second option)\",\n    description: \"Updated This is the second option\",\n  },\n]\n\nconst Example = () => (\n  <Choicebox defaultValue=\"1\">\n    {options.map((option) => (\n      <ChoiceboxItem key={option.id} value={option.id}>\n        <ChoiceboxItemHeader>\n          <ChoiceboxItemTitle>\n            {option.label}\n            <ChoiceboxItemSubtitle>{option.subtitle}</ChoiceboxItemSubtitle>\n          </ChoiceboxItemTitle>\n          <ChoiceboxItemDescription>\n            {option.description}\n          </ChoiceboxItemDescription>\n        </ChoiceboxItemHeader>\n        <ChoiceboxIndicator />\n      </ChoiceboxItem>\n    ))}\n  </Choicebox>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/codebase.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/default/examples/codebase.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { FileJson, FileText, FileType } from \"lucide-react\"\n\nimport {\n  CodeBlock,\n  CodeBlockContent,\n  CodeBlockGroup,\n  CodeBlockHeader,\n  CodeBlockIcon,\n  CodeblockShiki,\n  CopyButton,\n  type Languages,\n} from \"../../../../../packages/code-block/src\"\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"../../../../../packages/tree\"\n\ntype FileContent = {\n  name: string\n  language: Languages\n  code: string\n}\n\nconst fileContents: Record<string, FileContent> = {\n  \"server.ts\": {\n    name: \"server.ts\",\n    language: \"ts\",\n    code: `import express from 'express';\nimport { taskRouter } from './routes/tasks';\nimport { userRouter } from './routes/users';\nimport { errorHandler } from './middleware/errorHandler';\nimport { logger } from './middleware/logger';\nimport { config } from './config';\n\nconst app = express();\n\n// Middleware\napp.use(express.json());\napp.use(logger);\n\n// Routes\napp.use('/api/tasks', taskRouter);\napp.use('/api/users', userRouter);\n\n// Health check\napp.get('/health', (req, res) => {\n  res.json({ status: 'ok', timestamp: new Date().toISOString() });\n});\n\n// Error handling\napp.use(errorHandler);\n\napp.listen(config.port, () => {\n  console.log(\\`Server running on port \\${config.port}\\`);\n});`,\n  },\n  \"tasks.ts\": {\n    name: \"tasks.ts\",\n    language: \"ts\",\n    code: `import { Router } from 'express';\nimport { TaskService } from '../services/taskService';\nimport { validateTask } from '../middleware/validation';\n\nconst router = Router();\nconst taskService = new TaskService();\n\nrouter.get('/', async (req, res, next) => {\n  try {\n    const tasks = await taskService.getAll();\n    res.json(tasks);\n  } catch (error) {\n    next(error);\n  }\n});\n\nrouter.get('/:id', async (req, res, next) => {\n  try {\n    const task = await taskService.getById(req.params.id);\n    if (!task) {\n      return res.status(404).json({ error: 'Task not found' });\n    }\n    res.json(task);\n  } catch (error) {\n    next(error);\n  }\n});\n\nrouter.post('/', validateTask, async (req, res, next) => {\n  try {\n    const task = await taskService.create(req.body);\n    res.status(201).json(task);\n  } catch (error) {\n    next(error);\n  }\n});\n\nrouter.put('/:id', validateTask, async (req, res, next) => {\n  try {\n    const task = await taskService.update(req.params.id, req.body);\n    res.json(task);\n  } catch (error) {\n    next(error);\n  }\n});\n\nrouter.delete('/:id', async (req, res, next) => {\n  try {\n    await taskService.delete(req.params.id);\n    res.status(204).send();\n  } catch (error) {\n    next(error);\n  }\n});\n\nexport { router as taskRouter };`,\n  },\n  \"users.ts\": {\n    name: \"users.ts\",\n    language: \"ts\",\n    code: `import { Router } from 'express';\nimport { UserService } from '../services/userService';\nimport { validateUser } from '../middleware/validation';\n\nconst router = Router();\nconst userService = new UserService();\n\nrouter.get('/', async (req, res, next) => {\n  try {\n    const users = await userService.getAll();\n    res.json(users);\n  } catch (error) {\n    next(error);\n  }\n});\n\nrouter.get('/:id', async (req, res, next) => {\n  try {\n    const user = await userService.getById(req.params.id);\n    if (!user) {\n      return res.status(404).json({ error: 'User not found' });\n    }\n    res.json(user);\n  } catch (error) {\n    next(error);\n  }\n});\n\nrouter.post('/', validateUser, async (req, res, next) => {\n  try {\n    const user = await userService.create(req.body);\n    res.status(201).json(user);\n  } catch (error) {\n    next(error);\n  }\n});\n\nexport { router as userRouter };`,\n  },\n  \"taskService.ts\": {\n    name: \"taskService.ts\",\n    language: \"ts\",\n    code: `import { db } from '../db';\nimport type { Task, CreateTaskInput, UpdateTaskInput } from '../types';\n\nexport class TaskService {\n  async getAll(): Promise<Task[]> {\n    return db.tasks.findMany({\n      orderBy: { createdAt: 'desc' },\n    });\n  }\n\n  async getById(id: string): Promise<Task | null> {\n    return db.tasks.findUnique({\n      where: { id },\n    });\n  }\n\n  async create(data: CreateTaskInput): Promise<Task> {\n    return db.tasks.create({\n      data: {\n        ...data,\n        status: 'pending',\n        createdAt: new Date(),\n      },\n    });\n  }\n\n  async update(id: string, data: UpdateTaskInput): Promise<Task> {\n    return db.tasks.update({\n      where: { id },\n      data: {\n        ...data,\n        updatedAt: new Date(),\n      },\n    });\n  }\n\n  async delete(id: string): Promise<void> {\n    await db.tasks.delete({\n      where: { id },\n    });\n  }\n}`,\n  },\n  \"userService.ts\": {\n    name: \"userService.ts\",\n    language: \"ts\",\n    code: `import { db } from '../db';\nimport { hashPassword } from '../utils/crypto';\nimport type { User, CreateUserInput } from '../types';\n\nexport class UserService {\n  async getAll(): Promise<User[]> {\n    return db.users.findMany({\n      select: {\n        id: true,\n        email: true,\n        name: true,\n        createdAt: true,\n      },\n    });\n  }\n\n  async getById(id: string): Promise<User | null> {\n    return db.users.findUnique({\n      where: { id },\n      select: {\n        id: true,\n        email: true,\n        name: true,\n        createdAt: true,\n      },\n    });\n  }\n\n  async create(data: CreateUserInput): Promise<User> {\n    const hashedPassword = await hashPassword(data.password);\n    \n    return db.users.create({\n      data: {\n        ...data,\n        password: hashedPassword,\n        createdAt: new Date(),\n      },\n      select: {\n        id: true,\n        email: true,\n        name: true,\n        createdAt: true,\n      },\n    });\n  }\n}`,\n  },\n  \"errorHandler.ts\": {\n    name: \"errorHandler.ts\",\n    language: \"ts\",\n    code: `import type { Request, Response, NextFunction } from 'express';\n\nexport class AppError extends Error {\n  constructor(\n    public statusCode: number,\n    public message: string,\n    public isOperational = true\n  ) {\n    super(message);\n    Object.setPrototypeOf(this, AppError.prototype);\n  }\n}\n\nexport const errorHandler = (\n  err: Error | AppError,\n  req: Request,\n  res: Response,\n  next: NextFunction\n) => {\n  if (err instanceof AppError) {\n    return res.status(err.statusCode).json({\n      status: 'error',\n      message: err.message,\n    });\n  }\n\n  console.error('Unexpected error:', err);\n  \n  res.status(500).json({\n    status: 'error',\n    message: 'Internal server error',\n  });\n};`,\n  },\n  \"logger.ts\": {\n    name: \"logger.ts\",\n    language: \"ts\",\n    code: `import type { Request, Response, NextFunction } from 'express';\n\nexport const logger = (req: Request, res: Response, next: NextFunction) => {\n  const start = Date.now();\n  \n  res.on('finish', () => {\n    const duration = Date.now() - start;\n    const log = {\n      method: req.method,\n      url: req.url,\n      status: res.statusCode,\n      duration: \\`\\${duration}ms\\`,\n      timestamp: new Date().toISOString(),\n    };\n    \n    console.log(JSON.stringify(log));\n  });\n  \n  next();\n};`,\n  },\n  \"validation.ts\": {\n    name: \"validation.ts\",\n    language: \"ts\",\n    code: `import type { Request, Response, NextFunction } from 'express';\nimport { AppError } from './errorHandler';\n\nexport const validateTask = (\n  req: Request,\n  res: Response,\n  next: NextFunction\n) => {\n  const { title, description } = req.body;\n\n  if (!title || typeof title !== 'string') {\n    throw new AppError(400, 'Title is required and must be a string');\n  }\n\n  if (title.length < 3 || title.length > 100) {\n    throw new AppError(400, 'Title must be between 3 and 100 characters');\n  }\n\n  if (description && typeof description !== 'string') {\n    throw new AppError(400, 'Description must be a string');\n  }\n\n  next();\n};\n\nexport const validateUser = (\n  req: Request,\n  res: Response,\n  next: NextFunction\n) => {\n  const { email, password, name } = req.body;\n\n  if (!email || !email.includes('@')) {\n    throw new AppError(400, 'Valid email is required');\n  }\n\n  if (!password || password.length < 8) {\n    throw new AppError(400, 'Password must be at least 8 characters');\n  }\n\n  if (!name || typeof name !== 'string') {\n    throw new AppError(400, 'Name is required');\n  }\n\n  next();\n};`,\n  },\n  \"types.ts\": {\n    name: \"types.ts\",\n    language: \"ts\",\n    code: `export type TaskStatus = 'pending' | 'in_progress' | 'completed';\n\nexport interface Task {\n  id: string;\n  title: string;\n  description?: string;\n  status: TaskStatus;\n  createdAt: Date;\n  updatedAt?: Date;\n}\n\nexport interface CreateTaskInput {\n  title: string;\n  description?: string;\n}\n\nexport interface UpdateTaskInput {\n  title?: string;\n  description?: string;\n  status?: TaskStatus;\n}\n\nexport interface User {\n  id: string;\n  email: string;\n  name: string;\n  createdAt: Date;\n}\n\nexport interface CreateUserInput {\n  email: string;\n  password: string;\n  name: string;\n}`,\n  },\n  \"config.ts\": {\n    name: \"config.ts\",\n    language: \"ts\",\n    code: `export const config = {\n  port: process.env.PORT || 3000,\n  nodeEnv: process.env.NODE_ENV || 'development',\n  database: {\n    url: process.env.DATABASE_URL || 'postgresql://localhost:5432/taskdb',\n  },\n  jwt: {\n    secret: process.env.JWT_SECRET || 'your-secret-key',\n    expiresIn: '7d',\n  },\n} as const;`,\n  },\n  \"package.json\": {\n    name: \"package.json\",\n    language: \"json\",\n    code: `{\n  \"name\": \"task-api\",\n  \"version\": \"1.0.0\",\n  \"description\": \"RESTful API for task management\",\n  \"main\": \"dist/server.js\",\n  \"scripts\": {\n    \"dev\": \"tsx watch src/server.ts\",\n    \"build\": \"tsc\",\n    \"start\": \"node dist/server.js\",\n    \"test\": \"jest\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.18.2\",\n    \"prisma\": \"^5.7.0\",\n    \"@prisma/client\": \"^5.7.0\",\n    \"bcrypt\": \"^5.1.1\",\n    \"jsonwebtoken\": \"^9.0.2\",\n    \"zod\": \"^3.22.4\"\n  },\n  \"devDependencies\": {\n    \"@types/express\": \"^4.17.21\",\n    \"@types/node\": \"^20.10.5\",\n    \"@types/bcrypt\": \"^5.0.2\",\n    \"tsx\": \"^4.7.0\",\n    \"typescript\": \"^5.3.3\"\n  }\n}`,\n  },\n  \"README.md\": {\n    name: \"README.md\",\n    language: \"mdx\",\n    code: `# Task Management API\n\nA RESTful API built with Express and TypeScript for managing tasks and users.\n\n## Features\n\n- 📝 Full CRUD operations for tasks\n- 👥 User management\n- ✅ Input validation\n- 🔒 Error handling\n- 📊 Request logging\n- 🗄️ PostgreSQL database with Prisma\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- PostgreSQL\n\n### Installation\n\n\\`\\`\\`bash\nnpm install\n\\`\\`\\`\n\n### Environment Variables\n\nCreate a \\`.env\\` file:\n\n\\`\\`\\`env\nPORT=3000\nDATABASE_URL=postgresql://localhost:5432/taskdb\nJWT_SECRET=your-secret-key\n\\`\\`\\`\n\n### Database Setup\n\n\\`\\`\\`bash\nnpx prisma migrate dev\n\\`\\`\\`\n\n### Run\n\n\\`\\`\\`bash\nnpm run dev\n\\`\\`\\`\n\n## API Endpoints\n\n### Tasks\n\n- \\`GET /api/tasks\\` - Get all tasks\n- \\`GET /api/tasks/:id\\` - Get task by ID\n- \\`POST /api/tasks\\` - Create task\n- \\`PUT /api/tasks/:id\\` - Update task\n- \\`DELETE /api/tasks/:id\\` - Delete task\n\n### Users\n\n- \\`GET /api/users\\` - Get all users\n- \\`GET /api/users/:id\\` - Get user by ID\n- \\`POST /api/users\\` - Create user\n\n## Project Structure\n\n\\`\\`\\`\nsrc/\n├── routes/          # API routes\n├── services/        # Business logic\n├── middleware/      # Express middleware\n├── types.ts         # TypeScript types\n├── config.ts        # Configuration\n└── server.ts        # Entry point\n\\`\\`\\``,\n  },\n}\n\nexport default function CodebaseExample() {\n  const [selectedFile, setSelectedFile] = useState<string>(\"server.ts\")\n  const fallbackFile = fileContents[\"server.ts\"]\n\n  if (!fallbackFile) {\n    return null\n  }\n\n  const activeFile = fileContents[selectedFile] ?? fallbackFile\n\n  const handleFileSelect = (fileId: string) => {\n    if (fileContents[fileId]) {\n      setSelectedFile(fileId)\n    }\n  }\n\n  return (\n    <div className=\"grid size-full grid-cols-[300px_1fr] divide-x overflow-hidden\">\n      {/* File Explorer */}\n      <div className=\"size-full overflow-y-auto\">\n        <TreeProvider\n          defaultExpandedIds={[\"src\", \"routes\", \"services\", \"middleware\"]}\n          onSelectionChange={(ids) => {\n            const firstId = ids[0]\n            if (firstId) {\n              handleFileSelect(firstId)\n            }\n          }}\n          selectedIds={[selectedFile]}\n        >\n          <TreeView>\n            <TreeNode nodeId=\"src\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>src</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={1} nodeId=\"routes\">\n                  <TreeNodeTrigger>\n                    <TreeExpander hasChildren />\n                    <TreeIcon hasChildren />\n                    <TreeLabel>routes</TreeLabel>\n                  </TreeNodeTrigger>\n                  <TreeNodeContent hasChildren>\n                    <TreeNode level={2} nodeId=\"tasks.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>tasks.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode isLast level={2} nodeId=\"users.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>users.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                  </TreeNodeContent>\n                </TreeNode>\n                <TreeNode level={1} nodeId=\"services\">\n                  <TreeNodeTrigger>\n                    <TreeExpander hasChildren />\n                    <TreeIcon hasChildren />\n                    <TreeLabel>services</TreeLabel>\n                  </TreeNodeTrigger>\n                  <TreeNodeContent hasChildren>\n                    <TreeNode level={2} nodeId=\"taskService.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>taskService.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode isLast level={2} nodeId=\"userService.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>userService.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                  </TreeNodeContent>\n                </TreeNode>\n                <TreeNode level={1} nodeId=\"middleware\">\n                  <TreeNodeTrigger>\n                    <TreeExpander hasChildren />\n                    <TreeIcon hasChildren />\n                    <TreeLabel>middleware</TreeLabel>\n                  </TreeNodeTrigger>\n                  <TreeNodeContent hasChildren>\n                    <TreeNode level={2} nodeId=\"errorHandler.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>errorHandler.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode level={2} nodeId=\"logger.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>logger.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode isLast level={2} nodeId=\"validation.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>validation.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                  </TreeNodeContent>\n                </TreeNode>\n                <TreeNode level={1} nodeId=\"types.ts\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                    <TreeLabel>types.ts</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode level={1} nodeId=\"config.ts\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                    <TreeLabel>config.ts</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={1} nodeId=\"server.ts\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                    <TreeLabel>server.ts</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n            <TreeNode nodeId=\"package.json\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon icon={<FileJson className=\"h-4 w-4\" />} />\n                <TreeLabel>package.json</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n            <TreeNode isLast nodeId=\"README.md\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon icon={<FileText className=\"h-4 w-4\" />} />\n                <TreeLabel>README.md</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n          </TreeView>\n        </TreeProvider>\n      </div>\n\n      {/* Code Viewer */}\n      <CodeBlock className=\"size-full overflow-y-auto rounded-none border-none\">\n        <CodeBlockHeader>\n          <CodeBlockGroup>\n            <CodeBlockIcon language={activeFile.language} />\n            <span>{activeFile.name}</span>\n          </CodeBlockGroup>\n          <CopyButton content={activeFile.code} />\n        </CodeBlockHeader>\n        <CodeBlockContent className=\"h-[calc(100%-2.25rem)] rounded-none\">\n          <CodeblockShiki\n            code={activeFile.code}\n            language={activeFile.language}\n            lineNumbers\n          />\n        </CodeBlockContent>\n      </CodeBlock>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { FileJson, FileText, FileType } from \"lucide-react\"\n\nimport {\n  CodeBlock,\n  CodeBlockContent,\n  CodeBlockGroup,\n  CodeBlockHeader,\n  CodeBlockIcon,\n  CodeblockShiki,\n  CopyButton,\n  type Languages,\n} from \"../../../../../packages/code-block/src\"\nimport {\n  TreeExpander,\n  TreeIcon,\n  TreeLabel,\n  TreeNode,\n  TreeNodeContent,\n  TreeNodeTrigger,\n  TreeProvider,\n  TreeView,\n} from \"../../../../../packages/tree\"\n\ntype FileContent = {\n  name: string\n  language: Languages\n  code: string\n}\n\nconst fileContents: Record<string, FileContent> = {\n  \"server.ts\": {\n    name: \"server.ts\",\n    language: \"ts\",\n    code: `import express from 'express';\nimport { taskRouter } from './routes/tasks';\nimport { userRouter } from './routes/users';\nimport { errorHandler } from './middleware/errorHandler';\nimport { logger } from './middleware/logger';\nimport { config } from './config';\n\nconst app = express();\n\n// Middleware\napp.use(express.json());\napp.use(logger);\n\n// Routes\napp.use('/api/tasks', taskRouter);\napp.use('/api/users', userRouter);\n\n// Health check\napp.get('/health', (req, res) => {\n  res.json({ status: 'ok', timestamp: new Date().toISOString() });\n});\n\n// Error handling\napp.use(errorHandler);\n\napp.listen(config.port, () => {\n  console.log(\\`Server running on port \\${config.port}\\`);\n});`,\n  },\n  \"tasks.ts\": {\n    name: \"tasks.ts\",\n    language: \"ts\",\n    code: `import { Router } from 'express';\nimport { TaskService } from '../services/taskService';\nimport { validateTask } from '../middleware/validation';\n\nconst router = Router();\nconst taskService = new TaskService();\n\nrouter.get('/', async (req, res, next) => {\n  try {\n    const tasks = await taskService.getAll();\n    res.json(tasks);\n  } catch (error) {\n    next(error);\n  }\n});\n\nrouter.get('/:id', async (req, res, next) => {\n  try {\n    const task = await taskService.getById(req.params.id);\n    if (!task) {\n      return res.status(404).json({ error: 'Task not found' });\n    }\n    res.json(task);\n  } catch (error) {\n    next(error);\n  }\n});\n\nrouter.post('/', validateTask, async (req, res, next) => {\n  try {\n    const task = await taskService.create(req.body);\n    res.status(201).json(task);\n  } catch (error) {\n    next(error);\n  }\n});\n\nrouter.put('/:id', validateTask, async (req, res, next) => {\n  try {\n    const task = await taskService.update(req.params.id, req.body);\n    res.json(task);\n  } catch (error) {\n    next(error);\n  }\n});\n\nrouter.delete('/:id', async (req, res, next) => {\n  try {\n    await taskService.delete(req.params.id);\n    res.status(204).send();\n  } catch (error) {\n    next(error);\n  }\n});\n\nexport { router as taskRouter };`,\n  },\n  \"users.ts\": {\n    name: \"users.ts\",\n    language: \"ts\",\n    code: `import { Router } from 'express';\nimport { UserService } from '../services/userService';\nimport { validateUser } from '../middleware/validation';\n\nconst router = Router();\nconst userService = new UserService();\n\nrouter.get('/', async (req, res, next) => {\n  try {\n    const users = await userService.getAll();\n    res.json(users);\n  } catch (error) {\n    next(error);\n  }\n});\n\nrouter.get('/:id', async (req, res, next) => {\n  try {\n    const user = await userService.getById(req.params.id);\n    if (!user) {\n      return res.status(404).json({ error: 'User not found' });\n    }\n    res.json(user);\n  } catch (error) {\n    next(error);\n  }\n});\n\nrouter.post('/', validateUser, async (req, res, next) => {\n  try {\n    const user = await userService.create(req.body);\n    res.status(201).json(user);\n  } catch (error) {\n    next(error);\n  }\n});\n\nexport { router as userRouter };`,\n  },\n  \"taskService.ts\": {\n    name: \"Updated taskService.ts\",\n    language: \"ts\",\n    code: `import { db } from '../db';\nimport type { Task, CreateTaskInput, UpdateTaskInput } from '../types';\n\nexport class TaskService {\n  async getAll(): Promise<Task[]> {\n    return db.tasks.findMany({\n      orderBy: { createdAt: 'desc' },\n    });\n  }\n\n  async getById(id: string): Promise<Task | null> {\n    return db.tasks.findUnique({\n      where: { id },\n    });\n  }\n\n  async create(data: CreateTaskInput): Promise<Task> {\n    return db.tasks.create({\n      data: {\n        ...data,\n        status: 'pending',\n        createdAt: new Date(),\n      },\n    });\n  }\n\n  async update(id: string, data: UpdateTaskInput): Promise<Task> {\n    return db.tasks.update({\n      where: { id },\n      data: {\n        ...data,\n        updatedAt: new Date(),\n      },\n    });\n  }\n\n  async delete(id: string): Promise<void> {\n    await db.tasks.delete({\n      where: { id },\n    });\n  }\n}`,\n  },\n  \"userService.ts\": {\n    name: \"Updated userService.ts\",\n    language: \"ts\",\n    code: `import { db } from '../db';\nimport { hashPassword } from '../utils/crypto';\nimport type { User, CreateUserInput } from '../types';\n\nexport class UserService {\n  async getAll(): Promise<User[]> {\n    return db.users.findMany({\n      select: {\n        id: true,\n        email: true,\n        name: true,\n        createdAt: true,\n      },\n    });\n  }\n\n  async getById(id: string): Promise<User | null> {\n    return db.users.findUnique({\n      where: { id },\n      select: {\n        id: true,\n        email: true,\n        name: true,\n        createdAt: true,\n      },\n    });\n  }\n\n  async create(data: CreateUserInput): Promise<User> {\n    const hashedPassword = await hashPassword(data.password);\n    \n    return db.users.create({\n      data: {\n        ...data,\n        password: hashedPassword,\n        createdAt: new Date(),\n      },\n      select: {\n        id: true,\n        email: true,\n        name: true,\n        createdAt: true,\n      },\n    });\n  }\n}`,\n  },\n  \"errorHandler.ts\": {\n    name: \"Updated errorHandler.ts\",\n    language: \"ts\",\n    code: `import type { Request, Response, NextFunction } from 'express';\n\nexport class AppError extends Error {\n  constructor(\n    public statusCode: number,\n    public message: string,\n    public isOperational = true\n  ) {\n    super(message);\n    Object.setPrototypeOf(this, AppError.prototype);\n  }\n}\n\nexport const errorHandler = (\n  err: Error | AppError,\n  req: Request,\n  res: Response,\n  next: NextFunction\n) => {\n  if (err instanceof AppError) {\n    return res.status(err.statusCode).json({\n      status: 'error',\n      message: err.message,\n    });\n  }\n\n  console.error('Unexpected error:', err);\n  \n  res.status(500).json({\n    status: 'error',\n    message: 'Internal server error',\n  });\n};`,\n  },\n  \"logger.ts\": {\n    name: \"logger.ts\",\n    language: \"ts\",\n    code: `import type { Request, Response, NextFunction } from 'express';\n\nexport const logger = (req: Request, res: Response, next: NextFunction) => {\n  const start = Date.now();\n  \n  res.on('finish', () => {\n    const duration = Date.now() - start;\n    const log = {\n      method: req.method,\n      url: req.url,\n      status: res.statusCode,\n      duration: \\`\\${duration}ms\\`,\n      timestamp: new Date().toISOString(),\n    };\n    \n    console.log(JSON.stringify(log));\n  });\n  \n  next();\n};`,\n  },\n  \"validation.ts\": {\n    name: \"validation.ts\",\n    language: \"ts\",\n    code: `import type { Request, Response, NextFunction } from 'express';\nimport { AppError } from './errorHandler';\n\nexport const validateTask = (\n  req: Request,\n  res: Response,\n  next: NextFunction\n) => {\n  const { title, description } = req.body;\n\n  if (!title || typeof title !== 'string') {\n    throw new AppError(400, 'Title is required and must be a string');\n  }\n\n  if (title.length < 3 || title.length > 100) {\n    throw new AppError(400, 'Title must be between 3 and 100 characters');\n  }\n\n  if (description && typeof description !== 'string') {\n    throw new AppError(400, 'Description must be a string');\n  }\n\n  next();\n};\n\nexport const validateUser = (\n  req: Request,\n  res: Response,\n  next: NextFunction\n) => {\n  const { email, password, name } = req.body;\n\n  if (!email || !email.includes('@')) {\n    throw new AppError(400, 'Valid email is required');\n  }\n\n  if (!password || password.length < 8) {\n    throw new AppError(400, 'Password must be at least 8 characters');\n  }\n\n  if (!name || typeof name !== 'string') {\n    throw new AppError(400, 'Name is required');\n  }\n\n  next();\n};`,\n  },\n  \"types.ts\": {\n    name: \"types.ts\",\n    language: \"ts\",\n    code: `export type TaskStatus = 'pending' | 'in_progress' | 'completed';\n\nexport interface Task {\n  id: string;\n  title: string;\n  description?: string;\n  status: TaskStatus;\n  createdAt: Date;\n  updatedAt?: Date;\n}\n\nexport interface CreateTaskInput {\n  title: string;\n  description?: string;\n}\n\nexport interface UpdateTaskInput {\n  title?: string;\n  description?: string;\n  status?: TaskStatus;\n}\n\nexport interface User {\n  id: string;\n  email: string;\n  name: string;\n  createdAt: Date;\n}\n\nexport interface CreateUserInput {\n  email: string;\n  password: string;\n  name: string;\n}`,\n  },\n  \"config.ts\": {\n    name: \"config.ts\",\n    language: \"ts\",\n    code: `export const config = {\n  port: process.env.PORT || 3000,\n  nodeEnv: process.env.NODE_ENV || 'development',\n  database: {\n    url: process.env.DATABASE_URL || 'postgresql://localhost:5432/taskdb',\n  },\n  jwt: {\n    secret: process.env.JWT_SECRET || 'your-secret-key',\n    expiresIn: '7d',\n  },\n} as const;`,\n  },\n  \"package.json\": {\n    name: \"package.json\",\n    language: \"json\",\n    code: `{\n  \"name\": \"task-api\",\n  \"version\": \"1.0.0\",\n  \"description\": \"RESTful API for task management\",\n  \"main\": \"dist/server.js\",\n  \"scripts\": {\n    \"dev\": \"tsx watch src/server.ts\",\n    \"build\": \"tsc\",\n    \"start\": \"node dist/server.js\",\n    \"test\": \"jest\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.18.2\",\n    \"prisma\": \"^5.7.0\",\n    \"@prisma/client\": \"^5.7.0\",\n    \"bcrypt\": \"^5.1.1\",\n    \"jsonwebtoken\": \"^9.0.2\",\n    \"zod\": \"^3.22.4\"\n  },\n  \"devDependencies\": {\n    \"@types/express\": \"^4.17.21\",\n    \"@types/node\": \"^20.10.5\",\n    \"@types/bcrypt\": \"^5.0.2\",\n    \"tsx\": \"^4.7.0\",\n    \"typescript\": \"^5.3.3\"\n  }\n}`,\n  },\n  \"README.md\": {\n    name: \"Updated README.md\",\n    language: \"mdx\",\n    code: `# Task Management API\n\nA RESTful API built with Express and TypeScript for managing tasks and users.\n\n## Features\n\n- 📝 Full CRUD operations for tasks\n- 👥 User management\n- ✅ Input validation\n- 🔒 Error handling\n- 📊 Request logging\n- 🗄️ PostgreSQL database with Prisma\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- PostgreSQL\n\n### Installation\n\n\\`\\`\\`bash\nnpm install\n\\`\\`\\`\n\n### Environment Variables\n\nCreate a \\`.env\\` file:\n\n\\`\\`\\`env\nPORT=3000\nDATABASE_URL=postgresql://localhost:5432/taskdb\nJWT_SECRET=your-secret-key\n\\`\\`\\`\n\n### Database Setup\n\n\\`\\`\\`bash\nnpx prisma migrate dev\n\\`\\`\\`\n\n### Run\n\n\\`\\`\\`bash\nnpm run dev\n\\`\\`\\`\n\n## API Endpoints\n\n### Tasks\n\n- \\`GET /api/tasks\\` - Get all tasks\n- \\`GET /api/tasks/:id\\` - Get task by ID\n- \\`POST /api/tasks\\` - Create task\n- \\`PUT /api/tasks/:id\\` - Update task\n- \\`DELETE /api/tasks/:id\\` - Delete task\n\n### Users\n\n- \\`GET /api/users\\` - Get all users\n- \\`GET /api/users/:id\\` - Get user by ID\n- \\`POST /api/users\\` - Create user\n\n## Project Structure\n\n\\`\\`\\`\nsrc/\n├── routes/          # API routes\n├── services/        # Business logic\n├── middleware/      # Express middleware\n├── types.ts         # TypeScript types\n├── config.ts        # Configuration\n└── server.ts        # Entry point\n\\`\\`\\``,\n  },\n}\n\nexport default function CodebaseExample() {\n  const [selectedFile, setSelectedFile] = useState<string>(\"server.ts\")\n  const fallbackFile = fileContents[\"server.ts\"]\n\n  if (!fallbackFile) {\n    return null\n  }\n\n  const activeFile = fileContents[selectedFile] ?? fallbackFile\n\n  const handleFileSelect = (fileId: string) => {\n    if (fileContents[fileId]) {\n      setSelectedFile(fileId)\n    }\n  }\n\n  return (\n    <div className=\"grid size-full grid-cols-[300px_1fr] divide-x overflow-hidden\">\n      {/* File Explorer */}\n      <div className=\"size-full overflow-y-auto\">\n        <TreeProvider\n          defaultExpandedIds={[\"src\", \"routes\", \"services\", \"middleware\"]}\n          onSelectionChange={(ids) => {\n            const firstId = ids[0]\n            if (firstId) {\n              handleFileSelect(firstId)\n            }\n          }}\n          selectedIds={[selectedFile]}\n        >\n          <TreeView>\n            <TreeNode nodeId=\"src\">\n              <TreeNodeTrigger>\n                <TreeExpander hasChildren />\n                <TreeIcon hasChildren />\n                <TreeLabel>src</TreeLabel>\n              </TreeNodeTrigger>\n              <TreeNodeContent hasChildren>\n                <TreeNode level={1} nodeId=\"routes\">\n                  <TreeNodeTrigger>\n                    <TreeExpander hasChildren />\n                    <TreeIcon hasChildren />\n                    <TreeLabel>routes</TreeLabel>\n                  </TreeNodeTrigger>\n                  <TreeNodeContent hasChildren>\n                    <TreeNode level={2} nodeId=\"tasks.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>tasks.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode isLast level={2} nodeId=\"users.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>users.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                  </TreeNodeContent>\n                </TreeNode>\n                <TreeNode level={1} nodeId=\"services\">\n                  <TreeNodeTrigger>\n                    <TreeExpander hasChildren />\n                    <TreeIcon hasChildren />\n                    <TreeLabel>services</TreeLabel>\n                  </TreeNodeTrigger>\n                  <TreeNodeContent hasChildren>\n                    <TreeNode level={2} nodeId=\"taskService.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>Updated taskService.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode isLast level={2} nodeId=\"userService.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>Updated userService.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                  </TreeNodeContent>\n                </TreeNode>\n                <TreeNode level={1} nodeId=\"middleware\">\n                  <TreeNodeTrigger>\n                    <TreeExpander hasChildren />\n                    <TreeIcon hasChildren />\n                    <TreeLabel>middleware</TreeLabel>\n                  </TreeNodeTrigger>\n                  <TreeNodeContent hasChildren>\n                    <TreeNode level={2} nodeId=\"errorHandler.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>Updated errorHandler.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode level={2} nodeId=\"logger.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>logger.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                    <TreeNode isLast level={2} nodeId=\"validation.ts\">\n                      <TreeNodeTrigger>\n                        <TreeExpander />\n                        <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                        <TreeLabel>validation.ts</TreeLabel>\n                      </TreeNodeTrigger>\n                    </TreeNode>\n                  </TreeNodeContent>\n                </TreeNode>\n                <TreeNode level={1} nodeId=\"types.ts\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                    <TreeLabel>types.ts</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode level={1} nodeId=\"config.ts\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                    <TreeLabel>config.ts</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n                <TreeNode isLast level={1} nodeId=\"server.ts\">\n                  <TreeNodeTrigger>\n                    <TreeExpander />\n                    <TreeIcon icon={<FileType className=\"h-4 w-4\" />} />\n                    <TreeLabel>server.ts</TreeLabel>\n                  </TreeNodeTrigger>\n                </TreeNode>\n              </TreeNodeContent>\n            </TreeNode>\n            <TreeNode nodeId=\"package.json\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon icon={<FileJson className=\"h-4 w-4\" />} />\n                <TreeLabel>package.json</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n            <TreeNode isLast nodeId=\"README.md\">\n              <TreeNodeTrigger>\n                <TreeExpander />\n                <TreeIcon icon={<FileText className=\"h-4 w-4\" />} />\n                <TreeLabel>Updated README.md</TreeLabel>\n              </TreeNodeTrigger>\n            </TreeNode>\n          </TreeView>\n        </TreeProvider>\n      </div>\n\n      {/* Code Viewer */}\n      <CodeBlock className=\"size-full overflow-y-auto rounded-none border-none\">\n        <CodeBlockHeader>\n          <CodeBlockGroup>\n            <CodeBlockIcon language={activeFile.language} />\n            <span>{activeFile.name}</span>\n          </CodeBlockGroup>\n          <CopyButton content={activeFile.code} />\n        </CodeBlockHeader>\n        <CodeBlockContent className=\"h-[calc(100%-2.25rem)] rounded-none\">\n          <CodeblockShiki\n            code={activeFile.code}\n            language={activeFile.language}\n            lineNumbers\n          />\n        </CodeBlockContent>\n      </CodeBlock>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/collaborative-canvas.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "registry/default/examples/collaborative-canvas.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport Image from \"next/image\"\n\nimport { AvatarStack } from \"../../../../../packages/avatar-stack\"\nimport {\n  Cursor,\n  CursorBody,\n  CursorMessage,\n  CursorName,\n  CursorPointer,\n} from \"../../../../../packages/cursor\"\nimport { cn } from \"../../../../../packages/ui/src/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"../../../../../packages/ui/src/ui/avatar\"\n\nconst users = [\n  {\n    id: 1,\n    name: \"Connor Love\",\n    avatar: \"https://github.com/loveconnor.png\",\n  },\n  {\n    id: 2,\n    name: \"Thomas Raklovits\",\n    avatar: \"https://github.com/monster0506.png\",\n    message: \"I'm not sure if this is working...\",\n  },\n  {\n    id: 3,\n    name: \"Charlie Cambell\",\n    avatar: \"https://github.com/loveconnor.png\",\n  },\n]\n\nconst colors = [\n  {\n    foreground: \"text-emerald-800\",\n    background: \"bg-emerald-50\",\n  },\n  {\n    foreground: \"text-rose-800\",\n    background: \"bg-rose-50\",\n  },\n  {\n    foreground: \"text-sky-800\",\n    background: \"bg-sky-50\",\n  },\n]\n\n// Helper function to generate random position\nconst getRandomPosition = () => ({\n  x: Math.floor(Math.random() * 80) + 10, // Keep within 10-90% range\n  y: Math.floor(Math.random() * 80) + 10, // Keep within 10-90% range\n})\n\nconst Example = () => {\n  const [user1Position, setUser1Position] = useState({\n    x: 10,\n    y: 8,\n  })\n  const [user2Position, setUser2Position] = useState({\n    x: 30,\n    y: 40,\n  })\n  const [user3Position, setUser3Position] = useState({\n    x: 70,\n    y: 50,\n  })\n\n  // Store all user positions in a single array for easier access\n  const userPositions = [user1Position, user2Position, user3Position]\n\n  // Create separate useEffects for each user to move at different intervals\n  useEffect(() => {\n    const interval = setInterval(\n      () => {\n        setUser1Position(getRandomPosition())\n      },\n      Math.random() * 3000 + 2000\n    ) // Random interval between 2-5 seconds\n\n    return () => clearInterval(interval)\n  }, [])\n\n  useEffect(() => {\n    const interval = setInterval(\n      () => {\n        setUser2Position(getRandomPosition())\n      },\n      Math.random() * 4000 + 3000\n    ) // Random interval between 3-7 seconds\n\n    return () => clearInterval(interval)\n  }, [])\n\n  useEffect(() => {\n    const interval = setInterval(\n      () => {\n        setUser3Position(getRandomPosition())\n      },\n      Math.random() * 2500 + 1500\n    ) // Random interval between 1.5-4 seconds\n\n    return () => clearInterval(interval)\n  }, [])\n\n  // Assign positions to users\n  const usersWithPositions = users.map((user, index) => ({\n    ...user,\n    position: userPositions[index],\n  }))\n\n  return (\n    <div className=\"relative aspect-[4/3] size-full bg-[radial-gradient(var(--color-secondary),transparent_1px)] [background-size:16px_16px]\">\n      <div className=\"absolute top-8 right-8\">\n        <AvatarStack animate size={32}>\n          {usersWithPositions.map((user) => (\n            <Avatar key={user.id}>\n              <AvatarImage className=\"mt-0 mb-0\" src={user.avatar} />\n              <AvatarFallback>{user.name.slice(0, 2)}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarStack>\n      </div>\n      {usersWithPositions.map((user, index) => (\n        <Cursor\n          className=\"absolute transition-all duration-1000\"\n          key={user.id}\n          style={{\n            top: `${user.position.y}%`,\n            left: `${user.position.x}%`,\n          }}\n        >\n          <CursorPointer\n            className={cn(colors[index % colors.length].foreground)}\n          />\n          <CursorBody\n            className={cn(\n              colors[index % colors.length].background,\n              colors[index % colors.length].foreground,\n              \"gap-1 px-3 py-2\"\n            )}\n          >\n            <div className=\"flex items-center gap-2 opacity-100!\">\n              <Image\n                alt={user.name}\n                className=\"mt-0 mb-0 size-4 rounded-full\"\n                height={16}\n                src={user.avatar}\n                unoptimized\n                width={16}\n              />\n              <CursorName>{user.name}</CursorName>\n            </div>\n            {user.message && <CursorMessage>{user.message}</CursorMessage>}\n          </CursorBody>\n        </Cursor>\n      ))}\n    </div>\n  )\n}\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport Image from \"next/image\"\n\nimport { AvatarStack } from \"../../../../../packages/avatar-stack\"\nimport {\n  Cursor,\n  CursorBody,\n  CursorMessage,\n  CursorName,\n  CursorPointer,\n} from \"../../../../../packages/cursor\"\nimport { cn } from \"../../../../../packages/ui/src/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"../../../../../packages/ui/src/ui/avatar\"\n\nconst users = [\n  {\n    id: 1,\n    name: \"Updated Connor Love\",\n    avatar: \"https://github.com/loveconnor.png\",\n  },\n  {\n    id: 2,\n    name: \"Updated Thomas Raklovits\",\n    avatar: \"https://github.com/monster0506.png\",\n    message: \"Updated I'm not sure if this is working...\",\n  },\n  {\n    id: 3,\n    name: \"Updated Charlie Cambell\",\n    avatar: \"https://github.com/loveconnor.png\",\n  },\n]\n\nconst colors = [\n  {\n    foreground: \"text-emerald-800\",\n    background: \"bg-emerald-50\",\n  },\n  {\n    foreground: \"text-rose-800\",\n    background: \"bg-rose-50\",\n  },\n  {\n    foreground: \"text-sky-800\",\n    background: \"bg-sky-50\",\n  },\n]\n\n// Helper function to generate random position\nconst getRandomPosition = () => ({\n  x: Math.floor(Math.random() * 80) + 10, // Keep within 10-90% range\n  y: Math.floor(Math.random() * 80) + 10, // Keep within 10-90% range\n})\n\nconst Example = () => {\n  const [user1Position, setUser1Position] = useState({\n    x: 10,\n    y: 8,\n  })\n  const [user2Position, setUser2Position] = useState({\n    x: 30,\n    y: 40,\n  })\n  const [user3Position, setUser3Position] = useState({\n    x: 70,\n    y: 50,\n  })\n\n  // Store all user positions in a single array for easier access\n  const userPositions = [user1Position, user2Position, user3Position]\n\n  // Create separate useEffects for each user to move at different intervals\n  useEffect(() => {\n    const interval = setInterval(\n      () => {\n        setUser1Position(getRandomPosition())\n      },\n      Math.random() * 3000 + 2000\n    ) // Random interval between 2-5 seconds\n\n    return () => clearInterval(interval)\n  }, [])\n\n  useEffect(() => {\n    const interval = setInterval(\n      () => {\n        setUser2Position(getRandomPosition())\n      },\n      Math.random() * 4000 + 3000\n    ) // Random interval between 3-7 seconds\n\n    return () => clearInterval(interval)\n  }, [])\n\n  useEffect(() => {\n    const interval = setInterval(\n      () => {\n        setUser3Position(getRandomPosition())\n      },\n      Math.random() * 2500 + 1500\n    ) // Random interval between 1.5-4 seconds\n\n    return () => clearInterval(interval)\n  }, [])\n\n  // Assign positions to users\n  const usersWithPositions = users.map((user, index) => ({\n    ...user,\n    position: userPositions[index],\n  }))\n\n  return (\n    <div className=\"relative aspect-[4/3] size-full bg-[radial-gradient(var(--color-secondary),transparent_1px)] [background-size:16px_16px]\">\n      <div className=\"absolute top-8 right-8\">\n        <AvatarStack animate size={32}>\n          {usersWithPositions.map((user) => (\n            <Avatar key={user.id}>\n              <AvatarImage className=\"mt-0 mb-0\" src={user.avatar} />\n              <AvatarFallback>{user.name.slice(0, 2)}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarStack>\n      </div>\n      {usersWithPositions.map((user, index) => (\n        <Cursor\n          className=\"absolute transition-all duration-1000\"\n          key={user.id}\n          style={{\n            top: `${user.position.y}%`,\n            left: `${user.position.x}%`,\n          }}\n        >\n          <CursorPointer\n            className={cn(colors[index % colors.length].foreground)}\n          />\n          <CursorBody\n            className={cn(\n              colors[index % colors.length].background,\n              colors[index % colors.length].foreground,\n              \"gap-1 px-3 py-2\"\n            )}\n          >\n            <div className=\"flex items-center gap-2 opacity-100!\">\n              <Image\n                alt={user.name}\n                className=\"mt-0 mb-0 size-4 rounded-full\"\n                height={16}\n                src={user.avatar}\n                unoptimized\n                width={16}\n              />\n              <CursorName>{user.name}</CursorName>\n            </div>\n            {user.message && <CursorMessage>{user.message}</CursorMessage>}\n          </CursorBody>\n        </Cursor>\n      ))}\n    </div>\n  )\n}\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/collapsible-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/collapsible-demo.tsx",
-      "content": "import { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsiblePanel,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n  return (\n    <Collapsible>\n      <CollapsibleTrigger className=\"inline-flex items-center gap-2 text-sm font-medium data-panel-open:[&_svg]:rotate-180\">\n        Show recovery keys\n        <ChevronDownIcon className=\"size-4\" />\n      </CollapsibleTrigger>\n      <CollapsiblePanel>\n        <ul className=\"flex flex-col gap-1 py-2 text-sm text-muted-foreground\">\n          <li className=\"rounded-sm bg-muted px-2 py-1 font-mono\">\n            4829-1735-6621\n          </li>\n          <li className=\"rounded-sm bg-muted px-2 py-1 font-mono\">\n            9182-6407-5532\n          </li>\n          <li className=\"rounded-sm bg-muted px-2 py-1 font-mono\">\n            3051-7924-9018\n          </li>\n        </ul>\n      </CollapsiblePanel>\n    </Collapsible>\n  )\n}\n",
+      "content": "import { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsiblePanel,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n  return (\n    <Collapsible>\n      <CollapsibleTrigger className=\"inline-flex items-center gap-2 text-sm font-medium data-panel-open:[&_svg]:rotate-180\">\n        Updated Show recovery keys\n        <ChevronDownIcon className=\"size-4\" />\n      </CollapsibleTrigger>\n      <CollapsiblePanel>\n        <ul className=\"flex flex-col gap-1 py-2 text-sm text-muted-foreground\">\n          <li className=\"rounded-sm bg-muted px-2 py-1 font-mono\">\n            4829-1735-6621\n          </li>\n          <li className=\"rounded-sm bg-muted px-2 py-1 font-mono\">\n            9182-6407-5532\n          </li>\n          <li className=\"rounded-sm bg-muted px-2 py-1 font-mono\">\n            3051-7924-9018\n          </li>\n        </ul>\n      </CollapsiblePanel>\n    </Collapsible>\n  )\n}\n",
       "type": "registry:example"
     }
   ],