love-ui 1.2.12 → 1.2.14

package/public/r/comp-296.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-296",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-296.tsx",
+      "content": "import { RadioIcon, XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\">\n      <div className=\"flex items-center gap-2\">\n        <div\n          className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n          aria-hidden=\"true\"\n        >\n          <RadioIcon className=\"opacity-60\" size={16} />\n        </div>\n        <div className=\"flex grow items-center gap-12\">\n          <div className=\"space-y-1\">\n            <p className=\"text-sm font-medium\">Goes live in 18 hours</p>\n            <p className=\"text-xs text-muted-foreground\">March 12 at 9:30 AM.</p>\n          </div>\n          <Button size=\"sm\">Add to calendar</Button>\n        </div>\n        <Button\n          variant=\"ghost\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          aria-label=\"Close notification\"\n        >\n          <XIcon\n            size={16}\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            aria-hidden=\"true\"\n          />\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "notification",
+      "button"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-297.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-297",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/toast.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-297.tsx",
+      "content": "\"use client\"\n\nimport { useToast } from \"@/registry/building-blocks/default/hooks/use-toast\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { ToastAction } from \"@/registry/building-blocks/default/ui/toast\"\n\nexport default function Component() {\n  const { toast } = useToast()\n\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast({\n          title: \"Deploy succeeded\",\n          description: \"Production updated with build #5421.\",\n          action: <ToastAction altText=\"View logs\">View logs</ToastAction>,\n        })\n      }}\n    >\n      Show toast\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-toast.ts",
+      "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/default/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionElement\n}\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"]\n      toast: ToasterToast\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"]\n      toast: Partial<ToasterToast>\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: \"REMOVE_TOAST\",\n      toastId: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      }\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      }\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      }\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        }\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      }\n  }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action)\n  listeners.forEach((listener) => {\n    listener(memoryState)\n  })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: \"UPDATE_TOAST\",\n      toast: { ...props, id },\n    })\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss()\n      },\n    },\n  })\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  }\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState)\n\n  React.useEffect(() => {\n    listeners.push(setState)\n    return () => {\n      const index = listeners.indexOf(setState)\n      if (index > -1) {\n        listeners.splice(index, 1)\n      }\n    }\n  }, [state])\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n  }\n}\n\nexport { toast, useToast }\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "notification",
+      "toast",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-298.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-298",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/toast.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-298.tsx",
+      "content": "\"use client\"\n\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { CircleCheckIcon, XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Toast,\n  ToastAction,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from \"@/registry/building-blocks/default/ui/toast\"\n\ninterface UseProgressTimerProps {\n  duration: number\n  interval?: number\n  onComplete?: () => void\n}\n\nfunction useProgressTimer({\n  duration,\n  interval = 100,\n  onComplete,\n}: UseProgressTimerProps) {\n  const [progress, setProgress] = useState(duration)\n  const timerRef = useRef(0)\n  const timerState = useRef({\n    startTime: 0,\n    remaining: duration,\n    isPaused: false,\n  })\n\n  const cleanup = useCallback(() => {\n    window.clearInterval(timerRef.current)\n  }, [])\n\n  const reset = useCallback(() => {\n    cleanup()\n    setProgress(duration)\n    timerState.current = {\n      startTime: 0,\n      remaining: duration,\n      isPaused: false,\n    }\n  }, [duration, cleanup])\n\n  const start = useCallback(() => {\n    const state = timerState.current\n    state.startTime = Date.now()\n    state.isPaused = false\n\n    timerRef.current = window.setInterval(() => {\n      const elapsedTime = Date.now() - state.startTime\n      const remaining = Math.max(0, state.remaining - elapsedTime)\n\n      setProgress(remaining)\n\n      if (remaining <= 0) {\n        cleanup()\n        onComplete?.()\n      }\n    }, interval)\n  }, [interval, cleanup, onComplete])\n\n  const pause = useCallback(() => {\n    const state = timerState.current\n    if (!state.isPaused) {\n      cleanup()\n      state.remaining = Math.max(\n        0,\n        state.remaining - (Date.now() - state.startTime)\n      )\n      state.isPaused = true\n    }\n  }, [cleanup])\n\n  const resume = useCallback(() => {\n    const state = timerState.current\n    if (state.isPaused && state.remaining > 0) {\n      start()\n    }\n  }, [start])\n\n  useEffect(() => {\n    return cleanup\n  }, [cleanup])\n\n  return {\n    progress,\n    start,\n    pause,\n    resume,\n    reset,\n  }\n}\n\nexport default function Component() {\n  const [open, setOpen] = useState(false)\n  const toastDuration = 5000\n  const { progress, start, pause, resume, reset } = useProgressTimer({\n    duration: toastDuration,\n    onComplete: () => setOpen(false),\n  })\n\n  const handleOpenChange = useCallback(\n    (isOpen: boolean) => {\n      setOpen(isOpen)\n      if (isOpen) {\n        reset()\n        start()\n      }\n    },\n    [reset, start]\n  )\n\n  const handleButtonClick = useCallback(() => {\n    if (open) {\n      setOpen(false)\n      // Wait for the close animation to finish\n      window.setTimeout(() => {\n        handleOpenChange(true)\n      }, 150)\n    } else {\n      handleOpenChange(true)\n    }\n  }, [open, handleOpenChange])\n\n  return (\n    <ToastProvider swipeDirection=\"left\">\n      <Button variant=\"outline\" onClick={handleButtonClick}>\n        Show toast\n      </Button>\n      <Toast\n        open={open}\n        onOpenChange={handleOpenChange}\n        onPause={pause}\n        onResume={resume}\n      >\n        <div className=\"flex w-full justify-between gap-3\">\n          <CircleCheckIcon\n            className=\"mt-0.5 shrink-0 text-emerald-500\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          <div className=\"flex grow flex-col gap-3\">\n            <div className=\"space-y-1\">\n              <ToastTitle>Invoice paid in full</ToastTitle>\n              <ToastDescription>\n                Funds should settle in the next payout cycle.\n              </ToastDescription>\n            </div>\n            <div>\n              <ToastAction altText=\"View receipt\" asChild>\n                <Button size=\"sm\">View receipt</Button>\n              </ToastAction>\n            </div>\n          </div>\n          <ToastClose asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n              aria-label=\"Close notification\"\n            >\n              <XIcon\n                size={16}\n                className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n                aria-hidden=\"true\"\n              />\n            </Button>\n          </ToastClose>\n        </div>\n        <div className=\"contents\" aria-hidden=\"true\">\n          <div\n            className=\"pointer-events-none absolute bottom-0 left-0 h-1 w-full bg-emerald-500\"\n            style={{\n              width: `${(progress / toastDuration) * 100}%`,\n              transition: \"width 100ms linear\",\n            }}\n          />\n        </div>\n      </Toast>\n      <ToastViewport className=\"sm:right-auto sm:left-0\" />\n    </ToastProvider>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "notification",
+      "toast",
+      "success",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-299.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-299",
+  "type": "registry:component",
+  "dependencies": [
+    "sonner"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-299.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast(\"Deploy finished without errors.\", {\n          description: \"Main branch is now live.\",\n          action: {\n            label: \"View logs\",\n            onClick: () => console.log(\"View logs\"),\n          },\n        })\n      }}\n    >\n      Show sonner\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "notification",
+      "toast",
+      "sonner",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-30.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-30",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-30.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>File input</Label>\n      <Input\n        id={id}\n        className=\"p-0 pe-3 file:me-3 file:border-0 file:border-e\"\n        type=\"file\"\n      />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "file"
+    ]
+  }
+}

