@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/theme/size-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size-tokens.js","sources":["../../src/theme/size-tokens.ts"],"sourcesContent":["/**\n * Unified Size System for hydn-ui\n *\n * All sizes use Tailwind classes and are responsive (mobile-first).\n * Mobile sizes are larger for touch targets, desktop sizes are smaller.\n *\n * SIZE SCALE: xs → sm → md → lg → xl → 2xl → 3xl\n */\n\n// =============================================================================\n// VISUAL ELEMENT SIZES (Icons, Spinners, Logos)\n// Responsive: slightly larger on mobile for visibility\n// =============================================================================\n\n/**\n * Icon/Spinner/Visual element sizes\n * Uses Tailwind classes with responsive adjustments\n */\nexport const visualSizes = {\n  xs: {\n    classes: 'w-3.5 h-3.5 sm:w-3 sm:h-3', // 20px mobile, 16px desktop\n    pixels: { mobile: 20, desktop: 16 }\n  },\n  sm: {\n    classes: 'w-5 h-5 sm:w-4 sm:h-4', // 24px mobile, 20px desktop\n    pixels: { mobile: 24, desktop: 20 }\n  },\n  md: {\n    classes: 'w-6 h-6 sm:w-5 sm:h-5', // 28px mobile, 24px desktop\n    pixels: { mobile: 28, desktop: 24 }\n  },\n  lg: {\n    classes: 'w-7 h-7 sm:w-6 sm:h-6', // 32px mobile, 28px desktop\n    pixels: { mobile: 32, desktop: 28 }\n  },\n  xl: {\n    classes: 'w-8 h-8 sm:w-7 sm:h-7', // 36px mobile, 32px desktop\n    pixels: { mobile: 36, desktop: 32 }\n  },\n  '2xl': {\n    classes: 'w-9 h-9 sm:w-8 sm:h-8', // 40px mobile, 36px desktop\n    pixels: { mobile: 40, desktop: 36 }\n  },\n  '3xl': {\n    classes: 'w-12 h-12 sm:w-10 sm:h-10', // 52px mobile, 44px desktop\n    pixels: { mobile: 52, desktop: 44 }\n  }\n} as const;\n\n/** Core size type - derived from visualSizes */\nexport type Size = keyof typeof visualSizes;\n\n/**\n * Spinner sizes - extends visual sizes with border widths\n */\nconst spinnerBorderWidths: Record<Size, string> = {\n  xs: 'border',\n  sm: 'border-2',\n  md: 'border-2',\n  lg: 'border-2',\n  xl: 'border-[3px]',\n  '2xl': 'border-[3px]',\n  '3xl': 'border-4'\n};\n\ntype SpinnerSizeDefinition = (typeof visualSizes)[Size] & { border: string };\n\nexport const spinnerSizes: Record<Size, SpinnerSizeDefinition> = (Object.keys(visualSizes) as Size[]).reduce(\n  (acc, size) => {\n    acc[size] = {\n      ...visualSizes[size],\n      border: spinnerBorderWidths[size]\n    };\n    return acc;\n  },\n  {} as Record<Size, SpinnerSizeDefinition>\n);\n\n/**\n * Avatar sizes - larger scale for displaying faces/initials\n * Responsive: comfortable touch targets on mobile\n */\nexport const avatarSizes = {\n  xs: {\n    classes: 'w-8 h-8 sm:w-6 sm:h-6',\n    text: 'text-sm sm:text-xs'\n  },\n  sm: {\n    classes: 'w-10 h-10 sm:w-8 sm:h-8',\n    text: 'text-base sm:text-sm'\n  },\n  md: {\n    classes: 'w-12 h-12 sm:w-10 sm:h-10',\n    text: 'text-lg sm:text-base'\n  },\n  lg: {\n    classes: 'w-14 h-14 sm:w-12 sm:h-12',\n    text: 'text-xl sm:text-lg'\n  },\n  xl: {\n    classes: 'w-20 h-20 sm:w-16 sm:h-16',\n    text: 'text-2xl sm:text-xl'\n  },\n  '2xl': {\n    classes: 'w-24 h-24 sm:w-20 sm:h-20',\n    text: 'text-3xl sm:text-2xl'\n  },\n  '3xl': {\n    classes: 'w-28 h-28 sm:w-24 sm:h-24',\n    text: 'text-4xl sm:text-3xl'\n  }\n} as const;\n\n/**\n * Logo sizes - brand element sizing\n */\nexport const logoSizes = {\n  xs: { classes: 'h-5 w-5 sm:h-4 sm:w-4' },\n  sm: { classes: 'h-7 w-7 sm:h-6 sm:w-6' },\n  md: { classes: 'h-9 w-9 sm:h-8 sm:w-8' },\n  lg: { classes: 'h-12 w-12 sm:h-10 sm:w-10' },\n  xl: { classes: 'h-14 w-14 sm:h-12 sm:w-12' },\n  '2xl': { classes: 'h-20 w-20 sm:h-16 sm:w-16' },\n  '3xl': { classes: 'h-24 w-24 sm:h-20 sm:w-20' }\n} as const;\n\n// =============================================================================\n// INTERACTIVE ELEMENT SIZES (Buttons, Inputs, Selects)\n// Responsive: larger touch targets on mobile (44px+ recommended)\n// =============================================================================\nexport const interactiveSizes = {\n  xs: {\n    height: 'h-8 sm:h-6 min-h-8 sm:min-h-6',\n    padding: 'px-3 sm:px-2',\n    text: 'text-sm sm:text-xs',\n    icon: visualSizes.xs\n  },\n  sm: {\n    height: 'h-10 sm:h-8 min-h-10 sm:min-h-8',\n    padding: 'px-4 sm:px-3',\n    text: 'text-base sm:text-sm',\n    icon: visualSizes.sm\n  },\n  md: {\n    height: 'h-12 sm:h-10 min-h-12 sm:min-h-10',\n    padding: 'px-5 sm:px-4',\n    text: 'text-base sm:text-sm',\n    icon: visualSizes.md\n  },\n  lg: {\n    height: 'h-14 sm:h-12 min-h-14 sm:min-h-12',\n    padding: 'px-7 sm:px-6',\n    text: 'text-lg sm:text-base',\n    icon: visualSizes.lg\n  },\n  xl: {\n    height: 'h-16 sm:h-14 min-h-16 sm:min-h-14',\n    padding: 'px-9 sm:px-8',\n    text: 'text-xl sm:text-lg',\n    icon: visualSizes.xl\n  }\n} as const;\n\nexport type InteractiveSize = keyof typeof interactiveSizes;\n\n// =============================================================================\n// INPUT WIDTH SIZES\n// Semantic width options for input fields\n// =============================================================================\nexport const inputWidthSizes = {\n  xs: 'w-14 sm:w-16', // ~4 chars - ZIP codes, years\n  sm: 'w-20 sm:w-24', // ~6-8 chars - short codes, area codes\n  md: 'w-40 sm:w-48', // ~12-16 chars - medium text (default)\n  lg: 'w-56 sm:w-64', // ~20-24 chars - names, emails\n  xl: 'w-72 sm:w-80', // ~28-32 chars - long text\n  '2xl': 'w-80 sm:w-96', // ~36-40 chars - very long text\n  '1/4': 'w-1/4', // 25% of container\n  '1/2': 'w-1/2', // 50% of container\n  '3/4': 'w-3/4', // 75% of container\n  full: 'w-full', // 100% of container\n  fit: 'w-fit', // intrinsic width based on content (shrink-to-fit)\n  auto: 'w-auto' // default width behavior (layout-dependent)\n} as const;\n\nexport type InputWidth = keyof typeof inputWidthSizes;\n\n// =============================================================================\n// INLINE ELEMENT SIZES (Badges, Chips, Tags)\n// =============================================================================\nexport const badgeSizes = {\n  sm: {\n    classes: 'px-2.5 sm:px-2 py-1 sm:py-0.5 text-sm sm:text-xs',\n    icon: visualSizes.xs\n  },\n  md: {\n    classes: 'px-3 sm:px-2.5 py-1 sm:py-0.5 text-sm sm:text-xs font-semibold',\n    icon: visualSizes.sm\n  },\n  lg: {\n    classes: 'px-4 sm:px-3 py-1.5 sm:py-1 text-base sm:text-sm font-semibold',\n    icon: visualSizes.md\n  }\n} as const;\n\nexport const chipSizes = {\n  xs: {\n    classes: 'px-2 sm:px-1.5 py-1 sm:py-0.5 text-sm sm:text-xs gap-1 sm:gap-0.5',\n    icon: visualSizes.xs\n  },\n  sm: {\n    classes: 'px-2.5 sm:px-2 py-1.5 sm:py-1 text-sm sm:text-xs gap-1.5 sm:gap-1',\n    icon: visualSizes.sm\n  },\n  md: {\n    classes: 'px-3.5 sm:px-3 py-2 sm:py-1.5 text-base sm:text-sm gap-2 sm:gap-1.5',\n    icon: visualSizes.md\n  },\n  lg: {\n    classes: 'px-5 sm:px-4 py-2.5 sm:py-2 text-lg sm:text-base gap-2.5 sm:gap-2',\n    icon: visualSizes.lg\n  },\n  xl: {\n    classes: 'px-6 sm:px-5 py-3 sm:py-2.5 text-xl sm:text-lg gap-3 sm:gap-2.5',\n    icon: visualSizes.xl\n  },\n  '2xl': {\n    classes: 'px-7 sm:px-6 py-3.5 sm:py-3 text-2xl sm:text-xl gap-3.5 sm:gap-3',\n    icon: visualSizes['2xl']\n  },\n  '3xl': {\n    classes: 'px-8 sm:px-7 py-4 sm:py-3.5 text-3xl sm:text-2xl gap-4 sm:gap-3.5',\n    icon: visualSizes['3xl']\n  }\n} as const;\n\n/**\n * Inline code sizes - for code snippets\n */\nexport const codeSizes = {\n  sm: 'text-xs px-1 py-0.5',\n  md: 'text-sm px-1.5 py-0.5',\n  lg: 'text-base px-2 py-1'\n} as const;\n\nexport type CodeSize = keyof typeof codeSizes;\n\n/**\n * Status label sizes - for status indicators with dots\n */\nexport const statusLabelSizes = {\n  sm: {\n    container: 'px-2 py-0.5 text-xs gap-1.5',\n    dot: 'w-1.5 h-1.5'\n  },\n  md: {\n    container: 'px-2.5 py-0.5 text-sm gap-2',\n    dot: 'w-2 h-2'\n  },\n  lg: {\n    container: 'px-3 py-1 text-base gap-2',\n    dot: 'w-2.5 h-2.5'\n  }\n} as const;\n\nexport type StatusLabelSize = keyof typeof statusLabelSizes;\n\n// =============================================================================\n// TYPOGRAPHY SIZES\n// Responsive text scaling\n// =============================================================================\nexport const textSizes = {\n  xs: 'text-sm sm:text-xs',\n  sm: 'text-base sm:text-sm',\n  base: 'text-base',\n  lg: 'text-lg',\n  xl: 'text-xl sm:text-lg',\n  '2xl': 'text-2xl',\n  '3xl': 'text-3xl',\n  '4xl': 'text-4xl',\n  '5xl': 'text-5xl'\n} as const;\n\nexport type TextSize = keyof typeof textSizes;\n\n/**\n * Heading/title sizes - for headings with font weight\n */\nexport const headingSizes = {\n  sm: 'text-base font-semibold',\n  md: 'text-lg font-bold',\n  lg: 'text-xl font-bold',\n  xl: 'text-2xl font-bold',\n  '2xl': 'text-3xl font-bold sm:text-2xl',\n  '3xl': 'text-4xl font-bold sm:text-3xl',\n  '4xl': 'text-5xl font-bold sm:text-4xl'\n} as const;\n\nexport type HeadingSize = keyof typeof headingSizes;\n\n/**\n * Card sizes - max-width for cards\n */\nexport const cardSizes = {\n  xs: 'w-full sm:max-w-36',\n  sm: 'w-full sm:max-w-64',\n  md: 'w-full sm:max-w-96',\n  lg: 'w-full sm:max-w-[28rem]',\n  xl: 'w-full sm:max-w-[32rem]',\n  '2xl': 'w-full sm:max-w-[36rem]',\n  full: 'w-full'\n} as const;\n\nexport type CardSize = keyof typeof cardSizes;\n\n// =============================================================================\n// SPACING / GAP SIZES\n// Responsive gaps (larger on mobile for touch)\n// =============================================================================\nexport const gapSizes = {\n  none: 'gap-0',\n  xs: 'gap-2 sm:gap-1',\n  sm: 'gap-3 sm:gap-2',\n  md: 'gap-5 sm:gap-4',\n  lg: 'gap-7 sm:gap-6',\n  xl: 'gap-10 sm:gap-8',\n  '2xl': 'gap-14 sm:gap-12',\n  '3xl': 'gap-20 sm:gap-16'\n} as const;\n\nexport type GapSize = keyof typeof gapSizes;\n\n// =============================================================================\n// CONTAINER / LAYOUT SIZES\n// =============================================================================\nexport const containerWidth = {\n  sm: 'max-w-screen-sm',\n  md: 'max-w-screen-md',\n  lg: 'max-w-screen-lg',\n  xl: 'max-w-screen-xl',\n  '2xl': 'max-w-screen-2xl',\n  '3xl': 'max-w-[1920px]',\n  full: 'max-w-full',\n  screen: 'max-w-[100vw]',\n  none: ''\n} as const;\n\nexport type ContainerWidthSize = keyof typeof containerWidth;\n\nexport const containerHeight = {\n  xs: 'h-[10rem]', // 160px\n  sm: 'h-[15rem]', // 240px\n  md: 'h-[20rem]', // 320px\n  lg: 'h-[25rem]', // 400px\n  xl: 'h-[30rem]', // 480px\n  '2xl': 'h-[35rem]', // 560px\n  '3xl': 'h-[40rem]', // 640px\n  full: 'h-full',\n  screen: 'h-screen',\n  none: ''\n} as const;\n\nexport type ContainerHeightSize = keyof typeof containerHeight;\n\n/**\n * Container min-width options\n */\nexport const containerMinWidths = {\n  xs: 'min-w-[20rem]', // 320px\n  sm: 'min-w-[24rem]', // 384px\n  md: 'min-w-[28rem]', // 448px\n  lg: 'min-w-[32rem]', // 512px\n  xl: 'min-w-[36rem]', // 576px\n  '2xl': 'min-w-[42rem]', // 672px\n  '3xl': 'min-w-[48rem]', // 768px\n  full: 'min-w-full',\n  screen: 'min-w-screen',\n  none: ''\n} as const;\n\nexport type ContainerMinWidthSize = keyof typeof containerMinWidths;\n\nexport const containerMaxWidths = {\n  xs: 'max-w-[20rem]', // 320px\n  sm: 'max-w-[24rem]', // 384px\n  md: 'max-w-[28rem]', // 448px\n  lg: 'max-w-[32rem]', // 512px\n  xl: 'max-w-[36rem]', // 576px\n  '2xl': 'max-w-[42rem]', // 672px\n  '3xl': 'max-w-[48rem]', // 768px\n  full: 'max-w-full',\n  screen: 'max-w-screen',\n  none: ''\n} as const;\n\nexport type ContainerMaxWidthSize = keyof typeof containerMaxWidths;\n\n/**\n * Container min-height options\n */\nexport const containerMinHeights = {\n  xs: 'min-h-[10rem]', // 160px\n  sm: 'min-h-[15rem]', // 240px\n  md: 'min-h-[20rem]', // 320px\n  lg: 'min-h-[25rem]', // 400px\n  xl: 'min-h-[30rem]', // 480px\n  '2xl': 'min-h-[35rem]', // 560px\n  '3xl': 'min-h-[40rem]', // 640px\n  full: 'min-h-full',\n  screen: 'min-h-screen',\n  none: ''\n} as const;\n\nexport type ContainerMinHeightSize = keyof typeof containerMinHeights;\n\nexport const containerMaxHeights = {\n  xs: 'max-h-[10rem]', // 160px\n  sm: 'max-h-[15rem]', // 240px\n  md: 'max-h-[20rem]', // 320px\n  lg: 'max-h-[25rem]', // 400px\n  xl: 'max-h-[30rem]', // 480px\n  '2xl': 'max-h-[35rem]', // 560px\n  '3xl': 'max-h-[40rem]', // 640px\n  full: 'max-h-full',\n  screen: 'max-h-screen',\n  none: ''\n} as const;\n\nexport type ContainerMaxHeightSize = keyof typeof containerMaxHeights;\n\nexport const stackWidths = {\n  sm: 'w-screen-sm',\n  md: 'w-screen-md',\n  lg: 'w-screen-lg',\n  xl: 'w-screen-xl',\n  '2xl': 'w-screen-2xl',\n  '3xl': 'w-[1920px]',\n  '1/4': 'w-1/4',\n  '1/2': 'w-1/2',\n  '3/4': 'w-3/4',\n  full: 'w-full',\n  screen: 'w-[100vw]',\n  auto: 'w-auto',\n  none: ''\n} as const;\n\nexport type StackWidthSize = keyof typeof stackWidths;\n\nexport const stackHeights = {\n  xs: 'h-[10rem]', // 160px\n  sm: 'h-[15rem]', // 240px\n  md: 'h-[20rem]', // 320px\n  lg: 'h-[25rem]', // 400px\n  xl: 'h-[30rem]', // 480px\n  '2xl': 'h-[35rem]', // 560px\n  '3xl': 'h-[40rem]', // 640px\n  '1/4': 'h-1/4',\n  '1/2': 'h-1/2',\n  '3/4': 'h-3/4',\n  full: 'h-full',\n  screen: 'h-screen',\n  auto: 'h-auto',\n  none: ''\n} as const;\n\nexport type StackHeightSize = keyof typeof stackHeights;\n\nexport const stackMinWidths = {\n  xs: 'min-w-[20rem]', // 320px\n  sm: 'min-w-[24rem]', // 384px\n  md: 'min-w-[28rem]', // 448px\n  lg: 'min-w-[32rem]', // 512px\n  xl: 'min-w-[36rem]', // 576px\n  '2xl': 'min-w-[42rem]', // 672px\n  '3xl': 'min-w-[48rem]', // 768px\n  '1/4': 'min-w-1/4',\n  '1/2': 'min-w-1/2',\n  '3/4': 'min-w-3/4',\n  full: 'min-w-full',\n  screen: 'min-w-screen',\n  none: ''\n} as const;\n\nexport type StackMinWidthSize = keyof typeof stackMinWidths;\n\nexport const stackMaxWidths = {\n  xs: 'max-w-[20rem]', // 320px\n  sm: 'max-w-[24rem]', // 384px\n  md: 'max-w-[28rem]', // 448px\n  lg: 'max-w-[32rem]', // 512px\n  xl: 'max-w-[36rem]', // 576px\n  '2xl': 'max-w-[42rem]', // 672px\n  '3xl': 'max-w-[48rem]', // 768px\n  '1/4': 'max-w-1/4',\n  '1/2': 'max-w-1/2',\n  '3/4': 'max-w-3/4',\n  full: 'max-w-full',\n  screen: 'max-w-screen',\n  none: ''\n} as const;\n\nexport type StackMaxWidthSize = keyof typeof stackMaxWidths;\n\nexport const stackMinHeights = {\n  xs: 'min-h-[10rem]', // 160px\n  sm: 'min-h-[15rem]', // 240px\n  md: 'min-h-[20rem]', // 320px\n  lg: 'min-h-[25rem]', // 400px\n  xl: 'min-h-[30rem]', // 480px\n  '2xl': 'min-h-[35rem]', // 560px\n  '3xl': 'min-h-[40rem]', // 640px\n  '1/4': 'min-h-1/4',\n  '1/2': 'min-h-1/2',\n  '3/4': 'min-h-3/4',\n  full: 'min-h-full',\n  screen: 'min-h-screen',\n  none: ''\n} as const;\n\nexport type StackMinHeightSize = keyof typeof stackMinHeights;\n\nexport const stackMaxHeights = {\n  xs: 'max-h-[10rem]', // 160px\n  sm: 'max-h-[15rem]', // 240px\n  md: 'max-h-[20rem]', // 320px\n  lg: 'max-h-[25rem]', // 400px\n  xl: 'max-h-[30rem]', // 480px\n  '2xl': 'max-h-[35rem]', // 560px\n  '3xl': 'max-h-[40rem]', // 640px\n  '1/4': 'max-h-1/4',\n  '1/2': 'max-h-1/2',\n  '3/4': 'max-h-3/4',\n  full: 'max-h-full',\n  screen: 'max-h-screen',\n  none: ''\n} as const;\n\n// =============================================================================\n// PADDING SIZES FOR SECTIONS AND CARDS\n// =============================================================================\n\nexport const sectionPadding = {\n  none: 'py-0',\n  xs: 'py-6 sm:py-4',\n  sm: 'py-10 sm:py-8',\n  md: 'py-16 sm:py-12',\n  lg: 'py-20 sm:py-16',\n  xl: 'py-28 sm:py-24',\n  '2xl': 'py-36 sm:py-32'\n} as const;\n\nexport type SectionPaddingSize = keyof typeof sectionPadding;\n\nexport const cardPadding = {\n  none: 'p-0',\n  xs: 'p-3 sm:p-2',\n  sm: 'p-5 sm:p-4',\n  md: 'p-7 sm:p-6',\n  lg: 'p-9 sm:p-8',\n  xl: 'p-12 sm:p-10',\n  '2xl': 'p-14 sm:p-12'\n} as const;\n\nexport type CardPaddingSize = keyof typeof cardPadding;\n\nexport const cardMargin = {\n  none: 'm-0',\n  xs: 'm-3 sm:m-2',\n  sm: 'm-5 sm:m-4',\n  md: 'm-7 sm:m-6',\n  lg: 'm-9 sm:m-8',\n  xl: 'm-12 sm:m-10',\n  '2xl': 'm-14 sm:m-12'\n} as const;\n\nexport type CardMarginSize = keyof typeof cardMargin;\n\n// =============================================================================\n// MARGIN SIZES (Axis-specific)\n// =============================================================================\n\nexport const marginX = {\n  none: '',\n  auto: 'mx-auto',\n  xs: 'mx-3 sm:mx-2',\n  sm: 'mx-5 sm:mx-4',\n  md: 'mx-7 sm:mx-6',\n  lg: 'mx-9 sm:mx-8',\n  xl: 'mx-12 sm:mx-10',\n  '2xl': 'mx-14 sm:mx-12'\n} as const;\n\nexport type MarginXSize = keyof typeof marginX;\n\nexport const marginY = {\n  none: '',\n  auto: 'my-auto',\n  xs: 'my-3 sm:my-2',\n  sm: 'my-5 sm:my-4',\n  md: 'my-7 sm:my-6',\n  lg: 'my-9 sm:my-8',\n  xl: 'my-12 sm:my-10',\n  '2xl': 'my-14 sm:my-12'\n} as const;\n\nexport type MarginYSize = keyof typeof marginY;\n\n// =============================================================================\n// OVERLAY SIZES (Modals, Drawers)\n// Full width on mobile, constrained on desktop\n// =============================================================================\nexport const overlaySizes = {\n  xs: 'w-full sm:w-64',\n  sm: 'w-full sm:w-80',\n  md: 'w-full sm:w-96',\n  lg: 'w-full sm:w-[28rem]',\n  xl: 'w-full sm:w-[32rem]',\n  '2xl': 'w-full sm:w-[40rem]',\n  '3xl': 'w-full sm:w-[48rem]',\n  full: 'w-full max-w-2xl'\n} as const;\n\nexport type OverlaySize = keyof typeof overlaySizes;\n\n// =============================================================================\n// BORDER RADIUS\n// =============================================================================\nexport const borderRadius = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full'\n} as const;\n\nexport type BorderRadiusSize = keyof typeof borderRadius;\n\n// =============================================================================\n// FORM INPUT TOKENS\n// Centralized styling for form inputs (Input, Select, Textarea)\n// =============================================================================\n\n/** Validation states for form inputs */\nexport type ValidationState = 'neutral' | 'error' | 'success' | 'warning';\n\n/** Border classes for each validation state */\nexport const validationBorderClasses: Record<ValidationState, string> = {\n  neutral: 'border-input focus:border-ring',\n  error: 'border-error focus:border-error',\n  success: 'border-success focus:border-success',\n  warning: 'border-warning focus:border-warning'\n};\n\n/** Ring/focus classes for each validation state */\nexport const validationRingClasses: Record<ValidationState, string> = {\n  neutral: 'focus:ring-ring/20',\n  error: 'focus:ring-error/20',\n  success: 'focus:ring-success/20',\n  warning: 'focus:ring-warning/20'\n};\n\n/** Text color classes for validation messages */\nexport const validationTextClasses: Record<ValidationState, string> = {\n  neutral: 'text-neutral-foreground',\n  error: 'text-error',\n  success: 'text-success',\n  warning: 'text-warning'\n};\n\n/** Base input classes shared by Input, Select, Textarea */\nexport const inputBaseClasses =\n  'flex rounded-lg border bg-background shadow-sm transition-all duration-200 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50';\n\n/** Get complete input classes for a given size and validation state */\nexport function getInputClasses(size: InteractiveSize, validationState: ValidationState): string {\n  const sizeConfig = interactiveSizes[size];\n  return `${inputBaseClasses} ${sizeConfig.height} px-4 sm:px-3 overflow-visible ${sizeConfig.text} ${validationBorderClasses[validationState]} ${validationRingClasses[validationState]}`;\n}\n\n/** Form spacing options */\nexport const formSpacing = {\n  none: 'gap-0',\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-4',\n  lg: 'gap-6',\n  xl: 'gap-8'\n} as const;\n\nexport type FormSpacing = keyof typeof formSpacing;\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\n\n/**\n * Get icon size in pixels for SVG components (like Tabler icons)\n * Returns desktop size by default, or you can specify 'mobile'\n */\nexport function getIconPixels(size: Size | number, variant: 'mobile' | 'desktop' = 'desktop'): number {\n  if (typeof size === 'number') return size;\n  return visualSizes?.[size]?.pixels?.[variant] ?? 0;\n}\n\n/**\n * Get Tailwind classes for a visual element size\n */\nexport function getVisualClasses(size: Size): string {\n  return visualSizes[size].classes;\n}\n\n// =============================================================================\n// SIZE REFERENCE TABLE\n// =============================================================================\n/**\n * Visual Size Reference (mobile / desktop):\n *\n * | Size | Visual  | Avatar   | Interactive Height | Text          |\n * |------|---------|----------|-------------------|---------------|\n * | xs   | 14/12px | 32/24px  | 32/24px           | text-sm/xs    |\n * | sm   | 20/16px | 40/32px  | 40/32px           | text-base/sm  |\n * | md   | 24/20px | 48/40px  | 48/40px           | text-base/sm  |\n * | lg   | 28/24px | 56/48px  | 56/48px           | text-lg/base  |\n * | xl   | 32/28px | 80/64px  | 64/56px           | text-xl/lg    |\n * | 2xl  | 36/32px | 96/80px  | -                 | text-2xl/xl   |\n * | 3xl  | 48/40px | 112/96px | -                 | text-3xl/2xl  |\n */\n"],"names":[],"mappings":"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"}

