{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "Hand-drawn tabs with rough active-tab underline indicator.",
  "dependencies": [
    "roughjs"
  ],
  "registryDependencies": [
    "https://www.bydefaulthuman.fun/r/use-rough.json",
    "https://www.bydefaulthuman.fun/r/crumble-theme.json",
    "https://www.bydefaulthuman.fun/r/rough-lib.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/tabs.tsx",
      "content": "\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { useRough } from \"@/hooks/use-rough\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  CrumbleContext,\n  randomSeed,\n  resolveRoughVars,\n  type CrumbleColorProps,\n  type CrumbleTheme,\n} from \"@/lib/rough\";\n\ninterface TabsContextValue {\n  activeTab: string;\n  animateOnHover: boolean;\n  setActiveTab: (value: string) => void;\n  theme: CrumbleTheme;\n}\n\nconst TabsContext = createContext<TabsContextValue>({\n  activeTab: \"\",\n  animateOnHover: true,\n  setActiveTab: () => {},\n  theme: \"pencil\",\n});\n\nexport interface TabsProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CrumbleColorProps {\n  animateOnHover?: boolean;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  theme?: CrumbleTheme;\n  value?: string;\n}\n\nexport function Tabs({\n  animateOnHover = true,\n  children,\n  className,\n  defaultValue = \"\",\n  fill,\n  onValueChange,\n  stroke,\n  strokeMuted,\n  theme: themeProp,\n  value: controlledValue,\n  ...props\n}: TabsProps) {\n  const { theme: contextTheme } = useContext(CrumbleContext);\n  const theme = themeProp ?? contextTheme;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const activeTab = controlledValue ?? internalValue;\n  const roughStyle = resolveRoughVars({ stroke, strokeMuted, fill });\n\n  const setActiveTab = (next: string) => {\n    setInternalValue(next);\n    onValueChange?.(next);\n  };\n\n  return (\n    <TabsContext.Provider value={{ activeTab, animateOnHover, setActiveTab, theme }}>\n      <div\n        className={cn(\"flex flex-col gap-0\", className)}\n        style={roughStyle}\n        {...props}\n      >\n        {children}\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport interface TabsListProps extends HTMLAttributes<HTMLDivElement> {}\n\nexport function TabsList({ children, className, ...props }: TabsListProps) {\n  return (\n    <div\n      role=\"tablist\"\n      className={cn(\"flex gap-1 border-b border-border pb-0\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  disabled?: boolean;\n  value: string;\n}\n\nexport function TabsTrigger({\n  children,\n  className,\n  disabled,\n  value,\n  ...props\n}: TabsTriggerProps) {\n  const { activeTab, animateOnHover, setActiveTab, theme } =\n    useContext(TabsContext);\n  const active = activeTab === value;\n  const btnRef = useRef<HTMLButtonElement>(null);\n  const externalSvgRef = useRef<SVGSVGElement>(null);\n  const { drawLine, svgRef } = useRough({\n    stableId: `tab-trigger-${value}`,\n    svgRef: externalSvgRef,\n    theme,\n    variant: \"border\",\n  });\n\n  const draw = useCallback(\n    (reseed = false) => {\n      const btn = btnRef.current;\n      const svg = svgRef.current;\n      if (!btn || !svg) return;\n\n      svg.replaceChildren();\n\n      const w = btn.offsetWidth;\n      const h = btn.offsetHeight;\n      svg.setAttribute(\"width\", String(w));\n      svg.setAttribute(\"height\", String(h));\n      svg.setAttribute(\"viewBox\", `0 0 ${w} ${h}`);\n\n      if (active) {\n        const line = drawLine(2, h - 1, w - 2, h - 1, {\n          seed: reseed ? randomSeed() : undefined,\n          stroke: \"currentColor\",\n          strokeWidth: theme === \"crayon\" ? 3 : theme === \"ink\" ? 2 : 1.5,\n        });\n        if (line) svg.appendChild(line);\n      }\n    },\n    [active, drawLine, svgRef, theme],\n  );\n\n  useEffect(() => {\n    const id = requestAnimationFrame(() => draw());\n    return () => cancelAnimationFrame(id);\n  }, [draw]);\n\n  useEffect(() => {\n    const btn = btnRef.current;\n    if (!btn) return;\n    const ro = new ResizeObserver(() => draw());\n    ro.observe(btn);\n    return () => ro.disconnect();\n  }, [draw]);\n\n  return (\n    <button\n      ref={btnRef}\n      role=\"tab\"\n      aria-selected={active}\n      disabled={disabled}\n      className={cn(\n        \"relative pb-2 pt-1 px-3 text-sm outline-none transition-colors select-none\",\n        active\n          ? \"font-medium text-foreground\"\n          : \"text-muted-foreground hover:text-foreground\",\n        disabled && \"cursor-not-allowed opacity-40\",\n        className,\n      )}\n      onClick={() => {\n        if (!disabled) setActiveTab(value);\n      }}\n      onMouseEnter={() => {\n        if (!disabled && animateOnHover && active) draw(true);\n      }}\n      onMouseLeave={() => {\n        if (!disabled && animateOnHover && active) draw(false);\n      }}\n      {...(props as HTMLAttributes<HTMLButtonElement>)}\n    >\n      <svg\n        ref={externalSvgRef}\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 overflow-visible\"\n      />\n      <span className=\"relative\">{children}</span>\n    </button>\n  );\n}\n\nexport interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n}\n\nexport function TabsContent({\n  children,\n  className,\n  value,\n  ...props\n}: TabsContentProps) {\n  const { activeTab } = useContext(TabsContext);\n  if (activeTab !== value) return null;\n\n  return (\n    <div role=\"tabpanel\" className={cn(\"mt-4 outline-none\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/crumble/ui/tabs.tsx"
    }
  ],
  "type": "registry:ui"
}