@xmart/xorder-ui 0.0.21

package/dist/styles/index.css.d.ts

@@ -0,0 +1 @@
+export * from './tokens';

package/dist/styles/tokens/index.d.ts

@@ -0,0 +1,2 @@
+export { colors, primitive, spacing, typography, zIndex, } from './primitive.css';
+export { semantic } from './semantic.css';

package/dist/styles/tokens/primitive.css.d.ts

@@ -0,0 +1,201 @@
+/**
+ * プリミティブトークン
+ *
+ * 基本的なデザイン値を定義します。
+ * これらは直接使用することもできますが、セマンティクストークンの使用を推奨します。
+ */
+export declare const primitive: {
+    colors: {
+        white: `var(--${string})`;
+        black: `var(--${string})`;
+        gray: {
+            50: `var(--${string})`;
+            100: `var(--${string})`;
+            200: `var(--${string})`;
+            300: `var(--${string})`;
+            500: `var(--${string})`;
+            700: `var(--${string})`;
+            800: `var(--${string})`;
+        };
+        red: {
+            100: `var(--${string})`;
+            600: `var(--${string})`;
+            700: `var(--${string})`;
+        };
+        orange: {
+            30: `var(--${string})`;
+            50: `var(--${string})`;
+            600: `var(--${string})`;
+            700: `var(--${string})`;
+            800: `var(--${string})`;
+        };
+        yellow: {
+            100: `var(--${string})`;
+            700: `var(--${string})`;
+        };
+        green: {
+            100: `var(--${string})`;
+            700: `var(--${string})`;
+            800: `var(--${string})`;
+        };
+        blue: {
+            50: `var(--${string})`;
+            100: `var(--${string})`;
+            700: `var(--${string})`;
+        };
+        purple: {
+            100: `var(--${string})`;
+            700: `var(--${string})`;
+        };
+    };
+    spacing: {
+        '0': `var(--${string})`;
+        xs: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+        '2xl': `var(--${string})`;
+        '1': `var(--${string})`;
+        '2': `var(--${string})`;
+        '3': `var(--${string})`;
+        '4': `var(--${string})`;
+        '5': `var(--${string})`;
+        '6': `var(--${string})`;
+        '8': `var(--${string})`;
+        '10': `var(--${string})`;
+        '12': `var(--${string})`;
+        '16': `var(--${string})`;
+        '20': `var(--${string})`;
+        '24': `var(--${string})`;
+    };
+    typography: {
+        fontSize: {
+            xs: `var(--${string})`;
+            sm: `var(--${string})`;
+            md: `var(--${string})`;
+            lg: `var(--${string})`;
+            xl: `var(--${string})`;
+            '2xl': `var(--${string})`;
+        };
+        fontWeight: {
+            normal: `var(--${string})`;
+            bold: `var(--${string})`;
+        };
+        fontFamily: {
+            base: `var(--${string})`;
+            sans: `var(--${string})`;
+            serif: `var(--${string})`;
+            mono: `var(--${string})`;
+        };
+    };
+    zIndex: {
+        auto: `var(--${string})`;
+        base: `var(--${string})`;
+        docked: `var(--${string})`;
+        dropdown: `var(--${string})`;
+        sticky: `var(--${string})`;
+        banner: `var(--${string})`;
+        overlay: `var(--${string})`;
+        modal: `var(--${string})`;
+        popover: `var(--${string})`;
+        skipLink: `var(--${string})`;
+        toast: `var(--${string})`;
+        tooltip: `var(--${string})`;
+    };
+};
+export declare const colors: {
+    white: `var(--${string})`;
+    black: `var(--${string})`;
+    gray: {
+        50: `var(--${string})`;
+        100: `var(--${string})`;
+        200: `var(--${string})`;
+        300: `var(--${string})`;
+        500: `var(--${string})`;
+        700: `var(--${string})`;
+        800: `var(--${string})`;
+    };
+    red: {
+        100: `var(--${string})`;
+        600: `var(--${string})`;
+        700: `var(--${string})`;
+    };
+    orange: {
+        30: `var(--${string})`;
+        50: `var(--${string})`;
+        600: `var(--${string})`;
+        700: `var(--${string})`;
+        800: `var(--${string})`;
+    };
+    yellow: {
+        100: `var(--${string})`;
+        700: `var(--${string})`;
+    };
+    green: {
+        100: `var(--${string})`;
+        700: `var(--${string})`;
+        800: `var(--${string})`;
+    };
+    blue: {
+        50: `var(--${string})`;
+        100: `var(--${string})`;
+        700: `var(--${string})`;
+    };
+    purple: {
+        100: `var(--${string})`;
+        700: `var(--${string})`;
+    };
+}, spacing: {
+    '0': `var(--${string})`;
+    xs: `var(--${string})`;
+    sm: `var(--${string})`;
+    md: `var(--${string})`;
+    lg: `var(--${string})`;
+    xl: `var(--${string})`;
+    '2xl': `var(--${string})`;
+    '1': `var(--${string})`;
+    '2': `var(--${string})`;
+    '3': `var(--${string})`;
+    '4': `var(--${string})`;
+    '5': `var(--${string})`;
+    '6': `var(--${string})`;
+    '8': `var(--${string})`;
+    '10': `var(--${string})`;
+    '12': `var(--${string})`;
+    '16': `var(--${string})`;
+    '20': `var(--${string})`;
+    '24': `var(--${string})`;
+}, typography: {
+    fontSize: {
+        xs: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+        '2xl': `var(--${string})`;
+    };
+    fontWeight: {
+        normal: `var(--${string})`;
+        bold: `var(--${string})`;
+    };
+    fontFamily: {
+        base: `var(--${string})`;
+        sans: `var(--${string})`;
+        serif: `var(--${string})`;
+        mono: `var(--${string})`;
+    };
+}, zIndex: {
+    auto: `var(--${string})`;
+    base: `var(--${string})`;
+    docked: `var(--${string})`;
+    dropdown: `var(--${string})`;
+    sticky: `var(--${string})`;
+    banner: `var(--${string})`;
+    overlay: `var(--${string})`;
+    modal: `var(--${string})`;
+    popover: `var(--${string})`;
+    skipLink: `var(--${string})`;
+    toast: `var(--${string})`;
+    tooltip: `var(--${string})`;
+};

