@damarkuncoro/ui-library 0.0.1

package/lib/cjs/components/input/input-skin-contract.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputSkinContractDef = void 0;
+const design_tokens_1 = require("../../theme/design-tokens");
+exports.inputSkinContractDef = {
+    id: "contract_input_skin_v1",
+    name: "input-skin",
+    variants: {
+        outline: {
+            backgroundColor: design_tokens_1.tokens.colors.transparent,
+            borderColor: design_tokens_1.tokens.colors.neutral.border,
+            color: design_tokens_1.tokens.colors.neutral.text,
+            placeholderColor: design_tokens_1.tokens.colors.neutral.textSecondary,
+            hover: {
+                borderColor: design_tokens_1.tokens.colors.neutral.text,
+            },
+            focus: {
+                borderColor: design_tokens_1.tokens.colors.primary.main,
+                ringColor: design_tokens_1.tokens.colors.primary.main,
+            },
+            invalid: {
+                borderColor: design_tokens_1.tokens.colors.danger.main,
+                ringColor: design_tokens_1.tokens.colors.danger.main,
+            }
+        },
+        filled: {
+            backgroundColor: design_tokens_1.tokens.colors.secondary.main,
+            borderColor: design_tokens_1.tokens.colors.transparent,
+            color: design_tokens_1.tokens.colors.neutral.text,
+            placeholderColor: design_tokens_1.tokens.colors.neutral.textSecondary,
+            hover: {
+                backgroundColor: design_tokens_1.tokens.colors.secondary.hover,
+            },
+            focus: {
+                backgroundColor: design_tokens_1.tokens.colors.transparent,
+                borderColor: design_tokens_1.tokens.colors.primary.main,
+                ringColor: design_tokens_1.tokens.colors.primary.main,
+            },
+            invalid: {
+                borderColor: design_tokens_1.tokens.colors.danger.main,
+                ringColor: design_tokens_1.tokens.colors.danger.main,
+            }
+        },
+        flushed: {
+            backgroundColor: design_tokens_1.tokens.colors.transparent,
+            borderColor: design_tokens_1.tokens.colors.transparent,
+            borderBottomColor: design_tokens_1.tokens.colors.neutral.border,
+            color: design_tokens_1.tokens.colors.neutral.text,
+            placeholderColor: design_tokens_1.tokens.colors.neutral.textSecondary,
+            hover: {
+                borderBottomColor: design_tokens_1.tokens.colors.neutral.text,
+            },
+            focus: {
+                borderBottomColor: design_tokens_1.tokens.colors.primary.main,
+                ringColor: design_tokens_1.tokens.colors.transparent,
+            },
+            invalid: {
+                borderBottomColor: design_tokens_1.tokens.colors.danger.main,
+                ringColor: design_tokens_1.tokens.colors.transparent,
+            }
+        },
+    },
+    icons: {
+        padding: design_tokens_1.tokens.sizing[10],
+        position: design_tokens_1.tokens.spacing[3],
+        color: design_tokens_1.tokens.colors.neutral.textSecondary,
+    },
+    sizes: {
+        sm: {
+            height: design_tokens_1.tokens.sizing[8],
+            padding: `0 ${design_tokens_1.tokens.spacing[3]}`,
+            fontSize: design_tokens_1.tokens.typography.fontSize.xs,
+        },
+        md: {
+            height: design_tokens_1.tokens.sizing[10],
+            padding: `0 ${design_tokens_1.tokens.spacing[4]}`,
+            fontSize: design_tokens_1.tokens.typography.fontSize.sm,
+        },
+        lg: {
+            height: design_tokens_1.tokens.sizing[12],
+            padding: `0 ${design_tokens_1.tokens.spacing[6]}`,
+            fontSize: design_tokens_1.tokens.typography.fontSize.base,
+        },
+    },
+    base: {
+        borderRadius: design_tokens_1.tokens.borderRadius.md,
+        transition: design_tokens_1.tokens.transition.base,
+        width: '100%',
+        outline: 'none',
+    },
+    disabled: {
+        opacity: design_tokens_1.tokens.opacity.disabled,
+        cursor: 'not-allowed',
+        backgroundColor: design_tokens_1.tokens.colors.secondary.main,
+    }
+};
+//# sourceMappingURL=input-skin-contract.js.map

package/lib/cjs/components/input/input-skin-contract.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-skin-contract.js","sourceRoot":"","sources":["../../../../src/components/input/input-skin-contract.ts"],"names":[],"mappings":"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"}

