{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-tabs",
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "motion",
    "next-themes",
    "shiki"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/code-tabs.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { useTheme } from 'next-themes';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { CheckIcon, CopyIcon } from 'lucide-react';\nimport { motion, type Transition, type HTMLMotionProps, AnimatePresence, isMotionComponent } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ntype CodeTabsProps = {\n  codes: Record<string, string>;\n  lang?: string;\n  themes?: { light: string; dark: string };\n  copyButton?: boolean;\n  onCopiedChange?: (copied: boolean, content?: string) => void;\n} & Omit<TabsProps, 'children'>;\n\nfunction CodeTabs({\n  codes,\n  lang = 'bash',\n  themes = {\n    light: 'github-light',\n    dark: 'github-dark',\n  },\n  className,\n  defaultValue,\n  value,\n  onValueChange,\n  copyButton = true,\n  onCopiedChange,\n  ...props\n}: CodeTabsProps) {\n  const { resolvedTheme } = useTheme();\n\n  const [highlightedCodes, setHighlightedCodes] = React.useState<Record<\n    string,\n    string\n  > | null>(null);\n  const [selectedCode, setSelectedCode] = React.useState<string>(\n    value ?? defaultValue ?? Object.keys(codes)[0] ?? '',\n  );\n\n  React.useEffect(() => {\n    async function loadHighlightedCode() {\n      try {\n        const { codeToHtml } = await import('shiki');\n        const newHighlightedCodes: Record<string, string> = {};\n\n        for (const [command, val] of Object.entries(codes)) {\n          const highlighted = await codeToHtml(val, {\n            lang,\n            themes: {\n              light: themes.light,\n              dark: themes.dark,\n            },\n            defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',\n          });\n\n          newHighlightedCodes[command] = highlighted;\n        }\n\n        setHighlightedCodes(newHighlightedCodes);\n      } catch (error) {\n        console.error('Error highlighting codes', error);\n        setHighlightedCodes(codes);\n      }\n    }\n    loadHighlightedCode();\n  }, [resolvedTheme, lang, themes.light, themes.dark, codes]);\n\n  return (\n    <Tabs\n      data-slot=\"install-tabs\"\n      className={cn(\n        'w-full gap-0 bg-muted/50 rounded-xl border overflow-hidden',\n        className,\n      )}\n      {...props}\n      value={selectedCode}\n      onValueChange={(val) => {\n        setSelectedCode(val);\n        onValueChange?.(val);\n      }}\n    >\n      <TabsHighlight className=\"absolute z-0 inset-0 rounded-none shadow-none bg-transparent after:content-[''] after:absolute after:inset-x-0 after:h-0.5 after:bottom-0 dark:after:bg-white after:bg-black after:rounded-t-full\">\n        <TabsList\n          data-slot=\"install-tabs-list\"\n          className=\"w-full relative flex items-center justify-between rounded-none h-10 bg-muted border-b border-border/75 dark:border-border/50 text-current py-0 px-4\"\n        >\n          <div className=\"flex gap-x-3 h-full\">\n            {highlightedCodes &&\n              Object.keys(highlightedCodes).map((code) => (\n                <TabsHighlightItem\n                  key={code}\n                  value={code}\n                  className=\"flex items-center justify-center\"\n                >\n                  <TabsTrigger\n                    key={code}\n                    value={code}\n                    className=\"text-muted-foreground h-full text-sm font-medium data-[state=active]:text-current px-0\"\n                  >\n                    {code}\n                  </TabsTrigger>\n                </TabsHighlightItem>\n              ))}\n          </div>\n\n          {copyButton && highlightedCodes && (\n            <CopyButton\n              content={codes[selectedCode]}\n              size=\"xs\"\n              variant=\"ghost\"\n              className=\"-me-2.5 bg-transparent hover:bg-black/5 dark:hover:bg-white/10\"\n              onCopiedChange={onCopiedChange}\n            />\n          )}\n        </TabsList>\n      </TabsHighlight>\n\n      <TabsContents data-slot=\"install-tabs-contents\">\n        {highlightedCodes &&\n          Object.entries(highlightedCodes).map(([code, val]) => (\n            <TabsContent\n              data-slot=\"install-tabs-content\"\n              key={code}\n              className=\"w-full\"\n              value={code}\n            >\n              <div\n                className=\"w-full text-sm overflow-auto flex items-center p-4 [&>pre,_&_code]:!bg-transparent [&_code_.line]:!px-0 [&>pre,_&_code]:[background:transparent_!important] [&>pre,_&_code]:border-none [&_code]:!text-[13px]\"\n                dangerouslySetInnerHTML={{ __html: val }}\n              />\n            </TabsContent>\n          ))}\n      </TabsContents>\n    </Tabs>\n  );\n}\n\nexport { CodeTabs, type CodeTabsProps };\n\n\n\ntype TabsContextType = {\n  activeValue: string;\n  handleValueChange: (value: string) => void;\n  registerTrigger: (value: string, node: HTMLElement | null) => void;\n};\n\nconst [TabsProvider, useTabs] =\n  getStrictContext<TabsContextType>('TabsContext');\n\ntype BaseTabsProps = React.ComponentProps<'div'> & {\n  children: React.ReactNode;\n};\n\ntype UnControlledTabsProps = BaseTabsProps & {\n  defaultValue?: string;\n  value?: never;\n  onValueChange?: never;\n};\n\ntype ControlledTabsProps = BaseTabsProps & {\n  value: string;\n  onValueChange?: (value: string) => void;\n  defaultValue?: never;\n};\n\ntype TabsProps = UnControlledTabsProps | ControlledTabsProps;\n\nfunction Tabs({\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n  ...props\n}: TabsProps) {\n  const [activeValue, setActiveValue] = React.useState<string | undefined>(\n    defaultValue,\n  );\n  const triggersRef = React.useRef(new Map<string, HTMLElement>());\n  const initialSet = React.useRef(false);\n  const isControlled = value !== undefined;\n\n  React.useEffect(() => {\n    if (\n      !isControlled &&\n      activeValue === undefined &&\n      triggersRef.current.size > 0 &&\n      !initialSet.current\n    ) {\n      const firstTab = triggersRef.current.keys().next().value as\n        | string\n        | undefined;\n      if (firstTab !== undefined) {\n        setActiveValue(firstTab);\n        initialSet.current = true;\n      }\n    }\n  }, [activeValue, isControlled]);\n\n  const registerTrigger = React.useCallback(\n    (val: string, node: HTMLElement | null) => {\n      if (node) {\n        triggersRef.current.set(val, node);\n        if (!isControlled && activeValue === undefined && !initialSet.current) {\n          setActiveValue(val);\n          initialSet.current = true;\n        }\n      } else {\n        triggersRef.current.delete(val);\n      }\n    },\n    [activeValue, isControlled],\n  );\n\n  const handleValueChange = React.useCallback(\n    (val: string) => {\n      if (!isControlled) setActiveValue(val);\n      else onValueChange?.(val);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return (\n    <TabsProvider\n      value={{\n        activeValue: (value ?? activeValue) as string,\n        handleValueChange,\n        registerTrigger,\n      }}\n    >\n      <div data-slot=\"tabs\" {...props}>\n        {children}\n      </div>\n    </TabsProvider>\n  );\n}\n\ntype TabsHighlightProps = Omit<HighlightProps, 'controlledItems' | 'value'>;\n\nfunction TabsHighlight({\n  transition = { type: 'spring', stiffness: 200, damping: 25 },\n  ...props\n}: TabsHighlightProps) {\n  const { activeValue } = useTabs();\n\n  return (\n    <Highlight\n      data-slot=\"tabs-highlight\"\n      controlledItems\n      value={activeValue}\n      transition={transition}\n      click={false}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = React.ComponentProps<'div'> & {\n  children: React.ReactNode;\n};\n\nfunction TabsList(props: TabsListProps) {\n  return <div role=\"tablist\" data-slot=\"tabs-list\" {...props} />;\n}\n\ntype TabsHighlightItemProps = HighlightItemProps & {\n  value: string;\n};\n\nfunction TabsHighlightItem(props: TabsHighlightItemProps) {\n  return <HighlightItem data-slot=\"tabs-highlight-item\" {...props} />;\n}\n\ntype TabsTriggerProps = WithAsChild<\n  {\n    value: string;\n    children: React.ReactNode;\n  } & HTMLMotionProps<'button'>\n>;\n\nfunction TabsTrigger({\n  ref,\n  value,\n  asChild = false,\n  ...props\n}: TabsTriggerProps) {\n  const { activeValue, handleValueChange, registerTrigger } = useTabs();\n\n  const localRef = React.useRef<HTMLButtonElement | null>(null);\n  React.useImperativeHandle(ref, () => localRef.current as HTMLButtonElement);\n\n  React.useEffect(() => {\n    registerTrigger(value, localRef.current);\n    return () => registerTrigger(value, null);\n  }, [value, registerTrigger]);\n\n  const Component = asChild ? Slot : motion.button;\n\n  return (\n    <Component\n      ref={localRef}\n      data-slot=\"tabs-trigger\"\n      role=\"tab\"\n      onClick={() => handleValueChange(value)}\n      data-state={activeValue === value ? 'active' : 'inactive'}\n      {...props}\n    />\n  );\n}\n\ntype TabsContentsProps = HTMLMotionProps<'div'> & {\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\nfunction TabsContents({\n  children,\n  transition = {\n    type: 'spring',\n    stiffness: 300,\n    damping: 30,\n    bounce: 0,\n    restDelta: 0.01,\n  },\n  ...props\n}: TabsContentsProps) {\n  const { activeValue } = useTabs();\n  const childrenArray = React.Children.toArray(children);\n  const activeIndex = childrenArray.findIndex(\n    (child): child is React.ReactElement<{ value: string }> =>\n      React.isValidElement(child) &&\n      typeof child.props === 'object' &&\n      child.props !== null &&\n      'value' in child.props &&\n      child.props.value === activeValue,\n  );\n\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n  const itemRefs = React.useRef<Array<HTMLDivElement | null>>([]);\n  const [height, setHeight] = React.useState(0);\n  const roRef = React.useRef<ResizeObserver | null>(null);\n\n  const measure = React.useCallback((index: number) => {\n    const pane = itemRefs.current[index];\n    const container = containerRef.current;\n    if (!pane || !container) return 0;\n\n    const base = pane.getBoundingClientRect().height || 0;\n\n    const cs = getComputedStyle(container);\n    const isBorderBox = cs.boxSizing === 'border-box';\n    const paddingY =\n      (parseFloat(cs.paddingTop || '0') || 0) +\n      (parseFloat(cs.paddingBottom || '0') || 0);\n    const borderY =\n      (parseFloat(cs.borderTopWidth || '0') || 0) +\n      (parseFloat(cs.borderBottomWidth || '0') || 0);\n\n    let total = base + (isBorderBox ? paddingY + borderY : 0);\n\n    const dpr =\n      typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;\n    total = Math.ceil(total * dpr) / dpr;\n\n    return total;\n  }, []);\n\n  React.useEffect(() => {\n    if (roRef.current) {\n      roRef.current.disconnect();\n      roRef.current = null;\n    }\n\n    const pane = itemRefs.current[activeIndex];\n    const container = containerRef.current;\n    if (!pane || !container) return;\n\n    setHeight(measure(activeIndex));\n\n    const ro = new ResizeObserver(() => {\n      const next = measure(activeIndex);\n      requestAnimationFrame(() => setHeight(next));\n    });\n\n    ro.observe(pane);\n    ro.observe(container);\n\n    roRef.current = ro;\n    return () => {\n      ro.disconnect();\n      roRef.current = null;\n    };\n  }, [activeIndex, childrenArray.length, measure]);\n\n  React.useLayoutEffect(() => {\n    if (height === 0 && activeIndex >= 0) {\n      const next = measure(activeIndex);\n      if (next !== 0) setHeight(next);\n    }\n  }, [activeIndex, height, measure]);\n\n  return (\n    <motion.div\n      ref={containerRef}\n      data-slot=\"tabs-contents\"\n      style={{ overflow: 'hidden' }}\n      animate={{ height }}\n      transition={transition}\n      {...props}\n    >\n      <motion.div\n        className=\"flex -mx-2\"\n        animate={{ x: activeIndex * -100 + '%' }}\n        transition={transition}\n      >\n        {childrenArray.map((child, index) => (\n          <div\n            key={index}\n            ref={(el) => {\n              itemRefs.current[index] = el;\n            }}\n            className=\"w-full shrink-0 px-2 h-full\"\n          >\n            {child}\n          </div>\n        ))}\n      </motion.div>\n    </motion.div>\n  );\n}\n\ntype TabsContentProps = WithAsChild<\n  {\n    value: string;\n    children: React.ReactNode;\n  } & HTMLMotionProps<'div'>\n>;\n\nfunction TabsContent({\n  value,\n  style,\n  asChild = false,\n  ...props\n}: TabsContentProps) {\n  const { activeValue } = useTabs();\n  const isActive = activeValue === value;\n\n  const Component = asChild ? Slot : motion.div;\n\n  return (\n    <Component\n      role=\"tabpanel\"\n      data-slot=\"tabs-content\"\n      inert={!isActive}\n      style={{ overflow: 'hidden', ...style }}\n      initial={{ filter: 'blur(0px)' }}\n      animate={{ filter: isActive ? 'blur(0px)' : 'blur(4px)' }}\n      exit={{ filter: 'blur(0px)' }}\n      transition={{ type: 'spring', stiffness: 200, damping: 25 }}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  useTabs,\n  type TabsProps,\n  type TabsListProps,\n  type TabsHighlightProps,\n  type TabsHighlightItemProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n  type TabsContextType,\n};\n\n\nfunction getStrictContext<T>(\n  name?: string,\n): readonly [\n  ({\n    value,\n    children,\n  }: {\n    value: T;\n    children?: React.ReactNode;\n  }) => React.JSX.Element,\n  () => T,\n] {\n  const Context = React.createContext<T | undefined>(undefined);\n\n  const Provider = ({\n    value,\n    children,\n  }: {\n    value: T;\n    children?: React.ReactNode;\n  }) => <Context.Provider value={value}>{children}</Context.Provider>;\n\n  const useSafeContext = () => {\n    const ctx = React.useContext(Context);\n    if (ctx === undefined) {\n      throw new Error(`useContext must be used within ${name ?? 'a Provider'}`);\n    }\n    return ctx;\n  };\n\n  return [Provider, useSafeContext] as const;\n}\n\nexport { getStrictContext };\n\n\n\n\nconst buttonVariants = cva(\n  \"flex items-center justify-center rounded-md transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',\n        accent: 'bg-accent text-accent-foreground shadow-xs hover:bg-accent/90',\n        destructive:\n          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'size-9',\n        xs: \"size-7 [&_svg:not([class*='size-'])]:size-3.5 rounded-md\",\n        sm: 'size-8 rounded-md',\n        lg: 'size-10 rounded-md',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\ntype CopyButtonProps = Omit<ButtonProps, 'children'> &\n  VariantProps<typeof buttonVariants> & {\n    content: string;\n    copied?: boolean;\n    onCopiedChange?: (copied: boolean, content?: string) => void;\n    delay?: number;\n  };\n\nfunction CopyButton({\n  className,\n  content,\n  copied,\n  onCopiedChange,\n  onClick,\n  variant,\n  size,\n  delay = 3000,\n  ...props\n}: CopyButtonProps) {\n  const [isCopied, setIsCopied] = useControlledState({\n    value: copied,\n    onChange: onCopiedChange,\n  });\n\n  const handleCopy = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e);\n      if (copied) return;\n      if (content) {\n        navigator.clipboard\n          .writeText(content)\n          .then(() => {\n            setIsCopied(true);\n            onCopiedChange?.(true, content);\n            setTimeout(() => {\n              setIsCopied(false);\n              onCopiedChange?.(false);\n            }, delay);\n          })\n          .catch((error) => {\n            console.error('Error copying command', error);\n          });\n      }\n    },\n    [onClick, copied, content, setIsCopied, onCopiedChange, delay],\n  );\n\n  const Icon = isCopied ? CheckIcon : CopyIcon;\n\n  return (\n    <Button\n      data-slot=\"copy-button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      onClick={handleCopy}\n      {...props}\n    >\n      <AnimatePresence mode=\"popLayout\">\n        <motion.span\n          key={isCopied ? 'check' : 'copy'}\n          data-slot=\"copy-button-icon\"\n          initial={{ scale: 0, opacity: 0.4, filter: 'blur(4px)' }}\n          animate={{ scale: 1, opacity: 1, filter: 'blur(0px)' }}\n          exit={{ scale: 0, opacity: 0.4, filter: 'blur(4px)' }}\n          transition={{ duration: 0.25 }}\n        >\n          <Icon />\n        </motion.span>\n      </AnimatePresence>\n    </Button>\n  );\n}\n\nexport { CopyButton, buttonVariants, type CopyButtonProps };\n\n\ninterface CommonControlledStateProps<T> {\n  value?: T;\n  defaultValue?: T;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useControlledState<T, Rest extends any[] = []>(\n  props: CommonControlledStateProps<T> & {\n    onChange?: (value: T, ...args: Rest) => void;\n  },\n): readonly [T, (next: T, ...args: Rest) => void] {\n  const { value, defaultValue, onChange } = props;\n\n  const [state, setInternalState] = React.useState<T>(\n    value !== undefined ? value : (defaultValue as T),\n  );\n\n  React.useEffect(() => {\n    if (value !== undefined) setInternalState(value);\n  }, [value]);\n\n  const setState = React.useCallback(\n    (next: T, ...args: Rest) => {\n      setInternalState(next);\n      onChange?.(next, ...args);\n    },\n    [onChange],\n  );\n\n  return [state, setState] as const;\n}\n\n\ntype HighlightMode = 'children' | 'parent';\n\ntype Bounds = {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n};\n\nconst DEFAULT_BOUNDS_OFFSET: Bounds = {\n  top: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n};\n\ntype HighlightContextType<T extends string> = {\n  as?: keyof HTMLElementTagNameMap;\n  mode: HighlightMode;\n  activeValue: T | null;\n  setActiveValue: (value: T | null) => void;\n  setBounds: (bounds: DOMRect) => void;\n  clearBounds: () => void;\n  id: string;\n  hover: boolean;\n  click: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  activeClassName?: string;\n  setActiveClassName: (className: string) => void;\n  transition?: Transition;\n  disabled?: boolean;\n  enabled?: boolean;\n  exitDelay?: number;\n  forceUpdateBounds?: boolean;\n};\n\nconst HighlightContext = React.createContext<\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  HighlightContextType<any> | undefined\n>(undefined);\n\nfunction useHighlight<T extends string>(): HighlightContextType<T> {\n  const context = React.useContext(HighlightContext);\n  if (!context) {\n    throw new Error('useHighlight must be used within a HighlightProvider');\n  }\n  return context as unknown as HighlightContextType<T>;\n}\n\ntype BaseHighlightProps<T extends React.ElementType = 'div'> = {\n  as?: T;\n  ref?: React.Ref<HTMLDivElement>;\n  mode?: HighlightMode;\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string | null) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  transition?: Transition;\n  hover?: boolean;\n  click?: boolean;\n  disabled?: boolean;\n  enabled?: boolean;\n  exitDelay?: number;\n};\n\ntype ParentModeHighlightProps = {\n  boundsOffset?: Partial<Bounds>;\n  containerClassName?: string;\n  forceUpdateBounds?: boolean;\n};\n\ntype ControlledParentModeHighlightProps<T extends React.ElementType = 'div'> =\n  BaseHighlightProps<T> &\n    ParentModeHighlightProps & {\n      mode: 'parent';\n      controlledItems: true;\n      children: React.ReactNode;\n    };\n\ntype ControlledChildrenModeHighlightProps<T extends React.ElementType = 'div'> =\n  BaseHighlightProps<T> & {\n    mode?: 'children' | undefined;\n    controlledItems: true;\n    children: React.ReactNode;\n  };\n\ntype UncontrolledParentModeHighlightProps<T extends React.ElementType = 'div'> =\n  BaseHighlightProps<T> &\n    ParentModeHighlightProps & {\n      mode: 'parent';\n      controlledItems?: false;\n      itemsClassName?: string;\n      children: React.ReactElement | React.ReactElement[];\n    };\n\ntype UncontrolledChildrenModeHighlightProps<\n  T extends React.ElementType = 'div',\n> = BaseHighlightProps<T> & {\n  mode?: 'children';\n  controlledItems?: false;\n  itemsClassName?: string;\n  children: React.ReactElement | React.ReactElement[];\n};\n\ntype HighlightProps<T extends React.ElementType = 'div'> =\n  | ControlledParentModeHighlightProps<T>\n  | ControlledChildrenModeHighlightProps<T>\n  | UncontrolledParentModeHighlightProps<T>\n  | UncontrolledChildrenModeHighlightProps<T>;\n\nfunction Highlight<T extends React.ElementType = 'div'>({\n  ref,\n  ...props\n}: HighlightProps<T>) {\n  const {\n    as: Component = 'div',\n    children,\n    value,\n    defaultValue,\n    onValueChange,\n    className,\n    style,\n    transition = { type: 'spring', stiffness: 350, damping: 35 },\n    hover = false,\n    click = true,\n    enabled = true,\n    controlledItems,\n    disabled = false,\n    exitDelay = 200,\n    mode = 'children',\n  } = props;\n\n  const localRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);\n\n  const propsBoundsOffset = (props as ParentModeHighlightProps)?.boundsOffset;\n  const boundsOffset = propsBoundsOffset ?? DEFAULT_BOUNDS_OFFSET;\n  const boundsOffsetTop = boundsOffset.top ?? 0;\n  const boundsOffsetLeft = boundsOffset.left ?? 0;\n  const boundsOffsetWidth = boundsOffset.width ?? 0;\n  const boundsOffsetHeight = boundsOffset.height ?? 0;\n\n  const boundsOffsetRef = React.useRef({\n    top: boundsOffsetTop,\n    left: boundsOffsetLeft,\n    width: boundsOffsetWidth,\n    height: boundsOffsetHeight,\n  });\n\n  React.useEffect(() => {\n    boundsOffsetRef.current = {\n      top: boundsOffsetTop,\n      left: boundsOffsetLeft,\n      width: boundsOffsetWidth,\n      height: boundsOffsetHeight,\n    };\n  }, [\n    boundsOffsetTop,\n    boundsOffsetLeft,\n    boundsOffsetWidth,\n    boundsOffsetHeight,\n  ]);\n\n  const [activeValue, setActiveValue] = React.useState<string | null>(\n    value ?? defaultValue ?? null,\n  );\n  const [boundsState, setBoundsState] = React.useState<Bounds | null>(null);\n  const [activeClassNameState, setActiveClassNameState] =\n    React.useState<string>('');\n\n  const safeSetActiveValue = (id: string | null) => {\n    setActiveValue((prev) => {\n      if (prev !== id) {\n        onValueChange?.(id);\n        return id;\n      }\n      return prev;\n    });\n  };\n\n  const safeSetBoundsRef = React.useRef<\n    ((bounds: DOMRect) => void) | undefined\n  >(undefined);\n\n  React.useEffect(() => {\n    safeSetBoundsRef.current = (bounds: DOMRect) => {\n      if (!localRef.current) return;\n\n      const containerRect = localRef.current.getBoundingClientRect();\n      const offset = boundsOffsetRef.current;\n      const newBounds: Bounds = {\n        top: bounds.top - containerRect.top + offset.top,\n        left: bounds.left - containerRect.left + offset.left,\n        width: bounds.width + offset.width,\n        height: bounds.height + offset.height,\n      };\n\n      setBoundsState((prev) => {\n        if (\n          prev &&\n          prev.top === newBounds.top &&\n          prev.left === newBounds.left &&\n          prev.width === newBounds.width &&\n          prev.height === newBounds.height\n        ) {\n          return prev;\n        }\n        return newBounds;\n      });\n    };\n  });\n\n  const safeSetBounds = (bounds: DOMRect) => {\n    safeSetBoundsRef.current?.(bounds);\n  };\n\n  const clearBounds = React.useCallback(() => {\n    setBoundsState((prev) => (prev === null ? prev : null));\n  }, []);\n\n  React.useEffect(() => {\n    if (value !== undefined) setActiveValue(value);\n    else if (defaultValue !== undefined) setActiveValue(defaultValue);\n  }, [value, defaultValue]);\n\n  const id = React.useId();\n\n  React.useEffect(() => {\n    if (mode !== 'parent') return;\n    const container = localRef.current;\n    if (!container) return;\n\n    const onScroll = () => {\n      if (!activeValue) return;\n      const activeEl = container.querySelector<HTMLElement>(\n        `[data-value=\"${activeValue}\"][data-highlight=\"true\"]`,\n      );\n      if (activeEl)\n        safeSetBoundsRef.current?.(activeEl.getBoundingClientRect());\n    };\n\n    container.addEventListener('scroll', onScroll, { passive: true });\n    return () => container.removeEventListener('scroll', onScroll);\n  }, [mode, activeValue]);\n\n  const render = (children: React.ReactNode) => {\n    if (mode === 'parent') {\n      return (\n        <Component\n          ref={localRef}\n          data-slot=\"motion-highlight-container\"\n          style={{ position: 'relative', zIndex: 1 }}\n          className={(props as ParentModeHighlightProps)?.containerClassName}\n        >\n          <AnimatePresence initial={false} mode=\"wait\">\n            {boundsState && (\n              <motion.div\n                data-slot=\"motion-highlight\"\n                animate={{\n                  top: boundsState.top,\n                  left: boundsState.left,\n                  width: boundsState.width,\n                  height: boundsState.height,\n                  opacity: 1,\n                }}\n                initial={{\n                  top: boundsState.top,\n                  left: boundsState.left,\n                  width: boundsState.width,\n                  height: boundsState.height,\n                  opacity: 0,\n                }}\n                exit={{\n                  opacity: 0,\n                  transition: {\n                    ...transition,\n                    delay: (transition?.delay ?? 0) + (exitDelay ?? 0) / 1000,\n                  },\n                }}\n                transition={transition}\n                style={{ position: 'absolute', zIndex: 0, ...style }}\n                className={cn(className, activeClassNameState)}\n              />\n            )}\n          </AnimatePresence>\n          {children}\n        </Component>\n      );\n    }\n\n    return children;\n  };\n\n  return (\n    <HighlightContext.Provider\n      value={{\n        mode,\n        activeValue,\n        setActiveValue: safeSetActiveValue,\n        id,\n        hover,\n        click,\n        className,\n        style,\n        transition,\n        disabled,\n        enabled,\n        exitDelay,\n        setBounds: safeSetBounds,\n        clearBounds,\n        activeClassName: activeClassNameState,\n        setActiveClassName: setActiveClassNameState,\n        forceUpdateBounds: (props as ParentModeHighlightProps)\n          ?.forceUpdateBounds,\n      }}\n    >\n      {enabled\n        ? controlledItems\n          ? render(children)\n          : render(\n              React.Children.map(children, (child, index) => (\n                <HighlightItem key={index} className={props?.itemsClassName}>\n                  {child}\n                </HighlightItem>\n              )),\n            )\n        : children}\n    </HighlightContext.Provider>\n  );\n}\n\nfunction getNonOverridingDataAttributes(\n  element: React.ReactElement,\n  dataAttributes: Record<string, unknown>,\n): Record<string, unknown> {\n  return Object.keys(dataAttributes).reduce<Record<string, unknown>>(\n    (acc, key) => {\n      if ((element.props as Record<string, unknown>)[key] === undefined) {\n        acc[key] = dataAttributes[key];\n      }\n      return acc;\n    },\n    {},\n  );\n}\n\ntype ExtendedChildProps = React.ComponentProps<'div'> & {\n  id?: string;\n  ref?: React.Ref<HTMLElement>;\n  'data-active'?: string;\n  'data-value'?: string;\n  'data-disabled'?: boolean;\n  'data-highlight'?: boolean;\n  'data-slot'?: string;\n};\n\ntype HighlightItemProps<T extends React.ElementType = 'div'> =\n  React.ComponentProps<T> & {\n    as?: T;\n    children: React.ReactElement;\n    id?: string;\n    value?: string;\n    className?: string;\n    style?: React.CSSProperties;\n    transition?: Transition;\n    activeClassName?: string;\n    disabled?: boolean;\n    exitDelay?: number;\n    asChild?: boolean;\n    forceUpdateBounds?: boolean;\n  };\n\nfunction HighlightItem<T extends React.ElementType>({\n  ref,\n  as,\n  children,\n  id,\n  value,\n  className,\n  style,\n  transition,\n  disabled = false,\n  activeClassName,\n  exitDelay,\n  asChild = false,\n  forceUpdateBounds,\n  ...props\n}: HighlightItemProps<T>) {\n  const itemId = React.useId();\n  const {\n    activeValue,\n    setActiveValue,\n    mode,\n    setBounds,\n    clearBounds,\n    hover,\n    click,\n    enabled,\n    className: contextClassName,\n    style: contextStyle,\n    transition: contextTransition,\n    id: contextId,\n    disabled: contextDisabled,\n    exitDelay: contextExitDelay,\n    forceUpdateBounds: contextForceUpdateBounds,\n    setActiveClassName,\n  } = useHighlight();\n\n  const Component = as ?? 'div';\n  const element = children as React.ReactElement<ExtendedChildProps>;\n  const childValue =\n    id ?? value ?? element.props?.['data-value'] ?? element.props?.id ?? itemId;\n  const isActive = activeValue === childValue;\n  const isDisabled = disabled === undefined ? contextDisabled : disabled;\n  const itemTransition = transition ?? contextTransition;\n\n  const localRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);\n\n  const refCallback = React.useCallback((node: HTMLElement | null) => {\n    localRef.current = node as HTMLDivElement;\n  }, []);\n\n  React.useEffect(() => {\n    if (mode !== 'parent') return;\n    let rafId: number;\n    let previousBounds: Bounds | null = null;\n    const shouldUpdateBounds =\n      forceUpdateBounds === true ||\n      (contextForceUpdateBounds && forceUpdateBounds !== false);\n\n    const updateBounds = () => {\n      if (!localRef.current) return;\n\n      const bounds = localRef.current.getBoundingClientRect();\n\n      if (shouldUpdateBounds) {\n        if (\n          previousBounds &&\n          previousBounds.top === bounds.top &&\n          previousBounds.left === bounds.left &&\n          previousBounds.width === bounds.width &&\n          previousBounds.height === bounds.height\n        ) {\n          rafId = requestAnimationFrame(updateBounds);\n          return;\n        }\n        previousBounds = bounds;\n        rafId = requestAnimationFrame(updateBounds);\n      }\n\n      setBounds(bounds);\n    };\n\n    if (isActive) {\n      updateBounds();\n      setActiveClassName(activeClassName ?? '');\n    } else if (!activeValue) clearBounds();\n\n    if (shouldUpdateBounds) return () => cancelAnimationFrame(rafId);\n  }, [\n    mode,\n    isActive,\n    activeValue,\n    setBounds,\n    clearBounds,\n    activeClassName,\n    setActiveClassName,\n    forceUpdateBounds,\n    contextForceUpdateBounds,\n  ]);\n\n  if (!React.isValidElement(children)) return children;\n\n  const dataAttributes = {\n    'data-active': isActive ? 'true' : 'false',\n    'aria-selected': isActive,\n    'data-disabled': isDisabled,\n    'data-value': childValue,\n    'data-highlight': true,\n  };\n\n  const commonHandlers = hover\n    ? {\n        onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {\n          setActiveValue(childValue);\n          element.props.onMouseEnter?.(e);\n        },\n        onMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => {\n          setActiveValue(null);\n          element.props.onMouseLeave?.(e);\n        },\n      }\n    : click\n      ? {\n          onClick: (e: React.MouseEvent<HTMLDivElement>) => {\n            setActiveValue(childValue);\n            element.props.onClick?.(e);\n          },\n        }\n      : {};\n\n  if (asChild) {\n    if (mode === 'children') {\n      return React.cloneElement(\n        element,\n        {\n          key: childValue,\n          ref: refCallback,\n          className: cn('relative', element.props.className),\n          ...getNonOverridingDataAttributes(element, {\n            ...dataAttributes,\n            'data-slot': 'motion-highlight-item-container',\n          }),\n          ...commonHandlers,\n          ...props,\n        },\n        <>\n          <AnimatePresence initial={false} mode=\"wait\">\n            {isActive && !isDisabled && (\n              <motion.div\n                layoutId={`transition-background-${contextId}`}\n                data-slot=\"motion-highlight\"\n                style={{\n                  position: 'absolute',\n                  zIndex: 0,\n                  ...contextStyle,\n                  ...style,\n                }}\n                className={cn(contextClassName, activeClassName)}\n                transition={itemTransition}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{\n                  opacity: 0,\n                  transition: {\n                    ...itemTransition,\n                    delay:\n                      (itemTransition?.delay ?? 0) +\n                      (exitDelay ?? contextExitDelay ?? 0) / 1000,\n                  },\n                }}\n                {...dataAttributes}\n              />\n            )}\n          </AnimatePresence>\n\n          <Component\n            data-slot=\"motion-highlight-item\"\n            style={{ position: 'relative', zIndex: 1 }}\n            className={className}\n            {...dataAttributes}\n          >\n            {children}\n          </Component>\n        </>,\n      );\n    }\n\n    return React.cloneElement(element, {\n      ref: refCallback,\n      ...getNonOverridingDataAttributes(element, {\n        ...dataAttributes,\n        'data-slot': 'motion-highlight-item',\n      }),\n      ...commonHandlers,\n    });\n  }\n\n  return enabled ? (\n    <Component\n      key={childValue}\n      ref={localRef}\n      data-slot=\"motion-highlight-item-container\"\n      className={cn(mode === 'children' && 'relative', className)}\n      {...dataAttributes}\n      {...props}\n      {...commonHandlers}\n    >\n      {mode === 'children' && (\n        <AnimatePresence initial={false} mode=\"wait\">\n          {isActive && !isDisabled && (\n            <motion.div\n              layoutId={`transition-background-${contextId}`}\n              data-slot=\"motion-highlight\"\n              style={{\n                position: 'absolute',\n                zIndex: 0,\n                ...contextStyle,\n                ...style,\n              }}\n              className={cn(contextClassName, activeClassName)}\n              transition={itemTransition}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{\n                opacity: 0,\n                transition: {\n                  ...itemTransition,\n                  delay:\n                    (itemTransition?.delay ?? 0) +\n                    (exitDelay ?? contextExitDelay ?? 0) / 1000,\n                },\n              }}\n              {...dataAttributes}\n            />\n          )}\n        </AnimatePresence>\n      )}\n\n      {React.cloneElement(element, {\n        style: { position: 'relative', zIndex: 1 },\n        className: element.props.className,\n        ...getNonOverridingDataAttributes(element, {\n          ...dataAttributes,\n          'data-slot': 'motion-highlight-item',\n        }),\n      })}\n    </Component>\n  ) : (\n    children\n  );\n}\n\nexport {\n  Highlight,\n  HighlightItem,\n  useHighlight,\n  type HighlightProps,\n  type HighlightItemProps,\n};\n\n\ntype AnyProps = Record<string, unknown>;\n\ntype DOMMotionProps<T extends HTMLElement = HTMLElement> = Omit<\n  HTMLMotionProps<keyof HTMLElementTagNameMap>,\n  'ref'\n> & { ref?: React.Ref<T> };\n\ntype WithAsChild<Base extends object> =\n  | (Base & { asChild: true; children: React.ReactElement })\n  | (Base & { asChild?: false | undefined });\n\ntype SlotProps<T extends HTMLElement = HTMLElement> = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  children?: any;\n} & DOMMotionProps<T>;\n\nfunction mergeRefs<T>(\n  ...refs: (React.Ref<T> | undefined)[]\n): React.RefCallback<T> {\n  return (node) => {\n    refs.forEach((ref) => {\n      if (!ref) return;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else {\n        (ref as React.RefObject<T | null>).current = node;\n      }\n    });\n  };\n}\n\nfunction mergeProps<T extends HTMLElement>(\n  childProps: AnyProps,\n  slotProps: DOMMotionProps<T>,\n): AnyProps {\n  const merged: AnyProps = { ...childProps, ...slotProps };\n\n  if (childProps.className || slotProps.className) {\n    merged.className = cn(\n      childProps.className as string,\n      slotProps.className as string,\n    );\n  }\n\n  if (childProps.style || slotProps.style) {\n    merged.style = {\n      ...(childProps.style as React.CSSProperties),\n      ...(slotProps.style as React.CSSProperties),\n    };\n  }\n\n  return merged;\n}\n\nfunction Slot<T extends HTMLElement = HTMLElement>({\n  children,\n  ref,\n  ...props\n}: SlotProps<T>) {\n  const isAlreadyMotion =\n    typeof children.type === 'object' &&\n    children.type !== null &&\n    isMotionComponent(children.type);\n\n  const Base = React.useMemo(\n    () =>\n      isAlreadyMotion\n        ? (children.type as React.ElementType)\n        : motion.create(children.type as React.ElementType),\n    [isAlreadyMotion, children.type],\n  );\n\n  if (!React.isValidElement(children)) return null;\n\n  const { ref: childRef, ...childProps } = children.props as AnyProps;\n\n  const mergedProps = mergeProps(childProps, props);\n\n  return (\n    // eslint-disable-next-line react-hooks/static-components\n    <Base {...mergedProps} ref={mergeRefs(childRef as React.Ref<T>, ref)} />\n  );\n}\n\nexport {\n  Slot,\n  type SlotProps,\n  type WithAsChild,\n  type DOMMotionProps,\n  type AnyProps,\n};\n\ntype ButtonProps = WithAsChild<\n  HTMLMotionProps<'button'> & {\n    hoverScale?: number;\n    tapScale?: number;\n  }\n>;\n\nfunction Button({\n  hoverScale = 1.05,\n  tapScale = 0.95,\n  asChild = false,\n  ...props\n}: ButtonProps) {\n  const Component = asChild ? Slot : motion.button;\n\n  return (\n    <Component\n      whileTap={{ scale: tapScale }}\n      whileHover={{ scale: hoverScale }}\n      {...props}\n    />\n  );\n}\n\nexport { Button, type ButtonProps };\n",
      "type": "registry:ui",
      "target": "components/ui/code-tabs.tsx"
    }
  ],
  "type": "registry:ui"
}