@tydavidson/design-system 1.2.5 → 1.2.8

package/dist/index.d.ts

@@ -14,6 +14,7 @@ import { DialogProps } from '@radix-ui/react-dialog';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { ClassValue } from 'clsx';
+export { Colors, Radius, Shadows, Spacing, Tokens, Typography, colors, radius, shadows, spacing, tokens, typography } from './tokens/index.js';
 export { ClientThemeProvider, ClientThemeToggle, ThemeProvider, useThemeServer } from './themes/index.js';
 import 'next-themes/dist/types';
 
@@ -490,532 +491,4 @@ declare function isNotNullOrUndefined<T>(value: T | null | undefined): value is
  */
 declare function filterDOMProps<T extends Record<string, any>, K extends keyof T>(props: T, propNames: K[]): Omit<T, K>;
 
-/**
- * Color token definitions based on the design system
- */
-declare const colors: {
-    brand: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    error: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    warning: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    success: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    gray: {
-        25: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    text: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        disabled: string;
-        brand: string;
-        'on-brand': string;
-        error: string;
-        warning: string;
-        success: string;
-    };
-    background: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        brand: string;
-        error: string;
-        warning: string;
-        success: string;
-        card: string;
-    };
-    border: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        brand: string;
-        error: string;
-        warning: string;
-        success: string;
-    };
-    focus: {
-        ring: string;
-        brand: string;
-        error: string;
-        warning: string;
-        success: string;
-    };
-    button: {
-        primary: {
-            bg: string;
-            text: string;
-            hover: string;
-            focus: string;
-        };
-        secondary: {
-            bg: string;
-            text: string;
-            border: string;
-            hover: string;
-            focus: string;
-        };
-        tertiary: {
-            bg: string;
-            text: string;
-            hover: string;
-            focus: string;
-        };
-    };
-};
-type Colors = typeof colors;
-
-/**
- * Typography token definitions based on the design system
- */
-declare const typography: {
-    fontFamily: {
-        sans: string[];
-    };
-    fontWeight: {
-        regular: string;
-        medium: string;
-        semibold: string;
-        bold: string;
-    };
-    fontSize: {
-        'display-2xl': (string | {
-            lineHeight: string;
-            letterSpacing: string;
-        })[];
-        'display-xl': (string | {
-            lineHeight: string;
-            letterSpacing: string;
-        })[];
-        'display-lg': (string | {
-            lineHeight: string;
-            letterSpacing: string;
-        })[];
-        'display-md': (string | {
-            lineHeight: string;
-            letterSpacing: string;
-        })[];
-        'display-sm': (string | {
-            lineHeight: string;
-            letterSpacing: string;
-        })[];
-        'display-xs': (string | {
-            lineHeight: string;
-            letterSpacing: string;
-        })[];
-        'text-xl': (string | {
-            lineHeight: string;
-        })[];
-        'text-lg': (string | {
-            lineHeight: string;
-        })[];
-        'text-md': (string | {
-            lineHeight: string;
-        })[];
-        'text-sm': (string | {
-            lineHeight: string;
-        })[];
-        'text-xs': (string | {
-            lineHeight: string;
-        })[];
-    };
-    styles: {
-        h1: string;
-        h2: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h6: string;
-        body: string;
-        'body-large': string;
-        'body-small': string;
-        caption: string;
-        overline: string;
-        label: string;
-    };
-    variants: {
-        italic: string;
-        underline: string;
-    };
-};
-type Typography = typeof typography;
-
-/**
- * Spacing tokens used throughout the application
- *
- * Note: This extends Tailwind's default spacing values rather than replacing them.
- * We only define semantic values here that map to Tailwind's spacing scale.
- */
-declare const spacing: {
-    layout: {
-        page: string;
-        section: string;
-        subsection: string;
-        inline: string;
-    };
-    component: {
-        xxs: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        xxl: string;
-    };
-    custom: {};
-};
-type Spacing = typeof spacing;
-
-/**
- * Border radius tokens used throughout the application
- *
- * Note: This uses Tailwind's default radius naming but maps to our semantic values
- * defined by CSS variables. We don't override Tailwind's defaults but use
- * the semantic mappings for component consistency.
- */
-declare const radius: {
-    default: string;
-    card: string;
-    button: string;
-    input: string;
-    badge: string;
-    pill: string;
-    circle: string;
-    custom: {};
-};
-type Radius = typeof radius;
-
-/**
- * Shadow tokens used throughout the application
- */
-declare const shadows: {
-    none: string;
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-    inner: string;
-    'elevation-low': string;
-    'elevation-medium': string;
-    'elevation-high': string;
-    card: string;
-    dropdown: string;
-    modal: string;
-};
-type Shadows = typeof shadows;
-
-/**
- * Re-exports all token definitions for easy consumption
- */
-
-declare const tokens: {
-    colors: {
-        brand: {
-            25: string;
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            950: string;
-        };
-        error: {
-            25: string;
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            950: string;
-        };
-        warning: {
-            25: string;
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            950: string;
-        };
-        success: {
-            25: string;
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            950: string;
-        };
-        gray: {
-            25: string;
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            950: string;
-        };
-        text: {
-            primary: string;
-            secondary: string;
-            tertiary: string;
-            disabled: string;
-            brand: string;
-            'on-brand': string;
-            error: string;
-            warning: string;
-            success: string;
-        };
-        background: {
-            primary: string;
-            secondary: string;
-            tertiary: string;
-            brand: string;
-            error: string;
-            warning: string;
-            success: string;
-            card: string;
-        };
-        border: {
-            primary: string;
-            secondary: string;
-            tertiary: string;
-            brand: string;
-            error: string;
-            warning: string;
-            success: string;
-        };
-        focus: {
-            ring: string;
-            brand: string;
-            error: string;
-            warning: string;
-            success: string;
-        };
-        button: {
-            primary: {
-                bg: string;
-                text: string;
-                hover: string;
-                focus: string;
-            };
-            secondary: {
-                bg: string;
-                text: string;
-                border: string;
-                hover: string;
-                focus: string;
-            };
-            tertiary: {
-                bg: string;
-                text: string;
-                hover: string;
-                focus: string;
-            };
-        };
-    };
-    typography: {
-        fontFamily: {
-            sans: string[];
-        };
-        fontWeight: {
-            regular: string;
-            medium: string;
-            semibold: string;
-            bold: string;
-        };
-        fontSize: {
-            'display-2xl': (string | {
-                lineHeight: string;
-                letterSpacing: string;
-            })[];
-            'display-xl': (string | {
-                lineHeight: string;
-                letterSpacing: string;
-            })[];
-            'display-lg': (string | {
-                lineHeight: string;
-                letterSpacing: string;
-            })[];
-            'display-md': (string | {
-                lineHeight: string;
-                letterSpacing: string;
-            })[];
-            'display-sm': (string | {
-                lineHeight: string;
-                letterSpacing: string;
-            })[];
-            'display-xs': (string | {
-                lineHeight: string;
-                letterSpacing: string;
-            })[];
-            'text-xl': (string | {
-                lineHeight: string;
-            })[];
-            'text-lg': (string | {
-                lineHeight: string;
-            })[];
-            'text-md': (string | {
-                lineHeight: string;
-            })[];
-            'text-sm': (string | {
-                lineHeight: string;
-            })[];
-            'text-xs': (string | {
-                lineHeight: string;
-            })[];
-        };
-        styles: {
-            h1: string;
-            h2: string;
-            h3: string;
-            h4: string;
-            h5: string;
-            h6: string;
-            body: string;
-            'body-large': string;
-            'body-small': string;
-            caption: string;
-            overline: string;
-            label: string;
-        };
-        variants: {
-            italic: string;
-            underline: string;
-        };
-    };
-    spacing: {
-        layout: {
-            page: string;
-            section: string;
-            subsection: string;
-            inline: string;
-        };
-        component: {
-            xxs: string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            xxl: string;
-        };
-        custom: {};
-    };
-    radius: {
-        default: string;
-        card: string;
-        button: string;
-        input: string;
-        badge: string;
-        pill: string;
-        circle: string;
-        custom: {};
-    };
-    shadows: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        inner: string;
-        'elevation-low': string;
-        'elevation-medium': string;
-        'elevation-high': string;
-        card: string;
-        dropdown: string;
-        modal: string;
-    };
-};
-type Tokens = typeof tokens;
-
-export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, type Colors, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, type ComponentVariant, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, EmailButton, type EmailButtonProps, EmailCaption, EmailContainer, type EmailContainerProps, EmailFooter, type EmailFooterProps, EmailHeader, type EmailHeaderProps, EmailHeading, EmailLayout, type EmailLayoutProps, EmailMuted, EmailText, type EmailTextProps, Heading, HoverCard, HoverCardContent, HoverCardTrigger, Input, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Radius, type Shadows, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Slider, type Spacing, Text, type ThemeColor, Toggle, ToggleGroup, ToggleGroupItem, type Tokens, type Typography, buttonVariants, cn, colors, filterDOMProps, generateId, getColorVariantClasses, isDarkTheme, isNotNullOrUndefined, mapColorToShadcnVariant, mapVariantToShadcnVariant, radius, shadows, spacing, tokens, typography };
+export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, type ComponentVariant, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, EmailButton, type EmailButtonProps, EmailCaption, EmailContainer, type EmailContainerProps, EmailFooter, type EmailFooterProps, EmailHeader, type EmailHeaderProps, EmailHeading, EmailLayout, type EmailLayoutProps, EmailMuted, EmailText, type EmailTextProps, Heading, HoverCard, HoverCardContent, HoverCardTrigger, Input, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Slider, Text, type ThemeColor, Toggle, ToggleGroup, ToggleGroupItem, buttonVariants, cn, filterDOMProps, generateId, getColorVariantClasses, isDarkTheme, isNotNullOrUndefined, mapColorToShadcnVariant, mapVariantToShadcnVariant };