love-ui 1.2.13 → 1.2.15

package/public/r/roadmap.json

@@ -1,28 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "roadmap",
-  "description": "A comprehensive roadmap with multiple views: Gantt, Calendar, List, Kanban, and Table.",
-  "registryDependencies": [
-    "@loveui/calendar",
-    "@loveui/gantt",
-    "@loveui/kanban",
-    "@loveui/list",
-    "@loveui/table",
-    "@loveui/tabs",
-    "@loveui/avatar",
-    "@loveui/context-menu"
-  ],
-  "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: \"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"
-    }
-  ],
-  "categories": [
-    "blocks",
-    "roadmap",
-    "project"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "sandbox-no-file-explorer",
-  "description": "Sandbox without the file explorer for a compact layout.",
-  "registryDependencies": [
-    "@loveui/sandbox",
-    "@loveui/code-block"
-  ],
-  "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            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"
-    }
-  ],
-  "categories": [
-    "code",
-    "sandbox"
-  ],
-  "type": "registry:example"
-}

package/public/r/sandbox.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "sandbox",
-  "description": "Sandbox with file explorer and code preview.",
-  "registryDependencies": [
-    "@loveui/sandbox",
-    "@loveui/code-block"
-  ],
-  "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            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"
-    }
-  ],
-  "categories": [
-    "code",
-    "sandbox"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "scroll-area-both",
-  "description": "Scroll area - both horizontal and vertical",
-  "registryDependencies": [
-    "@loveui/scroll-area"
-  ],
-  "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        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"
-    }
-  ],
-  "categories": [
-    "scroll area"
-  ],
-  "type": "registry:example"
-}

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

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

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

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "scroll-area-horizontal",
-  "description": "Scroll area - horizontal",
-  "registryDependencies": [
-    "@loveui/scroll-area"
-  ],
-  "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\">Updated Item {i + 1}</span>\n          </div>\n        ))}\n      </div>\n    </ScrollArea>\n  )\n}\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "scroll area"
-  ],
-  "type": "registry:example"
-}

package/public/r/scroll-area.json

@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "scroll-area",
-  "dependencies": [
-    "@base-ui-components/react"
-  ],
-  "files": [
-    {
-      "path": "registry/default/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui-components/react/scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  orientation,\n  ...props\n}: ScrollAreaPrimitive.Root.Props & {\n  orientation?: \"horizontal\" | \"vertical\" | \"both\"\n}) {\n  return (\n    <ScrollAreaPrimitive.Root className=\"min-h-0\" {...props}>\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className={cn(\n          \"size-full overscroll-contain rounded-[inherit] transition-[box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n          className\n        )}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      {orientation === \"both\" ? (\n        <>\n          <ScrollBar orientation=\"vertical\" />\n          <ScrollBar orientation=\"horizontal\" />\n        </>\n      ) : (\n        <ScrollBar orientation={orientation} />\n      )}\n      <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"m-0.5 flex opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-hovering:duration-100 data-scrolling:opacity-100 data-scrolling:delay-0 data-scrolling:duration-100 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-1.5\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-foreground/20\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
-      "type": "registry:ui"
-    }
-  ],
-  "type": "registry:ui"
-}

package/public/r/select-demo.json

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

package/public/r/select-disabled.json

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

package/public/r/select-form.json

@@ -1,26 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "select-form",
-  "description": "Select in a form",
-  "registryDependencies": [
-    "@loveui/button",
-    "@loveui/select",
-    "@loveui/form",
-    "@loveui/field"
-  ],
-  "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: \"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"
-    }
-  ],
-  "categories": [
-    "select",
-    "form",
-    "field",
-    "helper",
-    "hint"
-  ],
-  "type": "registry:example"
-}

package/public/r/select-lg.json

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "select-lg",
-  "description": "A select with large size",
-  "registryDependencies": [
-    "@loveui/select"
-  ],
-  "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: \"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"
-    }
-  ],
-  "categories": [
-    "select"
-  ],
-  "type": "registry:example"
-}

