{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-9",
  "type": "registry:component",
  "title": "Collapsible 9",
  "description": "Collapsible 9. A collapsible is a component that allows users to show or hide content.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "collapsible",
    "input",
    "label",
    "radio-group",
    "separator",
    "textarea"
  ],
  "files": [
    {
      "path": "components/watermelon/collapsible-9.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useId, useState } from 'react';\n\nimport type { ReactNode } from 'react';\nimport { ChevronDownIcon, CreditCardIcon } from 'lucide-react';\n\nimport { Button } from '@/components/base-ui/button';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/base-ui/collapsible';\nimport { Input } from '@/components/base-ui/input';\nimport { Label } from '@/components/base-ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/base-ui/radio-group';\nimport { Separator } from '@/components/base-ui/separator';\nimport { Textarea } from '@/components/base-ui/textarea';\n\ntype AddressField = {\n  id: string;\n  label: string;\n  placeholder?: string;\n  type: 'number' | 'text';\n};\n\ntype DeliveryOption = {\n  description: string;\n  label: string;\n  price: string;\n  value: string;\n};\n\nconst addressFields: readonly AddressField[] = [\n  { id: 'full-name', label: 'Full Name', type: 'text' },\n  { id: 'pin-code', label: 'Pin Code', type: 'number' },\n  { id: 'city-name', label: 'City', type: 'text' },\n  { id: 'landmark', label: 'Landmark', type: 'text' },\n] as const;\n\nconst deliveryOptions: readonly DeliveryOption[] = [\n  {\n    value: '1',\n    label: 'Standard 3-5 Days',\n    description: 'Friday, 15 June - Tuesday, 19 June',\n    price: 'Free',\n  },\n  {\n    value: '2',\n    label: 'Express',\n    description: 'Friday, 15 June - Sunday, 17 June',\n    price: '$5.00',\n  },\n  { value: '3', label: 'Overnight', description: 'Tomorrow', price: '$10.00' },\n] as const;\n\ntype SectionProps = {\n  children: ReactNode;\n  defaultOpen?: boolean;\n  title: string;\n};\n\nconst Section = ({ children, defaultOpen = false, title }: SectionProps) => {\n  const [open, setOpen] = useState<boolean>(defaultOpen);\n\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={setOpen}\n      className=\"flex flex-col gap-2\"\n    >\n      <div className=\"flex items-center justify-between gap-4 px-4\">\n        <div className=\"text-sm font-semibold\">{title}</div>\n        <CollapsibleTrigger>\n          <Button variant=\"ghost\" size=\"icon-sm\">\n            <ChevronDownIcon\n              className={`text-muted-foreground size-4 transition-transform ${open ? 'rotate-180' : ''}`}\n            />\n            <span className=\"sr-only\">Toggle {title}</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <CollapsibleContent className=\"flex flex-col gap-3 px-4 pt-3 pb-1\">\n        {children}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nconst Collapsible9 = () => {\n  const id = useId();\n\n  return (\n    <div className=\"flex w-full items-center justify-center space-y-3\">\n      <div className=\"border-border/70 w-full max-w-md space-y-3 rounded-md border py-4 shadow-sm\">\n        <Section title=\"Delivery Address\" defaultOpen={false}>\n          {addressFields.slice(0, 1).map((field) => (\n            <div key={field.id} className=\"group relative w-full\">\n              <label\n                htmlFor={field.id}\n                className=\"text-muted-foreground absolute top-1/2 block -translate-y-1/2 cursor-text px-2 text-sm transition-all group-focus-within:top-0 group-focus-within:text-xs group-focus-within:font-medium has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium\"\n              >\n                <span className=\"bg-background inline-flex px-1\">\n                  {field.label}\n                </span>\n              </label>\n              <Input\n                id={field.id}\n                type={field.type}\n                placeholder=\" \"\n                className=\"border-border/70 bg-muted/20 dark:bg-background\"\n              />\n            </div>\n          ))}\n          <div className=\"group relative w-full space-y-2\">\n            <label\n              htmlFor=\"address\"\n              className=\"text-muted-foreground absolute top-0 block translate-y-2 cursor-text px-2 text-sm transition-all group-focus-within:-translate-y-1/2 group-focus-within:text-xs group-focus-within:font-medium has-[+textarea:not(:placeholder-shown)]:-translate-y-1/2 has-[+textarea:not(:placeholder-shown)]:text-xs has-[+textarea:not(:placeholder-shown)]:font-medium\"\n            >\n              <span className=\"bg-background inline-flex px-1\">Address</span>\n            </label>\n            <Textarea\n              id=\"address\"\n              placeholder=\" \"\n              className=\"border-border/70 !bg-muted/20 dark:!bg-background\"\n            />\n          </div>\n          {addressFields.slice(1).map((field) => (\n            <div key={field.id} className=\"group relative w-full\">\n              <label\n                htmlFor={field.id}\n                className=\"text-muted-foreground absolute top-1/2 block -translate-y-1/2 cursor-text px-2 text-sm transition-all group-focus-within:top-0 group-focus-within:text-xs group-focus-within:font-medium has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium\"\n              >\n                <span className=\"bg-background inline-flex px-1\">\n                  {field.label}\n                </span>\n              </label>\n              <Input\n                id={field.id}\n                type={field.type}\n                placeholder=\" \"\n                className=\"border-border/70 bg-muted/20 dark:bg-background\"\n              />\n            </div>\n          ))}\n        </Section>\n        <Separator />\n        <Section title=\"Delivery Options\" defaultOpen={false}>\n          <RadioGroup\n            className=\"w-full gap-0 -space-y-px rounded-md shadow-xs\"\n            defaultValue=\"2\"\n          >\n            {deliveryOptions.map((option) => (\n              <div\n                key={`${id}-${option.value}`}\n                className=\"border-input has-data-[state=checked]:border-primary/30 has-data-[state=checked]:bg-muted/30 relative flex flex-col gap-4 border p-4 outline-none first:rounded-t-md last:rounded-b-md has-data-[state=checked]:z-10\"\n              >\n                <div className=\"flex items-center justify-between gap-1.5\">\n                  <div className=\"flex items-center gap-2\">\n                    <RadioGroupItem\n                      id={`${id}-${option.value}`}\n                      value={option.value}\n                      className=\"after:absolute after:inset-0\"\n                      aria-label={`plan-radio-${option.value}`}\n                      aria-describedby={`${id}-${option.value}-price`}\n                    />\n                    <div className=\"space-y-1\">\n                      <Label\n                        className=\"inline-flex items-center\"\n                        htmlFor={`${id}-${option.value}`}\n                      >\n                        {option.label}\n                      </Label>\n                      <p className=\"text-muted-foreground text-sm\">\n                        {option.description}\n                      </p>\n                    </div>\n                  </div>\n                  <div\n                    id={`${id}-${option.value}-price`}\n                    className=\"text-muted-foreground text-xs leading-[inherit]\"\n                  >\n                    {option.price}\n                  </div>\n                </div>\n              </div>\n            ))}\n          </RadioGroup>\n        </Section>\n        <Separator />\n        <Section title=\"Payment\" defaultOpen={false}>\n          <div className=\"w-full space-y-2\">\n            <Label>Card details</Label>\n            <div>\n              <div className=\"relative focus-within:z-1\">\n                <Input\n                  id={`number-${id}`}\n                  type=\"text\"\n                  placeholder=\"1234 1234 1234 1234\"\n                  className=\"peer border-border/70 bg-muted/20 dark:bg-background rounded-b-none pr-9 shadow-none\"\n                />\n                <div className=\"text-muted-foreground pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50\">\n                  <CreditCardIcon className=\"size-4\" />\n                  <span className=\"sr-only\">Card Provider</span>\n                </div>\n              </div>\n              <div className=\"-mt-px flex\">\n                <div className=\"min-w-0 flex-1 focus-within:z-1\">\n                  <Input\n                    id={`expiry-${id}`}\n                    type=\"text\"\n                    placeholder=\"MM / YY\"\n                    className=\"border-border/70 bg-muted/20 dark:bg-background rounded-t-none rounded-r-none shadow-none\"\n                  />\n                </div>\n                <div className=\"-ms-px min-w-0 flex-1 focus-within:z-1\">\n                  <Input\n                    id={`cvc-${id}`}\n                    type=\"text\"\n                    placeholder=\"CVC\"\n                    className=\"border-border/70 bg-muted/20 dark:bg-background rounded-t-none rounded-l-none shadow-none\"\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </Section>\n      </div>\n    </div>\n  );\n};\n\nexport default Collapsible9;\n"
    }
  ]
}