love-ui 1.2.12 → 1.2.14

package/public/r/comp-90.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-90",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-90.tsx",
+      "content": "import { LoaderCircleIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button disabled>\n      <LoaderCircleIcon\n        className=\"-ms-1 animate-spin\"\n        size={16}\n        aria-hidden=\"true\"\n      />\n      Button\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "loading"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-91.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-91",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-91.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { LoaderCircleIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [isLoading, setIsLoading] = useState<boolean>(false)\n\n  const handleClick = () => {\n    setIsLoading(true)\n    // Simulate an async operation\n    setTimeout(() => {\n      setIsLoading(false)\n    }, 1000) // Reset after 1 second\n  }\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={isLoading}\n      data-loading={isLoading || undefined}\n      className=\"group relative disabled:opacity-100\"\n    >\n      <span className=\"group-data-loading:text-transparent\">Click me</span>\n      {isLoading && (\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          <LoaderCircleIcon\n            className=\"animate-spin\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n        </div>\n      )}\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "loading"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-92.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-92",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-92.tsx",
+      "content": "import { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button variant=\"outline\" className=\"gap-3\">\n      Messages\n      <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground\">\n        18\n      </span>\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "counter"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-93.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-93",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-93.tsx",
+      "content": "import { PrinterIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button variant=\"outline\">\n      <PrinterIcon className=\"-ms-1 opacity-60\" size={16} aria-hidden=\"true\" />\n      Print\n      <kbd className=\"ms-1 -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70\">\n        ⌘P\n      </kbd>\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "kbd"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-94.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-94",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-94.tsx",
+      "content": "import { Button } from \"@/registry/building-blocks/default/ui/button\"\nexport default function Component() {\n  return (\n    <Button className=\"gap-0 rounded-full py-0 ps-0\">\n      <div className=\"me-0.5 flex aspect-square h-full p-1.5\">\n        <img\n          className=\"h-auto w-full rounded-full\"\n          src={\"https://i.pravatar.cc/160?img=21\"}\n          alt=\"Profile image\"\n          width={24}\n          height={24}\n          aria-hidden=\"true\"\n        />\n      </div>\n      @georgelucas\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "user",
+      "avatar",
+      "profile"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-95.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-95",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/avatar.json",
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-95.tsx",
+      "content": "import { ChevronDownIcon } from \"lucide-react\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/building-blocks/default/ui/avatar\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button variant=\"ghost\" className=\"h-auto p-0 hover:bg-transparent\">\n      <Avatar>\n        <AvatarImage src={\"https://i.pravatar.cc/160?img=21\"} alt=\"Profile image\" />\n        <AvatarFallback>CL</AvatarFallback>\n      </Avatar>\n      <ChevronDownIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "user",
+      "avatar",
+      "profile",
+      "dropdown"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-96.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-96",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-96.tsx",
+      "content": "import { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button variant=\"outline\" className=\"aspect-square max-sm:p-0\">\n      <PlusIcon className=\"opacity-60 sm:-ms-1\" size={16} aria-hidden=\"true\" />\n      <span className=\"max-sm:sr-only\">Add new</span>\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-97.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-97",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-97.tsx",
+      "content": "import { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button\n      className=\"rounded-full\"\n      variant=\"outline\"\n      size=\"icon\"\n      aria-label=\"Add new item\"\n    >\n      <PlusIcon size={16} aria-hidden=\"true\" />\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-98.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-98",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-98.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [open, setOpen] = useState<boolean>(false)\n\n  return (\n    <Button\n      className=\"group rounded-full\"\n      variant=\"outline\"\n      size=\"icon\"\n      onClick={() => setOpen((prevState) => !prevState)}\n      aria-expanded={open}\n      aria-label={open ? \"Close menu\" : \"Open menu\"}\n    >\n      <PlusIcon\n        className=\"transition-transform duration-500 ease-[cubic-bezier(0.68,-0.6,0.32,1.6)] group-aria-expanded:rotate-[135deg]\"\n        size={16}\n        aria-hidden=\"true\"\n      />\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "menu"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-99.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-99",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/tooltip.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-99.tsx",
+      "content": "\"use client\"\n\nimport { PlusIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/building-blocks/default/ui/tooltip\"\n\nexport default function Component() {\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Add new item\">\n            <PlusIcon size={16} aria-hidden=\"true\" />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"px-2 py-1 text-xs\">Tooltip</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "tooltip"
+    ],
+    "style": 2
+  }
+}

