4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1dfc,'use client' import * as React from 'react' import { cn } from '@/lib/utils' import { Button } from '@/registry/ui/button' import { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/ui/tooltip' type TokenContextValue = { name: string value: string } const TokenContext = React.createContext(undefined) function useTokenContext() { const context = React.useContext(TokenContext) if (context === undefined) { throw new Error('useTokenContext must be used within a TokenProvider') } return context } /* ------------------------------------------------------------------------------------------------- * TokenProvider * -----------------------------------------------------------------------------------------------*/ type TokenProviderProps = { /** The token name */ name: string /** The token value */ value: string children: React.ReactNode } /** * Context provider for token name and value. * Use this primitive when building custom token compositions. */ function TokenProvider({ name, value, children }: TokenProviderProps) { const contextValue = React.useMemo(() => ({ name, value }), [name, value]) return {children} } /* ------------------------------------------------------------------------------------------------- * TokenRoot * -----------------------------------------------------------------------------------------------*/ type TokenRootProps = React.ComponentProps /** * Tooltip wrapper with default delay. * Use this primitive when building custom token compositions. */ function TokenRoot({ delayDuration = 200, ...props }: TokenRootProps) { return } /* ------------------------------------------------------------------------------------------------- * TokenName * -----------------------------------------------------------------------------------------------*/ type TokenNameProps = React.ComponentProps & { /** * Whether clicking the token name should copy it to the clipboard. * @default true */ copyable?: boolean } /** * Button trigger that displays the token name and copies it on click. * Defaults to displaying the name from context if no children provided. * Use this primitive when building custom token compositions. */ const TokenName = React.forwardRef, TokenNameProps>( ({ children, onClick, copyable = true, ...props }, forwardedRef) => { const { name } = useTokenContext() const [isCopied, setIsCopied] = React.useState(false) const timeoutRef = React.useRef | null>(null) React.useEffect(() => { return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current) } } }, []) const handleClick = React.useCallback( async (event: React.MouseEvent) => { onClick?.(event) if (!copyable) { return } if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) { return } try { await navigator.clipboard.writeText(name) setIsCopied(true) timeoutRef.current = setTimeout(() => setIsCopied(false), 2000) } catch (_error) { // Silently fail } }, [name, onClick, copyable] ) return ( ) } ) TokenName.displayName = 'TokenName' /* ------------------------------------------------------------------------------------------------- * TokenValue * -----------------------------------------------------------------------------------------------*/ type TokenValueProps = React.ComponentProps /** * Tooltip content that displays the token value from context. * Use this primitive when building custom token compositions. */ const TokenValue = React.forwardRef, TokenValueProps>( ({ sideOffset = 4, ...props }, forwardedRef) => { return } ) TokenValue.displayName = 'TokenValue' /* ------------------------------------------------------------------------------------------------- * TokenIndicator * -----------------------------------------------------------------------------------------------*/ type TokenIndicatorProps = React.ComponentProps<'span'> /** * Context-aware indicator that displays the token value as a background color. * Use with TokenName to add visual indicators to tokens. */ const TokenIndicator = React.forwardRef( ({ className, style, children, ...props }, forwardedRef) => { const { value } = useTokenContext() return ( {children} ) } ) TokenIndicator.displayName = 'TokenIndicator' /* ------------------------------------------------------------------------------------------------- * Token * -----------------------------------------------------------------------------------------------*/ type TokenProps = React.ComponentProps & { /** The token name */ name: string /** The token value displayed in the tooltip */ value: string /** Custom trigger content */ children?: React.ReactNode } /** * Mid-level token composition. * Combines TokenProvider, TokenRoot, and TokenValue. * Accepts custom children as the tooltip trigger. */ function Token({ name, value, children, ...props }: TokenProps) { return ( {children} {value} ) } /* ------------------------------------------------------------------------------------------------- * BasicToken * -----------------------------------------------------------------------------------------------*/ type BasicTokenProps = TokenProps & { /** * Whether clicking the token name should copy it to the clipboard. * @default true */ copyable?: boolean } /** * Pre-composed token component for common use cases. * Composes Token with TokenName to provide a button with copy functionality and value tooltip. * This is the default export and recommended for most use cases. */ function BasicToken({ name, value, copyable, ...props }: BasicTokenProps) { return ( ) } /* -----------------------------------------------------------------------------------------------*/ export { Token, BasicToken, BasicToken as default, TokenProvider, TokenRoot, TokenName, TokenValue, TokenIndicator, useTokenContext, type TokenProps, type BasicTokenProps, type TokenNameProps, type TokenProviderProps, type TokenIndicatorProps, type TokenRootProps, type TokenValueProps, } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@tokenui","registryDependencies":["@tokenui/tooltip","@tokenui/button"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/components/token.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]