package/dist/theme/tokens.d.ts

@@ -0,0 +1,116 @@
+/**
+ * Theme color tokens and helpers for the design system.
+ * Maps CSS custom properties from globals.css (light/dark) to JS for inline styles and class generation.
+ */
+export declare const colors: {
+    background: string;
+    foreground: string;
+    card: string;
+    'card-foreground': string;
+    popover: string;
+    'popover-foreground': string;
+    primary: string;
+    'primary-hover': string;
+    'primary-active': string;
+    'primary-foreground': string;
+    accent: string;
+    'accent-hover': string;
+    'accent-active': string;
+    'accent-foreground': string;
+    neutral: string;
+    'neutral-hover': string;
+    'neutral-active': string;
+    'neutral-foreground': string;
+    muted: string;
+    'muted-hover': string;
+    'muted-active': string;
+    'muted-foreground': string;
+    error: string;
+    'error-hover': string;
+    'error-active': string;
+    'error-foreground': string;
+    success: string;
+    'success-hover': string;
+    'success-active': string;
+    'success-foreground': string;
+    warning: string;
+    'warning-hover': string;
+    'warning-active': string;
+    'warning-foreground': string;
+    info: string;
+    'info-hover': string;
+    'info-active': string;
+    'info-foreground': string;
+    border: string;
+    input: string;
+    ring: string;
+};
+export type ThemeColor = keyof typeof colors;
+export declare const themeColorNames: ThemeColor[];
+export declare const colorClassPrefixes: readonly ["text", "bg", "border", "ring", "outline", "decoration", "fill", "stroke"];
+export type ColorClassPrefix = (typeof colorClassPrefixes)[number];
+export type ThemeColorClass = `${ColorClassPrefix}-${ThemeColor}`;
+export declare const themeColorClasses: ("border-background" | "border-foreground" | "border-card" | "border-card-foreground" | "border-popover" | "border-popover-foreground" | "border-primary" | "border-primary-hover" | "border-primary-active" | "border-primary-foreground" | "border-accent" | "border-accent-hover" | "border-accent-active" | "border-accent-foreground" | "border-neutral" | "border-neutral-hover" | "border-neutral-active" | "border-neutral-foreground" | "border-muted" | "border-muted-hover" | "border-muted-active" | "border-muted-foreground" | "border-error" | "border-error-hover" | "border-error-active" | "border-error-foreground" | "border-success" | "border-success-hover" | "border-success-active" | "border-success-foreground" | "border-warning" | "border-warning-hover" | "border-warning-active" | "border-warning-foreground" | "border-info" | "border-info-hover" | "border-info-active" | "border-info-foreground" | "border-border" | "border-input" | "border-ring" | "ring-background" | "ring-foreground" | "ring-card" | "ring-card-foreground" | "ring-popover" | "ring-popover-foreground" | "ring-primary" | "ring-primary-hover" | "ring-primary-active" | "ring-primary-foreground" | "ring-accent" | "ring-accent-hover" | "ring-accent-active" | "ring-accent-foreground" | "ring-neutral" | "ring-neutral-hover" | "ring-neutral-active" | "ring-neutral-foreground" | "ring-muted" | "ring-muted-hover" | "ring-muted-active" | "ring-muted-foreground" | "ring-error" | "ring-error-hover" | "ring-error-active" | "ring-error-foreground" | "ring-success" | "ring-success-hover" | "ring-success-active" | "ring-success-foreground" | "ring-warning" | "ring-warning-hover" | "ring-warning-active" | "ring-warning-foreground" | "ring-info" | "ring-info-hover" | "ring-info-active" | "ring-info-foreground" | "ring-border" | "ring-input" | "ring-ring" | "text-background" | "text-foreground" | "text-card" | "text-card-foreground" | "text-popover" | "text-popover-foreground" | "text-primary" | "text-primary-hover" | "text-primary-active" | "text-primary-foreground" | "text-accent" | "text-accent-hover" | "text-accent-active" | "text-accent-foreground" | "text-neutral" | "text-neutral-hover" | "text-neutral-active" | "text-neutral-foreground" | "text-muted" | "text-muted-hover" | "text-muted-active" | "text-muted-foreground" | "text-error" | "text-error-hover" | "text-error-active" | "text-error-foreground" | "text-success" | "text-success-hover" | "text-success-active" | "text-success-foreground" | "text-warning" | "text-warning-hover" | "text-warning-active" | "text-warning-foreground" | "text-info" | "text-info-hover" | "text-info-active" | "text-info-foreground" | "text-border" | "text-input" | "text-ring" | "bg-background" | "bg-foreground" | "bg-card" | "bg-card-foreground" | "bg-popover" | "bg-popover-foreground" | "bg-primary" | "bg-primary-hover" | "bg-primary-active" | "bg-primary-foreground" | "bg-accent" | "bg-accent-hover" | "bg-accent-active" | "bg-accent-foreground" | "bg-neutral" | "bg-neutral-hover" | "bg-neutral-active" | "bg-neutral-foreground" | "bg-muted" | "bg-muted-hover" | "bg-muted-active" | "bg-muted-foreground" | "bg-error" | "bg-error-hover" | "bg-error-active" | "bg-error-foreground" | "bg-success" | "bg-success-hover" | "bg-success-active" | "bg-success-foreground" | "bg-warning" | "bg-warning-hover" | "bg-warning-active" | "bg-warning-foreground" | "bg-info" | "bg-info-hover" | "bg-info-active" | "bg-info-foreground" | "bg-border" | "bg-input" | "bg-ring" | "outline-background" | "outline-foreground" | "outline-card" | "outline-card-foreground" | "outline-popover" | "outline-popover-foreground" | "outline-primary" | "outline-primary-hover" | "outline-primary-active" | "outline-primary-foreground" | "outline-accent" | "outline-accent-hover" | "outline-accent-active" | "outline-accent-foreground" | "outline-neutral" | "outline-neutral-hover" | "outline-neutral-active" | "outline-neutral-foreground" | "outline-muted" | "outline-muted-hover" | "outline-muted-active" | "outline-muted-foreground" | "outline-error" | "outline-error-hover" | "outline-error-active" | "outline-error-foreground" | "outline-success" | "outline-success-hover" | "outline-success-active" | "outline-success-foreground" | "outline-warning" | "outline-warning-hover" | "outline-warning-active" | "outline-warning-foreground" | "outline-info" | "outline-info-hover" | "outline-info-active" | "outline-info-foreground" | "outline-border" | "outline-input" | "outline-ring" | "decoration-background" | "decoration-foreground" | "decoration-card" | "decoration-card-foreground" | "decoration-popover" | "decoration-popover-foreground" | "decoration-primary" | "decoration-primary-hover" | "decoration-primary-active" | "decoration-primary-foreground" | "decoration-accent" | "decoration-accent-hover" | "decoration-accent-active" | "decoration-accent-foreground" | "decoration-neutral" | "decoration-neutral-hover" | "decoration-neutral-active" | "decoration-neutral-foreground" | "decoration-muted" | "decoration-muted-hover" | "decoration-muted-active" | "decoration-muted-foreground" | "decoration-error" | "decoration-error-hover" | "decoration-error-active" | "decoration-error-foreground" | "decoration-success" | "decoration-success-hover" | "decoration-success-active" | "decoration-success-foreground" | "decoration-warning" | "decoration-warning-hover" | "decoration-warning-active" | "decoration-warning-foreground" | "decoration-info" | "decoration-info-hover" | "decoration-info-active" | "decoration-info-foreground" | "decoration-border" | "decoration-input" | "decoration-ring" | "fill-background" | "fill-foreground" | "fill-card" | "fill-card-foreground" | "fill-popover" | "fill-popover-foreground" | "fill-primary" | "fill-primary-hover" | "fill-primary-active" | "fill-primary-foreground" | "fill-accent" | "fill-accent-hover" | "fill-accent-active" | "fill-accent-foreground" | "fill-neutral" | "fill-neutral-hover" | "fill-neutral-active" | "fill-neutral-foreground" | "fill-muted" | "fill-muted-hover" | "fill-muted-active" | "fill-muted-foreground" | "fill-error" | "fill-error-hover" | "fill-error-active" | "fill-error-foreground" | "fill-success" | "fill-success-hover" | "fill-success-active" | "fill-success-foreground" | "fill-warning" | "fill-warning-hover" | "fill-warning-active" | "fill-warning-foreground" | "fill-info" | "fill-info-hover" | "fill-info-active" | "fill-info-foreground" | "fill-border" | "fill-input" | "fill-ring" | "stroke-background" | "stroke-foreground" | "stroke-card" | "stroke-card-foreground" | "stroke-popover" | "stroke-popover-foreground" | "stroke-primary" | "stroke-primary-hover" | "stroke-primary-active" | "stroke-primary-foreground" | "stroke-accent" | "stroke-accent-hover" | "stroke-accent-active" | "stroke-accent-foreground" | "stroke-neutral" | "stroke-neutral-hover" | "stroke-neutral-active" | "stroke-neutral-foreground" | "stroke-muted" | "stroke-muted-hover" | "stroke-muted-active" | "stroke-muted-foreground" | "stroke-error" | "stroke-error-hover" | "stroke-error-active" | "stroke-error-foreground" | "stroke-success" | "stroke-success-hover" | "stroke-success-active" | "stroke-success-foreground" | "stroke-warning" | "stroke-warning-hover" | "stroke-warning-active" | "stroke-warning-foreground" | "stroke-info" | "stroke-info-hover" | "stroke-info-active" | "stroke-info-foreground" | "stroke-border" | "stroke-input" | "stroke-ring")[];
+export type ThemeColorProp = ThemeColor | ThemeColorClass;
+/**
+ * Core color variants used across all components
+ * Use this type for component `variant` props to ensure consistency
+ * Includes: neutral, primary, accent, info, success, warning, error
+ */
+export type ColorVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'accent';
+/**
+ * Notification/alert-specific color variants (excludes neutral/primary/accent)
+ * For feedback components like Alert, Toast, etc.
+ */
+export type NotificationColorVariant = Exclude<ColorVariant, 'neutral' | 'primary' | 'accent'>;
+/**
+ * Common color variants for most components (the essential 5)
+ * Includes: neutral, primary, success, warning, error
+ */
+export type CommonColorVariant = Extract<ColorVariant, 'neutral' | 'primary' | 'success' | 'warning' | 'error'>;
+/**
+ * Type-safe record ensuring all color variants are defined for each style
+ */
+type ColorVariantRecord = Record<ColorVariant, string>;
+/**
+ * Standardized color variant classes for consistent component styling
+ * All variants support: neutral, primary, accent, info, success, warning, error
+ */
+export declare const colorVariants: {
+    solid: ColorVariantRecord;
+    outline: ColorVariantRecord;
+    ghost: ColorVariantRecord;
+    soft: ColorVariantRecord;
+    link: ColorVariantRecord;
+    badge: ColorVariantRecord & {
+        inverted: ColorVariantRecord;
+    };
+    alert: ColorVariantRecord;
+    breadcrumb: {
+        link: ColorVariantRecord;
+        active: ColorVariantRecord;
+    };
+};
+export type ColorVariantStyle = keyof typeof colorVariants;
+export type ColorVariantKey<T extends ColorVariantStyle> = keyof (typeof colorVariants)[T];
+export declare const radii: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare const fonts: {
+    sans: string;
+    mono: string;
+};
+export declare const alignments: readonly ["left", "center", "right"];
+export type Alignment = (typeof alignments)[number];
+export declare const inputAlignClasses: Record<Alignment, string>;
+/**
+ * HTML autocomplete attribute values for form inputs
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+ */
+export declare const autocompleteOptions: readonly ["on", "off", "address-line1", "address-line2", "address-line3", "address-level1", "address-level2", "address-level3", "address-level4", "street-address", "country", "country-name", "postal-code", "name", "additional-name", "family-name", "given-name", "honoric-prefix", "honoric-suffix", "nickname", "organization-title", "username", "new-password", "current-password", "bday", "bday-day", "bday-month", "bday-year", "sex", "one-time-code", "organization", "cc-name", "cc-given-name", "cc-additional-name", "cc-family-name", "cc-number", "cc-exp", "cc-exp-month", "cc-exp-year", "cc-csc", "cc-type", "transaction-currency", "transaction-amount", "language", "url", "email", "photo", "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-local-prefix", "tel-local-suffix", "tel-extension", "impp"];
+export type AutocompleteOption = (typeof autocompleteOptions)[number];
+export {};
+//# sourceMappingURL=tokens.d.ts.map

