love-ui 1.2.12 → 1.2.14

package/public/r/comp-12.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-12",
+  "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-12.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}>Input with end inline add-on</Label>\n      <div className=\"relative\">\n        <Input\n          id={id}\n          className=\"peer pe-12\"\n          placeholder=\"google\"\n          type=\"text\"\n        />\n        <span className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-50\">\n          .com\n        </span>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label"
+    ]
+  }
+}

package/public/r/comp-120.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-120",
+  "type": "registry:component",
+  "dependencies": [
+    "@remixicon/react"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-120.tsx",
+      "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Button\n        className=\"flex-1\"\n        variant=\"outline\"\n        aria-label=\"Login with Google\"\n        size=\"icon\"\n      >\n        <RiGoogleFill\n          className=\"text-[#DB4437] dark:text-primary\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n      </Button>\n      <Button\n        className=\"flex-1\"\n        variant=\"outline\"\n        aria-label=\"Login with Facebook\"\n        size=\"icon\"\n      >\n        <RiFacebookFill\n          className=\"text-[#1877f2] dark:text-primary\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n      </Button>\n      <Button\n        className=\"flex-1\"\n        variant=\"outline\"\n        aria-label=\"Login with X\"\n        size=\"icon\"\n      >\n        <RiTwitterXFill\n          className=\"text-[#14171a] dark:text-primary\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n      </Button>\n      <Button\n        className=\"flex-1\"\n        variant=\"outline\"\n        aria-label=\"Login with GitHub\"\n        size=\"icon\"\n      >\n        <RiGithubFill\n          className=\"text-black dark:text-primary\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n      </Button>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "social",
+      "login",
+      "authentication"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-121.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-121",
+  "type": "registry:component",
+  "dependencies": [
+    "@remixicon/react"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-121.tsx",
+      "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Button variant=\"outline\">\n        <RiGoogleFill\n          className=\"me-1 text-[#DB4437] dark:text-white/60\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n        Login with Google\n      </Button>\n      <Button variant=\"outline\">\n        <RiTwitterXFill\n          className=\"me-1 text-[#14171a] dark:text-white/60\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n        Login with X\n      </Button>\n      <Button variant=\"outline\">\n        <RiFacebookFill\n          className=\"me-1 text-[#1877f2] dark:text-white/60\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n        Login with Facebook\n      </Button>\n      <Button variant=\"outline\">\n        <RiGithubFill\n          className=\"me-1 text-[#333333] dark:text-white/60\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n        Login with GitHub\n      </Button>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "social",
+      "login",
+      "authentication"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-122.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-122",
+  "type": "registry:component",
+  "dependencies": [
+    "@remixicon/react"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-122.tsx",
+      "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Button className=\"bg-[#DB4437] text-white after:flex-1 hover:bg-[#DB4437]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiGoogleFill className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        </span>\n        Login with Google\n      </Button>\n      <Button className=\"bg-[#14171a] text-white after:flex-1 hover:bg-[#14171a]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiTwitterXFill className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        </span>\n        Login with X\n      </Button>\n      <Button className=\"bg-[#1877f2] text-white after:flex-1 hover:bg-[#1877f2]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiFacebookFill className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        </span>\n        Login with Facebook\n      </Button>\n      <Button className=\"bg-[#333333] text-white after:flex-1 hover:bg-[#333333]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiGithubFill className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        </span>\n        Login with GitHub\n      </Button>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "social",
+      "login",
+      "authentication"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-123.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-123",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-123.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [isExpanded, setIsExpanded] = useState<boolean>(false)\n\n  const toggleExpand = () => {\n    setIsExpanded((prevState) => !prevState)\n  }\n\n  return (\n    <Button\n      className=\"gap-1\"\n      variant=\"ghost\"\n      onClick={toggleExpand}\n      aria-expanded={isExpanded}\n      aria-controls=\"expandable-content\" // Use this ID on the element that this button controls\n    >\n      {isExpanded ? \"Show less\" : \"Show more\"}\n      {isExpanded ? (\n        <ChevronUpIcon className=\"-me-1\" size={16} aria-hidden=\"true\" />\n      ) : (\n        <ChevronDownIcon className=\"-me-1\" size={16} aria-hidden=\"true\" />\n      )}\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "collapsible"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-124.json

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

package/public/r/comp-125.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-125",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-125.tsx",
+      "content": "\"use client\"\n\nimport { CircleUserRoundIcon } from \"lucide-react\"\n\nimport { useFileUpload } from \"@/registry/building-blocks/default/hooks/use-file-upload\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [{ files }, { removeFile, openFileDialog, getInputProps }] =\n    useFileUpload({\n      accept: \"image/*\",\n    })\n\n  const previewUrl = files[0]?.preview || null\n  const fileName = files[0]?.file.name || null\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"inline-flex items-center gap-2 align-top\">\n        <div\n          className=\"relative flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-md border border-input\"\n          aria-label={\n            previewUrl ? \"Preview of uploaded image\" : \"Default user avatar\"\n          }\n        >\n          {previewUrl ? (\n            <img\n              className=\"size-full object-cover\"\n              src={previewUrl}\n              alt=\"Preview of uploaded image\"\n              width={32}\n              height={32}\n            />\n          ) : (\n            <div aria-hidden=\"true\">\n              <CircleUserRoundIcon className=\"opacity-60\" size={16} />\n            </div>\n          )}\n        </div>\n        <div className=\"relative inline-block\">\n          <Button onClick={openFileDialog} aria-haspopup=\"dialog\">\n            {fileName ? \"Change image\" : \"Upload image\"}\n          </Button>\n          <input\n            {...getInputProps()}\n            className=\"sr-only\"\n            aria-label=\"Upload image file\"\n            tabIndex={-1}\n          />\n        </div>\n      </div>\n      {fileName && (\n        <div className=\"inline-flex gap-2 text-xs\">\n          <p className=\"truncate text-muted-foreground\" aria-live=\"polite\">\n            {fileName}\n          </p>{\" \"}\n          <button\n            onClick={() => removeFile(files[0]?.id)}\n            className=\"font-medium text-destructive hover:underline\"\n            aria-label={`Remove ${fileName}`}\n          >\n            Remove\n          </button>\n        </div>\n      )}\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Basic image uploader ∙{\" \"}\n        <a\n          href=\"https://github.com/loveui/blob/main/apps/origin/docs/use-file-upload.md\"\n          className=\"underline hover:text-foreground\"\n        >\n          Docs\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-file-upload.ts",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n  type InputHTMLAttributes,\n} from \"react\"\n\nexport type FileMetadata = {\n  name: string\n  size: number\n  type: string\n  url: string\n  id: string\n}\n\nexport type FileWithPreview = {\n  file: File | FileMetadata\n  id: string\n  preview?: string\n}\n\nexport type FileUploadOptions = {\n  maxFiles?: number // Only used when multiple is true, defaults to Infinity\n  maxSize?: number // in bytes\n  accept?: string\n  multiple?: boolean // Defaults to false\n  initialFiles?: FileMetadata[]\n  onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added\n}\n\nexport type FileUploadState = {\n  files: FileWithPreview[]\n  isDragging: boolean\n  errors: string[]\n}\n\nexport type FileUploadActions = {\n  addFiles: (files: FileList | File[]) => void\n  removeFile: (id: string) => void\n  clearFiles: () => void\n  clearErrors: () => void\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void\n  handleDragOver: (e: DragEvent<HTMLElement>) => void\n  handleDrop: (e: DragEvent<HTMLElement>) => void\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void\n  openFileDialog: () => void\n  getInputProps: (\n    props?: InputHTMLAttributes<HTMLInputElement>\n  ) => InputHTMLAttributes<HTMLInputElement> & {\n    // Use `any` here to avoid cross-React ref type conflicts across packages\n    ref: any\n  }\n}\n\nexport const useFileUpload = (\n  options: FileUploadOptions = {}\n): [FileUploadState, FileUploadActions] => {\n  const {\n    maxFiles = Infinity,\n    maxSize = Infinity,\n    accept = \"*\",\n    multiple = false,\n    initialFiles = [],\n    onFilesChange,\n    onFilesAdded,\n  } = options\n\n  const [state, setState] = useState<FileUploadState>({\n    files: initialFiles.map((file) => ({\n      file,\n      id: file.id,\n      preview: file.url,\n    })),\n    isDragging: false,\n    errors: [],\n  })\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const validateFile = useCallback(\n    (file: File | FileMetadata): string | null => {\n      if (file instanceof File) {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      } else {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      }\n\n      if (accept !== \"*\") {\n        const acceptedTypes = accept.split(\",\").map((type) => type.trim())\n        const fileType = file instanceof File ? file.type || \"\" : file.type\n        const fileExtension = `.${file instanceof File ? file.name.split(\".\").pop() : file.name.split(\".\").pop()}`\n\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.startsWith(\".\")) {\n            return fileExtension.toLowerCase() === type.toLowerCase()\n          }\n          if (type.endsWith(\"/*\")) {\n            const baseType = type.split(\"/\")[0]\n            return fileType.startsWith(`${baseType}/`)\n          }\n          return fileType === type\n        })\n\n        if (!isAccepted) {\n          return `File \"${file instanceof File ? file.name : file.name}\" is not an accepted file type.`\n        }\n      }\n\n      return null\n    },\n    [accept, maxSize]\n  )\n\n  const createPreview = useCallback(\n    (file: File | FileMetadata): string | undefined => {\n      if (file instanceof File) {\n        return URL.createObjectURL(file)\n      }\n      return file.url\n    },\n    []\n  )\n\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\n    if (file instanceof File) {\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`\n    }\n    return file.id\n  }, [])\n\n  const clearFiles = useCallback(() => {\n    setState((prev) => {\n      // Clean up object URLs\n      prev.files.forEach((file) => {\n        if (\n          file.preview &&\n          file.file instanceof File &&\n          file.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n\n      const newState = {\n        ...prev,\n        files: [],\n        errors: [],\n      }\n\n      onFilesChange?.(newState.files)\n      return newState\n    })\n  }, [onFilesChange])\n\n  const addFiles = useCallback(\n    (newFiles: FileList | File[]) => {\n      if (!newFiles || newFiles.length === 0) return\n\n      const newFilesArray = Array.from(newFiles)\n      const errors: string[] = []\n\n      // Clear existing errors when new files are uploaded\n      setState((prev) => ({ ...prev, errors: [] }))\n\n      // In single file mode, clear existing files first\n      if (!multiple) {\n        clearFiles()\n      }\n\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\n      if (\n        multiple &&\n        maxFiles !== Infinity &&\n        state.files.length + newFilesArray.length > maxFiles\n      ) {\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`)\n        setState((prev) => ({ ...prev, errors }))\n        return\n      }\n\n      const validFiles: FileWithPreview[] = []\n\n      newFilesArray.forEach((file) => {\n        // Only check for duplicates if multiple files are allowed\n        if (multiple) {\n          const isDuplicate = state.files.some(\n            (existingFile) =>\n              existingFile.file.name === file.name &&\n              existingFile.file.size === file.size\n          )\n\n          // Skip duplicate files silently\n          if (isDuplicate) {\n            return\n          }\n        }\n\n        // Check file size\n        if (file.size > maxSize) {\n          errors.push(\n            multiple\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`\n          )\n          return\n        }\n\n        const error = validateFile(file)\n        if (error) {\n          errors.push(error)\n        } else {\n          validFiles.push({\n            file,\n            id: generateUniqueId(file),\n            preview: createPreview(file),\n          })\n        }\n      })\n\n      // Only update state if we have valid files to add\n      if (validFiles.length > 0) {\n        // Call the onFilesAdded callback with the newly added valid files\n        onFilesAdded?.(validFiles)\n\n        setState((prev) => {\n          const newFiles = !multiple\n            ? validFiles\n            : [...prev.files, ...validFiles]\n          onFilesChange?.(newFiles)\n          return {\n            ...prev,\n            files: newFiles,\n            errors,\n          }\n        })\n      } else if (errors.length > 0) {\n        setState((prev) => ({\n          ...prev,\n          errors,\n        }))\n      }\n\n      // Reset input value after handling files\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n    },\n    [\n      state.files,\n      maxFiles,\n      multiple,\n      maxSize,\n      validateFile,\n      createPreview,\n      generateUniqueId,\n      clearFiles,\n      onFilesChange,\n      onFilesAdded,\n    ]\n  )\n\n  const removeFile = useCallback(\n    (id: string) => {\n      setState((prev) => {\n        const fileToRemove = prev.files.find((file) => file.id === id)\n        if (\n          fileToRemove &&\n          fileToRemove.preview &&\n          fileToRemove.file instanceof File &&\n          fileToRemove.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(fileToRemove.preview)\n        }\n\n        const newFiles = prev.files.filter((file) => file.id !== id)\n        onFilesChange?.(newFiles)\n\n        return {\n          ...prev,\n          files: newFiles,\n          errors: [],\n        }\n      })\n    },\n    [onFilesChange]\n  )\n\n  const clearErrors = useCallback(() => {\n    setState((prev) => ({\n      ...prev,\n      errors: [],\n    }))\n  }, [])\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setState((prev) => ({ ...prev, isDragging: true }))\n  }, [])\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\n      return\n    }\n\n    setState((prev) => ({ ...prev, isDragging: false }))\n  }, [])\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLElement>) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setState((prev) => ({ ...prev, isDragging: false }))\n\n      // Don't process files if the input is disabled\n      if (inputRef.current?.disabled) {\n        return\n      }\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        // In single file mode, only use the first file\n        if (!multiple) {\n          const file = e.dataTransfer.files[0]\n          addFiles([file])\n        } else {\n          addFiles(e.dataTransfer.files)\n        }\n      }\n    },\n    [addFiles, multiple]\n  )\n\n  const handleFileChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        addFiles(e.target.files)\n      }\n    },\n    [addFiles]\n  )\n\n  const openFileDialog = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [])\n\n  const getInputProps = useCallback(\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\n      return {\n        ...props,\n        type: \"file\" as const,\n        onChange: handleFileChange,\n        accept: props.accept || accept,\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\n        ref: inputRef as any,\n      }\n    },\n    [accept, multiple, handleFileChange]\n  )\n\n  return [\n    state,\n    {\n      addFiles,\n      removeFile,\n      clearFiles,\n      clearErrors,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      handleFileChange,\n      openFileDialog,\n      getInputProps,\n    },\n  ]\n}\n\n// Helper function to format bytes to human-readable format\nexport const formatBytes = (bytes: number, decimals = 2): string => {\n  if (bytes === 0) return \"0 Bytes\"\n\n  const k = 1024\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"]\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k))\n\n  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i]\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "upload",
+      "user",
+      "avatar",
+      "profile",
+      "image"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-126.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-126",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-126.tsx",
+      "content": "\"use client\"\n\nimport { CircleUserRoundIcon, XIcon } from \"lucide-react\"\n\nimport { useFileUpload } from \"@/registry/building-blocks/default/hooks/use-file-upload\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [{ files }, { removeFile, openFileDialog, getInputProps }] =\n    useFileUpload({\n      accept: \"image/*\",\n    })\n\n  const previewUrl = files[0]?.preview || null\n  const fileName = files[0]?.file.name || null\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"relative inline-flex\">\n        <Button\n          variant=\"outline\"\n          className=\"relative size-16 overflow-hidden p-0 shadow-none\"\n          onClick={openFileDialog}\n          aria-label={previewUrl ? \"Change image\" : \"Upload image\"}\n        >\n          {previewUrl ? (\n            <img\n              className=\"size-full object-cover\"\n              src={previewUrl}\n              alt=\"Preview of uploaded image\"\n              width={64}\n              height={64}\n              style={{ objectFit: \"cover\" }}\n            />\n          ) : (\n            <div aria-hidden=\"true\">\n              <CircleUserRoundIcon className=\"size-4 opacity-60\" />\n            </div>\n          )}\n        </Button>\n        {previewUrl && (\n          <Button\n            onClick={() => removeFile(files[0]?.id)}\n            size=\"icon\"\n            className=\"absolute -top-2 -right-2 size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\"\n            aria-label=\"Remove image\"\n          >\n            <XIcon className=\"size-3.5\" />\n          </Button>\n        )}\n        <input\n          {...getInputProps()}\n          className=\"sr-only\"\n          aria-label=\"Upload image file\"\n          tabIndex={-1}\n        />\n      </div>\n      {fileName && <p className=\"text-xs text-muted-foreground\">{fileName}</p>}\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Avatar upload button\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-file-upload.ts",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n  type InputHTMLAttributes,\n} from \"react\"\n\nexport type FileMetadata = {\n  name: string\n  size: number\n  type: string\n  url: string\n  id: string\n}\n\nexport type FileWithPreview = {\n  file: File | FileMetadata\n  id: string\n  preview?: string\n}\n\nexport type FileUploadOptions = {\n  maxFiles?: number // Only used when multiple is true, defaults to Infinity\n  maxSize?: number // in bytes\n  accept?: string\n  multiple?: boolean // Defaults to false\n  initialFiles?: FileMetadata[]\n  onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added\n}\n\nexport type FileUploadState = {\n  files: FileWithPreview[]\n  isDragging: boolean\n  errors: string[]\n}\n\nexport type FileUploadActions = {\n  addFiles: (files: FileList | File[]) => void\n  removeFile: (id: string) => void\n  clearFiles: () => void\n  clearErrors: () => void\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void\n  handleDragOver: (e: DragEvent<HTMLElement>) => void\n  handleDrop: (e: DragEvent<HTMLElement>) => void\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void\n  openFileDialog: () => void\n  getInputProps: (\n    props?: InputHTMLAttributes<HTMLInputElement>\n  ) => InputHTMLAttributes<HTMLInputElement> & {\n    // Use `any` here to avoid cross-React ref type conflicts across packages\n    ref: any\n  }\n}\n\nexport const useFileUpload = (\n  options: FileUploadOptions = {}\n): [FileUploadState, FileUploadActions] => {\n  const {\n    maxFiles = Infinity,\n    maxSize = Infinity,\n    accept = \"*\",\n    multiple = false,\n    initialFiles = [],\n    onFilesChange,\n    onFilesAdded,\n  } = options\n\n  const [state, setState] = useState<FileUploadState>({\n    files: initialFiles.map((file) => ({\n      file,\n      id: file.id,\n      preview: file.url,\n    })),\n    isDragging: false,\n    errors: [],\n  })\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const validateFile = useCallback(\n    (file: File | FileMetadata): string | null => {\n      if (file instanceof File) {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      } else {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      }\n\n      if (accept !== \"*\") {\n        const acceptedTypes = accept.split(\",\").map((type) => type.trim())\n        const fileType = file instanceof File ? file.type || \"\" : file.type\n        const fileExtension = `.${file instanceof File ? file.name.split(\".\").pop() : file.name.split(\".\").pop()}`\n\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.startsWith(\".\")) {\n            return fileExtension.toLowerCase() === type.toLowerCase()\n          }\n          if (type.endsWith(\"/*\")) {\n            const baseType = type.split(\"/\")[0]\n            return fileType.startsWith(`${baseType}/`)\n          }\n          return fileType === type\n        })\n\n        if (!isAccepted) {\n          return `File \"${file instanceof File ? file.name : file.name}\" is not an accepted file type.`\n        }\n      }\n\n      return null\n    },\n    [accept, maxSize]\n  )\n\n  const createPreview = useCallback(\n    (file: File | FileMetadata): string | undefined => {\n      if (file instanceof File) {\n        return URL.createObjectURL(file)\n      }\n      return file.url\n    },\n    []\n  )\n\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\n    if (file instanceof File) {\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`\n    }\n    return file.id\n  }, [])\n\n  const clearFiles = useCallback(() => {\n    setState((prev) => {\n      // Clean up object URLs\n      prev.files.forEach((file) => {\n        if (\n          file.preview &&\n          file.file instanceof File &&\n          file.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n\n      const newState = {\n        ...prev,\n        files: [],\n        errors: [],\n      }\n\n      onFilesChange?.(newState.files)\n      return newState\n    })\n  }, [onFilesChange])\n\n  const addFiles = useCallback(\n    (newFiles: FileList | File[]) => {\n      if (!newFiles || newFiles.length === 0) return\n\n      const newFilesArray = Array.from(newFiles)\n      const errors: string[] = []\n\n      // Clear existing errors when new files are uploaded\n      setState((prev) => ({ ...prev, errors: [] }))\n\n      // In single file mode, clear existing files first\n      if (!multiple) {\n        clearFiles()\n      }\n\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\n      if (\n        multiple &&\n        maxFiles !== Infinity &&\n        state.files.length + newFilesArray.length > maxFiles\n      ) {\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`)\n        setState((prev) => ({ ...prev, errors }))\n        return\n      }\n\n      const validFiles: FileWithPreview[] = []\n\n      newFilesArray.forEach((file) => {\n        // Only check for duplicates if multiple files are allowed\n        if (multiple) {\n          const isDuplicate = state.files.some(\n            (existingFile) =>\n              existingFile.file.name === file.name &&\n              existingFile.file.size === file.size\n          )\n\n          // Skip duplicate files silently\n          if (isDuplicate) {\n            return\n          }\n        }\n\n        // Check file size\n        if (file.size > maxSize) {\n          errors.push(\n            multiple\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`\n          )\n          return\n        }\n\n        const error = validateFile(file)\n        if (error) {\n          errors.push(error)\n        } else {\n          validFiles.push({\n            file,\n            id: generateUniqueId(file),\n            preview: createPreview(file),\n          })\n        }\n      })\n\n      // Only update state if we have valid files to add\n      if (validFiles.length > 0) {\n        // Call the onFilesAdded callback with the newly added valid files\n        onFilesAdded?.(validFiles)\n\n        setState((prev) => {\n          const newFiles = !multiple\n            ? validFiles\n            : [...prev.files, ...validFiles]\n          onFilesChange?.(newFiles)\n          return {\n            ...prev,\n            files: newFiles,\n            errors,\n          }\n        })\n      } else if (errors.length > 0) {\n        setState((prev) => ({\n          ...prev,\n          errors,\n        }))\n      }\n\n      // Reset input value after handling files\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n    },\n    [\n      state.files,\n      maxFiles,\n      multiple,\n      maxSize,\n      validateFile,\n      createPreview,\n      generateUniqueId,\n      clearFiles,\n      onFilesChange,\n      onFilesAdded,\n    ]\n  )\n\n  const removeFile = useCallback(\n    (id: string) => {\n      setState((prev) => {\n        const fileToRemove = prev.files.find((file) => file.id === id)\n        if (\n          fileToRemove &&\n          fileToRemove.preview &&\n          fileToRemove.file instanceof File &&\n          fileToRemove.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(fileToRemove.preview)\n        }\n\n        const newFiles = prev.files.filter((file) => file.id !== id)\n        onFilesChange?.(newFiles)\n\n        return {\n          ...prev,\n          files: newFiles,\n          errors: [],\n        }\n      })\n    },\n    [onFilesChange]\n  )\n\n  const clearErrors = useCallback(() => {\n    setState((prev) => ({\n      ...prev,\n      errors: [],\n    }))\n  }, [])\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setState((prev) => ({ ...prev, isDragging: true }))\n  }, [])\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\n      return\n    }\n\n    setState((prev) => ({ ...prev, isDragging: false }))\n  }, [])\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLElement>) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setState((prev) => ({ ...prev, isDragging: false }))\n\n      // Don't process files if the input is disabled\n      if (inputRef.current?.disabled) {\n        return\n      }\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        // In single file mode, only use the first file\n        if (!multiple) {\n          const file = e.dataTransfer.files[0]\n          addFiles([file])\n        } else {\n          addFiles(e.dataTransfer.files)\n        }\n      }\n    },\n    [addFiles, multiple]\n  )\n\n  const handleFileChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        addFiles(e.target.files)\n      }\n    },\n    [addFiles]\n  )\n\n  const openFileDialog = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [])\n\n  const getInputProps = useCallback(\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\n      return {\n        ...props,\n        type: \"file\" as const,\n        onChange: handleFileChange,\n        accept: props.accept || accept,\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\n        ref: inputRef as any,\n      }\n    },\n    [accept, multiple, handleFileChange]\n  )\n\n  return [\n    state,\n    {\n      addFiles,\n      removeFile,\n      clearFiles,\n      clearErrors,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      handleFileChange,\n      openFileDialog,\n      getInputProps,\n    },\n  ]\n}\n\n// Helper function to format bytes to human-readable format\nexport const formatBytes = (bytes: number, decimals = 2): string => {\n  if (bytes === 0) return \"0 Bytes\"\n\n  const k = 1024\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"]\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k))\n\n  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i]\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "upload",
+      "user",
+      "avatar",
+      "profile",
+      "image"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-127.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-127",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-127.tsx",
+      "content": "import {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <div className=\"inline-grid w-fit grid-cols-3 gap-1\">\n      <Button\n        className=\"col-start-2\"\n        variant=\"outline\"\n        size=\"icon\"\n        aria-label=\"Pan camera up\"\n      >\n        <ChevronUpIcon size={16} aria-hidden=\"true\" />\n      </Button>\n      <Button\n        className=\"col-start-1\"\n        variant=\"outline\"\n        size=\"icon\"\n        aria-label=\"Pan camera left\"\n      >\n        <ChevronLeftIcon size={16} aria-hidden=\"true\" />\n      </Button>\n      <div className=\"flex items-center justify-center\" aria-hidden=\"true\">\n        <CircleIcon className=\"opacity-60\" size={16} />\n      </div>\n      <Button variant=\"outline\" size=\"icon\" aria-label=\"Pan camera right\">\n        <ChevronRightIcon size={16} aria-hidden=\"true\" />\n      </Button>\n      <Button\n        className=\"col-start-2\"\n        variant=\"outline\"\n        size=\"icon\"\n        aria-label=\"Pan camera down\"\n      >\n        <ChevronDownIcon size={16} aria-hidden=\"true\" />\n      </Button>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-128.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-128",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-128.tsx",
+      "content": "import { ChevronRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  return (\n    <Button className=\"group h-auto gap-4 py-3 text-left\" variant=\"outline\">\n      <div className=\"space-y-1\">\n        <h3>Talent Agency</h3>\n        <p className=\"font-normal whitespace-break-spaces text-muted-foreground\">\n          Matches for your roster\n        </p>\n      </div>\n      <ChevronRightIcon\n        className=\"opacity-60 transition-transform group-hover:translate-x-0.5\"\n        size={16}\n        aria-hidden=\"true\"\n      />\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-129.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-129",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/badge.json",
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-129.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { BellIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/building-blocks/default/ui/badge\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\nexport default function Component() {\n  const [count, setCount] = useState(3)\n\n  const handleClick = () => {\n    setCount(0)\n  }\n\n  return (\n    <Button\n      variant=\"outline\"\n      size=\"icon\"\n      className=\"relative\"\n      onClick={handleClick}\n      aria-label=\"Notifications\"\n    >\n      <BellIcon size={16} aria-hidden=\"true\" />\n      {count > 0 && (\n        <Badge className=\"absolute -top-2 left-full min-w-5 -translate-x-1/2 px-1\">\n          {count > 99 ? \"99+\" : count}\n        </Badge>\n      )}\n    </Button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "dropdown",
+      "notification"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-13.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-13",
+  "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-13.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}>Input with inline add-ons</Label>\n      <div className=\"relative\">\n        <Input\n          id={id}\n          className=\"peer ps-6 pe-12\"\n          placeholder=\"0.00\"\n          type=\"text\"\n        />\n        <span className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50\">\n          €\n        </span>\n        <span className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-50\">\n          EUR\n        </span>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label"
+    ]
+  }
+}

