npm - @hyddenlabs/hydn-ui - Versions diffs - 0.3.2 → 0.3.3 - Mend

@hyddenlabs/hydn-ui 0.3.2 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

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

	@@ -1 +1 @@
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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"}
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 py-1 text-xs',\n icon: visualSizes.xs\n },\n md: {\n classes: 'px-2.5 py-0.5 text-xs font-semibold',\n icon: visualSizes.sm\n },\n lg: {\n classes: 'px-3 py-1 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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyddenlabs/hydn-ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "private": false,
   "description": "A modern React component library built with TypeScript and Tailwind CSS",
   "main": "./dist/index.js",