{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "token",
  "type": "registry:component",
  "title": "Token",
  "description": "A tooltip-based component for documenting design tokens. Includes TokenIndicator for visual value display.",
  "registryDependencies": [
    "@tokenui/tooltip",
    "@tokenui/button"
  ],
  "files": [
    {
      "path": "registry/components/token.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/ui/button'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/ui/tooltip'\n\ntype TokenContextValue = {\n  name: string\n  value: string\n}\n\nconst TokenContext = React.createContext<TokenContextValue | undefined>(undefined)\n\nfunction useTokenContext() {\n  const context = React.useContext(TokenContext)\n  if (context === undefined) {\n    throw new Error('useTokenContext must be used within a TokenProvider')\n  }\n  return context\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TokenProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype TokenProviderProps = {\n  /** The token name */\n  name: string\n  /** The token value */\n  value: string\n  children: React.ReactNode\n}\n\n/**\n * Context provider for token name and value.\n * Use this primitive when building custom token compositions.\n */\nfunction TokenProvider({ name, value, children }: TokenProviderProps) {\n  const contextValue = React.useMemo(() => ({ name, value }), [name, value])\n  return <TokenContext.Provider value={contextValue}>{children}</TokenContext.Provider>\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TokenRoot\n * -----------------------------------------------------------------------------------------------*/\n\ntype TokenRootProps = React.ComponentProps<typeof Tooltip>\n\n/**\n * Tooltip wrapper with default delay.\n * Use this primitive when building custom token compositions.\n */\nfunction TokenRoot({ delayDuration = 200, ...props }: TokenRootProps) {\n  return <Tooltip delayDuration={delayDuration} {...props} />\n}\n\n/* -------------------------------------------------------------------------------------------------\n * TokenName\n * -----------------------------------------------------------------------------------------------*/\n\ntype TokenNameProps = React.ComponentProps<typeof Button> & {\n  /**\n   * Whether clicking the token name should copy it to the clipboard.\n   * @default true\n   */\n  copyable?: boolean\n}\n\n/**\n * Button trigger that displays the token name and copies it on click.\n * Defaults to displaying the name from context if no children provided.\n * Use this primitive when building custom token compositions.\n */\nconst TokenName = React.forwardRef<React.ElementRef<typeof Button>, TokenNameProps>(\n  ({ children, onClick, copyable = true, ...props }, forwardedRef) => {\n    const { name } = useTokenContext()\n    const [isCopied, setIsCopied] = React.useState(false)\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n\n    React.useEffect(() => {\n      return () => {\n        if (timeoutRef.current) {\n          clearTimeout(timeoutRef.current)\n        }\n      }\n    }, [])\n\n    const handleClick = React.useCallback(\n      async (event: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event)\n\n        if (!copyable) {\n          return\n        }\n\n        if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {\n          return\n        }\n\n        try {\n          await navigator.clipboard.writeText(name)\n          setIsCopied(true)\n\n          timeoutRef.current = setTimeout(() => setIsCopied(false), 2000)\n        } catch (_error) {\n          // Silently fail\n        }\n      },\n      [name, onClick, copyable]\n    )\n\n    return (\n      <TooltipTrigger asChild>\n        <Button\n          ref={forwardedRef}\n          size=\"sm\"\n          variant=\"outline\"\n          onClick={handleClick}\n          aria-label={copyable && isCopied ? `Copied ${name}` : `Copy ${name}`}\n          {...props}\n        >\n          {copyable && isCopied ? 'Copied!' : (children ?? name)}\n        </Button>\n      </TooltipTrigger>\n    )\n  }\n)\n\nTokenName.displayName = 'TokenName'\n\n/* -------------------------------------------------------------------------------------------------\n * TokenValue\n * -----------------------------------------------------------------------------------------------*/\n\ntype TokenValueProps = React.ComponentProps<typeof TooltipContent>\n\n/**\n * Tooltip content that displays the token value from context.\n * Use this primitive when building custom token compositions.\n */\nconst TokenValue = React.forwardRef<React.ElementRef<typeof TooltipContent>, TokenValueProps>(\n  ({ sideOffset = 4, ...props }, forwardedRef) => {\n    return <TooltipContent ref={forwardedRef} sideOffset={sideOffset} {...props} />\n  }\n)\n\nTokenValue.displayName = 'TokenValue'\n\n/* -------------------------------------------------------------------------------------------------\n * TokenIndicator\n * -----------------------------------------------------------------------------------------------*/\n\ntype TokenIndicatorProps = React.ComponentProps<'span'>\n\n/**\n * Context-aware indicator that displays the token value as a background color.\n * Use with TokenName to add visual indicators to tokens.\n */\nconst TokenIndicator = React.forwardRef<HTMLSpanElement, TokenIndicatorProps>(\n  ({ className, style, children, ...props }, forwardedRef) => {\n    const { value } = useTokenContext()\n\n    return (\n      <span\n        ref={forwardedRef}\n        aria-hidden\n        className={cn(\n          'inline-flex size-4 items-center justify-center rounded-full align-middle',\n          className\n        )}\n        style={{ backgroundColor: value, ...style }}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  }\n)\n\nTokenIndicator.displayName = 'TokenIndicator'\n\n/* -------------------------------------------------------------------------------------------------\n * Token\n * -----------------------------------------------------------------------------------------------*/\n\ntype TokenProps = React.ComponentProps<typeof Tooltip> & {\n  /** The token name */\n  name: string\n  /** The token value displayed in the tooltip */\n  value: string\n  /** Custom trigger content */\n  children?: React.ReactNode\n}\n\n/**\n * Mid-level token composition.\n * Combines TokenProvider, TokenRoot, and TokenValue.\n * Accepts custom children as the tooltip trigger.\n */\nfunction Token({ name, value, children, ...props }: TokenProps) {\n  return (\n    <TokenProvider name={name} value={value}>\n      <TokenRoot {...props}>\n        {children}\n        <TokenValue>{value}</TokenValue>\n      </TokenRoot>\n    </TokenProvider>\n  )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * BasicToken\n * -----------------------------------------------------------------------------------------------*/\n\ntype BasicTokenProps = TokenProps & {\n  /**\n   * Whether clicking the token name should copy it to the clipboard.\n   * @default true\n   */\n  copyable?: boolean\n}\n\n/**\n * Pre-composed token component for common use cases.\n * Composes Token with TokenName to provide a button with copy functionality and value tooltip.\n * This is the default export and recommended for most use cases.\n */\nfunction BasicToken({ name, value, copyable, ...props }: BasicTokenProps) {\n  return (\n    <Token name={name} value={value} {...props}>\n      <TokenName copyable={copyable} />\n    </Token>\n  )\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport {\n  Token,\n  BasicToken,\n  BasicToken as default,\n  TokenProvider,\n  TokenRoot,\n  TokenName,\n  TokenValue,\n  TokenIndicator,\n  useTokenContext,\n  type TokenProps,\n  type BasicTokenProps,\n  type TokenNameProps,\n  type TokenProviderProps,\n  type TokenIndicatorProps,\n  type TokenRootProps,\n  type TokenValueProps,\n}\n",
      "type": "registry:component"
    }
  ]
}