package/lib/cjs/components/input/input-skin-native.d.ts

@@ -0,0 +1,3 @@
+import { InputBaseProps } from './input-base';
+export declare const InputNative: import("react").ForwardRefExoticComponent<InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=input-skin-native.d.ts.map

package/lib/cjs/components/input/input-skin-native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-skin-native.d.ts","sourceRoot":"","sources":["../../../../src/components/input/input-skin-native.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAAE,MAAM,cAAc,CAAC;AA4DzD,eAAO,MAAM,WAAW,6GAwDvB,CAAC"}

package/lib/cjs/components/input/input-skin-native.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputNative = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const input_base_1 = require("./input-base");
+const input_skin_contract_1 = require("./input-skin-contract");
+const { variants, sizes, base, disabled, icons } = input_skin_contract_1.inputSkinContractDef;
+const baseStyles = base;
+const disabledStyles = disabled;
+const variantStyles = {
+    outline: {
+        backgroundColor: variants.outline.backgroundColor,
+        borderColor: variants.outline.borderColor,
+        color: variants.outline.color,
+    },
+    filled: {
+        backgroundColor: variants.filled.backgroundColor,
+        borderColor: variants.filled.borderColor,
+        color: variants.filled.color,
+    },
+    flushed: {
+        backgroundColor: variants.flushed.backgroundColor,
+        borderColor: variants.flushed.borderBottomColor,
+        borderBottomColor: variants.flushed.borderBottomColor,
+        color: variants.flushed.color,
+    },
+};
+const sizeStyles = {
+    sm: {
+        height: sizes.sm.height,
+        padding: sizes.sm.padding,
+        fontSize: sizes.sm.fontSize,
+    },
+    md: {
+        height: sizes.md.height,
+        padding: sizes.md.padding,
+        fontSize: sizes.md.fontSize,
+    },
+    lg: {
+        height: sizes.lg.height,
+        padding: sizes.lg.padding,
+        fontSize: sizes.lg.fontSize,
+    },
+};
+const wrapperStyles = {
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    width: '100%',
+};
+exports.InputNative = (0, react_1.forwardRef)(({ variant = 'outline', size = 'md', isInvalid = false, isDisabled = false, disabled = false, readOnly = false, leftIcon, rightIcon, className = '', inputClassName = '', style, ...props }, ref) => {
+    const isReallyDisabled = isDisabled || disabled;
+    const iconPaddingLeft = leftIcon ? icons.padding : undefined;
+    const iconPaddingRight = rightIcon ? icons.padding : undefined;
+    const combinedStyle = {
+        ...baseStyles,
+        ...(variantStyles[variant] || variantStyles.outline),
+        ...(sizeStyles[size] || sizeStyles.md),
+        ...(isReallyDisabled ? disabledStyles : {}),
+        paddingLeft: iconPaddingLeft,
+        paddingRight: iconPaddingRight,
+        ...style,
+    };
+    return ((0, jsx_runtime_1.jsx)(input_base_1.InputBase, { ref: ref, style: combinedStyle, wrapperStyle: wrapperStyles, variant: variant, size: size, isInvalid: isInvalid, isDisabled: isDisabled, disabled: disabled, readOnly: readOnly, leftIcon: leftIcon, rightIcon: rightIcon, className: className, inputClassName: inputClassName, ...props }));
+});
+exports.InputNative.displayName = 'InputNative';
+//# sourceMappingURL=input-skin-native.js.map

package/lib/cjs/components/input/input-skin-native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-skin-native.js","sourceRoot":"","sources":["../../../../src/components/input/input-skin-native.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components/input/input-skin-tailwind.d.ts

@@ -0,0 +1,18 @@
+import { InputBaseProps } from './input-base';
+export declare const variantClasses: {
+    outline: string;
+    filled: string;
+    flushed: string;
+};
+export declare const errorClasses: {
+    outline: string;
+    filled: string;
+    flushed: string;
+};
+export declare const sizeClasses: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const InputTailwind: import("react").ForwardRefExoticComponent<InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=input-skin-tailwind.d.ts.map

package/lib/cjs/components/input/input-skin-tailwind.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-skin-tailwind.d.ts","sourceRoot":"","sources":["../../../../src/components/input/input-skin-tailwind.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAAE,MAAM,cAAc,CAAC;AAQzD,eAAO,MAAM,cAAc;;;;CAI1B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;CAIvB,CAAC;AAQF,eAAO,MAAM,aAAa,6GAsDzB,CAAC"}

