love-ui 1.2.12 → 1.2.14

package/public/r/comp-330.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-330",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/radio-group.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-330.tsx",
+      "content": "import { useId } from \"react\"\nimport { CheckIcon, RefreshCcwIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/building-blocks/default/ui/radio-group\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Change plan</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"mb-2 flex flex-col gap-2\">\n          <div\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n            aria-hidden=\"true\"\n          >\n            <RefreshCcwIcon className=\"opacity-80\" size={16} />\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"text-left\">Change your plan</DialogTitle>\n            <DialogDescription className=\"text-left\">\n              Pick one of the following plans.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <RadioGroup className=\"gap-2\" defaultValue=\"2\">\n            {/* Radio card #1 */}\n            <div className=\"relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\">\n              <RadioGroupItem\n                value=\"1\"\n                id={`${id}-1`}\n                aria-describedby={`${id}-1-description`}\n                className=\"order-1 after:absolute after:inset-0\"\n              />\n              <div className=\"grid grow gap-1\">\n                <Label htmlFor={`${id}-1`}>Essential</Label>\n                <p\n                  id={`${id}-1-description`}\n                  className=\"text-xs text-muted-foreground\"\n                >\n                  $4 per member/month\n                </p>\n              </div>\n            </div>\n            {/* Radio card #2 */}\n            <div className=\"relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\">\n              <RadioGroupItem\n                value=\"2\"\n                id={`${id}-2`}\n                aria-describedby={`${id}-2-description`}\n                className=\"order-1 after:absolute after:inset-0\"\n              />\n              <div className=\"grid grow gap-1\">\n                <Label htmlFor={`${id}-2`}>Standard</Label>\n                <p\n                  id={`${id}-2-description`}\n                  className=\"text-xs text-muted-foreground\"\n                >\n                  $19 per member/month\n                </p>\n              </div>\n            </div>\n            {/* Radio card #3 */}\n            <div className=\"relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\">\n              <RadioGroupItem\n                value=\"3\"\n                id={`${id}-3`}\n                aria-describedby={`${id}-3-description`}\n                className=\"order-1 after:absolute after:inset-0\"\n              />\n              <div className=\"grid grow gap-1\">\n                <Label htmlFor={`${id}-3`}>Enterprise</Label>\n                <p\n                  id={`${id}-3-description`}\n                  className=\"text-xs text-muted-foreground\"\n                >\n                  $32 per member/month\n                </p>\n              </div>\n            </div>\n          </RadioGroup>\n\n          <div className=\"space-y-3\">\n            <p>\n              <strong className=\"text-sm font-medium\">Features include:</strong>\n            </p>\n            <ul className=\"space-y-2 text-sm text-muted-foreground\">\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  size={16}\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                Create unlimited projects.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  size={16}\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                Remove watermarks.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  size={16}\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                Add unlimited users and free viewers.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  size={16}\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                Upload unlimited files.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  size={16}\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                7-day money back guarantee.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  size={16}\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  aria-hidden=\"true\"\n                />\n                Advanced permissions.\n              </li>\n            </ul>\n          </div>\n\n          <div className=\"grid gap-2\">\n            <Button type=\"button\" className=\"w-full\">\n              Change plan\n            </Button>\n            <DialogClose asChild>\n              <Button type=\"button\" variant=\"ghost\" className=\"w-full\">\n                Cancel\n              </Button>\n            </DialogClose>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "user",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-331.json

