{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-accent",
  "title": "Accent accordion",
  "description": "Styled accordion: the Accent set. 5 decorative accordion variations (BarAccordion, GrowAccordion, GlowAccordion, LeftAccordion, FullAccordion) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2",
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/accordion-accent.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown } from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Accent accordion family: 5 left-bar accordions. When a row opens, a primary\n   bar on the left edge grows or glows; the variants change how the bar behaves.\n   Every export is a complete accordion: internal single-open state, a button\n   header with aria-expanded, framer height auto animation. Colour comes ONLY\n   from tokens. Alpha via color-mix. Under reduced-motion the bar appears\n   instantly instead of transforming and the panel opens instantly. Size =\n   padding + text scale. Renders without props too. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport interface StyledAccordionItem {\n  value: string\n  title: React.ReactNode\n  content: React.ReactNode\n}\n\ninterface StyledAccordionProps {\n  className?: string\n  size?: StyledSize\n  items?: StyledAccordionItem[]\n  defaultOpen?: string\n}\n\nconst headerPad: Record<StyledSize, string> = {\n  sm: \"px-3 py-2.5 text-sm\",\n  md: \"px-4 py-3 text-sm\",\n  lg: \"px-5 py-4 text-base\",\n  xl: \"px-6 py-5 text-lg\",\n}\n\nconst bodyPad: Record<StyledSize, string> = {\n  sm: \"px-3 pb-2.5 text-sm\",\n  md: \"px-4 pb-3 text-sm\",\n  lg: \"px-5 pb-4 text-base\",\n  xl: \"px-6 pb-5 text-base\",\n}\n\nconst iconSize: Record<StyledSize, string> = {\n  sm: \"size-4\",\n  md: \"size-4\",\n  lg: \"size-5\",\n  xl: \"size-5\",\n}\n\nconst defaultItems: StyledAccordionItem[] = [\n  {\n    value: \"item-1\",\n    title: \"What is included?\",\n    content:\n      \"Every plan ships the full component library, semantic tokens, and lifetime updates for the tier you own.\",\n  },\n  {\n    value: \"item-2\",\n    title: \"How does installation work?\",\n    content:\n      \"Add any component with a single CLI command. Files land in your project and stay fully editable.\",\n  },\n  {\n    value: \"item-3\",\n    title: \"Can I use it in production?\",\n    content:\n      \"Yes. The system is framework agnostic, self contained, and safe to ship to any number of projects.\",\n  },\n]\n\nfunction useSingleOpen(defaultOpen?: string) {\n  const [open, setOpen] = React.useState<string | null>(defaultOpen ?? null)\n  const toggle = React.useCallback(\n    (value: string) => setOpen((cur) => (cur === value ? null : value)),\n    []\n  )\n  return { open, toggle }\n}\n\nconst headerBase =\n  \"flex w-full items-center justify-between gap-3 text-left font-medium outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n\nfunction Panel({\n  isOpen,\n  size,\n  children,\n}: {\n  isOpen: boolean\n  size: StyledSize\n  children: React.ReactNode\n}) {\n  const reduce = useReducedMotion()\n  return (\n    <AnimatePresence initial={false}>\n      {isOpen && (\n        <motion.div\n          key=\"panel\"\n          initial={reduce ? false : { height: 0, opacity: 0 }}\n          animate={{ height: \"auto\", opacity: 1 }}\n          exit={{ height: 0, opacity: 0 }}\n          transition={\n            reduce ? { duration: 0 } : { duration: 0.25, ease: [0.4, 0, 0.2, 1] }\n          }\n          className=\"overflow-hidden\"\n        >\n          <div className={cn(bodyPad[size], \"text-muted-foreground\")}>\n            {children}\n          </div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\nfunction Chevron({ isOpen, size }: { isOpen: boolean; size: StyledSize }) {\n  const reduce = useReducedMotion()\n  return (\n    <motion.span\n      aria-hidden\n      className=\"shrink-0 text-muted-foreground\"\n      animate={{ rotate: isOpen ? 180 : 0 }}\n      transition={reduce ? { duration: 0 } : { duration: 0.2 }}\n    >\n      <ChevronDown className={iconSize[size]} />\n    </motion.span>\n  )\n}\n\ninterface BarStyle {\n  /* the width of the bar */\n  width: string\n  /* acikken satira uygulanan ek arka plan */\n  openBg?: string\n  /* acikken bar'a uygulanan ek his (or. glow) */\n  openBar?: string\n  /* origin: dikey buyume mi yoksa yatay kayma mi */\n  mode: \"grow\" | \"slide\" | \"fade\"\n}\n\n/* Shared accent shell: an animated primary bar on the left of every row. The\n   bar grows, slides or glows on open and returns on close. barStyle is each\n   variant's behaviour. */\nfunction AccentShell({\n  props,\n  barStyle,\n}: {\n  props: StyledAccordionProps\n  barStyle: BarStyle\n}) {\n  const { className, size = \"md\", items = defaultItems, defaultOpen } = props\n  const { open, toggle } = useSingleOpen(defaultOpen)\n  const reduce = useReducedMotion()\n  return (\n    <div\n      data-slot=\"styled-accordion\"\n      className={cn(\n        \"overflow-hidden rounded-xl border border-border bg-background\",\n        className\n      )}\n    >\n      {items.map((item, i) => {\n        const isOpen = open === item.value\n        const barAnim =\n          barStyle.mode === \"grow\"\n            ? { scaleY: isOpen ? 1 : 0 }\n            : barStyle.mode === \"slide\"\n              ? { x: isOpen ? 0 : -4, opacity: isOpen ? 1 : 0 }\n              : { opacity: isOpen ? 1 : 0 }\n        return (\n          <div\n            key={item.value}\n            className={cn(\n              \"relative transition-colors\",\n              i > 0 && \"border-t border-border\",\n              isOpen && barStyle.openBg\n            )}\n          >\n            <motion.span\n              aria-hidden\n              className={cn(\n                \"absolute left-0 top-0 bottom-0 origin-top rounded-full bg-primary\",\n                barStyle.width,\n                isOpen && barStyle.openBar\n              )}\n              initial={false}\n              animate={reduce ? { opacity: isOpen ? 1 : 0 } : barAnim}\n              transition={\n                reduce\n                  ? { duration: 0 }\n                  : { type: \"spring\" as const, stiffness: 320, damping: 30 }\n              }\n            />\n            <button\n              type=\"button\"\n              aria-expanded={isOpen}\n              onClick={() => toggle(item.value)}\n              className={cn(\n                headerBase,\n                headerPad[size],\n                \"hover:bg-[color-mix(in_oklab,var(--color-foreground)_5%,transparent)]\"\n              )}\n            >\n              {item.title}\n              <Chevron isOpen={isOpen} size={size} />\n            </button>\n            <Panel isOpen={isOpen} size={size}>\n              {item.content}\n            </Panel>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\n/* Bar: klasik ince sol bar, acikken dikey buyur. */\nexport function BarAccordion(props: StyledAccordionProps) {\n  return <AccentShell props={props} barStyle={{ width: \"w-1\", mode: \"grow\" }} />\n}\n\n/* Grow: a thicker bar, growing vertically when open plus a soft row fill. */\nexport function GrowAccordion(props: StyledAccordionProps) {\n  return (\n    <AccentShell\n      props={props}\n      barStyle={{\n        width: \"w-1.5\",\n        mode: \"grow\",\n        openBg: \"bg-[color-mix(in_oklab,var(--color-primary)_8%,transparent)]\",\n      }}\n    />\n  )\n}\n\n/* Glow: bar acikken parlar (primary tonlu golge). */\nexport function GlowAccordion(props: StyledAccordionProps) {\n  return (\n    <AccentShell\n      props={props}\n      barStyle={{\n        width: \"w-1\",\n        mode: \"grow\",\n        openBar:\n          \"shadow-[0_0_10px_2px_color-mix(in_oklab,var(--color-primary)_55%,transparent)]\",\n      }}\n    />\n  )\n}\n\n/* Left: bar soldan kayarak girer (slide-in). */\nexport function LeftAccordion(props: StyledAccordionProps) {\n  return <AccentShell props={props} barStyle={{ width: \"w-1\", mode: \"slide\" }} />\n}\n\n/* Full: a thick bar appearing with a fade plus a pronounced row fill. */\nexport function FullAccordion(props: StyledAccordionProps) {\n  return (\n    <AccentShell\n      props={props}\n      barStyle={{\n        width: \"w-2\",\n        mode: \"fade\",\n        openBg: \"bg-[color-mix(in_oklab,var(--color-primary)_12%,transparent)]\",\n      }}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/accordion-accent.tsx"
    }
  ],
  "categories": [
    "styled",
    "accordion"
  ],
  "type": "registry:component"
}