package/dist/styles/tokens/semantic.css.d.ts

@@ -0,0 +1,64 @@
+/**
+ * セマンティクストークン
+ *
+ * 用途に応じた意味のあるデザイントークンを定義します。
+ * コンポーネント開発時はこれらの使用を推奨します。
+ */
+export declare const semantic: {
+    colors: {
+        brand: {
+            primary: `var(--${string})`;
+            primaryHover: `var(--${string})`;
+            light: `var(--${string})`;
+            lightHover: `var(--${string})`;
+        };
+        button: {
+            base: `var(--${string})`;
+            baseHover: `var(--${string})`;
+            disabled: `var(--${string})`;
+        };
+        text: {
+            primary: `var(--${string})`;
+            secondary: `var(--${string})`;
+            placeholder: `var(--${string})`;
+            inverse: `var(--${string})`;
+            linkPrimary: `var(--${string})`;
+            actionLabel: `var(--${string})`;
+            actionLabelDisabled: `var(--${string})`;
+            destructive: `var(--${string})`;
+            error: `var(--${string})`;
+            warning: `var(--${string})`;
+            success: `var(--${string})`;
+            info: `var(--${string})`;
+        };
+        background: {
+            default: `var(--${string})`;
+            surface: `var(--${string})`;
+            supplier: `var(--${string})`;
+            error: `var(--${string})`;
+            warning: `var(--${string})`;
+            success: `var(--${string})`;
+            info: `var(--${string})`;
+        };
+        icon: {
+            primary: `var(--${string})`;
+            disabled: `var(--${string})`;
+            inverse: `var(--${string})`;
+            destructive: `var(--${string})`;
+            brand: `var(--${string})`;
+            info: `var(--${string})`;
+        };
+        divider: {
+            inputDefault: `var(--${string})`;
+            inputSubtle: `var(--${string})`;
+            inputDisabled: `var(--${string})`;
+            sectionDefault: `var(--${string})`;
+            sectionSubtle: `var(--${string})`;
+            inputFocus: `var(--${string})`;
+            error: `var(--${string})`;
+            warning: `var(--${string})`;
+            success: `var(--${string})`;
+            info: `var(--${string})`;
+        };
+    };
+};