package/public/r/select-multiple.json

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "select-multiple",
-  "description": "Multiple selection with formatted value",
-  "registryDependencies": [
-    "@loveui/select"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/select-multiple.tsx",
-      "content": "\"use client\"\n\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst languages = {\n  javascript: \"JavaScript\",\n  typescript: \"TypeScript\",\n  python: \"Python\",\n  java: \"Java\",\n  csharp: \"C#\",\n  php: \"PHP\",\n  cpp: \"C++\",\n  rust: \"Rust\",\n  go: \"Go\",\n  swift: \"Swift\",\n}\n\ntype Language = keyof typeof languages\n\nconst values = Object.keys(languages) as Language[]\n\nfunction renderValue(value: Language[]) {\n  if (value.length === 0) {\n    return \"Select languages…\"\n  }\n\n  const firstLanguage = value[0] ? languages[value[0]] : \"\"\n  const additionalLanguages =\n    value.length > 1 ? ` (+${value.length - 1} more)` : \"\"\n  return firstLanguage + additionalLanguages\n}\n\nexport default function SelectMultiple() {\n  return (\n    <Select multiple defaultValue={[\"javascript\", \"typescript\"]}>\n      <SelectTrigger>\n        <SelectValue>{renderValue}</SelectValue>\n      </SelectTrigger>\n      <SelectPopup alignItemWithTrigger={false}>\n        {values.map((value) => (\n          <SelectItem key={value} value={value}>\n            {languages[value]}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  )\n}\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "select"
-  ],
-  "type": "registry:example"
-}

package/public/r/select-native.json

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

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "select-sm",
-  "description": "A select with small size",
-  "registryDependencies": [
-    "@loveui/select"
-  ],
-  "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: \"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"
-    }
-  ],
-  "categories": [
-    "select"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "select-with-groups",
-  "description": "Select items grouped with labels",
-  "registryDependencies": [
-    "@loveui/select"
-  ],
-  "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: \"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"
-    }
-  ],
-  "categories": [
-    "select"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "select-without-alignment",
-  "description": "Select popup not aligned to trigger",
-  "registryDependencies": [
-    "@loveui/select"
-  ],
-  "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: \"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"
-    }
-  ],
-  "categories": [
-    "select"
-  ],
-  "type": "registry:example"
-}

package/public/r/select.json

@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "select",
-  "dependencies": [
-    "@base-ui-components/react"
-  ],
-  "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({\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"
-    }
-  ],
-  "type": "registry:ui"
-}

package/public/r/separator-demo.json

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "separator-demo",
-  "description": "Separator with horizontal and vertical orientations",
-  "registryDependencies": [
-    "@loveui/separator"
-  ],
-  "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          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"
-    }
-  ],
-  "categories": [
-    "separator"
-  ],
-  "type": "registry:example"
-}

package/public/r/separator.json

@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "separator",
-  "dependencies": [
-    "@base-ui-components/react"
-  ],
-  "files": [
-    {
-      "path": "registry/default/ui/separator.tsx",
-      "content": "import { Separator as SeparatorPrimitive } from \"@base-ui-components/react/separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
-      "type": "registry:ui"
-    }
-  ],
-  "type": "registry:ui"
-}

package/public/r/sheet-demo.json

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

package/public/r/sheet-position.json

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

package/public/r/sheet.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "sheet",
-  "dependencies": [
-    "@base-ui-components/react"
-  ],
-  "registryDependencies": [
-    "@loveui/dialog"
-  ],
-  "files": [
-    {
-      "path": "registry/default/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport { Dialog as SheetPrimitive } from \"@base-ui-components/react/dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Sheet(props: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger(props: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetPortal(props: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal {...props} />\n}\n\nfunction SheetClose(props: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetBackdrop({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-backdrop\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetPopup({\n  className,\n  children,\n  showCloseButton = true,\n  side = \"right\",\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <SheetPortal>\n      <SheetBackdrop />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-popup\"\n        className={cn(\n          \"fixed z-50 flex h-[100dvh] flex-col gap-4 bg-popover text-popover-foreground shadow-lg transition-[opacity,translate] duration-300 ease-in-out will-change-transform\",\n          side === \"right\" &&\n            \"inset-y-0 right-0 h-full w-[calc(100%-(--spacing(12)))] max-w-sm data-ending-style:translate-x-full data-starting-style:translate-x-full\",\n          side === \"left\" &&\n            \"inset-y-0 left-0 h-full w-[calc(100%-(--spacing(12)))] max-w-sm data-ending-style:-translate-x-full data-starting-style:-translate-x-full\",\n          side === \"top\" &&\n            \"inset-x-0 top-0 h-auto data-ending-style:-translate-y-full data-starting-style:-translate-y-full\",\n          side === \"bottom\" &&\n            \"inset-x-0 bottom-0 h-auto data-ending-style:translate-y-full data-starting-style:translate-y-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close className=\"absolute end-2 top-2 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-72 transition-[color,background-color,box-shadow,opacity] outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetPortal,\n  SheetClose,\n  SheetBackdrop,\n  SheetBackdrop as SheetOverlay,\n  SheetPopup,\n  SheetPopup as SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
-      "type": "registry:ui"
-    }
-  ],
-  "type": "registry:ui"
-}

package/public/r/sidebar-nav.json

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