{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "code-tabs", "type": "registry:ui", "title": "Code Tabs", "description": "Package manager or language tabs that remember the choice across every block.", "categories": [ "developer" ], "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/motion.json", "https://www.stealth.pm/r/code-block.json", "https://www.stealth.pm/r/copy-button.json" ], "files": [ { "path": "components/ui/code-tabs.tsx", "content": "\"use client\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from \"react\";\nimport { CopyButton } from \"@/components/ui/copy-button\";\nimport { CodeLines, Hint, resolveLanguage, tokenize, useSideScroll } from \"@/components/ui/code-block\";\nimport { cn } from \"@/lib/cn\";\nimport { ease } from \"@/lib/motion\";\n\n/* -------------------------------------------------------------------------------------------------\n * A preference shared by every instance with the same key: on this page through an event,\n * in other tabs through the storage event, and across visits through localStorage.\n * -----------------------------------------------------------------------------------------------*/\n\nconst EVENT = \"stealth:preference\";\nconst storageKey = (key: string) => `stealth:${key}`;\n\nfunction read(key: string) {\n try {\n return localStorage.getItem(storageKey(key));\n } catch {\n return null; // Private windows and blocked storage: behave as if nothing was saved.\n }\n}\n\n/** Reads and writes a synced preference. Returns null until a value has been chosen (and always on the server). */\nexport function usePreference(key: string | undefined) {\n const subscribe = useCallback(\n (notify: () => void) => {\n if (!key) return () => {};\n const onStorage = (e: StorageEvent) => e.key === storageKey(key) && notify();\n const onLocal = (e: Event) => (e as CustomEvent<{ key: string }>).detail?.key === key && notify();\n window.addEventListener(\"storage\", onStorage);\n window.addEventListener(EVENT, onLocal);\n return () => {\n window.removeEventListener(\"storage\", onStorage);\n window.removeEventListener(EVENT, onLocal);\n };\n },\n [key],\n );\n const value = useSyncExternalStore(\n subscribe,\n () => (key ? read(key) : null),\n () => null,\n );\n const set = useCallback(\n (next: string) => {\n if (!key) return;\n try {\n localStorage.setItem(storageKey(key), next);\n } catch {}\n window.dispatchEvent(new CustomEvent(EVENT, { detail: { key, value: next } }));\n },\n [key],\n );\n return [value, set] as const;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CodeTabs\n * -----------------------------------------------------------------------------------------------*/\n\nexport type CodeTabsItem = {\n value: string;\n label: React.ReactNode;\n code: string;\n /** Language name, alias or extension. Falls back to the filename's extension, then plain text. */\n lang?: string;\n /** Shown beside the copy button while this tab is active. */\n filename?: string;\n /** 14px icon before the label. */\n icon?: React.ReactNode;\n};\n\nexport type CodeTabsProps = Omit, \"defaultValue\" | \"onChange\"> & {\n items: CodeTabsItem[];\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n /**\n * Shares the choice with every CodeTabs using the same key, in this tab, in other tabs,\n * and on the next visit. Use \"package-manager\" for install commands.\n */\n syncKey?: string;\n lineNumbers?: boolean;\n /** Accessible name for the tab list, e.g. \"Package manager\". */\n label?: string;\n};\n\nexport function CodeTabs({\n items,\n value: valueProp,\n defaultValue,\n onValueChange,\n syncKey,\n lineNumbers = false,\n label = \"Code variant\",\n className,\n onKeyDownCapture,\n onPointerDownCapture,\n ...rest\n}: CodeTabsProps) {\n const reduce = useReducedMotion();\n const [synced, setSynced] = usePreference(syncKey);\n const [inner, setInner] = useState(defaultValue ?? items[0]?.value);\n const has = (v: string | null | undefined): v is string => !!v && items.some((i) => i.value === v);\n // The prop wins, then the shared choice (if this block offers it), then this block's own state.\n const value = valueProp !== undefined ? valueProp : has(synced) ? synced : has(inner) ? inner : items[0]?.value;\n const active = items.find((i) => i.value === value) ?? items[0];\n\n // One gutter width for every tab, so switching from a 9-line to a 10-line snippet doesn't nudge the code.\n const digits = String(Math.max(...items.map((i) => i.code.replace(/\\n$/, \"\").split(\"\\n\").length))).length;\n const list = useRef(null);\n const overflows = useSideScroll(list);\n\n const change = (next: string) => {\n if (next === value) return;\n setInner(next);\n setSynced(next);\n onValueChange?.(next);\n };\n\n if (!active) return null;\n\n return (\n change(String(v))}\n // Pointer switches animate; arrow keys and changes synced from elsewhere land on the same frame.\n onKeyDownCapture={(e) => {\n e.currentTarget.dataset.nav = \"key\";\n onKeyDownCapture?.(e);\n }}\n onPointerDownCapture={(e) => {\n e.currentTarget.dataset.nav = \"pointer\";\n onPointerDownCapture?.(e);\n }}\n className={cn(\"group/ct flex min-w-0 flex-col overflow-hidden rounded-xl border border-line bg-raised shadow-[var(--shadow)]\", className)}\n {...rest}\n >\n
\n \n {items.map((item) => (\n \n \n {item.icon && {item.icon}}\n {item.label}\n \n \n ))}\n \n \n\n
\n {items.some((i) => i.filename) && (\n // Every filename shares one cell, so the header never shifts as they swap.\n \n {items.map((i) => (\n \n {i.filename}\n \n ))}\n \n \n {active.filename}\n \n \n \n )}\n \n \n \n \n \n
\n
\n\n \n {items.map((item) => (\n \n \n \n ))}\n \n \n );\n}\n\n// Glides between panels of different heights instead of snapping.\nfunction Panels({ children }: { children: React.ReactNode }) {\n const reduce = useReducedMotion();\n const inner = useRef(null);\n const [height, setHeight] = useState(\"auto\");\n useEffect(() => {\n const el = inner.current;\n if (!el) return;\n const ro = new ResizeObserver(() => setHeight(el.offsetHeight));\n ro.observe(el);\n return () => ro.disconnect();\n }, []);\n return (\n \n
\n {children}\n
\n \n );\n}\n\nfunction Code({ item, lineNumbers, minDigits }: { item: CodeTabsItem; lineNumbers: boolean; minDigits: number }) {\n const scroller = useRef(null);\n const overflows = useSideScroll(scroller);\n const lines = useMemo(() => tokenize(item.code, resolveLanguage(item.lang, item.filename)), [item.code, item.lang, item.filename]);\n return (\n \n \n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/code-tabs" }