package/dist/utils.d.ts

@@ -0,0 +1,25 @@
+import { StyleRule } from '@vanilla-extract/css';
+/**
+ * ピクセル値をrem単位に変換します
+ * @param value - ピクセル値（数値、文字列、または複数の数値。'16px 8px'のような複数の値を含むことができます）
+ * @returns 変換されたrem値
+ * @example
+ * rem(16) // '1rem'
+ * rem(8) // '0.5rem'
+ * rem('16px 8px') // '1rem 0.5rem'
+ * rem(8, 16) // '0.5rem 1rem'
+ * rem(8, 8, 16) // '0.5rem 0.5rem 1rem'
+ * rem(16, 8, 8, 16) // '1rem 0.5rem 0.5rem 1rem'
+ */
+export declare function rem(value: number | string, ...additionalValues: number[]): string;
+/**
+ * デバイスがホバー操作をサポートしている場合にのみ適用されるスタイルルールを生成します。
+ *
+ * @param {StyleRule} style - ホバーがサポートされている場合に適用するスタイルルール。
+ * @returns {object} ホバリング可能なデバイス用のメディアクエリを含むオブジェクト。
+ */
+export declare const hoverable: (style: StyleRule) => {
+    '@media': {
+        '(any-hover: hover)': StyleRule;
+    };
+};

package/dist/xorder-ui.css