package/public/r/comp-130.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-130",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/toggle.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-130.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { MoonIcon, SunIcon } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/building-blocks/default/ui/toggle\"\n\nexport default function Component() {\n  const [theme, setTheme] = useState<string>(\"light\")\n\n  return (\n    <div>\n      <Toggle\n        variant=\"outline\"\n        className=\"group size-9 data-[state=on]:bg-transparent data-[state=on]:hover:bg-muted\"\n        pressed={theme === \"dark\"}\n        onPressedChange={() =>\n          setTheme((prev) => (prev === \"dark\" ? \"light\" : \"dark\"))\n        }\n        aria-label={`Switch to ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}\n      >\n        {/* Note: After dark mode implementation, rely on dark: prefix rather than group-data-[state=on]: */}\n        <MoonIcon\n          size={16}\n          className=\"shrink-0 scale-0 opacity-0 transition-all group-data-[state=on]:scale-100 group-data-[state=on]:opacity-100\"\n          aria-hidden=\"true\"\n        />\n        <SunIcon\n          size={16}\n          className=\"absolute shrink-0 scale-100 opacity-100 transition-all group-data-[state=on]:scale-0 group-data-[state=on]:opacity-0\"\n          aria-hidden=\"true\"\n        />\n      </Toggle>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "toggle",
+      "darkmode"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-131.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-131",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-131.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\n\nconst options = [\n  {\n    label: \"Merge pull request\",\n    description:\n      \"All commits from this branch will be added to the base branch via a commit version.\",\n  },\n  {\n    label: \"Squash and merge\",\n    description:\n      \"The 6 commits from this branch will be combined into one commit in the base branch.\",\n  },\n  {\n    label: \"Rebase and merge\",\n    description:\n      \"The 6 commits from this branch will be rebased and added to the base branch.\",\n  },\n]\n\nexport default function Component() {\n  const [selectedIndex, setSelectedIndex] = useState(\"0\")\n\n  return (\n    <div className=\"inline-flex divide-x divide-primary-foreground/30 rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\">\n        {options[Number(selectedIndex)].label}\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n            size=\"icon\"\n            aria-label=\"Options\"\n          >\n            <ChevronDownIcon size={16} aria-hidden=\"true\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          className=\"max-w-64 md:max-w-xs\"\n          side=\"bottom\"\n          sideOffset={4}\n          align=\"end\"\n        >\n          <DropdownMenuRadioGroup\n            value={selectedIndex}\n            onValueChange={setSelectedIndex}\n          >\n            {options.map((option, index) => (\n              <DropdownMenuRadioItem\n                key={option.label}\n                value={String(index)}\n                className=\"items-start [&>span]:pt-1.5\"\n              >\n                <div className=\"flex flex-col gap-1\">\n                  <span className=\"text-sm font-medium\">{option.label}</span>\n                  <span className=\"text-xs text-muted-foreground\">\n                    {option.description}\n                  </span>\n                </div>\n              </DropdownMenuRadioItem>\n            ))}\n          </DropdownMenuRadioGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "button",
+      "dropdown"
+    ],
+    "style": 2
+  }
+}