package/public/r/comp-300.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-300",
+  "type": "registry:component",
+  "dependencies": [
+    "sonner"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-300.tsx",
+      "content": "\"use client\"\n\nimport { CircleCheckIcon, XIcon } from \"lucide-react\"\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() => {\n        toast.custom((t) => (\n          <div className=\"w-full rounded-md border bg-background px-4 py-3 text-foreground shadow-lg sm:w-[var(--width)]\">\n            <div className=\"flex gap-2\">\n              <div className=\"flex grow gap-3\">\n                <CircleCheckIcon\n                  className=\"mt-0.5 shrink-0 text-emerald-500\"\n                  size={16}\n                  aria-hidden=\"true\"\n                />\n                <div className=\"flex grow justify-between gap-12\">\n                  <p className=\"text-sm\">Release goes live tomorrow at 9:00 AM.</p>\n                  <div className=\"text-sm whitespace-nowrap\">\n                    <button className=\"text-sm font-medium hover:underline\">\n                      Review plan\n                    </button>{\" \"}\n                    <span className=\"mx-1 text-muted-foreground\">·</span>{\" \"}\n                    <button\n                      className=\"text-sm font-medium hover:underline\"\n                      onClick={() => toast.dismiss(t)}\n                    >\n                      Reschedule\n                    </button>\n                  </div>\n                </div>\n              </div>\n              <Button\n                variant=\"ghost\"\n                className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n                onClick={() => toast.dismiss(t)}\n                aria-label=\"Close banner\"\n              >\n                <XIcon\n                  size={16}\n                  className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n                  aria-hidden=\"true\"\n                />\n              </Button>\n            </div>\n          </div>\n        ))\n      }}\n    >\n      Show custom toast\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "notification",
+      "toast",
+      "sonner",
+      "success",
+      "radix"
+    ],
+    "colSpan": 2,
+    "style": 1
+  }
+}