package/dist/theme/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC;AAC7C,eAAO,MAAM,eAAe,EAA0B,UAAU,EAAE,CAAC;AAEnE,eAAO,MAAM,kBAAkB,sFAAuF,CAAC;AACvH,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AACnE,MAAM,MAAM,eAAe,GAAG,GAAG,gBAAgB,IAAI,UAAU,EAAE,CAAC;AAElE,eAAO,MAAM,iBAAiB,8wOAE7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,eAAe,CAAC;AAE1D;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEvG;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAE/F;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;AAKhH;;GAEG;AACH,KAAK,kBAAkB,GAAG,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE;IAC1B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,OAAO,EAAE,kBAAkB,CAAC;IAC5B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,IAAI,EAAE,kBAAkB,CAAC;IACzB,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,kBAAkB,CAAA;KAAE,CAAC;IAC7D,KAAK,EAAE,kBAAkB,CAAC;IAC1B,UAAU,EAAE;QAAE,IAAI,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,kBAAkB,CAAA;KAAE,CAAC;CAmHtE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,aAAa,CAAC;AAC3D,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,iBAAiB,IAAI,MAAM,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3F,eAAO,MAAM,KAAK;;;;;CAKjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;CAGjB,CAAC;AAEF,eAAO,MAAM,UAAU,sCAAuC,CAAC;AAC/D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,g0BAyDtB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/theme/tokens.js