@@ -0,0 +1,42 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-331",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/textarea.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-331.tsx",
+      "content": "\"use client\"\n\n\nimport { useId, useState } from \"react\"\nimport { CheckIcon, ImagePlusIcon, XIcon } from \"lucide-react\"\n\nimport { useCharacterLimit } from \"@/registry/building-blocks/default/hooks/use-character-limit\"\nimport { useFileUpload } from \"@/registry/building-blocks/default/hooks/use-file-upload\"\nimport { 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\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport { Textarea } from \"@/registry/building-blocks/default/ui/textarea\"\n\n// Pretend we have initial image files\nconst initialBgImage = [\n  {\n    name: \"profile-bg.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: assetPath(\"/building-blocks/profile-bg.jpg\"),\n    id: \"profile-bg-123456789\",\n  },\n]\n\nconst initialAvatarImage = [\n  {\n    name: \"avatar-72-01.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: \"https://i.pravatar.cc/160?img=13\",\n    id: \"avatar-123456789\",\n  },\n]\n\nexport default function Component() {\n  const id = useId()\n\n  const maxLength = 180\n  const {\n    value,\n    characterCount,\n    handleChange,\n    maxLength: limit,\n  } = useCharacterLimit({\n    maxLength,\n    initialValue:\n      \"Hey, I am Connor, a web developer who loves turning ideas into amazing websites!\",\n  })\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 overflow-y-visible p-0 sm:max-w-lg [&>button:last-child]:top-3.5\">\n        <DialogHeader className=\"contents space-y-0 text-left\">\n          <DialogTitle className=\"border-b px-6 py-4 text-base\">\n            Edit profile\n          </DialogTitle>\n        </DialogHeader>\n        <DialogDescription className=\"sr-only\">\n          Make changes to your profile here. You can change your photo and set a\n          username.\n        </DialogDescription>\n        <div className=\"overflow-y-auto\">\n          <ProfileBg />\n          <Avatar />\n          <div className=\"px-6 pt-4 pb-6\">\n            <form className=\"space-y-4\">\n              <div className=\"flex flex-col gap-4 sm:flex-row\">\n                <div className=\"flex-1 space-y-2\">\n                  <Label htmlFor={`${id}-first-name`}>First name</Label>\n                  <Input\n                    id={`${id}-first-name`}\n                    placeholder=\"Connor\"\n                    defaultValue=\"Connor\"\n                    type=\"text\"\n                    required\n                  />\n                </div>\n                <div className=\"flex-1 space-y-2\">\n                  <Label htmlFor={`${id}-last-name`}>Last name</Label>\n                  <Input\n                    id={`${id}-last-name`}\n                    placeholder=\"Welsh\"\n                    defaultValue=\"Love\"\n                    type=\"text\"\n                    required\n                  />\n                </div>\n              </div>\n              <div className=\"*:not-first:mt-2\">\n                <Label htmlFor={`${id}-username`}>Username</Label>\n                <div className=\"relative\">\n                  <Input\n                    id={`${id}-username`}\n                    className=\"peer pe-9\"\n                    placeholder=\"Username\"\n                    defaultValue=\"Connor-Love-69\"\n                    type=\"text\"\n                    required\n                  />\n                  <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                    <CheckIcon\n                      size={16}\n                      className=\"text-emerald-500\"\n                      aria-hidden=\"true\"\n                    />\n                  </div>\n                </div>\n              </div>\n              <div className=\"*:not-first:mt-2\">\n                <Label htmlFor={`${id}-website`}>Website</Label>\n                <div className=\"flex rounded-md shadow-xs\">\n                  <span className=\"-z-10 inline-flex items-center rounded-s-md border border-input bg-background px-3 text-sm text-muted-foreground\">\n                    https://\n                  </span>\n                  <Input\n                    id={`${id}-website`}\n                    className=\"-ms-px rounded-s-none shadow-none\"\n                    placeholder=\"yourwebsite.com\"\n                    defaultValue=\"www.connorlove.com\"\n                    type=\"text\"\n                  />\n                </div>\n              </div>\n              <div className=\"*:not-first:mt-2\">\n                <Label htmlFor={`${id}-bio`}>Biography</Label>\n                <Textarea\n                  id={`${id}-bio`}\n                  placeholder=\"Write a few sentences about yourself\"\n                  defaultValue={value}\n                  maxLength={maxLength}\n                  onChange={handleChange}\n                  aria-describedby={`${id}-description`}\n                />\n                <p\n                  id={`${id}-description`}\n                  className=\"mt-2 text-right text-xs text-muted-foreground\"\n                  role=\"status\"\n                  aria-live=\"polite\"\n                >\n                  <span className=\"tabular-nums\">{limit - characterCount}</span>{\" \"}\n                  characters left\n                </p>\n              </div>\n            </form>\n          </div>\n        </div>\n        <DialogFooter className=\"border-t px-6 py-4\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n          </DialogClose>\n          <DialogClose asChild>\n            <Button type=\"button\">Save changes</Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction ProfileBg() {\n  const [{ files }, { removeFile, openFileDialog, getInputProps }] =\n    useFileUpload({\n      accept: \"image/*\",\n      initialFiles: initialBgImage,\n    })\n\n  const currentImage = files[0]?.preview || null\n\n  return (\n    <div className=\"h-32\">\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden bg-muted\">\n        {currentImage && (\n          <img\n            className=\"size-full object-cover\"\n            src={currentImage}\n            alt={\n              files[0]?.preview\n                ? \"Preview of uploaded image\"\n                : \"Default profile background\"\n            }\n            width={512}\n            height={96}\n          />\n        )}\n        <div className=\"absolute inset-0 flex items-center justify-center gap-2\">\n          <button\n            type=\"button\"\n            className=\"z-50 flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white transition-[color,box-shadow] outline-none hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n            onClick={openFileDialog}\n            aria-label={currentImage ? \"Change image\" : \"Upload image\"}\n          >\n            <ImagePlusIcon size={16} aria-hidden=\"true\" />\n          </button>\n          {currentImage && (\n            <button\n              type=\"button\"\n              className=\"z-50 flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white transition-[color,box-shadow] outline-none hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n              onClick={() => removeFile(files[0]?.id)}\n              aria-label=\"Remove image\"\n            >\n              <XIcon size={16} aria-hidden=\"true\" />\n            </button>\n          )}\n        </div>\n      </div>\n      <input\n        {...getInputProps()}\n        className=\"sr-only\"\n        aria-label=\"Upload image file\"\n      />\n    </div>\n  )\n}\n\nfunction Avatar() {\n  const [{ files }, { openFileDialog, getInputProps }] = useFileUpload({\n    accept: \"image/*\",\n    initialFiles: initialAvatarImage,\n  })\n\n  const currentImage = files[0]?.preview || null\n\n  return (\n    <div className=\"-mt-10 px-6\">\n      <div className=\"relative flex size-20 items-center justify-center overflow-hidden rounded-full border-4 border-background bg-muted shadow-xs shadow-black/10\">\n        {currentImage && (\n          <img\n            src={currentImage}\n            className=\"size-full object-cover\"\n            width={80}\n            height={80}\n            alt=\"Profile image\"\n          />\n        )}\n        <button\n          type=\"button\"\n          className=\"absolute flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white transition-[color,box-shadow] outline-none hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n          onClick={openFileDialog}\n          aria-label=\"Change profile picture\"\n        >\n          <ImagePlusIcon size={16} aria-hidden=\"true\" />\n        </button>\n        <input\n          {...getInputProps()}\n          className=\"sr-only\"\n          aria-label=\"Upload profile picture\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-character-limit.ts",
+      "content": "\"use client\"\n\nimport { ChangeEvent, useState } from \"react\"\n\ntype UseCharacterLimitProps = {\n  maxLength: number\n  initialValue?: string\n}\n\nexport function useCharacterLimit({\n  maxLength,\n  initialValue = \"\",\n}: UseCharacterLimitProps) {\n  const [value, setValue] = useState(initialValue)\n  const [characterCount, setCharacterCount] = useState(initialValue.length)\n\n  const handleChange = (\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    const newValue = e.target.value\n    if (newValue.length <= maxLength) {\n      setValue(newValue)\n      setCharacterCount(newValue.length)\n    }\n  }\n\n  return {\n    value,\n    characterCount,\n    handleChange,\n    maxLength,\n  }\n}\n",
+      "type": "registry:hook"
+    },
+    {
+      "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": [
+      "dialog",
+      "modal",
+      "user",
+      "profile",
+      "image",
+      "avatar",
+      "form",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-332.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-332",
+  "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-332.tsx",
+      "content": "\"use client\"\nimport { useState } from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { 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  const [step, setStep] = useState(1)\n\n  const stepContent = [\n    {\n      title: \"Welcome to loveui\",\n      description:\n        \"Discover a powerful collection of components designed to enhance your development workflow.\",\n    },\n    {\n      title: \"Customizable Components\",\n      description:\n        \"Each component is fully customizable and built with modern web standards in mind.\",\n    },\n    {\n      title: \"Ready to Start?\",\n      description:\n        \"Begin building amazing interfaces with our comprehensive component library.\",\n    },\n    {\n      title: \"Get Support\",\n      description:\n        \"Access our extensive documentation and community resources to make the most of loveui.\",\n    },\n  ]\n\n  const totalSteps = stepContent.length\n\n  const handleContinue = () => {\n    if (step < totalSteps) {\n      setStep(step + 1)\n    }\n  }\n\n  return (\n    <Dialog\n      onOpenChange={(open) => {\n        if (open) setStep(1)\n      }}\n    >\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Onboarding</Button>\n      </DialogTrigger>\n      <DialogContent className=\"gap-0 p-0 [&>button:last-child]:text-white\">\n        <div className=\"p-2\">\n          <img\n            className=\"w-full rounded-md\"\n            src={assetPath(\"/building-blocks/dialog-content.png\")}\n            width={382}\n            height={216}\n            alt=\"dialog\"\n          />\n        </div>\n        <div className=\"space-y-6 px-6 pt-3 pb-6\">\n          <DialogHeader>\n            <DialogTitle>{stepContent[step - 1].title}</DialogTitle>\n            <DialogDescription>\n              {stepContent[step - 1].description}\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col justify-between gap-4 sm:flex-row sm:items-center\">\n            <div className=\"flex justify-center space-x-1.5 max-sm:order-1\">\n              {[...Array(totalSteps)].map((_, index) => (\n                <div\n                  key={index}\n                  className={cn(\n                    \"size-1.5 rounded-full bg-primary\",\n                    index + 1 === step ? \"bg-primary\" : \"opacity-20\"\n                  )}\n                />\n              ))}\n            </div>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button type=\"button\" variant=\"ghost\">\n                  Skip\n                </Button>\n              </DialogClose>\n              {step < totalSteps ? (\n                <Button\n                  className=\"group\"\n                  type=\"button\"\n                  onClick={handleContinue}\n                >\n                  Next\n                  <ArrowRightIcon\n                    className=\"-me-1 opacity-60 transition-transform group-hover:translate-x-0.5\"\n                    size={16}\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              ) : (\n                <DialogClose asChild>\n                  <Button type=\"button\">Okay</Button>\n                </DialogClose>\n              )}\n            </DialogFooter>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "onboarding",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-333.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-333",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/command.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-333.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpRightIcon,\n  CircleFadingPlusIcon,\n  FileInputIcon,\n  FolderPlusIcon,\n  SearchIcon,\n} from \"lucide-react\"\n\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/building-blocks/default/ui/command\"\n\nexport default function Component() {\n  const [open, setOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <button\n        className=\"inline-flex h-9 w-fit rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n        onClick={() => setOpen(true)}\n      >\n        <span className=\"flex grow items-center\">\n          <SearchIcon\n            className=\"-ms-1 me-3 text-muted-foreground/80\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n          <span className=\"font-normal text-muted-foreground/70\">Search</span>\n        </span>\n        <kbd className=\"ms-12 -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70\">\n          ⌘K\n        </kbd>\n      </button>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Quick start\">\n            <CommandItem>\n              <FolderPlusIcon\n                size={16}\n                className=\"opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>New folder</span>\n              <CommandShortcut className=\"justify-center\">⌘N</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <FileInputIcon\n                size={16}\n                className=\"opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>Import document</span>\n              <CommandShortcut className=\"justify-center\">⌘I</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CircleFadingPlusIcon\n                size={16}\n                className=\"opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>Add block</span>\n              <CommandShortcut className=\"justify-center\">⌘B</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Navigation\">\n            <CommandItem>\n              <ArrowUpRightIcon\n                size={16}\n                className=\"opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>Go to dashboard</span>\n            </CommandItem>\n            <CommandItem>\n              <ArrowUpRightIcon\n                size={16}\n                className=\"opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>Go to apps</span>\n            </CommandItem>\n            <CommandItem>\n              <ArrowUpRightIcon\n                size={16}\n                className=\"opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>Go to connections</span>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "dialog",
+      "modal",
+      "command",
+      "combobox",
+      "popover",
+      "search",
+      "radix",
+      "autocomplete",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-334.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-334",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-334.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ chevron</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionTrigger className=\"py-2 text-[15px] leading-6 hover:no-underline\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "accordion",
+      "radix"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-335.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-335",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-335.tsx",
+      "content": "import { PlusIcon } from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ plus-minus</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between gap-4 rounded-md py-2 text-left text-sm text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0\">\n                {item.title}\n                <PlusIcon\n                  size={16}\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  aria-hidden=\"true\"\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "accordion",
+      "radix"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-336.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-336",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-336.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ left chevron</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionTrigger className=\"justify-start gap-3 py-2 text-[15px] leading-6 hover:no-underline [&>svg]:-order-1\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "accordion",
+      "radix"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-337.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-337",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-337.tsx",
+      "content": "import { PlusIcon } from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ left plus-minus</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center gap-4 rounded-md py-2 text-left text-sm text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg]:-order-1 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0\">\n                {item.title}\n                <PlusIcon\n                  size={16}\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  aria-hidden=\"true\"\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "accordion",
+      "radix"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-338.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-338",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-338.tsx",
+      "content": "import { AtSignIcon, CommandIcon, EclipseIcon, ZapIcon } from \"lucide-react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    icon: CommandIcon,\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    icon: EclipseIcon,\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    icon: ZapIcon,\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    icon: AtSignIcon,\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ icon and chevron</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionTrigger className=\"py-2 text-[15px] leading-6 hover:no-underline\">\n              <span className=\"flex items-center gap-3\">\n                <item.icon\n                  size={16}\n                  className=\"shrink-0 opacity-60\"\n                  aria-hidden=\"true\"\n                />\n                <span>{item.title}</span>\n              </span>\n            </AccordionTrigger>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "accordion",
+      "radix"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-339.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-339",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-339.tsx",
+      "content": "import {\n  AtSignIcon,\n  CommandIcon,\n  EclipseIcon,\n  PlusIcon,\n  ZapIcon,\n} from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    icon: CommandIcon,\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    icon: EclipseIcon,\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    icon: ZapIcon,\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    icon: AtSignIcon,\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ icon and plus-minus</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between gap-4 rounded-md py-2 text-left text-sm text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0\">\n                <span className=\"flex items-center gap-3\">\n                  <item.icon\n                    size={16}\n                    className=\"shrink-0 opacity-60\"\n                    aria-hidden=\"true\"\n                  />\n                  <span>{item.title}</span>\n                </span>\n                <PlusIcon\n                  size={16}\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  aria-hidden=\"true\"\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "accordion",
+      "radix"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-34.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-34",
+  "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-34.tsx",
+      "content": "\"use client\"\n\nimport { useId } from \"react\"\n\nimport { useCharacterLimit } from \"@/registry/building-blocks/default/hooks/use-character-limit\"\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  const maxLength = 50\n  const {\n    value,\n    characterCount,\n    handleChange,\n    maxLength: limit,\n  } = useCharacterLimit({ maxLength })\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with character limit</Label>\n      <div className=\"relative\">\n        <Input\n          id={id}\n          className=\"peer pe-14\"\n          type=\"text\"\n          value={value}\n          maxLength={maxLength}\n          onChange={handleChange}\n          aria-describedby={`${id}-description`}\n        />\n        <div\n          id={`${id}-description`}\n          className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs text-muted-foreground tabular-nums peer-disabled:opacity-50\"\n          aria-live=\"polite\"\n          role=\"status\"\n        >\n          {characterCount}/{limit}\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-character-limit.ts",
+      "content": "\"use client\"\n\nimport { ChangeEvent, useState } from \"react\"\n\ntype UseCharacterLimitProps = {\n  maxLength: number\n  initialValue?: string\n}\n\nexport function useCharacterLimit({\n  maxLength,\n  initialValue = \"\",\n}: UseCharacterLimitProps) {\n  const [value, setValue] = useState(initialValue)\n  const [characterCount, setCharacterCount] = useState(initialValue.length)\n\n  const handleChange = (\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    const newValue = e.target.value\n    if (newValue.length <= maxLength) {\n      setValue(newValue)\n      setCharacterCount(newValue.length)\n    }\n  }\n\n  return {\n    value,\n    characterCount,\n    handleChange,\n    maxLength,\n  }\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label"
+    ]
+  }
+}

