@techv/design-system 0.1.0

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 (19) hide show
  1. package/dist/cjs/index.js +14 -0
  2. package/dist/cjs/index.js.map +1 -0
  3. package/dist/cjs/tokens/dist/esm/index.js +164 -0
  4. package/dist/cjs/tokens/dist/esm/index.js.map +1 -0
  5. package/dist/cjs/ui/dist/esm/components/Button/Button.js +21 -0
  6. package/dist/cjs/ui/dist/esm/components/Button/Button.js.map +1 -0
  7. package/dist/cjs/ui/dist/esm/components/Button/Button.styles.js +168 -0
  8. package/dist/cjs/ui/dist/esm/components/Button/Button.styles.js.map +1 -0
  9. package/dist/esm/index.js +3 -0
  10. package/dist/esm/index.js.map +1 -0
  11. package/dist/esm/tokens/dist/esm/index.js +159 -0
  12. package/dist/esm/tokens/dist/esm/index.js.map +1 -0
  13. package/dist/esm/ui/dist/esm/components/Button/Button.js +18 -0
  14. package/dist/esm/ui/dist/esm/components/Button/Button.js.map +1 -0
  15. package/dist/esm/ui/dist/esm/components/Button/Button.styles.js +164 -0
  16. package/dist/esm/ui/dist/esm/components/Button/Button.styles.js.map +1 -0
  17. package/dist/styles.css +142 -0
  18. package/dist/types/index.d.ts +2 -0
  19. package/package.json +53 -0