package/public/r/comp-301.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-301",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-301.tsx",
+      "content": "import { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 inset-x-4` to the container element.\n    <div className=\"z-50 rounded-md border bg-background px-4 py-3 shadow-lg\">\n      <div className=\"flex flex-col justify-between gap-3 md:flex-row md:items-center\">\n        <p className=\"text-sm\">\n          We use cookies to personalize dashboards and track anonymized product analytics.\n        </p>\n        <div className=\"flex gap-2 max-md:flex-wrap\">\n          <Button size=\"sm\">Accept all</Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Manage preferences\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "banner",
+      "cookies",
+      "gdpr",
+      "privacy"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-302.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-302",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "registry/default/components/comp-302.tsx",
+      "content": "import { ArrowRightIcon } from \"lucide-react\"\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border border-border/60 bg-muted/80 px-4 py-3 text-foreground shadow-sm\">\n      <p className=\"flex justify-center text-sm\">\n        <a href=\"#\" className=\"group\">\n          <span className=\"me-1 text-base leading-none\">✨</span>\n          Launch customer journey templates for product teams\n          <ArrowRightIcon\n            className=\"ms-2 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "banner"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-303.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-303",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "registry/default/components/comp-303.tsx",
+      "content": "import { EclipseIcon } from \"lucide-react\"\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border border-border/60 bg-muted/80 px-4 py-3 text-foreground shadow-sm\">\n      <p className=\"text-center text-sm\">\n        <EclipseIcon\n          className=\"me-3 -mt-0.5 inline-flex opacity-60\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n        Unlock role-based dashboards with live product analytics{\" \"}\n        <span className=\"text-muted-foreground\">·</span>{\" \"}\n        <a href=\"#\" className=\"font-medium underline hover:no-underline\">\n          Upgrade now\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "banner"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-304.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-304",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "registry/default/components/comp-304.tsx",
+      "content": "import { ArrowRightIcon, Eclipse } from \"lucide-react\"\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border border-border/60 bg-muted/80 px-4 py-3 text-foreground shadow-sm\">\n      <div className=\"flex flex-col justify-between gap-2 md:flex-row\">\n        <div className=\"flex grow gap-3\">\n          <Eclipse\n            className=\"mt-0.5 shrink-0 opacity-60\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          <div className=\"flex grow flex-col justify-between gap-2 md:flex-row md:items-center\">\n            <p className=\"text-sm\">\n              Workspace automation now supports conditional branches and approvals.\n            </p>\n            <a href=\"#\" className=\"group text-sm font-medium whitespace-nowrap\">\n              See what’s new\n              <ArrowRightIcon\n                className=\"ms-1 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\"\n                size={16}\n                aria-hidden=\"true\"\n              />\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "banner"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-305.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-305",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-305.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { ArrowRightIcon, Eclipse, XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [isVisible, setIsVisible] = useState(true)\n\n  if (!isVisible) return null\n\n  return (\n    <div className=\"rounded-md border border-border/60 bg-muted/80 px-4 py-3 text-foreground shadow-sm\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex grow gap-3\">\n          <Eclipse\n            className=\"mt-0.5 shrink-0 opacity-60\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          <div className=\"flex grow flex-col justify-between gap-2 md:flex-row\">\n            <p className=\"text-sm\">\n              Real-time dashboards just shipped—stream events without refreshing.\n            </p>\n            <a href=\"#\" className=\"group text-sm font-medium whitespace-nowrap\">\n              View release notes\n              <ArrowRightIcon\n                className=\"ms-1 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\"\n                size={16}\n                aria-hidden=\"true\"\n              />\n            </a>\n          </div>\n        </div>\n        <Button\n          variant=\"ghost\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          onClick={() => setIsVisible(false)}\n          aria-label=\"Close banner\"\n        >\n          <XIcon\n            size={16}\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            aria-hidden=\"true\"\n          />\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "banner"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-306.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-306",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-306.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { EclipseIcon, XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [isVisible, setIsVisible] = useState(true)\n\n  if (!isVisible) return null\n\n  return (\n    <div className=\"rounded-md border border-border/60 bg-muted/80 px-4 py-3 text-foreground shadow-sm md:py-2\">\n      <div className=\"flex gap-2 md:items-center\">\n        <div className=\"flex grow gap-3 md:items-center\">\n          <EclipseIcon\n            className=\"shrink-0 opacity-60 max-md:mt-0.5\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          <div className=\"flex grow flex-col justify-between gap-3 md:flex-row md:items-center\">\n            <p className=\"text-sm\">\n              Usage-based billing is live. Export detailed invoices anytime.\n            </p>\n            <div className=\"flex gap-2 max-md:flex-wrap\">\n              <Button size=\"sm\" className=\"text-sm\">\n                Download invoices\n              </Button>\n              <Button variant=\"outline\" size=\"sm\" className=\"text-sm\">\n                View docs\n              </Button>\n            </div>\n          </div>\n        </div>\n        <Button\n          variant=\"ghost\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          onClick={() => setIsVisible(false)}\n          aria-label=\"Close banner\"\n        >\n          <XIcon\n            size={16}\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            aria-hidden=\"true\"\n          />\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "banner"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-307.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-307",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-307.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Eclipse, XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [isVisible, setIsVisible] = useState(true)\n\n  if (!isVisible) return null\n\n  return (\n    <div className=\"rounded-md border border-border/60 bg-muted/80 px-4 py-3 text-foreground shadow-sm md:py-2\">\n      <div className=\"flex gap-2 md:items-center\">\n        <div className=\"flex grow gap-3 md:items-center\">\n          <Eclipse\n            className=\"shrink-0 opacity-60 max-md:mt-0.5\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          <div className=\"flex grow flex-col justify-between gap-3 md:flex-row md:items-center\">\n            <p className=\"text-sm\">\n              A new API explorer ships with this release—call endpoints in your browser.\n            </p>\n            <div className=\"flex gap-2 max-md:flex-wrap\">\n              <Button size=\"sm\" className=\"text-sm\">\n                Try it now\n              </Button>\n              <Button variant=\"link\" size=\"sm\" className=\"text-sm\">\n                Read docs\n              </Button>\n            </div>\n          </div>\n        </div>\n        <Button\n          variant=\"ghost\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          onClick={() => setIsVisible(false)}\n          aria-label=\"Close banner\"\n        >\n          <XIcon\n            size={16}\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            aria-hidden=\"true\"\n          />\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "banner"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-308.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-308",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-308.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Eclipse, XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [isVisible, setIsVisible] = useState(true)\n\n  if (!isVisible) return null\n\n  return (\n    <div className=\"rounded-md border border-border/60 bg-muted/80 px-4 py-3 text-foreground shadow-sm md:py-2\">\n      <div className=\"flex gap-2 md:items-center\">\n        <div className=\"flex grow gap-3 md:items-center md:justify-center\">\n          <Eclipse\n            className=\"shrink-0 opacity-60 max-md:mt-0.5\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          <div className=\"flex flex-col justify-between gap-3 md:flex-row md:items-center\">\n            <p className=\"text-sm\">\n              AI summaries now ship inside the insights tab—turn them on for your team.\n            </p>\n            <div className=\"flex gap-2 max-md:flex-wrap\">\n              <Button size=\"sm\" className=\"rounded-full\">\n                Enable now\n              </Button>\n            </div>\n          </div>\n        </div>\n        <Button\n          variant=\"ghost\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          onClick={() => setIsVisible(false)}\n          aria-label=\"Close banner\"\n        >\n          <XIcon\n            size={16}\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            aria-hidden=\"true\"\n          />\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "banner"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-309.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-309",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-309.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { RocketIcon, XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [isVisible, setIsVisible] = useState(true)\n\n  if (!isVisible) return null\n\n  return (\n    <div className=\"rounded-md border border-border/60 bg-muted/80 px-4 py-3 text-foreground shadow-sm\">\n      <div className=\"flex gap-2 md:items-center\">\n        <div className=\"flex grow gap-3 md:items-center\">\n          <div\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/15 max-md:mt-0.5\"\n            aria-hidden=\"true\"\n          >\n            <RocketIcon className=\"opacity-80\" size={16} />\n          </div>\n          <div className=\"flex grow flex-col justify-between gap-3 md:flex-row md:items-center\">\n            <div className=\"space-y-0.5\">\n              <p className=\"text-sm font-medium\">\n                Launch guided onboarding checklists\n              </p>\n              <p className=\"text-sm text-muted-foreground\">\n                Activate the templates and share feedback with the product team.\n              </p>\n            </div>\n            <div className=\"flex gap-2 max-md:flex-wrap\">\n              <Button size=\"sm\" className=\"text-sm\">\n                Enable now\n              </Button>\n            </div>\n          </div>\n        </div>\n        <Button\n          variant=\"ghost\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          onClick={() => setIsVisible(false)}\n          aria-label=\"Close banner\"\n        >\n          <XIcon\n            size={16}\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            aria-hidden=\"true\"\n          />\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "banner"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-31.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-31",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-31.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"group relative\">\n      <label\n        htmlFor={id}\n        className=\"absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground group-has-disabled:opacity-50\"\n      >\n        Input with overlapping label\n      </label>\n      <Input id={id} className=\"h-10\" placeholder=\"Email\" type=\"email\" />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label"
+    ]
+  }
+}

package/public/r/comp-310.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-310",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-310.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { TicketPercent, XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\n// Define the sale end date - eg: new Date('2024-12-31T23:59:59');\nconst saleEndDate = new Date(\n  Date.now() + 9 * 60 * 60 * 1000 + 45 * 60 * 1000 + 24 * 1000\n) // Setting 9h 45m 24s from now for demo purposes\n\ninterface TimeLeft {\n  days: number\n  hours: number\n  minutes: number\n  seconds: number\n  isExpired: boolean\n}\n\nexport default function Component() {\n  const [isVisible, setIsVisible] = useState(true)\n  const [timeLeft, setTimeLeft] = useState<TimeLeft>({\n    days: 0,\n    hours: 0,\n    minutes: 0,\n    seconds: 0,\n    isExpired: false,\n  })\n\n  useEffect(() => {\n    const calculateTimeLeft = () => {\n      const now = new Date()\n      const difference = saleEndDate.getTime() - now.getTime()\n\n      if (difference <= 0) {\n        setTimeLeft({\n          days: 0,\n          hours: 0,\n          minutes: 0,\n          seconds: 0,\n          isExpired: true,\n        })\n        return\n      }\n\n      const days = Math.floor(difference / (1000 * 60 * 60 * 24))\n      const hours = Math.floor(\n        (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)\n      )\n      const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60))\n      const seconds = Math.floor((difference % (1000 * 60)) / 1000)\n\n      setTimeLeft({\n        days,\n        hours,\n        minutes,\n        seconds,\n        isExpired: false,\n      })\n    }\n\n    // Calculate immediately and then every second\n    calculateTimeLeft()\n    const timer = setInterval(calculateTimeLeft, 1000)\n\n    return () => clearInterval(timer)\n  }, [])\n\n  if (!isVisible || timeLeft.isExpired) return null\n\n  return (\n    <div className=\"rounded-md border border-border/60 bg-muted/80 px-4 py-3 text-foreground shadow-sm\">\n      <div className=\"flex gap-2 md:items-center\">\n        <div className=\"flex grow gap-3 md:items-center\">\n          <div\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/15 max-md:mt-0.5\"\n            aria-hidden=\"true\"\n          >\n            <TicketPercent className=\"opacity-80\" size={16} />\n          </div>\n          <div className=\"flex grow flex-col justify-between gap-3 md:flex-row md:items-center\">\n            <div className=\"space-y-0.5\">\n              <p className=\"text-sm font-medium\">Launch Week ends soon</p>\n              <p className=\"text-sm text-muted-foreground\">\n                Save 30% on yearly plans for the next 24 hours—lock it in while it lasts.\n              </p>\n            </div>\n            <div className=\"flex gap-3 max-md:flex-wrap\">\n              <div className=\"flex items-center divide-x divide-primary-foreground rounded-md bg-primary/15 text-sm tabular-nums\">\n                {timeLeft.days > 0 && (\n                  <span className=\"flex h-8 items-center justify-center p-2\">\n                    {timeLeft.days}\n                    <span className=\"text-muted-foreground\">d</span>\n                  </span>\n                )}\n                <span className=\"flex h-8 items-center justify-center p-2\">\n                  {timeLeft.hours.toString().padStart(2, \"0\")}\n                  <span className=\"text-muted-foreground\">h</span>\n                </span>\n                <span className=\"flex h-8 items-center justify-center p-2\">\n                  {timeLeft.minutes.toString().padStart(2, \"0\")}\n                  <span className=\"text-muted-foreground\">m</span>\n                </span>\n                <span className=\"flex h-8 items-center justify-center p-2\">\n                  {timeLeft.seconds.toString().padStart(2, \"0\")}\n                  <span className=\"text-muted-foreground\">s</span>\n                </span>\n              </div>\n              <Button size=\"sm\" className=\"text-sm\">\n                Buy now\n              </Button>\n            </div>\n          </div>\n        </div>\n        <Button\n          variant=\"ghost\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          onClick={() => setIsVisible(false)}\n          aria-label=\"Close banner\"\n        >\n          <XIcon\n            size={16}\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            aria-hidden=\"true\"\n          />\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "banner",
+      "countdown",
+      "sale"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-311.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-311",
+  "type": "registry:component",
+  "files": [
+    {
+      "path": "registry/default/components/comp-311.tsx",
+      "content": "export default function Component() {\n  return (\n    <div className=\"border-b px-4 py-3\">\n      <p className=\"text-center text-sm\">\n        <span className=\"mr-1 text-base leading-none\">📫</span> Subscribe to our\n        newsletter and get 10% off your first order!{\" \"}\n        <span className=\"mx-1 text-muted-foreground\">·</span>{\" \"}\n        <a href=\"#\" className=\"font-medium underline hover:no-underline\">\n          Subscribe\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "banner",
+      "newsletter",
+      "subscribe"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-312.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-312",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-312.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { DownloadIcon, LoaderCircleIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [isDownloading, setIsDownloading] = useState(false)\n\n  const handleDownload = () => {\n    setIsDownloading(true)\n    // Simulate download\n    setTimeout(() => {\n      setIsDownloading(false)\n    }, 2000)\n  }\n\n  return (\n    <div className=\"bg-muted px-4 py-3 md:py-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-2\">\n        <p className=\"text-sm\">\n          <span className=\"font-medium\">v2.1.0</span>\n          <span className=\"mx-2 text-muted-foreground\">•</span>\n          New features and improvements available\n        </p>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          disabled={isDownloading}\n          onClick={handleDownload}\n          className=\"min-w-24\"\n        >\n          {isDownloading ? (\n            <>\n              <LoaderCircleIcon\n                className=\"-ms-0.5 me-2 animate-spin\"\n                size={16}\n                aria-hidden=\"true\"\n              />\n              Updating...\n            </>\n          ) : (\n            <>\n              <DownloadIcon size={16} className=\"-ms-0.5\" aria-hidden=\"true\" />\n              Update now\n            </>\n          )}\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "banner"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-313.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-313",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/alert-dialog.json",
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-313.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/building-blocks/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function AlertComponent() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Alert dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            Take a moment to review the details provided to ensure you\n            understand the implications.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Okay</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "alert",
+      "alert dialog",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-314.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-314",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/alert-dialog.json",
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-314.tsx",
+      "content": "import { CircleAlertIcon } from \"lucide-react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/building-blocks/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function AlertComponent() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Alert dialog with icon</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\n          <div\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n            aria-hidden=\"true\"\n          >\n            <CircleAlertIcon className=\"opacity-80\" size={16} />\n          </div>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Are you sure you want to delete your account? All your data will\n              be removed.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n        </div>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Confirm</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "alert",
+      "alert dialog",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-315.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-315",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-315.tsx",
+      "content": "import { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Scrollable (native scrollbar)</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:hidden\">\n        <div className=\"overflow-y-auto\">\n          <DialogHeader className=\"contents space-y-0 text-left\">\n            <DialogTitle className=\"px-6 pt-6\">\n              Frequently Asked Questions (FAQ)\n            </DialogTitle>\n            <DialogDescription asChild>\n              <div className=\"p-6\">\n                <div className=\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\">\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Account Management</strong>\n                    </p>\n                    <p>\n                      Navigate to the registration page, provide required\n                      information, and verify your email address. You can sign\n                      up using your email or through social media platforms.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Password Reset Process</strong>\n                    </p>\n                    <p>\n                      Users can reset their password through the account\n                      settings page. Click &quot;Forgot Password&quot; and\n                      follow the email verification steps to regain account\n                      access quickly and securely.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Service Pricing Tiers</strong>\n                    </p>\n                    <p>\n                      We offer three primary subscription levels designed to\n                      meet diverse user needs: Basic (free with limited\n                      features), Professional (monthly fee with comprehensive\n                      access), and Enterprise (custom pricing with full platform\n                      capabilities).\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Technical Support Channels</strong>\n                    </p>\n                    <p>\n                      Customer support is accessible through multiple\n                      communication methods including email support, live chat\n                      during business hours, an integrated support ticket\n                      system, and phone support specifically for\n                      enterprise-level customers.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Data Protection Strategies</strong>\n                    </p>\n                    <p>\n                      Our platform implements rigorous security measures\n                      including 256-bit SSL encryption, regular comprehensive\n                      security audits, strict data access controls, and\n                      compliance with international privacy protection\n                      standards.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Platform Compatibility</strong>\n                    </p>\n                    <p>\n                      The service supports multiple device and operating system\n                      environments, including web browsers like Chrome and\n                      Firefox, mobile applications for iOS and Android, and\n                      desktop applications compatible with Windows and macOS.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Subscription Management</strong>\n                    </p>\n                    <p>\n                      Subscriptions can be cancelled at any time through account\n                      settings, with pro-rated refunds available within 30 days\n                      of payment. Both monthly and annual billing options are\n                      provided, with special discounts offered for annual\n                      commitments.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Payment Method Options</strong>\n                    </p>\n                    <p>\n                      We accept a wide range of payment methods including major\n                      credit cards such as Visa, MasterCard, and American\n                      Express, digital payment platforms like PayPal, and direct\n                      bank transfers. Regional payment options may also be\n                      available depending on user location.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Customer Support</strong>\n                    </p>\n                    <p>\n                      Our dedicated customer support team is available 24/7,\n                      providing quick and efficient assistance to address any\n                      inquiries or issues you may have.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Privacy Policy</strong>\n                    </p>\n                    <p>\n                      Our privacy policy outlines how we collect, use, and\n                      protect your personal data, ensuring your privacy is\n                      protected at all times.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter className=\"px-6 pb-6 sm:justify-start\">\n            <DialogClose asChild>\n              <Button type=\"button\" variant=\"outline\">\n                Cancel\n              </Button>\n            </DialogClose>\n            <DialogClose asChild>\n              <Button type=\"button\">Okay</Button>\n            </DialogClose>\n          </DialogFooter>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "radix"
+    ],
+    "style": 1
+  }
+}