love-ui 1.2.12 → 1.2.14

package/public/r/gantt-no-sidebar.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/gantt-no-sidebar.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { faker } from \"@faker-js/faker\"\nimport groupBy from \"lodash.groupby\"\nimport { EyeIcon, LinkIcon, TrashIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  ContextMenu,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nimport {\n  GanttCreateMarkerTrigger,\n  GanttFeatureItem,\n  GanttFeatureList,\n  GanttFeatureListGroup,\n  GanttHeader,\n  GanttMarker,\n  GanttProvider,\n  GanttTimeline,\n  GanttToday,\n} from \"../../../../../packages/gantt\"\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 Example = () => {\n  const [features, setFeatures] = useState(exampleFeatures)\n  const groupedFeatures = groupBy(features, \"group.name\")\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=\"border\"\n      onAddItem={handleAddFeature}\n      range=\"monthly\"\n      zoom={100}\n    >\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\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { faker } from \"@faker-js/faker\"\nimport groupBy from \"lodash.groupby\"\nimport { EyeIcon, LinkIcon, TrashIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  ContextMenu,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nimport {\n  GanttCreateMarkerTrigger,\n  GanttFeatureItem,\n  GanttFeatureList,\n  GanttFeatureListGroup,\n  GanttHeader,\n  GanttMarker,\n  GanttProvider,\n  GanttTimeline,\n  GanttToday,\n} from \"../../../../../packages/gantt\"\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 Example = () => {\n  const [features, setFeatures] = useState(exampleFeatures)\n  const groupedFeatures = groupBy(features, \"group.name\")\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=\"border\"\n      onAddItem={handleAddFeature}\n      range=\"monthly\"\n      zoom={100}\n    >\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\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/gantt-read-only.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/gantt-read-only.tsx",
-      "content": "\"use client\"\n\nimport { faker } from \"@faker-js/faker\"\nimport groupBy from \"lodash.groupby\"\n\nimport {\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\"\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 Example = () => {\n  const groupedFeatures = groupBy(exampleFeatures, \"group.name\")\n\n  const sortedGroupedFeatures = Object.fromEntries(\n    Object.entries(groupedFeatures).sort(([nameA], [nameB]) =>\n      nameA.localeCompare(nameB)\n    )\n  )\n\n  return (\n    <GanttProvider className=\"border\" range=\"monthly\" zoom={100}>\n      <GanttSidebar>\n        {Object.entries(sortedGroupedFeatures).map(([group, features]) => (\n          <GanttSidebarGroup key={group} name={group}>\n            {features.map((feature) => (\n              <GanttSidebarItem feature={feature} key={feature.id} />\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                  <GanttFeatureItem {...feature} />\n                </div>\n              ))}\n            </GanttFeatureListGroup>\n          ))}\n        </GanttFeatureList>\n        {exampleMarkers.map((marker) => (\n          <GanttMarker key={marker.id} {...marker} />\n        ))}\n        <GanttToday />\n      </GanttTimeline>\n    </GanttProvider>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { faker } from \"@faker-js/faker\"\nimport groupBy from \"lodash.groupby\"\n\nimport {\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\"\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 Example = () => {\n  const groupedFeatures = groupBy(exampleFeatures, \"group.name\")\n\n  const sortedGroupedFeatures = Object.fromEntries(\n    Object.entries(groupedFeatures).sort(([nameA], [nameB]) =>\n      nameA.localeCompare(nameB)\n    )\n  )\n\n  return (\n    <GanttProvider className=\"border\" range=\"monthly\" zoom={100}>\n      <GanttSidebar>\n        {Object.entries(sortedGroupedFeatures).map(([group, features]) => (\n          <GanttSidebarGroup key={group} name={group}>\n            {features.map((feature) => (\n              <GanttSidebarItem feature={feature} key={feature.id} />\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                  <GanttFeatureItem {...feature} />\n                </div>\n              ))}\n            </GanttFeatureListGroup>\n          ))}\n        </GanttFeatureList>\n        {exampleMarkers.map((marker) => (\n          <GanttMarker key={marker.id} {...marker} />\n        ))}\n        <GanttToday />\n      </GanttTimeline>\n    </GanttProvider>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/gantt.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/gantt.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { faker } from \"@faker-js/faker\"\nimport groupBy from \"lodash.groupby\"\nimport { EyeIcon, LinkIcon, TrashIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  ContextMenu,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\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\"\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 Example = () => {\n  const [features, setFeatures] = useState(exampleFeatures)\n  const groupedFeatures = groupBy(features, \"group.name\")\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=\"border\"\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\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { faker } from \"@faker-js/faker\"\nimport groupBy from \"lodash.groupby\"\nimport { EyeIcon, LinkIcon, TrashIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  ContextMenu,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\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\"\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 Example = () => {\n  const [features, setFeatures] = useState(exampleFeatures)\n  const groupedFeatures = groupBy(features, \"group.name\")\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=\"border\"\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\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/glimpse-custom.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/glimpse-custom.tsx",
-      "content": "import {\n  Glimpse,\n  GlimpseContent,\n  GlimpseDescription,\n  GlimpseImage,\n  GlimpseTitle,\n  GlimpseTrigger,\n} from \"../../../../../packages/glimpse\"\nimport { glimpse } from \"../../../../../packages/glimpse/server\"\n\nconst Example = async () => {\n  const data = await glimpse(\"https://github.com/loveconnor/loveui\")\n\n  return (\n    <div>\n      Check out{\" \"}\n      <Glimpse closeDelay={0} openDelay={0}>\n        <GlimpseTrigger asChild>\n          <a\n            className=\"font-medium text-primary underline\"\n            href=\"https://github.com/loveconnor/loveui\"\n          >\n            LoveUI\n          </a>\n        </GlimpseTrigger>\n        <GlimpseContent className=\"w-80 bg-secondary\">\n          <GlimpseImage className=\"shadow-lg\" src={data.image ?? \"\"} />\n          <GlimpseTitle className=\"line-clamp-2 text-lg font-semibold\">\n            {data.title}\n          </GlimpseTitle>\n          <GlimpseDescription className=\"text-sm\">\n            {data.description}\n          </GlimpseDescription>\n        </GlimpseContent>\n      </Glimpse>{\" \"}\n      on GitHub\n    </div>\n  )\n}\n\nexport default Example\n",
+      "content": "import {\n  Glimpse,\n  GlimpseContent,\n  GlimpseDescription,\n  GlimpseImage,\n  GlimpseTitle,\n  GlimpseTrigger,\n} from \"../../../../../packages/glimpse\"\nimport { glimpse } from \"../../../../../packages/glimpse/server\"\n\nconst Example = async () => {\n  const data = await glimpse(\"https://github.com/loveconnor/loveui\")\n\n  return (\n    <div>\n      Updated Check out{\" \"}\n      <Glimpse closeDelay={0} openDelay={0}>\n        <GlimpseTrigger asChild>\n          <a\n            className=\"font-medium text-primary underline\"\n            href=\"https://github.com/loveconnor/loveui\"\n          >\n            Updated LoveUI\n          </a>\n        </GlimpseTrigger>\n        <GlimpseContent className=\"w-80 bg-secondary\">\n          <GlimpseImage className=\"shadow-lg\" src={data.image ?? \"\"} />\n          <GlimpseTitle className=\"line-clamp-2 text-lg font-semibold\">\n            {data.title}\n          </GlimpseTitle>\n          <GlimpseDescription className=\"text-sm\">\n            {data.description}\n          </GlimpseDescription>\n        </GlimpseContent>\n      </Glimpse>{\" \"}\n      Updated on GitHub\n    </div>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/glimpse.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/glimpse.tsx",
-      "content": "import {\n  Glimpse,\n  GlimpseContent,\n  GlimpseDescription,\n  GlimpseImage,\n  GlimpseTitle,\n  GlimpseTrigger,\n} from \"../../../../../packages/glimpse\"\nimport { glimpse } from \"../../../../../packages/glimpse/server\"\n\nconst Example = async () => {\n  const data = await glimpse(\"https://github.com/loveconnor/loveui\")\n\n  return (\n    <div>\n      Check out{\" \"}\n      <Glimpse closeDelay={0} openDelay={0}>\n        <GlimpseTrigger asChild>\n          <a\n            className=\"font-medium text-primary underline\"\n            href=\"https://github.com/loveconnor/loveui\"\n          >\n            LoveUI\n          </a>\n        </GlimpseTrigger>\n        <GlimpseContent className=\"w-80\">\n          <GlimpseImage src={data.image ?? \"\"} />\n          <GlimpseTitle>{data.title}</GlimpseTitle>\n          <GlimpseDescription>{data.description}</GlimpseDescription>\n        </GlimpseContent>\n      </Glimpse>{\" \"}\n      on GitHub\n    </div>\n  )\n}\n\nexport default Example\n",
+      "content": "import {\n  Glimpse,\n  GlimpseContent,\n  GlimpseDescription,\n  GlimpseImage,\n  GlimpseTitle,\n  GlimpseTrigger,\n} from \"../../../../../packages/glimpse\"\nimport { glimpse } from \"../../../../../packages/glimpse/server\"\n\nconst Example = async () => {\n  const data = await glimpse(\"https://github.com/loveconnor/loveui\")\n\n  return (\n    <div>\n      Updated Check out{\" \"}\n      <Glimpse closeDelay={0} openDelay={0}>\n        <GlimpseTrigger asChild>\n          <a\n            className=\"font-medium text-primary underline\"\n            href=\"https://github.com/loveconnor/loveui\"\n          >\n            Updated LoveUI\n          </a>\n        </GlimpseTrigger>\n        <GlimpseContent className=\"w-80\">\n          <GlimpseImage src={data.image ?? \"\"} />\n          <GlimpseTitle>{data.title}</GlimpseTitle>\n          <GlimpseDescription>{data.description}</GlimpseDescription>\n        </GlimpseContent>\n      </Glimpse>{\" \"}\n      Updated on GitHub\n    </div>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/gooey-toast-demo.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/gooey-toast-demo.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { gooey, type GooeyPosition } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function GooeyToastDemo() {\n  const [position, setPosition] = useState<GooeyPosition>(\"top-right\")\n\n  const positions: GooeyPosition[] = [\n    \"top-left\",\n    \"top-center\",\n    \"top-right\",\n    \"bottom-left\",\n    \"bottom-center\",\n    \"bottom-right\",\n  ]\n\n  const showToast = (\n    type: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\"\n  ) => {\n    const toasts = {\n      default: {\n        title: \"Event has been created\",\n        description: \"Monday, January 3rd at 6:00pm\",\n      },\n      success: {\n        title: \"Success!\",\n        description: \"Your changes have been saved successfully.\",\n      },\n      error: {\n        title: \"Error occurred\",\n        description: \"Failed to save your changes. Please try again.\",\n      },\n      warning: {\n        title: \"Warning\",\n        description: \"Your session will expire in 5 minutes.\",\n      },\n      info: {\n        title: \"New feature available\",\n        description: \"Check out the new gooey toast component!\",\n      },\n    }\n\n    const config = toasts[type]\n\n    if (type === \"default\") {\n      gooey.show({ ...config, position })\n    } else {\n      gooey[type]({ ...config, position })\n    }\n  }\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex items-center gap-2\">\n        <label htmlFor=\"position\" className=\"text-sm font-medium\">\n          Position:\n        </label>\n        <Select\n          value={position}\n          onValueChange={(v) => setPosition(v as GooeyPosition)}\n        >\n          <SelectTrigger id=\"position\" className=\"w-[180px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {positions.map((pos) => (\n              <SelectItem key={pos} value={pos}>\n                {pos}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div className=\"flex flex-wrap gap-2\">\n        <Button variant=\"outline\" onClick={() => showToast(\"default\")}>\n          Default\n        </Button>\n        <Button variant=\"outline\" onClick={() => showToast(\"success\")}>\n          Success\n        </Button>\n        <Button variant=\"outline\" onClick={() => showToast(\"error\")}>\n          Error\n        </Button>\n        <Button variant=\"outline\" onClick={() => showToast(\"warning\")}>\n          Warning\n        </Button>\n        <Button variant=\"outline\" onClick={() => showToast(\"info\")}>\n          Info\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { gooey, type GooeyPosition } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function GooeyToastDemo() {\n  const [position, setPosition] = useState<GooeyPosition>(\"top-right\")\n\n  const positions: GooeyPosition[] = [\n    \"top-left\",\n    \"top-center\",\n    \"top-right\",\n    \"bottom-left\",\n    \"bottom-center\",\n    \"bottom-right\",\n  ]\n\n  const showToast = (\n    type: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\"\n  ) => {\n    const toasts = {\n      default: {\n        title: \"Updated Event has been created\",\n        description: \"Updated Monday, January 3rd at 6:00pm\",\n      },\n      success: {\n        title: \"Updated Success!\",\n        description: \"Updated Your changes have been saved successfully.\",\n      },\n      error: {\n        title: \"Updated Error occurred\",\n        description: \"Updated Failed to save your changes. Please try again.\",\n      },\n      warning: {\n        title: \"Updated Warning\",\n        description: \"Updated Your session will expire in 5 minutes.\",\n      },\n      info: {\n        title: \"Updated New feature available\",\n        description: \"Updated Check out the new gooey toast component!\",\n      },\n    }\n\n    const config = toasts[type]\n\n    if (type === \"default\") {\n      gooey.show({ ...config, position })\n    } else {\n      gooey[type]({ ...config, position })\n    }\n  }\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex items-center gap-2\">\n        <label htmlFor=\"position\" className=\"text-sm font-medium\">\n          Updated Position:\n        </label>\n        <Select\n          value={position}\n          onValueChange={(v) => setPosition(v as GooeyPosition)}\n        >\n          <SelectTrigger id=\"position\" className=\"w-[180px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {positions.map((pos) => (\n              <SelectItem key={pos} value={pos}>\n                {pos}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div className=\"flex flex-wrap gap-2\">\n        <Button variant=\"outline\" onClick={() => showToast(\"default\")}>\n          Updated Default\n        </Button>\n        <Button variant=\"outline\" onClick={() => showToast(\"success\")}>\n          Updated Success\n        </Button>\n        <Button variant=\"outline\" onClick={() => showToast(\"error\")}>\n          Updated Error\n        </Button>\n        <Button variant=\"outline\" onClick={() => showToast(\"warning\")}>\n          Updated Warning\n        </Button>\n        <Button variant=\"outline\" onClick={() => showToast(\"info\")}>\n          Updated Info\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/gooey-toast-promise.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/gooey-toast-promise.tsx",
-      "content": "\"use client\"\n\nimport { gooey } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function GooeyToastPromise() {\n  const handlePromise = () => {\n    const promise = new Promise<{ name: string }>((resolve) => {\n      setTimeout(() => resolve({ name: \"User\" }), 2000)\n    })\n\n    gooey.promise(promise, {\n      loading: { title: \"Loading...\" },\n      success: (data) => ({\n        title: \"Success!\",\n        description: `Welcome back, ${data.name}!`,\n      }),\n      error: {\n        title: \"Error\",\n        description: \"Failed to load data.\",\n      },\n    })\n  }\n\n  return (\n    <Button variant=\"outline\" onClick={handlePromise}>\n      Load Data\n    </Button>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { gooey } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function GooeyToastPromise() {\n  const handlePromise = () => {\n    const promise = new Promise<{ name: string }>((resolve) => {\n      setTimeout(() => resolve({ name: \"Updated User\" }), 2000)\n    })\n\n    gooey.promise(promise, {\n      loading: { title: \"Updated Loading...\" },\n      success: (data) => ({\n        title: \"Updated Success!\",\n        description: `Welcome back, ${data.name}!`,\n      }),\n      error: {\n        title: \"Updated Error\",\n        description: \"Updated Failed to load data.\",\n      },\n    })\n  }\n\n  return (\n    <Button variant=\"outline\" onClick={handlePromise}>\n      Updated Load Data\n    </Button>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/gooey-toast-states.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/gooey-toast-states.tsx",
-      "content": "\"use client\"\n\nimport { gooey } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function GooeyToastStates() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.success({\n            title: \"Success!\",\n            description: \"Your changes have been saved.\",\n          })\n        }}\n      >\n        Success\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.error({\n            title: \"Error\",\n            description: \"Something went wrong. Please try again.\",\n          })\n        }}\n      >\n        Error\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.warning({\n            title: \"Warning\",\n            description: \"This action cannot be undone.\",\n          })\n        }}\n      >\n        Warning\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.info({\n            title: \"Did you know?\",\n            description: \"You can customize toast animations.\",\n          })\n        }}\n      >\n        Info\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.action({\n            title: \"Action Required\",\n            description: \"Please review your settings.\",\n          })\n        }}\n      >\n        Action\n      </Button>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { gooey } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function GooeyToastStates() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.success({\n            title: \"Updated Success!\",\n            description: \"Updated Your changes have been saved.\",\n          })\n        }}\n      >\n        Updated Success\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.error({\n            title: \"Updated Error\",\n            description: \"Updated Something went wrong. Please try again.\",\n          })\n        }}\n      >\n        Updated Error\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.warning({\n            title: \"Updated Warning\",\n            description: \"Updated This action cannot be undone.\",\n          })\n        }}\n      >\n        Updated Warning\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.info({\n            title: \"Updated Did you know?\",\n            description: \"Updated You can customize toast animations.\",\n          })\n        }}\n      >\n        Updated Info\n      </Button>\n      <Button\n        variant=\"outline\"\n        onClick={() => {\n          gooey.action({\n            title: \"Updated Action Required\",\n            description: \"Updated Please review your settings.\",\n          })\n        }}\n      >\n        Updated Action\n      </Button>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/gooey-toast-with-button.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/gooey-toast-with-button.tsx",
-      "content": "\"use client\"\n\nimport { gooey } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function GooeyToastWithButton() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        const id = gooey.action({\n          title: \"File deleted\",\n          description: \"Your file has been moved to trash.\",\n          button: {\n            title: \"Undo\",\n            onClick: () => {\n              gooey.dismiss(id)\n              gooey.success({\n                title: \"Restored\",\n                description: \"Your file has been restored.\",\n              })\n            },\n          },\n        })\n      }}\n    >\n      Delete File\n    </Button>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { gooey } from \"@loveui/gooey-toast\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function GooeyToastWithButton() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        const id = gooey.action({\n          title: \"Updated File deleted\",\n          description: \"Updated Your file has been moved to trash.\",\n          button: {\n            title: \"Updated Undo\",\n            onClick: () => {\n              gooey.dismiss(id)\n              gooey.success({\n                title: \"Updated Restored\",\n                description: \"Updated Your file has been restored.\",\n              })\n            },\n          },\n        })\n      }}\n    >\n      Updated Delete File\n    </Button>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/group-demo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/group-demo.tsx",
-      "content": "import { EllipsisIcon, FilesIcon, FilmIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Group, GroupItem, GroupSeparator } from \"@/registry/default/ui/group\"\n\nexport default function GroupDemo() {\n  return (\n    <Group>\n      <GroupItem render={<Button variant=\"outline\" />}>\n        <FilesIcon />\n        Files\n      </GroupItem>\n      <GroupSeparator />\n      <GroupItem render={<Button variant=\"outline\" />}>\n        <FilmIcon />\n        Media\n      </GroupItem>\n      <GroupSeparator />\n      <GroupItem\n        render={<Button variant=\"outline\" size=\"icon\" aria-label=\"Menu\" />}\n      >\n        <EllipsisIcon />\n      </GroupItem>\n    </Group>\n  )\n}\n",
+      "content": "import { EllipsisIcon, FilesIcon, FilmIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Group, GroupItem, GroupSeparator } from \"@/registry/default/ui/group\"\n\nexport default function GroupDemo() {\n  return (\n    <Group>\n      <GroupItem render={<Button variant=\"outline\" />}>\n        <FilesIcon />\n        Updated Files\n      </GroupItem>\n      <GroupSeparator />\n      <GroupItem render={<Button variant=\"outline\" />}>\n        <FilmIcon />\n        Updated Media\n      </GroupItem>\n      <GroupSeparator />\n      <GroupItem\n        render={\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Updated Menu\" />\n        }\n      >\n        <EllipsisIcon />\n      </GroupItem>\n    </Group>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/group-with-input.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/group-with-input.tsx",
-      "content": "import { CopyIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Group, GroupItem, GroupSeparator } from \"@/registry/default/ui/group\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nexport default function GroupWithInput() {\n  return (\n    <Group>\n      <GroupItem\n        render={<Input type=\"text\" defaultValue=\"https://loveui.dev\" />}\n      />\n      <GroupSeparator />\n      <GroupItem\n        render={<Button variant=\"outline\" size=\"icon\" aria-label=\"Copy\" />}\n      >\n        <CopyIcon />\n      </GroupItem>\n    </Group>\n  )\n}\n",
+      "content": "import { CopyIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Group, GroupItem, GroupSeparator } from \"@/registry/default/ui/group\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nexport default function GroupWithInput() {\n  return (\n    <Group>\n      <GroupItem\n        render={<Input type=\"text\" defaultValue=\"https://loveui.dev\" />}\n      />\n      <GroupSeparator />\n      <GroupItem\n        render={\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Updated Copy\" />\n        }\n      >\n        <CopyIcon />\n      </GroupItem>\n    </Group>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/hero.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/examples/hero.tsx",
-      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport {\n  SiApple,\n  SiFacebook,\n  SiGithub,\n  SiGoogle,\n  SiInstagram,\n  SiX,\n  SiYoutube,\n} from \"@icons-pack/react-simple-icons\"\n\nimport {\n  Announcement,\n  AnnouncementTag,\n  AnnouncementTitle,\n} from \"../../../../../packages/announcement\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeFade,\n  MarqueeItem,\n} from \"../../../../../packages/marquee\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\nimport {\n  VideoPlayer,\n  VideoPlayerContent,\n  VideoPlayerControlBar,\n  VideoPlayerMuteButton,\n  VideoPlayerPlayButton,\n  VideoPlayerSeekBackwardButton,\n  VideoPlayerSeekForwardButton,\n  VideoPlayerTimeDisplay,\n  VideoPlayerTimeRange,\n  VideoPlayerVolumeRange,\n} from \"../../../../../packages/video-player\"\n\nconst logos = [\n  {\n    name: \"GitHub\",\n    icon: SiGithub,\n    url: \"https://github.com\",\n  },\n  {\n    name: \"Facebook\",\n    icon: SiFacebook,\n    url: \"https://facebook.com\",\n  },\n  {\n    name: \"Google\",\n    icon: SiGoogle,\n    url: \"https://google.com\",\n  },\n  {\n    name: \"X\",\n    icon: SiX,\n    url: \"https://x.com\",\n  },\n  {\n    name: \"Apple\",\n    icon: SiApple,\n    url: \"https://apple.com\",\n  },\n  {\n    name: \"Instagram\",\n    icon: SiInstagram,\n    url: \"https://instagram.com\",\n  },\n  {\n    name: \"YouTube\",\n    icon: SiYoutube,\n    url: \"https://youtube.com\",\n  },\n]\n\nconst Example = () => (\n  <div className=\"flex flex-col gap-16 px-8 py-24 text-center\">\n    <div className=\"flex flex-col items-center justify-center gap-8\">\n      <Link href=\"#\">\n        <Announcement>\n          <AnnouncementTag>Latest</AnnouncementTag>\n          <AnnouncementTitle>Introducing blocks by LoveUI</AnnouncementTitle>\n        </Announcement>\n      </Link>\n      <h1 className=\"mb-0 text-6xl font-medium text-balance md:text-7xl xl:text-[5.25rem]\">\n        The best way to build your website\n      </h1>\n      <p className=\"mt-0 mb-0 text-lg text-balance text-muted-foreground\">\n        LoveUI blocks are a new way to build your website. They are a collection\n        of pre-built components that you can use to build your website.\n      </p>\n      <div className=\"flex items-center gap-2\">\n        <Button render={<Link href=\"#\" />}>Get started</Button>\n        <Button render={<Link href=\"#\" />} variant=\"outline\">\n          Learn more\n        </Button>\n      </div>\n    </div>\n    <section className=\"flex flex-col items-center justify-center gap-8 rounded-xl bg-secondary py-8 pb-18\">\n      <p className=\"mb-0 font-medium text-balance text-muted-foreground\">\n        Trusted by developers from leading companies\n      </p>\n      <div className=\"flex size-full items-center justify-center\">\n        <Marquee>\n          <MarqueeFade className=\"from-secondary\" side=\"left\" />\n          <MarqueeFade className=\"from-secondary\" side=\"right\" />\n          <MarqueeContent pauseOnHover={false}>\n            {logos.map((logo) => (\n              <MarqueeItem className=\"mx-16 size-12\" key={logo.name}>\n                <Link href={logo.url}>\n                  <logo.icon className=\"size-full\" />\n                </Link>\n              </MarqueeItem>\n            ))}\n          </MarqueeContent>\n        </Marquee>\n      </div>\n    </section>\n    <VideoPlayer className=\"overflow-hidden rounded-lg border\">\n      <VideoPlayerContent\n        crossOrigin=\"\"\n        muted\n        preload=\"auto\"\n        slot=\"media\"\n        src=\"https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4\"\n      />\n      <VideoPlayerControlBar>\n        <VideoPlayerPlayButton />\n        <VideoPlayerSeekBackwardButton />\n        <VideoPlayerSeekForwardButton />\n        <VideoPlayerTimeRange />\n        <VideoPlayerTimeDisplay showDuration />\n        <VideoPlayerMuteButton />\n        <VideoPlayerVolumeRange />\n      </VideoPlayerControlBar>\n    </VideoPlayer>\n  </div>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport {\n  SiApple,\n  SiFacebook,\n  SiGithub,\n  SiGoogle,\n  SiInstagram,\n  SiX,\n  SiYoutube,\n} from \"@icons-pack/react-simple-icons\"\n\nimport {\n  Announcement,\n  AnnouncementTag,\n  AnnouncementTitle,\n} from \"../../../../../packages/announcement\"\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeFade,\n  MarqueeItem,\n} from \"../../../../../packages/marquee\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\nimport {\n  VideoPlayer,\n  VideoPlayerContent,\n  VideoPlayerControlBar,\n  VideoPlayerMuteButton,\n  VideoPlayerPlayButton,\n  VideoPlayerSeekBackwardButton,\n  VideoPlayerSeekForwardButton,\n  VideoPlayerTimeDisplay,\n  VideoPlayerTimeRange,\n  VideoPlayerVolumeRange,\n} from \"../../../../../packages/video-player\"\n\nconst logos = [\n  {\n    name: \"Updated GitHub\",\n    icon: SiGithub,\n    url: \"https://github.com\",\n  },\n  {\n    name: \"Updated Facebook\",\n    icon: SiFacebook,\n    url: \"https://facebook.com\",\n  },\n  {\n    name: \"Updated Google\",\n    icon: SiGoogle,\n    url: \"https://google.com\",\n  },\n  {\n    name: \"Updated X\",\n    icon: SiX,\n    url: \"https://x.com\",\n  },\n  {\n    name: \"Updated Apple\",\n    icon: SiApple,\n    url: \"https://apple.com\",\n  },\n  {\n    name: \"Updated Instagram\",\n    icon: SiInstagram,\n    url: \"https://instagram.com\",\n  },\n  {\n    name: \"Updated YouTube\",\n    icon: SiYoutube,\n    url: \"https://youtube.com\",\n  },\n]\n\nconst Example = () => (\n  <div className=\"flex flex-col gap-16 px-8 py-24 text-center\">\n    <div className=\"flex flex-col items-center justify-center gap-8\">\n      <Link href=\"#\">\n        <Announcement>\n          <AnnouncementTag>Updated Latest</AnnouncementTag>\n          <AnnouncementTitle>\n            Updated Introducing blocks by LoveUI\n          </AnnouncementTitle>\n        </Announcement>\n      </Link>\n      <h1 className=\"mb-0 text-6xl font-medium text-balance md:text-7xl xl:text-[5.25rem]\">\n        Updated The best way to build your website\n      </h1>\n      <p className=\"mt-0 mb-0 text-lg text-balance text-muted-foreground\">\n        Updated LoveUI blocks are a new way to build your website. They are a\n        collection of pre-built components that you can use to build your\n        website.\n      </p>\n      <div className=\"flex items-center gap-2\">\n        <Button render={<Link href=\"#\" />}>Updated Get started</Button>\n        <Button render={<Link href=\"#\" />} variant=\"outline\">\n          Updated Learn more\n        </Button>\n      </div>\n    </div>\n    <section className=\"flex flex-col items-center justify-center gap-8 rounded-xl bg-secondary py-8 pb-18\">\n      <p className=\"mb-0 font-medium text-balance text-muted-foreground\">\n        Updated Trusted by developers from leading companies\n      </p>\n      <div className=\"flex size-full items-center justify-center\">\n        <Marquee>\n          <MarqueeFade className=\"from-secondary\" side=\"left\" />\n          <MarqueeFade className=\"from-secondary\" side=\"right\" />\n          <MarqueeContent pauseOnHover={false}>\n            {logos.map((logo) => (\n              <MarqueeItem className=\"mx-16 size-12\" key={logo.name}>\n                <Link href={logo.url}>\n                  <logo.icon className=\"size-full\" />\n                </Link>\n              </MarqueeItem>\n            ))}\n          </MarqueeContent>\n        </Marquee>\n      </div>\n    </section>\n    <VideoPlayer className=\"overflow-hidden rounded-lg border\">\n      <VideoPlayerContent\n        crossOrigin=\"\"\n        muted\n        preload=\"auto\"\n        slot=\"media\"\n        src=\"https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4\"\n      />\n      <VideoPlayerControlBar>\n        <VideoPlayerPlayButton />\n        <VideoPlayerSeekBackwardButton />\n        <VideoPlayerSeekForwardButton />\n        <VideoPlayerTimeRange />\n        <VideoPlayerTimeDisplay showDuration />\n        <VideoPlayerMuteButton />\n        <VideoPlayerVolumeRange />\n      </VideoPlayerControlBar>\n    </VideoPlayer>\n  </div>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/hover-card.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card",
+  "type": "registry:ui",
+  "dependencies": [
+    "radix-ui"
+  ],
+  "files": [
+    {
+      "path": "registry/default/ui/hover-card.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  showArrow = false,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content> & {\n  showArrow?: boolean\n}) {\n  return (\n    <HoverCardPrimitive.Content\n      data-slot=\"hover-card-content\"\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        className\n      )}\n      {...props}\n    >\n      {props.children}\n      {showArrow && (\n        <HoverCardPrimitive.Arrow className=\"-my-px fill-popover drop-shadow-[0_1px_0_var(--border)]\" />\n      )}\n    </HoverCardPrimitive.Content>\n  )\n}\n\nexport { HoverCard, HoverCardContent, HoverCardTrigger }\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/public/r/image-crop-circular.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/image-crop-circular.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport Image from \"next/image\"\nimport { XIcon } from \"lucide-react\"\n\nimport {\n  ImageCrop,\n  ImageCropApply,\n  ImageCropContent,\n  ImageCropReset,\n} from \"../../../../../packages/image-crop\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst STOCK_IMAGES = [\n  {\n    label: \"Portrait\",\n    url: \"https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=1200&q=80\",\n  },\n  {\n    label: \"Designer\",\n    url: \"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?auto=format&fit=crop&w=1200&q=80\",\n  },\n  {\n    label: \"Developer\",\n    url: \"https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=1200&q=80\",\n  },\n]\n\nconst getFileFromUrl = async (url: string, filename: string) => {\n  const response = await fetch(url)\n  if (!response.ok) {\n    throw new Error(\"Failed to fetch image\")\n  }\n\n  const blob = await response.blob()\n  const extension = blob.type.split(\"/\").at(-1) || \"jpg\"\n\n  return new File([blob], `${filename}.${extension}`, {\n    type: blob.type || \"image/jpeg\",\n  })\n}\n\nconst Example = () => {\n  const [selectedFile, setSelectedFile] = useState<File | null>(null)\n  const [croppedImage, setCroppedImage] = useState<string | null>(null)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const [reloadKey, setReloadKey] = useState(0)\n  const [isLoading, setIsLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n    const activeImage = STOCK_IMAGES[activeIndex]\n\n    const load = async () => {\n      setIsLoading(true)\n      setError(null)\n      setSelectedFile(null)\n\n      try {\n        const file = await getFileFromUrl(\n          activeImage.url,\n          activeImage.label.toLowerCase().replace(/\\s+/g, \"-\")\n        )\n\n        if (!cancelled) {\n          setSelectedFile(file)\n          setCroppedImage(null)\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(\n            err instanceof Error ? err.message : \"Unable to load stock image.\"\n          )\n        }\n      } finally {\n        if (!cancelled) {\n          setIsLoading(false)\n        }\n      }\n    }\n\n    void load()\n\n    return () => {\n      cancelled = true\n    }\n  }, [activeIndex, reloadKey])\n\n  const handleReload = () => {\n    setReloadKey((key) => key + 1)\n  }\n\n  const handleReset = () => {\n    setCroppedImage(null)\n  }\n\n  const handleRetry = () => {\n    handleReload()\n  }\n\n  if (croppedImage) {\n    return (\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-wrap gap-2\">\n          {STOCK_IMAGES.map((image, index) => (\n            <Button\n              key={image.label}\n              onClick={() => setActiveIndex(index)}\n              size=\"sm\"\n              variant={index === activeIndex ? \"default\" : \"outline\"}\n            >\n              {image.label}\n            </Button>\n          ))}\n        </div>\n        <Image\n          alt=\"Cropped\"\n          className=\"overflow-hidden rounded-full\"\n          height={180}\n          src={croppedImage}\n          unoptimized\n          width={180}\n        />\n        <div className=\"flex gap-2\">\n          <Button\n            onClick={handleReset}\n            size=\"sm\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Crop again\n          </Button>\n          <Button\n            onClick={() =>\n              setActiveIndex((index) => (index + 1) % STOCK_IMAGES.length)\n            }\n            size=\"sm\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Use another portrait\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-2\">\n        {STOCK_IMAGES.map((image, index) => (\n          <Button\n            key={image.label}\n            disabled={isLoading && index === activeIndex}\n            onClick={() => setActiveIndex(index)}\n            size=\"sm\"\n            variant={index === activeIndex ? \"default\" : \"outline\"}\n          >\n            {image.label}\n          </Button>\n        ))}\n      </div>\n\n      {isLoading && (\n        <div className=\"h-52 w-full max-w-md animate-pulse rounded-full bg-muted\" />\n      )}\n\n      {error && (\n        <div className=\"flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive\">\n          <span>{error}</span>\n          <Button onClick={handleRetry} size=\"sm\" variant=\"ghost\">\n            Retry\n          </Button>\n        </div>\n      )}\n\n      {!selectedFile && !isLoading && !error && (\n        <p className=\"text-sm text-muted-foreground\">\n          Pick a portrait above to load the cropper.\n        </p>\n      )}\n\n      {selectedFile && !croppedImage && !isLoading && (\n        <ImageCrop\n          key={selectedFile?.name ?? \"stock-portrait\"}\n          aspect={1}\n          circularCrop\n          file={selectedFile}\n          maxImageSize={1024 * 1024} // 1MB\n          onChange={console.log}\n          onComplete={console.log}\n          onCrop={setCroppedImage}\n        >\n          <ImageCropContent className=\"max-w-md\" />\n          <div className=\"flex items-center gap-2\">\n            <ImageCropApply />\n            <ImageCropReset />\n            <Button\n              onClick={handleReload}\n              size=\"icon\"\n              type=\"button\"\n              variant=\"ghost\"\n            >\n              <XIcon className=\"size-4\" />\n            </Button>\n          </div>\n        </ImageCrop>\n      )}\n    </div>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport Image from \"next/image\"\nimport { XIcon } from \"lucide-react\"\n\nimport {\n  ImageCrop,\n  ImageCropApply,\n  ImageCropContent,\n  ImageCropReset,\n} from \"../../../../../packages/image-crop\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst STOCK_IMAGES = [\n  {\n    label: \"Updated Portrait\",\n    url: \"https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=1200&q=80\",\n  },\n  {\n    label: \"Updated Designer\",\n    url: \"https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?auto=format&fit=crop&w=1200&q=80\",\n  },\n  {\n    label: \"Updated Developer\",\n    url: \"https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=1200&q=80\",\n  },\n]\n\nconst getFileFromUrl = async (url: string, filename: string) => {\n  const response = await fetch(url)\n  if (!response.ok) {\n    throw new Error(\"Failed to fetch image\")\n  }\n\n  const blob = await response.blob()\n  const extension = blob.type.split(\"/\").at(-1) || \"jpg\"\n\n  return new File([blob], `${filename}.${extension}`, {\n    type: blob.type || \"image/jpeg\",\n  })\n}\n\nconst Example = () => {\n  const [selectedFile, setSelectedFile] = useState<File | null>(null)\n  const [croppedImage, setCroppedImage] = useState<string | null>(null)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const [reloadKey, setReloadKey] = useState(0)\n  const [isLoading, setIsLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n    const activeImage = STOCK_IMAGES[activeIndex]\n\n    const load = async () => {\n      setIsLoading(true)\n      setError(null)\n      setSelectedFile(null)\n\n      try {\n        const file = await getFileFromUrl(\n          activeImage.url,\n          activeImage.label.toLowerCase().replace(/\\s+/g, \"-\")\n        )\n\n        if (!cancelled) {\n          setSelectedFile(file)\n          setCroppedImage(null)\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(\n            err instanceof Error ? err.message : \"Unable to load stock image.\"\n          )\n        }\n      } finally {\n        if (!cancelled) {\n          setIsLoading(false)\n        }\n      }\n    }\n\n    void load()\n\n    return () => {\n      cancelled = true\n    }\n  }, [activeIndex, reloadKey])\n\n  const handleReload = () => {\n    setReloadKey((key) => key + 1)\n  }\n\n  const handleReset = () => {\n    setCroppedImage(null)\n  }\n\n  const handleRetry = () => {\n    handleReload()\n  }\n\n  if (croppedImage) {\n    return (\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-wrap gap-2\">\n          {STOCK_IMAGES.map((image, index) => (\n            <Button\n              key={image.label}\n              onClick={() => setActiveIndex(index)}\n              size=\"sm\"\n              variant={index === activeIndex ? \"default\" : \"outline\"}\n            >\n              {image.label}\n            </Button>\n          ))}\n        </div>\n        <Image\n          alt=\"Updated Cropped\"\n          className=\"overflow-hidden rounded-full\"\n          height={180}\n          src={croppedImage}\n          unoptimized\n          width={180}\n        />\n        <div className=\"flex gap-2\">\n          <Button\n            onClick={handleReset}\n            size=\"sm\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Updated Crop again\n          </Button>\n          <Button\n            onClick={() =>\n              setActiveIndex((index) => (index + 1) % STOCK_IMAGES.length)\n            }\n            size=\"sm\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Updated Use another portrait\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-2\">\n        {STOCK_IMAGES.map((image, index) => (\n          <Button\n            key={image.label}\n            disabled={isLoading && index === activeIndex}\n            onClick={() => setActiveIndex(index)}\n            size=\"sm\"\n            variant={index === activeIndex ? \"default\" : \"outline\"}\n          >\n            {image.label}\n          </Button>\n        ))}\n      </div>\n\n      {isLoading && (\n        <div className=\"h-52 w-full max-w-md animate-pulse rounded-full bg-muted\" />\n      )}\n\n      {error && (\n        <div className=\"flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive\">\n          <span>{error}</span>\n          <Button onClick={handleRetry} size=\"sm\" variant=\"ghost\">\n            Updated Retry\n          </Button>\n        </div>\n      )}\n\n      {!selectedFile && !isLoading && !error && (\n        <p className=\"text-sm text-muted-foreground\">\n          Updated Pick a portrait above to load the cropper.\n        </p>\n      )}\n\n      {selectedFile && !croppedImage && !isLoading && (\n        <ImageCrop\n          key={selectedFile?.name ?? \"stock-portrait\"}\n          aspect={1}\n          circularCrop\n          file={selectedFile}\n          maxImageSize={1024 * 1024} // 1MB\n          onChange={console.log}\n          onComplete={console.log}\n          onCrop={setCroppedImage}\n        >\n          <ImageCropContent className=\"max-w-md\" />\n          <div className=\"flex items-center gap-2\">\n            <ImageCropApply />\n            <ImageCropReset />\n            <Button\n              onClick={handleReload}\n              size=\"icon\"\n              type=\"button\"\n              variant=\"ghost\"\n            >\n              <XIcon className=\"size-4\" />\n            </Button>\n          </div>\n        </ImageCrop>\n      )}\n    </div>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/image-crop-custom.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/image-crop-custom.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  ImageCrop,\n  ImageCropApply,\n  ImageCropContent,\n  ImageCropReset,\n} from \"../../../../../packages/image-crop\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst STOCK_IMAGES = [\n  {\n    label: \"Coffee shop\",\n    url: \"https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1400&q=80\",\n  },\n  {\n    label: \"Workspace\",\n    url: \"https://images.unsplash.com/photo-1474631245212-32dc3c8310c6?auto=format&fit=crop&w=1400&q=80\",\n  },\n  {\n    label: \"Outdoor cafe\",\n    url: \"https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1400&q=80\",\n  },\n]\n\nconst getFileFromUrl = async (url: string, filename: string) => {\n  const response = await fetch(url)\n  if (!response.ok) {\n    throw new Error(\"Failed to fetch image\")\n  }\n\n  const blob = await response.blob()\n  const extension = blob.type.split(\"/\").at(-1) || \"jpg\"\n\n  return new File([blob], `${filename}.${extension}`, {\n    type: blob.type || \"image/jpeg\",\n  })\n}\n\nconst Example = () => {\n  const [selectedFile, setSelectedFile] = useState<File | null>(null)\n  const [croppedImage, setCroppedImage] = useState<string | null>(null)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const [reloadKey, setReloadKey] = useState(0)\n  const [isLoading, setIsLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n    const activeImage = STOCK_IMAGES[activeIndex]\n\n    const load = async () => {\n      setIsLoading(true)\n      setError(null)\n      setSelectedFile(null)\n\n      try {\n        const file = await getFileFromUrl(\n          activeImage.url,\n          activeImage.label.toLowerCase().replace(/\\s+/g, \"-\")\n        )\n\n        if (!cancelled) {\n          setSelectedFile(file)\n          setCroppedImage(null)\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(\n            err instanceof Error ? err.message : \"Unable to load stock image.\"\n          )\n        }\n      } finally {\n        if (!cancelled) {\n          setIsLoading(false)\n        }\n      }\n    }\n\n    void load()\n\n    return () => {\n      cancelled = true\n    }\n  }, [activeIndex, reloadKey])\n\n  const handleReload = () => {\n    setReloadKey((key) => key + 1)\n  }\n\n  const handleReset = () => {\n    setCroppedImage(null)\n  }\n\n  const handleRetry = () => {\n    handleReload()\n  }\n\n  if (croppedImage) {\n    return (\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-wrap gap-2\">\n          {STOCK_IMAGES.map((image, index) => (\n            <Button\n              key={image.label}\n              onClick={() => setActiveIndex(index)}\n              size=\"sm\"\n              variant={index === activeIndex ? \"default\" : \"outline\"}\n            >\n              {image.label}\n            </Button>\n          ))}\n        </div>\n        <Image\n          alt=\"Cropped\"\n          className=\"rounded-lg border\"\n          height={200}\n          src={croppedImage}\n          unoptimized\n          width={200}\n        />\n        <Button onClick={handleReset} size=\"sm\" type=\"button\" variant=\"outline\">\n          Start Over\n        </Button>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-2\">\n        {STOCK_IMAGES.map((image, index) => (\n          <Button\n            key={image.label}\n            disabled={isLoading && index === activeIndex}\n            onClick={() => setActiveIndex(index)}\n            size=\"sm\"\n            variant={index === activeIndex ? \"default\" : \"outline\"}\n          >\n            {image.label}\n          </Button>\n        ))}\n      </div>\n\n      {isLoading && (\n        <div className=\"h-52 w-full max-w-md animate-pulse rounded-lg bg-muted\" />\n      )}\n\n      {error && (\n        <div className=\"flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive\">\n          <span>{error}</span>\n          <Button onClick={handleRetry} size=\"sm\" variant=\"ghost\">\n            Retry\n          </Button>\n        </div>\n      )}\n\n      {!selectedFile && !isLoading && !error && (\n        <p className=\"text-sm text-muted-foreground\">\n          Choose a preset photo above to explore custom actions.\n        </p>\n      )}\n\n      {selectedFile && !croppedImage && !isLoading && (\n        <ImageCrop\n          key={selectedFile?.name ?? \"stock-custom\"}\n          aspect={1}\n          file={selectedFile}\n          maxImageSize={1024 * 1024} // 1MB\n          onChange={console.log}\n          onComplete={console.log}\n          onCrop={setCroppedImage}\n        >\n          <ImageCropContent className=\"max-w-md\" />\n          <div className=\"flex items-center gap-2\">\n            <ImageCropApply asChild>\n              <Button size=\"sm\" variant=\"outline\">\n                Apply Crop\n              </Button>\n            </ImageCropApply>\n            <ImageCropReset asChild>\n              <Button size=\"sm\" variant=\"outline\">\n                Reset\n              </Button>\n            </ImageCropReset>\n            <Button\n              onClick={handleReload}\n              size=\"sm\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              Load another photo\n            </Button>\n          </div>\n        </ImageCrop>\n      )}\n    </div>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  ImageCrop,\n  ImageCropApply,\n  ImageCropContent,\n  ImageCropReset,\n} from \"../../../../../packages/image-crop\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst STOCK_IMAGES = [\n  {\n    label: \"Updated Coffee shop\",\n    url: \"https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1400&q=80\",\n  },\n  {\n    label: \"Updated Workspace\",\n    url: \"https://images.unsplash.com/photo-1474631245212-32dc3c8310c6?auto=format&fit=crop&w=1400&q=80\",\n  },\n  {\n    label: \"Updated Outdoor cafe\",\n    url: \"https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1400&q=80\",\n  },\n]\n\nconst getFileFromUrl = async (url: string, filename: string) => {\n  const response = await fetch(url)\n  if (!response.ok) {\n    throw new Error(\"Failed to fetch image\")\n  }\n\n  const blob = await response.blob()\n  const extension = blob.type.split(\"/\").at(-1) || \"jpg\"\n\n  return new File([blob], `${filename}.${extension}`, {\n    type: blob.type || \"image/jpeg\",\n  })\n}\n\nconst Example = () => {\n  const [selectedFile, setSelectedFile] = useState<File | null>(null)\n  const [croppedImage, setCroppedImage] = useState<string | null>(null)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const [reloadKey, setReloadKey] = useState(0)\n  const [isLoading, setIsLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n    const activeImage = STOCK_IMAGES[activeIndex]\n\n    const load = async () => {\n      setIsLoading(true)\n      setError(null)\n      setSelectedFile(null)\n\n      try {\n        const file = await getFileFromUrl(\n          activeImage.url,\n          activeImage.label.toLowerCase().replace(/\\s+/g, \"-\")\n        )\n\n        if (!cancelled) {\n          setSelectedFile(file)\n          setCroppedImage(null)\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(\n            err instanceof Error ? err.message : \"Unable to load stock image.\"\n          )\n        }\n      } finally {\n        if (!cancelled) {\n          setIsLoading(false)\n        }\n      }\n    }\n\n    void load()\n\n    return () => {\n      cancelled = true\n    }\n  }, [activeIndex, reloadKey])\n\n  const handleReload = () => {\n    setReloadKey((key) => key + 1)\n  }\n\n  const handleReset = () => {\n    setCroppedImage(null)\n  }\n\n  const handleRetry = () => {\n    handleReload()\n  }\n\n  if (croppedImage) {\n    return (\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-wrap gap-2\">\n          {STOCK_IMAGES.map((image, index) => (\n            <Button\n              key={image.label}\n              onClick={() => setActiveIndex(index)}\n              size=\"sm\"\n              variant={index === activeIndex ? \"default\" : \"outline\"}\n            >\n              {image.label}\n            </Button>\n          ))}\n        </div>\n        <Image\n          alt=\"Updated Cropped\"\n          className=\"rounded-lg border\"\n          height={200}\n          src={croppedImage}\n          unoptimized\n          width={200}\n        />\n        <Button onClick={handleReset} size=\"sm\" type=\"button\" variant=\"outline\">\n          Updated Start Over\n        </Button>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-2\">\n        {STOCK_IMAGES.map((image, index) => (\n          <Button\n            key={image.label}\n            disabled={isLoading && index === activeIndex}\n            onClick={() => setActiveIndex(index)}\n            size=\"sm\"\n            variant={index === activeIndex ? \"default\" : \"outline\"}\n          >\n            {image.label}\n          </Button>\n        ))}\n      </div>\n\n      {isLoading && (\n        <div className=\"h-52 w-full max-w-md animate-pulse rounded-lg bg-muted\" />\n      )}\n\n      {error && (\n        <div className=\"flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive\">\n          <span>{error}</span>\n          <Button onClick={handleRetry} size=\"sm\" variant=\"ghost\">\n            Updated Retry\n          </Button>\n        </div>\n      )}\n\n      {!selectedFile && !isLoading && !error && (\n        <p className=\"text-sm text-muted-foreground\">\n          Updated Choose a preset photo above to explore custom actions.\n        </p>\n      )}\n\n      {selectedFile && !croppedImage && !isLoading && (\n        <ImageCrop\n          key={selectedFile?.name ?? \"stock-custom\"}\n          aspect={1}\n          file={selectedFile}\n          maxImageSize={1024 * 1024} // 1MB\n          onChange={console.log}\n          onComplete={console.log}\n          onCrop={setCroppedImage}\n        >\n          <ImageCropContent className=\"max-w-md\" />\n          <div className=\"flex items-center gap-2\">\n            <ImageCropApply asChild>\n              <Button size=\"sm\" variant=\"outline\">\n                Updated Apply Crop\n              </Button>\n            </ImageCropApply>\n            <ImageCropReset asChild>\n              <Button size=\"sm\" variant=\"outline\">\n                Updated Reset\n              </Button>\n            </ImageCropReset>\n            <Button\n              onClick={handleReload}\n              size=\"sm\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              Updated Load another photo\n            </Button>\n          </div>\n        </ImageCrop>\n      )}\n    </div>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/image-crop.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/image-crop.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport Image from \"next/image\"\nimport { XIcon } from \"lucide-react\"\n\nimport {\n  ImageCrop,\n  ImageCropApply,\n  ImageCropContent,\n  ImageCropReset,\n} from \"../../../../../packages/image-crop\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst STOCK_IMAGES = [\n  {\n    label: \"Mountain sunrise\",\n    url: \"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80\",\n  },\n  {\n    label: \"City skyline\",\n    url: \"https://images.unsplash.com/photo-1467269204594-9661b134dd2b?auto=format&fit=crop&w=1600&q=80\",\n  },\n  {\n    label: \"Foggy forest\",\n    url: \"https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1600&q=80\",\n  },\n]\n\nconst getFileFromUrl = async (url: string, filename: string) => {\n  const response = await fetch(url)\n  if (!response.ok) {\n    throw new Error(\"Failed to fetch image\")\n  }\n\n  const blob = await response.blob()\n  const extension = blob.type.split(\"/\").at(-1) || \"jpg\"\n\n  return new File([blob], `${filename}.${extension}`, {\n    type: blob.type || \"image/jpeg\",\n  })\n}\n\nconst Example = () => {\n  const [selectedFile, setSelectedFile] = useState<File | null>(null)\n  const [croppedImage, setCroppedImage] = useState<string | null>(null)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const [reloadKey, setReloadKey] = useState(0)\n  const [isLoading, setIsLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n    const activeImage = STOCK_IMAGES[activeIndex]\n\n    const load = async () => {\n      setIsLoading(true)\n      setError(null)\n      setSelectedFile(null)\n\n      try {\n        const file = await getFileFromUrl(\n          activeImage.url,\n          activeImage.label.toLowerCase().replace(/\\s+/g, \"-\")\n        )\n\n        if (!cancelled) {\n          setSelectedFile(file)\n          setCroppedImage(null)\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(\n            err instanceof Error ? err.message : \"Unable to load stock image.\"\n          )\n        }\n      } finally {\n        if (!cancelled) {\n          setIsLoading(false)\n        }\n      }\n    }\n\n    void load()\n\n    return () => {\n      cancelled = true\n    }\n  }, [activeIndex, reloadKey])\n\n  const handleReload = () => {\n    setReloadKey((key) => key + 1)\n  }\n\n  const handleReset = () => {\n    setCroppedImage(null)\n  }\n\n  const handleRetry = () => {\n    handleReload()\n  }\n\n  if (croppedImage) {\n    return (\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-wrap gap-2\">\n          {STOCK_IMAGES.map((image, index) => (\n            <Button\n              key={image.label}\n              onClick={() => setActiveIndex(index)}\n              size=\"sm\"\n              variant={index === activeIndex ? \"default\" : \"outline\"}\n            >\n              {image.label}\n            </Button>\n          ))}\n        </div>\n        <Image\n          alt=\"Cropped\"\n          height={180}\n          src={croppedImage}\n          unoptimized\n          width={180}\n        />\n        <div className=\"flex items-center gap-2\">\n          <Button\n            onClick={handleReset}\n            size=\"sm\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Crop again\n          </Button>\n          <Button\n            onClick={() =>\n              setActiveIndex((index) => (index + 1) % STOCK_IMAGES.length)\n            }\n            size=\"sm\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Use another photo\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-2\">\n        {STOCK_IMAGES.map((image, index) => (\n          <Button\n            key={image.label}\n            disabled={isLoading && index === activeIndex}\n            onClick={() => setActiveIndex(index)}\n            size=\"sm\"\n            variant={index === activeIndex ? \"default\" : \"outline\"}\n          >\n            {image.label}\n          </Button>\n        ))}\n      </div>\n\n      {isLoading && (\n        <div className=\"h-52 w-full max-w-md animate-pulse rounded-lg bg-muted\" />\n      )}\n\n      {error && (\n        <div className=\"flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive\">\n          <span>{error}</span>\n          <Button onClick={handleRetry} size=\"sm\" variant=\"ghost\">\n            Retry\n          </Button>\n        </div>\n      )}\n\n      {!selectedFile && !isLoading && !error && (\n        <p className=\"text-sm text-muted-foreground\">\n          Select an image above to start cropping.\n        </p>\n      )}\n\n      {selectedFile && !croppedImage && !isLoading && (\n        <ImageCrop\n          key={selectedFile?.name ?? \"stock-image\"}\n          aspect={1}\n          file={selectedFile}\n          maxImageSize={1024 * 1024} // 1MB\n          onChange={console.log}\n          onComplete={console.log}\n          onCrop={setCroppedImage}\n        >\n          <ImageCropContent className=\"max-w-md\" />\n          <div className=\"flex items-center gap-2\">\n            <ImageCropApply />\n            <ImageCropReset />\n            <Button\n              onClick={handleReload}\n              size=\"icon\"\n              type=\"button\"\n              variant=\"ghost\"\n            >\n              <XIcon className=\"size-4\" />\n            </Button>\n          </div>\n        </ImageCrop>\n      )}\n    </div>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport Image from \"next/image\"\nimport { XIcon } from \"lucide-react\"\n\nimport {\n  ImageCrop,\n  ImageCropApply,\n  ImageCropContent,\n  ImageCropReset,\n} from \"../../../../../packages/image-crop\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\n\nconst STOCK_IMAGES = [\n  {\n    label: \"Updated Mountain sunrise\",\n    url: \"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80\",\n  },\n  {\n    label: \"Updated City skyline\",\n    url: \"https://images.unsplash.com/photo-1467269204594-9661b134dd2b?auto=format&fit=crop&w=1600&q=80\",\n  },\n  {\n    label: \"Updated Foggy forest\",\n    url: \"https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1600&q=80\",\n  },\n]\n\nconst getFileFromUrl = async (url: string, filename: string) => {\n  const response = await fetch(url)\n  if (!response.ok) {\n    throw new Error(\"Failed to fetch image\")\n  }\n\n  const blob = await response.blob()\n  const extension = blob.type.split(\"/\").at(-1) || \"jpg\"\n\n  return new File([blob], `${filename}.${extension}`, {\n    type: blob.type || \"image/jpeg\",\n  })\n}\n\nconst Example = () => {\n  const [selectedFile, setSelectedFile] = useState<File | null>(null)\n  const [croppedImage, setCroppedImage] = useState<string | null>(null)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const [reloadKey, setReloadKey] = useState(0)\n  const [isLoading, setIsLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n    const activeImage = STOCK_IMAGES[activeIndex]\n\n    const load = async () => {\n      setIsLoading(true)\n      setError(null)\n      setSelectedFile(null)\n\n      try {\n        const file = await getFileFromUrl(\n          activeImage.url,\n          activeImage.label.toLowerCase().replace(/\\s+/g, \"-\")\n        )\n\n        if (!cancelled) {\n          setSelectedFile(file)\n          setCroppedImage(null)\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(\n            err instanceof Error ? err.message : \"Unable to load stock image.\"\n          )\n        }\n      } finally {\n        if (!cancelled) {\n          setIsLoading(false)\n        }\n      }\n    }\n\n    void load()\n\n    return () => {\n      cancelled = true\n    }\n  }, [activeIndex, reloadKey])\n\n  const handleReload = () => {\n    setReloadKey((key) => key + 1)\n  }\n\n  const handleReset = () => {\n    setCroppedImage(null)\n  }\n\n  const handleRetry = () => {\n    handleReload()\n  }\n\n  if (croppedImage) {\n    return (\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-wrap gap-2\">\n          {STOCK_IMAGES.map((image, index) => (\n            <Button\n              key={image.label}\n              onClick={() => setActiveIndex(index)}\n              size=\"sm\"\n              variant={index === activeIndex ? \"default\" : \"outline\"}\n            >\n              {image.label}\n            </Button>\n          ))}\n        </div>\n        <Image\n          alt=\"Updated Cropped\"\n          height={180}\n          src={croppedImage}\n          unoptimized\n          width={180}\n        />\n        <div className=\"flex items-center gap-2\">\n          <Button\n            onClick={handleReset}\n            size=\"sm\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Updated Crop again\n          </Button>\n          <Button\n            onClick={() =>\n              setActiveIndex((index) => (index + 1) % STOCK_IMAGES.length)\n            }\n            size=\"sm\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Updated Use another photo\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap gap-2\">\n        {STOCK_IMAGES.map((image, index) => (\n          <Button\n            key={image.label}\n            disabled={isLoading && index === activeIndex}\n            onClick={() => setActiveIndex(index)}\n            size=\"sm\"\n            variant={index === activeIndex ? \"default\" : \"outline\"}\n          >\n            {image.label}\n          </Button>\n        ))}\n      </div>\n\n      {isLoading && (\n        <div className=\"h-52 w-full max-w-md animate-pulse rounded-lg bg-muted\" />\n      )}\n\n      {error && (\n        <div className=\"flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive\">\n          <span>{error}</span>\n          <Button onClick={handleRetry} size=\"sm\" variant=\"ghost\">\n            Updated Retry\n          </Button>\n        </div>\n      )}\n\n      {!selectedFile && !isLoading && !error && (\n        <p className=\"text-sm text-muted-foreground\">\n          Updated Select an image above to start cropping.\n        </p>\n      )}\n\n      {selectedFile && !croppedImage && !isLoading && (\n        <ImageCrop\n          key={selectedFile?.name ?? \"stock-image\"}\n          aspect={1}\n          file={selectedFile}\n          maxImageSize={1024 * 1024} // 1MB\n          onChange={console.log}\n          onComplete={console.log}\n          onCrop={setCroppedImage}\n        >\n          <ImageCropContent className=\"max-w-md\" />\n          <div className=\"flex items-center gap-2\">\n            <ImageCropApply />\n            <ImageCropReset />\n            <Button\n              onClick={handleReload}\n              size=\"icon\"\n              type=\"button\"\n              variant=\"ghost\"\n            >\n              <XIcon className=\"size-4\" />\n            </Button>\n          </div>\n        </ImageCrop>\n      )}\n    </div>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/image-zoom-background.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/image-zoom-background.tsx",
-      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { ImageZoom } from \"../../../../../packages/image-zoom\"\n\nconst Example = () => (\n  <ImageZoom\n    backdropClassName={cn(\n      '[&_[data-rmiz-modal-overlay=\"visible\"]]:bg-black/80'\n    )}\n  >\n    <Image\n      alt=\"Placeholder image\"\n      className=\"h-auto w-96\"\n      height={800}\n      src=\"https://placehold.co/1200x800\"\n      unoptimized\n      width={1200}\n    />\n  </ImageZoom>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { ImageZoom } from \"../../../../../packages/image-zoom\"\n\nconst Example = () => (\n  <ImageZoom\n    backdropClassName={cn(\n      '[&_[data-rmiz-modal-overlay=\"visible\"]]:bg-black/80'\n    )}\n  >\n    <Image\n      alt=\"Updated Placeholder image\"\n      className=\"h-auto w-96\"\n      height={800}\n      src=\"https://placehold.co/1200x800\"\n      unoptimized\n      width={1200}\n    />\n  </ImageZoom>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/image-zoom-margin.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/image-zoom-margin.tsx",
-      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport { ImageZoom } from \"../../../../../packages/image-zoom\"\n\nconst Example = () => (\n  <ImageZoom zoomMargin={100}>\n    <Image\n      alt=\"Placeholder image\"\n      className=\"h-auto w-96\"\n      height={800}\n      src=\"https://placehold.co/1200x800\"\n      unoptimized\n      width={1200}\n    />\n  </ImageZoom>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport { ImageZoom } from \"../../../../../packages/image-zoom\"\n\nconst Example = () => (\n  <ImageZoom zoomMargin={100}>\n    <Image\n      alt=\"Updated Placeholder image\"\n      className=\"h-auto w-96\"\n      height={800}\n      src=\"https://placehold.co/1200x800\"\n      unoptimized\n      width={1200}\n    />\n  </ImageZoom>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/image-zoom.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/image-zoom.tsx",
-      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport { ImageZoom } from \"../../../../../packages/image-zoom\"\n\nconst Example = () => (\n  <ImageZoom>\n    <Image\n      alt=\"Placeholder image\"\n      className=\"h-auto w-96\"\n      height={800}\n      src=\"https://placehold.co/1200x800\"\n      unoptimized\n      width={1200}\n    />\n  </ImageZoom>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport { ImageZoom } from \"../../../../../packages/image-zoom\"\n\nconst Example = () => (\n  <ImageZoom>\n    <Image\n      alt=\"Updated Placeholder image\"\n      className=\"h-auto w-96\"\n      height={800}\n      src=\"https://placehold.co/1200x800\"\n      unoptimized\n      width={1200}\n    />\n  </ImageZoom>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/input-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/input-demo.tsx",
-      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputDemo() {\n  return <Input placeholder=\"Enter text\" aria-label=\"Enter text\" />\n}\n",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputDemo() {\n  return (\n    <Input placeholder=\"Updated Enter text\" aria-label=\"Updated Enter text\" />\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/input-disabled.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/input-disabled.tsx",
-      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputDisabled() {\n  return <Input placeholder=\"Disabled\" disabled aria-label=\"Disabled\" />\n}\n",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputDisabled() {\n  return (\n    <Input\n      placeholder=\"Updated Disabled\"\n      disabled\n      aria-label=\"Updated Disabled\"\n    />\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/input-file.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/input-file.tsx",
-      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputFile() {\n  return <Input type=\"file\" aria-label=\"File\" />\n}\n",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputFile() {\n  return <Input type=\"file\" aria-label=\"Updated File\" />\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/input-group.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-group",
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "registryDependencies": [
+    "@loveui/button",
+    "@loveui/input",
+    "@loveui/textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/default/ui/input-group.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Textarea } from \"./textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30\",\n        \"h-9 min-w-0 has-[>textarea]:h-auto\",\n\n        // Variants based on alignment.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n        // Focus state.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50\",\n\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\":\n          \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/input-lg.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/input-lg.tsx",
-      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputLg() {\n  return <Input size=\"lg\" placeholder=\"Enter text\" aria-label=\"Enter text\" />\n}\n",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputLg() {\n  return (\n    <Input\n      size=\"lg\"\n      placeholder=\"Updated Enter text\"\n      aria-label=\"Updated Enter text\"\n    />\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/input-sm.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/input-sm.tsx",
-      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputSm() {\n  return <Input size=\"sm\" placeholder=\"Enter text\" aria-label=\"Enter text\" />\n}\n",
+      "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputSm() {\n  return (\n    <Input\n      size=\"sm\"\n      placeholder=\"Updated Enter text\"\n      aria-label=\"Updated Enter text\"\n    />\n  )\n}\n",
       "type": "registry:example"
     }
   ],

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

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/input-with-button.tsx",
-      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputWithButton() {\n  return (\n    <div className=\"flex gap-2\">\n      <Input type=\"email\" placeholder=\"you@example.com\" aria-label=\"Email\" />\n      <Button variant=\"outline\">Send</Button>\n    </div>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\n\nexport default function InputWithButton() {\n  return (\n    <div className=\"flex gap-2\">\n      <Input\n        type=\"email\"\n        placeholder=\"you@example.com\"\n        aria-label=\"Updated Email\"\n      />\n      <Button variant=\"outline\">Updated Send</Button>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/input-with-label.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/input-with-label.tsx",
-      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function InputWithLabel() {\n  const id = useId()\n  return (\n    <div className=\"flex flex-col items-start gap-2\">\n      <Label htmlFor={id}>Email</Label>\n      <Input\n        id={id}\n        type=\"email\"\n        placeholder=\"you@example.com\"\n        aria-label=\"Email\"\n      />\n    </div>\n  )\n}\n",
+      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function InputWithLabel() {\n  const id = useId()\n  return (\n    <div className=\"flex flex-col items-start gap-2\">\n      <Label htmlFor={id}>Updated Email</Label>\n      <Input\n        id={id}\n        type=\"email\"\n        placeholder=\"you@example.com\"\n        aria-label=\"Updated Email\"\n      />\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],