love-ui 1.2.12 → 1.2.14

package/public/r/roadmap.json

@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/default/examples/roadmap.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { faker } from \"@faker-js/faker\"\nimport groupBy from \"lodash.groupby\"\nimport {\n  CalendarIcon,\n  ChevronRightIcon,\n  EyeIcon,\n  GanttChartSquareIcon,\n  KanbanSquareIcon,\n  LinkIcon,\n  ListIcon,\n  TableIcon,\n  TrashIcon,\n} from \"lucide-react\"\n\nimport {\n  CalendarBody,\n  CalendarDate,\n  CalendarDatePagination,\n  CalendarDatePicker,\n  CalendarHeader,\n  CalendarItem,\n  CalendarMonthPicker,\n  CalendarProvider,\n  CalendarYearPicker,\n} from \"../../../../../packages/calendar\"\nimport {\n  GanttCreateMarkerTrigger,\n  GanttFeatureItem,\n  GanttFeatureList,\n  GanttFeatureListGroup,\n  GanttHeader,\n  GanttMarker,\n  GanttProvider,\n  GanttSidebar,\n  GanttSidebarGroup,\n  GanttSidebarItem,\n  GanttTimeline,\n  GanttToday,\n} from \"../../../../../packages/gantt\"\nimport {\n  KanbanBoard,\n  KanbanCard,\n  KanbanCards,\n  KanbanHeader,\n  KanbanProvider,\n} from \"../../../../../packages/kanban\"\nimport {\n  ListGroup,\n  ListHeader,\n  ListItem,\n  ListItems,\n  ListProvider,\n  type DragEndEvent,\n} from \"../../../../../packages/list\"\nimport {\n  ContextMenu,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuTrigger,\n} from \"../../../../../packages/shadcn-ui/components/ui/context-menu\"\nimport type { ColumnDef } from \"../../../../../packages/table\"\nimport {\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableHead,\n  TableHeader,\n  TableHeaderGroup,\n  TableProvider,\n  TableRow,\n} from \"../../../../../packages/table\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"../../../../../packages/ui/src/ui/avatar\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"../../../../../packages/ui/src/ui/tabs\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Planned\", color: \"#6B7280\" },\n  { id: faker.string.uuid(), name: \"In Progress\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Done\", color: \"#10B981\" },\n]\n\nconst users = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\nconst exampleGroups = Array.from({ length: 6 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleProducts = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleInitiatives = Array.from({ length: 2 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleReleases = Array.from({ length: 3 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleFeatures = Array.from({ length: 20 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),\n    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),\n    status: faker.helpers.arrayElement(statuses),\n    owner: faker.helpers.arrayElement(users),\n    group: faker.helpers.arrayElement(exampleGroups),\n    product: faker.helpers.arrayElement(exampleProducts),\n    initiative: faker.helpers.arrayElement(exampleInitiatives),\n    release: faker.helpers.arrayElement(exampleReleases),\n  }))\n\nconst exampleMarkers = Array.from({ length: 6 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    date: faker.date.past({ years: 0.5, refDate: new Date() }),\n    label: capitalize(faker.company.buzzPhrase()),\n    className: faker.helpers.arrayElement([\n      \"bg-blue-100 text-blue-900\",\n      \"bg-green-100 text-green-900\",\n      \"bg-purple-100 text-purple-900\",\n      \"bg-red-100 text-red-900\",\n      \"bg-orange-100 text-orange-900\",\n      \"bg-teal-100 text-teal-900\",\n    ]),\n  }))\n\nconst GanttView = () => {\n  const [features, setFeatures] = useState(exampleFeatures)\n  const groupedFeatures = groupBy(features, \"group.name\")\n\n  const sortedGroupedFeatures = Object.fromEntries(\n    Object.entries(groupedFeatures).sort(([nameA], [nameB]) =>\n      nameA.localeCompare(nameB)\n    )\n  )\n\n  const handleViewFeature = (id: string) =>\n    console.log(`Feature selected: ${id}`)\n\n  const handleCopyLink = (id: string) => console.log(`Copy link: ${id}`)\n\n  const handleRemoveFeature = (id: string) =>\n    setFeatures((prev) => prev.filter((feature) => feature.id !== id))\n\n  const handleRemoveMarker = (id: string) => console.log(`Remove marker: ${id}`)\n\n  const handleCreateMarker = (date: Date) =>\n    console.log(`Create marker: ${date.toISOString()}`)\n\n  const handleMoveFeature = (id: string, startAt: Date, endAt: Date | null) => {\n    if (!endAt) {\n      return\n    }\n\n    setFeatures((prev) =>\n      prev.map((feature) =>\n        feature.id === id ? { ...feature, startAt, endAt } : feature\n      )\n    )\n\n    console.log(`Move feature: ${id} from ${startAt} to ${endAt}`)\n  }\n\n  const handleAddFeature = (date: Date) =>\n    console.log(`Add feature: ${date.toISOString()}`)\n\n  return (\n    <GanttProvider\n      className=\"rounded-none\"\n      onAddItem={handleAddFeature}\n      range=\"monthly\"\n      zoom={100}\n    >\n      <GanttSidebar>\n        {Object.entries(sortedGroupedFeatures).map(([group, features]) => (\n          <GanttSidebarGroup key={group} name={group}>\n            {features.map((feature) => (\n              <GanttSidebarItem\n                feature={feature}\n                key={feature.id}\n                onSelectItem={handleViewFeature}\n              />\n            ))}\n          </GanttSidebarGroup>\n        ))}\n      </GanttSidebar>\n      <GanttTimeline>\n        <GanttHeader />\n        <GanttFeatureList>\n          {Object.entries(sortedGroupedFeatures).map(([group, features]) => (\n            <GanttFeatureListGroup key={group}>\n              {features.map((feature) => (\n                <div className=\"flex\" key={feature.id}>\n                  <ContextMenu>\n                    <ContextMenuTrigger asChild>\n                      <button\n                        onClick={() => handleViewFeature(feature.id)}\n                        type=\"button\"\n                      >\n                        <GanttFeatureItem\n                          onMove={handleMoveFeature}\n                          {...feature}\n                        >\n                          <p className=\"flex-1 truncate text-xs\">\n                            {feature.name}\n                          </p>\n                          {feature.owner && (\n                            <Avatar className=\"h-4 w-4\">\n                              <AvatarImage src={feature.owner.image} />\n                              <AvatarFallback>\n                                {feature.owner.name?.slice(0, 2)}\n                              </AvatarFallback>\n                            </Avatar>\n                          )}\n                        </GanttFeatureItem>\n                      </button>\n                    </ContextMenuTrigger>\n                    <ContextMenuContent>\n                      <ContextMenuItem\n                        className=\"flex items-center gap-2\"\n                        onClick={() => handleViewFeature(feature.id)}\n                      >\n                        <EyeIcon className=\"text-muted-foreground\" size={16} />\n                        View feature\n                      </ContextMenuItem>\n                      <ContextMenuItem\n                        className=\"flex items-center gap-2\"\n                        onClick={() => handleCopyLink(feature.id)}\n                      >\n                        <LinkIcon className=\"text-muted-foreground\" size={16} />\n                        Copy link\n                      </ContextMenuItem>\n                      <ContextMenuItem\n                        className=\"flex items-center gap-2 text-destructive\"\n                        onClick={() => handleRemoveFeature(feature.id)}\n                      >\n                        <TrashIcon size={16} />\n                        Remove from roadmap\n                      </ContextMenuItem>\n                    </ContextMenuContent>\n                  </ContextMenu>\n                </div>\n              ))}\n            </GanttFeatureListGroup>\n          ))}\n        </GanttFeatureList>\n        {exampleMarkers.map((marker) => (\n          <GanttMarker\n            key={marker.id}\n            {...marker}\n            onRemove={handleRemoveMarker}\n          />\n        ))}\n        <GanttToday />\n        <GanttCreateMarkerTrigger onCreateMarker={handleCreateMarker} />\n      </GanttTimeline>\n    </GanttProvider>\n  )\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 CalendarView = () => (\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\nconst ListView = () => {\n  const [features, setFeatures] = useState(exampleFeatures)\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n\n    if (!over) {\n      return\n    }\n\n    const status = statuses.find((status) => status.name === over.id)\n\n    if (!status) {\n      return\n    }\n\n    setFeatures(\n      features.map((feature) => {\n        if (feature.id === active.id) {\n          return { ...feature, status }\n        }\n\n        return feature\n      })\n    )\n  }\n\n  return (\n    <ListProvider className=\"overflow-auto\" onDragEnd={handleDragEnd}>\n      {statuses.map((status) => (\n        <ListGroup id={status.name} key={status.name}>\n          <ListHeader color={status.color} name={status.name} />\n          <ListItems>\n            {features\n              .filter((feature) => feature.status.name === status.name)\n              .map((feature, index) => (\n                <ListItem\n                  id={feature.id}\n                  index={index}\n                  key={feature.id}\n                  name={feature.name}\n                  parent={feature.status.name}\n                >\n                  <div\n                    className=\"h-2 w-2 shrink-0 rounded-full\"\n                    style={{ backgroundColor: feature.status.color }}\n                  />\n                  <p className=\"m-0 flex-1 text-sm font-medium\">\n                    {feature.name}\n                  </p>\n                  {feature.owner && (\n                    <Avatar className=\"h-4 w-4 shrink-0\">\n                      <AvatarImage src={feature.owner.image} />\n                      <AvatarFallback>\n                        {feature.owner.name?.slice(0, 2)}\n                      </AvatarFallback>\n                    </Avatar>\n                  )}\n                </ListItem>\n              ))}\n          </ListItems>\n        </ListGroup>\n      ))}\n    </ListProvider>\n  )\n}\n\nconst dateFormatter = new Intl.DateTimeFormat(\"en-US\", {\n  month: \"short\",\n  day: \"numeric\",\n  year: \"numeric\",\n})\n\nconst shortDateFormatter = new Intl.DateTimeFormat(\"en-US\", {\n  month: \"short\",\n  day: \"numeric\",\n})\n\nconst KanbanView = () => {\n  const [features, setFeatures] = useState(\n    exampleFeatures.map((feature) => ({\n      ...feature,\n      column: feature.status.id,\n    }))\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n\n    if (!over) {\n      return\n    }\n\n    const status = statuses.find(({ id }) => id === over.id)\n\n    if (!status) {\n      return\n    }\n\n    setFeatures(\n      features.map((feature) => {\n        if (feature.id === active.id) {\n          return { ...feature, status }\n        }\n\n        return feature\n      })\n    )\n  }\n\n  return (\n    <KanbanProvider\n      className=\"p-4\"\n      columns={statuses}\n      data={features}\n      onDragEnd={handleDragEnd}\n    >\n      {(column) => (\n        <KanbanBoard id={column.id} key={column.id}>\n          <KanbanHeader>{column.name}</KanbanHeader>\n          <KanbanCards id={column.id}>\n            {(feature: (typeof features)[number]) => (\n              <KanbanCard\n                column={column.id}\n                id={feature.id}\n                key={feature.id}\n                name={feature.name}\n              >\n                <div className=\"flex items-start justify-between gap-2\">\n                  <div className=\"flex flex-col gap-1\">\n                    <p className=\"m-0 flex-1 text-sm font-medium\">\n                      {feature.name}\n                    </p>\n                    <p className=\"m-0 text-xs text-muted-foreground\">\n                      {feature.initiative.name}\n                    </p>\n                  </div>\n                  {feature.owner && (\n                    <Avatar className=\"h-4 w-4 shrink-0\">\n                      <AvatarImage src={feature.owner.image} />\n                      <AvatarFallback>\n                        {feature.owner.name?.slice(0, 2)}\n                      </AvatarFallback>\n                    </Avatar>\n                  )}\n                </div>\n                <p className=\"m-0 text-xs text-muted-foreground\">\n                  {shortDateFormatter.format(feature.startAt)} -{\" \"}\n                  {dateFormatter.format(feature.endAt)}\n                </p>\n              </KanbanCard>\n            )}\n          </KanbanCards>\n        </KanbanBoard>\n      )}\n    </KanbanProvider>\n  )\n}\n\nconst TableView = () => {\n  const columns: ColumnDef<(typeof exampleFeatures)[number]>[] = [\n    {\n      accessorKey: \"name\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Name\" />\n      ),\n      cell: ({ row }) => (\n        <div className=\"flex items-center gap-2\">\n          <div className=\"relative\">\n            <Avatar className=\"size-6\">\n              <AvatarImage src={row.original.owner.image} />\n              <AvatarFallback>\n                {row.original.owner.name?.slice(0, 2)}\n              </AvatarFallback>\n            </Avatar>\n\n            <div\n              className=\"absolute right-0 bottom-0 h-2 w-2 rounded-full ring-2 ring-background\"\n              style={{\n                backgroundColor: row.original.status.color,\n              }}\n            />\n          </div>\n          <div>\n            <span className=\"font-medium\">{row.original.name}</span>\n            <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n              <span>{row.original.product.name}</span>\n              <ChevronRightIcon size={12} />\n              <span>{row.original.group.name}</span>\n            </div>\n          </div>\n        </div>\n      ),\n    },\n    {\n      accessorKey: \"startAt\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Start At\" />\n      ),\n      cell: ({ row }) =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"medium\",\n        }).format(row.original.startAt),\n    },\n    {\n      accessorKey: \"endAt\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"End At\" />\n      ),\n      cell: ({ row }) =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"medium\",\n        }).format(row.original.endAt),\n    },\n    {\n      id: \"release\",\n      accessorFn: (row) => row.release.id,\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Release\" />\n      ),\n      cell: ({ row }) => row.original.release.name,\n    },\n  ]\n\n  return (\n    <div className=\"size-full overflow-auto\">\n      <TableProvider columns={columns} data={exampleFeatures}>\n        <TableHeader>\n          {({ headerGroup }) => (\n            <TableHeaderGroup headerGroup={headerGroup} key={headerGroup.id}>\n              {({ header }) => <TableHead header={header} key={header.id} />}\n            </TableHeaderGroup>\n          )}\n        </TableHeader>\n        <TableBody>\n          {({ row }) => (\n            <TableRow key={row.id} row={row}>\n              {({ cell }) => <TableCell cell={cell} key={cell.id} />}\n            </TableRow>\n          )}\n        </TableBody>\n      </TableProvider>\n    </div>\n  )\n}\n\nconst Example = () => {\n  const views = [\n    {\n      id: \"gantt\",\n      label: \"Gantt\",\n      icon: GanttChartSquareIcon,\n      component: GanttView,\n    },\n    {\n      id: \"calendar\",\n      label: \"Calendar\",\n      icon: CalendarIcon,\n      component: CalendarView,\n    },\n    {\n      id: \"list\",\n      label: \"List\",\n      icon: ListIcon,\n      component: ListView,\n    },\n    {\n      id: \"kanban\",\n      label: \"Kanban\",\n      icon: KanbanSquareIcon,\n      component: KanbanView,\n    },\n    {\n      id: \"table\",\n      label: \"Table\",\n      icon: TableIcon,\n      component: TableView,\n    },\n  ]\n\n  return (\n    <Tabs className=\"not-prose size-full gap-0 divide-y\" defaultValue=\"gantt\">\n      <div className=\"flex items-center justify-between gap-4 p-4\">\n        <p className=\"font-medium\">Roadmap</p>\n        <TabsList>\n          {views.map((view) => (\n            <TabsTrigger key={view.id} value={view.id}>\n              <view.icon size={16} />\n              <span className=\"sr-only\">{view.label}</span>\n            </TabsTrigger>\n          ))}\n        </TabsList>\n      </div>\n      {views.map((view) => (\n        <TabsContent className=\"overflow-hidden\" key={view.id} value={view.id}>\n          <view.component />\n        </TabsContent>\n      ))}\n    </Tabs>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { faker } from \"@faker-js/faker\"\nimport groupBy from \"lodash.groupby\"\nimport {\n  CalendarIcon,\n  ChevronRightIcon,\n  EyeIcon,\n  GanttChartSquareIcon,\n  KanbanSquareIcon,\n  LinkIcon,\n  ListIcon,\n  TableIcon,\n  TrashIcon,\n} from \"lucide-react\"\n\nimport {\n  CalendarBody,\n  CalendarDate,\n  CalendarDatePagination,\n  CalendarDatePicker,\n  CalendarHeader,\n  CalendarItem,\n  CalendarMonthPicker,\n  CalendarProvider,\n  CalendarYearPicker,\n} from \"../../../../../packages/calendar\"\nimport {\n  GanttCreateMarkerTrigger,\n  GanttFeatureItem,\n  GanttFeatureList,\n  GanttFeatureListGroup,\n  GanttHeader,\n  GanttMarker,\n  GanttProvider,\n  GanttSidebar,\n  GanttSidebarGroup,\n  GanttSidebarItem,\n  GanttTimeline,\n  GanttToday,\n} from \"../../../../../packages/gantt\"\nimport {\n  KanbanBoard,\n  KanbanCard,\n  KanbanCards,\n  KanbanHeader,\n  KanbanProvider,\n} from \"../../../../../packages/kanban\"\nimport {\n  ListGroup,\n  ListHeader,\n  ListItem,\n  ListItems,\n  ListProvider,\n  type DragEndEvent,\n} from \"../../../../../packages/list\"\nimport {\n  ContextMenu,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuTrigger,\n} from \"../../../../../packages/shadcn-ui/components/ui/context-menu\"\nimport type { ColumnDef } from \"../../../../../packages/table\"\nimport {\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableHead,\n  TableHeader,\n  TableHeaderGroup,\n  TableProvider,\n  TableRow,\n} from \"../../../../../packages/table\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"../../../../../packages/ui/src/ui/avatar\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"../../../../../packages/ui/src/ui/tabs\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Updated Planned\", color: \"#6B7280\" },\n  { id: faker.string.uuid(), name: \"Updated In Progress\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Updated Done\", color: \"#10B981\" },\n]\n\nconst users = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\nconst exampleGroups = Array.from({ length: 6 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleProducts = Array.from({ length: 4 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleInitiatives = Array.from({ length: 2 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleReleases = Array.from({ length: 3 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n  }))\n\nconst exampleFeatures = Array.from({ length: 20 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: capitalize(faker.company.buzzPhrase()),\n    startAt: faker.date.past({ years: 0.5, refDate: new Date() }),\n    endAt: faker.date.future({ years: 0.5, refDate: new Date() }),\n    status: faker.helpers.arrayElement(statuses),\n    owner: faker.helpers.arrayElement(users),\n    group: faker.helpers.arrayElement(exampleGroups),\n    product: faker.helpers.arrayElement(exampleProducts),\n    initiative: faker.helpers.arrayElement(exampleInitiatives),\n    release: faker.helpers.arrayElement(exampleReleases),\n  }))\n\nconst exampleMarkers = Array.from({ length: 6 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    date: faker.date.past({ years: 0.5, refDate: new Date() }),\n    label: capitalize(faker.company.buzzPhrase()),\n    className: faker.helpers.arrayElement([\n      \"bg-blue-100 text-blue-900\",\n      \"bg-green-100 text-green-900\",\n      \"bg-purple-100 text-purple-900\",\n      \"bg-red-100 text-red-900\",\n      \"bg-orange-100 text-orange-900\",\n      \"bg-teal-100 text-teal-900\",\n    ]),\n  }))\n\nconst GanttView = () => {\n  const [features, setFeatures] = useState(exampleFeatures)\n  const groupedFeatures = groupBy(features, \"group.name\")\n\n  const sortedGroupedFeatures = Object.fromEntries(\n    Object.entries(groupedFeatures).sort(([nameA], [nameB]) =>\n      nameA.localeCompare(nameB)\n    )\n  )\n\n  const handleViewFeature = (id: string) =>\n    console.log(`Feature selected: ${id}`)\n\n  const handleCopyLink = (id: string) => console.log(`Copy link: ${id}`)\n\n  const handleRemoveFeature = (id: string) =>\n    setFeatures((prev) => prev.filter((feature) => feature.id !== id))\n\n  const handleRemoveMarker = (id: string) => console.log(`Remove marker: ${id}`)\n\n  const handleCreateMarker = (date: Date) =>\n    console.log(`Create marker: ${date.toISOString()}`)\n\n  const handleMoveFeature = (id: string, startAt: Date, endAt: Date | null) => {\n    if (!endAt) {\n      return\n    }\n\n    setFeatures((prev) =>\n      prev.map((feature) =>\n        feature.id === id ? { ...feature, startAt, endAt } : feature\n      )\n    )\n\n    console.log(`Move feature: ${id} from ${startAt} to ${endAt}`)\n  }\n\n  const handleAddFeature = (date: Date) =>\n    console.log(`Add feature: ${date.toISOString()}`)\n\n  return (\n    <GanttProvider\n      className=\"rounded-none\"\n      onAddItem={handleAddFeature}\n      range=\"monthly\"\n      zoom={100}\n    >\n      <GanttSidebar>\n        {Object.entries(sortedGroupedFeatures).map(([group, features]) => (\n          <GanttSidebarGroup key={group} name={group}>\n            {features.map((feature) => (\n              <GanttSidebarItem\n                feature={feature}\n                key={feature.id}\n                onSelectItem={handleViewFeature}\n              />\n            ))}\n          </GanttSidebarGroup>\n        ))}\n      </GanttSidebar>\n      <GanttTimeline>\n        <GanttHeader />\n        <GanttFeatureList>\n          {Object.entries(sortedGroupedFeatures).map(([group, features]) => (\n            <GanttFeatureListGroup key={group}>\n              {features.map((feature) => (\n                <div className=\"flex\" key={feature.id}>\n                  <ContextMenu>\n                    <ContextMenuTrigger asChild>\n                      <button\n                        onClick={() => handleViewFeature(feature.id)}\n                        type=\"button\"\n                      >\n                        <GanttFeatureItem\n                          onMove={handleMoveFeature}\n                          {...feature}\n                        >\n                          <p className=\"flex-1 truncate text-xs\">\n                            {feature.name}\n                          </p>\n                          {feature.owner && (\n                            <Avatar className=\"h-4 w-4\">\n                              <AvatarImage src={feature.owner.image} />\n                              <AvatarFallback>\n                                {feature.owner.name?.slice(0, 2)}\n                              </AvatarFallback>\n                            </Avatar>\n                          )}\n                        </GanttFeatureItem>\n                      </button>\n                    </ContextMenuTrigger>\n                    <ContextMenuContent>\n                      <ContextMenuItem\n                        className=\"flex items-center gap-2\"\n                        onClick={() => handleViewFeature(feature.id)}\n                      >\n                        <EyeIcon className=\"text-muted-foreground\" size={16} />\n                        Updated View feature\n                      </ContextMenuItem>\n                      <ContextMenuItem\n                        className=\"flex items-center gap-2\"\n                        onClick={() => handleCopyLink(feature.id)}\n                      >\n                        <LinkIcon className=\"text-muted-foreground\" size={16} />\n                        Updated Copy link\n                      </ContextMenuItem>\n                      <ContextMenuItem\n                        className=\"flex items-center gap-2 text-destructive\"\n                        onClick={() => handleRemoveFeature(feature.id)}\n                      >\n                        <TrashIcon size={16} />\n                        Updated Remove from roadmap\n                      </ContextMenuItem>\n                    </ContextMenuContent>\n                  </ContextMenu>\n                </div>\n              ))}\n            </GanttFeatureListGroup>\n          ))}\n        </GanttFeatureList>\n        {exampleMarkers.map((marker) => (\n          <GanttMarker\n            key={marker.id}\n            {...marker}\n            onRemove={handleRemoveMarker}\n          />\n        ))}\n        <GanttToday />\n        <GanttCreateMarkerTrigger onCreateMarker={handleCreateMarker} />\n      </GanttTimeline>\n    </GanttProvider>\n  )\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 CalendarView = () => (\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\nconst ListView = () => {\n  const [features, setFeatures] = useState(exampleFeatures)\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n\n    if (!over) {\n      return\n    }\n\n    const status = statuses.find((status) => status.name === over.id)\n\n    if (!status) {\n      return\n    }\n\n    setFeatures(\n      features.map((feature) => {\n        if (feature.id === active.id) {\n          return { ...feature, status }\n        }\n\n        return feature\n      })\n    )\n  }\n\n  return (\n    <ListProvider className=\"overflow-auto\" onDragEnd={handleDragEnd}>\n      {statuses.map((status) => (\n        <ListGroup id={status.name} key={status.name}>\n          <ListHeader color={status.color} name={status.name} />\n          <ListItems>\n            {features\n              .filter((feature) => feature.status.name === status.name)\n              .map((feature, index) => (\n                <ListItem\n                  id={feature.id}\n                  index={index}\n                  key={feature.id}\n                  name={feature.name}\n                  parent={feature.status.name}\n                >\n                  <div\n                    className=\"h-2 w-2 shrink-0 rounded-full\"\n                    style={{ backgroundColor: feature.status.color }}\n                  />\n                  <p className=\"m-0 flex-1 text-sm font-medium\">\n                    {feature.name}\n                  </p>\n                  {feature.owner && (\n                    <Avatar className=\"h-4 w-4 shrink-0\">\n                      <AvatarImage src={feature.owner.image} />\n                      <AvatarFallback>\n                        {feature.owner.name?.slice(0, 2)}\n                      </AvatarFallback>\n                    </Avatar>\n                  )}\n                </ListItem>\n              ))}\n          </ListItems>\n        </ListGroup>\n      ))}\n    </ListProvider>\n  )\n}\n\nconst dateFormatter = new Intl.DateTimeFormat(\"en-US\", {\n  month: \"short\",\n  day: \"numeric\",\n  year: \"numeric\",\n})\n\nconst shortDateFormatter = new Intl.DateTimeFormat(\"en-US\", {\n  month: \"short\",\n  day: \"numeric\",\n})\n\nconst KanbanView = () => {\n  const [features, setFeatures] = useState(\n    exampleFeatures.map((feature) => ({\n      ...feature,\n      column: feature.status.id,\n    }))\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n\n    if (!over) {\n      return\n    }\n\n    const status = statuses.find(({ id }) => id === over.id)\n\n    if (!status) {\n      return\n    }\n\n    setFeatures(\n      features.map((feature) => {\n        if (feature.id === active.id) {\n          return { ...feature, status }\n        }\n\n        return feature\n      })\n    )\n  }\n\n  return (\n    <KanbanProvider\n      className=\"p-4\"\n      columns={statuses}\n      data={features}\n      onDragEnd={handleDragEnd}\n    >\n      {(column) => (\n        <KanbanBoard id={column.id} key={column.id}>\n          <KanbanHeader>{column.name}</KanbanHeader>\n          <KanbanCards id={column.id}>\n            {(feature: (typeof features)[number]) => (\n              <KanbanCard\n                column={column.id}\n                id={feature.id}\n                key={feature.id}\n                name={feature.name}\n              >\n                <div className=\"flex items-start justify-between gap-2\">\n                  <div className=\"flex flex-col gap-1\">\n                    <p className=\"m-0 flex-1 text-sm font-medium\">\n                      {feature.name}\n                    </p>\n                    <p className=\"m-0 text-xs text-muted-foreground\">\n                      {feature.initiative.name}\n                    </p>\n                  </div>\n                  {feature.owner && (\n                    <Avatar className=\"h-4 w-4 shrink-0\">\n                      <AvatarImage src={feature.owner.image} />\n                      <AvatarFallback>\n                        {feature.owner.name?.slice(0, 2)}\n                      </AvatarFallback>\n                    </Avatar>\n                  )}\n                </div>\n                <p className=\"m-0 text-xs text-muted-foreground\">\n                  {shortDateFormatter.format(feature.startAt)} -{\" \"}\n                  {dateFormatter.format(feature.endAt)}\n                </p>\n              </KanbanCard>\n            )}\n          </KanbanCards>\n        </KanbanBoard>\n      )}\n    </KanbanProvider>\n  )\n}\n\nconst TableView = () => {\n  const columns: ColumnDef<(typeof exampleFeatures)[number]>[] = [\n    {\n      accessorKey: \"name\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated Name\" />\n      ),\n      cell: ({ row }) => (\n        <div className=\"flex items-center gap-2\">\n          <div className=\"relative\">\n            <Avatar className=\"size-6\">\n              <AvatarImage src={row.original.owner.image} />\n              <AvatarFallback>\n                {row.original.owner.name?.slice(0, 2)}\n              </AvatarFallback>\n            </Avatar>\n\n            <div\n              className=\"absolute right-0 bottom-0 h-2 w-2 rounded-full ring-2 ring-background\"\n              style={{\n                backgroundColor: row.original.status.color,\n              }}\n            />\n          </div>\n          <div>\n            <span className=\"font-medium\">{row.original.name}</span>\n            <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n              <span>{row.original.product.name}</span>\n              <ChevronRightIcon size={12} />\n              <span>{row.original.group.name}</span>\n            </div>\n          </div>\n        </div>\n      ),\n    },\n    {\n      accessorKey: \"startAt\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated Start At\" />\n      ),\n      cell: ({ row }) =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"medium\",\n        }).format(row.original.startAt),\n    },\n    {\n      accessorKey: \"endAt\",\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated End At\" />\n      ),\n      cell: ({ row }) =>\n        new Intl.DateTimeFormat(\"en-US\", {\n          dateStyle: \"medium\",\n        }).format(row.original.endAt),\n    },\n    {\n      id: \"release\",\n      accessorFn: (row) => row.release.id,\n      header: ({ column }) => (\n        <TableColumnHeader column={column} title=\"Updated Release\" />\n      ),\n      cell: ({ row }) => row.original.release.name,\n    },\n  ]\n\n  return (\n    <div className=\"size-full overflow-auto\">\n      <TableProvider columns={columns} data={exampleFeatures}>\n        <TableHeader>\n          {({ headerGroup }) => (\n            <TableHeaderGroup headerGroup={headerGroup} key={headerGroup.id}>\n              {({ header }) => <TableHead header={header} key={header.id} />}\n            </TableHeaderGroup>\n          )}\n        </TableHeader>\n        <TableBody>\n          {({ row }) => (\n            <TableRow key={row.id} row={row}>\n              {({ cell }) => <TableCell cell={cell} key={cell.id} />}\n            </TableRow>\n          )}\n        </TableBody>\n      </TableProvider>\n    </div>\n  )\n}\n\nconst Example = () => {\n  const views = [\n    {\n      id: \"gantt\",\n      label: \"Updated Gantt\",\n      icon: GanttChartSquareIcon,\n      component: GanttView,\n    },\n    {\n      id: \"calendar\",\n      label: \"Updated Calendar\",\n      icon: CalendarIcon,\n      component: CalendarView,\n    },\n    {\n      id: \"list\",\n      label: \"Updated List\",\n      icon: ListIcon,\n      component: ListView,\n    },\n    {\n      id: \"kanban\",\n      label: \"Updated Kanban\",\n      icon: KanbanSquareIcon,\n      component: KanbanView,\n    },\n    {\n      id: \"table\",\n      label: \"Updated Table\",\n      icon: TableIcon,\n      component: TableView,\n    },\n  ]\n\n  return (\n    <Tabs className=\"not-prose size-full gap-0 divide-y\" defaultValue=\"gantt\">\n      <div className=\"flex items-center justify-between gap-4 p-4\">\n        <p className=\"font-medium\">Updated Roadmap</p>\n        <TabsList>\n          {views.map((view) => (\n            <TabsTrigger key={view.id} value={view.id}>\n              <view.icon size={16} />\n              <span className=\"sr-only\">{view.label}</span>\n            </TabsTrigger>\n          ))}\n        </TabsList>\n      </div>\n      {views.map((view) => (\n        <TabsContent className=\"overflow-hidden\" key={view.id} value={view.id}>\n          <view.component />\n        </TabsContent>\n      ))}\n    </Tabs>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/sandbox-no-file-explorer.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/sandbox-no-file-explorer.tsx",
-      "content": "\"use client\"\n\nimport { AppWindowIcon, CodeIcon, TerminalIcon } from \"lucide-react\"\n\nimport {\n  SandboxCodeEditor,\n  SandboxConsole,\n  SandboxLayout,\n  SandboxPreview,\n  SandboxProvider,\n  SandboxTabs,\n  SandboxTabsContent,\n  SandboxTabsList,\n  SandboxTabsTrigger,\n} from \"../../../../../packages/sandbox\"\n\nconst Example = () => (\n  <SandboxProvider>\n    <SandboxLayout>\n      <SandboxTabs defaultValue=\"preview\">\n        <SandboxTabsList>\n          <SandboxTabsTrigger value=\"code\">\n            <CodeIcon size={14} />\n            Code\n          </SandboxTabsTrigger>\n          <SandboxTabsTrigger value=\"preview\">\n            <AppWindowIcon size={14} />\n            Preview\n          </SandboxTabsTrigger>\n          <SandboxTabsTrigger value=\"console\">\n            <TerminalIcon size={14} />\n            Console\n          </SandboxTabsTrigger>\n        </SandboxTabsList>\n        <SandboxTabsContent value=\"code\">\n          <SandboxCodeEditor showTabs />\n        </SandboxTabsContent>\n        <SandboxTabsContent value=\"preview\">\n          <SandboxPreview\n            showOpenInCodeSandbox={false}\n            showRefreshButton={false}\n          />\n        </SandboxTabsContent>\n        <SandboxTabsContent value=\"console\">\n          <SandboxConsole />\n        </SandboxTabsContent>\n      </SandboxTabs>\n    </SandboxLayout>\n  </SandboxProvider>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { AppWindowIcon, CodeIcon, TerminalIcon } from \"lucide-react\"\n\nimport {\n  SandboxCodeEditor,\n  SandboxConsole,\n  SandboxLayout,\n  SandboxPreview,\n  SandboxProvider,\n  SandboxTabs,\n  SandboxTabsContent,\n  SandboxTabsList,\n  SandboxTabsTrigger,\n} from \"../../../../../packages/sandbox\"\n\nconst Example = () => (\n  <SandboxProvider>\n    <SandboxLayout>\n      <SandboxTabs defaultValue=\"preview\">\n        <SandboxTabsList>\n          <SandboxTabsTrigger value=\"code\">\n            <CodeIcon size={14} />\n            Updated Code\n          </SandboxTabsTrigger>\n          <SandboxTabsTrigger value=\"preview\">\n            <AppWindowIcon size={14} />\n            Updated Preview\n          </SandboxTabsTrigger>\n          <SandboxTabsTrigger value=\"console\">\n            <TerminalIcon size={14} />\n            Updated Console\n          </SandboxTabsTrigger>\n        </SandboxTabsList>\n        <SandboxTabsContent value=\"code\">\n          <SandboxCodeEditor showTabs />\n        </SandboxTabsContent>\n        <SandboxTabsContent value=\"preview\">\n          <SandboxPreview\n            showOpenInCodeSandbox={false}\n            showRefreshButton={false}\n          />\n        </SandboxTabsContent>\n        <SandboxTabsContent value=\"console\">\n          <SandboxConsole />\n        </SandboxTabsContent>\n      </SandboxTabs>\n    </SandboxLayout>\n  </SandboxProvider>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/sandbox.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/sandbox.tsx",
-      "content": "\"use client\"\n\nimport { AppWindowIcon, CodeIcon, TerminalIcon } from \"lucide-react\"\n\nimport {\n  SandboxCodeEditor,\n  SandboxConsole,\n  SandboxFileExplorer,\n  SandboxLayout,\n  SandboxPreview,\n  SandboxProvider,\n  SandboxTabs,\n  SandboxTabsContent,\n  SandboxTabsList,\n  SandboxTabsTrigger,\n} from \"../../../../../packages/sandbox\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"../../../../../packages/shadcn-ui/components/ui/resizable\"\n\nconst Example = () => (\n  <SandboxProvider>\n    <SandboxLayout>\n      <SandboxTabs defaultValue=\"preview\">\n        <SandboxTabsList>\n          <SandboxTabsTrigger value=\"code\">\n            <CodeIcon size={14} />\n            Code\n          </SandboxTabsTrigger>\n          <SandboxTabsTrigger value=\"preview\">\n            <AppWindowIcon size={14} />\n            Preview\n          </SandboxTabsTrigger>\n          <SandboxTabsTrigger value=\"console\">\n            <TerminalIcon size={14} />\n            Console\n          </SandboxTabsTrigger>\n        </SandboxTabsList>\n        <SandboxTabsContent className=\"overflow-hidden\" value=\"code\">\n          <ResizablePanelGroup direction=\"horizontal\">\n            <ResizablePanel\n              className=\"overflow-y-auto\"\n              defaultSize={25}\n              maxSize={40}\n              minSize={20}\n            >\n              <SandboxFileExplorer />\n            </ResizablePanel>\n            <ResizableHandle withHandle />\n            <ResizablePanel className=\"overflow-y-auto\">\n              <SandboxCodeEditor />\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </SandboxTabsContent>\n        <SandboxTabsContent value=\"preview\">\n          <SandboxPreview\n            showOpenInCodeSandbox={false}\n            showRefreshButton={false}\n          />\n        </SandboxTabsContent>\n        <SandboxTabsContent value=\"console\">\n          <SandboxConsole />\n        </SandboxTabsContent>\n      </SandboxTabs>\n    </SandboxLayout>\n  </SandboxProvider>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { AppWindowIcon, CodeIcon, TerminalIcon } from \"lucide-react\"\n\nimport {\n  SandboxCodeEditor,\n  SandboxConsole,\n  SandboxFileExplorer,\n  SandboxLayout,\n  SandboxPreview,\n  SandboxProvider,\n  SandboxTabs,\n  SandboxTabsContent,\n  SandboxTabsList,\n  SandboxTabsTrigger,\n} from \"../../../../../packages/sandbox\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"../../../../../packages/shadcn-ui/components/ui/resizable\"\n\nconst Example = () => (\n  <SandboxProvider>\n    <SandboxLayout>\n      <SandboxTabs defaultValue=\"preview\">\n        <SandboxTabsList>\n          <SandboxTabsTrigger value=\"code\">\n            <CodeIcon size={14} />\n            Updated Code\n          </SandboxTabsTrigger>\n          <SandboxTabsTrigger value=\"preview\">\n            <AppWindowIcon size={14} />\n            Updated Preview\n          </SandboxTabsTrigger>\n          <SandboxTabsTrigger value=\"console\">\n            <TerminalIcon size={14} />\n            Updated Console\n          </SandboxTabsTrigger>\n        </SandboxTabsList>\n        <SandboxTabsContent className=\"overflow-hidden\" value=\"code\">\n          <ResizablePanelGroup direction=\"horizontal\">\n            <ResizablePanel\n              className=\"overflow-y-auto\"\n              defaultSize={25}\n              maxSize={40}\n              minSize={20}\n            >\n              <SandboxFileExplorer />\n            </ResizablePanel>\n            <ResizableHandle withHandle />\n            <ResizablePanel className=\"overflow-y-auto\">\n              <SandboxCodeEditor />\n            </ResizablePanel>\n          </ResizablePanelGroup>\n        </SandboxTabsContent>\n        <SandboxTabsContent value=\"preview\">\n          <SandboxPreview\n            showOpenInCodeSandbox={false}\n            showRefreshButton={false}\n          />\n        </SandboxTabsContent>\n        <SandboxTabsContent value=\"console\">\n          <SandboxConsole />\n        </SandboxTabsContent>\n      </SandboxTabs>\n    </SandboxLayout>\n  </SandboxProvider>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/scroll-area-both.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/scroll-area-both.tsx",
-      "content": "import { ScrollArea } from \"@/registry/default/ui/scroll-area\"\n\nexport default function ScrollAreaBoth() {\n  return (\n    <ScrollArea orientation=\"both\" className=\"h-80 max-w-80 rounded-md border\">\n      <p className=\"min-w-100 p-4\">\n        Just as suddenly as it had begun, the sensation stopped, leaving Alice\n        feeling slightly disoriented. She looked around and realized that the\n        room hadn't changed at all - it was she who had grown smaller, shrinking\n        down to a fraction of her previous size. Alice felt herself growing\n        larger and larger, filling up the entire room until she feared she might\n        burst. The sensation was both thrilling and terrifying, as if she were\n        expanding beyond the confines of her own body. She wondered if this was\n        what it felt like to be a balloon, swelling with air until it could hold\n        no more. Alice peered into the mirror, her reflection staring back at\n        her with an air of mischief. She wondered what it would be like to step\n        through the glass and into the world beyond, where everything seemed to\n        be topsy-turvy and nothing was quite as it seemed. It's no use going\n        back to yesterday, because I was a different person then, reflected\n        Alice.\n      </p>\n    </ScrollArea>\n  )\n}\n",
+      "content": "import { ScrollArea } from \"@/registry/default/ui/scroll-area\"\n\nexport default function ScrollAreaBoth() {\n  return (\n    <ScrollArea orientation=\"both\" className=\"h-80 max-w-80 rounded-md border\">\n      <p className=\"min-w-100 p-4\">\n        Updated Just as suddenly as it had begun, the sensation stopped, leaving\n        Alice feeling slightly disoriented. She looked around and realized that\n        the room hadn't changed at all - it was she who had grown smaller,\n        shrinking down to a fraction of her previous size. Alice felt herself\n        growing larger and larger, filling up the entire room until she feared\n        she might burst. The sensation was both thrilling and terrifying, as if\n        she were expanding beyond the confines of her own body. She wondered if\n        this was what it felt like to be a balloon, swelling with air until it\n        could hold no more. Alice peered into the mirror, her reflection staring\n        back at her with an air of mischief. She wondered what it would be like\n        to step through the glass and into the world beyond, where everything\n        seemed to be topsy-turvy and nothing was quite as it seemed. It's no use\n        going back to yesterday, because I was a different person then,\n        reflected Alice.\n      </p>\n    </ScrollArea>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/scroll-area-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/scroll-area-demo.tsx",
-      "content": "import { ScrollArea } from \"@/registry/default/ui/scroll-area\"\n\nconst tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-alpha.${i}`)\n\nexport default function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-64 rounded-md border\">\n      <div className=\"px-4 py-2\">\n        <h4 className=\"mb-2 text-sm font-medium\">Tags</h4>\n        <div className=\"flex flex-col gap-1\">\n          {tags.map((tag) => (\n            <div key={tag} className=\"text-sm\">\n              {tag}\n            </div>\n          ))}\n        </div>\n      </div>\n    </ScrollArea>\n  )\n}\n",
+      "content": "import { ScrollArea } from \"@/registry/default/ui/scroll-area\"\n\nconst tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-alpha.${i}`)\n\nexport default function ScrollAreaDemo() {\n  return (\n    <ScrollArea className=\"h-64 rounded-md border\">\n      <div className=\"px-4 py-2\">\n        <h4 className=\"mb-2 text-sm font-medium\">Updated Tags</h4>\n        <div className=\"flex flex-col gap-1\">\n          {tags.map((tag) => (\n            <div key={tag} className=\"text-sm\">\n              {tag}\n            </div>\n          ))}\n        </div>\n      </div>\n    </ScrollArea>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/scroll-area-horizontal.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/scroll-area-horizontal.tsx",
-      "content": "import { ScrollArea } from \"@/registry/default/ui/scroll-area\"\n\nexport default function ScrollAreaHorizontal() {\n  return (\n    <ScrollArea className=\"max-w-96 rounded-md border\" orientation=\"horizontal\">\n      <div className=\"flex w-max gap-4 p-4\">\n        {Array.from({ length: 20 }).map((_, i) => (\n          <div\n            key={i}\n            className=\"flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted\"\n          >\n            <span className=\"text-sm font-medium\">Item {i + 1}</span>\n          </div>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
+      "content": "import { ScrollArea } from \"@/registry/default/ui/scroll-area\"\n\nexport default function ScrollAreaHorizontal() {\n  return (\n    <ScrollArea className=\"max-w-96 rounded-md border\" orientation=\"horizontal\">\n      <div className=\"flex w-max gap-4 p-4\">\n        {Array.from({ length: 20 }).map((_, i) => (\n          <div\n            key={i}\n            className=\"flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted\"\n          >\n            <span className=\"text-sm font-medium\">Updated Item {i + 1}</span>\n          </div>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/select-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/select-demo.tsx",
-      "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst items = [\n  { label: \"Select framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n]\n\nexport default function SelectDemo() {\n  return (\n    <Select items={items} defaultValue=\"next\">\n      <SelectTrigger>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  )\n}\n",
+      "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst items = [\n  { label: \"Updated Select framework\", value: null },\n  { label: \"Updated Next.js\", value: \"next\" },\n  { label: \"Updated Vite\", value: \"vite\" },\n  { label: \"Updated Astro\", value: \"astro\" },\n]\n\nexport default function SelectDemo() {\n  return (\n    <Select items={items} defaultValue=\"next\">\n      <SelectTrigger>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/select-disabled.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/select-disabled.tsx",
-      "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst items = [\n  { label: \"Select framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n]\n\nexport default function SelectDisabled() {\n  return (\n    <Select items={items}>\n      <SelectTrigger disabled>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  )\n}\n",
+      "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst items = [\n  { label: \"Updated Select framework\", value: null },\n  { label: \"Updated Next.js\", value: \"next\" },\n  { label: \"Updated Vite\", value: \"vite\" },\n  { label: \"Updated Astro\", value: \"astro\" },\n]\n\nexport default function SelectDisabled() {\n  return (\n    <Select items={items}>\n      <SelectTrigger disabled>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/select-form.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/examples/select-form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} 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 items = [\n  { label: \"Select a framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n]\n\nexport default function SelectForm() {\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    alert(`Framework: ${formData.get(\"framework\") || \"\"}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-64\">\n      <Field>\n        <FieldLabel>Framework</FieldLabel>\n        <Select name=\"framework\" items={items} disabled={loading} required>\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectPopup>\n            {items.map(({ label, value }) => (\n              <SelectItem key={value} value={value}>\n                {label}\n              </SelectItem>\n            ))}\n          </SelectPopup>\n        </Select>\n        <FieldDescription>Pick your favorite.</FieldDescription>\n        <FieldError>Please select a value.</FieldError>\n      </Field>\n\n      <Button type=\"submit\" disabled={loading}>\n        Submit\n      </Button>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} 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 items = [\n  { label: \"Updated Select a framework\", value: null },\n  { label: \"Updated Next.js\", value: \"next\" },\n  { label: \"Updated Vite\", value: \"vite\" },\n  { label: \"Updated Astro\", value: \"astro\" },\n]\n\nexport default function SelectForm() {\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    alert(`Framework: ${formData.get(\"framework\") || \"\"}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-64\">\n      <Field>\n        <FieldLabel>Updated Framework</FieldLabel>\n        <Select name=\"framework\" items={items} disabled={loading} required>\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectPopup>\n            {items.map(({ label, value }) => (\n              <SelectItem key={value} value={value}>\n                {label}\n              </SelectItem>\n            ))}\n          </SelectPopup>\n        </Select>\n        <FieldDescription>Updated Pick your favorite.</FieldDescription>\n        <FieldError>Updated Please select a value.</FieldError>\n      </Field>\n\n      <Button type=\"submit\" disabled={loading}>\n        Updated Submit\n      </Button>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/select-lg.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/select-lg.tsx",
-      "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst items = [\n  { label: \"Select framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n]\n\nexport default function SelectLg() {\n  return (\n    <Select items={items}>\n      <SelectTrigger size=\"lg\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  )\n}\n",
+      "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst items = [\n  { label: \"Updated Select framework\", value: null },\n  { label: \"Updated Next.js\", value: \"next\" },\n  { label: \"Updated Vite\", value: \"vite\" },\n  { label: \"Updated Astro\", value: \"astro\" },\n]\n\nexport default function SelectLg() {\n  return (\n    <Select items={items}>\n      <SelectTrigger size=\"lg\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/select-native.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select-native",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "registry/default/ui/select-native.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\n\nconst SelectNative = ({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"select\">) => {\n  return (\n    <div className=\"relative flex\">\n      <select\n        data-slot=\"select-native\"\n        className={cn(\n          \"peer inline-flex w-full cursor-pointer appearance-none items-center rounded-md border border-input text-sm text-foreground shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 has-[option[disabled]:checked]:text-muted-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n          props.multiple\n            ? \"py-1 *:px-3 *:py-1 [&_option:checked]:bg-accent\"\n            : \"h-9 ps-3 pe-8\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </select>\n      {!props.multiple && (\n        <span className=\"pointer-events-none absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50 peer-aria-invalid:text-destructive/80\">\n          <ChevronDownIcon size={16} aria-hidden=\"true\" />\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport { SelectNative }\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/public/r/select-sm.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/select-sm.tsx",
-      "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst items = [\n  { label: \"Select framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n]\n\nexport default function SelectSm() {\n  return (\n    <Select items={items}>\n      <SelectTrigger size=\"sm\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  )\n}\n",
+      "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst items = [\n  { label: \"Updated Select framework\", value: null },\n  { label: \"Updated Next.js\", value: \"next\" },\n  { label: \"Updated Vite\", value: \"vite\" },\n  { label: \"Updated Astro\", value: \"astro\" },\n]\n\nexport default function SelectSm() {\n  return (\n    <Select items={items}>\n      <SelectTrigger size=\"sm\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/select-with-groups.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/select-with-groups.tsx",
-      "content": "import {\n  Select,\n  SelectGroup,\n  SelectGroupLabel,\n  SelectItem,\n  SelectPopup,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst placeholder = [{ label: \"Select framework\", value: null }]\n\nconst frontend = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n]\n\nconst backend = [\n  { label: \"Express\", value: \"express\" },\n  { label: \"NestJS\", value: \"nestjs\" },\n  { label: \"Fastify\", value: \"fastify\" },\n  { label: \"Django\", value: \"django\" },\n  { label: \"Flask\", value: \"flask\" },\n  { label: \"Rails\", value: \"rails\" },\n]\n\nexport default function SelectWithGroups() {\n  return (\n    <Select items={[...placeholder, ...frontend, ...backend]}>\n      <SelectTrigger>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        <SelectGroup>\n          <SelectGroupLabel>Frontend</SelectGroupLabel>\n          {frontend.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n        <SelectSeparator />\n        <SelectGroup>\n          <SelectGroupLabel>Backend</SelectGroupLabel>\n          {backend.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectPopup>\n    </Select>\n  )\n}\n",
+      "content": "import {\n  Select,\n  SelectGroup,\n  SelectGroupLabel,\n  SelectItem,\n  SelectPopup,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst placeholder = [{ label: \"Updated Select framework\", value: null }]\n\nconst frontend = [\n  { label: \"Updated Next.js\", value: \"next\" },\n  { label: \"Updated Vite\", value: \"vite\" },\n  { label: \"Updated Astro\", value: \"astro\" },\n]\n\nconst backend = [\n  { label: \"Updated Express\", value: \"express\" },\n  { label: \"Updated NestJS\", value: \"nestjs\" },\n  { label: \"Updated Fastify\", value: \"fastify\" },\n  { label: \"Updated Django\", value: \"django\" },\n  { label: \"Updated Flask\", value: \"flask\" },\n  { label: \"Updated Rails\", value: \"rails\" },\n]\n\nexport default function SelectWithGroups() {\n  return (\n    <Select items={[...placeholder, ...frontend, ...backend]}>\n      <SelectTrigger>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        <SelectGroup>\n          <SelectGroupLabel>Updated Frontend</SelectGroupLabel>\n          {frontend.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n        <SelectSeparator />\n        <SelectGroup>\n          <SelectGroupLabel>Updated Backend</SelectGroupLabel>\n          {backend.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectPopup>\n    </Select>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/select-without-alignment.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/select-without-alignment.tsx",
-      "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst items = [\n  { label: \"Select framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n]\n\nexport default function SelectWithoutAlignment() {\n  return (\n    <Select items={items}>\n      <SelectTrigger>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup alignItemWithTrigger={false}>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  )\n}\n",
+      "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst items = [\n  { label: \"Updated Select framework\", value: null },\n  { label: \"Updated Next.js\", value: \"next\" },\n  { label: \"Updated Vite\", value: \"vite\" },\n  { label: \"Updated Astro\", value: \"astro\" },\n]\n\nexport default function SelectWithoutAlignment() {\n  return (\n    <Select items={items}>\n      <SelectTrigger>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup alignItemWithTrigger={false}>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/select.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/default/ui/select.tsx",
-      "content": "\"use client\"\n\nimport { Select as SelectPrimitive } from \"@base-ui-components/react/select\"\nimport {\n  ChevronDownIcon,\n  ChevronsUpDownIcon,\n  ChevronUpIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\" | \"lg\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(\n        \"relative inline-flex w-full min-w-36 items-center justify-between gap-2 rounded-lg border border-input bg-background bg-clip-padding px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] text-base/5 shadow-xs ring-ring/24 transition-shadow outline-none select-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:border-ring focus-visible:ring-[3px] in-data-[slot=field]:not-data-filled:text-muted-foreground aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] dark:aria-invalid:ring-destructive/24 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&:is([data-disabled],:focus-visible,[aria-invalid],[data-pressed])]:shadow-none\",\n        size === \"sm\" &&\n          \"gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]\",\n        size === \"lg\" && \"py-[calc(--spacing(2)-1px)]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\">\n        <ChevronsUpDownIcon className=\"-me-1 size-4 opacity-72\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"truncate\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectPopup({\n  className,\n  children,\n  sideOffset = 4,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props & {\n  sideOffset?: SelectPrimitive.Positioner.Props[\"sideOffset\"]\n  alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\"alignItemWithTrigger\"]\n}) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        data-slot=\"select-positioner\"\n        className=\"z-50 select-none\"\n        sideOffset={sideOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-popup\"\n          className=\"origin-(--transform-origin) transition-[scale,opacity] has-data-starting-style:scale-98 has-data-starting-style:opacity-0 has-data-[side=none]:scale-100 has-data-[side=none]:transition-none\"\n          {...props}\n        >\n          <SelectPrimitive.ScrollUpArrow\n            className=\"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-gradient-to-b before:from-popover before:from-50%\"\n            data-slot=\"select-scroll-up-arrow\"\n          >\n            <ChevronUpIcon className=\"relative size-4\" />\n          </SelectPrimitive.ScrollUpArrow>\n          <span className=\"relative block h-full rounded-lg border bg-popover bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-lg dark:not-in-data-[slot=group]:bg-clip-border\">\n            <SelectPrimitive.List\n              data-slot=\"select-list\"\n              className={cn(\n                \"max-h-(--available-height) min-w-(--anchor-width) overflow-y-auto p-1\",\n                className\n              )}\n            >\n              {children}\n            </SelectPrimitive.List>\n          </span>\n          <SelectPrimitive.ScrollDownArrow\n            className=\"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-gradient-to-t before:from-popover before:from-50%\"\n            data-slot=\"select-scroll-down-arrow\"\n          >\n            <ChevronDownIcon className=\"relative size-4\" />\n          </SelectPrimitive.ScrollDownArrow>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-disabled:pointer-events-none data-disabled:opacity-64 data-highlighted:bg-accent data-highlighted:text-accent-foreground sm:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          xmlns=\"http://www.w3.org/1500/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText className=\"col-start-2\">\n        {children}\n      </SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  )\n}\n\nfunction SelectGroup(props: SelectPrimitive.Group.Props) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectGroupLabel(props: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\"\n      data-slot=\"select-group-label\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectPopup,\n  SelectPopup as SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectGroup,\n  SelectGroupLabel,\n}\n",
+      "content": "\"use client\"\n\nimport { Select as SelectPrimitive } from \"@base-ui-components/react/select\"\nimport {\n  ChevronDownIcon,\n  ChevronsUpDownIcon,\n  ChevronUpIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\" | \"lg\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(\n        \"relative inline-flex w-full min-w-36 items-center justify-between gap-2 rounded-lg border border-input bg-background bg-clip-padding px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] text-base/5 shadow-xs ring-ring/24 transition-shadow outline-none select-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:border-ring focus-visible:ring-[3px] in-data-[slot=field]:not-data-filled:text-muted-foreground aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] dark:aria-invalid:ring-destructive/24 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&:is([data-disabled],:focus-visible,[aria-invalid],[data-pressed])]:shadow-none\",\n        size === \"sm\" &&\n          \"gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]\",\n        size === \"lg\" && \"py-[calc(--spacing(2)-1px)]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\">\n        <ChevronsUpDownIcon className=\"-me-1 size-4 opacity-72\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectValue({\n  className,\n  placeholder,\n  children,\n  ...props\n}: SelectPrimitive.Value.Props & { placeholder?: string }) {\n  const resolvedChildren =\n    children ?? ((value: unknown) => value ?? placeholder)\n\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"truncate\", className)}\n      {...props}\n    >\n      {resolvedChildren as any}\n    </SelectPrimitive.Value>\n  )\n}\n\nfunction SelectPopup({\n  className,\n  children,\n  sideOffset = 4,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props & {\n  sideOffset?: SelectPrimitive.Positioner.Props[\"sideOffset\"]\n  alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\"alignItemWithTrigger\"]\n}) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        data-slot=\"select-positioner\"\n        className=\"z-50 select-none\"\n        sideOffset={sideOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-popup\"\n          className=\"origin-(--transform-origin) transition-[scale,opacity] has-data-starting-style:scale-98 has-data-starting-style:opacity-0 has-data-[side=none]:scale-100 has-data-[side=none]:transition-none\"\n          {...props}\n        >\n          <SelectPrimitive.ScrollUpArrow\n            className=\"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-gradient-to-b before:from-popover before:from-50%\"\n            data-slot=\"select-scroll-up-arrow\"\n          >\n            <ChevronUpIcon className=\"relative size-4\" />\n          </SelectPrimitive.ScrollUpArrow>\n          <span className=\"relative block h-full rounded-lg border bg-popover bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-lg dark:not-in-data-[slot=group]:bg-clip-border\">\n            <SelectPrimitive.List\n              data-slot=\"select-list\"\n              className={cn(\n                \"max-h-(--available-height) min-w-(--anchor-width) overflow-y-auto p-1\",\n                className\n              )}\n            >\n              {children}\n            </SelectPrimitive.List>\n          </span>\n          <SelectPrimitive.ScrollDownArrow\n            className=\"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-gradient-to-t before:from-popover before:from-50%\"\n            data-slot=\"select-scroll-down-arrow\"\n          >\n            <ChevronDownIcon className=\"relative size-4\" />\n          </SelectPrimitive.ScrollDownArrow>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-disabled:pointer-events-none data-disabled:opacity-64 data-highlighted:bg-accent data-highlighted:text-accent-foreground sm:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          xmlns=\"http://www.w3.org/1500/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText className=\"col-start-2\">\n        {children}\n      </SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  )\n}\n\nfunction SelectGroup(props: SelectPrimitive.Group.Props) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectGroupLabel(props: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\"\n      data-slot=\"select-group-label\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectPopup,\n  SelectPopup as SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectGroup,\n  SelectGroupLabel,\n}\n",
       "type": "registry:ui"
     }
   ],

package/public/r/separator-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/separator-demo.tsx",
-      "content": "import { Separator } from \"@/registry/default/ui/separator\"\n\nexport default function SeparatorDemo() {\n  return (\n    <div className=\"max-w-72\">\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium\">loveui</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          Unstyled, accessible primitives for fast product UI and design\n          systems.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex items-center gap-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n        <Separator orientation=\"vertical\" />\n        <div>Releases</div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { Separator } from \"@/registry/default/ui/separator\"\n\nexport default function SeparatorDemo() {\n  return (\n    <div className=\"max-w-72\">\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium\">loveui</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          Updated Unstyled, accessible primitives for fast product UI and design\n          systems.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex items-center gap-4 text-sm\">\n        <div>Updated Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Updated Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Updated Source</div>\n        <Separator orientation=\"vertical\" />\n        <div>Updated Releases</div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/sheet-demo.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/examples/sheet-demo.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Field, FieldControl, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetPopup,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nexport default function DialogDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger\n        render={(props) => (\n          <Button {...props} variant=\"outline\">\n            Open Sheet\n          </Button>\n        )}\n      />\n      <SheetPopup>\n        <Form>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"flex flex-col gap-4 px-4\">\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <FieldControl type=\"text\" defaultValue=\"Connor Love\" />\n            </Field>\n            <Field>\n              <FieldLabel>Username</FieldLabel>\n              <FieldControl type=\"text\" defaultValue=\"@loveconnor\" />\n            </Field>\n          </div>\n          <SheetFooter>\n            <SheetClose\n              render={(props) => (\n                <Button {...props} variant=\"ghost\">\n                  Cancel\n                </Button>\n              )}\n            />\n            <Button type=\"submit\">Save</Button>\n          </SheetFooter>\n        </Form>\n      </SheetPopup>\n    </Sheet>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Field, FieldControl, FieldLabel } from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetPopup,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nexport default function DialogDemo() {\n  return (\n    <Sheet>\n      <SheetTrigger\n        render={(props) => (\n          <Button {...props} variant=\"outline\">\n            Updated Open Sheet\n          </Button>\n        )}\n      />\n      <SheetPopup>\n        <Form>\n          <SheetHeader>\n            <SheetTitle>Updated Edit profile</SheetTitle>\n            <SheetDescription>\n              Updated Make changes to your profile here. Click save when\n              you&apos;re done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"flex flex-col gap-4 px-4\">\n            <Field>\n              <FieldLabel>Updated Name</FieldLabel>\n              <FieldControl type=\"text\" defaultValue=\"Connor Love\" />\n            </Field>\n            <Field>\n              <FieldLabel>Updated Username</FieldLabel>\n              <FieldControl type=\"text\" defaultValue=\"@loveconnor\" />\n            </Field>\n          </div>\n          <SheetFooter>\n            <SheetClose\n              render={(props) => (\n                <Button {...props} variant=\"ghost\">\n                  Updated Cancel\n                </Button>\n              )}\n            />\n            <Button type=\"submit\">Updated Save</Button>\n          </SheetFooter>\n        </Form>\n      </SheetPopup>\n    </Sheet>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/sheet-position.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/sheet-position.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Sheet,\n  SheetDescription,\n  SheetHeader,\n  SheetPopup,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nexport default function DialogDemo() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Sheet>\n        <SheetTrigger\n          render={(props) => (\n            <Button {...props} variant=\"outline\">\n              Open Right\n            </Button>\n          )}\n        />\n        <SheetPopup showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>Right</SheetTitle>\n            <SheetDescription>Right side of the screen.</SheetDescription>\n          </SheetHeader>\n        </SheetPopup>\n      </Sheet>\n      <Sheet>\n        <SheetTrigger\n          render={(props) => (\n            <Button {...props} variant=\"outline\">\n              Open Left\n            </Button>\n          )}\n        />\n        <SheetPopup side=\"left\" showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>Left</SheetTitle>\n            <SheetDescription>Left side of the screen.</SheetDescription>\n          </SheetHeader>\n        </SheetPopup>\n      </Sheet>\n      <Sheet>\n        <SheetTrigger\n          render={(props) => (\n            <Button {...props} variant=\"outline\">\n              Open Top\n            </Button>\n          )}\n        />\n        <SheetPopup side=\"top\" showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>Top</SheetTitle>\n            <SheetDescription>Top of the screen.</SheetDescription>\n          </SheetHeader>\n        </SheetPopup>\n      </Sheet>\n      <Sheet>\n        <SheetTrigger\n          render={(props) => (\n            <Button {...props} variant=\"outline\">\n              Open Bottom\n            </Button>\n          )}\n        />\n        <SheetPopup side=\"bottom\" showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>Bottom</SheetTitle>\n            <SheetDescription>Bottom of the screen.</SheetDescription>\n          </SheetHeader>\n        </SheetPopup>\n      </Sheet>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Sheet,\n  SheetDescription,\n  SheetHeader,\n  SheetPopup,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nexport default function DialogDemo() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Sheet>\n        <SheetTrigger\n          render={(props) => (\n            <Button {...props} variant=\"outline\">\n              Updated Open Right\n            </Button>\n          )}\n        />\n        <SheetPopup showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>Updated Right</SheetTitle>\n            <SheetDescription>\n              Updated Right side of the screen.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetPopup>\n      </Sheet>\n      <Sheet>\n        <SheetTrigger\n          render={(props) => (\n            <Button {...props} variant=\"outline\">\n              Updated Open Left\n            </Button>\n          )}\n        />\n        <SheetPopup side=\"left\" showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>Updated Left</SheetTitle>\n            <SheetDescription>\n              Updated Left side of the screen.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetPopup>\n      </Sheet>\n      <Sheet>\n        <SheetTrigger\n          render={(props) => (\n            <Button {...props} variant=\"outline\">\n              Updated Open Top\n            </Button>\n          )}\n        />\n        <SheetPopup side=\"top\" showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>Updated Top</SheetTitle>\n            <SheetDescription>Updated Top of the screen.</SheetDescription>\n          </SheetHeader>\n        </SheetPopup>\n      </Sheet>\n      <Sheet>\n        <SheetTrigger\n          render={(props) => (\n            <Button {...props} variant=\"outline\">\n              Updated Open Bottom\n            </Button>\n          )}\n        />\n        <SheetPopup side=\"bottom\" showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>Updated Bottom</SheetTitle>\n            <SheetDescription>Updated Bottom of the screen.</SheetDescription>\n          </SheetHeader>\n        </SheetPopup>\n      </Sheet>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/sidebar-nav.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar-nav",
+  "description": "Sidebar navigation layout",
+  "registryDependencies": [
+    "@loveui/button",
+    "@loveui/separator"
+  ],
+  "files": [
+    {
+      "path": "registry/default/examples/sidebar-nav.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst navItems = [\n  { label: \"Overview\", active: true },\n  { label: \"Analytics\", active: false },\n  { label: \"Customers\", active: false },\n  { label: \"Billing\", active: false },\n  { label: \"Settings\", active: false },\n]\n\nexport default function SidebarNav() {\n  return (\n    <aside className=\"w-full max-w-64 rounded-lg border bg-card p-2\">\n      <nav className=\"flex flex-col gap-1\">\n        {navItems.map((item) => (\n          <Button\n            key={item.label}\n            className=\"justify-start\"\n            variant={item.active ? \"secondary\" : \"ghost\"}\n          >\n            {item.label}\n          </Button>\n        ))}\n      </nav>\n      <Separator className=\"my-2\" />\n      <Button className=\"w-full\" variant=\"outline\">\n        Invite team\n      </Button>\n    </aside>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "categories": [
+    "sidebar",
+    "navigation",
+    "dashboard"
+  ],
+  "type": "registry:example"
+}

package/public/r/skeleton-demo.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/skeleton-demo.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { UserRoundPlusIcon, UsersRoundIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst users = [\n  {\n    name: \"Sarah Johnson\",\n    role: \"Design Engineer\",\n    followers: \"15k\",\n    image:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&dpr=2&q=80\",\n    fallback: \"SJ\",\n    delay: 3000,\n  },\n  {\n    name: \"Mark Bennett Andersson\",\n    role: \"Product Designer\",\n    followers: \"8k\",\n    image:\n      \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=80&h=80&dpr=2&q=80\",\n    fallback: \"MA\",\n    delay: 4000,\n  },\n  {\n    name: \"Alex Rivera\",\n    role: \"UI/UX Designer\",\n    followers: \"12k\",\n    image:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&dpr=2&q=80\",\n    fallback: \"AR\",\n    delay: 3400,\n  },\n]\n\nfunction UserCard({ delay, user }: { delay: number; user: (typeof users)[0] }) {\n  const [isLoaded, setIsLoaded] = useState(false)\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setIsLoaded(true)\n    }, delay)\n\n    return () => clearTimeout(timer)\n  }, [delay])\n\n  if (!isLoaded) {\n    return <UserCardSkeleton />\n  }\n\n  return (\n    <>\n      <Avatar className=\"size-10\">\n        <AvatarImage src={user.image} alt={user.name} />\n        <AvatarFallback>{user.fallback}</AvatarFallback>\n      </Avatar>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <h4 className=\"line-clamp-1 text-sm font-medium\">{user.name}</h4>\n        <div className=\"flex items-center gap-3 text-xs text-muted-foreground\">\n          <span className=\"truncate\">{user.role}</span>\n          <div className=\"flex min-w-0 items-center gap-1\">\n            <UsersRoundIcon className=\"size-3 shrink-0\" />\n            <span className=\"truncate\">\n              {user.followers}\n              <span className=\"max-sm:hidden\"> followers</span>\n            </span>\n          </div>\n        </div>\n      </div>\n      <Button size=\"xs\">\n        <UserRoundPlusIcon />\n        Follow\n      </Button>\n    </>\n  )\n}\n\nfunction UserCardSkeleton() {\n  return (\n    <>\n      <Skeleton className=\"size-10 rounded-full\" />\n      <div className=\"flex flex-1 flex-col\">\n        <Skeleton className=\"my-0.5 h-4 max-w-54\" />\n        <div className=\"flex max-w-54 items-center gap-1\">\n          <Skeleton className=\"my-0.5 h-4 w-1/2\" />\n          <Skeleton className=\"my-0.5 h-4 w-1/2\" />\n        </div>\n      </div>\n      <Skeleton className=\"h-6 w-17\" />\n    </>\n  )\n}\n\nexport default function SkeletonDemo() {\n  return (\n    <div className=\"flex w-full max-w-92 flex-col gap-6\">\n      {users.map((user) => (\n        <div key={user.fallback} className=\"flex items-center gap-4\">\n          <UserCard delay={user.delay} user={user} />\n        </div>\n      ))}\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { UserRoundPlusIcon, UsersRoundIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst users = [\n  {\n    name: \"Updated Sarah Johnson\",\n    role: \"Design Engineer\",\n    followers: \"15k\",\n    image:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&dpr=2&q=80\",\n    fallback: \"SJ\",\n    delay: 3000,\n  },\n  {\n    name: \"Updated Mark Bennett Andersson\",\n    role: \"Product Designer\",\n    followers: \"8k\",\n    image:\n      \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=80&h=80&dpr=2&q=80\",\n    fallback: \"MA\",\n    delay: 4000,\n  },\n  {\n    name: \"Updated Alex Rivera\",\n    role: \"UI/UX Designer\",\n    followers: \"12k\",\n    image:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&dpr=2&q=80\",\n    fallback: \"AR\",\n    delay: 3400,\n  },\n]\n\nfunction UserCard({ delay, user }: { delay: number; user: (typeof users)[0] }) {\n  const [isLoaded, setIsLoaded] = useState(false)\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setIsLoaded(true)\n    }, delay)\n\n    return () => clearTimeout(timer)\n  }, [delay])\n\n  if (!isLoaded) {\n    return <UserCardSkeleton />\n  }\n\n  return (\n    <>\n      <Avatar className=\"size-10\">\n        <AvatarImage src={user.image} alt={user.name} />\n        <AvatarFallback>{user.fallback}</AvatarFallback>\n      </Avatar>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <h4 className=\"line-clamp-1 text-sm font-medium\">{user.name}</h4>\n        <div className=\"flex items-center gap-3 text-xs text-muted-foreground\">\n          <span className=\"truncate\">{user.role}</span>\n          <div className=\"flex min-w-0 items-center gap-1\">\n            <UsersRoundIcon className=\"size-3 shrink-0\" />\n            <span className=\"truncate\">\n              {user.followers}\n              <span className=\"max-sm:hidden\"> followers</span>\n            </span>\n          </div>\n        </div>\n      </div>\n      <Button size=\"xs\">\n        <UserRoundPlusIcon />\n        Updated Follow\n      </Button>\n    </>\n  )\n}\n\nfunction UserCardSkeleton() {\n  return (\n    <>\n      <Skeleton className=\"size-10 rounded-full\" />\n      <div className=\"flex flex-1 flex-col\">\n        <Skeleton className=\"my-0.5 h-4 max-w-54\" />\n        <div className=\"flex max-w-54 items-center gap-1\">\n          <Skeleton className=\"my-0.5 h-4 w-1/2\" />\n          <Skeleton className=\"my-0.5 h-4 w-1/2\" />\n        </div>\n      </div>\n      <Skeleton className=\"h-6 w-17\" />\n    </>\n  )\n}\n\nexport default function SkeletonDemo() {\n  return (\n    <div className=\"flex w-full max-w-92 flex-col gap-6\">\n      {users.map((user) => (\n        <div key={user.fallback} className=\"flex items-center gap-4\">\n          <UserCard delay={user.delay} user={user} />\n        </div>\n      ))}\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/skeleton.json

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/default/ui/skeleton.tsx",
-      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\n        \"animate-skeleton rounded-sm [--skeleton-highlight:--alpha(var(--color-white)/64%)] [background:linear-gradient(120deg,transparent_40%,var(--skeleton-highlight),transparent_60%)_var(--color-muted)_0_0_/_200%_100%_fixed] dark:[--skeleton-highlight:--alpha(var(--color-white)/4%)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "content": "import type { ComponentPropsWithoutRef } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Skeleton({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\n        \"animate-skeleton rounded-sm [--skeleton-highlight:--alpha(var(--color-white)/64%)] [background:linear-gradient(120deg,transparent_40%,var(--skeleton-highlight),transparent_60%)_var(--color-muted)_0_0_/_200%_100%_fixed] dark:[--skeleton-highlight:--alpha(var(--color-white)/4%)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
       "type": "registry:ui"
     }
   ],

package/public/r/slider-form.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/examples/slider-form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport { Slider, SliderValue } from \"@/registry/default/ui/slider\"\n\nexport default function SliderForm() {\n  const [loading, setLoading] = React.useState<boolean>(false)\n  const [value, setValue] = React.useState<number | readonly number[]>([25, 75])\n\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    const volumes = formData.getAll(\"volume\")\n    alert(`Volume: ${volumes.join(\", \")}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit}>\n      <Field name=\"volume\" className=\"items-stretch gap-3\">\n        <Slider value={value} onValueChange={setValue} disabled={loading}>\n          <div className=\"mb-2 flex items-center justify-between gap-1\">\n            <FieldLabel>Volume</FieldLabel>\n            <SliderValue />\n          </div>\n        </Slider>\n        <FieldDescription>Choose a value between 0 and 100</FieldDescription>\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 {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\nimport { Slider, SliderValue } from \"@/registry/default/ui/slider\"\n\nexport default function SliderForm() {\n  const [loading, setLoading] = React.useState<boolean>(false)\n  const [value, setValue] = React.useState<number | readonly number[]>([25, 75])\n\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    const volumes = formData.getAll(\"volume\")\n    alert(`Volume: ${volumes.join(\", \")}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit}>\n      <Field name=\"volume\" className=\"items-stretch gap-3\">\n        <Slider value={value} onValueChange={setValue} disabled={loading}>\n          <div className=\"mb-2 flex items-center justify-between gap-1\">\n            <FieldLabel>Updated Volume</FieldLabel>\n            <SliderValue />\n          </div>\n        </Slider>\n        <FieldDescription>\n          Updated Choose a value between 0 and 100\n        </FieldDescription>\n      </Field>\n      <Button type=\"submit\" disabled={loading}>\n        Updated Submit\n      </Button>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

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

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/slider-with-label-value.tsx",
-      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Slider, SliderValue } from \"@/registry/default/ui/slider\"\n\nexport default function SliderWithLabelValue() {\n  return (\n    <Slider defaultValue={50}>\n      <div className=\"mb-2 flex items-center justify-between gap-1\">\n        <Label className=\"text-sm font-medium\">Opacity</Label>\n        <SliderValue />\n      </div>\n    </Slider>\n  )\n}\n",
+      "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Slider, SliderValue } from \"@/registry/default/ui/slider\"\n\nexport default function SliderWithLabelValue() {\n  return (\n    <Slider defaultValue={50}>\n      <div className=\"mb-2 flex items-center justify-between gap-1\">\n        <Label className=\"text-sm font-medium\">Updated Opacity</Label>\n        <SliderValue />\n      </div>\n    </Slider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/sonner.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sonner",
+  "type": "registry:ui",
+  "dependencies": [
+    "sonner",
+    "next-themes"
+  ],
+  "files": [
+    {
+      "path": "registry/default/ui/sonner.tsx",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, ToasterProps } from \"sonner\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          description: \"text-muted-foreground!\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/public/r/stats-card.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "stats-card",
+  "description": "KPI card for dashboard stats",
+  "registryDependencies": [
+    "@loveui/badge",
+    "@loveui/card"
+  ],
+  "files": [
+    {
+      "path": "registry/default/examples/stats-card.tsx",
+      "content": "import { Badge } from \"@/registry/default/ui/badge\"\nimport {\n  Card,\n  CardDescription,\n  CardHeader,\n  CardPanel,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\n\nexport default function StatsCard() {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader className=\"flex flex-row items-center justify-between gap-4\">\n        <div className=\"space-y-1\">\n          <CardDescription>Monthly recurring revenue</CardDescription>\n          <CardTitle className=\"text-2xl\">$48,230</CardTitle>\n        </div>\n        <Badge variant=\"outline\">+12.4%</Badge>\n      </CardHeader>\n      <CardPanel>\n        <p className=\"text-sm text-muted-foreground\">\n          Growth compared to last month across all active subscriptions.\n        </p>\n      </CardPanel>\n    </Card>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "categories": [
+    "dashboard",
+    "card",
+    "stats"
+  ],
+  "type": "registry:example"
+}

package/public/r/status-custom.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/status-custom.tsx",
-      "content": "\"use client\"\n\nimport {\n  Status,\n  StatusIndicator,\n  StatusLabel,\n} from \"../../../../../packages/status\"\n\nconst Example = () => (\n  <Status\n    className=\"gap-4 rounded-full px-6 py-2 text-sm\"\n    status=\"online\"\n    variant=\"outline\"\n  >\n    <StatusIndicator />\n    <StatusLabel className=\"font-mono\">Fully operational</StatusLabel>\n  </Status>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  Status,\n  StatusIndicator,\n  StatusLabel,\n} from \"../../../../../packages/status\"\n\nconst Example = () => (\n  <Status\n    className=\"gap-4 rounded-full px-6 py-2 text-sm\"\n    status=\"online\"\n    variant=\"outline\"\n  >\n    <StatusIndicator />\n    <StatusLabel className=\"font-mono\">Updated Fully operational</StatusLabel>\n  </Status>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],