tokvista 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,261 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Type definitions for Tokvista
+ */
+interface TokenValue {
+    value: string | number;
+    type: string;
+}
+interface NestedTokens {
+    [key: string]: TokenValue | NestedTokens;
+}
+interface ParsedColorToken {
+    name: string;
+    value: string;
+    cssVariable: string;
+    shade?: string;
+    family?: string;
+    resolvedValue?: string;
+}
+interface ParsedSpacingToken {
+    name: string;
+    value: string;
+    cssVariable: string;
+    numericValue: number;
+}
+interface ParsedRadiusToken {
+    name: string;
+    value: string;
+    cssVariable: string;
+    numericValue: number;
+}
+interface ParsedSizeToken {
+    name: string;
+    value: string;
+    cssVariable: string;
+    numericValue: number;
+}
+interface ColorFamily {
+    name: string;
+    primaryColor: string;
+    shades: ParsedColorToken[];
+}
+interface FigmaTokens {
+    global?: Record<string, unknown>;
+    $themes?: unknown[];
+    $metadata?: {
+        tokenSetOrder?: string[];
+    };
+    [key: string]: any;
+}
+interface TokenDocumentationProps {
+    tokens: FigmaTokens;
+    title?: string;
+    subtitle?: string;
+    defaultTab?: string;
+    showSearch?: boolean;
+    darkMode?: boolean;
+    onTokenClick?: (token: ParsedColorToken | ParsedSpacingToken | ParsedRadiusToken | ParsedSizeToken) => void;
+}
+interface ColorDisplayProps {
+    baseColors?: NestedTokens;
+    fillColors?: NestedTokens;
+    strokeColors?: NestedTokens;
+    textColors?: NestedTokens;
+    tokenMap?: Record<string, string>;
+    onColorClick?: (color: ParsedColorToken) => void;
+}
+interface SpacingDisplayProps {
+    tokens: NestedTokens;
+    onTokenClick?: (token: ParsedSpacingToken) => void;
+}
+interface RadiusDisplayProps {
+    tokens: NestedTokens;
+    onTokenClick?: (token: ParsedRadiusToken) => void;
+}
+interface SizeDisplayProps {
+    tokens: NestedTokens;
+    onTokenClick?: (token: ParsedSizeToken) => void;
+}
+interface StandaloneTokenProps {
+    tokens: FigmaTokens;
+    onTokenClick?: (token: any) => void;
+    title?: string;
+}
+
+/**
+ * TokenDocumentation - Production-ready Design System Documentation
+ * Displays tokens in three main tabs: Foundation, Semantic, and Components
+ */
+declare function TokenDocumentation({ tokens, title, subtitle, defaultTab, showSearch, darkMode: initialDarkMode, onTokenClick, }: TokenDocumentationProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ColorDisplay - Beautiful visualization of color tokens
+ */
+declare function ColorDisplay({ baseColors, fillColors, strokeColors, textColors, tokenMap: externalTokenMap, onColorClick, }: ColorDisplayProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * SpacingDisplay - Visual representation of spacing tokens
+ * Shows horizontal bars with proportional widths
+ */
+declare function SpacingDisplay({ tokens, onTokenClick }: SpacingDisplayProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * RadiusDisplay - Visual demonstration of border radius tokens
+ * Shows boxes with actual border radius applied
+ */
+declare function RadiusDisplay({ tokens, onTokenClick }: RadiusDisplayProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * SizeDisplay - Visual representation of size tokens
+ * Shows vertical bars with proportional heights and horizontal bars
+ */
+declare function SizeDisplay({ tokens, onTokenClick }: SizeDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface FoundationTabProps {
+    tokens: NestedTokens;
+    tokenMap: Record<string, string>;
+    onTokenClick?: (token: any) => void;
+}
+/**
+ * FoundationTab - Displays all foundation tokens with scroll-spy navigation
+ */
+declare function FoundationTab({ tokens, tokenMap, onTokenClick }: FoundationTabProps): react_jsx_runtime.JSX.Element;
+
+interface SemanticTabProps {
+    tokens: NestedTokens;
+    tokenMap: Record<string, string>;
+    onTokenClick?: (token: any) => void;
+}
+/**
+ * SemanticTab - Displays semantic color tokens with scroll-spy navigation
+ */
+declare function SemanticTab({ tokens, tokenMap, onTokenClick }: SemanticTabProps): react_jsx_runtime.JSX.Element;
+
+interface ComponentsTabProps {
+    components: Record<string, ComponentData>;
+    tokenMap: Record<string, string>;
+    onCopy: (value: string, label: string) => void;
+}
+interface ComponentData {
+    variants: Record<string, any>;
+    dimensions: Record<string, any>;
+}
+/**
+ * ComponentsTab - Displays component tokens with sidebar navigation
+ */
+declare function ComponentsTab({ components, tokenMap, onCopy }: ComponentsTabProps): react_jsx_runtime.JSX.Element;
+
+interface SearchModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    tokens: FigmaTokens;
+    onTokenClick?: (token: any) => void;
+    onNavigateToTab?: (tab: 'foundation' | 'semantic' | 'components') => void;
+    onScrollToToken?: (tokenName: string, category: string, cssVariable?: string) => void;
+}
+declare function SearchModal({ isOpen, onClose, tokens, onTokenClick, onNavigateToTab, onScrollToToken }: SearchModalProps): react_jsx_runtime.JSX.Element | null;
+
+interface ExportModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    tokens: FigmaTokens;
+}
+declare function ExportModal({ isOpen, onClose, tokens }: ExportModalProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Spacing - Standalone component to display spacing tokens
+ */
+declare function Spacing({ tokens, onTokenClick, title }: StandaloneTokenProps): react_jsx_runtime.JSX.Element;
+/**
+ * Colors - Standalone component to display color tokens
+ */
+declare function Colors({ tokens, onTokenClick, title }: StandaloneTokenProps): react_jsx_runtime.JSX.Element;
+/**
+ * Sizes - Standalone component to display sizing tokens
+ */
+declare function Sizes({ tokens, onTokenClick, title }: StandaloneTokenProps): react_jsx_runtime.JSX.Element;
+/**
+ * Radius - Standalone component to display border radius tokens
+ */
+declare function Radius({ tokens, onTokenClick, title }: StandaloneTokenProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Create a map of token paths to values for resolution
+ */
+declare function createTokenMap(tokens: any): Record<string, string>;
+/**
+ * Resolve a token value (handles aliases)
+ */
+declare function resolveTokenValue(value: string, tokenMap: Record<string, string>, maxDepth?: number): string;
+/**
+ * Extract all token groups from a nested object
+ * Returns a map of group names to their token contents
+ */
+declare function extractTokenGroups(setData: any): Record<string, NestedTokens>;
+/**
+ * Detect the primary type of tokens in a group
+ */
+declare function detectTokenType(tokens: NestedTokens): 'color' | 'spacing' | 'sizing' | 'radius' | 'typography' | 'other';
+
+/**
+ * Get text color (black or white) based on background luminance
+ */
+declare function getContrastColor(hexColor: string): 'black' | 'white';
+/**
+ * Parse base color tokens into color families
+ */
+declare function parseBaseColors(tokens: NestedTokens, tokenMap?: Record<string, string>): ColorFamily[];
+/**
+ * Parse semantic color tokens (fill, stroke, text)
+ */
+declare function parseSemanticColors(tokens: NestedTokens, prefix: string, tokenMap?: Record<string, string>): ParsedColorToken[];
+
+/**
+ * Parse spacing tokens
+ */
+declare function parseSpacingTokens(tokens: NestedTokens): ParsedSpacingToken[];
+/**
+ * Parse radius tokens
+ */
+declare function parseRadiusTokens(tokens: NestedTokens): ParsedRadiusToken[];
+/**
+ * Parse size tokens
+ */
+declare function parseSizeTokens(tokens: NestedTokens): ParsedSizeToken[];
+
+/**
+ * Copy text to clipboard with fallback for older browsers
+ */
+declare function copyToClipboard(text: string): Promise<boolean>;
+
+interface ExportableToken {
+    name: string;
+    value: string;
+    cssVariable: string;
+    type: string;
+    category: string;
+}
+/**
+ * Flatten all tokens into a single list for easier generation
+ */
+declare function getFlattenedTokens(tokens: FigmaTokens): ExportableToken[];
+/**
+ * Generate CSS Variables
+ */
+declare function generateCSS(tokens: FigmaTokens): string;
+/**
+ * Generate SCSS Variables
+ */
+declare function generateSCSS(tokens: FigmaTokens): string;
+/**
+ * Generate JS Object
+ */
+declare function generateJS(tokens: FigmaTokens): string;
+/**
+ * Generate Tailwind Config
+ */
+declare function generateTailwind(tokens: FigmaTokens): string;
+
+export { ColorDisplay, type ColorDisplayProps, type ColorFamily, ColorDisplay as ColorGrid, type ColorDisplayProps as ColorGridProps, Colors, ComponentsTab, ExportModal, type FigmaTokens, FoundationTab, type NestedTokens, type ParsedColorToken, type ParsedRadiusToken, type ParsedSizeToken, type ParsedSpacingToken, Radius, RadiusDisplay, type RadiusDisplayProps, RadiusDisplay as RadiusShowcase, type RadiusDisplayProps as RadiusShowcaseProps, SearchModal, SemanticTab, SizeDisplay, type SizeDisplayProps, SizeDisplay as SizeScale, type SizeDisplayProps as SizeScaleProps, Sizes, Spacing, SpacingDisplay, type SpacingDisplayProps, SpacingDisplay as SpacingScale, type SpacingDisplayProps as SpacingScaleProps, TokenDocumentation, TokenDocumentation as TokenDocumentationDefault, type TokenDocumentationProps, type TokenValue, copyToClipboard, createTokenMap, detectTokenType, extractTokenGroups, generateCSS, generateJS, generateSCSS, generateTailwind, getContrastColor, getFlattenedTokens, parseBaseColors, parseRadiusTokens, parseSemanticColors, parseSizeTokens, parseSpacingTokens, resolveTokenValue };

package/dist/index.d.ts

@@ -0,0 +1,261 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Type definitions for Tokvista
+ */
+interface TokenValue {
+    value: string | number;
+    type: string;
+}
+interface NestedTokens {
+    [key: string]: TokenValue | NestedTokens;
+}
+interface ParsedColorToken {
+    name: string;
+    value: string;
+    cssVariable: string;
+    shade?: string;
+    family?: string;
+    resolvedValue?: string;
+}
+interface ParsedSpacingToken {
+    name: string;
+    value: string;
+    cssVariable: string;
+    numericValue: number;
+}
+interface ParsedRadiusToken {
+    name: string;
+    value: string;
+    cssVariable: string;
+    numericValue: number;
+}
+interface ParsedSizeToken {
+    name: string;
+    value: string;
+    cssVariable: string;
+    numericValue: number;
+}
+interface ColorFamily {
+    name: string;
+    primaryColor: string;
+    shades: ParsedColorToken[];
+}
+interface FigmaTokens {
+    global?: Record<string, unknown>;
+    $themes?: unknown[];
+    $metadata?: {
+        tokenSetOrder?: string[];
+    };
+    [key: string]: any;
+}
+interface TokenDocumentationProps {
+    tokens: FigmaTokens;
+    title?: string;
+    subtitle?: string;
+    defaultTab?: string;
+    showSearch?: boolean;
+    darkMode?: boolean;
+    onTokenClick?: (token: ParsedColorToken | ParsedSpacingToken | ParsedRadiusToken | ParsedSizeToken) => void;
+}
+interface ColorDisplayProps {
+    baseColors?: NestedTokens;
+    fillColors?: NestedTokens;
+    strokeColors?: NestedTokens;
+    textColors?: NestedTokens;
+    tokenMap?: Record<string, string>;
+    onColorClick?: (color: ParsedColorToken) => void;
+}
+interface SpacingDisplayProps {
+    tokens: NestedTokens;
+    onTokenClick?: (token: ParsedSpacingToken) => void;
+}
+interface RadiusDisplayProps {
+    tokens: NestedTokens;
+    onTokenClick?: (token: ParsedRadiusToken) => void;
+}
+interface SizeDisplayProps {
+    tokens: NestedTokens;
+    onTokenClick?: (token: ParsedSizeToken) => void;
+}
+interface StandaloneTokenProps {
+    tokens: FigmaTokens;
+    onTokenClick?: (token: any) => void;
+    title?: string;
+}
+
+/**
+ * TokenDocumentation - Production-ready Design System Documentation
+ * Displays tokens in three main tabs: Foundation, Semantic, and Components
+ */
+declare function TokenDocumentation({ tokens, title, subtitle, defaultTab, showSearch, darkMode: initialDarkMode, onTokenClick, }: TokenDocumentationProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ColorDisplay - Beautiful visualization of color tokens
+ */
+declare function ColorDisplay({ baseColors, fillColors, strokeColors, textColors, tokenMap: externalTokenMap, onColorClick, }: ColorDisplayProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * SpacingDisplay - Visual representation of spacing tokens
+ * Shows horizontal bars with proportional widths
+ */
+declare function SpacingDisplay({ tokens, onTokenClick }: SpacingDisplayProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * RadiusDisplay - Visual demonstration of border radius tokens
+ * Shows boxes with actual border radius applied
+ */
+declare function RadiusDisplay({ tokens, onTokenClick }: RadiusDisplayProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * SizeDisplay - Visual representation of size tokens
+ * Shows vertical bars with proportional heights and horizontal bars
+ */
+declare function SizeDisplay({ tokens, onTokenClick }: SizeDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface FoundationTabProps {
+    tokens: NestedTokens;
+    tokenMap: Record<string, string>;
+    onTokenClick?: (token: any) => void;
+}
+/**
+ * FoundationTab - Displays all foundation tokens with scroll-spy navigation
+ */
+declare function FoundationTab({ tokens, tokenMap, onTokenClick }: FoundationTabProps): react_jsx_runtime.JSX.Element;
+
+interface SemanticTabProps {
+    tokens: NestedTokens;
+    tokenMap: Record<string, string>;
+    onTokenClick?: (token: any) => void;
+}
+/**
+ * SemanticTab - Displays semantic color tokens with scroll-spy navigation
+ */
+declare function SemanticTab({ tokens, tokenMap, onTokenClick }: SemanticTabProps): react_jsx_runtime.JSX.Element;
+
+interface ComponentsTabProps {
+    components: Record<string, ComponentData>;
+    tokenMap: Record<string, string>;
+    onCopy: (value: string, label: string) => void;
+}
+interface ComponentData {
+    variants: Record<string, any>;
+    dimensions: Record<string, any>;
+}
+/**
+ * ComponentsTab - Displays component tokens with sidebar navigation
+ */
+declare function ComponentsTab({ components, tokenMap, onCopy }: ComponentsTabProps): react_jsx_runtime.JSX.Element;
+
+interface SearchModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    tokens: FigmaTokens;
+    onTokenClick?: (token: any) => void;
+    onNavigateToTab?: (tab: 'foundation' | 'semantic' | 'components') => void;
+    onScrollToToken?: (tokenName: string, category: string, cssVariable?: string) => void;
+}
+declare function SearchModal({ isOpen, onClose, tokens, onTokenClick, onNavigateToTab, onScrollToToken }: SearchModalProps): react_jsx_runtime.JSX.Element | null;
+
+interface ExportModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    tokens: FigmaTokens;
+}
+declare function ExportModal({ isOpen, onClose, tokens }: ExportModalProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Spacing - Standalone component to display spacing tokens
+ */
+declare function Spacing({ tokens, onTokenClick, title }: StandaloneTokenProps): react_jsx_runtime.JSX.Element;
+/**
+ * Colors - Standalone component to display color tokens
+ */
+declare function Colors({ tokens, onTokenClick, title }: StandaloneTokenProps): react_jsx_runtime.JSX.Element;
+/**
+ * Sizes - Standalone component to display sizing tokens
+ */
+declare function Sizes({ tokens, onTokenClick, title }: StandaloneTokenProps): react_jsx_runtime.JSX.Element;
+/**
+ * Radius - Standalone component to display border radius tokens
+ */
+declare function Radius({ tokens, onTokenClick, title }: StandaloneTokenProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Create a map of token paths to values for resolution
+ */
+declare function createTokenMap(tokens: any): Record<string, string>;
+/**
+ * Resolve a token value (handles aliases)
+ */
+declare function resolveTokenValue(value: string, tokenMap: Record<string, string>, maxDepth?: number): string;
+/**
+ * Extract all token groups from a nested object
+ * Returns a map of group names to their token contents
+ */
+declare function extractTokenGroups(setData: any): Record<string, NestedTokens>;
+/**
+ * Detect the primary type of tokens in a group
+ */
+declare function detectTokenType(tokens: NestedTokens): 'color' | 'spacing' | 'sizing' | 'radius' | 'typography' | 'other';
+
+/**
+ * Get text color (black or white) based on background luminance
+ */
+declare function getContrastColor(hexColor: string): 'black' | 'white';
+/**
+ * Parse base color tokens into color families
+ */
+declare function parseBaseColors(tokens: NestedTokens, tokenMap?: Record<string, string>): ColorFamily[];
+/**
+ * Parse semantic color tokens (fill, stroke, text)
+ */
+declare function parseSemanticColors(tokens: NestedTokens, prefix: string, tokenMap?: Record<string, string>): ParsedColorToken[];
+
+/**
+ * Parse spacing tokens
+ */
+declare function parseSpacingTokens(tokens: NestedTokens): ParsedSpacingToken[];
+/**
+ * Parse radius tokens
+ */
+declare function parseRadiusTokens(tokens: NestedTokens): ParsedRadiusToken[];
+/**
+ * Parse size tokens
+ */
+declare function parseSizeTokens(tokens: NestedTokens): ParsedSizeToken[];
+
+/**
+ * Copy text to clipboard with fallback for older browsers
+ */
+declare function copyToClipboard(text: string): Promise<boolean>;
+
+interface ExportableToken {
+    name: string;
+    value: string;
+    cssVariable: string;
+    type: string;
+    category: string;
+}
+/**
+ * Flatten all tokens into a single list for easier generation
+ */
+declare function getFlattenedTokens(tokens: FigmaTokens): ExportableToken[];
+/**
+ * Generate CSS Variables
+ */
+declare function generateCSS(tokens: FigmaTokens): string;
+/**
+ * Generate SCSS Variables
+ */
+declare function generateSCSS(tokens: FigmaTokens): string;
+/**
+ * Generate JS Object
+ */
+declare function generateJS(tokens: FigmaTokens): string;
+/**
+ * Generate Tailwind Config
+ */
+declare function generateTailwind(tokens: FigmaTokens): string;
+
+export { ColorDisplay, type ColorDisplayProps, type ColorFamily, ColorDisplay as ColorGrid, type ColorDisplayProps as ColorGridProps, Colors, ComponentsTab, ExportModal, type FigmaTokens, FoundationTab, type NestedTokens, type ParsedColorToken, type ParsedRadiusToken, type ParsedSizeToken, type ParsedSpacingToken, Radius, RadiusDisplay, type RadiusDisplayProps, RadiusDisplay as RadiusShowcase, type RadiusDisplayProps as RadiusShowcaseProps, SearchModal, SemanticTab, SizeDisplay, type SizeDisplayProps, SizeDisplay as SizeScale, type SizeDisplayProps as SizeScaleProps, Sizes, Spacing, SpacingDisplay, type SpacingDisplayProps, SpacingDisplay as SpacingScale, type SpacingDisplayProps as SpacingScaleProps, TokenDocumentation, TokenDocumentation as TokenDocumentationDefault, type TokenDocumentationProps, type TokenValue, copyToClipboard, createTokenMap, detectTokenType, extractTokenGroups, generateCSS, generateJS, generateSCSS, generateTailwind, getContrastColor, getFlattenedTokens, parseBaseColors, parseRadiusTokens, parseSemanticColors, parseSizeTokens, parseSpacingTokens, resolveTokenValue };