@brijbyte/agentic-ui 0.0.1-beta → 0.0.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.
- package/README.md +736 -0
- package/dist/accordion/accordion.css +89 -0
- package/dist/accordion/accordion.d.ts +28 -0
- package/dist/accordion/accordion.d.ts.map +1 -0
- package/dist/accordion/accordion.js +51 -0
- package/dist/accordion/accordion.js.map +1 -0
- package/dist/accordion/accordion.module.css.d.ts +2 -0
- package/dist/accordion/accordion.module.js +14 -0
- package/dist/accordion/accordion.module.js.map +1 -0
- package/dist/accordion/index.d.ts +3 -0
- package/dist/accordion/index.js +4 -0
- package/dist/accordion/parts.d.ts +28 -0
- package/dist/accordion/parts.d.ts.map +1 -0
- package/dist/accordion/parts.js +55 -0
- package/dist/accordion/parts.js.map +1 -0
- package/dist/badge/badge.css +70 -0
- package/dist/badge/badge.d.ts +20 -0
- package/dist/badge/badge.d.ts.map +1 -0
- package/dist/badge/badge.js +21 -0
- package/dist/badge/badge.js.map +1 -0
- package/dist/badge/badge.module.css.d.ts +2 -0
- package/dist/badge/badge.module.js +16 -0
- package/dist/badge/badge.module.js.map +1 -0
- package/dist/badge/index.d.ts +2 -0
- package/dist/badge/index.js +3 -0
- package/dist/button/button.css +242 -0
- package/dist/button/button.d.ts +28 -0
- package/dist/button/button.d.ts.map +1 -0
- package/dist/button/button.js +34 -0
- package/dist/button/button.js.map +1 -0
- package/dist/button/button.module.css.d.ts +2 -0
- package/dist/button/button.module.js +27 -0
- package/dist/button/button.module.js.map +1 -0
- package/dist/button/index.d.ts +2 -0
- package/dist/button/index.js +3 -0
- package/dist/card/card.css +68 -0
- package/dist/card/card.d.ts +41 -0
- package/dist/card/card.d.ts.map +1 -0
- package/dist/card/card.js +50 -0
- package/dist/card/card.js.map +1 -0
- package/dist/card/card.module.css.d.ts +2 -0
- package/dist/card/card.module.js +15 -0
- package/dist/card/card.module.js.map +1 -0
- package/dist/card/index.d.ts +2 -0
- package/dist/card/index.js +3 -0
- package/dist/checkbox/checkbox.css +76 -0
- package/dist/checkbox/checkbox.d.ts +29 -0
- package/dist/checkbox/checkbox.d.ts.map +1 -0
- package/dist/checkbox/checkbox.js +40 -0
- package/dist/checkbox/checkbox.js.map +1 -0
- package/dist/checkbox/checkbox.module.css.d.ts +2 -0
- package/dist/checkbox/checkbox.module.js +11 -0
- package/dist/checkbox/checkbox.module.js.map +1 -0
- package/dist/checkbox/index.d.ts +3 -0
- package/dist/checkbox/index.js +4 -0
- package/dist/checkbox/parts.d.ts +20 -0
- package/dist/checkbox/parts.d.ts.map +1 -0
- package/dist/checkbox/parts.js +51 -0
- package/dist/checkbox/parts.js.map +1 -0
- package/dist/collapsible/collapsible.css +92 -0
- package/dist/collapsible/collapsible.d.ts +24 -0
- package/dist/collapsible/collapsible.d.ts.map +1 -0
- package/dist/collapsible/collapsible.js +44 -0
- package/dist/collapsible/collapsible.js.map +1 -0
- package/dist/collapsible/collapsible.module.css.d.ts +2 -0
- package/dist/collapsible/collapsible.module.js +12 -0
- package/dist/collapsible/collapsible.module.js.map +1 -0
- package/dist/collapsible/index.d.ts +3 -0
- package/dist/collapsible/index.js +4 -0
- package/dist/collapsible/parts.d.ts +23 -0
- package/dist/collapsible/parts.d.ts.map +1 -0
- package/dist/collapsible/parts.js +44 -0
- package/dist/collapsible/parts.js.map +1 -0
- package/dist/dialog/dialog.css +120 -0
- package/dist/dialog/dialog.d.ts +32 -0
- package/dist/dialog/dialog.d.ts.map +1 -0
- package/dist/dialog/dialog.js +54 -0
- package/dist/dialog/dialog.js.map +1 -0
- package/dist/dialog/dialog.module.css.d.ts +2 -0
- package/dist/dialog/dialog.module.js +15 -0
- package/dist/dialog/dialog.module.js.map +1 -0
- package/dist/dialog/index.d.ts +3 -0
- package/dist/dialog/index.js +4 -0
- package/dist/dialog/parts.d.ts +38 -0
- package/dist/dialog/parts.d.ts.map +1 -0
- package/dist/dialog/parts.js +75 -0
- package/dist/dialog/parts.js.map +1 -0
- package/dist/drawer/drawer.css +257 -0
- package/dist/drawer/drawer.d.ts +38 -0
- package/dist/drawer/drawer.d.ts.map +1 -0
- package/dist/drawer/drawer.js +87 -0
- package/dist/drawer/drawer.js.map +1 -0
- package/dist/drawer/drawer.module.css.d.ts +2 -0
- package/dist/drawer/drawer.module.js +20 -0
- package/dist/drawer/drawer.module.js.map +1 -0
- package/dist/drawer/index.d.ts +3 -0
- package/dist/drawer/index.js +4 -0
- package/dist/drawer/parts.d.ts +58 -0
- package/dist/drawer/parts.d.ts.map +1 -0
- package/dist/drawer/parts.js +107 -0
- package/dist/drawer/parts.js.map +1 -0
- package/dist/index.css +2424 -0
- package/dist/index.d.ts +33 -0
- package/dist/index.js +53 -0
- package/dist/input/index.d.ts +2 -0
- package/dist/input/index.js +3 -0
- package/dist/input/input.css +107 -0
- package/dist/input/input.d.ts +17 -0
- package/dist/input/input.d.ts.map +1 -0
- package/dist/input/input.js +37 -0
- package/dist/input/input.js.map +1 -0
- package/dist/input/input.module.css.d.ts +2 -0
- package/dist/input/input.module.js +18 -0
- package/dist/input/input.module.js.map +1 -0
- package/dist/menu/index.d.ts +4 -0
- package/dist/menu/index.js +5 -0
- package/dist/menu/menu.css +158 -0
- package/dist/menu/menu.d.ts +50 -0
- package/dist/menu/menu.d.ts.map +1 -0
- package/dist/menu/menu.js +69 -0
- package/dist/menu/menu.js.map +1 -0
- package/dist/menu/menu.module.css.d.ts +2 -0
- package/dist/menu/menu.module.js +19 -0
- package/dist/menu/menu.module.js.map +1 -0
- package/dist/menu/menuitemshortcut.d.ts +9 -0
- package/dist/menu/menuitemshortcut.d.ts.map +1 -0
- package/dist/menu/menuitemshortcut.js +15 -0
- package/dist/menu/menuitemshortcut.js.map +1 -0
- package/dist/menu/parts.d.ts +39 -0
- package/dist/menu/parts.d.ts.map +1 -0
- package/dist/menu/parts.js +76 -0
- package/dist/menu/parts.js.map +1 -0
- package/dist/number-field/index.d.ts +3 -0
- package/dist/number-field/index.js +4 -0
- package/dist/number-field/number-field.css +115 -0
- package/dist/number-field/number-field.d.ts +31 -0
- package/dist/number-field/number-field.d.ts.map +1 -0
- package/dist/number-field/number-field.js +78 -0
- package/dist/number-field/number-field.js.map +1 -0
- package/dist/number-field/number-field.module.css.d.ts +2 -0
- package/dist/number-field/number-field.module.js +16 -0
- package/dist/number-field/number-field.module.js.map +1 -0
- package/dist/number-field/parts.d.ts +38 -0
- package/dist/number-field/parts.d.ts.map +1 -0
- package/dist/number-field/parts.js +74 -0
- package/dist/number-field/parts.js.map +1 -0
- package/dist/progress/index.d.ts +3 -0
- package/dist/progress/index.js +4 -0
- package/dist/progress/parts.d.ts +20 -0
- package/dist/progress/parts.d.ts.map +1 -0
- package/dist/progress/parts.js +42 -0
- package/dist/progress/parts.js.map +1 -0
- package/dist/progress/progress.css +75 -0
- package/dist/progress/progress.d.ts +27 -0
- package/dist/progress/progress.d.ts.map +1 -0
- package/dist/progress/progress.js +27 -0
- package/dist/progress/progress.js.map +1 -0
- package/dist/progress/progress.module.css.d.ts +2 -0
- package/dist/progress/progress.module.js +19 -0
- package/dist/progress/progress.module.js.map +1 -0
- package/dist/reset.css +91 -0
- package/dist/select/index.d.ts +3 -0
- package/dist/select/index.js +4 -0
- package/dist/select/parts.d.ts +65 -0
- package/dist/select/parts.d.ts.map +1 -0
- package/dist/select/parts.js +134 -0
- package/dist/select/parts.js.map +1 -0
- package/dist/select/select.css +159 -0
- package/dist/select/select.d.ts +38 -0
- package/dist/select/select.d.ts.map +1 -0
- package/dist/select/select.js +80 -0
- package/dist/select/select.js.map +1 -0
- package/dist/select/select.module.css.d.ts +2 -0
- package/dist/select/select.module.js +17 -0
- package/dist/select/select.module.js.map +1 -0
- package/dist/separator/index.d.ts +2 -0
- package/dist/separator/index.js +3 -0
- package/dist/separator/separator.css +20 -0
- package/dist/separator/separator.d.ts +16 -0
- package/dist/separator/separator.d.ts.map +1 -0
- package/dist/separator/separator.js +17 -0
- package/dist/separator/separator.js.map +1 -0
- package/dist/separator/separator.module.css.d.ts +2 -0
- package/dist/separator/separator.module.js +6 -0
- package/dist/separator/separator.module.js.map +1 -0
- package/dist/styles/reset.css +69 -0
- package/dist/styles/tokens.css +274 -0
- package/dist/switch/index.d.ts +3 -0
- package/dist/switch/index.js +4 -0
- package/dist/switch/parts.d.ts +18 -0
- package/dist/switch/parts.d.ts.map +1 -0
- package/dist/switch/parts.js +39 -0
- package/dist/switch/parts.js.map +1 -0
- package/dist/switch/switch.css +68 -0
- package/dist/switch/switch.d.ts +28 -0
- package/dist/switch/switch.d.ts.map +1 -0
- package/dist/switch/switch.js +26 -0
- package/dist/switch/switch.js.map +1 -0
- package/dist/switch/switch.module.css.d.ts +2 -0
- package/dist/switch/switch.module.js +11 -0
- package/dist/switch/switch.module.js.map +1 -0
- package/dist/tabs/index.d.ts +3 -0
- package/dist/tabs/index.js +4 -0
- package/dist/tabs/parts.d.ts +23 -0
- package/dist/tabs/parts.d.ts.map +1 -0
- package/dist/tabs/parts.js +48 -0
- package/dist/tabs/parts.js.map +1 -0
- package/dist/tabs/tabs.css +90 -0
- package/dist/tabs/tabs.d.ts +28 -0
- package/dist/tabs/tabs.d.ts.map +1 -0
- package/dist/tabs/tabs.js +30 -0
- package/dist/tabs/tabs.js.map +1 -0
- package/dist/tabs/tabs.module.css.d.ts +2 -0
- package/dist/tabs/tabs.module.js +11 -0
- package/dist/tabs/tabs.module.js.map +1 -0
- package/dist/tailwind-theme.css +142 -0
- package/dist/toast/index.d.ts +3 -0
- package/dist/toast/index.js +4 -0
- package/dist/toast/parts.d.ts +33 -0
- package/dist/toast/parts.d.ts.map +1 -0
- package/dist/toast/parts.js +62 -0
- package/dist/toast/parts.js.map +1 -0
- package/dist/toast/toast.css +211 -0
- package/dist/toast/toast.d.ts +43 -0
- package/dist/toast/toast.d.ts.map +1 -0
- package/dist/toast/toast.js +156 -0
- package/dist/toast/toast.js.map +1 -0
- package/dist/toast/toast.module.css.d.ts +2 -0
- package/dist/toast/toast.module.js +25 -0
- package/dist/toast/toast.module.js.map +1 -0
- package/dist/tokens.css +400 -0
- package/dist/tooltip/index.d.ts +3 -0
- package/dist/tooltip/index.js +4 -0
- package/dist/tooltip/parts.d.ts +23 -0
- package/dist/tooltip/parts.d.ts.map +1 -0
- package/dist/tooltip/parts.js +53 -0
- package/dist/tooltip/parts.js.map +1 -0
- package/dist/tooltip/tooltip.css +64 -0
- package/dist/tooltip/tooltip.d.ts +22 -0
- package/dist/tooltip/tooltip.d.ts.map +1 -0
- package/dist/tooltip/tooltip.js +23 -0
- package/dist/tooltip/tooltip.js.map +1 -0
- package/dist/tooltip/tooltip.module.css.d.ts +2 -0
- package/dist/tooltip/tooltip.module.js +10 -0
- package/dist/tooltip/tooltip.module.js.map +1 -0
- package/package.json +137 -4
- package/src/accordion/accordion.module.css +89 -0
- package/src/accordion/accordion.tsx +50 -0
- package/src/accordion/index.ts +6 -0
- package/src/accordion/parts.tsx +68 -0
- package/src/badge/badge.module.css +70 -0
- package/src/badge/badge.tsx +19 -0
- package/src/badge/index.ts +3 -0
- package/src/button/button.module.css +265 -0
- package/src/button/button.tsx +67 -0
- package/src/button/index.ts +3 -0
- package/src/card/card.module.css +67 -0
- package/src/card/card.tsx +54 -0
- package/src/card/index.ts +3 -0
- package/src/checkbox/checkbox.module.css +80 -0
- package/src/checkbox/checkbox.tsx +38 -0
- package/src/checkbox/index.ts +6 -0
- package/src/checkbox/parts.tsx +54 -0
- package/src/collapsible/collapsible.module.css +94 -0
- package/src/collapsible/collapsible.tsx +38 -0
- package/src/collapsible/index.ts +6 -0
- package/src/collapsible/parts.tsx +52 -0
- package/src/css.d.ts +8 -0
- package/src/dialog/dialog.module.css +123 -0
- package/src/dialog/dialog.tsx +60 -0
- package/src/dialog/index.ts +13 -0
- package/src/dialog/parts.tsx +96 -0
- package/src/drawer/drawer.module.css +289 -0
- package/src/drawer/drawer.tsx +96 -0
- package/src/drawer/index.ts +24 -0
- package/src/drawer/parts.tsx +122 -0
- package/src/index.ts +189 -0
- package/src/input/index.ts +3 -0
- package/src/input/input.module.css +109 -0
- package/src/input/input.tsx +39 -0
- package/src/menu/index.ts +7 -0
- package/src/menu/menu.module.css +172 -0
- package/src/menu/menu.tsx +108 -0
- package/src/menu/menuitemshortcut.tsx +9 -0
- package/src/menu/parts.tsx +90 -0
- package/src/number-field/index.ts +20 -0
- package/src/number-field/number-field.module.css +114 -0
- package/src/number-field/number-field.tsx +75 -0
- package/src/number-field/parts.tsx +91 -0
- package/src/progress/index.ts +6 -0
- package/src/progress/parts.tsx +51 -0
- package/src/progress/progress.module.css +70 -0
- package/src/progress/progress.tsx +42 -0
- package/src/select/index.ts +30 -0
- package/src/select/parts.tsx +171 -0
- package/src/select/select.module.css +167 -0
- package/src/select/select.tsx +89 -0
- package/src/separator/index.ts +3 -0
- package/src/separator/separator.module.css +18 -0
- package/src/separator/separator.tsx +20 -0
- package/src/styles/reset.css +91 -0
- package/src/styles/tailwind-theme.css +142 -0
- package/src/styles/tokens.css +400 -0
- package/src/switch/index.ts +6 -0
- package/src/switch/parts.tsx +44 -0
- package/src/switch/switch.module.css +67 -0
- package/src/switch/switch.tsx +33 -0
- package/src/tabs/index.ts +6 -0
- package/src/tabs/parts.tsx +48 -0
- package/src/tabs/tabs.module.css +92 -0
- package/src/tabs/tabs.tsx +48 -0
- package/src/toast/index.ts +6 -0
- package/src/toast/parts.tsx +76 -0
- package/src/toast/toast.module.css +252 -0
- package/src/toast/toast.tsx +129 -0
- package/src/tooltip/index.ts +6 -0
- package/src/tooltip/parts.tsx +62 -0
- package/src/tooltip/tooltip.module.css +67 -0
- package/src/tooltip/tooltip.tsx +30 -0
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
@layer base {
|
|
2
|
+
:root {
|
|
3
|
+
--font-display: "New York", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Georgia, serif;
|
|
4
|
+
--font-mono: "Berkeley Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Menlo", ui-monospace, "Courier New", monospace;
|
|
5
|
+
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
|
|
6
|
+
--font-size-2xs: .625rem;
|
|
7
|
+
--font-size-xs: .6875rem;
|
|
8
|
+
--font-size-sm: .75rem;
|
|
9
|
+
--font-size-md: .8125rem;
|
|
10
|
+
--font-size-lg: .875rem;
|
|
11
|
+
--font-size-xl: 1rem;
|
|
12
|
+
--font-size-2xl: 1.125rem;
|
|
13
|
+
--font-size-3xl: 1.25rem;
|
|
14
|
+
--font-size-4xl: 1.5rem;
|
|
15
|
+
--font-weight-regular: 400;
|
|
16
|
+
--font-weight-medium: 500;
|
|
17
|
+
--font-weight-semibold: 600;
|
|
18
|
+
--font-weight-bold: 700;
|
|
19
|
+
--line-height-tight: 1.2;
|
|
20
|
+
--line-height-normal: 1.4;
|
|
21
|
+
--line-height-relaxed: 1.6;
|
|
22
|
+
--letter-spacing-tight: -.02em;
|
|
23
|
+
--letter-spacing-normal: 0em;
|
|
24
|
+
--letter-spacing-wide: .04em;
|
|
25
|
+
--letter-spacing-wider: .08em;
|
|
26
|
+
--space-0: 0px;
|
|
27
|
+
--space-px: 1px;
|
|
28
|
+
--space-0-5: 2px;
|
|
29
|
+
--space-1: 4px;
|
|
30
|
+
--space-1-5: 6px;
|
|
31
|
+
--space-2: 8px;
|
|
32
|
+
--space-2-5: 10px;
|
|
33
|
+
--space-3: 12px;
|
|
34
|
+
--space-4: 16px;
|
|
35
|
+
--space-5: 20px;
|
|
36
|
+
--space-6: 24px;
|
|
37
|
+
--space-7: 28px;
|
|
38
|
+
--space-8: 32px;
|
|
39
|
+
--space-9: 36px;
|
|
40
|
+
--space-10: 40px;
|
|
41
|
+
--space-12: 48px;
|
|
42
|
+
--space-16: 64px;
|
|
43
|
+
--space-20: 80px;
|
|
44
|
+
--space-24: 96px;
|
|
45
|
+
--radius-none: 0px;
|
|
46
|
+
--radius-sm: 4px;
|
|
47
|
+
--radius-md: 6px;
|
|
48
|
+
--radius-lg: 8px;
|
|
49
|
+
--radius-xl: 10px;
|
|
50
|
+
--radius-2xl: 12px;
|
|
51
|
+
--radius-full: 9999px;
|
|
52
|
+
--border-width-base: 1px;
|
|
53
|
+
--border-width-medium: 1.5px;
|
|
54
|
+
--border-width-thick: 2px;
|
|
55
|
+
--duration-instant: 0s;
|
|
56
|
+
--duration-fast: .1s;
|
|
57
|
+
--duration-normal: .15s;
|
|
58
|
+
--duration-slow: .2s;
|
|
59
|
+
--duration-slower: .3s;
|
|
60
|
+
--easing-ease-out: cubic-bezier(0, 0, .2, 1);
|
|
61
|
+
--easing-ease-in: cubic-bezier(.4, 0, 1, 1);
|
|
62
|
+
--easing-standard: cubic-bezier(.4, 0, .2, 1);
|
|
63
|
+
--easing-spring: cubic-bezier(.34, 1.56, .64, 1);
|
|
64
|
+
--easing-linear: linear;
|
|
65
|
+
--z-below: -1;
|
|
66
|
+
--z-base: 0;
|
|
67
|
+
--z-raised: 10;
|
|
68
|
+
--z-dropdown: 100;
|
|
69
|
+
--z-sticky: 200;
|
|
70
|
+
--z-overlay: 300;
|
|
71
|
+
--z-modal: 400;
|
|
72
|
+
--z-popover: 500;
|
|
73
|
+
--z-toast: 600;
|
|
74
|
+
--z-tooltip: 700;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
:root, [data-theme="light"] {
|
|
78
|
+
color-scheme: light;
|
|
79
|
+
--color-bg-base: #f5f5f5;
|
|
80
|
+
--color-bg-elevated: #fff;
|
|
81
|
+
--color-bg-sunken: #ebebeb;
|
|
82
|
+
--color-bg-overlay: #ffffffeb;
|
|
83
|
+
--color-bg-sidebar: #f6f6f6f2;
|
|
84
|
+
--color-surface-1: #fff;
|
|
85
|
+
--color-surface-2: #f9f9f9;
|
|
86
|
+
--color-surface-3: #f4f4f4;
|
|
87
|
+
--color-surface-hover: #0000000a;
|
|
88
|
+
--color-surface-active: #00000012;
|
|
89
|
+
--color-surface-selected: #0078d41a;
|
|
90
|
+
--color-text-primary: #000000e0;
|
|
91
|
+
--color-text-secondary: #0000008c;
|
|
92
|
+
--color-text-tertiary: #0000005c;
|
|
93
|
+
--color-text-disabled: #0000003d;
|
|
94
|
+
--color-text-inverse: #fffffff2;
|
|
95
|
+
--color-text-on-accent: #fff;
|
|
96
|
+
--color-text-code: #0f766e;
|
|
97
|
+
--color-border-base: #0000001f;
|
|
98
|
+
--color-border-strong: #00000038;
|
|
99
|
+
--color-border-subtle: #0000000f;
|
|
100
|
+
--color-border-focus: var(--color-focus-ring);
|
|
101
|
+
--color-accent: #0078d4;
|
|
102
|
+
--color-accent-hover: #006bbf;
|
|
103
|
+
--color-accent-pressed: #005ea8;
|
|
104
|
+
--color-accent-tint: #0078d41a;
|
|
105
|
+
--color-accent-tint-hover: #0078d429;
|
|
106
|
+
--color-focus-ring: #0078d4cc;
|
|
107
|
+
--shadow-xs: 0 1px 2px 0 #00000014;
|
|
108
|
+
--shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000000f;
|
|
109
|
+
--shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000000f;
|
|
110
|
+
--shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000000f;
|
|
111
|
+
--shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000000f;
|
|
112
|
+
--shadow-popover: 0 8px 24px -4px #00000029, 0 2px 6px -2px #0000001a;
|
|
113
|
+
--shadow-sheet: 0 -4px 16px 0 #0000001f;
|
|
114
|
+
--shadow-inset: inset 0 1px 2px 0 #00000014;
|
|
115
|
+
--shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
|
|
116
|
+
--color-success-bg: #f0fdf4;
|
|
117
|
+
--color-success-border: #bbf7d0;
|
|
118
|
+
--color-success-text: #15803d;
|
|
119
|
+
--color-success-solid: #16a34a;
|
|
120
|
+
--color-warning-bg: #fffbeb;
|
|
121
|
+
--color-warning-border: #fde68a;
|
|
122
|
+
--color-warning-text: #92400e;
|
|
123
|
+
--color-warning-solid: #d97706;
|
|
124
|
+
--color-error-bg: #fef2f2;
|
|
125
|
+
--color-error-border: #fecaca;
|
|
126
|
+
--color-error-text: #991b1b;
|
|
127
|
+
--color-error-solid: #dc2626;
|
|
128
|
+
--color-info-bg: #eff6ff;
|
|
129
|
+
--color-info-border: #bfdbfe;
|
|
130
|
+
--color-info-text: #1d4ed8;
|
|
131
|
+
--color-info-solid: #2563eb;
|
|
132
|
+
--color-code-bg: #f6f8fa;
|
|
133
|
+
--color-code-border: #d0d7de;
|
|
134
|
+
--color-code-comment: #6e7781;
|
|
135
|
+
--color-code-keyword: #cf222e;
|
|
136
|
+
--color-code-string: #0a3069;
|
|
137
|
+
--color-code-number: #0550ae;
|
|
138
|
+
--color-code-function: #8250df;
|
|
139
|
+
--color-scrollbar-thumb: #0003;
|
|
140
|
+
--color-scrollbar-track: transparent;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@media (prefers-color-scheme: dark) {
|
|
144
|
+
:root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-theme="dark"] {
|
|
145
|
+
color-scheme: dark;
|
|
146
|
+
--color-bg-base: #1c1c1e;
|
|
147
|
+
--color-bg-elevated: #2c2c2e;
|
|
148
|
+
--color-bg-sunken: #141416;
|
|
149
|
+
--color-bg-overlay: #1e1e20eb;
|
|
150
|
+
--color-bg-sidebar: #1c1c1ef2;
|
|
151
|
+
--color-surface-1: #2c2c2e;
|
|
152
|
+
--color-surface-2: #3a3a3c;
|
|
153
|
+
--color-surface-3: #48484a;
|
|
154
|
+
--color-surface-hover: #ffffff0f;
|
|
155
|
+
--color-surface-active: #ffffff1a;
|
|
156
|
+
--color-surface-selected: #0a84ff29;
|
|
157
|
+
--color-text-primary: #ffffffeb;
|
|
158
|
+
--color-text-secondary: #ffffff8c;
|
|
159
|
+
--color-text-tertiary: #ffffff5c;
|
|
160
|
+
--color-text-disabled: #ffffff3d;
|
|
161
|
+
--color-text-inverse: #000000e0;
|
|
162
|
+
--color-text-on-accent: #fff;
|
|
163
|
+
--color-text-code: #2dd4bf;
|
|
164
|
+
--color-border-base: #ffffff1f;
|
|
165
|
+
--color-border-strong: #ffffff38;
|
|
166
|
+
--color-border-subtle: #ffffff0f;
|
|
167
|
+
--color-accent: #0a84ff;
|
|
168
|
+
--color-accent-hover: #0071e3;
|
|
169
|
+
--color-accent-pressed: #005bb5;
|
|
170
|
+
--color-accent-tint: #0a84ff1f;
|
|
171
|
+
--color-accent-tint-hover: #0a84ff33;
|
|
172
|
+
--color-focus-ring: #0a84ffe6;
|
|
173
|
+
--shadow-xs: 0 1px 2px 0 #0000004d;
|
|
174
|
+
--shadow-sm: 0 1px 3px 0 #0006, 0 1px 2px -1px #0000004d;
|
|
175
|
+
--shadow-md: 0 4px 6px -1px #0006, 0 2px 4px -2px #0000004d;
|
|
176
|
+
--shadow-lg: 0 10px 15px -3px #00000080, 0 4px 6px -4px #0000004d;
|
|
177
|
+
--shadow-xl: 0 20px 25px -5px #00000080, 0 8px 10px -6px #0000004d;
|
|
178
|
+
--shadow-popover: 0 8px 24px -4px #00000080, 0 2px 6px -2px #0006;
|
|
179
|
+
--shadow-sheet: 0 -4px 16px 0 #0006;
|
|
180
|
+
--shadow-inset: inset 0 1px 2px 0 #0000004d;
|
|
181
|
+
--shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
|
|
182
|
+
--color-success-bg: #16a34a1f;
|
|
183
|
+
--color-success-border: #16a34a4d;
|
|
184
|
+
--color-success-text: #4ade80;
|
|
185
|
+
--color-success-solid: #22c55e;
|
|
186
|
+
--color-warning-bg: #d977061f;
|
|
187
|
+
--color-warning-border: #d977064d;
|
|
188
|
+
--color-warning-text: #fbbf24;
|
|
189
|
+
--color-warning-solid: #f59e0b;
|
|
190
|
+
--color-error-bg: #dc26261f;
|
|
191
|
+
--color-error-border: #dc26264d;
|
|
192
|
+
--color-error-text: #f87171;
|
|
193
|
+
--color-error-solid: #ef4444;
|
|
194
|
+
--color-info-bg: #2563eb1f;
|
|
195
|
+
--color-info-border: #2563eb4d;
|
|
196
|
+
--color-info-text: #60a5fa;
|
|
197
|
+
--color-info-solid: #3b82f6;
|
|
198
|
+
--color-code-bg: #161b22;
|
|
199
|
+
--color-code-border: #ffffff1a;
|
|
200
|
+
--color-code-comment: #8b949e;
|
|
201
|
+
--color-code-keyword: #ff7b72;
|
|
202
|
+
--color-code-string: #a5d6ff;
|
|
203
|
+
--color-code-number: #79c0ff;
|
|
204
|
+
--color-code-function: #d2a8ff;
|
|
205
|
+
--color-scrollbar-thumb: #fff3;
|
|
206
|
+
--color-scrollbar-track: transparent;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
[data-theme="dark"] {
|
|
211
|
+
color-scheme: dark;
|
|
212
|
+
--color-bg-base: #1c1c1e;
|
|
213
|
+
--color-bg-elevated: #2c2c2e;
|
|
214
|
+
--color-bg-sunken: #141416;
|
|
215
|
+
--color-bg-overlay: #1e1e20eb;
|
|
216
|
+
--color-bg-sidebar: #1c1c1ef2;
|
|
217
|
+
--color-surface-1: #2c2c2e;
|
|
218
|
+
--color-surface-2: #3a3a3c;
|
|
219
|
+
--color-surface-3: #48484a;
|
|
220
|
+
--color-surface-hover: #ffffff0f;
|
|
221
|
+
--color-surface-active: #ffffff1a;
|
|
222
|
+
--color-surface-selected: #0a84ff29;
|
|
223
|
+
--color-text-primary: #ffffffeb;
|
|
224
|
+
--color-text-secondary: #ffffff8c;
|
|
225
|
+
--color-text-tertiary: #ffffff5c;
|
|
226
|
+
--color-text-disabled: #ffffff3d;
|
|
227
|
+
--color-text-inverse: #000000e0;
|
|
228
|
+
--color-text-on-accent: #fff;
|
|
229
|
+
--color-text-code: #2dd4bf;
|
|
230
|
+
--color-border-base: #ffffff1f;
|
|
231
|
+
--color-border-strong: #ffffff38;
|
|
232
|
+
--color-border-subtle: #ffffff0f;
|
|
233
|
+
--color-accent: #0a84ff;
|
|
234
|
+
--color-accent-hover: #0071e3;
|
|
235
|
+
--color-accent-pressed: #005bb5;
|
|
236
|
+
--color-accent-tint: #0a84ff1f;
|
|
237
|
+
--color-accent-tint-hover: #0a84ff33;
|
|
238
|
+
--color-focus-ring: #0a84ffe6;
|
|
239
|
+
--shadow-xs: 0 1px 2px 0 #0000004d;
|
|
240
|
+
--shadow-sm: 0 1px 3px 0 #0006, 0 1px 2px -1px #0000004d;
|
|
241
|
+
--shadow-md: 0 4px 6px -1px #0006, 0 2px 4px -2px #0000004d;
|
|
242
|
+
--shadow-lg: 0 10px 15px -3px #00000080, 0 4px 6px -4px #0000004d;
|
|
243
|
+
--shadow-xl: 0 20px 25px -5px #00000080, 0 8px 10px -6px #0000004d;
|
|
244
|
+
--shadow-popover: 0 8px 24px -4px #00000080, 0 2px 6px -2px #0006;
|
|
245
|
+
--shadow-sheet: 0 -4px 16px 0 #0006;
|
|
246
|
+
--shadow-inset: inset 0 1px 2px 0 #0000004d;
|
|
247
|
+
--shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
|
|
248
|
+
--color-success-bg: #16a34a1f;
|
|
249
|
+
--color-success-border: #16a34a4d;
|
|
250
|
+
--color-success-text: #4ade80;
|
|
251
|
+
--color-success-solid: #22c55e;
|
|
252
|
+
--color-warning-bg: #d977061f;
|
|
253
|
+
--color-warning-border: #d977064d;
|
|
254
|
+
--color-warning-text: #fbbf24;
|
|
255
|
+
--color-warning-solid: #f59e0b;
|
|
256
|
+
--color-error-bg: #dc26261f;
|
|
257
|
+
--color-error-border: #dc26264d;
|
|
258
|
+
--color-error-text: #f87171;
|
|
259
|
+
--color-error-solid: #ef4444;
|
|
260
|
+
--color-info-bg: #2563eb1f;
|
|
261
|
+
--color-info-border: #2563eb4d;
|
|
262
|
+
--color-info-text: #60a5fa;
|
|
263
|
+
--color-info-solid: #3b82f6;
|
|
264
|
+
--color-code-bg: #161b22;
|
|
265
|
+
--color-code-border: #ffffff1a;
|
|
266
|
+
--color-code-comment: #8b949e;
|
|
267
|
+
--color-code-keyword: #ff7b72;
|
|
268
|
+
--color-code-string: #a5d6ff;
|
|
269
|
+
--color-code-number: #79c0ff;
|
|
270
|
+
--color-code-function: #d2a8ff;
|
|
271
|
+
--color-scrollbar-thumb: #fff3;
|
|
272
|
+
--color-scrollbar-track: transparent;
|
|
273
|
+
}
|
|
274
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { Switch, SwitchProps, styles } from "./switch.js";
|
|
2
|
+
import { SwitchRoot, SwitchRootProps, SwitchThumb, SwitchThumbProps } from "./parts.js";
|
|
3
|
+
export { Switch, type SwitchProps, SwitchRoot, type SwitchRootProps, styles as SwitchStyles, SwitchThumb, type SwitchThumbProps };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as react from "react";
|
|
2
|
+
import { ComponentPropsWithoutRef } from "react";
|
|
3
|
+
import { Switch } from "@base-ui/react/switch";
|
|
4
|
+
|
|
5
|
+
//#region src/switch/parts.d.ts
|
|
6
|
+
type BaseRootProps = ComponentPropsWithoutRef<typeof Switch.Root>;
|
|
7
|
+
type BaseThumbProps = ComponentPropsWithoutRef<typeof Switch.Thumb>;
|
|
8
|
+
interface SwitchRootProps extends Omit<BaseRootProps, "className"> {
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
interface SwitchThumbProps extends Omit<BaseThumbProps, "className"> {
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
declare const SwitchRoot: react.ForwardRefExoticComponent<SwitchRootProps & react.RefAttributes<HTMLElement>>;
|
|
15
|
+
declare const SwitchThumb: react.ForwardRefExoticComponent<SwitchThumbProps & react.RefAttributes<HTMLSpanElement>>;
|
|
16
|
+
//#endregion
|
|
17
|
+
export { SwitchRoot, SwitchRootProps, SwitchThumb, SwitchThumbProps };
|
|
18
|
+
//# sourceMappingURL=parts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/switch/parts.tsx"],"mappings":";;;;;KAqBK,aAAA,GAAgB,wBAAA,QAAgC,MAAA,CAAW,IAAA;AAAA,KAC3D,cAAA,GAAiB,wBAAA,QAAgC,MAAA,CAAW,KAAA;AAAA,UAEhD,eAAA,SAAwB,IAAA,CAAK,aAAA;EAC5C,SAAA;AAAA;AAAA,UAEe,gBAAA,SAAyB,IAAA,CAAK,cAAA;EAC7C,SAAA;AAAA;AAAA,cAGW,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA;AAAA,cAOV,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,eAAA"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import switch_module_default from "./switch.module.js";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Switch } from "@base-ui/react/switch";
|
|
5
|
+
//#region src/switch/parts.tsx
|
|
6
|
+
/**
|
|
7
|
+
* Styled primitives for Switch.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* import { Switch } from '@base-ui/react/switch';
|
|
12
|
+
* import { SwitchRoot, SwitchThumb } from '@brijbyte/agentic-ui/switch';
|
|
13
|
+
*
|
|
14
|
+
* <label htmlFor="sw">
|
|
15
|
+
* <SwitchRoot id="sw" onCheckedChange={...}>
|
|
16
|
+
* <SwitchThumb />
|
|
17
|
+
* </SwitchRoot>
|
|
18
|
+
* Dark mode
|
|
19
|
+
* </label>
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
const SwitchRoot = forwardRef(function SwitchRoot({ className, ...props }, ref) {
|
|
23
|
+
return /* @__PURE__ */ jsx(Switch.Root, {
|
|
24
|
+
ref,
|
|
25
|
+
className: `${switch_module_default["thumb-track"]} ${className ?? ""}`,
|
|
26
|
+
...props
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
const SwitchThumb = forwardRef(function SwitchThumb({ className, ...props }, ref) {
|
|
30
|
+
return /* @__PURE__ */ jsx(Switch.Thumb, {
|
|
31
|
+
ref,
|
|
32
|
+
className: `${switch_module_default.thumb} ${className ?? ""}`,
|
|
33
|
+
...props
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
//#endregion
|
|
37
|
+
export { SwitchRoot, SwitchThumb };
|
|
38
|
+
|
|
39
|
+
//# sourceMappingURL=parts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.js","names":["BaseSwitch","styles"],"sources":["../../src/switch/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Switch.\n *\n * @example\n * ```tsx\n * import { Switch } from '@base-ui/react/switch';\n * import { SwitchRoot, SwitchThumb } from '@brijbyte/agentic-ui/switch';\n *\n * <label htmlFor=\"sw\">\n * <SwitchRoot id=\"sw\" onCheckedChange={...}>\n * <SwitchThumb />\n * </SwitchRoot>\n * Dark mode\n * </label>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport styles from \"./switch.module.css\";\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof BaseSwitch.Root>;\ntype BaseThumbProps = ComponentPropsWithoutRef<typeof BaseSwitch.Thumb>;\n\nexport interface SwitchRootProps extends Omit<BaseRootProps, \"className\"> {\n className?: string;\n}\nexport interface SwitchThumbProps extends Omit<BaseThumbProps, \"className\"> {\n className?: string;\n}\n\nexport const SwitchRoot = forwardRef<ComponentRef<typeof BaseSwitch.Root>, SwitchRootProps>(function SwitchRoot(\n { className, ...props },\n ref,\n) {\n return <BaseSwitch.Root ref={ref} className={`${styles[\"thumb-track\"]} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const SwitchThumb = forwardRef<ComponentRef<typeof BaseSwitch.Thumb>, SwitchThumbProps>(function SwitchThumb(\n { className, ...props },\n ref,\n) {\n return <BaseSwitch.Thumb ref={ref} className={`${styles.thumb} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,aAAa,WAAkE,SAAS,WACnG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,OAAW,MAAZ;EAAsB;EAAK,WAAW,GAAGC,sBAAO,eAAe,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACzG;AAEF,MAAa,cAAc,WAAoE,SAAS,YACtG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,OAAZ;EAAuB;EAAK,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACjG"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
@layer theme, base;
|
|
2
|
+
|
|
3
|
+
@layer components {
|
|
4
|
+
.root_3hDtBa {
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: var(--space-2);
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
user-select: none;
|
|
9
|
+
display: flex;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.root_3hDtBa[data-disabled] {
|
|
13
|
+
opacity: .44;
|
|
14
|
+
cursor: not-allowed;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.thumb-track_3hDtBa {
|
|
18
|
+
border-radius: var(--radius-full);
|
|
19
|
+
background-color: var(--color-surface-3);
|
|
20
|
+
border: var(--border-width-base) solid var(--color-border-base);
|
|
21
|
+
width: 36px;
|
|
22
|
+
height: 20px;
|
|
23
|
+
transition: background-color var(--duration-normal) var(--easing-standard),
|
|
24
|
+
border-color var(--duration-normal) var(--easing-standard),
|
|
25
|
+
box-shadow var(--duration-fast) var(--easing-standard);
|
|
26
|
+
outline: none;
|
|
27
|
+
flex-shrink: 0;
|
|
28
|
+
position: relative;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.thumb-track_3hDtBa:focus-visible {
|
|
32
|
+
box-shadow: var(--shadow-focus);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.thumb-track_3hDtBa[data-checked] {
|
|
36
|
+
background-color: var(--color-accent);
|
|
37
|
+
border-color: var(--color-accent);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.thumb-track_3hDtBa[data-checked]:hover {
|
|
41
|
+
background-color: var(--color-accent-hover);
|
|
42
|
+
border-color: var(--color-accent-hover);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.thumb_3hDtBa {
|
|
46
|
+
border-radius: var(--radius-full);
|
|
47
|
+
width: 14px;
|
|
48
|
+
height: 14px;
|
|
49
|
+
box-shadow: var(--shadow-xs);
|
|
50
|
+
transition: transform var(--duration-normal) var(--easing-spring);
|
|
51
|
+
background-color: #fff;
|
|
52
|
+
position: absolute;
|
|
53
|
+
top: 2px;
|
|
54
|
+
left: 2px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.thumb-track_3hDtBa[data-checked] .thumb_3hDtBa {
|
|
58
|
+
transform: translateX(16px);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.label_3hDtBa {
|
|
62
|
+
font-family: var(--font-mono);
|
|
63
|
+
font-size: var(--font-size-sm);
|
|
64
|
+
color: var(--color-text-primary);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@layer utilities;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import styles from "./switch.module.css";
|
|
4
|
+
|
|
5
|
+
//#region src/switch/switch.d.ts
|
|
6
|
+
interface SwitchProps {
|
|
7
|
+
checked?: boolean;
|
|
8
|
+
defaultChecked?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
required?: boolean;
|
|
11
|
+
name?: string;
|
|
12
|
+
value?: string;
|
|
13
|
+
/** Called when checked state changes. `eventDetails` is the base-ui event details object. */
|
|
14
|
+
onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;
|
|
15
|
+
children?: ReactNode;
|
|
16
|
+
id?: string;
|
|
17
|
+
className?: string;
|
|
18
|
+
}
|
|
19
|
+
declare function Switch({
|
|
20
|
+
children,
|
|
21
|
+
id,
|
|
22
|
+
className,
|
|
23
|
+
onCheckedChange,
|
|
24
|
+
...props
|
|
25
|
+
}: SwitchProps): react_jsx_runtime0.JSX.Element;
|
|
26
|
+
//#endregion
|
|
27
|
+
export { Switch, SwitchProps, styles };
|
|
28
|
+
//# sourceMappingURL=switch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.d.ts","names":[],"sources":["../../src/switch/switch.tsx"],"mappings":";;;;;UAKiB,WAAA;EACf,OAAA;EACA,cAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EACA,KAAA;EALA;EAOA,eAAA,IAAmB,OAAA,WAAkB,YAAA;EACrC,QAAA,GAAW,SAAA;EACX,EAAA;EACA,SAAA;AAAA;AAAA,iBAGc,MAAA,CAAA;EAAS,QAAA;EAAU,EAAA;EAAI,SAAA;EAAW,eAAA;EAAA,GAAoB;AAAA,GAAS,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import switch_module_default from "./switch.module.js";
|
|
2
|
+
import { useId } from "react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { Switch } from "@base-ui/react/switch";
|
|
5
|
+
//#region src/switch/switch.tsx
|
|
6
|
+
function Switch$1({ children, id, className, onCheckedChange, ...props }) {
|
|
7
|
+
const switchId = id ?? useId();
|
|
8
|
+
return /* @__PURE__ */ jsxs("label", {
|
|
9
|
+
className: `${switch_module_default.root} ${className ?? ""}`,
|
|
10
|
+
htmlFor: switchId,
|
|
11
|
+
children: [/* @__PURE__ */ jsx(Switch.Root, {
|
|
12
|
+
id: switchId,
|
|
13
|
+
className: switch_module_default["thumb-track"],
|
|
14
|
+
onCheckedChange,
|
|
15
|
+
...props,
|
|
16
|
+
children: /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.thumb })
|
|
17
|
+
}), children && /* @__PURE__ */ jsx("span", {
|
|
18
|
+
className: switch_module_default.label,
|
|
19
|
+
children
|
|
20
|
+
})]
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
//#endregion
|
|
24
|
+
export { Switch$1 as Switch };
|
|
25
|
+
|
|
26
|
+
//# sourceMappingURL=switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.js","names":["Switch","styles","BaseSwitch"],"sources":["../../src/switch/switch.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport styles from \"./switch.module.css\";\n\nexport interface SwitchProps {\n checked?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n required?: boolean;\n name?: string;\n value?: string;\n /** Called when checked state changes. `eventDetails` is the base-ui event details object. */\n onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;\n children?: ReactNode;\n id?: string;\n className?: string;\n}\n\nexport function Switch({ children, id, className, onCheckedChange, ...props }: SwitchProps) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const switchId = id ?? useId();\n\n return (\n <label className={`${styles.root} ${className ?? \"\"}`} htmlFor={switchId}>\n <BaseSwitch.Root id={switchId} className={styles[\"thumb-track\"]} onCheckedChange={onCheckedChange as never} {...props}>\n <BaseSwitch.Thumb className={styles.thumb} />\n </BaseSwitch.Root>\n {children && <span className={styles.label}>{children}</span>}\n </label>\n );\n}\nexport { styles as SwitchStyles };\n"],"mappings":";;;;;AAmBA,SAAgBA,SAAO,EAAE,UAAU,IAAI,WAAW,iBAAiB,GAAG,SAAsB;CAE1F,MAAM,WAAW,MAAM,OAAO;AAE9B,QACE,qBAAC,SAAD;EAAO,WAAW,GAAGC,sBAAO,KAAK,GAAG,aAAa;EAAM,SAAS;YAAhE,CACE,oBAACC,OAAW,MAAZ;GAAiB,IAAI;GAAU,WAAWD,sBAAO;GAAiC;GAA0B,GAAI;aAC9G,oBAACC,OAAW,OAAZ,EAAkB,WAAWD,sBAAO,OAAS,CAAA;GAC7B,CAAA,EACjB,YAAY,oBAAC,QAAD;GAAM,WAAWA,sBAAO;GAAQ;GAAgB,CAAA,CACvD"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
//#region src/switch/switch.module.css
|
|
2
|
+
var switch_module_default = {
|
|
3
|
+
"label": "label_3hDtBa",
|
|
4
|
+
"root": "root_3hDtBa",
|
|
5
|
+
"thumb": "thumb_3hDtBa",
|
|
6
|
+
"thumb-track": "thumb-track_3hDtBa"
|
|
7
|
+
};
|
|
8
|
+
//#endregion
|
|
9
|
+
export { switch_module_default as default };
|
|
10
|
+
|
|
11
|
+
//# sourceMappingURL=switch.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.module.js","names":[],"sources":["../../src/switch/switch.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n .root {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n cursor: pointer;\n user-select: none;\n }\n\n .root[data-disabled] {\n opacity: 0.44;\n cursor: not-allowed;\n }\n\n .thumb-track {\n position: relative;\n width: 36px;\n height: 20px;\n border-radius: var(--radius-full);\n background-color: var(--color-surface-3);\n border: var(--border-width-base) solid var(--color-border-base);\n transition:\n background-color var(--duration-normal) var(--easing-standard),\n border-color var(--duration-normal) var(--easing-standard),\n box-shadow var(--duration-fast) var(--easing-standard);\n outline: none;\n flex-shrink: 0;\n }\n\n .thumb-track:focus-visible {\n box-shadow: var(--shadow-focus);\n }\n\n .thumb-track[data-checked] {\n background-color: var(--color-accent);\n border-color: var(--color-accent);\n }\n\n .thumb-track[data-checked]:hover {\n background-color: var(--color-accent-hover);\n border-color: var(--color-accent-hover);\n }\n\n .thumb {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 14px;\n height: 14px;\n border-radius: var(--radius-full);\n background-color: #ffffff;\n box-shadow: var(--shadow-xs);\n transition: transform var(--duration-normal) var(--easing-spring);\n }\n\n .thumb-track[data-checked] .thumb {\n transform: translateX(16px);\n }\n\n .label {\n font-family: var(--font-mono);\n font-size: var(--font-size-sm);\n color: var(--color-text-primary);\n }\n}\n"],"mappings":";AAQA,IAAA,wBAAe;CAAC,SAAK;CAAA,QAAA;CAAA,SAAA;CAAA,eAAA;CAAA"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { TabItem, Tabs, TabsProps, styles } from "./tabs.js";
|
|
2
|
+
import { TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsTab, TabsTabProps } from "./parts.js";
|
|
3
|
+
export { type TabItem, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, styles as TabsStyles, TabsTab, type TabsTabProps };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as react from "react";
|
|
2
|
+
import { ComponentPropsWithoutRef } from "react";
|
|
3
|
+
import { Tabs } from "@base-ui/react/tabs";
|
|
4
|
+
|
|
5
|
+
//#region src/tabs/parts.d.ts
|
|
6
|
+
type BaseListProps = ComponentPropsWithoutRef<typeof Tabs.List>;
|
|
7
|
+
type BaseTabProps = ComponentPropsWithoutRef<typeof Tabs.Tab>;
|
|
8
|
+
type BasePanelProps = ComponentPropsWithoutRef<typeof Tabs.Panel>;
|
|
9
|
+
interface TabsListProps extends Omit<BaseListProps, "className"> {
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
interface TabsTabProps extends Omit<BaseTabProps, "className"> {
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
interface TabsPanelProps extends Omit<BasePanelProps, "className"> {
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
declare const TabsList: react.ForwardRefExoticComponent<TabsListProps & react.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
declare const TabsTab: react.ForwardRefExoticComponent<TabsTabProps & react.RefAttributes<HTMLElement>>;
|
|
20
|
+
declare const TabsPanel: react.ForwardRefExoticComponent<TabsPanelProps & react.RefAttributes<HTMLDivElement>>;
|
|
21
|
+
//#endregion
|
|
22
|
+
export { TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsTab, TabsTabProps };
|
|
23
|
+
//# sourceMappingURL=parts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/tabs/parts.tsx"],"mappings":";;;;;KAuBK,aAAA,GAAgB,wBAAA,QAAgC,IAAA,CAAS,IAAA;AAAA,KACzD,YAAA,GAAe,wBAAA,QAAgC,IAAA,CAAS,GAAA;AAAA,KACxD,cAAA,GAAiB,wBAAA,QAAgC,IAAA,CAAS,KAAA;AAAA,UAE9C,aAAA,SAAsB,IAAA,CAAK,aAAA;EAC1C,SAAA;AAAA;AAAA,UAEe,YAAA,SAAqB,IAAA,CAAK,YAAA;EACzC,SAAA;AAAA;AAAA,UAEe,cAAA,SAAuB,IAAA,CAAK,cAAA;EAC3C,SAAA;AAAA;AAAA,cAGW,QAAA,EAAQ,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAIR,OAAA,EAAO,KAAA,CAAA,yBAAA,CAAA,YAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA;AAAA,cAIP,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import tabs_module_default from "./tabs.module.js";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Tabs } from "@base-ui/react/tabs";
|
|
5
|
+
//#region src/tabs/parts.tsx
|
|
6
|
+
/**
|
|
7
|
+
* Styled primitives for Tabs.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* import { Tabs } from '@base-ui/react/tabs';
|
|
12
|
+
* import { TabsList, TabsTab, TabsPanel } from '@brijbyte/agentic-ui/tabs';
|
|
13
|
+
*
|
|
14
|
+
* <Tabs.Root defaultValue="a">
|
|
15
|
+
* <TabsList>
|
|
16
|
+
* <TabsTab value="a">Tab A</TabsTab>
|
|
17
|
+
* <TabsTab value="b">Tab B</TabsTab>
|
|
18
|
+
* </TabsList>
|
|
19
|
+
* <TabsPanel value="a">Content A</TabsPanel>
|
|
20
|
+
* <TabsPanel value="b">Content B</TabsPanel>
|
|
21
|
+
* </Tabs.Root>
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
const TabsList = forwardRef(function TabsList({ className, ...props }, ref) {
|
|
25
|
+
return /* @__PURE__ */ jsx(Tabs.List, {
|
|
26
|
+
ref,
|
|
27
|
+
className: `${tabs_module_default.list} ${className ?? ""}`,
|
|
28
|
+
...props
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
const TabsTab = forwardRef(function TabsTab({ className, ...props }, ref) {
|
|
32
|
+
return /* @__PURE__ */ jsx(Tabs.Tab, {
|
|
33
|
+
ref,
|
|
34
|
+
className: `${tabs_module_default.tab} ${className ?? ""}`,
|
|
35
|
+
...props
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
const TabsPanel = forwardRef(function TabsPanel({ className, ...props }, ref) {
|
|
39
|
+
return /* @__PURE__ */ jsx(Tabs.Panel, {
|
|
40
|
+
ref,
|
|
41
|
+
className: `${tabs_module_default.panel} ${className ?? ""}`,
|
|
42
|
+
...props
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
//#endregion
|
|
46
|
+
export { TabsList, TabsPanel, TabsTab };
|
|
47
|
+
|
|
48
|
+
//# sourceMappingURL=parts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.js","names":["BaseTabs","styles"],"sources":["../../src/tabs/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Tabs.\n *\n * @example\n * ```tsx\n * import { Tabs } from '@base-ui/react/tabs';\n * import { TabsList, TabsTab, TabsPanel } from '@brijbyte/agentic-ui/tabs';\n *\n * <Tabs.Root defaultValue=\"a\">\n * <TabsList>\n * <TabsTab value=\"a\">Tab A</TabsTab>\n * <TabsTab value=\"b\">Tab B</TabsTab>\n * </TabsList>\n * <TabsPanel value=\"a\">Content A</TabsPanel>\n * <TabsPanel value=\"b\">Content B</TabsPanel>\n * </Tabs.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport styles from \"./tabs.module.css\";\n\ntype BaseListProps = ComponentPropsWithoutRef<typeof BaseTabs.List>;\ntype BaseTabProps = ComponentPropsWithoutRef<typeof BaseTabs.Tab>;\ntype BasePanelProps = ComponentPropsWithoutRef<typeof BaseTabs.Panel>;\n\nexport interface TabsListProps extends Omit<BaseListProps, \"className\"> {\n className?: string;\n}\nexport interface TabsTabProps extends Omit<BaseTabProps, \"className\"> {\n className?: string;\n}\nexport interface TabsPanelProps extends Omit<BasePanelProps, \"className\"> {\n className?: string;\n}\n\nexport const TabsList = forwardRef<ComponentRef<typeof BaseTabs.List>, TabsListProps>(function TabsList({ className, ...props }, ref) {\n return <BaseTabs.List ref={ref} className={`${styles.list} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const TabsTab = forwardRef<ComponentRef<typeof BaseTabs.Tab>, TabsTabProps>(function TabsTab({ className, ...props }, ref) {\n return <BaseTabs.Tab ref={ref} className={`${styles.tab} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const TabsPanel = forwardRef<ComponentRef<typeof BaseTabs.Panel>, TabsPanelProps>(function TabsPanel({ className, ...props }, ref) {\n return <BaseTabs.Panel ref={ref} className={`${styles.panel} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAa,WAAW,WAA8D,SAAS,SAAS,EAAE,WAAW,GAAG,SAAS,KAAK;AACpI,QAAO,oBAACA,KAAS,MAAV;EAAoB;EAAK,WAAW,GAAGC,oBAAO,KAAK,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC7F;AAEF,MAAa,UAAU,WAA4D,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAS,KAAK;AAChI,QAAO,oBAACD,KAAS,KAAV;EAAmB;EAAK,WAAW,GAAGC,oBAAO,IAAI,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC3F;AAEF,MAAa,YAAY,WAAgE,SAAS,UAAU,EAAE,WAAW,GAAG,SAAS,KAAK;AACxI,QAAO,oBAACD,KAAS,OAAV;EAAqB;EAAK,WAAW,GAAGC,oBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC/F"}
|