@@ -0,0 +1,164 @@
+const colors = {
+  background: "var(--background)",
+  foreground: "var(--foreground)",
+  card: "var(--card)",
+  "card-foreground": "var(--card-foreground)",
+  popover: "var(--popover)",
+  "popover-foreground": "var(--popover-foreground)",
+  primary: "var(--primary)",
+  "primary-hover": "var(--primary-hover)",
+  "primary-active": "var(--primary-active)",
+  "primary-foreground": "var(--primary-foreground)",
+  accent: "var(--accent)",
+  "accent-hover": "var(--accent-hover)",
+  "accent-active": "var(--accent-active)",
+  "accent-foreground": "var(--accent-foreground)",
+  neutral: "var(--neutral)",
+  "neutral-hover": "var(--neutral-hover)",
+  "neutral-active": "var(--neutral-active)",
+  "neutral-foreground": "var(--neutral-foreground)",
+  muted: "var(--muted)",
+  "muted-hover": "var(--muted-hover)",
+  "muted-active": "var(--muted-active)",
+  "muted-foreground": "var(--muted-foreground)",
+  error: "var(--error)",
+  "error-hover": "var(--error-hover)",
+  "error-active": "var(--error-active)",
+  "error-foreground": "var(--error-foreground)",
+  success: "var(--success)",
+  "success-hover": "var(--success-hover)",
+  "success-active": "var(--success-active)",
+  "success-foreground": "var(--success-foreground)",
+  warning: "var(--warning)",
+  "warning-hover": "var(--warning-hover)",
+  "warning-active": "var(--warning-active)",
+  "warning-foreground": "var(--warning-foreground)",
+  info: "var(--info)",
+  "info-hover": "var(--info-hover)",
+  "info-active": "var(--info-active)",
+  "info-foreground": "var(--info-foreground)",
+  border: "var(--border)",
+  input: "var(--input)",
+  ring: "var(--ring)"
+};
+const themeColorNames = Object.keys(colors);
+const colorClassPrefixes = ["text", "bg", "border", "ring", "outline", "decoration", "fill", "stroke"];
+colorClassPrefixes.flatMap(
+  (prefix) => themeColorNames.map((color) => `${prefix}-${color}`)
+);
+const outlineBaseClasses = "border-2 bg-transparent transition-colors transition-shadow duration-200 ease-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-transparent";
+const colorVariants = {
+  // Solid buttons/elements - filled background
+  solid: {
+    neutral: "bg-neutral text-neutral-foreground hover:bg-neutral-hover active:bg-neutral-active",
+    primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+    accent: "bg-accent text-accent-foreground hover:bg-accent-hover active:bg-accent-active",
+    info: "bg-info text-info-foreground hover:bg-info-hover active:bg-info-active",
+    success: "bg-success text-success-foreground hover:bg-success-hover active:bg-success-active",
+    warning: "bg-warning text-warning-foreground hover:bg-warning-hover active:bg-warning-active",
+    error: "bg-error text-error-foreground hover:bg-error-hover active:bg-error-active"
+  },
+  // Outline style - transparent with border
+  outline: {
+    neutral: `${outlineBaseClasses} border-neutral text-neutral hover:border-neutral-hover hover:text-neutral-hover hover:shadow-[inset_0_0_0_1px_var(--neutral))] focus-visible:shadow-[inset_0_0_0_1px_var(--neutral))] focus-visible:outline-neutral/3`,
+    primary: `${outlineBaseClasses} border-primary text-primary hover:border-primary-hover hover:text-primary-hover hover:shadow-[inset_0_0_0_1px_var(--primary))] focus-visible:shadow-[inset_0_0_0_1px_var(--primary))] focus-visible:outline-primary/3`,
+    accent: `${outlineBaseClasses} border-accent text-accent hover:border-accent-hover hover:text-accent-hover hover:shadow-[inset_0_0_0_1px_var(--accent))] focus-visible:shadow-[inset_0_0_0_1px_var(--accent))] focus-visible:outline-accent/3`,
+    info: `${outlineBaseClasses} border-info text-info hover:border-info-hover hover:text-info-hover hover:shadow-[inset_0_0_0_1px_var(--info))] focus-visible:shadow-[inset_0_0_0_1px_var(--info))] focus-visible:outline-info/3`,
+    success: `${outlineBaseClasses} border-success text-success hover:border-success-hover hover:text-success-hover hover:shadow-[inset_0_0_0_1px_var(--success))] focus-visible:shadow-[inset_0_0_0_1px_var(--success))] focus-visible:outline-success/3`,
+    warning: `${outlineBaseClasses} border-warning text-warning hover:border-warning-hover hover:text-warning-hover hover:shadow-[inset_0_0_0_1px_var(--warning))] focus-visible:shadow-[inset_0_0_0_1px_var(--warning))] focus-visible:outline-warning/3`,
+    error: `${outlineBaseClasses} border-error text-error hover:border-error-hover hover:text-error-hover hover:shadow-[inset_0_0_0_1px_var(--error))] focus-visible:shadow-[inset_0_0_0_1px_var(--error))] focus-visible:outline-error/5`
+  },
+  // Ghost style - transparent with subtle hover
+  ghost: {
+    neutral: "bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20",
+    primary: "bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20",
+    accent: "bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20",
+    info: "bg-transparent text-info hover:bg-info/10 active:bg-info/20",
+    success: "bg-transparent text-success hover:bg-success/10 active:bg-success/20",
+    warning: "bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20",
+    error: "bg-transparent text-error hover:bg-error/10 active:bg-error/20"
+  },
+  // Soft style - subtle background
+  soft: {
+    neutral: "bg-neutral/20 text-neutral hover:bg-neutral/30 active:bg-neutral/40",
+    primary: "bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40",
+    accent: "bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40",
+    info: "bg-info/20 text-info hover:bg-info/30 active:bg-info/40",
+    success: "bg-success/20 text-success hover:bg-success/30 active:bg-success/40",
+    warning: "bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40",
+    error: "bg-error/20 text-error hover:bg-error/30 active:bg-error/40"
+  },
+  // Link style - text only with underline on hover
+  link: {
+    neutral: "bg-transparent text-foreground underline-offset-4 hover:underline",
+    primary: "bg-transparent text-primary underline-offset-4 hover:underline",
+    accent: "bg-transparent text-accent underline-offset-4 hover:underline",
+    info: "bg-transparent text-info underline-offset-4 hover:underline",
+    success: "bg-transparent text-success underline-offset-4 hover:underline",
+    warning: "bg-transparent text-warning underline-offset-4 hover:underline",
+    error: "bg-transparent text-error underline-offset-4 hover:underline"
+  },
+  // Badge/Chip style - subtle filled background with border
+  badge: {
+    neutral: "bg-neutral/5 text-neutral border border-neutral",
+    primary: "bg-primary/5 text-primary border border-primary",
+    accent: "bg-accent/5 text-accent border border-accent",
+    info: "bg-info/5 text-info border border-info",
+    success: "bg-success/5 text-success border border-success",
+    warning: "bg-warning/5 text-warning border border-warning",
+    error: "bg-error/5 text-error border border-error",
+    inverted: {
+      neutral: "bg-neutral/40 text-neutral-foreground border border-neutral",
+      primary: "bg-primary/90 text-primary-foreground border border-primary-foreground",
+      accent: "bg-accent/90 text-accent-foreground border border-accent",
+      info: "bg-info/90 text-info-foreground border border-info",
+      success: "bg-success/90 text-success-foreground border border-success",
+      warning: "bg-warning/90 text-warning-foreground border border-warning",
+      error: "bg-error/90 text-error-foreground border border-error"
+    }
+  },
+  // Alert style - translucent background with border
+  alert: {
+    neutral: "bg-neutral/30 text-foreground border-neutral/50 backdrop-blur-3xl",
+    primary: "bg-primary/30 text-foreground border-primary/50 backdrop-blur-3xl",
+    accent: "bg-accent/30 text-foreground border-accent/50 backdrop-blur-3xl",
+    info: "bg-info/30 text-foreground border-info/50 backdrop-blur-3xl",
+    success: "bg-success/30 text-foreground border-success/50 backdrop-blur-3xl",
+    warning: "bg-warning/30 text-foreground border-warning/50 backdrop-blur-3xl",
+    error: "bg-error/30 text-foreground border-error/50 backdrop-blur-3xl"
+  },
+  // Breadcrumb style - link and active states
+  breadcrumb: {
+    link: {
+      neutral: "text-neutral hover:text-neutral-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-neutral-ring rounded px-1 -mx-1",
+      primary: "text-primary hover:text-primary-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-ring rounded px-1 -mx-1",
+      accent: "text-accent hover:text-accent-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-accent-ring rounded px-1 -mx-1",
+      info: "text-info hover:text-info-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-info-ring rounded px-1 -mx-1",
+      success: "text-success hover:text-success-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-success-ring rounded px-1 -mx-1",
+      warning: "text-warning hover:text-warning-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-warning-ring rounded px-1 -mx-1",
+      error: "text-error hover:text-error-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-error-ring rounded px-1 -mx-1"
+    },
+    active: {
+      neutral: "text-neutral-active font-medium",
+      primary: "text-primary-active font-medium",
+      accent: "text-accent-active font-medium",
+      info: "text-info-active font-medium",
+      success: "text-success-active font-medium",
+      warning: "text-warning-active font-medium",
+      error: "text-error-active font-medium"
+    }
+  }
+};
+const inputAlignClasses = {
+  left: "mr-auto",
+  center: "mx-auto",
+  right: "ml-auto"
+};
+export {
+  colorClassPrefixes,
+  colorVariants,
+  colors,
+  inputAlignClasses,
+  themeColorNames
+};
+//# sourceMappingURL=tokens.js.map