package/public/r/comparison-event-handlers.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/comparison-event-handlers.tsx",
-      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport {\n  Comparison,\n  ComparisonHandle,\n  ComparisonItem,\n} from \"../../../../../packages/comparison\"\n\nconst Example = () => (\n  <Comparison\n    className=\"aspect-video\"\n    onDragEnd={() => console.log(\"drag end\")}\n    onDragStart={() => console.log(\"drag start\")}\n  >\n    <ComparisonItem className=\"bg-red-500\" position=\"left\">\n      <Image\n        alt=\"Placeholder 1\"\n        className=\"opacity-50\"\n        height={1080}\n        src=\"https://placehold.co/1920x1080?random=1\"\n        unoptimized\n        width={1920}\n      />\n    </ComparisonItem>\n    <ComparisonItem className=\"bg-blue-500\" position=\"right\">\n      <Image\n        alt=\"Placeholder 2\"\n        className=\"opacity-50\"\n        height={1440}\n        src=\"https://placehold.co/2560x1440?random=2\"\n        unoptimized\n        width={2560}\n      />\n    </ComparisonItem>\n    <ComparisonHandle />\n  </Comparison>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport {\n  Comparison,\n  ComparisonHandle,\n  ComparisonItem,\n} from \"../../../../../packages/comparison\"\n\nconst Example = () => (\n  <Comparison\n    className=\"aspect-video\"\n    onDragEnd={() => console.log(\"drag end\")}\n    onDragStart={() => console.log(\"drag start\")}\n  >\n    <ComparisonItem className=\"bg-red-500\" position=\"left\">\n      <Image\n        alt=\"Updated Placeholder 1\"\n        className=\"opacity-50\"\n        height={1080}\n        src=\"https://placehold.co/1920x1080?random=1\"\n        unoptimized\n        width={1920}\n      />\n    </ComparisonItem>\n    <ComparisonItem className=\"bg-blue-500\" position=\"right\">\n      <Image\n        alt=\"Updated Placeholder 2\"\n        className=\"opacity-50\"\n        height={1440}\n        src=\"https://placehold.co/2560x1440?random=2\"\n        unoptimized\n        width={2560}\n      />\n    </ComparisonItem>\n    <ComparisonHandle />\n  </Comparison>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/comparison-hover.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/comparison-hover.tsx",
-      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport {\n  Comparison,\n  ComparisonHandle,\n  ComparisonItem,\n} from \"../../../../../packages/comparison\"\n\nconst Example = () => (\n  <Comparison className=\"aspect-video\" mode=\"hover\">\n    <ComparisonItem className=\"bg-red-500\" position=\"left\">\n      <Image\n        alt=\"Placeholder 1\"\n        className=\"opacity-50\"\n        height={1080}\n        src=\"https://placehold.co/1920x1080?random=1\"\n        unoptimized\n        width={1920}\n      />\n    </ComparisonItem>\n    <ComparisonItem className=\"bg-blue-500\" position=\"right\">\n      <Image\n        alt=\"Placeholder 2\"\n        className=\"opacity-50\"\n        height={1440}\n        src=\"https://placehold.co/2560x1440?random=2\"\n        unoptimized\n        width={2560}\n      />\n    </ComparisonItem>\n    <ComparisonHandle />\n  </Comparison>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport {\n  Comparison,\n  ComparisonHandle,\n  ComparisonItem,\n} from \"../../../../../packages/comparison\"\n\nconst Example = () => (\n  <Comparison className=\"aspect-video\" mode=\"hover\">\n    <ComparisonItem className=\"bg-red-500\" position=\"left\">\n      <Image\n        alt=\"Updated Placeholder 1\"\n        className=\"opacity-50\"\n        height={1080}\n        src=\"https://placehold.co/1920x1080?random=1\"\n        unoptimized\n        width={1920}\n      />\n    </ComparisonItem>\n    <ComparisonItem className=\"bg-blue-500\" position=\"right\">\n      <Image\n        alt=\"Updated Placeholder 2\"\n        className=\"opacity-50\"\n        height={1440}\n        src=\"https://placehold.co/2560x1440?random=2\"\n        unoptimized\n        width={2560}\n      />\n    </ComparisonItem>\n    <ComparisonHandle />\n  </Comparison>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/comparison.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/examples/comparison.tsx",
-      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport {\n  Comparison,\n  ComparisonHandle,\n  ComparisonItem,\n} from \"../../../../../packages/comparison\"\n\nconst Example = () => (\n  <Comparison className=\"aspect-video\">\n    <ComparisonItem className=\"bg-red-500\" position=\"left\">\n      <Image\n        alt=\"Placeholder 1\"\n        className=\"opacity-50\"\n        height={1080}\n        src=\"https://placehold.co/1920x1080?random=1\"\n        unoptimized\n        width={1920}\n      />\n    </ComparisonItem>\n    <ComparisonItem className=\"bg-blue-500\" position=\"right\">\n      <Image\n        alt=\"Placeholder 2\"\n        className=\"opacity-50\"\n        height={1440}\n        src=\"https://placehold.co/2560x1440?random=2\"\n        unoptimized\n        width={2560}\n      />\n    </ComparisonItem>\n    <ComparisonHandle />\n  </Comparison>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport Image from \"next/image\"\n\nimport {\n  Comparison,\n  ComparisonHandle,\n  ComparisonItem,\n} from \"../../../../../packages/comparison\"\n\nconst Example = () => (\n  <Comparison className=\"aspect-video\">\n    <ComparisonItem className=\"bg-red-500\" position=\"left\">\n      <Image\n        alt=\"Updated Placeholder 1\"\n        className=\"opacity-50\"\n        height={1080}\n        src=\"https://placehold.co/1920x1080?random=1\"\n        unoptimized\n        width={1920}\n      />\n    </ComparisonItem>\n    <ComparisonItem className=\"bg-blue-500\" position=\"right\">\n      <Image\n        alt=\"Updated Placeholder 2\"\n        className=\"opacity-50\"\n        height={1440}\n        src=\"https://placehold.co/2560x1440?random=2\"\n        unoptimized\n        width={2560}\n      />\n    </ComparisonItem>\n    <ComparisonHandle />\n  </Comparison>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/context-menu.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-menu",
+  "dependencies": [
+    "lucide-react",
+    "radix-ui"
+  ],
+  "files": [
+    {
+      "path": "registry/default/ui/context-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-sm font-medium text-foreground data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/contribution-graph-custom-footer.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/contribution-graph-custom-footer.tsx",
-      "content": "\"use client\"\n\nimport { eachDayOfInterval, endOfYear, formatISO, startOfYear } from \"date-fns\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\n\nimport {\n  ContributionGraph,\n  ContributionGraphBlock,\n  ContributionGraphCalendar,\n  ContributionGraphFooter,\n  ContributionGraphLegend,\n  ContributionGraphTotalCount,\n} from \"../../../../../packages/contribution-graph\"\n\nconst maxCount = 20\nconst maxLevel = 4\nconst now = new Date()\nconst days = eachDayOfInterval({\n  start: startOfYear(now),\n  end: endOfYear(now),\n})\n\nconst data = days.map((date) => {\n  const c = Math.round(\n    Math.random() * maxCount - Math.random() * (0.8 * maxCount)\n  )\n  const count = Math.max(0, c)\n  const level = Math.ceil((count / maxCount) * maxLevel)\n\n  return {\n    date: formatISO(date, { representation: \"date\" }),\n    count,\n    level,\n  }\n})\n\nconst Example = () => (\n  <ContributionGraph data={data}>\n    <ContributionGraphCalendar>\n      {({ activity, dayIndex, weekIndex }) => (\n        <ContributionGraphBlock\n          activity={activity}\n          dayIndex={dayIndex}\n          weekIndex={weekIndex}\n        />\n      )}\n    </ContributionGraphCalendar>\n    <ContributionGraphFooter>\n      <ContributionGraphTotalCount>\n        {({ totalCount, year }) => (\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-sm text-muted-foreground\">Year {year}:</span>\n            <Badge variant=\"secondary\">\n              {totalCount.toLocaleString()} contributions\n            </Badge>\n          </div>\n        )}\n      </ContributionGraphTotalCount>\n      <ContributionGraphLegend>\n        {({ level }) => (\n          <div\n            className=\"group relative flex h-3 w-3 items-center justify-center\"\n            data-level={level}\n          >\n            <div\n              className={`h-full w-full rounded-sm border border-border ${level === 0 ? \"bg-muted\" : \"\"} ${level === 1 ? \"bg-emerald-200 dark:bg-emerald-900\" : \"\"} ${level === 2 ? \"bg-emerald-400 dark:bg-emerald-700\" : \"\"} ${level === 3 ? \"bg-emerald-600 dark:bg-emerald-500\" : \"\"} ${level === 4 ? \"bg-emerald-800 dark:bg-emerald-300\" : \"\"} `}\n            />\n            <span className=\"absolute -top-8 hidden rounded bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md group-hover:block\">\n              Level {level}\n            </span>\n          </div>\n        )}\n      </ContributionGraphLegend>\n    </ContributionGraphFooter>\n  </ContributionGraph>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { eachDayOfInterval, endOfYear, formatISO, startOfYear } from \"date-fns\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\n\nimport {\n  ContributionGraph,\n  ContributionGraphBlock,\n  ContributionGraphCalendar,\n  ContributionGraphFooter,\n  ContributionGraphLegend,\n  ContributionGraphTotalCount,\n} from \"../../../../../packages/contribution-graph\"\n\nconst maxCount = 20\nconst maxLevel = 4\nconst now = new Date()\nconst days = eachDayOfInterval({\n  start: startOfYear(now),\n  end: endOfYear(now),\n})\n\nconst data = days.map((date) => {\n  const c = Math.round(\n    Math.random() * maxCount - Math.random() * (0.8 * maxCount)\n  )\n  const count = Math.max(0, c)\n  const level = Math.ceil((count / maxCount) * maxLevel)\n\n  return {\n    date: formatISO(date, { representation: \"date\" }),\n    count,\n    level,\n  }\n})\n\nconst Example = () => (\n  <ContributionGraph data={data}>\n    <ContributionGraphCalendar>\n      {({ activity, dayIndex, weekIndex }) => (\n        <ContributionGraphBlock\n          activity={activity}\n          dayIndex={dayIndex}\n          weekIndex={weekIndex}\n        />\n      )}\n    </ContributionGraphCalendar>\n    <ContributionGraphFooter>\n      <ContributionGraphTotalCount>\n        {({ totalCount, year }) => (\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-sm text-muted-foreground\">\n              Updated Year {year}:\n            </span>\n            <Badge variant=\"secondary\">\n              {totalCount.toLocaleString()} contributions\n            </Badge>\n          </div>\n        )}\n      </ContributionGraphTotalCount>\n      <ContributionGraphLegend>\n        {({ level }) => (\n          <div\n            className=\"group relative flex h-3 w-3 items-center justify-center\"\n            data-level={level}\n          >\n            <div\n              className={`h-full w-full rounded-sm border border-border ${level === 0 ? \"bg-muted\" : \"\"} ${level === 1 ? \"bg-emerald-200 dark:bg-emerald-900\" : \"\"} ${level === 2 ? \"bg-emerald-400 dark:bg-emerald-700\" : \"\"} ${level === 3 ? \"bg-emerald-600 dark:bg-emerald-500\" : \"\"} ${level === 4 ? \"bg-emerald-800 dark:bg-emerald-300\" : \"\"} `}\n            />\n            <span className=\"absolute -top-8 hidden rounded bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md group-hover:block\">\n              Updated Level {level}\n            </span>\n          </div>\n        )}\n      </ContributionGraphLegend>\n    </ContributionGraphFooter>\n  </ContributionGraph>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/credit-card-apple.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/credit-card-apple.tsx",
-      "content": "import type { HTMLAttributes } from \"react\"\n\nimport {\n  CreditCard,\n  CreditCardBack,\n  CreditCardChip,\n  CreditCardFlipper,\n  CreditCardFront,\n  CreditCardLogo,\n  CreditCardMagStripe,\n  CreditCardName,\n  CreditCardServiceProvider,\n} from \"../../../../../packages/credit-card\"\n\nconst AppleLogo = (props: HTMLAttributes<SVGElement>) => (\n  <svg\n    fill=\"none\"\n    viewBox=\"0 0 270 333\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Apple Logo</title>\n    <path\n      d=\"M190.57 86.7c9.06 0 42.6.79 64.66 32.36l2.18 3.12-3 2.33c-2.28 1.76-31.95 18.39-31.95 55.7 0 21.62 9.45 36.15 19.09 45.41A71.12 71.12 0 0 0 255 235.76c3.79 2.2 6.28 3.16 6.25 3.15l3.32 1.1-.65 3.43c-.1.58-.63 2.37-1.45 4.78a173.59 173.59 0 0 1-20.44 40.6l-.02.01v.01c-6.59 9.47-13.6 19.34-21.72 26.82-8.2 7.54-17.84 12.94-29.7 12.94-11.44 0-18.74-3.39-25.76-6.44-6.85-2.97-13.68-5.77-25-5.77-11.03 0-18.45 2.9-25.79 6-7.36 3.1-15 6.61-25.57 6.61-10.99 0-20.09-5.07-28.2-12.57-8.05-7.44-15.5-17.59-23.19-28.35v-.01l-.01-.01C18.75 262.04 4 221.78 4 183.43 4 121.37 44.7 87.5 85.63 87.5c11.06 0 21.06 3.62 29.52 6.99 4.33 1.72 8.12 3.32 11.71 4.53 3.58 1.21 6.57 1.89 9.14 1.89 2.36 0 5.33-.7 9.1-2 3.79-1.3 7.85-3 12.6-4.84 9.28-3.58 20.45-7.38 32.87-7.38Zm8.7-78.58c.49 2.17.69 4.71.69 7.1 0 16.9-7.25 33.61-17.39 45.62-5.48 6.76-12.87 12.58-20.72 16.71-7.85 4.14-16.42 6.74-24.28 6.74-1.92 0-3.78-.25-4.94-.47l-2.55-.47-.6-2.52a31.7 31.7 0 0 1-.7-6.53c0-17.27 8.78-33.98 18.03-44.49 11.84-13.71 31.47-24.17 48.4-24.8l3.33-.13.73 3.24Z\"\n      stroke=\"#B4B4B4\"\n      strokeWidth=\"8\"\n    />\n  </svg>\n)\n\nconst AppleChip = ({ ...props }: HTMLAttributes<SVGElement>) => (\n  <svg\n    enableBackground=\"new 0 0 132 92\"\n    viewBox=\"0 0 132 92\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Chip</title>\n    <rect\n      fill=\"url(#loveui-credit-card-chip-gradient-apple)\"\n      height=\"91\"\n      rx=\"20.5\"\n      stroke=\"#CECCC8\"\n      width=\"131\"\n      x=\"0.5\"\n      y=\"0.5\"\n    />\n    <rect\n      fill=\"#EAEAEA\"\n      height=\"21\"\n      rx=\"10.5\"\n      stroke=\"#95958E\"\n      width=\"48\"\n      x=\"9.5\"\n      y=\"9.5\"\n    />\n    <rect\n      fill=\"#EAEAEA\"\n      height=\"21\"\n      rx=\"10.5\"\n      stroke=\"#95958E\"\n      width=\"48\"\n      x=\"9.5\"\n      y=\"61.5\"\n    />\n    <rect\n      fill=\"#EAEAEA\"\n      height=\"21\"\n      rx=\"10.5\"\n      stroke=\"#95958E\"\n      width=\"48\"\n      x=\"9.5\"\n      y=\"35.5\"\n    />\n    <rect\n      fill=\"#EAEAEA\"\n      height=\"21\"\n      rx=\"10.5\"\n      stroke=\"#95958E\"\n      width=\"48\"\n      x=\"74.5\"\n      y=\"9.5\"\n    />\n    <rect\n      fill=\"#EAEAEA\"\n      height=\"21\"\n      rx=\"10.5\"\n      stroke=\"#95958E\"\n      width=\"48\"\n      x=\"74.5\"\n      y=\"61.5\"\n    />\n    <rect\n      fill=\"#EAEAEA\"\n      height=\"21\"\n      rx=\"10.5\"\n      stroke=\"#95958E\"\n      width=\"48\"\n      x=\"74.5\"\n      y=\"35.5\"\n    />\n    <defs>\n      <linearGradient\n        gradientUnits=\"userSpaceOnUse\"\n        id=\"loveui-credit-card-chip-gradient-apple\"\n        x1=\"1\"\n        x2=\"131\"\n        y1=\"46\"\n        y2=\"91\"\n      >\n        <stop stopColor=\"#F2F2F2\" />\n        <stop offset=\"1\" stopColor=\"#BFBFBF\" />\n      </linearGradient>\n    </defs>\n  </svg>\n)\n\nconst MastercardLogo = (props: HTMLAttributes<SVGElement>) => (\n  <svg\n    fill=\"none\"\n    viewBox=\"0 0 431 319\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Mastercard Logo</title>\n    <path\n      d=\"M86.74 318.33v-20.3c0-7.76-4.82-12.85-13.1-12.85-4.13 0-8.63 1.34-11.73 5.75-2.4-3.7-5.86-5.75-11.04-5.75-3.46 0-6.9 1.02-9.64 4.73v-4.06H34v32.48h7.23v-17.94c0-5.75 3.1-8.47 7.91-8.47 4.82 0 7.23 3.03 7.23 8.47v17.94h7.23v-17.94c0-5.75 3.46-8.47 7.91-8.47 4.82 0 7.23 3.03 7.23 8.47v17.94h8Zm107.23-32.48h-11.72v-9.81h-7.23v9.81h-6.55v6.42h6.55v14.9c0 7.45 3.09 11.83 11.36 11.83 3.1 0 6.55-1.02 8.96-2.37l-2.09-6.1a11.73 11.73 0 0 1-6.22 1.69c-3.46 0-4.82-2.05-4.82-5.4v-14.55h11.72v-6.42h.04Zm61.38-.7a9.83 9.83 0 0 0-8.64 4.72v-4.06h-7.23v32.48h7.23V300c0-5.4 2.4-8.47 6.9-8.47 1.37 0 3.1.35 4.5.67l2.1-6.78c-1.45-.28-3.5-.28-4.86-.28Zm-92.74 3.38c-3.46-2.36-8.28-3.39-13.46-3.39-8.27 0-13.78 4.06-13.78 10.49 0 5.4 4.14 8.47 11.37 9.46l3.45.35c3.78.67 5.87 1.7 5.87 3.39 0 2.37-2.77 4.06-7.6 4.06a19.3 19.3 0 0 1-11.04-3.39l-3.45 5.4c3.77 2.72 8.96 4.06 14.14 4.06 9.64 0 15.18-4.41 15.18-10.48 0-5.76-4.5-8.8-11.37-9.82l-3.45-.35c-3.1-.36-5.5-1.03-5.5-3.04 0-2.36 2.4-3.7 6.22-3.7 4.14 0 8.28 1.69 10.36 2.72l3.06-5.76Zm192.34-3.39a9.83 9.83 0 0 0-8.63 4.73v-4.06h-7.23v32.48h7.23V300c0-5.4 2.4-8.47 6.9-8.47 1.37 0 3.1.35 4.5.67l2.1-6.7c-1.41-.36-3.46-.36-4.87-.36Zm-92.38 16.95c0 9.81 6.91 16.91 17.6 16.91 4.82 0 8.27-1.02 11.72-3.7l-3.45-5.76c-2.77 2.05-5.5 3.03-8.63 3.03-5.87 0-10-4.06-10-10.48 0-6.11 4.13-10.17 10-10.48 3.09 0 5.86 1.02 8.63 3.03l3.45-5.75c-3.45-2.72-6.9-3.71-11.72-3.71-10.69-.04-17.6 7.1-17.6 16.91Zm66.88 0v-16.24h-7.23v4.06c-2.41-3.04-5.87-4.73-10.36-4.73-9.32 0-16.55 7.1-16.55 16.91S302.54 319 311.86 319c4.82 0 8.27-1.7 10.36-4.73v4.06h7.23v-16.24Zm-26.55 0c0-5.75 3.78-10.48 10-10.48 5.86 0 10 4.41 10 10.48 0 5.76-4.14 10.49-10 10.49-6.19-.36-10-4.77-10-10.49Zm-86.51-16.95c-9.64 0-16.55 6.78-16.55 16.91 0 10.17 6.9 16.91 16.9 16.91 4.83 0 9.65-1.34 13.46-4.41l-3.45-5.09a16.61 16.61 0 0 1-9.64 3.4c-4.5 0-8.96-2.06-10-7.77h24.46v-2.72c.32-10.45-5.9-17.23-15.18-17.23Zm0 6.11c4.5 0 7.59 2.72 8.27 7.76h-17.23c.68-4.37 3.77-7.76 8.96-7.76ZM396 302.09V273h-7.23v16.91c-2.4-3.04-5.86-4.73-10.36-4.73-9.32 0-16.55 7.1-16.55 16.91S369.09 319 378.41 319c4.82 0 8.27-1.7 10.36-4.73v4.06H396v-16.24Zm-26.55 0c0-5.75 3.78-10.48 10-10.48 5.87 0 10 4.41 10 10.48 0 5.76-4.13 10.49-10 10.49-6.22-.36-10-4.77-10-10.49Zm-242.03 0v-16.24h-7.23v4.06c-2.4-3.04-5.86-4.73-10.36-4.73-9.32 0-16.55 7.1-16.55 16.91S100.51 319 109.83 319c4.82 0 8.27-1.7 10.36-4.73v4.06h7.23v-16.24Zm-26.87 0c0-5.75 3.78-10.48 10-10.48 5.87 0 10 4.41 10 10.48 0 5.76-4.13 10.49-10 10.49-6.22-.36-10-4.77-10-10.49Z\"\n      fill=\"#B4B4B4\"\n    />\n    <path\n      d=\"M132 4c29.88 0 57.27 10.32 78.97 27.38l3.98 3.13-3.96 3.15c-27.67 22-45.69 56.02-45.69 94.35 0 38.34 18 72.67 45.66 94.33l4.02 3.14-4 3.15A127.35 127.35 0 0 1 132 260.02C61.25 260.02 4 202.76 4 132 4 61.25 61.25 4 132 4Zm166.45 0c70.8 0 128.05 57.62 128.05 128 0 70.76-57.25 128.02-128 128.02a127.35 127.35 0 0 1-78.97-27.39l-4-3.14 4-3.15a119.32 119.32 0 0 0 45.66-94.33c0-38.33-18-72.35-45.68-94.35l-3.96-3.15 3.97-3.13A127.15 127.15 0 0 1 298.45 4Z\"\n      stroke=\"#B4B4B4\"\n      strokeWidth=\"8\"\n    />\n  </svg>\n)\n\nconst Example = () => (\n  <CreditCard>\n    <CreditCardFlipper>\n      <CreditCardFront className=\"bg-[#F2F2F2] text-[#909090]\" safeArea={24}>\n        <CreditCardLogo className=\"absolute top-0 right-auto left-0 size-1/8\">\n          <AppleLogo />\n        </CreditCardLogo>\n        <CreditCardChip className=\"right-1 left-auto w-1/5\">\n          <AppleChip />\n        </CreditCardChip>\n        <CreditCardName className=\"absolute top-1/2 mt-4 -translate-y-1/2\">\n          Connor Love\n        </CreditCardName>\n      </CreditCardFront>\n      <CreditCardBack className=\"bg-[#F2F2F2] text-[#909090]\" safeArea={0}>\n        <CreditCardServiceProvider\n          className=\"top-6 right-6 max-h-1/4 max-w-1/4\"\n          type=\"Mastercard\"\n        >\n          <MastercardLogo className=\"w-full\" />\n        </CreditCardServiceProvider>\n        <CreditCardMagStripe className=\"top-auto bottom-0 bg-[#BEBEC0]\" />\n      </CreditCardBack>\n    </CreditCardFlipper>\n  </CreditCard>\n)\n\nexport default Example\n",
+      "content": "import type { HTMLAttributes } from \"react\"\n\nimport {\n  CreditCard,\n  CreditCardBack,\n  CreditCardChip,\n  CreditCardFlipper,\n  CreditCardFront,\n  CreditCardLogo,\n  CreditCardMagStripe,\n  CreditCardName,\n  CreditCardServiceProvider,\n} from \"../../../../../packages/credit-card\"\n\nconst AppleLogo = (props: HTMLAttributes<SVGElement>) => (\n  <svg\n    fill=\"none\"\n    viewBox=\"0 0 270 333\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Updated Apple Logo</title>\n    <path\n      d=\"M190.57 86.7c9.06 0 42.6.79 64.66 32.36l2.18 3.12-3 2.33c-2.28 1.76-31.95 18.39-31.95 55.7 0 21.62 9.45 36.15 19.09 45.41A71.12 71.12 0 0 0 255 235.76c3.79 2.2 6.28 3.16 6.25 3.15l3.32 1.1-.65 3.43c-.1.58-.63 2.37-1.45 4.78a173.59 173.59 0 0 1-20.44 40.6l-.02.01v.01c-6.59 9.47-13.6 19.34-21.72 26.82-8.2 7.54-17.84 12.94-29.7 12.94-11.44 0-18.74-3.39-25.76-6.44-6.85-2.97-13.68-5.77-25-5.77-11.03 0-18.45 2.9-25.79 6-7.36 3.1-15 6.61-25.57 6.61-10.99 0-20.09-5.07-28.2-12.57-8.05-7.44-15.5-17.59-23.19-28.35v-.01l-.01-.01C18.75 262.04 4 221.78 4 183.43 4 121.37 44.7 87.5 85.63 87.5c11.06 0 21.06 3.62 29.52 6.99 4.33 1.72 8.12 3.32 11.71 4.53 3.58 1.21 6.57 1.89 9.14 1.89 2.36 0 5.33-.7 9.1-2 3.79-1.3 7.85-3 12.6-4.84 9.28-3.58 20.45-7.38 32.87-7.38Zm8.7-78.58c.49 2.17.69 4.71.69 7.1 0 16.9-7.25 33.61-17.39 45.62-5.48 6.76-12.87 12.58-20.72 16.71-7.85 4.14-16.42 6.74-24.28 6.74-1.92 0-3.78-.25-4.94-.47l-2.55-.47-.6-2.52a31.7 31.7 0 0 1-.7-6.53c0-17.27 8.78-33.98 18.03-44.49 11.84-13.71 31.47-24.17 48.4-24.8l3.33-.13.73 3.24Z\"\n      stroke=\"#B4B4B4\"\n      strokeWidth=\"8\"\n    />\n  </svg>\n)\n\nconst AppleChip = ({ ...props }: HTMLAttributes<SVGElement>) => (\n  <svg\n    enableBackground=\"new 0 0 132 92\"\n    viewBox=\"0 0 132 92\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Updated Chip</title>\n    <rect\n      fill=\"url(#loveui-credit-card-chip-gradient-apple)\"\n      height=\"91\"\n      rx=\"20.5\"\n      stroke=\"#CECCC8\"\n      width=\"131\"\n      x=\"0.5\"\n      y=\"0.5\"\n    />\n    <rect\n      fill=\"#EAEAEA\"\n      height=\"21\"\n      rx=\"10.5\"\n      stroke=\"#95958E\"\n      width=\"48\"\n      x=\"9.5\"\n      y=\"9.5\"\n    />\n    <rect\n      fill=\"#EAEAEA\"\n      height=\"21\"\n      rx=\"10.5\"\n      stroke=\"#95958E\"\n      width=\"48\"\n      x=\"9.5\"\n      y=\"61.5\"\n    />\n    <rect\n      fill=\"#EAEAEA\"\n      height=\"21\"\n      rx=\"10.5\"\n      stroke=\"#95958E\"\n      width=\"48\"\n      x=\"9.5\"\n      y=\"35.5\"\n    />\n    <rect\n      fill=\"#EAEAEA\"\n      height=\"21\"\n      rx=\"10.5\"\n      stroke=\"#95958E\"\n      width=\"48\"\n      x=\"74.5\"\n      y=\"9.5\"\n    />\n    <rect\n      fill=\"#EAEAEA\"\n      height=\"21\"\n      rx=\"10.5\"\n      stroke=\"#95958E\"\n      width=\"48\"\n      x=\"74.5\"\n      y=\"61.5\"\n    />\n    <rect\n      fill=\"#EAEAEA\"\n      height=\"21\"\n      rx=\"10.5\"\n      stroke=\"#95958E\"\n      width=\"48\"\n      x=\"74.5\"\n      y=\"35.5\"\n    />\n    <defs>\n      <linearGradient\n        gradientUnits=\"userSpaceOnUse\"\n        id=\"loveui-credit-card-chip-gradient-apple\"\n        x1=\"1\"\n        x2=\"131\"\n        y1=\"46\"\n        y2=\"91\"\n      >\n        <stop stopColor=\"#F2F2F2\" />\n        <stop offset=\"1\" stopColor=\"#BFBFBF\" />\n      </linearGradient>\n    </defs>\n  </svg>\n)\n\nconst MastercardLogo = (props: HTMLAttributes<SVGElement>) => (\n  <svg\n    fill=\"none\"\n    viewBox=\"0 0 431 319\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Updated Mastercard Logo</title>\n    <path\n      d=\"M86.74 318.33v-20.3c0-7.76-4.82-12.85-13.1-12.85-4.13 0-8.63 1.34-11.73 5.75-2.4-3.7-5.86-5.75-11.04-5.75-3.46 0-6.9 1.02-9.64 4.73v-4.06H34v32.48h7.23v-17.94c0-5.75 3.1-8.47 7.91-8.47 4.82 0 7.23 3.03 7.23 8.47v17.94h7.23v-17.94c0-5.75 3.46-8.47 7.91-8.47 4.82 0 7.23 3.03 7.23 8.47v17.94h8Zm107.23-32.48h-11.72v-9.81h-7.23v9.81h-6.55v6.42h6.55v14.9c0 7.45 3.09 11.83 11.36 11.83 3.1 0 6.55-1.02 8.96-2.37l-2.09-6.1a11.73 11.73 0 0 1-6.22 1.69c-3.46 0-4.82-2.05-4.82-5.4v-14.55h11.72v-6.42h.04Zm61.38-.7a9.83 9.83 0 0 0-8.64 4.72v-4.06h-7.23v32.48h7.23V300c0-5.4 2.4-8.47 6.9-8.47 1.37 0 3.1.35 4.5.67l2.1-6.78c-1.45-.28-3.5-.28-4.86-.28Zm-92.74 3.38c-3.46-2.36-8.28-3.39-13.46-3.39-8.27 0-13.78 4.06-13.78 10.49 0 5.4 4.14 8.47 11.37 9.46l3.45.35c3.78.67 5.87 1.7 5.87 3.39 0 2.37-2.77 4.06-7.6 4.06a19.3 19.3 0 0 1-11.04-3.39l-3.45 5.4c3.77 2.72 8.96 4.06 14.14 4.06 9.64 0 15.18-4.41 15.18-10.48 0-5.76-4.5-8.8-11.37-9.82l-3.45-.35c-3.1-.36-5.5-1.03-5.5-3.04 0-2.36 2.4-3.7 6.22-3.7 4.14 0 8.28 1.69 10.36 2.72l3.06-5.76Zm192.34-3.39a9.83 9.83 0 0 0-8.63 4.73v-4.06h-7.23v32.48h7.23V300c0-5.4 2.4-8.47 6.9-8.47 1.37 0 3.1.35 4.5.67l2.1-6.7c-1.41-.36-3.46-.36-4.87-.36Zm-92.38 16.95c0 9.81 6.91 16.91 17.6 16.91 4.82 0 8.27-1.02 11.72-3.7l-3.45-5.76c-2.77 2.05-5.5 3.03-8.63 3.03-5.87 0-10-4.06-10-10.48 0-6.11 4.13-10.17 10-10.48 3.09 0 5.86 1.02 8.63 3.03l3.45-5.75c-3.45-2.72-6.9-3.71-11.72-3.71-10.69-.04-17.6 7.1-17.6 16.91Zm66.88 0v-16.24h-7.23v4.06c-2.41-3.04-5.87-4.73-10.36-4.73-9.32 0-16.55 7.1-16.55 16.91S302.54 319 311.86 319c4.82 0 8.27-1.7 10.36-4.73v4.06h7.23v-16.24Zm-26.55 0c0-5.75 3.78-10.48 10-10.48 5.86 0 10 4.41 10 10.48 0 5.76-4.14 10.49-10 10.49-6.19-.36-10-4.77-10-10.49Zm-86.51-16.95c-9.64 0-16.55 6.78-16.55 16.91 0 10.17 6.9 16.91 16.9 16.91 4.83 0 9.65-1.34 13.46-4.41l-3.45-5.09a16.61 16.61 0 0 1-9.64 3.4c-4.5 0-8.96-2.06-10-7.77h24.46v-2.72c.32-10.45-5.9-17.23-15.18-17.23Zm0 6.11c4.5 0 7.59 2.72 8.27 7.76h-17.23c.68-4.37 3.77-7.76 8.96-7.76ZM396 302.09V273h-7.23v16.91c-2.4-3.04-5.86-4.73-10.36-4.73-9.32 0-16.55 7.1-16.55 16.91S369.09 319 378.41 319c4.82 0 8.27-1.7 10.36-4.73v4.06H396v-16.24Zm-26.55 0c0-5.75 3.78-10.48 10-10.48 5.87 0 10 4.41 10 10.48 0 5.76-4.13 10.49-10 10.49-6.22-.36-10-4.77-10-10.49Zm-242.03 0v-16.24h-7.23v4.06c-2.4-3.04-5.86-4.73-10.36-4.73-9.32 0-16.55 7.1-16.55 16.91S100.51 319 109.83 319c4.82 0 8.27-1.7 10.36-4.73v4.06h7.23v-16.24Zm-26.87 0c0-5.75 3.78-10.48 10-10.48 5.87 0 10 4.41 10 10.48 0 5.76-4.13 10.49-10 10.49-6.22-.36-10-4.77-10-10.49Z\"\n      fill=\"#B4B4B4\"\n    />\n    <path\n      d=\"M132 4c29.88 0 57.27 10.32 78.97 27.38l3.98 3.13-3.96 3.15c-27.67 22-45.69 56.02-45.69 94.35 0 38.34 18 72.67 45.66 94.33l4.02 3.14-4 3.15A127.35 127.35 0 0 1 132 260.02C61.25 260.02 4 202.76 4 132 4 61.25 61.25 4 132 4Zm166.45 0c70.8 0 128.05 57.62 128.05 128 0 70.76-57.25 128.02-128 128.02a127.35 127.35 0 0 1-78.97-27.39l-4-3.14 4-3.15a119.32 119.32 0 0 0 45.66-94.33c0-38.33-18-72.35-45.68-94.35l-3.96-3.15 3.97-3.13A127.15 127.15 0 0 1 298.45 4Z\"\n      stroke=\"#B4B4B4\"\n      strokeWidth=\"8\"\n    />\n  </svg>\n)\n\nconst Example = () => (\n  <CreditCard>\n    <CreditCardFlipper>\n      <CreditCardFront className=\"bg-[#F2F2F2] text-[#909090]\" safeArea={24}>\n        <CreditCardLogo className=\"absolute top-0 right-auto left-0 size-1/8\">\n          <AppleLogo />\n        </CreditCardLogo>\n        <CreditCardChip className=\"right-1 left-auto w-1/5\">\n          <AppleChip />\n        </CreditCardChip>\n        <CreditCardName className=\"absolute top-1/2 mt-4 -translate-y-1/2\">\n          Updated Connor Love\n        </CreditCardName>\n      </CreditCardFront>\n      <CreditCardBack className=\"bg-[#F2F2F2] text-[#909090]\" safeArea={0}>\n        <CreditCardServiceProvider\n          className=\"top-6 right-6 max-h-1/4 max-w-1/4\"\n          type=\"Mastercard\"\n        >\n          <MastercardLogo className=\"w-full\" />\n        </CreditCardServiceProvider>\n        <CreditCardMagStripe className=\"top-auto bottom-0 bg-[#BEBEC0]\" />\n      </CreditCardBack>\n    </CreditCardFlipper>\n  </CreditCard>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/credit-card-back.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/credit-card-back.tsx",
-      "content": "import {\n  CreditCard,\n  CreditCardBack,\n  CreditCardCvv,\n  CreditCardExpiry,\n  CreditCardMagStripe,\n  CreditCardName,\n  CreditCardNumber,\n} from \"../../../../../packages/credit-card\"\n\nconst Example = () => (\n  <CreditCard>\n    <CreditCardBack className=\"bg-[#9EE672] text-black\">\n      <CreditCardMagStripe />\n      <CreditCardNumber className=\"absolute bottom-0 left-0\">\n        0123 4567 8901 2345\n      </CreditCardNumber>\n      <div className=\"absolute bottom-8 flex w-full flex-col gap-4 @xs:bottom-12 @xs:flex-row @xs:justify-between\">\n        <CreditCardName className=\"flex-1\">Connor Love</CreditCardName>\n        <div className=\"flex flex-1 gap-4 @xs:justify-between\">\n          <CreditCardExpiry>01/24</CreditCardExpiry>\n          <CreditCardCvv>123</CreditCardCvv>\n        </div>\n      </div>\n    </CreditCardBack>\n  </CreditCard>\n)\n\nexport default Example\n",
+      "content": "import {\n  CreditCard,\n  CreditCardBack,\n  CreditCardCvv,\n  CreditCardExpiry,\n  CreditCardMagStripe,\n  CreditCardName,\n  CreditCardNumber,\n} from \"../../../../../packages/credit-card\"\n\nconst Example = () => (\n  <CreditCard>\n    <CreditCardBack className=\"bg-[#9EE672] text-black\">\n      <CreditCardMagStripe />\n      <CreditCardNumber className=\"absolute bottom-0 left-0\">\n        0123 4567 8901 2345\n      </CreditCardNumber>\n      <div className=\"absolute bottom-8 flex w-full flex-col gap-4 @xs:bottom-12 @xs:flex-row @xs:justify-between\">\n        <CreditCardName className=\"flex-1\">Updated Connor Love</CreditCardName>\n        <div className=\"flex flex-1 gap-4 @xs:justify-between\">\n          <CreditCardExpiry>01/24</CreditCardExpiry>\n          <CreditCardCvv>123</CreditCardCvv>\n        </div>\n      </div>\n    </CreditCardBack>\n  </CreditCard>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/credit-card.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/credit-card.tsx",
-      "content": "import type { HTMLAttributes } from \"react\"\n\nimport {\n  CreditCard,\n  CreditCardBack,\n  CreditCardChip,\n  CreditCardCvv,\n  CreditCardExpiry,\n  CreditCardFlipper,\n  CreditCardFront,\n  CreditCardLogo,\n  CreditCardMagStripe,\n  CreditCardName,\n  CreditCardNumber,\n  CreditCardServiceProvider,\n} from \"../../../../../packages/credit-card\"\n\nconst ChaseLogo = (props: HTMLAttributes<SVGElement>) => (\n  <svg\n    viewBox=\"0 0 561.578 104.369\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Chase Logo</title>\n    <path\n      d=\"m494.525 0a3.69 3.69 0 0 0 -3.691 3.686v25.83h68.244l-31.078-29.508zm67.053 37.33a3.677 3.677 0 0 0 -3.688-3.68h-25.828v68.242l29.504-31.086zm-37.342 67.039a3.688 3.688 0 0 0 3.678-3.688v-25.827h-68.241l31.073 29.508zm-67.056-37.326a3.687 3.687 0 0 0 3.686 3.688h25.83v-68.247l-29.512 31.078z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"m144.379 12.453v31.514h-43.91v-31.514l-15.987-.006v79.461h15.987v-34.137h43.91v34.137h16.016v-79.455zm212.744 0v79.441l70.164-.004-8.891-13.98h-45.23v-20.139h43.797v-13.472h-43.797v-18.188h45.156l8.711-13.658zm-332.08-.01c-16.639 0-25.043 10.106-25.043 24.823v29.665c0 17.026 10.824 24.979 24.957 24.979l50.164-.01-9.293-14.521h-37.775c-8.021 0-11.515-2.899-11.515-11.881v-26.91c0-8.684 2.939-12.072 11.729-12.072h37.955l8.928-14.072zm261.904-.023c-9.613 0-19.451 5.771-19.451 20.625v3.816c0 15.475 9.476 21.389 18.949 21.432h33.275c3.455 0 6.264.572 6.264 6.416l-.004 6.754c-.086 5.236-2.711 6.447-6.379 6.447h-43.771l-8.967 13.979h53.762c12.972 0 21.773-6.447 21.773-21.353v-5.476c0-14.408-8.176-21.207-20.859-21.207h-31.77c-3.525 0-5.976-.967-5.976-6.184l-.004-5.492c0-4.443 1.688-6.066 5.791-6.066l41.683-.016 8.715-13.69-53.031.015m-80.084.045-37.679 79.435h17.811l7.338-16.405h40.941l7.315 16.405h17.882l-37.765-79.436zm7.896 16.488 14.479 33.021h-28.867z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nconst ChaseMark = (props: HTMLAttributes<SVGElement>) => (\n  <svg\n    fill=\"none\"\n    viewBox=\"0 0 465 465\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Chase Mark</title>\n    <path\n      d=\"M166.497 0.188111C162.143 0.186928 157.966 1.91465 154.885 4.99158C151.804 8.0685 150.071 12.2429 150.066 16.5972V131.586H453.871L315.519 0.223725L166.497 0.188111ZM465 166.372C465.002 164.217 464.578 162.083 463.753 160.092C462.928 158.101 461.718 156.293 460.193 154.771C458.668 153.249 456.857 152.043 454.864 151.222C452.872 150.402 450.737 149.983 448.582 149.989H333.602V453.785L464.946 315.398L465 166.372ZM298.763 464.812C303.11 464.8 307.274 463.065 310.344 459.987C313.413 456.91 315.137 452.74 315.137 448.394V333.419H11.3453L149.674 464.781L298.763 464.812ZM0.247071 298.646C0.246486 300.802 0.670457 302.936 1.49478 304.928C2.31909 306.919 3.52763 308.729 5.05136 310.254C6.57509 311.778 8.38414 312.988 10.3753 313.813C12.3665 314.639 14.5007 315.064 16.6562 315.064H131.645V11.2462L0.264868 149.597L0.247071 298.646Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nconst Example = () => (\n  <CreditCard>\n    <CreditCardFlipper>\n      <CreditCardFront className=\"bg-[#063573]\">\n        <ChaseLogo className=\"absolute top-0 left-0 h-1/12\" />\n        <CreditCardLogo>\n          <ChaseMark className=\"text-[#0e72d1]\" />\n        </CreditCardLogo>\n        <CreditCardChip />\n        <CreditCardServiceProvider\n          className=\"brightness-0 invert\"\n          format=\"logo\"\n          type=\"Visa\"\n        />\n        <CreditCardName className=\"absolute bottom-0 left-0\">\n          Connor Love\n        </CreditCardName>\n      </CreditCardFront>\n      <CreditCardBack className=\"bg-[#063573]\">\n        <CreditCardMagStripe />\n        <CreditCardNumber className=\"absolute bottom-0 left-0\">\n          0123 4567 8901 2345\n        </CreditCardNumber>\n        <div className=\"absolute top-1/2 flex -translate-y-1/2 gap-4\">\n          <CreditCardExpiry>01/24</CreditCardExpiry>\n          <CreditCardCvv>123</CreditCardCvv>\n        </div>\n      </CreditCardBack>\n    </CreditCardFlipper>\n  </CreditCard>\n)\n\nexport default Example\n",
+      "content": "import type { HTMLAttributes } from \"react\"\n\nimport {\n  CreditCard,\n  CreditCardBack,\n  CreditCardChip,\n  CreditCardCvv,\n  CreditCardExpiry,\n  CreditCardFlipper,\n  CreditCardFront,\n  CreditCardLogo,\n  CreditCardMagStripe,\n  CreditCardName,\n  CreditCardNumber,\n  CreditCardServiceProvider,\n} from \"../../../../../packages/credit-card\"\n\nconst ChaseLogo = (props: HTMLAttributes<SVGElement>) => (\n  <svg\n    viewBox=\"0 0 561.578 104.369\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Updated Chase Logo</title>\n    <path\n      d=\"m494.525 0a3.69 3.69 0 0 0 -3.691 3.686v25.83h68.244l-31.078-29.508zm67.053 37.33a3.677 3.677 0 0 0 -3.688-3.68h-25.828v68.242l29.504-31.086zm-37.342 67.039a3.688 3.688 0 0 0 3.678-3.688v-25.827h-68.241l31.073 29.508zm-67.056-37.326a3.687 3.687 0 0 0 3.686 3.688h25.83v-68.247l-29.512 31.078z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"m144.379 12.453v31.514h-43.91v-31.514l-15.987-.006v79.461h15.987v-34.137h43.91v34.137h16.016v-79.455zm212.744 0v79.441l70.164-.004-8.891-13.98h-45.23v-20.139h43.797v-13.472h-43.797v-18.188h45.156l8.711-13.658zm-332.08-.01c-16.639 0-25.043 10.106-25.043 24.823v29.665c0 17.026 10.824 24.979 24.957 24.979l50.164-.01-9.293-14.521h-37.775c-8.021 0-11.515-2.899-11.515-11.881v-26.91c0-8.684 2.939-12.072 11.729-12.072h37.955l8.928-14.072zm261.904-.023c-9.613 0-19.451 5.771-19.451 20.625v3.816c0 15.475 9.476 21.389 18.949 21.432h33.275c3.455 0 6.264.572 6.264 6.416l-.004 6.754c-.086 5.236-2.711 6.447-6.379 6.447h-43.771l-8.967 13.979h53.762c12.972 0 21.773-6.447 21.773-21.353v-5.476c0-14.408-8.176-21.207-20.859-21.207h-31.77c-3.525 0-5.976-.967-5.976-6.184l-.004-5.492c0-4.443 1.688-6.066 5.791-6.066l41.683-.016 8.715-13.69-53.031.015m-80.084.045-37.679 79.435h17.811l7.338-16.405h40.941l7.315 16.405h17.882l-37.765-79.436zm7.896 16.488 14.479 33.021h-28.867z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nconst ChaseMark = (props: HTMLAttributes<SVGElement>) => (\n  <svg\n    fill=\"none\"\n    viewBox=\"0 0 465 465\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Updated Chase Mark</title>\n    <path\n      d=\"M166.497 0.188111C162.143 0.186928 157.966 1.91465 154.885 4.99158C151.804 8.0685 150.071 12.2429 150.066 16.5972V131.586H453.871L315.519 0.223725L166.497 0.188111ZM465 166.372C465.002 164.217 464.578 162.083 463.753 160.092C462.928 158.101 461.718 156.293 460.193 154.771C458.668 153.249 456.857 152.043 454.864 151.222C452.872 150.402 450.737 149.983 448.582 149.989H333.602V453.785L464.946 315.398L465 166.372ZM298.763 464.812C303.11 464.8 307.274 463.065 310.344 459.987C313.413 456.91 315.137 452.74 315.137 448.394V333.419H11.3453L149.674 464.781L298.763 464.812ZM0.247071 298.646C0.246486 300.802 0.670457 302.936 1.49478 304.928C2.31909 306.919 3.52763 308.729 5.05136 310.254C6.57509 311.778 8.38414 312.988 10.3753 313.813C12.3665 314.639 14.5007 315.064 16.6562 315.064H131.645V11.2462L0.264868 149.597L0.247071 298.646Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nconst Example = () => (\n  <CreditCard>\n    <CreditCardFlipper>\n      <CreditCardFront className=\"bg-[#063573]\">\n        <ChaseLogo className=\"absolute top-0 left-0 h-1/12\" />\n        <CreditCardLogo>\n          <ChaseMark className=\"text-[#0e72d1]\" />\n        </CreditCardLogo>\n        <CreditCardChip />\n        <CreditCardServiceProvider\n          className=\"brightness-0 invert\"\n          format=\"logo\"\n          type=\"Visa\"\n        />\n        <CreditCardName className=\"absolute bottom-0 left-0\">\n          Updated Connor Love\n        </CreditCardName>\n      </CreditCardFront>\n      <CreditCardBack className=\"bg-[#063573]\">\n        <CreditCardMagStripe />\n        <CreditCardNumber className=\"absolute bottom-0 left-0\">\n          0123 4567 8901 2345\n        </CreditCardNumber>\n        <div className=\"absolute top-1/2 flex -translate-y-1/2 gap-4\">\n          <CreditCardExpiry>01/24</CreditCardExpiry>\n          <CreditCardCvv>123</CreditCardCvv>\n        </div>\n      </CreditCardBack>\n    </CreditCardFlipper>\n  </CreditCard>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/cropper.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cropper",
+  "type": "registry:ui",
+  "dependencies": [
+    "@origin-space/image-cropper"
+  ],
+  "files": [
+    {
+      "path": "registry/default/ui/cropper.tsx",
+      "content": "\"use client\"\n\nimport { Cropper as CropperPrimitive } from \"@origin-space/image-cropper\"\n\nimport { cn } from \"@/registry/default/lib/utils\"\n\nfunction Cropper({\n  className,\n  ...props\n}: React.ComponentProps<typeof CropperPrimitive.Root>) {\n  return (\n    <CropperPrimitive.Root\n      data-slot=\"cropper\"\n      className={cn(\n        \"relative flex w-full cursor-move touch-none items-center justify-center overflow-hidden focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CropperDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof CropperPrimitive.Description>) {\n  return (\n    <CropperPrimitive.Description\n      data-slot=\"cropper-description\"\n      className={cn(\"sr-only\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CropperImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof CropperPrimitive.Image>) {\n  return (\n    <CropperPrimitive.Image\n      data-slot=\"cropper-image\"\n      className={cn(\n        \"pointer-events-none h-full w-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CropperCropArea({\n  className,\n  ...props\n}: React.ComponentProps<typeof CropperPrimitive.CropArea>) {\n  return (\n    <CropperPrimitive.CropArea\n      data-slot=\"cropper-crop-area\"\n      className={cn(\n        \"pointer-events-none absolute border-3 border-white shadow-[0_0_0_9999px_rgba(0,0,0,0.3)] in-[[data-slot=cropper]:focus-visible]:ring-[3px] in-[[data-slot=cropper]:focus-visible]:ring-white/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Cropper, CropperDescription, CropperImage, CropperCropArea }\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/public/r/cursor-color.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/cursor-color.tsx",
-      "content": "\"use client\"\n\nimport {\n  Cursor,\n  CursorBody,\n  CursorMessage,\n  CursorName,\n  CursorPointer,\n} from \"../../../../../packages/cursor\"\n\nconst Example = () => (\n  <Cursor>\n    <CursorPointer className=\"text-indigo-500\" />\n    <CursorBody className=\"bg-indigo-50 text-indigo-700\">\n      <CursorName>@loveconnor</CursorName>\n      <CursorMessage>Can we adjust the color?</CursorMessage>\n    </CursorBody>\n  </Cursor>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  Cursor,\n  CursorBody,\n  CursorMessage,\n  CursorName,\n  CursorPointer,\n} from \"../../../../../packages/cursor\"\n\nconst Example = () => (\n  <Cursor>\n    <CursorPointer className=\"text-indigo-500\" />\n    <CursorBody className=\"bg-indigo-50 text-indigo-700\">\n      <CursorName>@loveconnor</CursorName>\n      <CursorMessage>Updated Can we adjust the color?</CursorMessage>\n    </CursorBody>\n  </Cursor>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/cursor-message.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/cursor-message.tsx",
-      "content": "\"use client\"\n\nimport {\n  Cursor,\n  CursorBody,\n  CursorMessage,\n  CursorPointer,\n} from \"../../../../../packages/cursor\"\n\nconst Example = () => (\n  <Cursor color=\"#000000\">\n    <CursorPointer />\n    <CursorBody>\n      <CursorMessage>That looks great!</CursorMessage>\n    </CursorBody>\n  </Cursor>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  Cursor,\n  CursorBody,\n  CursorMessage,\n  CursorPointer,\n} from \"../../../../../packages/cursor\"\n\nconst Example = () => (\n  <Cursor color=\"#000000\">\n    <CursorPointer />\n    <CursorBody>\n      <CursorMessage>Updated That looks great!</CursorMessage>\n    </CursorBody>\n  </Cursor>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/cursor-name-message.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/cursor-name-message.tsx",
-      "content": "\"use client\"\n\nimport {\n  Cursor,\n  CursorBody,\n  CursorMessage,\n  CursorName,\n  CursorPointer,\n} from \"../../../../../packages/cursor\"\n\nconst Example = () => (\n  <Cursor color=\"#000000\">\n    <CursorPointer />\n    <CursorBody>\n      <CursorName>Connor</CursorName>\n      <CursorMessage>That looks great!</CursorMessage>\n    </CursorBody>\n  </Cursor>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  Cursor,\n  CursorBody,\n  CursorMessage,\n  CursorName,\n  CursorPointer,\n} from \"../../../../../packages/cursor\"\n\nconst Example = () => (\n  <Cursor color=\"#000000\">\n    <CursorPointer />\n    <CursorBody>\n      <CursorName>Updated Connor</CursorName>\n      <CursorMessage>Updated That looks great!</CursorMessage>\n    </CursorBody>\n  </Cursor>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/cursor-name.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/cursor-name.tsx",
-      "content": "\"use client\"\n\nimport {\n  Cursor,\n  CursorBody,\n  CursorName,\n  CursorPointer,\n} from \"../../../../../packages/cursor\"\n\nconst Example = () => (\n  <Cursor>\n    <CursorPointer />\n    <CursorBody>\n      <CursorName>Connor</CursorName>\n    </CursorBody>\n  </Cursor>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  Cursor,\n  CursorBody,\n  CursorName,\n  CursorPointer,\n} from \"../../../../../packages/cursor\"\n\nconst Example = () => (\n  <Cursor>\n    <CursorPointer />\n    <CursorBody>\n      <CursorName>Updated Connor</CursorName>\n    </CursorBody>\n  </Cursor>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/cursor.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/cursor.tsx",
-      "content": "\"use client\"\n\nimport {\n  Cursor,\n  CursorBody,\n  CursorMessage,\n  CursorName,\n  CursorPointer,\n} from \"../../../../../packages/cursor\"\n\nconst Example = () => (\n  <>\n    <Cursor className=\"absolute top-24 left-24\">\n      <CursorPointer className=\"text-emerald-500\" />\n      <CursorBody className=\"bg-emerald-50 text-emerald-700\">\n        <CursorName>@loveconnor</CursorName>\n        <CursorMessage>Can we change the color?</CursorMessage>\n      </CursorBody>\n    </Cursor>\n    <Cursor className=\"absolute top-48 right-32\">\n      <CursorPointer className=\"text-rose-500\" />\n      <CursorBody className=\"bg-rose-50 text-rose-700\">\n        <CursorName>@monster0506</CursorName>\n        <CursorMessage>I'm not sure if this is working...</CursorMessage>\n      </CursorBody>\n    </Cursor>\n    <Cursor className=\"absolute bottom-24 left-48\">\n      <CursorPointer className=\"text-sky-500\" />\n      <CursorBody className=\"bg-sky-50 text-sky-700\">\n        <CursorName>@clove</CursorName>\n        <CursorMessage>What is this?</CursorMessage>\n      </CursorBody>\n    </Cursor>\n  </>\n)\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport {\n  Cursor,\n  CursorBody,\n  CursorMessage,\n  CursorName,\n  CursorPointer,\n} from \"../../../../../packages/cursor\"\n\nconst Example = () => (\n  <>\n    <Cursor className=\"absolute top-24 left-24\">\n      <CursorPointer className=\"text-emerald-500\" />\n      <CursorBody className=\"bg-emerald-50 text-emerald-700\">\n        <CursorName>@loveconnor</CursorName>\n        <CursorMessage>Updated Can we change the color?</CursorMessage>\n      </CursorBody>\n    </Cursor>\n    <Cursor className=\"absolute top-48 right-32\">\n      <CursorPointer className=\"text-rose-500\" />\n      <CursorBody className=\"bg-rose-50 text-rose-700\">\n        <CursorName>@monster0506</CursorName>\n        <CursorMessage>\n          Updated I'm not sure if this is working...\n        </CursorMessage>\n      </CursorBody>\n    </Cursor>\n    <Cursor className=\"absolute bottom-24 left-48\">\n      <CursorPointer className=\"text-sky-500\" />\n      <CursorBody className=\"bg-sky-50 text-sky-700\">\n        <CursorName>@clove</CursorName>\n        <CursorMessage>Updated What is this?</CursorMessage>\n      </CursorBody>\n    </Cursor>\n  </>\n)\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],