{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "resizable-accent",
  "title": "Accent resizable",
  "description": "Styled resizable: the Accent set. 5 decorative resizable variations (BarResizable, GlowResizable, RingResizable, FillResizable, EdgeResizable) 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"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/resizable-accent.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Accent resizable family: 5 self-contained split panels (NO panel library, NO\n   radix). The theme idea: a primary-colored handle that glows / stands out while\n   dragging (the dragging state). Each export holds an internal percentage (pct)\n   state; the separator is dragged with the pointer and adjusted with the arrow\n   keys. Deterministic (no Date.now / Math.random). The separator uses\n   role=\"separator\" + aria-orientation + aria-valuenow/min/max, tabIndex=0. Color\n   comes ONLY from semantic tokens; alpha via color-mix or the Tailwind /NN. Where\n   there is motion it is gated on useReducedMotion() (in reduced the handle glow\n   falls back to an instant color transition). */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\ntype Orientation = \"horizontal\" | \"vertical\"\n\nconst height: Record<StyledSize, string> = {\n  sm: \"h-40\",\n  md: \"h-56\",\n  lg: \"h-72\",\n  xl: \"h-96\",\n}\n\nconst MIN = 12\nconst MAX = 88\nconst clamp = (n: number) => Math.min(MAX, Math.max(MIN, n))\n\nconst focusRing =\n  \"outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n\n/* Ortak bolme mantigi: pct state + pointer/klavye tutamac handler'lari.\n   horizontal = sol/sag panel, dikey ayirici (yatay suruklenir).\n   vertical   = ust/alt panel, yatay ayirici (dikey suruklenir). */\nfunction useResizable(orientation: Orientation, initial = 50) {\n  const [pct, setPct] = React.useState(initial)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [dragging, setDragging] = React.useState(false)\n\n  const applyFromPoint = React.useCallback(\n    (clientX: number, clientY: number) => {\n      const el = containerRef.current\n      if (!el) return\n      const rect = el.getBoundingClientRect()\n      const raw =\n        orientation === \"horizontal\"\n          ? ((clientX - rect.left) / rect.width) * 100\n          : ((clientY - rect.top) / rect.height) * 100\n      setPct(clamp(raw))\n    },\n    [orientation]\n  )\n\n  const onPointerDown = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      e.preventDefault()\n      e.currentTarget.setPointerCapture(e.pointerId)\n      setDragging(true)\n    },\n    []\n  )\n\n  const onPointerMove = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) return\n      applyFromPoint(e.clientX, e.clientY)\n    },\n    [applyFromPoint]\n  )\n\n  const onPointerUp = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      if (e.currentTarget.hasPointerCapture(e.pointerId))\n        e.currentTarget.releasePointerCapture(e.pointerId)\n      setDragging(false)\n    },\n    []\n  )\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const dec = orientation === \"horizontal\" ? \"ArrowLeft\" : \"ArrowUp\"\n      const inc = orientation === \"horizontal\" ? \"ArrowRight\" : \"ArrowDown\"\n      if (e.key === dec) {\n        e.preventDefault()\n        setPct((p) => clamp(p - (e.shiftKey ? 10 : 2)))\n      } else if (e.key === inc) {\n        e.preventDefault()\n        setPct((p) => clamp(p + (e.shiftKey ? 10 : 2)))\n      } else if (e.key === \"Home\") {\n        e.preventDefault()\n        setPct(MIN)\n      } else if (e.key === \"End\") {\n        e.preventDefault()\n        setPct(MAX)\n      }\n    },\n    [orientation]\n  )\n\n  const separatorProps = {\n    role: \"separator\" as const,\n    \"aria-orientation\": (orientation === \"horizontal\" ? \"vertical\" : \"horizontal\") as\n      | \"vertical\"\n      | \"horizontal\",\n    \"aria-valuenow\": Math.round(pct),\n    \"aria-valuemin\": MIN,\n    \"aria-valuemax\": MAX,\n    tabIndex: 0,\n    onPointerDown,\n    onPointerMove,\n    onPointerUp,\n    onKeyDown,\n  }\n\n  return { pct, containerRef, dragging, separatorProps }\n}\n\ninterface ResizableProps {\n  className?: string\n  size?: StyledSize\n  start?: React.ReactNode\n  end?: React.ReactNode\n}\n\n/* Varsayilan panel: token yuzeyli, ortalanmis etiket. */\nfunction Pane({\n  label,\n  tone = \"bg-surface-2\",\n  className,\n  children,\n}: {\n  label?: string\n  tone?: string\n  className?: string\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex h-full w-full items-center justify-center overflow-hidden p-4 text-sm font-medium text-foreground\",\n        tone,\n        className\n      )}\n    >\n      {children ?? <span className=\"text-muted-foreground\">{label}</span>}\n    </div>\n  )\n}\n\nconst shell =\n  \"flex w-full select-none overflow-hidden rounded-xl border border-border\"\n\nconst spring = { type: \"spring\" as const, stiffness: 500, damping: 30 }\n\n/* BarResizable: primary dikey cubuk; suruklerken opaklik/olcek artar. */\nexport function BarResizable({ className, size = \"md\", start, end }: ResizableProps) {\n  const { pct, containerRef, dragging, separatorProps } = useResizable(\"horizontal\")\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"styled-resizable\" ref={containerRef} className={cn(shell, height[size], className)}>\n      <div style={{ width: `${pct}%` }} className=\"h-full\">\n        {start ?? <Pane label=\"Panel bir\" tone=\"bg-surface-2\" />}\n      </div>\n      <div\n        {...separatorProps}\n        className={cn(\n          \"relative flex h-full w-1.5 shrink-0 cursor-col-resize items-center justify-center bg-border transition-colors\",\n          focusRing,\n          \"after:absolute after:inset-y-0 after:-inset-x-1 after:content-['']\",\n          dragging ? \"bg-primary/20\" : \"hover:bg-primary/15\"\n        )}\n      >\n        <motion.span\n          aria-hidden=\"true\"\n          className={cn(\"h-10 w-1 rounded-full\", dragging ? \"bg-primary\" : \"bg-primary/60\")}\n          animate={reduce ? undefined : { scaleY: dragging ? 1.15 : 1 }}\n          transition={reduce ? { duration: 0 } : spring}\n        />\n      </div>\n      <div style={{ width: `${100 - pct}%` }} className=\"h-full\">\n        {end ?? <Pane label=\"Panel iki\" tone=\"bg-surface-3\" />}\n      </div>\n    </div>\n  )\n}\n\n/* GlowResizable: primary cubuk, suruklerken cevresine primary isik halesi (box-shadow) yayar. */\nexport function GlowResizable({ className, size = \"md\", start, end }: ResizableProps) {\n  const { pct, containerRef, dragging, separatorProps } = useResizable(\"horizontal\")\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"styled-resizable\" ref={containerRef} className={cn(shell, height[size], className)}>\n      <div style={{ width: `${pct}%` }} className=\"h-full\">\n        {start ?? <Pane label=\"Panel bir\" tone=\"bg-surface-2\" />}\n      </div>\n      <div\n        {...separatorProps}\n        className={cn(\n          \"relative flex h-full w-1.5 shrink-0 cursor-col-resize items-center justify-center\",\n          focusRing,\n          \"after:absolute after:inset-y-0 after:-inset-x-1 after:content-['']\"\n        )}\n      >\n        <motion.span\n          aria-hidden=\"true\"\n          className={cn(\n            \"h-full w-1 rounded-full transition-shadow\",\n            dragging\n              ? \"bg-primary shadow-[0_0_14px_2px_color-mix(in_oklab,var(--color-primary)_65%,transparent)]\"\n              : \"bg-primary/70 shadow-[0_0_0_0_color-mix(in_oklab,var(--color-primary)_0%,transparent)]\"\n          )}\n          animate={reduce ? undefined : { scale: dragging ? 1.05 : 1 }}\n          transition={reduce ? { duration: 0 } : spring}\n        />\n      </div>\n      <div style={{ width: `${100 - pct}%` }} className=\"h-full\">\n        {end ?? <Pane label=\"Panel iki\" tone=\"bg-surface-3\" />}\n      </div>\n    </div>\n  )\n}\n\n/* RingResizable: ortada primary halkali yuvarlak tutamac; suruklerken ici primary ile dolar. */\nexport function RingResizable({ className, size = \"md\", start, end }: ResizableProps) {\n  const { pct, containerRef, dragging, separatorProps } = useResizable(\"horizontal\")\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"styled-resizable\" ref={containerRef} className={cn(shell, height[size], className)}>\n      <div style={{ width: `${pct}%` }} className=\"h-full\">\n        {start ?? <Pane label=\"Panel bir\" tone=\"bg-surface-2\" />}\n      </div>\n      <div\n        {...separatorProps}\n        className={cn(\n          \"relative flex h-full w-1 shrink-0 cursor-col-resize items-center justify-center bg-border transition-colors\",\n          focusRing,\n          \"after:absolute after:inset-y-0 after:-inset-x-1.5 after:content-['']\",\n          dragging ? \"bg-primary/40\" : \"hover:bg-primary/20\"\n        )}\n      >\n        <motion.span\n          aria-hidden=\"true\"\n          className={cn(\n            \"z-10 size-4 rounded-full border-2 border-primary transition-colors\",\n            dragging ? \"bg-primary\" : \"bg-background\"\n          )}\n          animate={reduce ? undefined : { scale: dragging ? 1.2 : 1 }}\n          transition={reduce ? { duration: 0 } : spring}\n        />\n      </div>\n      <div style={{ width: `${100 - pct}%` }} className=\"h-full\">\n        {end ?? <Pane label=\"Panel iki\" tone=\"bg-surface-3\" />}\n      </div>\n    </div>\n  )\n}\n\n/* FillResizable: a thin line; while dragging the whole rail fills with a primary tint. */\nexport function FillResizable({ className, size = \"md\", start, end }: ResizableProps) {\n  const { pct, containerRef, dragging, separatorProps } = useResizable(\"horizontal\")\n  return (\n    <div data-slot=\"styled-resizable\" ref={containerRef} className={cn(shell, height[size], className)}>\n      <div style={{ width: `${pct}%` }} className=\"h-full\">\n        {start ?? <Pane label=\"Panel bir\" tone=\"bg-surface-2\" />}\n      </div>\n      <div\n        {...separatorProps}\n        className={cn(\n          \"relative h-full w-2 shrink-0 cursor-col-resize transition-colors\",\n          focusRing,\n          \"after:absolute after:inset-y-0 after:-inset-x-1 after:content-['']\",\n          dragging ? \"bg-primary\" : \"bg-primary/25 hover:bg-primary/40\"\n        )}\n      />\n      <div style={{ width: `${100 - pct}%` }} className=\"h-full\">\n        {end ?? <Pane label=\"Panel iki\" tone=\"bg-surface-3\" />}\n      </div>\n    </div>\n  )\n}\n\n/* EdgeResizable: a thin separator; while dragging the neighbouring panel edges light up with a primary line. */\nexport function EdgeResizable({ className, size = \"md\", start, end }: ResizableProps) {\n  const { pct, containerRef, dragging, separatorProps } = useResizable(\"horizontal\")\n  return (\n    <div data-slot=\"styled-resizable\" ref={containerRef} className={cn(shell, height[size], className)}>\n      <div\n        style={{ width: `${pct}%` }}\n        className={cn(\n          \"h-full border-r-2 transition-colors\",\n          dragging ? \"border-primary\" : \"border-transparent\"\n        )}\n      >\n        {start ?? <Pane label=\"Panel bir\" tone=\"bg-surface-2\" />}\n      </div>\n      <div\n        {...separatorProps}\n        className={cn(\n          \"relative h-full w-px shrink-0 cursor-col-resize transition-colors\",\n          focusRing,\n          \"after:absolute after:inset-y-0 after:-inset-x-1.5 after:content-['']\",\n          dragging ? \"bg-primary\" : \"bg-border hover:bg-primary/50\"\n        )}\n      />\n      <div\n        style={{ width: `${100 - pct}%` }}\n        className={cn(\n          \"h-full border-l-2 transition-colors\",\n          dragging ? \"border-primary\" : \"border-transparent\"\n        )}\n      >\n        {end ?? <Pane label=\"Panel iki\" tone=\"bg-surface-3\" />}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/resizable-accent.tsx"
    }
  ],
  "categories": [
    "styled",
    "resizable"
  ],
  "type": "registry:component"
}