love-ui 1.2.13 → 1.2.15

package/public/r/comp-89.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comp-89",
-  "type": "registry:component",
-  "registryDependencies": [
-    "https://loveui.dev/building-blocks/r/button.json"
-  ],
-  "files": [
-    {
-      "path": "registry/default/components/comp-89.tsx",
-      "content": "import { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <Button variant=\"ghost\">Cancel</Button>\n      <Button>Save</Button>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "meta": {
-    "tags": [
-      "button"
-    ],
-    "style": 2
-  }
-}

package/public/r/comp-90.json

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

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

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

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

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

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

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

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

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

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

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comparison-event-handlers",
-  "description": "Comparison slider demonstrating event handlers.",
-  "registryDependencies": [
-    "@loveui/comparison",
-    "@loveui/code-block"
-  ],
-  "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=\"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"
-    }
-  ],
-  "categories": [
-    "code",
-    "comparison",
-    "events"
-  ],
-  "type": "registry:example"
-}

package/public/r/comparison-hover.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comparison-hover",
-  "description": "Comparison slider activated on hover.",
-  "registryDependencies": [
-    "@loveui/comparison",
-    "@loveui/code-block"
-  ],
-  "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=\"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"
-    }
-  ],
-  "categories": [
-    "code",
-    "comparison",
-    "hover"
-  ],
-  "type": "registry:example"
-}

package/public/r/comparison.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "comparison",
-  "description": "Comparison slider overlaying before/after code.",
-  "registryDependencies": [
-    "@loveui/comparison",
-    "@loveui/code-block"
-  ],
-  "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=\"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"
-    }
-  ],
-  "categories": [
-    "code",
-    "comparison"
-  ],
-  "type": "registry:example"
-}

package/public/r/context-menu.json

@@ -1,16 +0,0 @@
-{
-  "$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-blocks.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "contribution-graph-custom-blocks",
-  "description": "Contribution graph using custom block rendering.",
-  "registryDependencies": [
-    "@loveui/contribution-graph",
-    "@loveui/code-block",
-    "@faker-js/faker"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/contribution-graph-custom-blocks.tsx",
-      "content": "\"use client\"\n\nimport { eachDayOfInterval, endOfYear, formatISO, startOfYear } from \"date-fns\"\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          className={\n            activity.level > 3\n              ? \"animate-pulse stroke-emerald-500 stroke-2 dark:stroke-emerald-400\"\n              : activity.level === 0\n                ? \"opacity-50\"\n                : \"\"\n          }\n          dayIndex={dayIndex}\n          style={{\n            filter: activity.level > 2 ? \"brightness(1.2)\" : undefined,\n          }}\n          weekIndex={weekIndex}\n        />\n      )}\n    </ContributionGraphCalendar>\n    <ContributionGraphFooter>\n      <ContributionGraphTotalCount />\n      <ContributionGraphLegend />\n    </ContributionGraphFooter>\n  </ContributionGraph>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "code",
-    "contribution",
-    "customization"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "contribution-graph-custom-footer",
-  "description": "Contribution graph with custom footer summary.",
-  "registryDependencies": [
-    "@loveui/contribution-graph",
-    "@loveui/code-block",
-    "@faker-js/faker"
-  ],
-  "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\">\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"
-    }
-  ],
-  "categories": [
-    "code",
-    "contribution",
-    "customization"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "contribution-graph-custom-theme",
-  "description": "Contribution graph with custom color themes.",
-  "registryDependencies": [
-    "@loveui/contribution-graph",
-    "@loveui/code-block",
-    "@faker-js/faker"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/contribution-graph-custom-theme.tsx",
-      "content": "\"use client\"\n\nimport { eachDayOfInterval, endOfYear, formatISO, startOfYear } from \"date-fns\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  ContributionGraph,\n  ContributionGraphBlock,\n  ContributionGraphCalendar,\n  ContributionGraphFooter,\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          className={cn(\n            'data-[level=\"0\"]:fill-[#ebedf0] dark:data-[level=\"0\"]:fill-[#161b22]',\n            'data-[level=\"1\"]:fill-[#9be9a8] dark:data-[level=\"1\"]:fill-[#0e4429]',\n            'data-[level=\"2\"]:fill-[#40c463] dark:data-[level=\"2\"]:fill-[#006d32]',\n            'data-[level=\"3\"]:fill-[#30a14e] dark:data-[level=\"3\"]:fill-[#26a641]',\n            'data-[level=\"4\"]:fill-[#216e39] dark:data-[level=\"4\"]:fill-[#39d353]'\n          )}\n          dayIndex={dayIndex}\n          weekIndex={weekIndex}\n        />\n      )}\n    </ContributionGraphCalendar>\n    <ContributionGraphFooter />\n  </ContributionGraph>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "code",
-    "contribution",
-    "theme"
-  ],
-  "type": "registry:example"
-}