package/public/r/comp-340.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-340",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-340.tsx",
+      "content": "import { ChevronDownIcon } from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"Connected accounts\",\n    sub: \"Manage your linked social and work accounts\",\n    content:\n      \"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n  },\n  {\n    id: \"2\",\n    title: \"Notifications\",\n    sub: \"Customize your notification preferences\",\n    content:\n      \"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n  },\n  {\n    id: \"3\",\n    title: \"2-step verification\",\n    sub: \"Add an extra layer of security to your account\",\n    content:\n      \"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n  },\n  {\n    id: \"4\",\n    title: \"Contact support\",\n    sub: \"We're here to help 24/7\",\n    content:\n      \"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ sub-header and chevron</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between rounded-md py-2 text-left text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&[data-state=open]>svg]:rotate-180\">\n                <span className=\"flex flex-col space-y-1\">\n                  <span>{item.title}</span>\n                  {item.sub && (\n                    <span className=\"text-sm font-normal\">{item.sub}</span>\n                  )}\n                </span>\n                <ChevronDownIcon\n                  size={16}\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  aria-hidden=\"true\"\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "accordion",
+      "radix"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-341.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-341",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-341.tsx",
+      "content": "import { PlusIcon } from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"Connected accounts\",\n    sub: \"Manage your linked social and work accounts\",\n    content:\n      \"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n  },\n  {\n    id: \"2\",\n    title: \"Notifications\",\n    sub: \"Customize your notification preferences\",\n    content:\n      \"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n  },\n  {\n    id: \"3\",\n    title: \"2-step verification\",\n    sub: \"Add an extra layer of security to your account\",\n    content:\n      \"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n  },\n  {\n    id: \"4\",\n    title: \"Contact support\",\n    sub: \"We're here to help 24/7\",\n    content:\n      \"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ sub-header and plus-minus</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between rounded-md py-2 text-left text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0\">\n                <span className=\"flex flex-col space-y-1\">\n                  <span>{item.title}</span>\n                  {item.sub && (\n                    <span className=\"text-sm font-normal\">{item.sub}</span>\n                  )}\n                </span>\n                <PlusIcon\n                  size={16}\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  aria-hidden=\"true\"\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "accordion",
+      "radix"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-342.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-342",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-342.tsx",
+      "content": "import {\n  BellIcon,\n  ChevronDownIcon,\n  LifeBuoyIcon,\n  Link2Icon,\n  ShieldCheckIcon,\n} from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    icon: Link2Icon,\n    title: \"Connected accounts\",\n    sub: \"Manage your linked social and work accounts\",\n    content:\n      \"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n  },\n  {\n    id: \"2\",\n    icon: BellIcon,\n    title: \"Notifications\",\n    sub: \"Customize your notification preferences\",\n    content:\n      \"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n  },\n  {\n    id: \"3\",\n    icon: ShieldCheckIcon,\n    title: \"2-step verification\",\n    sub: \"Add an extra layer of security to your account\",\n    content:\n      \"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n  },\n  {\n    id: \"4\",\n    icon: LifeBuoyIcon,\n    title: \"Contact support\",\n    sub: \"We're here to help 24/7\",\n    content:\n      \"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ icon, sub-header, and chevron</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between rounded-md py-2 text-left text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&[data-state=open]>svg]:rotate-180\">\n                <span className=\"flex items-center gap-3\">\n                  <span\n                    className=\"flex size-10 shrink-0 items-center justify-center rounded-full border\"\n                    aria-hidden=\"true\"\n                  >\n                    <item.icon size={16} className=\"opacity-60\" />\n                  </span>\n                  <span className=\"flex flex-col space-y-1\">\n                    <span>{item.title}</span>\n                    {item.sub && (\n                      <span className=\"text-sm font-normal\">{item.sub}</span>\n                    )}\n                  </span>\n                </span>\n                <ChevronDownIcon\n                  size={16}\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  aria-hidden=\"true\"\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"ms-3 ps-10 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "accordion",
+      "radix"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-343.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-343",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-343.tsx",
+      "content": "import {\n  BellIcon,\n  LifeBuoyIcon,\n  Link2Icon,\n  PlusIcon,\n  ShieldCheckIcon,\n} from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    icon: Link2Icon,\n    title: \"Connected accounts\",\n    sub: \"Manage your linked social and work accounts\",\n    content:\n      \"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n  },\n  {\n    id: \"2\",\n    icon: BellIcon,\n    title: \"Notifications\",\n    sub: \"Customize your notification preferences\",\n    content:\n      \"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n  },\n  {\n    id: \"3\",\n    icon: ShieldCheckIcon,\n    title: \"2-step verification\",\n    sub: \"Add an extra layer of security to your account\",\n    content:\n      \"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n  },\n  {\n    id: \"4\",\n    icon: LifeBuoyIcon,\n    title: \"Contact support\",\n    sub: \"We're here to help 24/7\",\n    content:\n      \"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">W/ icon, sub-header, and plus-minus</h2>\n      <Accordion type=\"single\" collapsible className=\"w-full\" defaultValue=\"3\">\n        {items.map((item) => (\n          <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between rounded-md py-2 text-left text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0\">\n                <span className=\"flex items-center gap-3\">\n                  <span\n                    className=\"flex size-10 shrink-0 items-center justify-center rounded-full border\"\n                    aria-hidden=\"true\"\n                  >\n                    <item.icon size={16} className=\"opacity-60\" />\n                  </span>\n                  <span className=\"flex flex-col space-y-1\">\n                    <span>{item.title}</span>\n                    {item.sub && (\n                      <span className=\"text-sm font-normal\">{item.sub}</span>\n                    )}\n                  </span>\n                </span>\n                <PlusIcon\n                  size={16}\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  aria-hidden=\"true\"\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"ms-3 ps-10 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "accordion",
+      "radix"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-344.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-344",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-344.tsx",
+      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">Tabs w/ chevron</h2>\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"w-full space-y-2\"\n        defaultValue=\"3\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            value={item.id}\n            key={item.id}\n            className=\"rounded-md border bg-background px-4 py-1 outline-none last:border-b has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n          >\n            <AccordionTrigger className=\"py-2 text-[15px] leading-6 hover:no-underline focus-visible:ring-0\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "accordion",
+      "radix"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-345.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-345",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-345.tsx",
+      "content": "import { PlusIcon } from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/building-blocks/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"What makes loveui different?\",\n    content:\n      \"loveui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    title: \"Is loveui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">Tabs w/ plus-minus</h2>\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"w-full space-y-2\"\n        defaultValue=\"3\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            value={item.id}\n            key={item.id}\n            className=\"rounded-md border bg-background px-4 py-1 outline-none last:border-b has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n          >\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"ocus-visible:ring-0 flex flex-1 items-center justify-between rounded-md py-2 text-left text-[15px] leading-6 font-semibold transition-all outline-none [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0\">\n                {item.title}\n                <PlusIcon\n                  size={16}\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  aria-hidden=\"true\"\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "accordion",
+      "radix"
+    ],
+    "colSpan": 2
+  }
+}