package/dist/theme/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sources":["../../src/theme/tokens.ts"],"sourcesContent":["/**\n * Theme color tokens and helpers for the design system.\n * Maps CSS custom properties from globals.css (light/dark) to JS for inline styles and class generation.\n */\n\nexport const colors = {\n  background: 'var(--background)',\n  foreground: 'var(--foreground)',\n  card: 'var(--card)',\n  'card-foreground': 'var(--card-foreground)',\n  popover: 'var(--popover)',\n  'popover-foreground': 'var(--popover-foreground)',\n  primary: 'var(--primary)',\n  'primary-hover': 'var(--primary-hover)',\n  'primary-active': 'var(--primary-active)',\n  'primary-foreground': 'var(--primary-foreground)',\n  accent: 'var(--accent)',\n  'accent-hover': 'var(--accent-hover)',\n  'accent-active': 'var(--accent-active)',\n  'accent-foreground': 'var(--accent-foreground)',\n  neutral: 'var(--neutral)',\n  'neutral-hover': 'var(--neutral-hover)',\n  'neutral-active': 'var(--neutral-active)',\n  'neutral-foreground': 'var(--neutral-foreground)',\n  muted: 'var(--muted)',\n  'muted-hover': 'var(--muted-hover)',\n  'muted-active': 'var(--muted-active)',\n  'muted-foreground': 'var(--muted-foreground)',\n  error: 'var(--error)',\n  'error-hover': 'var(--error-hover)',\n  'error-active': 'var(--error-active)',\n  'error-foreground': 'var(--error-foreground)',\n  success: 'var(--success)',\n  'success-hover': 'var(--success-hover)',\n  'success-active': 'var(--success-active)',\n  'success-foreground': 'var(--success-foreground)',\n  warning: 'var(--warning)',\n  'warning-hover': 'var(--warning-hover)',\n  'warning-active': 'var(--warning-active)',\n  'warning-foreground': 'var(--warning-foreground)',\n  info: 'var(--info)',\n  'info-hover': 'var(--info-hover)',\n  'info-active': 'var(--info-active)',\n  'info-foreground': 'var(--info-foreground)',\n  border: 'var(--border)',\n  input: 'var(--input)',\n  ring: 'var(--ring)'\n};\n\nexport type ThemeColor = keyof typeof colors;\nexport const themeColorNames = Object.keys(colors) as ThemeColor[];\n\nexport const colorClassPrefixes = ['text', 'bg', 'border', 'ring', 'outline', 'decoration', 'fill', 'stroke'] as const;\nexport type ColorClassPrefix = (typeof colorClassPrefixes)[number];\nexport type ThemeColorClass = `${ColorClassPrefix}-${ThemeColor}`;\n\nexport const themeColorClasses = colorClassPrefixes.flatMap((prefix) =>\n  themeColorNames.map((color) => `${prefix}-${color}` as ThemeColorClass)\n);\n\nexport type ThemeColorProp = ThemeColor | ThemeColorClass;\n\n/**\n * Core color variants used across all components\n * Use this type for component `variant` props to ensure consistency\n * Includes: neutral, primary, accent, info, success, warning, error\n */\nexport type ColorVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'accent';\n\n/**\n * Notification/alert-specific color variants (excludes neutral/primary/accent)\n * For feedback components like Alert, Toast, etc.\n */\nexport type NotificationColorVariant = Exclude<ColorVariant, 'neutral' | 'primary' | 'accent'>;\n\n/**\n * Common color variants for most components (the essential 5)\n * Includes: neutral, primary, success, warning, error\n */\nexport type CommonColorVariant = Extract<ColorVariant, 'neutral' | 'primary' | 'success' | 'warning' | 'error'>;\n\nconst outlineBaseClasses =\n  'border-2 bg-transparent transition-colors transition-shadow duration-200 ease-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-transparent' as const;\n\n/**\n * Type-safe record ensuring all color variants are defined for each style\n */\ntype ColorVariantRecord = Record<ColorVariant, string>;\n\n/**\n * Standardized color variant classes for consistent component styling\n * All variants support: neutral, primary, accent, info, success, warning, error\n */\nexport const colorVariants: {\n  solid: ColorVariantRecord;\n  outline: ColorVariantRecord;\n  ghost: ColorVariantRecord;\n  soft: ColorVariantRecord;\n  link: ColorVariantRecord;\n  badge: ColorVariantRecord & { inverted: ColorVariantRecord };\n  alert: ColorVariantRecord;\n  breadcrumb: { link: ColorVariantRecord; active: ColorVariantRecord };\n} = {\n  // Solid buttons/elements - filled background\n  solid: {\n    neutral: 'bg-neutral text-neutral-foreground hover:bg-neutral-hover active:bg-neutral-active',\n    primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n    accent: 'bg-accent text-accent-foreground hover:bg-accent-hover active:bg-accent-active',\n    info: 'bg-info text-info-foreground hover:bg-info-hover active:bg-info-active',\n    success: 'bg-success text-success-foreground hover:bg-success-hover active:bg-success-active',\n    warning: 'bg-warning text-warning-foreground hover:bg-warning-hover active:bg-warning-active',\n    error: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active'\n  },\n\n  // Outline style - transparent with border\n  outline: {\n    neutral: `${outlineBaseClasses} border-neutral text-neutral hover:border-neutral-hover hover:text-neutral-hover hover:shadow-[inset_0_0_0_1px_var(--neutral))] focus-visible:shadow-[inset_0_0_0_1px_var(--neutral))] focus-visible:outline-neutral/3`,\n    primary: `${outlineBaseClasses} border-primary text-primary hover:border-primary-hover hover:text-primary-hover hover:shadow-[inset_0_0_0_1px_var(--primary))] focus-visible:shadow-[inset_0_0_0_1px_var(--primary))] focus-visible:outline-primary/3`,\n    accent: `${outlineBaseClasses} border-accent text-accent hover:border-accent-hover hover:text-accent-hover hover:shadow-[inset_0_0_0_1px_var(--accent))] focus-visible:shadow-[inset_0_0_0_1px_var(--accent))] focus-visible:outline-accent/3`,\n    info: `${outlineBaseClasses} border-info text-info hover:border-info-hover hover:text-info-hover hover:shadow-[inset_0_0_0_1px_var(--info))] focus-visible:shadow-[inset_0_0_0_1px_var(--info))] focus-visible:outline-info/3`,\n    success: `${outlineBaseClasses} border-success text-success hover:border-success-hover hover:text-success-hover hover:shadow-[inset_0_0_0_1px_var(--success))] focus-visible:shadow-[inset_0_0_0_1px_var(--success))] focus-visible:outline-success/3`,\n    warning: `${outlineBaseClasses} border-warning text-warning hover:border-warning-hover hover:text-warning-hover hover:shadow-[inset_0_0_0_1px_var(--warning))] focus-visible:shadow-[inset_0_0_0_1px_var(--warning))] focus-visible:outline-warning/3`,\n    error: `${outlineBaseClasses} border-error text-error hover:border-error-hover hover:text-error-hover hover:shadow-[inset_0_0_0_1px_var(--error))] focus-visible:shadow-[inset_0_0_0_1px_var(--error))] focus-visible:outline-error/5`\n  },\n\n  // Ghost style - transparent with subtle hover\n  ghost: {\n    neutral: 'bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20',\n    primary: 'bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20',\n    accent: 'bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20',\n    info: 'bg-transparent text-info hover:bg-info/10 active:bg-info/20',\n    success: 'bg-transparent text-success hover:bg-success/10 active:bg-success/20',\n    warning: 'bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20',\n    error: 'bg-transparent text-error hover:bg-error/10 active:bg-error/20'\n  },\n\n  // Soft style - subtle background\n  soft: {\n    neutral: 'bg-neutral/20 text-neutral hover:bg-neutral/30 active:bg-neutral/40',\n    primary: 'bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40',\n    accent: 'bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40',\n    info: 'bg-info/20 text-info hover:bg-info/30 active:bg-info/40',\n    success: 'bg-success/20 text-success hover:bg-success/30 active:bg-success/40',\n    warning: 'bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40',\n    error: 'bg-error/20 text-error hover:bg-error/30 active:bg-error/40'\n  },\n\n  // Link style - text only with underline on hover\n  link: {\n    neutral: 'bg-transparent text-foreground underline-offset-4 hover:underline',\n    primary: 'bg-transparent text-primary underline-offset-4 hover:underline',\n    accent: 'bg-transparent text-accent underline-offset-4 hover:underline',\n    info: 'bg-transparent text-info underline-offset-4 hover:underline',\n    success: 'bg-transparent text-success underline-offset-4 hover:underline',\n    warning: 'bg-transparent text-warning underline-offset-4 hover:underline',\n    error: 'bg-transparent text-error underline-offset-4 hover:underline'\n  },\n\n  // Badge/Chip style - subtle filled background with border\n  badge: {\n    neutral: 'bg-neutral/5 text-neutral border border-neutral',\n    primary: 'bg-primary/5 text-primary border border-primary',\n    accent: 'bg-accent/5 text-accent border border-accent',\n    info: 'bg-info/5 text-info border border-info',\n    success: 'bg-success/5 text-success border border-success',\n    warning: 'bg-warning/5 text-warning border border-warning',\n    error: 'bg-error/5 text-error border border-error',\n    inverted: {\n      neutral: 'bg-neutral/40 text-neutral-foreground border border-neutral',\n      primary: 'bg-primary/90 text-primary-foreground border border-primary-foreground',\n      accent: 'bg-accent/90 text-accent-foreground border border-accent',\n      info: 'bg-info/90 text-info-foreground border border-info',\n      success: 'bg-success/90 text-success-foreground border border-success',\n      warning: 'bg-warning/90 text-warning-foreground border border-warning',\n      error: 'bg-error/90 text-error-foreground border border-error'\n    }\n  },\n\n  // Alert style - translucent background with border\n  alert: {\n    neutral: 'bg-neutral/30 text-foreground border-neutral/50 backdrop-blur-3xl',\n    primary: 'bg-primary/30 text-foreground border-primary/50 backdrop-blur-3xl',\n    accent: 'bg-accent/30 text-foreground border-accent/50 backdrop-blur-3xl',\n    info: 'bg-info/30 text-foreground border-info/50 backdrop-blur-3xl',\n    success: 'bg-success/30 text-foreground border-success/50 backdrop-blur-3xl',\n    warning: 'bg-warning/30 text-foreground border-warning/50 backdrop-blur-3xl',\n    error: 'bg-error/30 text-foreground border-error/50 backdrop-blur-3xl'\n  },\n\n  // Breadcrumb style - link and active states\n  breadcrumb: {\n    link: {\n      neutral:\n        'text-neutral hover:text-neutral-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-neutral-ring rounded px-1 -mx-1',\n      primary:\n        'text-primary hover:text-primary-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-ring rounded px-1 -mx-1',\n      accent:\n        'text-accent hover:text-accent-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-accent-ring rounded px-1 -mx-1',\n      info: 'text-info hover:text-info-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-info-ring rounded px-1 -mx-1',\n      success:\n        'text-success hover:text-success-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-success-ring rounded px-1 -mx-1',\n      warning:\n        'text-warning hover:text-warning-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-warning-ring rounded px-1 -mx-1',\n      error:\n        'text-error hover:text-error-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-error-ring rounded px-1 -mx-1'\n    },\n    active: {\n      neutral: 'text-neutral-active font-medium',\n      primary: 'text-primary-active font-medium',\n      accent: 'text-accent-active font-medium',\n      info: 'text-info-active font-medium',\n      success: 'text-success-active font-medium',\n      warning: 'text-warning-active font-medium',\n      error: 'text-error-active font-medium'\n    }\n  }\n};\n\nexport type ColorVariantStyle = keyof typeof colorVariants;\nexport type ColorVariantKey<T extends ColorVariantStyle> = keyof (typeof colorVariants)[T];\n\nexport const radii = {\n  sm: '0.25rem',\n  md: '0.5rem',\n  lg: '0.75rem',\n  xl: '1rem'\n};\n\nexport const fonts = {\n  sans: \"'Inter', system-ui, sans-serif\",\n  mono: \"'JetBrains Mono', monospace\"\n};\n\nexport const alignments = ['left', 'center', 'right'] as const;\nexport type Alignment = (typeof alignments)[number];\n\nexport const inputAlignClasses: Record<Alignment, string> = {\n  left: 'mr-auto',\n  center: 'mx-auto',\n  right: 'ml-auto'\n};\n\n/**\n * HTML autocomplete attribute values for form inputs\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\nexport const autocompleteOptions = [\n  'on',\n  'off',\n  'address-line1',\n  'address-line2',\n  'address-line3',\n  'address-level1',\n  'address-level2',\n  'address-level3',\n  'address-level4',\n  'street-address',\n  'country',\n  'country-name',\n  'postal-code',\n  'name',\n  'additional-name',\n  'family-name',\n  'given-name',\n  'honoric-prefix',\n  'honoric-suffix',\n  'nickname',\n  'organization-title',\n  'username',\n  'new-password',\n  'current-password',\n  'bday',\n  'bday-day',\n  'bday-month',\n  'bday-year',\n  'sex',\n  'one-time-code',\n  'organization',\n  'cc-name',\n  'cc-given-name',\n  'cc-additional-name',\n  'cc-family-name',\n  'cc-number',\n  'cc-exp',\n  'cc-exp-month',\n  'cc-exp-year',\n  'cc-csc',\n  'cc-type',\n  'transaction-currency',\n  'transaction-amount',\n  'language',\n  'url',\n  'email',\n  'photo',\n  'tel',\n  'tel-country-code',\n  'tel-national',\n  'tel-area-code',\n  'tel-local',\n  'tel-local-prefix',\n  'tel-local-suffix',\n  'tel-extension',\n  'impp'\n] as const;\n\nexport type AutocompleteOption = (typeof autocompleteOptions)[number];\n"],"names":[],"mappings":"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"}

package/dist/utils/debounce.d.ts

@@ -0,0 +1,7 @@
+export type Debounced<T extends (...args: unknown[]) => void> = {
+    call: (...args: Parameters<T>) => void;
+    flush: () => void;
+    cancel: () => void;
+};
+export declare function debounce<T extends (...args: unknown[]) => void>(fn: T, delayMs: number, setTimer?: (cb: () => void, ms: number) => ReturnType<typeof setTimeout>, clearTimer?: (id: ReturnType<typeof setTimeout>) => void): Debounced<T>;
+//# sourceMappingURL=debounce.d.ts.map

package/dist/utils/debounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,IAAI;IAC9D,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EAC7D,EAAE,EAAE,CAAC,EACL,OAAO,EAAE,MAAM,EACf,QAAQ,GAAE,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,UAAU,CAAC,OAAO,UAAU,CAAc,EACpF,UAAU,GAAE,CAAC,EAAE,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,KAAK,IAAmB,GACrE,SAAS,CAAC,CAAC,CAAC,CAyCd"}

package/dist/utils/debounce.js

@@ -0,0 +1,40 @@
+function debounce(fn, delayMs, setTimer = setTimeout, clearTimer = clearTimeout) {
+  let timer = null;
+  let lastArgs = null;
+  const invoke = () => {
+    if (lastArgs) {
+      fn(...lastArgs);
+      lastArgs = null;
+    }
+  };
+  return {
+    call(...args) {
+      lastArgs = args;
+      if (timer != null) {
+        clearTimer(timer);
+      }
+      timer = setTimer(() => {
+        timer = null;
+        invoke();
+      }, delayMs);
+    },
+    flush() {
+      if (timer != null) {
+        clearTimer(timer);
+        timer = null;
+        invoke();
+      }
+    },
+    cancel() {
+      if (timer != null) {
+        clearTimer(timer);
+        timer = null;
+      }
+      lastArgs = null;
+    }
+  };
+}
+export {
+  debounce
+};
+//# sourceMappingURL=debounce.js.map

package/dist/utils/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debounce.js","sources":["../../src/utils/debounce.ts"],"sourcesContent":["export type Debounced<T extends (...args: unknown[]) => void> = {\n  call: (...args: Parameters<T>) => void;\n  flush: () => void;\n  cancel: () => void;\n};\n\nexport function debounce<T extends (...args: unknown[]) => void>(\n  fn: T,\n  delayMs: number,\n  setTimer: (cb: () => void, ms: number) => ReturnType<typeof setTimeout> = setTimeout,\n  clearTimer: (id: ReturnType<typeof setTimeout>) => void = clearTimeout\n): Debounced<T> {\n  let timer: ReturnType<typeof setTimeout> | null = null;\n  let lastArgs: Parameters<T> | null = null;\n\n  const invoke = () => {\n    if (lastArgs) {\n      fn(...lastArgs);\n      lastArgs = null;\n    }\n  };\n\n  return {\n    call(...args: Parameters<T>) {\n      lastArgs = args;\n\n      if (timer != null) {\n        clearTimer(timer);\n      }\n\n      timer = setTimer(() => {\n        timer = null;\n        invoke();\n      }, delayMs);\n    },\n\n    flush() {\n      if (timer != null) {\n        clearTimer(timer);\n        timer = null;\n        invoke();\n      }\n    },\n\n    cancel() {\n      if (timer != null) {\n        clearTimer(timer);\n        timer = null;\n      }\n      lastArgs = null;\n    }\n  };\n}\n"],"names":[],"mappings":"AAMO,SAAS,SACd,IACA,SACA,WAA0E,YAC1E,aAA0D,cAC5C;AACd,MAAI,QAA8C;AAClD,MAAI,WAAiC;AAErC,QAAM,SAAS,MAAM;AACnB,QAAI,UAAU;AACZ,SAAG,GAAG,QAAQ;AACd,iBAAW;AAAA,IACb;AAAA,EACF;AAEA,SAAO;AAAA,IACL,QAAQ,MAAqB;AAC3B,iBAAW;AAEX,UAAI,SAAS,MAAM;AACjB,mBAAW,KAAK;AAAA,MAClB;AAEA,cAAQ,SAAS,MAAM;AACrB,gBAAQ;AACR,eAAA;AAAA,MACF,GAAG,OAAO;AAAA,IACZ;AAAA,IAEA,QAAQ;AACN,UAAI,SAAS,MAAM;AACjB,mBAAW,KAAK;AAChB,gBAAQ;AACR,eAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEA,SAAS;AACP,UAAI,SAAS,MAAM;AACjB,mBAAW,KAAK;AAChB,gBAAQ;AAAA,MACV;AACA,iBAAW;AAAA,IACb;AAAA,EAAA;AAEJ;"}