@xmart/xorder-ui 0.2.0 → 0.3.0-dev.1

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 (11) hide show
  1. package/dist/components/tag/tag.css.d.ts +3 -3
  2. package/dist/index.esm.js +762 -562
  3. package/dist/styles/compat/index.d.ts +2 -0
  4. package/dist/styles/compat/primitive.d.ts +198 -0
  5. package/dist/styles/compat/semantic.d.ts +58 -0
  6. package/dist/styles/tokens/index.d.ts +1 -2
  7. package/dist/xorder-ui.css +1 -1
  8. package/package.json +7 -3
  9. package/dist/styles/index.css.d.ts +0 -1
  10. package/dist/styles/tokens/primitive.css.d.ts +0 -201
  11. package/dist/styles/tokens/semantic.css.d.ts +0 -64
package/dist/styles/compat/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { colors, primitive, spacing, typography, zIndex } from './primitive';
2
+ export { semantic } from './semantic';
package/dist/styles/compat/primitive.d.ts ADDED
@@ -0,0 +1,198 @@
1
+ export declare const colors: {
2
+ readonly white: "var(--xm-color-white)";
3
+ readonly black: "var(--xm-color-black)";
4
+ readonly gray: {
5
+ readonly 50: "var(--xm-color-gray-50)";
6
+ readonly 100: "var(--xm-color-gray-100)";
7
+ readonly 200: "var(--xm-color-gray-200)";
8
+ readonly 300: "var(--xm-color-gray-300)";
9
+ readonly 500: "var(--xm-color-gray-500)";
10
+ readonly 700: "var(--xm-color-gray-700)";
11
+ readonly 800: "var(--xm-color-gray-800)";
12
+ };
13
+ readonly red: {
14
+ readonly 100: "var(--xm-color-red-100)";
15
+ readonly 600: "var(--xm-color-red-600)";
16
+ readonly 700: "var(--xm-color-red-700)";
17
+ };
18
+ readonly orange: {
19
+ readonly 30: "var(--xm-color-orange-300)";
20
+ readonly 50: "var(--xm-color-orange-50)";
21
+ readonly 600: "var(--xm-color-orange-600)";
22
+ readonly 700: "var(--xm-color-orange-700)";
23
+ readonly 800: "var(--xm-color-orange-800)";
24
+ };
25
+ readonly yellow: {
26
+ readonly 100: "var(--xm-color-yellow-100)";
27
+ readonly 700: "var(--xm-color-yellow-700)";
28
+ };
29
+ readonly green: {
30
+ readonly 100: "var(--xm-color-green-100)";
31
+ readonly 700: "var(--xm-color-green-700)";
32
+ readonly 800: "var(--xm-color-green-800)";
33
+ };
34
+ readonly blue: {
35
+ readonly 50: "var(--xm-color-blue-50)";
36
+ readonly 100: "var(--xm-color-blue-100)";
37
+ readonly 700: "var(--xm-color-blue-700)";
38
+ };
39
+ readonly purple: {
40
+ readonly 100: "var(--xm-color-purple-100)";
41
+ readonly 700: "var(--xm-color-purple-700)";
42
+ };
43
+ };
44
+ export declare const spacing: {
45
+ readonly '0': "var(--xm-space-0)";
46
+ readonly xs: "var(--xm-space-4)";
47
+ readonly sm: "var(--xm-space-8)";
48
+ readonly md: "var(--xm-space-16)";
49
+ readonly lg: "var(--xm-space-24)";
50
+ readonly xl: "var(--xm-space-32)";
51
+ readonly '2xl': "var(--xm-space-40)";
52
+ readonly '1': "var(--xm-space-4)";
53
+ readonly '2': "var(--xm-space-8)";
54
+ readonly '3': "var(--xm-space-12)";
55
+ readonly '4': "var(--xm-space-16)";
56
+ readonly '5': "var(--xm-space-20)";
57
+ readonly '6': "var(--xm-space-24)";
58
+ readonly '8': "var(--xm-space-32)";
59
+ readonly '10': "var(--xm-space-40)";
60
+ readonly '12': "var(--xm-space-48)";
61
+ readonly '16': "var(--xm-space-64)";
62
+ readonly '20': "var(--xm-space-80)";
63
+ readonly '24': "6rem";
64
+ };
65
+ export declare const typography: {
66
+ readonly fontSize: {
67
+ readonly xs: "var(--xm-font-size-xs)";
68
+ readonly sm: "var(--xm-font-size-sm)";
69
+ readonly md: "var(--xm-font-size-md)";
70
+ readonly lg: "var(--xm-font-size-lg)";
71
+ readonly xl: "var(--xm-font-size-xl)";
72
+ readonly '2xl': "var(--xm-font-size-2xl)";
73
+ };
74
+ readonly fontWeight: {
75
+ readonly normal: "var(--xm-font-weight-regular)";
76
+ readonly bold: "var(--xm-font-weight-bold)";
77
+ };
78
+ readonly fontFamily: {
79
+ readonly base: "var(--xm-font-family-base)";
80
+ readonly sans: "var(--xm-font-family-sans)";
81
+ readonly serif: "var(--xm-font-family-serif)";
82
+ readonly mono: "var(--xm-font-family-mono)";
83
+ };
84
+ };
85
+ export declare const zIndex: {
86
+ readonly auto: "auto";
87
+ readonly base: "var(--xm-z-index-base)";
88
+ readonly docked: "var(--xm-z-index-docked)";
89
+ readonly dropdown: "var(--xm-z-index-dropdown)";
90
+ readonly sticky: "var(--xm-z-index-sticky)";
91
+ readonly banner: "var(--xm-z-index-banner)";
92
+ readonly overlay: "var(--xm-z-index-overlay)";
93
+ readonly modal: "var(--xm-z-index-modal)";
94
+ readonly popover: "var(--xm-z-index-popover)";
95
+ readonly skipLink: "1600";
96
+ readonly toast: "var(--xm-z-index-toast)";
97
+ readonly tooltip: "var(--xm-z-index-tooltip)";
98
+ };
99
+ export declare const primitive: {
100
+ readonly colors: {
101
+ readonly white: "var(--xm-color-white)";
102
+ readonly black: "var(--xm-color-black)";
103
+ readonly gray: {
104
+ readonly 50: "var(--xm-color-gray-50)";
105
+ readonly 100: "var(--xm-color-gray-100)";
106
+ readonly 200: "var(--xm-color-gray-200)";
107
+ readonly 300: "var(--xm-color-gray-300)";
108
+ readonly 500: "var(--xm-color-gray-500)";
109
+ readonly 700: "var(--xm-color-gray-700)";
110
+ readonly 800: "var(--xm-color-gray-800)";
111
+ };
112
+ readonly red: {
113
+ readonly 100: "var(--xm-color-red-100)";
114
+ readonly 600: "var(--xm-color-red-600)";
115
+ readonly 700: "var(--xm-color-red-700)";
116
+ };
117
+ readonly orange: {
118
+ readonly 30: "var(--xm-color-orange-300)";
119
+ readonly 50: "var(--xm-color-orange-50)";
120
+ readonly 600: "var(--xm-color-orange-600)";
121
+ readonly 700: "var(--xm-color-orange-700)";
122
+ readonly 800: "var(--xm-color-orange-800)";
123
+ };
124
+ readonly yellow: {
125
+ readonly 100: "var(--xm-color-yellow-100)";
126
+ readonly 700: "var(--xm-color-yellow-700)";
127
+ };
128
+ readonly green: {
129
+ readonly 100: "var(--xm-color-green-100)";
130
+ readonly 700: "var(--xm-color-green-700)";
131
+ readonly 800: "var(--xm-color-green-800)";
132
+ };
133
+ readonly blue: {
134
+ readonly 50: "var(--xm-color-blue-50)";
135
+ readonly 100: "var(--xm-color-blue-100)";
136
+ readonly 700: "var(--xm-color-blue-700)";
137
+ };
138
+ readonly purple: {
139
+ readonly 100: "var(--xm-color-purple-100)";
140
+ readonly 700: "var(--xm-color-purple-700)";
141
+ };
142
+ };
143
+ readonly spacing: {
144
+ readonly '0': "var(--xm-space-0)";
145
+ readonly xs: "var(--xm-space-4)";
146
+ readonly sm: "var(--xm-space-8)";
147
+ readonly md: "var(--xm-space-16)";
148
+ readonly lg: "var(--xm-space-24)";
149
+ readonly xl: "var(--xm-space-32)";
150
+ readonly '2xl': "var(--xm-space-40)";
151
+ readonly '1': "var(--xm-space-4)";
152
+ readonly '2': "var(--xm-space-8)";
153
+ readonly '3': "var(--xm-space-12)";
154
+ readonly '4': "var(--xm-space-16)";
155
+ readonly '5': "var(--xm-space-20)";
156
+ readonly '6': "var(--xm-space-24)";
157
+ readonly '8': "var(--xm-space-32)";
158
+ readonly '10': "var(--xm-space-40)";
159
+ readonly '12': "var(--xm-space-48)";
160
+ readonly '16': "var(--xm-space-64)";
161
+ readonly '20': "var(--xm-space-80)";
162
+ readonly '24': "6rem";
163
+ };
164
+ readonly typography: {
165
+ readonly fontSize: {
166
+ readonly xs: "var(--xm-font-size-xs)";
167
+ readonly sm: "var(--xm-font-size-sm)";
168
+ readonly md: "var(--xm-font-size-md)";
169
+ readonly lg: "var(--xm-font-size-lg)";
170
+ readonly xl: "var(--xm-font-size-xl)";
171
+ readonly '2xl': "var(--xm-font-size-2xl)";
172
+ };
173
+ readonly fontWeight: {
174
+ readonly normal: "var(--xm-font-weight-regular)";
175
+ readonly bold: "var(--xm-font-weight-bold)";
176
+ };
177
+ readonly fontFamily: {
178
+ readonly base: "var(--xm-font-family-base)";
179
+ readonly sans: "var(--xm-font-family-sans)";
180
+ readonly serif: "var(--xm-font-family-serif)";
181
+ readonly mono: "var(--xm-font-family-mono)";
182
+ };
183
+ };
184
+ readonly zIndex: {
185
+ readonly auto: "auto";
186
+ readonly base: "var(--xm-z-index-base)";
187
+ readonly docked: "var(--xm-z-index-docked)";
188
+ readonly dropdown: "var(--xm-z-index-dropdown)";
189
+ readonly sticky: "var(--xm-z-index-sticky)";
190
+ readonly banner: "var(--xm-z-index-banner)";
191
+ readonly overlay: "var(--xm-z-index-overlay)";
192
+ readonly modal: "var(--xm-z-index-modal)";
193
+ readonly popover: "var(--xm-z-index-popover)";
194
+ readonly skipLink: "1600";
195
+ readonly toast: "var(--xm-z-index-toast)";
196
+ readonly tooltip: "var(--xm-z-index-tooltip)";
197
+ };
198
+ };
package/dist/styles/compat/semantic.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ export declare const semantic: {
2
+ readonly colors: {
3
+ readonly brand: {
4
+ readonly primary: "var(--xm-color-background-primary-default)";
5
+ readonly primaryHover: "var(--xm-color-hover-primary-default)";
6
+ readonly light: "var(--xm-color-background-primary-muted)";
7
+ readonly lightHover: "var(--xm-color-hover-primary-subtle)";
8
+ };
9
+ readonly button: {
10
+ readonly base: "var(--xm-color-background-white)";
11
+ readonly baseHover: "var(--xm-color-hover-default)";
12
+ readonly disabled: "var(--xm-color-background-disabled)";
13
+ };
14
+ readonly text: {
15
+ readonly primary: "var(--xm-color-foreground-default)";
16
+ readonly secondary: "var(--xm-color-foreground-subtle)";
17
+ readonly placeholder: "var(--xm-color-foreground-placeholder)";
18
+ readonly inverse: "var(--xm-color-foreground-inverse)";
19
+ readonly linkPrimary: "var(--xm-color-blue-700)";
20
+ readonly actionLabel: "var(--xm-color-foreground-primary)";
21
+ readonly actionLabelDisabled: "var(--xm-color-gray-700)";
22
+ readonly destructive: "var(--xm-color-gray-500)";
23
+ readonly error: "var(--xm-color-foreground-danger)";
24
+ readonly warning: "var(--xm-color-foreground-warning)";
25
+ readonly success: "var(--xm-color-foreground-success)";
26
+ readonly info: "var(--xm-color-foreground-info)";
27
+ };
28
+ readonly background: {
29
+ readonly default: "var(--xm-color-background-default)";
30
+ readonly surface: "var(--xm-color-background-white)";
31
+ readonly supplier: "var(--xm-color-background-supplier)";
32
+ readonly error: "var(--xm-color-background-danger)";
33
+ readonly warning: "var(--xm-color-background-warning)";
34
+ readonly success: "var(--xm-color-background-success)";
35
+ readonly info: "var(--xm-color-background-info)";
36
+ };
37
+ readonly icon: {
38
+ readonly primary: "var(--xm-color-foreground-subtle)";
39
+ readonly disabled: "var(--xm-color-foreground-disabled)";
40
+ readonly inverse: "var(--xm-color-foreground-inverse)";
41
+ readonly destructive: "var(--xm-color-foreground-danger)";
42
+ readonly brand: "var(--xm-color-foreground-primary)";
43
+ readonly info: "var(--xm-color-foreground-info)";
44
+ };
45
+ readonly divider: {
46
+ readonly inputDefault: "var(--xm-color-border-default)";
47
+ readonly inputSubtle: "var(--xm-color-border-subtle)";
48
+ readonly inputDisabled: "var(--xm-color-border-muted)";
49
+ readonly sectionDefault: "var(--xm-color-border-subtle)";
50
+ readonly sectionSubtle: "var(--xm-color-border-muted)";
51
+ readonly inputFocus: "var(--xm-color-border-primary)";
52
+ readonly error: "var(--xm-color-border-danger)";
53
+ readonly warning: "var(--xm-color-border-warning)";
54
+ readonly success: "var(--xm-color-border-success)";
55
+ readonly info: "var(--xm-color-border-info)";
56
+ };
57
+ };
58
+ };
package/dist/styles/tokens/index.d.ts CHANGED
@@ -1,2 +1 @@
1
- export { colors, primitive, spacing, typography, zIndex } from './primitive.css';
2
- export { semantic } from './semantic.css';
1
+ export { colors, primitive, semantic, spacing, typography, zIndex } from '../compat';
package/dist/xorder-ui.css CHANGED
@@ -1,2 +1,2 @@
1
- :root{--xoui-color-white:#fff;--xoui-color-black:#222;--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;--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 _1rt5mjx2{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._1rt5mjx3{--_1rt5mjx0:2rem;--_1rt5mjx1:var(--xoui-color-brand-primary);all:unset;box-sizing:border-box;width:var(--_1rt5mjx0);height:var(--_1rt5mjx0);display:inline-block}._1rt5mjx3:after{content:"";box-sizing:border-box;width:var(--_1rt5mjx0);height:var(--_1rt5mjx0);border-width:calc(var(--_1rt5mjx0) / 8);border-style:solid;border-color:var(--_1rt5mjx1) var(--_1rt5mjx1) var(--_1rt5mjx1) transparent;border-radius:10000px;animation:1.2s linear infinite _1rt5mjx2;display:block}.prfw664{--prfw660:var(--xoui-color-white);--prfw661:var(--xoui-color-brand-primary);--prfw662:var(--xoui-color-brand-primary-hover);--prfw663:transparent;font-weight:700;font-family:var(--xoui-typography-font-family-base);box-sizing:border-box;border:1px solid var(--prfw663);min-width:max-content;color:var(--prfw660);background-color:var(--prfw661);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:9999px;justify-content:center;align-items:center;gap:.25rem;line-height:1.5;transition:background-color .2s;display:inline-flex;position:relative}.prfw664:focus-visible{outline:2px solid var(--xoui-color-brand-primary);outline-offset:1px}.prfw664:where([data-bold=normal]){font-weight:400}.prfw664:where([data-full-width]){width:100%;display:flex}.prfw664:where([data-size=sm]){height:2rem;font-size:var(--xoui-typography-font-size-xs);padding-inline:1rem}.prfw664:where([data-size=md]){height:2.5rem;font-size:var(--xoui-typography-font-size-sm);padding-inline:1.25rem}.prfw664:where([data-size=lg]){height:3rem;font-size:var(--xoui-typography-font-size-md);padding-inline:1.5rem}.prfw664[aria-disabled]{--prfw660:var(--xoui-color-text-secondary);--prfw661:var(--xoui-color-button-disabled);--prfw663:var(--xoui-color-divider-input-disabled);cursor:not-allowed;font-weight:400}.prfw664:where:not([aria-disabled]):active{transform:translateY(1px)}.prfw665{--prfw660:var(--xoui-color-brand-primary);--prfw661:var(--xoui-color-background-surface);--prfw663:var(--xoui-color-brand-primary);--prfw662:var(--xoui-color-brand-light);border:1px solid var(--prfw663)}.prfw666{--prfw660:var(--xoui-color-text-primary);--prfw661:var(--xoui-color-background-surface);--prfw663:var(--xoui-color-divider-section-default);--prfw662:var(--xoui-color-gray-100);border:1px solid var(--prfw663)}.prfw667{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.prfw668{align-items:center;display:flex}.prfw668[data-section=left]{margin-left:-.25rem}.prfw668[data-section=right]{margin-right:-.25rem}.prfw668[aria-hidden]{visibility:hidden}@media (any-hover:hover){.prfw664:not([aria-disabled]):hover{background-color:var(--prfw662)}.prfw664:not([aria-disabled]):active{transform:translateY(1px)}}.igar8u0{--igar8u1:var(--xoui-color-icon-primary);--igar8u2:transparent;--igar8u3:var(--xoui-color-gray-300);--igar8u4:var(--xoui-color-button-disabled);--igar8u5:var(--xoui-color-gray-50);--igar8u6:var(--xoui-color-divider-section-default)}.igar8u7{all:unset;color:var(--igar8u1);background-color:var(--igar8u2);box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;border:0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2rem;height:2rem;padding:0;transition:all .2s;display:inline-flex;position:relative}.igar8u7:focus-visible{outline:2px solid var(--xoui-color-brand-primary);outline-offset:2px}.igar8u7:where([data-disabled]){cursor:not-allowed;background-color:var(--igar8u4);color:var(--igar8u3)}.igar8u7:where(:not([data-disabled]):active){transform:translateY(1px)}.igar8u9{border:1px solid var(--igar8u6)}.igar8ua{--igar8u1:var(--xoui-color-white);--igar8u2:var(--xoui-color-brand-primary);--igar8u5:var(--xoui-color-brand-primary-hover)}.igar8ub{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}@media (any-hover:hover){.igar8u7:where(:not([data-disabled]):hover){background-color:var(--igar8u5)}.igar8u7:where(:not([data-disabled]):active){transform:translateY(1px)}}._1682sfm1{--_1682sfm0:1.5rem;all:unset;width:var(--_1682sfm0);height:var(--_1682sfm0);color:var(--xoui-color-icon-primary);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}._1682sfm1:hover{color:var(--xoui-color-icon-brand);background-color:var(--xoui-color-background-default)}._1682sfm1:active{transform:translateY(-1px)}._1hbkh9y4{align-items:center;width:100%;display:inline-flex;position:relative}._1hbkh9y5{--_1hbkh9y0:var(--xoui-color-divider-input-default);--_1hbkh9y1:var(--xoui-color-background-surface);--_1hbkh9y2:1.5rem;--_1hbkh9y3:calc(var(--_1hbkh9y2) + 1rem);box-sizing:border-box;width:100%;height:2.5rem;font-family:var(--xoui-typography-font-family-base);font-size:var(--xoui-typography-font-size-md);background-color:var(--_1hbkh9y1);border:1px solid var(--_1hbkh9y0);border-radius:.375rem;padding-inline:.75rem;line-height:1.5;transition:border-color .2s,box-shadow .2s}._1hbkh9y5:focus-visible{--_1hbkh9y0:var(--xoui-color-divider-input-focus);box-shadow:0 0 0 1px var(--xoui-color-divider-input-focus);outline:none}._1hbkh9y5:disabled{--_1hbkh9y0:var(--xoui-color-divider-input-disabled);--_1hbkh9y1:var(--xoui-color-background-default);color:var(--xoui-color-text-placeholder);cursor:not-allowed}._1hbkh9y5::placeholder{color:var(--xoui-color-text-placeholder)}._1hbkh9y4[data-with-left-section] ._1hbkh9y5{padding-left:var(--_1hbkh9y3)}._1hbkh9y4[data-with-right-section] ._1hbkh9y5{padding-right:var(--_1hbkh9y3)}._1hbkh9y4[data-error] ._1hbkh9y5{color:var(--xoui-color-text-error);--_1hbkh9y0:var(--xoui-color-divider-error)}._1hbkh9y4[data-error]:focus ._1hbkh9y5{--_1hbkh9y0:var(--xoui-color-divider-error);box-shadow:0 0 0 1px var(--xoui-color-divider-error)}._1hbkh9y6{width:var(--_1hbkh9y2);height:var(--_1hbkh9y2);color:var(--xoui-color-icon-primary);z-index:1;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}._1hbkh9y4[data-disabled] ._1hbkh9y6{color:var(--xoui-color-icon-disabled)}._1hbkh9y4[data-error] ._1hbkh9y6{color:var(--xoui-color-icon-destructive)}._1hbkh9y7{width:var(--_1hbkh9y2);height:var(--_1hbkh9y2);color:var(--xoui-color-icon-primary);z-index:1;opacity:0;justify-content:center;align-items:center;transition:opacity .25s ease-out;display:flex;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}._1hbkh9y7[data-visible]{opacity:1;pointer-events:auto}._1hbkh9y4[data-disabled] ._1hbkh9y7{color:var(--xoui-color-icon-disabled)}._1hbkh9y4[data-error] ._1hbkh9y7{color:var(--xoui-color-icon-destructive)}.yw7zqz0{box-sizing:border-box;flex-direction:column;gap:.5rem;display:flex}.yw7zqz1{flex-direction:row}.yw7zqz2{all:unset;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;height:1.875rem;padding-inline:.5rem;display:flex}.yw7zqz3{box-sizing:border-box;border:1px solid var(--xoui-color-divider-input-default);background-color:var(--xoui-color-background-surface);border-radius:50%;justify-content:center;align-items:center;width:1.375rem;height:1.375rem;transition:border-color .2s,background-color .2s;display:flex}:where(.yw7zqz2:hover) .yw7zqz3{border-color:var(--xoui-color-brand-primary)}:where(.yw7zqz2[data-state=checked]) .yw7zqz3{background-color:var(--xoui-color-background-surface)}:where(.yw7zqz2[data-disabled]) .yw7zqz3{border-color:var(--xoui-color-divider-input-disabled);background-color:var(--xoui-color-background-surface);cursor:not-allowed}.yw7zqz4{box-sizing:border-box;background-color:var(--xoui-color-brand-primary);border-radius:50%;width:.875rem;height:.875rem;transition:transform .2s;transform:scale(0)}:where(.yw7zqz2[data-state=checked]) .yw7zqz4{transform:scale(1)}:where(.yw7zqz2[data-disabled]) .yw7zqz4{background-color:var(--xoui-color-icon-disabled)}.yw7zqz5{color:var(--xoui-color-text-primary);font-size:1rem;line-height:1.5}:where(.yw7zqz2[data-disabled]) .yw7zqz5{color:var(--xoui-color-text-action-label-disabled)}.r4f54b5{--r4f54b1:var(--xoui-color-gray-300);--r4f54b0:var(--xoui-color-brand-primary);all:unset;box-sizing:border-box;background-color:var(--r4f54b1);-webkit-tap-highlight-color:transparent;cursor:pointer;border-radius:9999px;height:2rem;position:relative}.r4f54b5:focus-visible{outline:2px solid var(--r4f54b0);outline-offset:2px}.r4f54b5:where([data-disabled]){--r4f54b1:var(--xoui-color-button-disabled)}.r4f54b5:where([data-state=checked]):not([data-disabled]){--r4f54b1:var(--xoui-color-brand-primary)}.r4f54b6{background-color:#0000;align-items:center;display:flex}.r4f54b7{--r4f54b2:var(--xoui-color-white);--r4f54b3:1.5rem;--r4f54b4:.25rem;z-index:1;width:var(--r4f54b3);height:var(--r4f54b3);background-color:var(--r4f54b2);filter:drop-shadow(0 2px 2px #0000001a);will-change:inset-inline-start;border-radius:9999px;transition:inset-inline-start .15s;display:flex;position:absolute;inset-inline-start:var(--r4f54b4)}.r4f54b7[data-state=checked]{--r4f54b4:calc(100% - var(--r4f54b3) - .25rem)}.r4f54b8{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);-webkit-user-select:none;user-select:none;white-space:nowrap;background-color:#0000;margin-inline:1.75rem .5rem;padding-inline:.25rem;line-height:1;display:none}.r4f54b5[data-state=checked] .r4f54b8{margin-inline:.5rem 1.75rem}.r4f54b5[data-state=checked] .r4f54b8[data-on-label],.r4f54b5[data-state=unchecked] .r4f54b8[data-off-label]{display:block}
1
+ @layer xm-tokens{:root{--xm-color-black:#222;--xm-color-blue-50:#eef8fd;--xm-color-blue-100:#e4f2ff;--xm-color-blue-200:#d8ecff;--xm-color-blue-300:#c7e4ff;--xm-color-blue-400:#a8d3ff;--xm-color-blue-500:#7dbdff;--xm-color-blue-600:#49a3ff;--xm-color-blue-700:#116fff;--xm-color-blue-800:#0050c4;--xm-color-blue-900:#004489;--xm-color-gray-50:#f4f5f6;--xm-color-gray-100:#e9ecef;--xm-color-gray-200:#d7dce2;--xm-color-gray-300:#bcc4cc;--xm-color-gray-400:#98a7b6;--xm-color-gray-500:#7d8d9d;--xm-color-gray-600:#65788a;--xm-color-gray-700:#6b7580;--xm-color-gray-800:#3b454e;--xm-color-gray-900:#2c3339;--xm-color-green-50:#fafff8;--xm-color-green-100:#f3ffee;--xm-color-green-200:#e6ffdc;--xm-color-green-300:#ceffbc;--xm-color-green-400:#b7f2a2;--xm-color-green-500:#8fe86e;--xm-color-green-600:#6acd45;--xm-color-green-700:#2cab23;--xm-color-green-800:#088000;--xm-color-green-900:#0f6408;--xm-color-orange-50:#fff5eb;--xm-color-orange-100:#ffefe1;--xm-color-orange-200:#ffe5ce;--xm-color-orange-300:#f9d4b2;--xm-color-orange-400:#ffc28a;--xm-color-orange-500:#ffaa5c;--xm-color-orange-600:#f38827;--xm-color-orange-700:#f06000;--xm-color-orange-800:#ae4e19;--xm-color-orange-900:#8f3301;--xm-color-purple-50:#fef9ff;--xm-color-purple-100:#fceeff;--xm-color-purple-200:#f7d8ff;--xm-color-purple-300:#f2c1ff;--xm-color-purple-400:#eb9eff;--xm-color-purple-500:#e585fe;--xm-color-purple-600:#d35af2;--xm-color-purple-700:#a807d0;--xm-color-purple-800:#86269e;--xm-color-purple-900:#72078e;--xm-color-red-50:#fff5f4;--xm-color-red-100:#ffefed;--xm-color-red-200:#ffe0de;--xm-color-red-300:#ffcfcc;--xm-color-red-400:#ffbeba;--xm-color-red-500:#ff9892;--xm-color-red-600:#ff685a;--xm-color-red-700:#dc0c00;--xm-color-red-800:#a10900;--xm-color-red-900:#820000;--xm-color-white:#fff;--xm-color-yellow-50:#fffbf0;--xm-color-yellow-100:#fff7dc;--xm-color-yellow-200:#fff0c5;--xm-color-yellow-300:#ffebaf;--xm-color-yellow-400:#ffe491;--xm-color-yellow-500:#ffdc75;--xm-color-yellow-600:#ffcd37;--xm-color-yellow-700:#ffbf00;--xm-color-yellow-800:#cfa219;--xm-color-yellow-900:#977614;--xm-space-0:0;--xm-space-2:.125rem;--xm-space-4:.25rem;--xm-space-6:.375rem;--xm-space-8:.5rem;--xm-space-12:.75rem;--xm-space-16:1rem;--xm-space-20:1.25rem;--xm-space-24:1.5rem;--xm-space-32:2rem;--xm-space-40:2.5rem;--xm-space-48:3rem;--xm-space-56:3.5rem;--xm-space-64:4rem;--xm-space-80:5rem;--xm-space-128:8rem;--xm-color-background-danger:var(--xm-color-red-100);--xm-color-background-default:var(--xm-color-gray-50);--xm-color-background-disabled:var(--xm-color-gray-100);--xm-color-background-emphasis:var(--xm-color-gray-100);--xm-color-background-info:var(--xm-color-blue-100);--xm-color-background-primary-default:var(--xm-color-orange-700);--xm-color-background-primary-muted:var(--xm-color-orange-50);--xm-color-background-success:var(--xm-color-green-100);--xm-color-background-supplier:var(--xm-color-blue-50);--xm-color-background-warning:var(--xm-color-yellow-100);--xm-color-background-white:var(--xm-color-white);--xm-color-border-danger:var(--xm-color-red-700);--xm-color-border-default:var(--xm-color-gray-300);--xm-color-border-info:var(--xm-color-blue-700);--xm-color-border-muted:var(--xm-color-gray-100);--xm-color-border-primary:var(--xm-color-orange-700);--xm-color-border-subtle:var(--xm-color-gray-200);--xm-color-border-success:var(--xm-color-green-800);--xm-color-border-warning:var(--xm-color-orange-800);--xm-color-foreground-danger:var(--xm-color-red-700);--xm-color-foreground-default:var(--xm-color-black);--xm-color-foreground-disabled:var(--xm-color-gray-700);--xm-color-foreground-info:var(--xm-color-blue-700);--xm-color-foreground-inverse:var(--xm-color-white);--xm-color-foreground-placeholder:var(--xm-color-gray-500);--xm-color-foreground-primary:var(--xm-color-orange-700);--xm-color-foreground-subtle:var(--xm-color-gray-800);--xm-color-foreground-success:var(--xm-color-green-800);--xm-color-foreground-warning:var(--xm-color-orange-800);--xm-color-hover-default:var(--xm-color-gray-50);--xm-color-hover-emphasis:var(--xm-color-gray-200);--xm-color-hover-primary-default:var(--xm-color-orange-800);--xm-color-hover-primary-muted:var(--xm-color-orange-50);--xm-color-hover-primary-subtle:var(--xm-color-orange-300);--xm-font-family-base:"Hiragino Kaku Gothic Pro", "Yu Gothic", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--xm-font-family-mono:"SF Mono", Monaco, Inconsolata, "Roboto Mono", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;--xm-font-family-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--xm-font-family-serif:Georgia, "Times New Roman", Times, serif;--xm-font-size-2xl:1.5rem;--xm-font-size-2xs:.625rem;--xm-font-size-3xl:2rem;--xm-font-size-lg:1.125rem;--xm-font-size-md:1rem;--xm-font-size-sm:.875rem;--xm-font-size-xl:1.25rem;--xm-font-size-xs:.75rem;--xm-font-weight-bold:700;--xm-font-weight-regular:400;--xm-line-height-loose:1.75;--xm-line-height-normal:1.5;--xm-line-height-tight:1.3;--xm-radius-full:9999px;--xm-radius-lg:1rem;--xm-radius-md:.5rem;--xm-radius-none:0;--xm-radius-sm:.375rem;--xm-radius-xs:.25rem;--xm-z-index-banner:1200;--xm-z-index-base:0;--xm-z-index-docked:10;--xm-z-index-dropdown:1000;--xm-z-index-modal:1400;--xm-z-index-overlay:1300;--xm-z-index-popover:1500;--xm-z-index-sticky:1100;--xm-z-index-toast:1700;--xm-z-index-tooltip:1800}}@keyframes _1rt5mjx2{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._1rt5mjx3{--_1rt5mjx0:2rem;--_1rt5mjx1:var(--xm-color-foreground-primary);all:unset;box-sizing:border-box;width:var(--_1rt5mjx0);height:var(--_1rt5mjx0);display:inline-block}._1rt5mjx3:after{content:"";box-sizing:border-box;width:var(--_1rt5mjx0);height:var(--_1rt5mjx0);border-radius:var(--xm-radius-full);border-width:calc(var(--_1rt5mjx0) / 8);border-style:solid;border-color:var(--_1rt5mjx1) var(--_1rt5mjx1) var(--_1rt5mjx1) transparent;animation:1.2s linear infinite _1rt5mjx2;display:block}.prfw664{--prfw660:var(--xm-color-foreground-inverse);--prfw661:var(--xm-color-background-primary-default);--prfw662:var(--xm-color-hover-primary-default);--prfw663:transparent;font-weight:var(--xm-font-weight-bold);font-family:var(--xm-font-family-base);line-height:var(--xm-line-height-normal);box-sizing:border-box;justify-content:center;align-items:center;gap:var(--xm-space-4);border-radius:var(--xm-radius-full);border:1px solid var(--prfw663);min-width:max-content;color:var(--prfw660);background-color:var(--prfw661);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s;display:inline-flex;position:relative}.prfw664:focus-visible{outline:2px solid var(--xm-color-border-primary);outline-offset:1px}.prfw664:where([data-bold=normal]){font-weight:var(--xm-font-weight-regular)}.prfw664:where([data-full-width]){width:100%;display:flex}.prfw664:where([data-size=sm]){height:2rem;font-size:var(--xm-font-size-xs);padding-inline:1rem}.prfw664:where([data-size=md]){height:2.5rem;font-size:var(--xm-font-size-sm);padding-inline:1.25rem}.prfw664:where([data-size=lg]){height:3rem;font-size:var(--xm-font-size-md);padding-inline:1.5rem}.prfw664[aria-disabled]{--prfw660:var(--xm-color-foreground-disabled);--prfw661:var(--xm-color-background-disabled);--prfw663:var(--xm-color-border-muted);font-weight:var(--xm-font-weight-regular);cursor:not-allowed}.prfw664:where:not([aria-disabled]):active{transform:translateY(1px)}.prfw665{--prfw660:var(--xm-color-foreground-primary);--prfw661:var(--xm-color-background-white);--prfw663:var(--xm-color-border-primary);--prfw662:var(--xm-color-background-primary-muted);border:1px solid var(--prfw663)}.prfw666{--prfw660:var(--xm-color-foreground-default);--prfw661:var(--xm-color-background-white);--prfw663:var(--xm-color-border-subtle);--prfw662:var(--xm-color-hover-default);border:1px solid var(--prfw663)}.prfw667{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.prfw668{align-items:center;display:flex}.prfw668[data-section=left]{margin-left:-.25rem}.prfw668[data-section=right]{margin-right:-.25rem}.prfw668[aria-hidden]{visibility:hidden}@media (any-hover:hover){.prfw664:not([aria-disabled]):hover{background-color:var(--prfw662)}.prfw664:not([aria-disabled]):active{transform:translateY(1px)}}.igar8u0{--igar8u1:var(--xm-color-foreground-subtle);--igar8u2:transparent;--igar8u3:var(--xm-color-foreground-disabled);--igar8u4:var(--xm-color-background-disabled);--igar8u5:var(--xm-color-background-emphasis);--igar8u6:var(--xm-color-border-subtle)}.igar8u7{all:unset;color:var(--igar8u1);background-color:var(--igar8u2);box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;border:0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2rem;height:2rem;padding:0;transition:all .2s;display:inline-flex;position:relative}.igar8u7:focus-visible{outline:2px solid var(--xm-color-border-primary);outline-offset:2px}.igar8u7:where([data-disabled]){cursor:not-allowed;background-color:var(--igar8u4);color:var(--igar8u3)}.igar8u7:where(:not([data-disabled]):active){transform:translateY(1px)}.igar8u9{border:1px solid var(--igar8u6)}.igar8ua{--igar8u1:var(--xm-color-foreground-inverse);--igar8u2:var(--xm-color-background-primary-default);--igar8u5:var(--xm-color-hover-primary-default)}.igar8ub{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}@media (any-hover:hover){.igar8u7:where(:not([data-disabled]):hover){background-color:var(--igar8u5)}.igar8u7:where(:not([data-disabled]):active){transform:translateY(1px)}}._1682sfm1{--_1682sfm0:1.5rem;all:unset;width:var(--_1682sfm0);height:var(--_1682sfm0);color:var(--xm-color-foreground-subtle);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}._1682sfm1:hover{color:var(--xm-color-foreground-primary);background-color:var(--xm-color-background-default)}._1682sfm1:active{transform:translateY(-1px)}._1hbkh9y4{align-items:center;width:100%;display:inline-flex;position:relative}._1hbkh9y5{--_1hbkh9y0:var(--xm-color-border-default);--_1hbkh9y1:var(--xm-color-background-white);--_1hbkh9y2:1.5rem;--_1hbkh9y3:calc(var(--_1hbkh9y2) + 1rem);box-sizing:border-box;width:100%;height:2.5rem;font-family:var(--xm-font-family-base);font-size:var(--xm-font-size-md);background-color:var(--_1hbkh9y1);border:1px solid var(--_1hbkh9y0);border-radius:.375rem;padding-inline:.75rem;line-height:1.5;transition:border-color .2s,box-shadow .2s}._1hbkh9y5:focus-visible{--_1hbkh9y0:var(--xm-color-border-primary);box-shadow:0 0 0 1px var(--xm-color-border-primary);outline:none}._1hbkh9y5:disabled{--_1hbkh9y0:var(--xm-color-border-muted);--_1hbkh9y1:var(--xm-color-background-default);color:var(--xm-color-foreground-placeholder);cursor:not-allowed}._1hbkh9y5::placeholder{color:var(--xm-color-foreground-placeholder)}._1hbkh9y4[data-with-left-section] ._1hbkh9y5{padding-left:var(--_1hbkh9y3)}._1hbkh9y4[data-with-right-section] ._1hbkh9y5{padding-right:var(--_1hbkh9y3)}._1hbkh9y4[data-error] ._1hbkh9y5{--_1hbkh9y0:var(--xm-color-border-danger);color:var(--xm-color-foreground-danger)}._1hbkh9y4[data-error]:focus ._1hbkh9y5{--_1hbkh9y0:var(--xm-color-border-danger);box-shadow:0 0 0 1px var(--xm-color-border-danger)}._1hbkh9y6{width:var(--_1hbkh9y2);height:var(--_1hbkh9y2);color:var(--xm-color-foreground-subtle);z-index:1;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}._1hbkh9y4[data-disabled] ._1hbkh9y6{color:var(--xm-color-foreground-disabled)}._1hbkh9y4[data-error] ._1hbkh9y6{color:var(--xm-color-foreground-danger)}._1hbkh9y7{width:var(--_1hbkh9y2);height:var(--_1hbkh9y2);color:var(--xm-color-foreground-subtle);z-index:1;opacity:0;justify-content:center;align-items:center;transition:opacity .25s ease-out;display:flex;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}._1hbkh9y7[data-visible]{opacity:1;pointer-events:auto}._1hbkh9y4[data-disabled] ._1hbkh9y7{color:var(--xm-color-foreground-disabled)}._1hbkh9y4[data-error] ._1hbkh9y7{color:var(--xm-color-foreground-danger)}.yw7zqz0{box-sizing:border-box;flex-direction:column;gap:.5rem;display:flex}.yw7zqz1{flex-direction:row}.yw7zqz2{all:unset;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;height:1.875rem;padding-inline:.5rem;display:flex}.yw7zqz3{box-sizing:border-box;border:1px solid var(--xm-color-border-default);background-color:var(--xm-color-background-white);border-radius:50%;justify-content:center;align-items:center;width:1.375rem;height:1.375rem;transition:border-color .2s,background-color .2s;display:flex}:where(.yw7zqz2:hover) .yw7zqz3{border-color:var(--xm-color-border-primary)}:where(.yw7zqz2[data-state=checked]) .yw7zqz3{background-color:var(--xm-color-background-white)}:where(.yw7zqz2[data-disabled]) .yw7zqz3{border-color:var(--xm-color-border-muted);background-color:var(--xm-color-background-white);cursor:not-allowed}.yw7zqz4{box-sizing:border-box;background-color:var(--xm-color-background-primary-default);border-radius:50%;width:.875rem;height:.875rem;transition:transform .2s;transform:scale(0)}:where(.yw7zqz2[data-state=checked]) .yw7zqz4{transform:scale(1)}:where(.yw7zqz2[data-disabled]) .yw7zqz4{background-color:var(--xm-color-foreground-disabled)}.yw7zqz5{color:var(--xm-color-foreground-default);font-size:1rem;line-height:1.5}:where(.yw7zqz2[data-disabled]) .yw7zqz5{color:var(--xm-color-foreground-disabled)}.r4f54b5{--r4f54b1:var(--xm-color-gray-300);--r4f54b0:var(--xm-color-border-primary);all:unset;box-sizing:border-box;background-color:var(--r4f54b1);border-radius:var(--xm-radius-full);-webkit-tap-highlight-color:transparent;cursor:pointer;height:2rem;position:relative}.r4f54b5:focus-visible{outline:2px solid var(--r4f54b0);outline-offset:2px}.r4f54b5:where([data-disabled]){--r4f54b1:var(--xm-color-background-disabled)}.r4f54b5:where([data-state=checked]):not([data-disabled]){--r4f54b1:var(--xm-color-background-primary-default)}.r4f54b6{background-color:#0000;align-items:center;display:flex}.r4f54b7{--r4f54b2:var(--xm-color-foreground-inverse);--r4f54b3:1.5rem;--r4f54b4:.25rem;z-index:1;width:var(--r4f54b3);height:var(--r4f54b3);border-radius:var(--xm-radius-full);background-color:var(--r4f54b2);filter:drop-shadow(0 2px 2px #0000001a);will-change:inset-inline-start;transition:inset-inline-start .15s;display:flex;position:absolute;inset-inline-start:var(--r4f54b4)}.r4f54b7[data-state=checked]{--r4f54b4:calc(100% - var(--r4f54b3) - .25rem)}.r4f54b8{color:var(--xm-color-foreground-inverse);min-width:1.75rem;min-height:.75rem;font-size:var(--xm-font-size-xs);font-weight:var(--xm-font-weight-bold);-webkit-user-select:none;user-select:none;white-space:nowrap;background-color:#0000;margin-inline:1.75rem .5rem;padding-inline:.25rem;line-height:1;display:none}.r4f54b5[data-state=checked] .r4f54b8{margin-inline:.5rem 1.75rem}.r4f54b5[data-state=checked] .r4f54b8[data-on-label],.r4f54b5[data-state=unchecked] .r4f54b8[data-off-label]{display:block}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -1,10 +1,13 @@
1
1
  {
2
2
  "name": "@xmart/xorder-ui",
3
- "version": "0.2.0",
3
+ "version": "0.3.0-dev.1",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
7
- "sideEffects": false,
7
+ "sideEffects": [
8
+ "**/*.css",
9
+ "**/*.css.ts"
10
+ ],
8
11
  "main": "dist/index.esm.js",
9
12
  "module": "dist/index.esm.js",
10
13
  "types": "dist/index.d.ts",
@@ -28,7 +31,8 @@
28
31
  "@radix-ui/react-visually-hidden": "1.2.4",
29
32
  "@vanilla-extract/css": "1.20.1",
30
33
  "@vanilla-extract/dynamic": "2.1.5",
31
- "@xmart/xorder-ui-icons": "0.2.0",
34
+ "@xmart/xorder-ui-icons": "0.3.0-dev.1",
35
+ "@xmart/xorder-ui-tokens": "0.1.2-dev.2",
32
36
  "clsx": "2.1.1"
33
37
  },
34
38
  "peerDependencies": {
package/dist/styles/index.css.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './tokens';
package/dist/styles/tokens/primitive.css.d.ts DELETED
@@ -1,201 +0,0 @@
1
- /**
2
- * プリミティブトークン
3
- *
4
- * 基本的なデザイン値を定義します。
5
- * これらは直接使用することもできますが、セマンティクストークンの使用を推奨します。
6
- */
7
- export declare const primitive: {
8
- colors: {
9
- white: `var(--${string})`;
10
- black: `var(--${string})`;
11
- gray: {
12
- 50: `var(--${string})`;
13
- 100: `var(--${string})`;
14
- 200: `var(--${string})`;
15
- 300: `var(--${string})`;
16
- 500: `var(--${string})`;
17
- 700: `var(--${string})`;
18
- 800: `var(--${string})`;
19
- };
20
- red: {
21
- 100: `var(--${string})`;
22
- 600: `var(--${string})`;
23
- 700: `var(--${string})`;
24
- };
25
- orange: {
26
- 30: `var(--${string})`;
27
- 50: `var(--${string})`;
28
- 600: `var(--${string})`;
29
- 700: `var(--${string})`;
30
- 800: `var(--${string})`;
31
- };
32
- yellow: {
33
- 100: `var(--${string})`;
34
- 700: `var(--${string})`;
35
- };
36
- green: {
37
- 100: `var(--${string})`;
38
- 700: `var(--${string})`;
39
- 800: `var(--${string})`;
40
- };
41
- blue: {
42
- 50: `var(--${string})`;
43
- 100: `var(--${string})`;
44
- 700: `var(--${string})`;
45
- };
46
- purple: {
47
- 100: `var(--${string})`;
48
- 700: `var(--${string})`;
49
- };
50
- };
51
- spacing: {
52
- '0': `var(--${string})`;
53
- xs: `var(--${string})`;
54
- sm: `var(--${string})`;
55
- md: `var(--${string})`;
56
- lg: `var(--${string})`;
57
- xl: `var(--${string})`;
58
- '2xl': `var(--${string})`;
59
- '1': `var(--${string})`;
60
- '2': `var(--${string})`;
61
- '3': `var(--${string})`;
62
- '4': `var(--${string})`;
63
- '5': `var(--${string})`;
64
- '6': `var(--${string})`;
65
- '8': `var(--${string})`;
66
- '10': `var(--${string})`;
67
- '12': `var(--${string})`;
68
- '16': `var(--${string})`;
69
- '20': `var(--${string})`;
70
- '24': `var(--${string})`;
71
- };
72
- typography: {
73
- fontSize: {
74
- xs: `var(--${string})`;
75
- sm: `var(--${string})`;
76
- md: `var(--${string})`;
77
- lg: `var(--${string})`;
78
- xl: `var(--${string})`;
79
- '2xl': `var(--${string})`;
80
- };
81
- fontWeight: {
82
- normal: `var(--${string})`;
83
- bold: `var(--${string})`;
84
- };
85
- fontFamily: {
86
- base: `var(--${string})`;
87
- sans: `var(--${string})`;
88
- serif: `var(--${string})`;
89
- mono: `var(--${string})`;
90
- };
91
- };
92
- zIndex: {
93
- auto: `var(--${string})`;
94
- base: `var(--${string})`;
95
- docked: `var(--${string})`;
96
- dropdown: `var(--${string})`;
97
- sticky: `var(--${string})`;
98
- banner: `var(--${string})`;
99
- overlay: `var(--${string})`;
100
- modal: `var(--${string})`;
101
- popover: `var(--${string})`;
102
- skipLink: `var(--${string})`;
103
- toast: `var(--${string})`;
104
- tooltip: `var(--${string})`;
105
- };
106
- };
107
- export declare const colors: {
108
- white: `var(--${string})`;
109
- black: `var(--${string})`;
110
- gray: {
111
- 50: `var(--${string})`;
112
- 100: `var(--${string})`;
113
- 200: `var(--${string})`;
114
- 300: `var(--${string})`;
115
- 500: `var(--${string})`;
116
- 700: `var(--${string})`;
117
- 800: `var(--${string})`;
118
- };
119
- red: {
120
- 100: `var(--${string})`;
121
- 600: `var(--${string})`;
122
- 700: `var(--${string})`;
123
- };
124
- orange: {
125
- 30: `var(--${string})`;
126
- 50: `var(--${string})`;
127
- 600: `var(--${string})`;
128
- 700: `var(--${string})`;
129
- 800: `var(--${string})`;
130
- };
131
- yellow: {
132
- 100: `var(--${string})`;
133
- 700: `var(--${string})`;
134
- };
135
- green: {
136
- 100: `var(--${string})`;
137
- 700: `var(--${string})`;
138
- 800: `var(--${string})`;
139
- };
140
- blue: {
141
- 50: `var(--${string})`;
142
- 100: `var(--${string})`;
143
- 700: `var(--${string})`;
144
- };
145
- purple: {
146
- 100: `var(--${string})`;
147
- 700: `var(--${string})`;
148
- };
149
- }, spacing: {
150
- '0': `var(--${string})`;
151
- xs: `var(--${string})`;
152
- sm: `var(--${string})`;
153
- md: `var(--${string})`;
154
- lg: `var(--${string})`;
155
- xl: `var(--${string})`;
156
- '2xl': `var(--${string})`;
157
- '1': `var(--${string})`;
158
- '2': `var(--${string})`;
159
- '3': `var(--${string})`;
160
- '4': `var(--${string})`;
161
- '5': `var(--${string})`;
162
- '6': `var(--${string})`;
163
- '8': `var(--${string})`;
164
- '10': `var(--${string})`;
165
- '12': `var(--${string})`;
166
- '16': `var(--${string})`;
167
- '20': `var(--${string})`;
168
- '24': `var(--${string})`;
169
- }, typography: {
170
- fontSize: {
171
- xs: `var(--${string})`;
172
- sm: `var(--${string})`;
173
- md: `var(--${string})`;
174
- lg: `var(--${string})`;
175
- xl: `var(--${string})`;
176
- '2xl': `var(--${string})`;
177
- };
178
- fontWeight: {
179
- normal: `var(--${string})`;
180
- bold: `var(--${string})`;
181
- };
182
- fontFamily: {
183
- base: `var(--${string})`;
184
- sans: `var(--${string})`;
185
- serif: `var(--${string})`;
186
- mono: `var(--${string})`;
187
- };
188
- }, zIndex: {
189
- auto: `var(--${string})`;
190
- base: `var(--${string})`;
191
- docked: `var(--${string})`;
192
- dropdown: `var(--${string})`;
193
- sticky: `var(--${string})`;
194
- banner: `var(--${string})`;
195
- overlay: `var(--${string})`;
196
- modal: `var(--${string})`;
197
- popover: `var(--${string})`;
198
- skipLink: `var(--${string})`;
199
- toast: `var(--${string})`;
200
- tooltip: `var(--${string})`;
201
- };
package/dist/styles/tokens/semantic.css.d.ts DELETED
@@ -1,64 +0,0 @@
1
- /**
2
- * セマンティクストークン
3
- *
4
- * 用途に応じた意味のあるデザイントークンを定義します。
5
- * コンポーネント開発時はこれらの使用を推奨します。
6
- */
7
- export declare const semantic: {
8
- colors: {
9
- brand: {
10
- primary: `var(--${string})`;
11
- primaryHover: `var(--${string})`;
12
- light: `var(--${string})`;
13
- lightHover: `var(--${string})`;
14
- };
15
- button: {
16
- base: `var(--${string})`;
17
- baseHover: `var(--${string})`;
18
- disabled: `var(--${string})`;
19
- };
20
- text: {
21
- primary: `var(--${string})`;
22
- secondary: `var(--${string})`;
23
- placeholder: `var(--${string})`;
24
- inverse: `var(--${string})`;
25
- linkPrimary: `var(--${string})`;
26
- actionLabel: `var(--${string})`;
27
- actionLabelDisabled: `var(--${string})`;
28
- destructive: `var(--${string})`;
29
- error: `var(--${string})`;
30
- warning: `var(--${string})`;
31
- success: `var(--${string})`;
32
- info: `var(--${string})`;
33
- };
34
- background: {
35
- default: `var(--${string})`;
36
- surface: `var(--${string})`;
37
- supplier: `var(--${string})`;
38
- error: `var(--${string})`;
39
- warning: `var(--${string})`;
40
- success: `var(--${string})`;
41
- info: `var(--${string})`;
42
- };
43
- icon: {
44
- primary: `var(--${string})`;
45
- disabled: `var(--${string})`;
46
- inverse: `var(--${string})`;
47
- destructive: `var(--${string})`;
48
- brand: `var(--${string})`;
49
- info: `var(--${string})`;
50
- };
51
- divider: {
52
- inputDefault: `var(--${string})`;
53
- inputSubtle: `var(--${string})`;
54
- inputDisabled: `var(--${string})`;
55
- sectionDefault: `var(--${string})`;
56
- sectionSubtle: `var(--${string})`;
57
- inputFocus: `var(--${string})`;
58
- error: `var(--${string})`;
59
- warning: `var(--${string})`;
60
- success: `var(--${string})`;
61
- info: `var(--${string})`;
62
- };
63
- };
64
- };