package/dist/cjs/index.js ADDED
@@ -0,0 +1,14 @@
1
+ 'use strict';
2
+
3
+ var index = require('./tokens/dist/esm/index.js');
4
+ var Button = require('./ui/dist/esm/components/Button/Button.js');
5
+
6
+
7
+
8
+ exports.colors = index.colors;
9
+ exports.radii = index.radii;
10
+ exports.spacing = index.spacing;
11
+ exports.tokens = index.tokens;
12
+ exports.Button = Button.Button;
13
+ exports.IconButton = Button.IconButton;
14
+ //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
package/dist/cjs/tokens/dist/esm/index.js ADDED
@@ -0,0 +1,164 @@
1
+ 'use strict';
2
+
3
+ const tokens = {
4
+ color: {
5
+ brand: {
6
+ 50: '#EEF2FF',
7
+ 100: '#C7D2FE',
8
+ 300: '#A5B4FC',
9
+ 500: '#4F46E5',
10
+ 600: '#4338CA',
11
+ 700: '#3730A3',
12
+ 900: '#312E81',
13
+ },
14
+ success: { 50: '#ECFDF5', 500: '#10B981' },
15
+ danger: { 50: '#FEF2F2', 500: '#EF4444' },
16
+ warning: { 50: '#FFFBEB', 500: '#F59E0B' },
17
+ info: { 50: '#EFF6FF', 500: '#3B82F6' },
18
+ gray: {
19
+ 50: '#F9FAFB',
20
+ 100: '#F3F4F6',
21
+ 200: '#E5E7EB',
22
+ 300: '#D1D5DB',
23
+ 400: '#9CA3AF',
24
+ 500: '#6B7280',
25
+ 600: '#4B5563',
26
+ 700: '#374151',
27
+ 800: '#1F2937',
28
+ 900: '#111827',
29
+ },
30
+ },
31
+ semantic: {
32
+ surface: '#FFFFFF',
33
+ bg: '#F9FAFB',
34
+ textPrimary: '#111827',
35
+ textSecondary: '#6B7280',
36
+ textDisabled: '#D1D5DB',
37
+ border: '#E5E7EB',
38
+ borderStrong: '#D1D5DB',
39
+ focusRing: '#4F46E5',
40
+ },
41
+ space: {
42
+ '2xs': 2,
43
+ xs: 4,
44
+ sm: 8,
45
+ md: 16,
46
+ lg: 24,
47
+ xl: 32,
48
+ '2xl': 48,
49
+ '3xl': 64,
50
+ },
51
+ radius: {
52
+ none: 0,
53
+ xs: 2,
54
+ sm: 4,
55
+ md: 6,
56
+ lg: 8,
57
+ xl: 12,
58
+ '2xl': 16,
59
+ full: 9999,
60
+ },
61
+ shadow: {
62
+ none: 'none',
63
+ xs: '0 1px 2px rgba(0,0,0,0.05)',
64
+ sm: '0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)',
65
+ md: '0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)',
66
+ lg: '0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)',
67
+ xl: '0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04)',
68
+ },
69
+ duration: {
70
+ instant: 50,
71
+ fast: 100,
72
+ normal: 200,
73
+ slow: 300,
74
+ deliberate: 500,
75
+ },
76
+ ease: {
77
+ standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
78
+ decelerate: 'cubic-bezier(0, 0, 0.2, 1)',
79
+ accelerate: 'cubic-bezier(0.4, 0, 1, 1)',
80
+ spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
81
+ },
82
+ font: {
83
+ display: 'Plus Jakarta Sans',
84
+ text: 'Inter',
85
+ mono: 'JetBrains Mono',
86
+ },
87
+ fontSize: {
88
+ h1: '36px',
89
+ h2: '28px',
90
+ h3: '22px',
91
+ h4: '18px',
92
+ h5: '16px',
93
+ bodyLg: '16px',
94
+ bodyMd: '14px',
95
+ caption: '12px',
96
+ code: '12px',
97
+ },
98
+ component: {
99
+ buttonHeight: { xs: '28px', sm: '32px', md: '36px', lg: '42px', xl: '50px' },
100
+ radiusButton: '8px',
101
+ radiusCard: '12px',
102
+ radiusModal: '16px',
103
+ radiusBadge: '9999px',
104
+ focusRingWidth: '3px',
105
+ focusRingOffset: '2px',
106
+ },
107
+ };
108
+ // Flat named exports for backwards-compat convenience
109
+ const colors = {
110
+ brand500: tokens.color.brand[500],
111
+ brand600: tokens.color.brand[600],
112
+ brand700: tokens.color.brand[700],
113
+ brand50: tokens.color.brand[50],
114
+ danger500: tokens.color.danger[500],
115
+ danger50: tokens.color.danger[50],
116
+ success500: tokens.color.success[500],
117
+ success50: tokens.color.success[50],
118
+ warning500: tokens.color.warning[500],
119
+ warning50: tokens.color.warning[50],
120
+ gray50: tokens.color.gray[50],
121
+ gray100: tokens.color.gray[100],
122
+ gray200: tokens.color.gray[200],
123
+ gray300: tokens.color.gray[300],
124
+ gray400: tokens.color.gray[400],
125
+ gray500: tokens.color.gray[500],
126
+ gray600: tokens.color.gray[600],
127
+ gray700: tokens.color.gray[700],
128
+ gray800: tokens.color.gray[800],
129
+ gray900: tokens.color.gray[900],
130
+ surface: tokens.semantic.surface,
131
+ bg: tokens.semantic.bg,
132
+ textPrimary: tokens.semantic.textPrimary,
133
+ textSecondary: tokens.semantic.textSecondary,
134
+ textDisabled: tokens.semantic.textDisabled,
135
+ border: tokens.semantic.border,
136
+ borderStrong: tokens.semantic.borderStrong,
137
+ focusRing: tokens.semantic.focusRing,
138
+ };
139
+ const spacing = {
140
+ '2xs': '2px',
141
+ xs: '4px',
142
+ sm: '8px',
143
+ md: '16px',
144
+ lg: '24px',
145
+ xl: '32px',
146
+ '2xl': '48px',
147
+ '3xl': '64px',
148
+ };
149
+ const radii = {
150
+ none: '0',
151
+ xs: '2px',
152
+ sm: '4px',
153
+ md: '6px',
154
+ lg: '8px',
155
+ xl: '12px',
156
+ '2xl': '16px',
157
+ full: '9999px',
158
+ };
159
+
160
+ exports.colors = colors;
161
+ exports.radii = radii;
162
+ exports.spacing = spacing;
163
+ exports.tokens = tokens;
164
+ //# sourceMappingURL=index.js.map
package/dist/cjs/tokens/dist/esm/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../../../../tokens/dist/esm/index.js"],"sourcesContent":["const tokens = {\n color: {\n brand: {\n 50: '#EEF2FF',\n 100: '#C7D2FE',\n 300: '#A5B4FC',\n 500: '#4F46E5',\n 600: '#4338CA',\n 700: '#3730A3',\n 900: '#312E81',\n },\n success: { 50: '#ECFDF5', 500: '#10B981' },\n danger: { 50: '#FEF2F2', 500: '#EF4444' },\n warning: { 50: '#FFFBEB', 500: '#F59E0B' },\n info: { 50: '#EFF6FF', 500: '#3B82F6' },\n gray: {\n 50: '#F9FAFB',\n 100: '#F3F4F6',\n 200: '#E5E7EB',\n 300: '#D1D5DB',\n 400: '#9CA3AF',\n 500: '#6B7280',\n 600: '#4B5563',\n 700: '#374151',\n 800: '#1F2937',\n 900: '#111827',\n },\n },\n semantic: {\n surface: '#FFFFFF',\n bg: '#F9FAFB',\n textPrimary: '#111827',\n textSecondary: '#6B7280',\n textDisabled: '#D1D5DB',\n border: '#E5E7EB',\n borderStrong: '#D1D5DB',\n focusRing: '#4F46E5',\n },\n space: {\n '2xs': 2,\n xs: 4,\n sm: 8,\n md: 16,\n lg: 24,\n xl: 32,\n '2xl': 48,\n '3xl': 64,\n },\n radius: {\n none: 0,\n xs: 2,\n sm: 4,\n md: 6,\n lg: 8,\n xl: 12,\n '2xl': 16,\n full: 9999,\n },\n shadow: {\n none: 'none',\n xs: '0 1px 2px rgba(0,0,0,0.05)',\n sm: '0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)',\n md: '0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)',\n lg: '0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)',\n xl: '0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04)',\n },\n duration: {\n instant: 50,\n fast: 100,\n normal: 200,\n slow: 300,\n deliberate: 500,\n },\n ease: {\n standard: 'cubic-bezier(0.4, 0, 0.2, 1)',\n decelerate: 'cubic-bezier(0, 0, 0.2, 1)',\n accelerate: 'cubic-bezier(0.4, 0, 1, 1)',\n spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n },\n font: {\n display: 'Plus Jakarta Sans',\n text: 'Inter',\n mono: 'JetBrains Mono',\n },\n fontSize: {\n h1: '36px',\n h2: '28px',\n h3: '22px',\n h4: '18px',\n h5: '16px',\n bodyLg: '16px',\n bodyMd: '14px',\n caption: '12px',\n code: '12px',\n },\n component: {\n buttonHeight: { xs: '28px', sm: '32px', md: '36px', lg: '42px', xl: '50px' },\n radiusButton: '8px',\n radiusCard: '12px',\n radiusModal: '16px',\n radiusBadge: '9999px',\n focusRingWidth: '3px',\n focusRingOffset: '2px',\n },\n};\n// Flat named exports for backwards-compat convenience\nconst colors = {\n brand500: tokens.color.brand[500],\n brand600: tokens.color.brand[600],\n brand700: tokens.color.brand[700],\n brand50: tokens.color.brand[50],\n danger500: tokens.color.danger[500],\n danger50: tokens.color.danger[50],\n success500: tokens.color.success[500],\n success50: tokens.color.success[50],\n warning500: tokens.color.warning[500],\n warning50: tokens.color.warning[50],\n gray50: tokens.color.gray[50],\n gray100: tokens.color.gray[100],\n gray200: tokens.color.gray[200],\n gray300: tokens.color.gray[300],\n gray400: tokens.color.gray[400],\n gray500: tokens.color.gray[500],\n gray600: tokens.color.gray[600],\n gray700: tokens.color.gray[700],\n gray800: tokens.color.gray[800],\n gray900: tokens.color.gray[900],\n surface: tokens.semantic.surface,\n bg: tokens.semantic.bg,\n textPrimary: tokens.semantic.textPrimary,\n textSecondary: tokens.semantic.textSecondary,\n textDisabled: tokens.semantic.textDisabled,\n border: tokens.semantic.border,\n borderStrong: tokens.semantic.borderStrong,\n focusRing: tokens.semantic.focusRing,\n};\nconst spacing = {\n '2xs': '2px',\n xs: '4px',\n sm: '8px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n '2xl': '48px',\n '3xl': '64px',\n};\nconst radii = {\n none: '0',\n xs: '2px',\n sm: '4px',\n md: '6px',\n lg: '8px',\n xl: '12px',\n '2xl': '16px',\n full: '9999px',\n};\n\nexport { colors, radii, spacing, tokens };\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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"}
package/dist/cjs/ui/dist/esm/components/Button/Button.js ADDED
@@ -0,0 +1,21 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var react = require('react');
5
+ var Button_styles = require('./Button.styles.js');
6
+
7
+ function Spinner() {
8
+ return (jsxRuntime.jsxs(Button_styles.StyledSpinner, { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeDasharray: "31.416", strokeDashoffset: "10", opacity: "0.3" }), jsxRuntime.jsx("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })] }));
9
+ }
10
+ const Button = react.forwardRef(({ variant = 'solid', color = 'brand', size = 'md', isLoading = false, children, leftIcon, rightIcon, disabled, ...rest }, ref) => {
11
+ return (jsxRuntime.jsxs(Button_styles.StyledButton, { ref: ref, "$variant": variant, "$color": color, "$size": size, "$isLoading": isLoading, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...rest, children: [isLoading ? jsxRuntime.jsx(Spinner, {}) : leftIcon, jsxRuntime.jsx("span", { children: children }), !isLoading && rightIcon] }));
12
+ });
13
+ Button.displayName = 'Button';
14
+ const IconButton = react.forwardRef(({ icon, 'aria-label': ariaLabel, size = 'md', variant = 'solid', color = 'brand', isLoading = false, disabled, ...rest }, ref) => {
15
+ return (jsxRuntime.jsx(Button_styles.StyledIconButton, { ref: ref, "$variant": variant, "$color": color, "$size": size, "$isLoading": isLoading, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, "aria-label": ariaLabel, ...rest, children: isLoading ? jsxRuntime.jsx(Spinner, {}) : icon }));
16
+ });
17
+ IconButton.displayName = 'IconButton';
18
+
19
+ exports.Button = Button;
20
+ exports.IconButton = IconButton;
21
+ //# sourceMappingURL=Button.js.map
package/dist/cjs/ui/dist/esm/components/Button/Button.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.js","sources":["../../../../../../../../ui/dist/esm/components/Button/Button.js"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef } from 'react';\nimport { StyledButton, StyledIconButton, StyledSpinner } from './Button.styles.js';\n\nfunction Spinner() {\n return (jsxs(StyledSpinner, { viewBox: \"0 0 24 24\", fill: \"none\", \"aria-hidden\": \"true\", focusable: \"false\", children: [jsx(\"circle\", { cx: \"12\", cy: \"12\", r: \"10\", stroke: \"currentColor\", strokeWidth: \"3\", strokeLinecap: \"round\", strokeDasharray: \"31.416\", strokeDashoffset: \"10\", opacity: \"0.3\" }), jsx(\"path\", { d: \"M12 2a10 10 0 0 1 10 10\", stroke: \"currentColor\", strokeWidth: \"3\", strokeLinecap: \"round\" })] }));\n}\nconst Button = forwardRef(({ variant = 'solid', color = 'brand', size = 'md', isLoading = false, children, leftIcon, rightIcon, disabled, ...rest }, ref) => {\n return (jsxs(StyledButton, { ref: ref, \"$variant\": variant, \"$color\": color, \"$size\": size, \"$isLoading\": isLoading, disabled: disabled || isLoading, \"aria-busy\": isLoading || undefined, ...rest, children: [isLoading ? jsx(Spinner, {}) : leftIcon, jsx(\"span\", { children: children }), !isLoading && rightIcon] }));\n});\nButton.displayName = 'Button';\nconst IconButton = forwardRef(({ icon, 'aria-label': ariaLabel, size = 'md', variant = 'solid', color = 'brand', isLoading = false, disabled, ...rest }, ref) => {\n return (jsx(StyledIconButton, { ref: ref, \"$variant\": variant, \"$color\": color, \"$size\": size, \"$isLoading\": isLoading, disabled: disabled || isLoading, \"aria-busy\": isLoading || undefined, \"aria-label\": ariaLabel, ...rest, children: isLoading ? jsx(Spinner, {}) : icon }));\n});\nIconButton.displayName = 'IconButton';\n\nexport { Button, IconButton };\n//# sourceMappingURL=Button.js.map\n"],"names":["jsxs","StyledSpinner","jsx","forwardRef","StyledButton","StyledIconButton"],"mappings":";;;;;;AAIA,SAAS,OAAO,GAAG;AACnB,IAAI,QAAQA,eAAI,CAACC,2BAAa,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,CAACC,cAAG,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,EAAE,aAAa,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAEA,cAAG,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,yBAAyB,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC;AACpa;AACK,MAAC,MAAM,GAAGC,gBAAU,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,GAAG,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAK;AAC7J,IAAI,QAAQH,eAAI,CAACI,0BAAY,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAAE,WAAW,EAAE,SAAS,IAAI,SAAS,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,CAAC,SAAS,GAAGF,cAAG,CAAC,OAAO,EAAE,EAAE,CAAC,GAAG,QAAQ,EAAEA,cAAG,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,SAAS,IAAI,SAAS,CAAC,EAAE,CAAC;AAC5T,CAAC;AACD,MAAM,CAAC,WAAW,GAAG,QAAQ;AACxB,MAAC,UAAU,GAAGC,gBAAU,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,SAAS,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAK;AACjK,IAAI,QAAQD,cAAG,CAACG,8BAAgB,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAAE,WAAW,EAAE,SAAS,IAAI,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,SAAS,GAAGH,cAAG,CAAC,OAAO,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC;AACpR,CAAC;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;;;;;"}
package/dist/cjs/ui/dist/esm/components/Button/Button.styles.js ADDED
@@ -0,0 +1,168 @@
1
+ 'use strict';
2
+
3
+ var styled = require('styled-components');
4
+
5
+ const colorMap = {
6
+ brand: {
7
+ bg: 'var(--color-brand-500)',
8
+ bgHover: 'var(--color-brand-600)',
9
+ bgPressed: 'var(--color-brand-700)',
10
+ tint: 'var(--color-brand-50)',
11
+ tintHover: 'var(--color-brand-100)',
12
+ tintText: 'var(--color-brand-700)',
13
+ border: 'var(--color-brand-500)',
14
+ text: 'var(--color-brand-500)',
15
+ },
16
+ danger: {
17
+ bg: 'var(--color-danger-500)',
18
+ bgHover: 'var(--color-danger-600)',
19
+ bgPressed: 'var(--color-danger-700)',
20
+ tint: 'var(--color-danger-50)',
21
+ tintHover: 'var(--color-danger-200)',
22
+ tintText: 'var(--color-danger-700)',
23
+ border: 'var(--color-danger-500)',
24
+ text: 'var(--color-danger-500)',
25
+ },
26
+ success: {
27
+ bg: 'var(--color-success-500)',
28
+ bgHover: 'var(--color-success-600)',
29
+ bgPressed: 'var(--color-success-700)',
30
+ tint: 'var(--color-success-50)',
31
+ tintHover: 'var(--color-success-200)',
32
+ tintText: 'var(--color-success-700)',
33
+ border: 'var(--color-success-500)',
34
+ text: 'var(--color-success-500)',
35
+ },
36
+ warning: {
37
+ bg: 'var(--color-warning-500)',
38
+ bgHover: 'var(--color-warning-600)',
39
+ bgPressed: 'var(--color-warning-700)',
40
+ tint: 'var(--color-warning-50)',
41
+ tintHover: 'var(--color-warning-200)',
42
+ tintText: 'var(--color-warning-700)',
43
+ border: 'var(--color-warning-500)',
44
+ text: 'var(--color-warning-600)',
45
+ },
46
+ neutral: {
47
+ bg: 'var(--color-gray-600)',
48
+ bgHover: 'var(--color-gray-700)',
49
+ bgPressed: 'var(--color-gray-800)',
50
+ tint: 'var(--color-gray-100)',
51
+ tintHover: 'var(--color-gray-200)',
52
+ tintText: 'var(--color-gray-700)',
53
+ border: 'var(--color-gray-500)',
54
+ text: 'var(--color-gray-600)',
55
+ },
56
+ };
57
+ const sizeMap = {
58
+ xs: { height: '28px', padding: '0 10px', fontSize: '12px' },
59
+ sm: { height: '32px', padding: '0 12px', fontSize: '13px' },
60
+ md: { height: '36px', padding: '0 14px', fontSize: '13px' },
61
+ lg: { height: '42px', padding: '0 18px', fontSize: '15px' },
62
+ xl: { height: '50px', padding: '0 24px', fontSize: '16px' },
63
+ };
64
+ function variantStyles(c, variant) {
65
+ switch (variant) {
66
+ case 'solid':
67
+ return styled.css `
68
+ background: ${c.bg};
69
+ color: var(--color-white);
70
+ border: 1px solid transparent;
71
+ &:hover:not(:disabled) {
72
+ background: ${c.bgHover};
73
+ }
74
+ `;
75
+ case 'outline':
76
+ return styled.css `
77
+ background: transparent;
78
+ border: 1px solid ${c.border};
79
+ color: ${c.text};
80
+ &:hover:not(:disabled) {
81
+ background: ${c.tint};
82
+ }
83
+ `;
84
+ case 'soft':
85
+ return styled.css `
86
+ background: ${c.tint};
87
+ border: 1px solid transparent;
88
+ color: ${c.tintText};
89
+ &:hover:not(:disabled) {
90
+ background: ${c.tintHover};
91
+ }
92
+ `;
93
+ case 'link':
94
+ return styled.css `
95
+ background: transparent;
96
+ border: none;
97
+ color: ${c.text};
98
+ text-decoration: underline;
99
+ &:hover:not(:disabled) {
100
+ opacity: 0.8;
101
+ }
102
+ `;
103
+ }
104
+ }
105
+ const spin = styled.keyframes `
106
+ from { transform: rotate(0deg); }
107
+ to { transform: rotate(360deg); }
108
+ `;
109
+ const buttonBase = styled.css `
110
+ display: inline-flex;
111
+ align-items: center;
112
+ justify-content: center;
113
+ gap: 8px;
114
+ border-radius: 8px;
115
+ font-weight: 500;
116
+ font-family: inherit;
117
+ cursor: pointer;
118
+ text-decoration: none;
119
+ white-space: nowrap;
120
+ user-select: none;
121
+ line-height: 1;
122
+ height: ${({ $size, $variant }) => ($variant === 'link' ? 'auto' : sizeMap[$size].height)};
123
+ padding: ${({ $size, $variant }) => ($variant === 'link' ? '0' : sizeMap[$size].padding)};
124
+ font-size: ${({ $size }) => sizeMap[$size].fontSize};
125
+ ${({ $color, $variant }) => variantStyles(colorMap[$color], $variant)}
126
+ &:active:not(:disabled) {
127
+ transform: ${({ $variant }) => ($variant !== 'link' ? 'scale(0.97)' : 'none')};
128
+ }
129
+ &:focus-visible {
130
+ outline: 3px solid ${({ $color }) => colorMap[$color].border};
131
+ outline-offset: 2px;
132
+ }
133
+ &:disabled {
134
+ opacity: 0.45;
135
+ pointer-events: none;
136
+ cursor: not-allowed;
137
+ }
138
+ ${({ $isLoading }) => $isLoading &&
139
+ styled.css `
140
+ pointer-events: none;
141
+ `}
142
+ @media (prefers-reduced-motion: no-preference) {
143
+ transition:
144
+ background 100ms cubic-bezier(0.4, 0, 0.2, 1),
145
+ transform 50ms cubic-bezier(0.4, 0, 0.2, 1),
146
+ color 100ms cubic-bezier(0.4, 0, 0.2, 1),
147
+ border-color 100ms cubic-bezier(0.4, 0, 0.2, 1),
148
+ opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
149
+ }
150
+ `;
151
+ const StyledButton = styled.button `
152
+ ${buttonBase}
153
+ `;
154
+ const StyledIconButton = styled.button `
155
+ ${buttonBase}
156
+ `;
157
+ const StyledSpinner = styled.svg `
158
+ display: inline-block;
159
+ width: 1em;
160
+ height: 1em;
161
+ flex-shrink: 0;
162
+ animation: ${spin} 0.75s linear infinite;
163
+ `;
164
+
165
+ exports.StyledButton = StyledButton;
166
+ exports.StyledIconButton = StyledIconButton;
167
+ exports.StyledSpinner = StyledSpinner;
168
+ //# sourceMappingURL=Button.styles.js.map
package/dist/cjs/ui/dist/esm/components/Button/Button.styles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.styles.js","sources":["../../../../../../../../ui/dist/esm/components/Button/Button.styles.js"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nconst colorMap = {\n brand: {\n bg: 'var(--color-brand-500)',\n bgHover: 'var(--color-brand-600)',\n bgPressed: 'var(--color-brand-700)',\n tint: 'var(--color-brand-50)',\n tintHover: 'var(--color-brand-100)',\n tintText: 'var(--color-brand-700)',\n border: 'var(--color-brand-500)',\n text: 'var(--color-brand-500)',\n },\n danger: {\n bg: 'var(--color-danger-500)',\n bgHover: 'var(--color-danger-600)',\n bgPressed: 'var(--color-danger-700)',\n tint: 'var(--color-danger-50)',\n tintHover: 'var(--color-danger-200)',\n tintText: 'var(--color-danger-700)',\n border: 'var(--color-danger-500)',\n text: 'var(--color-danger-500)',\n },\n success: {\n bg: 'var(--color-success-500)',\n bgHover: 'var(--color-success-600)',\n bgPressed: 'var(--color-success-700)',\n tint: 'var(--color-success-50)',\n tintHover: 'var(--color-success-200)',\n tintText: 'var(--color-success-700)',\n border: 'var(--color-success-500)',\n text: 'var(--color-success-500)',\n },\n warning: {\n bg: 'var(--color-warning-500)',\n bgHover: 'var(--color-warning-600)',\n bgPressed: 'var(--color-warning-700)',\n tint: 'var(--color-warning-50)',\n tintHover: 'var(--color-warning-200)',\n tintText: 'var(--color-warning-700)',\n border: 'var(--color-warning-500)',\n text: 'var(--color-warning-600)',\n },\n neutral: {\n bg: 'var(--color-gray-600)',\n bgHover: 'var(--color-gray-700)',\n bgPressed: 'var(--color-gray-800)',\n tint: 'var(--color-gray-100)',\n tintHover: 'var(--color-gray-200)',\n tintText: 'var(--color-gray-700)',\n border: 'var(--color-gray-500)',\n text: 'var(--color-gray-600)',\n },\n};\nconst sizeMap = {\n xs: { height: '28px', padding: '0 10px', fontSize: '12px' },\n sm: { height: '32px', padding: '0 12px', fontSize: '13px' },\n md: { height: '36px', padding: '0 14px', fontSize: '13px' },\n lg: { height: '42px', padding: '0 18px', fontSize: '15px' },\n xl: { height: '50px', padding: '0 24px', fontSize: '16px' },\n};\nfunction variantStyles(c, variant) {\n switch (variant) {\n case 'solid':\n return css `\n background: ${c.bg};\n color: var(--color-white);\n border: 1px solid transparent;\n &:hover:not(:disabled) {\n background: ${c.bgHover};\n }\n `;\n case 'outline':\n return css `\n background: transparent;\n border: 1px solid ${c.border};\n color: ${c.text};\n &:hover:not(:disabled) {\n background: ${c.tint};\n }\n `;\n case 'soft':\n return css `\n background: ${c.tint};\n border: 1px solid transparent;\n color: ${c.tintText};\n &:hover:not(:disabled) {\n background: ${c.tintHover};\n }\n `;\n case 'link':\n return css `\n background: transparent;\n border: none;\n color: ${c.text};\n text-decoration: underline;\n &:hover:not(:disabled) {\n opacity: 0.8;\n }\n `;\n }\n}\nconst spin = keyframes `\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n`;\nconst buttonBase = css `\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n border-radius: 8px;\n font-weight: 500;\n font-family: inherit;\n cursor: pointer;\n text-decoration: none;\n white-space: nowrap;\n user-select: none;\n line-height: 1;\n height: ${({ $size, $variant }) => ($variant === 'link' ? 'auto' : sizeMap[$size].height)};\n padding: ${({ $size, $variant }) => ($variant === 'link' ? '0' : sizeMap[$size].padding)};\n font-size: ${({ $size }) => sizeMap[$size].fontSize};\n ${({ $color, $variant }) => variantStyles(colorMap[$color], $variant)}\n &:active:not(:disabled) {\n transform: ${({ $variant }) => ($variant !== 'link' ? 'scale(0.97)' : 'none')};\n }\n &:focus-visible {\n outline: 3px solid ${({ $color }) => colorMap[$color].border};\n outline-offset: 2px;\n }\n &:disabled {\n opacity: 0.45;\n pointer-events: none;\n cursor: not-allowed;\n }\n ${({ $isLoading }) => $isLoading &&\n css `\n pointer-events: none;\n `}\n @media (prefers-reduced-motion: no-preference) {\n transition:\n background 100ms cubic-bezier(0.4, 0, 0.2, 1),\n transform 50ms cubic-bezier(0.4, 0, 0.2, 1),\n color 100ms cubic-bezier(0.4, 0, 0.2, 1),\n border-color 100ms cubic-bezier(0.4, 0, 0.2, 1),\n opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n`;\nconst StyledButton = styled.button `\n ${buttonBase}\n`;\nconst StyledIconButton = styled.button `\n ${buttonBase}\n`;\nconst StyledSpinner = styled.svg `\n display: inline-block;\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n animation: ${spin} 0.75s linear infinite;\n`;\n\nexport { StyledButton, StyledIconButton, StyledSpinner };\n//# sourceMappingURL=Button.styles.js.map\n"],"names":["css","keyframes"],"mappings":";;;;AAEA,MAAM,QAAQ,GAAG;AACjB,IAAI,KAAK,EAAE;AACX,QAAQ,EAAE,EAAE,wBAAwB;AACpC,QAAQ,OAAO,EAAE,wBAAwB;AACzC,QAAQ,SAAS,EAAE,wBAAwB;AAC3C,QAAQ,IAAI,EAAE,uBAAuB;AACrC,QAAQ,SAAS,EAAE,wBAAwB;AAC3C,QAAQ,QAAQ,EAAE,wBAAwB;AAC1C,QAAQ,MAAM,EAAE,wBAAwB;AACxC,QAAQ,IAAI,EAAE,wBAAwB;AACtC,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,QAAQ,EAAE,EAAE,yBAAyB;AACrC,QAAQ,OAAO,EAAE,yBAAyB;AAC1C,QAAQ,SAAS,EAAE,yBAAyB;AAC5C,QAAQ,IAAI,EAAE,wBAAwB;AACtC,QAAQ,SAAS,EAAE,yBAAyB;AAC5C,QAAQ,QAAQ,EAAE,yBAAyB;AAC3C,QAAQ,MAAM,EAAE,yBAAyB;AACzC,QAAQ,IAAI,EAAE,yBAAyB;AACvC,KAAK;AACL,IAAI,OAAO,EAAE;AACb,QAAQ,EAAE,EAAE,0BAA0B;AACtC,QAAQ,OAAO,EAAE,0BAA0B;AAC3C,QAAQ,SAAS,EAAE,0BAA0B;AAC7C,QAAQ,IAAI,EAAE,yBAAyB;AACvC,QAAQ,SAAS,EAAE,0BAA0B;AAC7C,QAAQ,QAAQ,EAAE,0BAA0B;AAC5C,QAAQ,MAAM,EAAE,0BAA0B;AAC1C,QAAQ,IAAI,EAAE,0BAA0B;AACxC,KAAK;AACL,IAAI,OAAO,EAAE;AACb,QAAQ,EAAE,EAAE,0BAA0B;AACtC,QAAQ,OAAO,EAAE,0BAA0B;AAC3C,QAAQ,SAAS,EAAE,0BAA0B;AAC7C,QAAQ,IAAI,EAAE,yBAAyB;AACvC,QAAQ,SAAS,EAAE,0BAA0B;AAC7C,QAAQ,QAAQ,EAAE,0BAA0B;AAC5C,QAAQ,MAAM,EAAE,0BAA0B;AAC1C,QAAQ,IAAI,EAAE,0BAA0B;AACxC,KAAK;AACL,IAAI,OAAO,EAAE;AACb,QAAQ,EAAE,EAAE,uBAAuB;AACnC,QAAQ,OAAO,EAAE,uBAAuB;AACxC,QAAQ,SAAS,EAAE,uBAAuB;AAC1C,QAAQ,IAAI,EAAE,uBAAuB;AACrC,QAAQ,SAAS,EAAE,uBAAuB;AAC1C,QAAQ,QAAQ,EAAE,uBAAuB;AACzC,QAAQ,MAAM,EAAE,uBAAuB;AACvC,QAAQ,IAAI,EAAE,uBAAuB;AACrC,KAAK;AACL,CAAC;AACD,MAAM,OAAO,GAAG;AAChB,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC/D,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC/D,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC/D,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC/D,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC/D,CAAC;AACD,SAAS,aAAa,CAAC,CAAC,EAAE,OAAO,EAAE;AACnC,IAAI,QAAQ,OAAO;AACnB,QAAQ,KAAK,OAAO;AACpB,YAAY,OAAOA,UAAG,CAAC;AACvB,oBAAoB,EAAE,CAAC,CAAC,EAAE,CAAC;AAC3B;AACA;AACA;AACA,sBAAsB,EAAE,CAAC,CAAC,OAAO,CAAC;AAClC;AACA,MAAM,CAAC;AACP,QAAQ,KAAK,SAAS;AACtB,YAAY,OAAOA,UAAG,CAAC;AACvB;AACA,0BAA0B,EAAE,CAAC,CAAC,MAAM,CAAC;AACrC,eAAe,EAAE,CAAC,CAAC,IAAI,CAAC;AACxB;AACA,sBAAsB,EAAE,CAAC,CAAC,IAAI,CAAC;AAC/B;AACA,MAAM,CAAC;AACP,QAAQ,KAAK,MAAM;AACnB,YAAY,OAAOA,UAAG,CAAC;AACvB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC;AAC7B;AACA,eAAe,EAAE,CAAC,CAAC,QAAQ,CAAC;AAC5B;AACA,sBAAsB,EAAE,CAAC,CAAC,SAAS,CAAC;AACpC;AACA,MAAM,CAAC;AACP,QAAQ,KAAK,MAAM;AACnB,YAAY,OAAOA,UAAG,CAAC;AACvB;AACA;AACA,eAAe,EAAE,CAAC,CAAC,IAAI,CAAC;AACxB;AACA;AACA;AACA;AACA,MAAM,CAAC;AACP;AACA;AACA,MAAM,IAAI,GAAGC,gBAAS,CAAC;AACvB;AACA;AACA,CAAC;AACD,MAAM,UAAU,GAAGD,UAAG,CAAC;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5F,WAAW,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,KAAK,MAAM,GAAG,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;AAC3F,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;AACtD,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC;AACvE;AACA,eAAe,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,KAAK,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC,CAAC;AAClF;AACA;AACA,uBAAuB,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU;AAClC,IAAIA,UAAG,CAAC;AACR;AACA,IAAI,CAAC;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACI,MAAC,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC;AACnC,EAAE,EAAE,UAAU;AACd;AACK,MAAC,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC;AACvC,EAAE,EAAE,UAAU;AACd;AACK,MAAC,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC;AACjC;AACA;AACA;AACA;AACA,aAAa,EAAE,IAAI,CAAC;AACpB;;;;;;"}
package/dist/esm/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export { colors, radii, spacing, tokens } from './tokens/dist/esm/index.js';
2
+ export { Button, IconButton } from './ui/dist/esm/components/Button/Button.js';
3
+ //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
package/dist/esm/tokens/dist/esm/index.js ADDED
@@ -0,0 +1,159 @@
1
+ const tokens = {
2
+ color: {
3
+ brand: {
4
+ 50: '#EEF2FF',
5
+ 100: '#C7D2FE',
6
+ 300: '#A5B4FC',
7
+ 500: '#4F46E5',
8
+ 600: '#4338CA',
9
+ 700: '#3730A3',
10
+ 900: '#312E81',
11
+ },
12
+ success: { 50: '#ECFDF5', 500: '#10B981' },
13
+ danger: { 50: '#FEF2F2', 500: '#EF4444' },
14
+ warning: { 50: '#FFFBEB', 500: '#F59E0B' },
15
+ info: { 50: '#EFF6FF', 500: '#3B82F6' },
16
+ gray: {
17
+ 50: '#F9FAFB',
18
+ 100: '#F3F4F6',
19
+ 200: '#E5E7EB',
20
+ 300: '#D1D5DB',
21
+ 400: '#9CA3AF',
22
+ 500: '#6B7280',
23
+ 600: '#4B5563',
24
+ 700: '#374151',
25
+ 800: '#1F2937',
26
+ 900: '#111827',
27
+ },
28
+ },
29
+ semantic: {
30
+ surface: '#FFFFFF',
31
+ bg: '#F9FAFB',
32
+ textPrimary: '#111827',
33
+ textSecondary: '#6B7280',
34
+ textDisabled: '#D1D5DB',
35
+ border: '#E5E7EB',
36
+ borderStrong: '#D1D5DB',
37
+ focusRing: '#4F46E5',
38
+ },
39
+ space: {
40
+ '2xs': 2,
41
+ xs: 4,
42
+ sm: 8,
43
+ md: 16,
44
+ lg: 24,
45
+ xl: 32,
46
+ '2xl': 48,
47
+ '3xl': 64,
48
+ },
49
+ radius: {
50
+ none: 0,
51
+ xs: 2,
52
+ sm: 4,
53
+ md: 6,
54
+ lg: 8,
55
+ xl: 12,
56
+ '2xl': 16,
57
+ full: 9999,
58
+ },
59
+ shadow: {
60
+ none: 'none',
61
+ xs: '0 1px 2px rgba(0,0,0,0.05)',
62
+ sm: '0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)',
63
+ md: '0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)',
64
+ lg: '0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)',
65
+ xl: '0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04)',
66
+ },
67
+ duration: {
68
+ instant: 50,
69
+ fast: 100,
70
+ normal: 200,
71
+ slow: 300,
72
+ deliberate: 500,
73
+ },
74
+ ease: {
75
+ standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
76
+ decelerate: 'cubic-bezier(0, 0, 0.2, 1)',
77
+ accelerate: 'cubic-bezier(0.4, 0, 1, 1)',
78
+ spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
79
+ },
80
+ font: {
81
+ display: 'Plus Jakarta Sans',
82
+ text: 'Inter',
83
+ mono: 'JetBrains Mono',
84
+ },
85
+ fontSize: {
86
+ h1: '36px',
87
+ h2: '28px',
88
+ h3: '22px',
89
+ h4: '18px',
90
+ h5: '16px',
91
+ bodyLg: '16px',
92
+ bodyMd: '14px',
93
+ caption: '12px',
94
+ code: '12px',
95
+ },
96
+ component: {
97
+ buttonHeight: { xs: '28px', sm: '32px', md: '36px', lg: '42px', xl: '50px' },
98
+ radiusButton: '8px',
99
+ radiusCard: '12px',
100
+ radiusModal: '16px',
101
+ radiusBadge: '9999px',
102
+ focusRingWidth: '3px',
103
+ focusRingOffset: '2px',
104
+ },
105
+ };
106
+ // Flat named exports for backwards-compat convenience
107
+ const colors = {
108
+ brand500: tokens.color.brand[500],
109
+ brand600: tokens.color.brand[600],
110
+ brand700: tokens.color.brand[700],
111
+ brand50: tokens.color.brand[50],
112
+ danger500: tokens.color.danger[500],
113
+ danger50: tokens.color.danger[50],
114
+ success500: tokens.color.success[500],
115
+ success50: tokens.color.success[50],
116
+ warning500: tokens.color.warning[500],
117
+ warning50: tokens.color.warning[50],
118
+ gray50: tokens.color.gray[50],
119
+ gray100: tokens.color.gray[100],
120
+ gray200: tokens.color.gray[200],
121
+ gray300: tokens.color.gray[300],
122
+ gray400: tokens.color.gray[400],
123
+ gray500: tokens.color.gray[500],
124
+ gray600: tokens.color.gray[600],
125
+ gray700: tokens.color.gray[700],
126
+ gray800: tokens.color.gray[800],
127
+ gray900: tokens.color.gray[900],
128
+ surface: tokens.semantic.surface,
129
+ bg: tokens.semantic.bg,
130
+ textPrimary: tokens.semantic.textPrimary,
131
+ textSecondary: tokens.semantic.textSecondary,
132
+ textDisabled: tokens.semantic.textDisabled,
133
+ border: tokens.semantic.border,
134
+ borderStrong: tokens.semantic.borderStrong,
135
+ focusRing: tokens.semantic.focusRing,
136
+ };
137
+ const spacing = {
138
+ '2xs': '2px',
139
+ xs: '4px',
140
+ sm: '8px',
141
+ md: '16px',
142
+ lg: '24px',
143
+ xl: '32px',
144
+ '2xl': '48px',
145
+ '3xl': '64px',
146
+ };
147
+ const radii = {
148
+ none: '0',
149
+ xs: '2px',
150
+ sm: '4px',
151
+ md: '6px',
152
+ lg: '8px',
153
+ xl: '12px',
154
+ '2xl': '16px',
155
+ full: '9999px',
156
+ };
157
+
158
+ export { colors, radii, spacing, tokens };
159
+ //# sourceMappingURL=index.js.map
package/dist/esm/tokens/dist/esm/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../../../../tokens/dist/esm/index.js"],"sourcesContent":["const tokens = {\n color: {\n brand: {\n 50: '#EEF2FF',\n 100: '#C7D2FE',\n 300: '#A5B4FC',\n 500: '#4F46E5',\n 600: '#4338CA',\n 700: '#3730A3',\n 900: '#312E81',\n },\n success: { 50: '#ECFDF5', 500: '#10B981' },\n danger: { 50: '#FEF2F2', 500: '#EF4444' },\n warning: { 50: '#FFFBEB', 500: '#F59E0B' },\n info: { 50: '#EFF6FF', 500: '#3B82F6' },\n gray: {\n 50: '#F9FAFB',\n 100: '#F3F4F6',\n 200: '#E5E7EB',\n 300: '#D1D5DB',\n 400: '#9CA3AF',\n 500: '#6B7280',\n 600: '#4B5563',\n 700: '#374151',\n 800: '#1F2937',\n 900: '#111827',\n },\n },\n semantic: {\n surface: '#FFFFFF',\n bg: '#F9FAFB',\n textPrimary: '#111827',\n textSecondary: '#6B7280',\n textDisabled: '#D1D5DB',\n border: '#E5E7EB',\n borderStrong: '#D1D5DB',\n focusRing: '#4F46E5',\n },\n space: {\n '2xs': 2,\n xs: 4,\n sm: 8,\n md: 16,\n lg: 24,\n xl: 32,\n '2xl': 48,\n '3xl': 64,\n },\n radius: {\n none: 0,\n xs: 2,\n sm: 4,\n md: 6,\n lg: 8,\n xl: 12,\n '2xl': 16,\n full: 9999,\n },\n shadow: {\n none: 'none',\n xs: '0 1px 2px rgba(0,0,0,0.05)',\n sm: '0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)',\n md: '0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)',\n lg: '0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)',\n xl: '0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04)',\n },\n duration: {\n instant: 50,\n fast: 100,\n normal: 200,\n slow: 300,\n deliberate: 500,\n },\n ease: {\n standard: 'cubic-bezier(0.4, 0, 0.2, 1)',\n decelerate: 'cubic-bezier(0, 0, 0.2, 1)',\n accelerate: 'cubic-bezier(0.4, 0, 1, 1)',\n spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n },\n font: {\n display: 'Plus Jakarta Sans',\n text: 'Inter',\n mono: 'JetBrains Mono',\n },\n fontSize: {\n h1: '36px',\n h2: '28px',\n h3: '22px',\n h4: '18px',\n h5: '16px',\n bodyLg: '16px',\n bodyMd: '14px',\n caption: '12px',\n code: '12px',\n },\n component: {\n buttonHeight: { xs: '28px', sm: '32px', md: '36px', lg: '42px', xl: '50px' },\n radiusButton: '8px',\n radiusCard: '12px',\n radiusModal: '16px',\n radiusBadge: '9999px',\n focusRingWidth: '3px',\n focusRingOffset: '2px',\n },\n};\n// Flat named exports for backwards-compat convenience\nconst colors = {\n brand500: tokens.color.brand[500],\n brand600: tokens.color.brand[600],\n brand700: tokens.color.brand[700],\n brand50: tokens.color.brand[50],\n danger500: tokens.color.danger[500],\n danger50: tokens.color.danger[50],\n success500: tokens.color.success[500],\n success50: tokens.color.success[50],\n warning500: tokens.color.warning[500],\n warning50: tokens.color.warning[50],\n gray50: tokens.color.gray[50],\n gray100: tokens.color.gray[100],\n gray200: tokens.color.gray[200],\n gray300: tokens.color.gray[300],\n gray400: tokens.color.gray[400],\n gray500: tokens.color.gray[500],\n gray600: tokens.color.gray[600],\n gray700: tokens.color.gray[700],\n gray800: tokens.color.gray[800],\n gray900: tokens.color.gray[900],\n surface: tokens.semantic.surface,\n bg: tokens.semantic.bg,\n textPrimary: tokens.semantic.textPrimary,\n textSecondary: tokens.semantic.textSecondary,\n textDisabled: tokens.semantic.textDisabled,\n border: tokens.semantic.border,\n borderStrong: tokens.semantic.borderStrong,\n focusRing: tokens.semantic.focusRing,\n};\nconst spacing = {\n '2xs': '2px',\n xs: '4px',\n sm: '8px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n '2xl': '48px',\n '3xl': '64px',\n};\nconst radii = {\n none: '0',\n xs: '2px',\n sm: '4px',\n md: '6px',\n lg: '8px',\n xl: '12px',\n '2xl': '16px',\n full: '9999px',\n};\n\nexport { colors, radii, spacing, tokens };\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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"}
package/dist/esm/ui/dist/esm/components/Button/Button.js ADDED
@@ -0,0 +1,18 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { forwardRef } from 'react';
3
+ import { StyledButton, StyledIconButton, StyledSpinner } from './Button.styles.js';
4
+
5
+ function Spinner() {
6
+ return (jsxs(StyledSpinner, { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeDasharray: "31.416", strokeDashoffset: "10", opacity: "0.3" }), jsx("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })] }));
7
+ }
8
+ const Button = forwardRef(({ variant = 'solid', color = 'brand', size = 'md', isLoading = false, children, leftIcon, rightIcon, disabled, ...rest }, ref) => {
9
+ return (jsxs(StyledButton, { ref: ref, "$variant": variant, "$color": color, "$size": size, "$isLoading": isLoading, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...rest, children: [isLoading ? jsx(Spinner, {}) : leftIcon, jsx("span", { children: children }), !isLoading && rightIcon] }));
10
+ });
11
+ Button.displayName = 'Button';
12
+ const IconButton = forwardRef(({ icon, 'aria-label': ariaLabel, size = 'md', variant = 'solid', color = 'brand', isLoading = false, disabled, ...rest }, ref) => {
13
+ return (jsx(StyledIconButton, { ref: ref, "$variant": variant, "$color": color, "$size": size, "$isLoading": isLoading, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, "aria-label": ariaLabel, ...rest, children: isLoading ? jsx(Spinner, {}) : icon }));
14
+ });
15
+ IconButton.displayName = 'IconButton';
16
+
17
+ export { Button, IconButton };
18
+ //# sourceMappingURL=Button.js.map
package/dist/esm/ui/dist/esm/components/Button/Button.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.js","sources":["../../../../../../../../ui/dist/esm/components/Button/Button.js"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef } from 'react';\nimport { StyledButton, StyledIconButton, StyledSpinner } from './Button.styles.js';\n\nfunction Spinner() {\n return (jsxs(StyledSpinner, { viewBox: \"0 0 24 24\", fill: \"none\", \"aria-hidden\": \"true\", focusable: \"false\", children: [jsx(\"circle\", { cx: \"12\", cy: \"12\", r: \"10\", stroke: \"currentColor\", strokeWidth: \"3\", strokeLinecap: \"round\", strokeDasharray: \"31.416\", strokeDashoffset: \"10\", opacity: \"0.3\" }), jsx(\"path\", { d: \"M12 2a10 10 0 0 1 10 10\", stroke: \"currentColor\", strokeWidth: \"3\", strokeLinecap: \"round\" })] }));\n}\nconst Button = forwardRef(({ variant = 'solid', color = 'brand', size = 'md', isLoading = false, children, leftIcon, rightIcon, disabled, ...rest }, ref) => {\n return (jsxs(StyledButton, { ref: ref, \"$variant\": variant, \"$color\": color, \"$size\": size, \"$isLoading\": isLoading, disabled: disabled || isLoading, \"aria-busy\": isLoading || undefined, ...rest, children: [isLoading ? jsx(Spinner, {}) : leftIcon, jsx(\"span\", { children: children }), !isLoading && rightIcon] }));\n});\nButton.displayName = 'Button';\nconst IconButton = forwardRef(({ icon, 'aria-label': ariaLabel, size = 'md', variant = 'solid', color = 'brand', isLoading = false, disabled, ...rest }, ref) => {\n return (jsx(StyledIconButton, { ref: ref, \"$variant\": variant, \"$color\": color, \"$size\": size, \"$isLoading\": isLoading, disabled: disabled || isLoading, \"aria-busy\": isLoading || undefined, \"aria-label\": ariaLabel, ...rest, children: isLoading ? jsx(Spinner, {}) : icon }));\n});\nIconButton.displayName = 'IconButton';\n\nexport { Button, IconButton };\n//# sourceMappingURL=Button.js.map\n"],"names":[],"mappings":";;;;AAIA,SAAS,OAAO,GAAG;AACnB,IAAI,QAAQ,IAAI,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,EAAE,aAAa,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,yBAAyB,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC;AACpa;AACK,MAAC,MAAM,GAAG,UAAU,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,GAAG,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAK;AAC7J,IAAI,QAAQ,IAAI,CAAC,YAAY,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAAE,WAAW,EAAE,SAAS,IAAI,SAAS,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,CAAC,SAAS,GAAG,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,GAAG,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,SAAS,IAAI,SAAS,CAAC,EAAE,CAAC;AAC5T,CAAC;AACD,MAAM,CAAC,WAAW,GAAG,QAAQ;AACxB,MAAC,UAAU,GAAG,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,SAAS,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAK;AACjK,IAAI,QAAQ,GAAG,CAAC,gBAAgB,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAAE,WAAW,EAAE,SAAS,IAAI,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC;AACpR,CAAC;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
package/dist/esm/ui/dist/esm/components/Button/Button.styles.js ADDED
@@ -0,0 +1,164 @@
1
+ import styled, { css, keyframes } from 'styled-components';
2
+
3
+ const colorMap = {
4
+ brand: {
5
+ bg: 'var(--color-brand-500)',
6
+ bgHover: 'var(--color-brand-600)',
7
+ bgPressed: 'var(--color-brand-700)',
8
+ tint: 'var(--color-brand-50)',
9
+ tintHover: 'var(--color-brand-100)',
10
+ tintText: 'var(--color-brand-700)',
11
+ border: 'var(--color-brand-500)',
12
+ text: 'var(--color-brand-500)',
13
+ },
14
+ danger: {
15
+ bg: 'var(--color-danger-500)',
16
+ bgHover: 'var(--color-danger-600)',
17
+ bgPressed: 'var(--color-danger-700)',
18
+ tint: 'var(--color-danger-50)',
19
+ tintHover: 'var(--color-danger-200)',
20
+ tintText: 'var(--color-danger-700)',
21
+ border: 'var(--color-danger-500)',
22
+ text: 'var(--color-danger-500)',
23
+ },
24
+ success: {
25
+ bg: 'var(--color-success-500)',
26
+ bgHover: 'var(--color-success-600)',
27
+ bgPressed: 'var(--color-success-700)',
28
+ tint: 'var(--color-success-50)',
29
+ tintHover: 'var(--color-success-200)',
30
+ tintText: 'var(--color-success-700)',
31
+ border: 'var(--color-success-500)',
32
+ text: 'var(--color-success-500)',
33
+ },
34
+ warning: {
35
+ bg: 'var(--color-warning-500)',
36
+ bgHover: 'var(--color-warning-600)',
37
+ bgPressed: 'var(--color-warning-700)',
38
+ tint: 'var(--color-warning-50)',
39
+ tintHover: 'var(--color-warning-200)',
40
+ tintText: 'var(--color-warning-700)',
41
+ border: 'var(--color-warning-500)',
42
+ text: 'var(--color-warning-600)',
43
+ },
44
+ neutral: {
45
+ bg: 'var(--color-gray-600)',
46
+ bgHover: 'var(--color-gray-700)',
47
+ bgPressed: 'var(--color-gray-800)',
48
+ tint: 'var(--color-gray-100)',
49
+ tintHover: 'var(--color-gray-200)',
50
+ tintText: 'var(--color-gray-700)',
51
+ border: 'var(--color-gray-500)',
52
+ text: 'var(--color-gray-600)',
53
+ },
54
+ };
55
+ const sizeMap = {
56
+ xs: { height: '28px', padding: '0 10px', fontSize: '12px' },
57
+ sm: { height: '32px', padding: '0 12px', fontSize: '13px' },
58
+ md: { height: '36px', padding: '0 14px', fontSize: '13px' },
59
+ lg: { height: '42px', padding: '0 18px', fontSize: '15px' },
60
+ xl: { height: '50px', padding: '0 24px', fontSize: '16px' },
61
+ };
62
+ function variantStyles(c, variant) {
63
+ switch (variant) {
64
+ case 'solid':
65
+ return css `
66
+ background: ${c.bg};
67
+ color: var(--color-white);
68
+ border: 1px solid transparent;
69
+ &:hover:not(:disabled) {
70
+ background: ${c.bgHover};
71
+ }
72
+ `;
73
+ case 'outline':
74
+ return css `
75
+ background: transparent;
76
+ border: 1px solid ${c.border};
77
+ color: ${c.text};
78
+ &:hover:not(:disabled) {
79
+ background: ${c.tint};
80
+ }
81
+ `;
82
+ case 'soft':
83
+ return css `
84
+ background: ${c.tint};
85
+ border: 1px solid transparent;
86
+ color: ${c.tintText};
87
+ &:hover:not(:disabled) {
88
+ background: ${c.tintHover};
89
+ }
90
+ `;
91
+ case 'link':
92
+ return css `
93
+ background: transparent;
94
+ border: none;
95
+ color: ${c.text};
96
+ text-decoration: underline;
97
+ &:hover:not(:disabled) {
98
+ opacity: 0.8;
99
+ }
100
+ `;
101
+ }
102
+ }
103
+ const spin = keyframes `
104
+ from { transform: rotate(0deg); }
105
+ to { transform: rotate(360deg); }
106
+ `;
107
+ const buttonBase = css `
108
+ display: inline-flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+ gap: 8px;
112
+ border-radius: 8px;
113
+ font-weight: 500;
114
+ font-family: inherit;
115
+ cursor: pointer;
116
+ text-decoration: none;
117
+ white-space: nowrap;
118
+ user-select: none;
119
+ line-height: 1;
120
+ height: ${({ $size, $variant }) => ($variant === 'link' ? 'auto' : sizeMap[$size].height)};
121
+ padding: ${({ $size, $variant }) => ($variant === 'link' ? '0' : sizeMap[$size].padding)};
122
+ font-size: ${({ $size }) => sizeMap[$size].fontSize};
123
+ ${({ $color, $variant }) => variantStyles(colorMap[$color], $variant)}
124
+ &:active:not(:disabled) {
125
+ transform: ${({ $variant }) => ($variant !== 'link' ? 'scale(0.97)' : 'none')};
126
+ }
127
+ &:focus-visible {
128
+ outline: 3px solid ${({ $color }) => colorMap[$color].border};
129
+ outline-offset: 2px;
130
+ }
131
+ &:disabled {
132
+ opacity: 0.45;
133
+ pointer-events: none;
134
+ cursor: not-allowed;
135
+ }
136
+ ${({ $isLoading }) => $isLoading &&
137
+ css `
138
+ pointer-events: none;
139
+ `}
140
+ @media (prefers-reduced-motion: no-preference) {
141
+ transition:
142
+ background 100ms cubic-bezier(0.4, 0, 0.2, 1),
143
+ transform 50ms cubic-bezier(0.4, 0, 0.2, 1),
144
+ color 100ms cubic-bezier(0.4, 0, 0.2, 1),
145
+ border-color 100ms cubic-bezier(0.4, 0, 0.2, 1),
146
+ opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
147
+ }
148
+ `;
149
+ const StyledButton = styled.button `
150
+ ${buttonBase}
151
+ `;
152
+ const StyledIconButton = styled.button `
153
+ ${buttonBase}
154
+ `;
155
+ const StyledSpinner = styled.svg `
156
+ display: inline-block;
157
+ width: 1em;
158
+ height: 1em;
159
+ flex-shrink: 0;
160
+ animation: ${spin} 0.75s linear infinite;
161
+ `;
162
+
163
+ export { StyledButton, StyledIconButton, StyledSpinner };
164
+ //# sourceMappingURL=Button.styles.js.map
package/dist/esm/ui/dist/esm/components/Button/Button.styles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.styles.js","sources":["../../../../../../../../ui/dist/esm/components/Button/Button.styles.js"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nconst colorMap = {\n brand: {\n bg: 'var(--color-brand-500)',\n bgHover: 'var(--color-brand-600)',\n bgPressed: 'var(--color-brand-700)',\n tint: 'var(--color-brand-50)',\n tintHover: 'var(--color-brand-100)',\n tintText: 'var(--color-brand-700)',\n border: 'var(--color-brand-500)',\n text: 'var(--color-brand-500)',\n },\n danger: {\n bg: 'var(--color-danger-500)',\n bgHover: 'var(--color-danger-600)',\n bgPressed: 'var(--color-danger-700)',\n tint: 'var(--color-danger-50)',\n tintHover: 'var(--color-danger-200)',\n tintText: 'var(--color-danger-700)',\n border: 'var(--color-danger-500)',\n text: 'var(--color-danger-500)',\n },\n success: {\n bg: 'var(--color-success-500)',\n bgHover: 'var(--color-success-600)',\n bgPressed: 'var(--color-success-700)',\n tint: 'var(--color-success-50)',\n tintHover: 'var(--color-success-200)',\n tintText: 'var(--color-success-700)',\n border: 'var(--color-success-500)',\n text: 'var(--color-success-500)',\n },\n warning: {\n bg: 'var(--color-warning-500)',\n bgHover: 'var(--color-warning-600)',\n bgPressed: 'var(--color-warning-700)',\n tint: 'var(--color-warning-50)',\n tintHover: 'var(--color-warning-200)',\n tintText: 'var(--color-warning-700)',\n border: 'var(--color-warning-500)',\n text: 'var(--color-warning-600)',\n },\n neutral: {\n bg: 'var(--color-gray-600)',\n bgHover: 'var(--color-gray-700)',\n bgPressed: 'var(--color-gray-800)',\n tint: 'var(--color-gray-100)',\n tintHover: 'var(--color-gray-200)',\n tintText: 'var(--color-gray-700)',\n border: 'var(--color-gray-500)',\n text: 'var(--color-gray-600)',\n },\n};\nconst sizeMap = {\n xs: { height: '28px', padding: '0 10px', fontSize: '12px' },\n sm: { height: '32px', padding: '0 12px', fontSize: '13px' },\n md: { height: '36px', padding: '0 14px', fontSize: '13px' },\n lg: { height: '42px', padding: '0 18px', fontSize: '15px' },\n xl: { height: '50px', padding: '0 24px', fontSize: '16px' },\n};\nfunction variantStyles(c, variant) {\n switch (variant) {\n case 'solid':\n return css `\n background: ${c.bg};\n color: var(--color-white);\n border: 1px solid transparent;\n &:hover:not(:disabled) {\n background: ${c.bgHover};\n }\n `;\n case 'outline':\n return css `\n background: transparent;\n border: 1px solid ${c.border};\n color: ${c.text};\n &:hover:not(:disabled) {\n background: ${c.tint};\n }\n `;\n case 'soft':\n return css `\n background: ${c.tint};\n border: 1px solid transparent;\n color: ${c.tintText};\n &:hover:not(:disabled) {\n background: ${c.tintHover};\n }\n `;\n case 'link':\n return css `\n background: transparent;\n border: none;\n color: ${c.text};\n text-decoration: underline;\n &:hover:not(:disabled) {\n opacity: 0.8;\n }\n `;\n }\n}\nconst spin = keyframes `\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n`;\nconst buttonBase = css `\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n border-radius: 8px;\n font-weight: 500;\n font-family: inherit;\n cursor: pointer;\n text-decoration: none;\n white-space: nowrap;\n user-select: none;\n line-height: 1;\n height: ${({ $size, $variant }) => ($variant === 'link' ? 'auto' : sizeMap[$size].height)};\n padding: ${({ $size, $variant }) => ($variant === 'link' ? '0' : sizeMap[$size].padding)};\n font-size: ${({ $size }) => sizeMap[$size].fontSize};\n ${({ $color, $variant }) => variantStyles(colorMap[$color], $variant)}\n &:active:not(:disabled) {\n transform: ${({ $variant }) => ($variant !== 'link' ? 'scale(0.97)' : 'none')};\n }\n &:focus-visible {\n outline: 3px solid ${({ $color }) => colorMap[$color].border};\n outline-offset: 2px;\n }\n &:disabled {\n opacity: 0.45;\n pointer-events: none;\n cursor: not-allowed;\n }\n ${({ $isLoading }) => $isLoading &&\n css `\n pointer-events: none;\n `}\n @media (prefers-reduced-motion: no-preference) {\n transition:\n background 100ms cubic-bezier(0.4, 0, 0.2, 1),\n transform 50ms cubic-bezier(0.4, 0, 0.2, 1),\n color 100ms cubic-bezier(0.4, 0, 0.2, 1),\n border-color 100ms cubic-bezier(0.4, 0, 0.2, 1),\n opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n`;\nconst StyledButton = styled.button `\n ${buttonBase}\n`;\nconst StyledIconButton = styled.button `\n ${buttonBase}\n`;\nconst StyledSpinner = styled.svg `\n display: inline-block;\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n animation: ${spin} 0.75s linear infinite;\n`;\n\nexport { StyledButton, StyledIconButton, StyledSpinner };\n//# sourceMappingURL=Button.styles.js.map\n"],"names":[],"mappings":"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"}
package/dist/styles.css ADDED
@@ -0,0 +1,142 @@
1
+ :root {
2
+ /* Base */
3
+ --color-white: #ffffff;
4
+ --color-black: #000000;
5
+
6
+ /* Brand */
7
+ --color-brand-50: #eef2ff;
8
+ --color-brand-100: #c7d2fe;
9
+ --color-brand-300: #a5b4fc;
10
+ --color-brand-500: #4f46e5;
11
+ --color-brand-600: #4338ca;
12
+ --color-brand-700: #3730a3;
13
+ --color-brand-900: #312e81;
14
+
15
+ /* Semantic / Status */
16
+ --color-success-50: #ecfdf5;
17
+ --color-success-100: #d1fae5;
18
+ --color-success-200: #a7f3d0;
19
+ --color-success-500: #10b981;
20
+ --color-success-600: #059669;
21
+ --color-success-700: #047857;
22
+ --color-danger-50: #fef2f2;
23
+ --color-danger-100: #fee2e2;
24
+ --color-danger-200: #fecaca;
25
+ --color-danger-500: #ef4444;
26
+ --color-danger-600: #dc2626;
27
+ --color-danger-700: #b91c1c;
28
+ --color-warning-50: #fffbeb;
29
+ --color-warning-100: #fef3c7;
30
+ --color-warning-200: #fde68a;
31
+ --color-warning-500: #f59e0b;
32
+ --color-warning-600: #d97706;
33
+ --color-warning-700: #b45309;
34
+ --color-info-500: #3b82f6;
35
+ --color-info-50: #eff6ff;
36
+
37
+ /* Gray */
38
+ --color-gray-50: #f9fafb;
39
+ --color-gray-100: #f3f4f6;
40
+ --color-gray-200: #e5e7eb;
41
+ --color-gray-300: #d1d5db;
42
+ --color-gray-400: #9ca3af;
43
+ --color-gray-500: #6b7280;
44
+ --color-gray-600: #4b5563;
45
+ --color-gray-700: #374151;
46
+ --color-gray-800: #1f2937;
47
+ --color-gray-900: #111827;
48
+
49
+ /* Semantic aliases */
50
+ --color-surface: #ffffff;
51
+ --color-bg: #f9fafb;
52
+ --color-text-primary: #111827;
53
+ --color-text-secondary: #6b7280;
54
+ --color-text-disabled: #d1d5db;
55
+ --color-border: #e5e7eb;
56
+ --color-border-strong: #d1d5db;
57
+ --color-focus-ring: #4f46e5;
58
+
59
+ /* Spacing */
60
+ --space-2xs: 2px;
61
+ --space-xs: 4px;
62
+ --space-sm: 8px;
63
+ --space-md: 16px;
64
+ --space-lg: 24px;
65
+ --space-xl: 32px;
66
+ --space-2xl: 48px;
67
+ --space-3xl: 64px;
68
+
69
+ /* Radius */
70
+ --radius-none: 0;
71
+ --radius-xs: 2px;
72
+ --radius-sm: 4px;
73
+ --radius-md: 6px;
74
+ --radius-lg: 8px;
75
+ --radius-xl: 12px;
76
+ --radius-2xl: 16px;
77
+ --radius-full: 9999px;
78
+
79
+ /* Shadows */
80
+ --shadow-none: none;
81
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
82
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
83
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
84
+ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
85
+ --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
86
+
87
+ /* Motion */
88
+ --duration-instant: 50ms;
89
+ --duration-fast: 100ms;
90
+ --duration-normal: 200ms;
91
+ --duration-slow: 300ms;
92
+ --duration-deliberate: 500ms;
93
+ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
94
+ --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
95
+ --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
96
+ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
97
+
98
+ /* Typography */
99
+ --font-display: 'Plus Jakarta Sans', sans-serif;
100
+ --font-text: 'Inter', sans-serif;
101
+ --font-mono: 'JetBrains Mono', monospace;
102
+
103
+ /* Component tokens */
104
+ --button-height-xs: 28px;
105
+ --button-height-sm: 32px;
106
+ --button-height-md: 36px;
107
+ --button-height-lg: 42px;
108
+ --button-height-xl: 50px;
109
+ --radius-button: 8px;
110
+ --radius-card: 12px;
111
+ --radius-modal: 16px;
112
+ --radius-badge: 9999px;
113
+ --focus-ring-width: 3px;
114
+ --focus-ring-offset: 2px;
115
+ }
116
+
117
+ /* ─── Dark mode ─────────────────────────────────────────────────── */
118
+ [data-theme='dark'] {
119
+ --color-surface: #111827;
120
+ --color-bg: #1f2937;
121
+ --color-text-primary: #f9fafb;
122
+ --color-text-secondary: #9ca3af;
123
+ --color-text-disabled: #4b5563;
124
+ --color-border: #374151;
125
+ --color-border-strong: #4b5563;
126
+ --color-brand-500: #6366f1;
127
+ --color-focus-ring: #6366f1;
128
+ }
129
+
130
+ @media (prefers-color-scheme: dark) {
131
+ :root:not([data-theme='light']) {
132
+ --color-surface: #111827;
133
+ --color-bg: #1f2937;
134
+ --color-text-primary: #f9fafb;
135
+ --color-text-secondary: #9ca3af;
136
+ --color-text-disabled: #4b5563;
137
+ --color-border: #374151;
138
+ --color-border-strong: #4b5563;
139
+ --color-brand-500: #6366f1;
140
+ --color-focus-ring: #6366f1;
141
+ }
142
+ }
package/dist/types/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from '@techv/ui';
2
+ export * from '@techv/tokens';
package/package.json ADDED
@@ -0,0 +1,53 @@
1
+ {
2
+ "name": "@techv/design-system",
3
+ "version": "0.1.0",
4
+ "author": "Pranav V K <pranavvk@techversantinfotech.com>",
5
+ "license": "MIT",
6
+ "main": "./dist/cjs/index.js",
7
+ "module": "./dist/esm/index.js",
8
+ "types": "./dist/types/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "import": {
12
+ "types": "./dist/types/index.d.ts",
13
+ "default": "./dist/esm/index.js"
14
+ },
15
+ "require": {
16
+ "types": "./dist/types/index.d.ts",
17
+ "default": "./dist/cjs/index.js"
18
+ }
19
+ },
20
+ "./styles.css": "./dist/styles.css"
21
+ },
22
+ "files": [
23
+ "dist"
24
+ ],
25
+ "sideEffects": [
26
+ "./dist/styles.css"
27
+ ],
28
+ "peerDependencies": {
29
+ "react": "^18.0.0",
30
+ "react-dom": "^18.0.0",
31
+ "styled-components": "^6.1.0"
32
+ },
33
+ "devDependencies": {
34
+ "@rollup/plugin-commonjs": "^25.0.7",
35
+ "@rollup/plugin-node-resolve": "^15.2.3",
36
+ "@rollup/plugin-typescript": "^11.1.6",
37
+ "rollup": "^4.17.2",
38
+ "ts-node": "^10.9.2",
39
+ "tslib": "^2.6.2",
40
+ "typescript": "~5.4.5",
41
+ "@techv/tokens": "0.1.0",
42
+ "@techv/ui": "0.1.0"
43
+ },
44
+ "publishConfig": {
45
+ "registry": "https://registry.npmjs.org",
46
+ "access": "public"
47
+ },
48
+ "scripts": {
49
+ "build": "rollup -c rollup.config.ts --configPlugin typescript && tsc -p tsconfig.build.json && cp node_modules/@techv/tokens/dist/global.css dist/styles.css",
50
+ "lint": "tsc --noEmit",
51
+ "clean": "rm -rf dist"
52
+ }
53
+ }