package/public/r/contribution-graph-minimal.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "contribution-graph-minimal",
-  "description": "Minimal contribution graph layout.",
-  "registryDependencies": [
-    "@loveui/contribution-graph",
-    "@loveui/code-block",
-    "@faker-js/faker"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/contribution-graph-minimal.tsx",
-      "content": "\"use client\"\n\nimport { eachDayOfInterval, endOfYear, formatISO, startOfYear } from \"date-fns\"\n\nimport {\n  ContributionGraph,\n  ContributionGraphBlock,\n  ContributionGraphCalendar,\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 hideMonthLabels>\n      {({ activity, dayIndex, weekIndex }) => (\n        <ContributionGraphBlock\n          activity={activity}\n          dayIndex={dayIndex}\n          weekIndex={weekIndex}\n        />\n      )}\n    </ContributionGraphCalendar>\n  </ContributionGraph>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "code",
-    "contribution"
-  ],
-  "type": "registry:example"
-}

package/public/r/contribution-graph-size.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "contribution-graph-size",
-  "description": "Contribution graph showcasing custom sizing.",
-  "registryDependencies": [
-    "@loveui/contribution-graph",
-    "@loveui/code-block",
-    "@faker-js/faker"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/contribution-graph-size.tsx",
-      "content": "\"use client\"\n\nimport { eachDayOfInterval, endOfYear, formatISO, startOfYear } from \"date-fns\"\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 blockMargin={2} blockSize={20} data={data} fontSize={16}>\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      <ContributionGraphLegend />\n    </ContributionGraphFooter>\n  </ContributionGraph>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "code",
-    "contribution",
-    "layout"
-  ],
-  "type": "registry:example"
-}

package/public/r/contribution-graph-tooltip.json

@@ -1,23 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "contribution-graph-tooltip",
-  "description": "Contribution graph with custom tooltip content.",
-  "registryDependencies": [
-    "@loveui/contribution-graph",
-    "@loveui/code-block",
-    "@faker-js/faker"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/contribution-graph-tooltip.tsx",
-      "content": "\"use client\"\n\nimport { eachDayOfInterval, endOfYear, formatISO, startOfYear } from \"date-fns\"\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nimport {\n  ContributionGraph,\n  ContributionGraphBlock,\n  ContributionGraphCalendar,\n  ContributionGraphFooter,\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  <TooltipProvider>\n    <ContributionGraph data={data}>\n      <ContributionGraphCalendar>\n        {({ activity, dayIndex, weekIndex }) => (\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ContributionGraphBlock\n                  activity={activity}\n                  className=\"cursor-pointer\"\n                  dayIndex={dayIndex}\n                  weekIndex={weekIndex}\n                />\n              }\n            />\n            <TooltipContent>\n              <p className=\"font-semibold\">{activity.date}</p>\n              <p>{activity.count} contributions</p>\n            </TooltipContent>\n          </Tooltip>\n        )}\n      </ContributionGraphCalendar>\n      <ContributionGraphFooter />\n    </ContributionGraph>\n  </TooltipProvider>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "code",
-    "contribution",
-    "tooltip"
-  ],
-  "type": "registry:example"
-}

package/public/r/contribution-graph.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "contribution-graph",
-  "description": "Contribution graph showing activity heatmap.",
-  "registryDependencies": [
-    "@loveui/contribution-graph",
-    "@loveui/code-block",
-    "@faker-js/faker"
-  ],
-  "files": [
-    {
-      "path": "registry/default/examples/contribution-graph.tsx",
-      "content": "\"use client\"\n\nimport { eachDayOfInterval, endOfYear, formatISO, startOfYear } from \"date-fns\"\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      <ContributionGraphLegend />\n    </ContributionGraphFooter>\n  </ContributionGraph>\n)\n\nexport default Example\n",
-      "type": "registry:example"
-    }
-  ],
-  "categories": [
-    "code",
-    "contribution"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "credit-card-apple",
-  "description": "Apple Card inspired credit card layout.",
-  "registryDependencies": [
-    "@loveui/credit-card"
-  ],
-  "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>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"
-    }
-  ],
-  "categories": [
-    "finance",
-    "credit-card"
-  ],
-  "type": "registry:example"
-}

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

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "credit-card-back",
-  "description": "Credit card back face focusing on CVV and expiry.",
-  "registryDependencies": [
-    "@loveui/credit-card"
-  ],
-  "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\">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"
-    }
-  ],
-  "categories": [
-    "finance",
-    "credit-card"
-  ],
-  "type": "registry:example"
-}