package/lib/cjs/components/input/input-skin-tailwind.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputTailwind = exports.sizeClasses = exports.errorClasses = exports.variantClasses = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const input_base_1 = require("./input-base");
+const input_skin_contract_1 = require("./input-skin-contract");
+const design_tokens_1 = require("../../theme/design-tokens");
+const { variants, sizes, base, disabled, icons } = input_skin_contract_1.inputSkinContractDef;
+exports.variantClasses = {
+    outline: `bg-[${variants.outline.backgroundColor}] border border-[${variants.outline.borderColor}] text-[${variants.outline.color}] placeholder:text-[${variants.outline.placeholderColor}] hover:border-[${variants.outline.hover.borderColor}] focus:border-[${variants.outline.focus.borderColor}] focus:ring-[${design_tokens_1.tokens.ui.outlineWidth}] focus:ring-[${variants.outline.focus.ringColor}]`,
+    filled: `bg-[${variants.filled.backgroundColor}] border border-[${variants.filled.borderColor}] text-[${variants.filled.color}] placeholder:text-[${variants.filled.placeholderColor}] hover:bg-[${variants.filled.hover.backgroundColor}] focus:bg-[${variants.filled.focus.backgroundColor}] focus:border-[${variants.filled.focus.borderColor}] focus:ring-[${design_tokens_1.tokens.ui.outlineWidth}] focus:ring-[${variants.filled.focus.ringColor}]`,
+    flushed: `bg-[${variants.flushed.backgroundColor}] border-b border-[${variants.flushed.borderBottomColor}] rounded-none px-0 text-[${variants.flushed.color}] placeholder:text-[${variants.flushed.placeholderColor}] hover:border-b-[${variants.flushed.hover.borderBottomColor}] focus:border-b-[${variants.flushed.focus.borderBottomColor}] focus:ring-0 focus:outline-none`,
+};
+exports.errorClasses = {
+    outline: `!border-[${variants.outline.invalid.borderColor}] !ring-[${variants.outline.invalid.ringColor}]`,
+    filled: `!border-[${variants.filled.invalid.borderColor}] !ring-[${variants.filled.invalid.ringColor}]`,
+    flushed: `!border-[${variants.flushed.invalid.borderBottomColor}]`,
+};
+exports.sizeClasses = {
+    sm: `h-[${sizes.sm.height}] px-[${design_tokens_1.tokens.spacing[3]}] text-[${sizes.sm.fontSize}]`,
+    md: `h-[${sizes.md.height}] px-[${design_tokens_1.tokens.spacing[4]}] text-[${sizes.md.fontSize}]`,
+    lg: `h-[${sizes.lg.height}] px-[${design_tokens_1.tokens.spacing[6]}] text-[${sizes.lg.fontSize}]`,
+};
+const wrapperBase = 'relative inline-flex items-center w-full';
+const inputBase = `w-full min-w-0 outline-none [transition:${base.transition.replace(/ /g, '_')}] rounded-[${base.borderRadius}] disabled:opacity-[${disabled.opacity}] disabled:cursor-[${disabled.cursor}] disabled:bg-[${disabled.backgroundColor}]`;
+exports.InputTailwind = (0, react_1.forwardRef)(({ variant = 'outline', size = 'md', isInvalid = false, disabled = false, readOnly = false, className = '', inputClassName = '', ...props }, ref) => {
+    const variantClass = exports.variantClasses[variant] || exports.variantClasses.outline;
+    const invalidClass = isInvalid ? (exports.errorClasses[variant] || exports.errorClasses.outline) : '';
+    const sizeClass = exports.sizeClasses[size] || exports.sizeClasses.md;
+    const finalInputClasses = [
+        inputBase,
+        variantClass,
+        invalidClass,
+        sizeClass,
+        props.leftIcon ? `pl-[${icons.padding}]` : '',
+        props.rightIcon ? `pr-[${icons.padding}]` : '',
+        inputClassName
+    ].filter(Boolean).join(' ');
+    const finalWrapperClasses = [
+        wrapperBase,
+        className,
+        `[&_.input-icon-left]:absolute [&_.input-icon-left]:left-[${icons.position}] [&_.input-icon-left]:z-10 [&_.input-icon-left]:text-[${icons.color}] [&_.input-icon-left]:aria-hidden=true`,
+        `[&_.input-icon-right]:absolute [&_.input-icon-right]:right-[${icons.position}] [&_.input-icon-right]:z-10 [&_.input-icon-right]:text-[${icons.color}] [&_.input-icon-right]:aria-hidden=true`,
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)(input_base_1.InputBase, { ref: ref, className: finalWrapperClasses, inputClassName: finalInputClasses, variant: variant, size: size, isInvalid: isInvalid, ...props }));
+});
+exports.InputTailwind.displayName = 'InputTailwind';
+//# sourceMappingURL=input-skin-tailwind.js.map