@@ -0,0 +1 @@
+:root{--xoui-color-white: #FFFFFF;--xoui-color-black: #222222;--xoui-color-gray-50: #F4F5F6;--xoui-color-gray-100: #E9ECEF;--xoui-color-gray-200: #D7DCE2;--xoui-color-gray-300: #BCC4CC;--xoui-color-gray-500: #7D8D9D;--xoui-color-gray-700: #6B7580;--xoui-color-gray-800: #3B454E;--xoui-color-red-100: #FFEFED;--xoui-color-red-600: #FF685A;--xoui-color-red-700: #DC0C00;--xoui-color-orange-30: #F9D4B2;--xoui-color-orange-50: #FFF5EB;--xoui-color-orange-600: #F38827;--xoui-color-orange-700: #F06000;--xoui-color-orange-800: #AE4E19;--xoui-color-yellow-100: #FFF7DC;--xoui-color-yellow-700: #FFBF00;--xoui-color-green-100: #F3FFEE;--xoui-color-green-700: #2CAB23;--xoui-color-green-800: #088000;--xoui-color-blue-50: #EEF8FD;--xoui-color-blue-100: #E4F2FF;--xoui-color-blue-700: #116FF3;--xoui-color-purple-100: #FCEEFF;--xoui-color-purple-700: #A807D0;--xoui-spacing-0: 0px;--xoui-spacing-1: 4px;--xoui-spacing-2: 8px;--xoui-spacing-3: 12px;--xoui-spacing-4: 16px;--xoui-spacing-5: 20px;--xoui-spacing-6: 24px;--xoui-spacing-8: 32px;--xoui-spacing-10: 40px;--xoui-spacing-12: 48px;--xoui-spacing-16: 64px;--xoui-spacing-20: 80px;--xoui-spacing-24: 96px;--xoui-spacing-xs: 4px;--xoui-spacing-sm: 8px;--xoui-spacing-md: 16px;--xoui-spacing-lg: 24px;--xoui-spacing-xl: 32px;--xoui-spacing-2xl: 40px;--xoui-typography-font-size-xs: .75rem;--xoui-typography-font-size-sm: .875rem;--xoui-typography-font-size-md: 1rem;--xoui-typography-font-size-lg: 1.125rem;--xoui-typography-font-size-xl: 1.25rem;--xoui-typography-font-size-2xl: 1.5rem;--xoui-typography-font-weight-normal: 300;--xoui-typography-font-weight-bold: 600;--xoui-typography-font-family-base: "Hiragino Kaku Gothic Pro", "Yu Gothic", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--xoui-typography-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--xoui-typography-font-family-serif: Georgia, "Times New Roman", Times, serif;--xoui-typography-font-family-mono: "SF Mono", Monaco, Inconsolata, "Roboto Mono", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;--xoui-z-index-auto: auto;--xoui-z-index-base: 0;--xoui-z-index-docked: 10;--xoui-z-index-dropdown: 1000;--xoui-z-index-sticky: 1100;--xoui-z-index-banner: 1200;--xoui-z-index-overlay: 1300;--xoui-z-index-modal: 1400;--xoui-z-index-popover: 1500;--xoui-z-index-skip-link: 1600;--xoui-z-index-toast: 1700;--xoui-z-index-tooltip: 1800}:root{--xoui-color-brand-primary: var(--xoui-color-orange-700);--xoui-color-brand-primary-hover: var(--xoui-color-orange-800);--xoui-color-brand-light: var(--xoui-color-orange-50);--xoui-color-brand-light-hover: var(--xoui-color-orange-30);--xoui-color-button-base: var(--xoui-color-white);--xoui-color-button-base-hover: var(--xoui-color-gray-100);--xoui-color-button-disabled: var(--xoui-color-gray-100);--xoui-color-text-primary: var(--xoui-color-black);--xoui-color-text-secondary: var(--xoui-color-gray-800);--xoui-color-text-placeholder: var(--xoui-color-gray-500);--xoui-color-text-inverse: var(--xoui-color-white);--xoui-color-text-link-primary: var(--xoui-color-blue-700);--xoui-color-text-action-label: var(--xoui-color-orange-700);--xoui-color-text-action-label-disabled: var(--xoui-color-gray-700);--xoui-color-text-destructive: var(--xoui-color-gray-500);--xoui-color-text-error: var(--xoui-color-red-700);--xoui-color-text-warning: var(--xoui-color-yellow-700);--xoui-color-text-success: var(--xoui-color-green-700);--xoui-color-text-info: var(--xoui-color-blue-700);--xoui-color-background-default: var(--xoui-color-gray-50);--xoui-color-background-surface: var(--xoui-color-white);--xoui-color-background-supplier: var(--xoui-color-blue-50);--xoui-color-background-error: var(--xoui-color-red-100);--xoui-color-background-warning: var(--xoui-color-yellow-100);--xoui-color-background-success: var(--xoui-color-green-100);--xoui-color-background-info: var(--xoui-color-blue-100);--xoui-color-icon-primary: var(--xoui-color-gray-800);--xoui-color-icon-disabled: var(--xoui-color-gray-700);--xoui-color-icon-inverse: var(--xoui-color-white);--xoui-color-icon-destructive: var(--xoui-color-red-700);--xoui-color-icon-brand: var(--xoui-color-orange-700);--xoui-color-icon-info: var(--xoui-color-blue-700);--xoui-color-divider-input-default: var(--xoui-color-gray-300);--xoui-color-divider-input-subtle: var(--xoui-color-gray-200);--xoui-color-divider-input-disabled: var(--xoui-color-gray-200);--xoui-color-divider-section-default: var(--xoui-color-gray-200);--xoui-color-divider-section-subtle: var(--xoui-color-gray-100);--xoui-color-divider-input-focus: var(--xoui-color-orange-700);--xoui-color-divider-error: var(--xoui-color-red-700);--xoui-color-divider-warning: var(--xoui-color-yellow-700);--xoui-color-divider-success: var(--xoui-color-green-700);--xoui-color-divider-info: var(--xoui-color-blue-700)}@keyframes _6r273u2{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._6r273u3{--_6r273u0: 2rem;--_6r273u1: var(--xoui-color-brand-primary);all:unset;box-sizing:border-box;display:inline-block;width:var(--_6r273u0);height:var(--_6r273u0)}._6r273u3:after{content:"";box-sizing:border-box;display:block;width:var(--_6r273u0);height:var(--_6r273u0);border-radius:10000px;border-width:calc(var(--_6r273u0) / 8);border-style:solid;border-color:var(--_6r273u1) var(--_6r273u1) var(--_6r273u1) transparent;animation:_6r273u2 1.2s linear infinite}.jqk5m14{--jqk5m10: var(--xoui-color-white);--jqk5m11: var(--xoui-color-brand-primary);--jqk5m12: var(--xoui-color-brand-primary-hover);--jqk5m13: transparent;font-weight:700;font-family:var(--xoui-typography-font-family-base);line-height:1.5;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;border-radius:9999px;border:1px solid var(--jqk5m13);color:var(--jqk5m10);background-color:var(--jqk5m11);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.jqk5m14:focus-visible{outline:2px solid var(--xoui-color-brand-primary);outline-offset:1px}.jqk5m14:where([data-bold=normal]){font-weight:400}.jqk5m14:where([data-full-width]){display:flex;width:100%}.jqk5m14:where([data-size=sm]){height:2rem;font-size:var(--xoui-typography-font-size-xs);padding-inline:1rem}.jqk5m14:where([data-size=md]){height:2.5rem;font-size:var(--xoui-typography-font-size-md);padding-inline:1.25rem}.jqk5m14:where([data-size=lg]){height:3rem;font-size:var(--xoui-typography-font-size-md);padding-inline:1.5rem}.jqk5m14[aria-disabled]{--jqk5m10: var(--xoui-color-text-secondary);--jqk5m11: var(--xoui-color-button-disabled);--jqk5m13: var(--xoui-color-divider-input-disabled);font-weight:400;cursor:not-allowed}.jqk5m14:where:not([aria-disabled]):active{transform:translateY(1px)}.jqk5m15{--jqk5m10: var(--xoui-color-brand-primary);--jqk5m11: var(--xoui-color-background-surface);--jqk5m13: var(--xoui-color-brand-primary);--jqk5m12: var(--xoui-color-brand-light);border:1px solid var(--jqk5m13)}.jqk5m16{--jqk5m10: var(--xoui-color-text-primary);--jqk5m11: var(--xoui-color-background-surface);--jqk5m13: var(--xoui-color-divider-section-default);--jqk5m12: var(--xoui-color-gray-100);border:1px solid var(--jqk5m13)}.jqk5m17{display:flex;align-items:center;justify-content:center;position:absolute;inset:0}.jqk5m18{display:flex;align-items:center}.jqk5m18[data-section=left]{margin-left:-.25rem}.jqk5m18[data-section=right]{margin-right:-.25rem}.jqk5m18[aria-hidden]{visibility:hidden}@media (any-hover: hover){.jqk5m14:not([aria-disabled]):hover{background-color:var(--jqk5m12)}.jqk5m14:not([aria-disabled]):active{transform:translateY(1px)}}.qjr8ov0{--qjr8ov1: var(--xoui-color-icon-primary);--qjr8ov2: transparent;--qjr8ov3: var(--xoui-color-gray-300);--qjr8ov4: var(--xoui-color-button-disabled);--qjr8ov5: var(--xoui-color-gray-50);--qjr8ov6: var(--xoui-color-divider-section-default)}.qjr8ov7{all:unset;color:var(--qjr8ov1);background-color:var(--qjr8ov2);position:relative;height:2rem;width:2rem;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;flex-shrink:0;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s ease}.qjr8ov7:focus-visible{outline:2px solid var(--xoui-color-brand-primary);outline-offset:2px}.qjr8ov7:where([data-disabled]){cursor:not-allowed;background-color:var(--qjr8ov4);color:var(--qjr8ov3)}.qjr8ov7:where(:not([data-disabled]):active){transform:translateY(1px)}.qjr8ov9{border:1px solid var(--qjr8ov6)}.qjr8ova{--qjr8ov1: var(--xoui-color-white);--qjr8ov2: var(--xoui-color-brand-primary);--qjr8ov5: var(--xoui-color-brand-primary-hover)}.qjr8ovb{display:flex;align-items:center;justify-content:center;position:absolute;inset:0}@media (any-hover: hover){.qjr8ov7:where(:not([data-disabled]):hover){background-color:var(--qjr8ov5)}.qjr8ov7:where(:not([data-disabled]):active){transform:translateY(1px)}}._1516mc1{--_1516mc0: 1.5rem;all:unset;display:flex;align-items:center;justify-content:center;width:var(--_1516mc0);height:var(--_1516mc0);flex-shrink:0;color:var(--xoui-color-icon-primary);cursor:pointer;border-radius:50%}._1516mc1:hover{color:var(--xoui-color-icon-brand);background-color:var(--xoui-color-background-default)}._1516mc1:active{transform:translateY(-1px)}.pe6s7l4{position:relative;display:inline-flex;align-items:center;width:100%}.pe6s7l5{--pe6s7l0: var(--xoui-color-divider-input-default);--pe6s7l1: var(--xoui-color-background-surface);--pe6s7l2: 1.5rem;--pe6s7l3: calc(var(--pe6s7l2) + 1rem);box-sizing:border-box;width:100%;height:2.5rem;padding-inline:.75rem;font-family:var(--xoui-typography-font-family-base);font-size:var(--xoui-typography-font-size-md);line-height:1.5;background-color:var(--pe6s7l1);border:1px solid var(--pe6s7l0);border-radius:.375rem;transition:border-color .2s,box-shadow .2s}.pe6s7l5:focus-visible{--pe6s7l0: var(--xoui-color-divider-input-focus);outline:none;box-shadow:0 0 0 1px var(--xoui-color-divider-input-focus)}.pe6s7l5:disabled{--pe6s7l0: var(--xoui-color-divider-input-disabled);--pe6s7l1: var(--xoui-color-background-default);color:var(--xoui-color-text-placeholder);cursor:not-allowed}.pe6s7l5::placeholder{color:var(--xoui-color-text-placeholder)}.pe6s7l4[data-with-left-section] .pe6s7l5{padding-left:var(--pe6s7l3)}.pe6s7l4[data-with-right-section] .pe6s7l5{padding-right:var(--pe6s7l3)}.pe6s7l4[data-error] .pe6s7l5{color:var(--xoui-color-text-error);--pe6s7l0: var(--xoui-color-divider-error)}.pe6s7l4[data-error]:focus .pe6s7l5{--pe6s7l0: var(--xoui-color-divider-error);box-shadow:0 0 0 1px var(--xoui-color-divider-error)}.pe6s7l6{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:var(--pe6s7l2);height:var(--pe6s7l2);color:var(--xoui-color-icon-primary);z-index:1}.pe6s7l4[data-disabled] .pe6s7l6{color:var(--xoui-color-icon-disabled)}.pe6s7l4[data-error] .pe6s7l6{color:var(--xoui-color-icon-destructive)}.pe6s7l7{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:var(--pe6s7l2);height:var(--pe6s7l2);color:var(--xoui-color-icon-primary);z-index:1;opacity:0;transition:opacity .25s ease-out}.pe6s7l7[data-visible]{opacity:1;pointer-events:auto}.pe6s7l4[data-disabled] .pe6s7l7{color:var(--xoui-color-icon-disabled)}.pe6s7l4[data-error] .pe6s7l7{color:var(--xoui-color-icon-destructive)}._1y01t6b0{box-sizing:border-box;display:flex;flex-direction:column;gap:.5rem}._1y01t6b1{flex-direction:row}._1y01t6b2{all:unset;display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;height:1.875rem;padding-inline:.5rem}._1y01t6b3{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;border-radius:50%;border:1px solid var(--xoui-color-divider-input-default);background-color:var(--xoui-color-background-surface);transition:border-color .2s,background-color .2s}:where(._1y01t6b2:hover) ._1y01t6b3{border-color:var(--xoui-color-brand-primary)}:where(._1y01t6b2[data-state=checked]) ._1y01t6b3{background-color:var(--xoui-color-background-surface)}:where(._1y01t6b2[data-disabled]) ._1y01t6b3{border-color:var(--xoui-color-divider-input-disabled);background-color:var(--xoui-color-background-surface);cursor:not-allowed}._1y01t6b4{box-sizing:border-box;width:.875rem;height:.875rem;border-radius:50%;background-color:var(--xoui-color-brand-primary);transform:scale(0);transition:transform .2s}:where(._1y01t6b2[data-state=checked]) ._1y01t6b4{transform:scale(1)}:where(._1y01t6b2[data-disabled]) ._1y01t6b4{background-color:var(--xoui-color-icon-disabled)}._1y01t6b5{font-size:1rem;line-height:1.5;color:var(--xoui-color-text-primary)}:where(._1y01t6b2[data-disabled]) ._1y01t6b5{color:var(--xoui-color-text-action-label-disabled)}.vt3x005{--vt3x001: var(--xoui-color-gray-300);--vt3x000: var(--xoui-color-brand-primary);all:unset;height:2rem;box-sizing:border-box;background-color:var(--vt3x001);border-radius:9999px;position:relative;-webkit-tap-highlight-color:transparent;cursor:pointer}.vt3x005:focus-visible{outline:2px solid var(--vt3x000);outline-offset:2px}.vt3x005:where([data-disabled]){--vt3x001: var(--xoui-color-button-disabled)}.vt3x005:where([data-state=checked]):not([data-disabled]){--vt3x001: var(--xoui-color-brand-primary)}.vt3x006{display:flex;align-items:center;background-color:transparent}.vt3x007{--vt3x002: var(--xoui-color-white);--vt3x003: 1.5rem;--vt3x004: .25rem;position:absolute;display:flex;z-index:1;width:var(--vt3x003);height:var(--vt3x003);border-radius:9999px;background-color:var(--vt3x002);filter:drop-shadow(0px 2px 2px rgba(0,0,0,.1));will-change:inset-inline-start;transition:inset-inline-start .15s ease;inset-inline-start:var(--vt3x004)}.vt3x007[data-state=checked]{--vt3x004: calc(100% - var(--vt3x003) - .25rem)}.vt3x008{display:none;color:#fff;min-width:1.75rem;min-height:.75rem;font-size:var(--xoui-typography-font-size-xs);font-weight:var(--xoui-typography-font-weight-bold);background-color:transparent;line-height:1;-webkit-user-select:none;user-select:none;white-space:nowrap;padding-inline:.25rem;margin-inline-start:1.75rem;margin-inline-end:.5rem}.vt3x005[data-state=checked] .vt3x008{margin-inline-start:.5rem;margin-inline-end:1.75rem}.vt3x005[data-state=checked] .vt3x008[data-on-label],.vt3x005[data-state=unchecked] .vt3x008[data-off-label]{display:block}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@xmart/xorder-ui",
+  "version": "0.0.21",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./styles.css": "./dist/xorder-ui.css"
+  },
+  "scripts": {
+    "prepublishOnly": "yarn build",
+    "prebuild": "rm -rf ./dist",
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "react": "^18.0 || ^19.0 || ^19.0.0-rc",
+    "react-dom": "^18.0 || ^19.0 || ^19.0.0-rc"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@radix-ui/react-radio-group": "1.3.8",
+    "@radix-ui/react-select": "2.2.6",
+    "@radix-ui/react-slot": "1.2.3",
+    "@radix-ui/react-switch": "1.2.6",
+    "@radix-ui/react-visually-hidden": "1.2.3",
+    "@vanilla-extract/css": "1.17.4",
+    "@vanilla-extract/dynamic": "2.1.5",
+    "@xmart-corp/xorder-ui-icons": "0.0.5",
+    "clsx": "2.1.1"
+  }
+}