package/public/r/comp-132.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-132",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-132.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox id={id} />\n      <Label htmlFor={id}>Simple checkbox</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "checkbox",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-133.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-133",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-133.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\n\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  const [checked, setChecked] = useState<boolean | \"indeterminate\">(\n    \"indeterminate\"\n  )\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox id={id} checked={checked} onCheckedChange={setChecked} />\n      <Label htmlFor={id}>Indeterminate checkbox</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "checkbox",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-134.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-134",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-134.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"flex items-center gap-2 [--primary:var(--color-indigo-500)] [--ring:var(--color-indigo-300)] in-[.dark]:[--primary:var(--color-indigo-500)] in-[.dark]:[--ring:var(--color-indigo-900)]\">\n      <Checkbox id={id} defaultChecked />\n      <Label htmlFor={id}>Colored checkbox</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "checkbox",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-135.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-135",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-135.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox id={id} disabled />\n      <Label htmlFor={id}>Disabled checkbox</Label>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "checkbox",
+      "label",
+      "disabled",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-136.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-136",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-136.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox id={id} defaultChecked />\n      <Label htmlFor={id} className=\"peer-data-[state=checked]:line-through\">\n        Simple todo item\n      </Label>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "checkbox",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-137.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-137",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-137.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox\n        style={\n          {\n            \"--primary\": \"var(--color-emerald-500)\",\n          } as React.CSSProperties\n        }\n        id={id}\n        className=\"rounded-full\"\n        defaultChecked\n      />\n      <Label\n        htmlFor={id}\n        className=\"peer-data-[state=checked]:line-throgh relative peer-data-[state=checked]:text-muted-foreground after:absolute after:top-1/2 after:left-0 after:h-px after:w-full after:origin-bottom after:-translate-y-1/2 after:scale-x-0 after:bg-muted-foreground after:transition-transform after:ease-in-out peer-data-[state=checked]:after:origin-bottom peer-data-[state=checked]:after:scale-x-100\"\n      >\n        Fancy todo item\n      </Label>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "checkbox",
+      "label",
+      "radix"
+    ]
+  }
+}

package/public/r/comp-138.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-138",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-138.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox id={id} />\n      <Label htmlFor={id}>\n        I agree to the{\" \"}\n        <a className=\"underline\" href=\"https://loveui.dev/building-blocks\" target=\"_blank\">\n          terms of service\n        </a>\n      </Label>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "checkbox",
+      "label",
+      "login",
+      "authentication",
+      "radix"
+    ]
+  }
+}