package/lib/cjs/components/input/input-skin-tailwind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-skin-tailwind.js","sourceRoot":"","sources":["../../../../src/components/input/input-skin-tailwind.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/button';
+export * from './components/input';
+export * from './theme';
+//# sourceMappingURL=index.d.ts.map

package/lib/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,SAAS,CAAC"}

package/lib/cjs/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/button"), exports);
+__exportStar(require("./components/input"), exports);
+__exportStar(require("./theme"), exports);
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,sDAAoC;AAGpC,qDAAmC;AAGnC,0CAAwB"}

package/lib/cjs/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

package/lib/cjs/test-setup.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=test-setup.d.ts.map

package/lib/cjs/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../../src/test-setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/lib/cjs/test-setup.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");
+//# sourceMappingURL=test-setup.js.map

package/lib/cjs/test-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.js","sourceRoot":"","sources":["../../src/test-setup.ts"],"names":[],"mappings":";;AAAA,qCAAmC"}

package/lib/cjs/theme/design-tokens.d.ts

@@ -0,0 +1,200 @@
+export declare const palette: {
+    readonly blue: {
+        readonly 400: "#60A5FA";
+        readonly 500: "#3B82F6";
+        readonly 600: "#2563EB";
+        readonly 700: "#1D4ED8";
+        readonly 800: "#1E40AF";
+    };
+    readonly gray: {
+        readonly 50: "#F9FAFB";
+        readonly 100: "#F3F4F6";
+        readonly 200: "#E5E7EB";
+        readonly 300: "#D1D5DB";
+        readonly 400: "#9CA3AF";
+        readonly 500: "#6B7280";
+        readonly 600: "#4B5563";
+        readonly 700: "#374151";
+        readonly 800: "#1F2937";
+        readonly 900: "#111827";
+    };
+    readonly red: {
+        readonly 400: "#F87171";
+        readonly 500: "#EF4444";
+        readonly 600: "#DC2626";
+        readonly 700: "#B91C1C";
+        readonly 900: "#7F1D1D";
+    };
+    readonly white: "#FFFFFF";
+    readonly black: "#000000";
+    readonly transparent: "transparent";
+};
+export declare const cssVars: {
+    readonly colors: {
+        readonly primary: {
+            readonly main: "var(--color-primary-main)";
+            readonly hover: "var(--color-primary-hover)";
+            readonly focus: "var(--color-primary-focus)";
+            readonly contrastText: "var(--color-primary-contrast)";
+        };
+        readonly secondary: {
+            readonly main: "var(--color-secondary-main)";
+            readonly hover: "var(--color-secondary-hover)";
+            readonly focus: "var(--color-secondary-focus)";
+            readonly contrastText: "var(--color-secondary-contrast)";
+        };
+        readonly danger: {
+            readonly main: "var(--color-danger-main)";
+            readonly hover: "var(--color-danger-hover)";
+            readonly focus: "var(--color-danger-focus)";
+            readonly contrastText: "var(--color-danger-contrast)";
+        };
+        readonly neutral: {
+            readonly border: "var(--color-neutral-border)";
+            readonly text: "var(--color-neutral-text)";
+            readonly textSecondary: "var(--color-neutral-text-secondary)";
+            readonly bg: "var(--color-neutral-bg)";
+            readonly bgSurface: "var(--color-neutral-bg-surface)";
+        };
+    };
+    readonly shadows: {
+        readonly focusRing: "var(--shadow-focus-ring)";
+    };
+};
+export declare const themes: {
+    light: {
+        '--color-primary-main': "#2563EB";
+        '--color-primary-hover': "#1D4ED8";
+        '--color-primary-focus': "#3B82F6";
+        '--color-primary-contrast': "#FFFFFF";
+        '--color-secondary-main': "#F3F4F6";
+        '--color-secondary-hover': "#E5E7EB";
+        '--color-secondary-focus': "#6B7280";
+        '--color-secondary-contrast': "#111827";
+        '--color-danger-main': "#DC2626";
+        '--color-danger-hover': "#B91C1C";
+        '--color-danger-focus': "#EF4444";
+        '--color-danger-contrast': "#FFFFFF";
+        '--color-neutral-border': "#D1D5DB";
+        '--color-neutral-text': "#374151";
+        '--color-neutral-text-secondary': "#6B7280";
+        '--color-neutral-bg': "#F9FAFB";
+        '--color-neutral-bg-surface': "#FFFFFF";
+        '--shadow-focus-ring': string;
+    };
+    dark: {
+        '--color-primary-main': "#3B82F6";
+        '--color-primary-hover': "#60A5FA";
+        '--color-primary-focus': "#2563EB";
+        '--color-primary-contrast': "#FFFFFF";
+        '--color-secondary-main': "#1F2937";
+        '--color-secondary-hover': "#374151";
+        '--color-secondary-focus': "#4B5563";
+        '--color-secondary-contrast': "#F3F4F6";
+        '--color-danger-main': "#EF4444";
+        '--color-danger-hover': "#F87171";
+        '--color-danger-focus': "#DC2626";
+        '--color-danger-contrast': "#FFFFFF";
+        '--color-neutral-border': "#4B5563";
+        '--color-neutral-text': "#F3F4F6";
+        '--color-neutral-text-secondary': "#9CA3AF";
+        '--color-neutral-bg': "#111827";
+        '--color-neutral-bg-surface': "#1F2937";
+        '--shadow-focus-ring': string;
+    };
+};
+export declare const tokens: {
+    readonly colors: {
+        readonly transparent: "transparent";
+        readonly white: "#FFFFFF";
+        readonly black: "#000000";
+        readonly primary: {
+            readonly main: "var(--color-primary-main)";
+            readonly hover: "var(--color-primary-hover)";
+            readonly focus: "var(--color-primary-focus)";
+            readonly contrastText: "var(--color-primary-contrast)";
+        };
+        readonly secondary: {
+            readonly main: "var(--color-secondary-main)";
+            readonly hover: "var(--color-secondary-hover)";
+            readonly focus: "var(--color-secondary-focus)";
+            readonly contrastText: "var(--color-secondary-contrast)";
+        };
+        readonly danger: {
+            readonly main: "var(--color-danger-main)";
+            readonly hover: "var(--color-danger-hover)";
+            readonly focus: "var(--color-danger-focus)";
+            readonly contrastText: "var(--color-danger-contrast)";
+        };
+        readonly neutral: {
+            readonly border: "var(--color-neutral-border)";
+            readonly text: "var(--color-neutral-text)";
+            readonly textSecondary: "var(--color-neutral-text-secondary)";
+            readonly bg: "var(--color-neutral-bg)";
+            readonly bgSurface: "var(--color-neutral-bg-surface)";
+        };
+    };
+    readonly shadows: {
+        readonly focusRing: "var(--shadow-focus-ring)";
+    };
+    readonly ui: {
+        readonly outlineOffset: "2px";
+        readonly outlineWidth: "2px";
+    };
+    readonly borderRadius: {
+        readonly sm: "4px";
+        readonly md: "6px";
+        readonly lg: "8px";
+        readonly full: "9999px";
+    };
+    readonly spacing: {
+        readonly 2: "8px";
+        readonly 3: "12px";
+        readonly 4: "16px";
+        readonly 6: "24px";
+    };
+    readonly sizing: {
+        readonly 8: "32px";
+        readonly 10: "40px";
+        readonly 12: "48px";
+        readonly icon: {
+            readonly sm: "14px";
+            readonly md: "16px";
+            readonly lg: "20px";
+        };
+    };
+    readonly typography: {
+        readonly fontFamily: {
+            readonly sans: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+            readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+        };
+        readonly fontSize: {
+            readonly xs: "0.75rem";
+            readonly sm: "0.875rem";
+            readonly base: "1rem";
+            readonly lg: "1.125rem";
+            readonly xl: "1.25rem";
+        };
+        readonly fontWeight: {
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        readonly lineHeight: {
+            readonly none: "1";
+            readonly tight: "1.25";
+            readonly snug: "1.375";
+            readonly normal: "1.5";
+            readonly relaxed: "1.625";
+            readonly loose: "2";
+        };
+    };
+    readonly opacity: {
+        readonly disabled: "0.5";
+    };
+    readonly transition: {
+        readonly base: "all 0.2s ease";
+    };
+};
+//# sourceMappingURL=design-tokens.d.ts.map

package/lib/cjs/theme/design-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../src/theme/design-tokens.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BV,CAAC;AAGX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BV,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DlB,CAAC;AAIF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuET,CAAC"}