soongle-ui 0.1.0 → 0.1.2

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 (9) hide show
  1. package/README.md +1 -3
  2. package/dist/index.d.mts +1 -125
  3. package/dist/index.d.ts +1 -125
  4. package/dist/index.js +12 -171
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +11 -167
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/styles.css +4 -195
  9. package/package.json +2 -6
package/README.md CHANGED
@@ -26,8 +26,7 @@ import { Button } from 'soongle-ui';
26
26
  function App() {
27
27
  return (
28
28
  <div>
29
- <Button variant="primary">Click me</Button>
30
- <Button variant="outline">Outline</Button>
29
+ <Button>Click me</Button>
31
30
  </div>
32
31
  );
33
32
  }
@@ -37,5 +36,4 @@ function App() {
37
36
 
38
37
  - Built with React and Tailwind CSS
39
38
  - Fully typed with TypeScript
40
- - Supports Light/Dark modes (if applicable)
41
39
  - Tree-shakable exports
package/dist/index.d.mts CHANGED
@@ -1,133 +1,9 @@
1
1
  import * as React from 'react';
2
2
 
3
- type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'success' | 'warning' | 'error';
4
- type ButtonSize = 'sm' | 'md' | 'lg';
5
3
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6
- variant?: ButtonVariant;
7
- size?: ButtonSize;
8
4
  children: React.ReactNode;
9
5
  }
10
6
 
11
7
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
12
8
 
13
- declare const colors: {
14
- readonly primary: {
15
- readonly 50: "#eff6ff";
16
- readonly 100: "#dbeafe";
17
- readonly 200: "#bfdbfe";
18
- readonly 300: "#93c5fd";
19
- readonly 400: "#60a5fa";
20
- readonly 500: "#3b82f6";
21
- readonly 600: "#2563eb";
22
- readonly 700: "#1d4ed8";
23
- readonly 800: "#1e40af";
24
- readonly 900: "#1e3a8a";
25
- readonly 950: "#172554";
26
- };
27
- readonly secondary: {
28
- readonly 50: "#f8fafc";
29
- readonly 100: "#f1f5f9";
30
- readonly 200: "#e2e8f0";
31
- readonly 300: "#cbd5e1";
32
- readonly 400: "#94a3b8";
33
- readonly 500: "#64748b";
34
- readonly 600: "#475569";
35
- readonly 700: "#334155";
36
- readonly 800: "#1e293b";
37
- readonly 900: "#0f172a";
38
- readonly 950: "#020617";
39
- };
40
- readonly success: {
41
- readonly 50: "#f0fdf4";
42
- readonly 100: "#dcfce7";
43
- readonly 200: "#bbf7d0";
44
- readonly 300: "#86efac";
45
- readonly 400: "#4ade80";
46
- readonly 500: "#22c55e";
47
- readonly 600: "#16a34a";
48
- readonly 700: "#15803d";
49
- readonly 800: "#166534";
50
- readonly 900: "#14532d";
51
- readonly 950: "#052e16";
52
- };
53
- readonly warning: {
54
- readonly 50: "#fffbeb";
55
- readonly 100: "#fef3c7";
56
- readonly 200: "#fde68a";
57
- readonly 300: "#fcd34d";
58
- readonly 400: "#fbbf24";
59
- readonly 500: "#f59e0b";
60
- readonly 600: "#d97706";
61
- readonly 700: "#b45309";
62
- readonly 800: "#92400e";
63
- readonly 900: "#78350f";
64
- readonly 950: "#451a03";
65
- };
66
- readonly error: {
67
- readonly 50: "#fef2f2";
68
- readonly 100: "#fee2e2";
69
- readonly 200: "#fecaca";
70
- readonly 300: "#fca5a5";
71
- readonly 400: "#f87171";
72
- readonly 500: "#ef4444";
73
- readonly 600: "#dc2626";
74
- readonly 700: "#b91c1c";
75
- readonly 800: "#991b1b";
76
- readonly 900: "#7f1d1d";
77
- readonly 950: "#450a0a";
78
- };
79
- readonly neutral: {
80
- readonly 50: "#fafafa";
81
- readonly 100: "#f5f5f5";
82
- readonly 200: "#e5e5e5";
83
- readonly 300: "#d4d4d4";
84
- readonly 400: "#a3a3a3";
85
- readonly 500: "#737373";
86
- readonly 600: "#525252";
87
- readonly 700: "#404040";
88
- readonly 800: "#262626";
89
- readonly 900: "#171717";
90
- readonly 950: "#0a0a0a";
91
- };
92
- };
93
-
94
- declare const spacing: {
95
- readonly xs: "0.5rem";
96
- readonly sm: "0.75rem";
97
- readonly md: "1rem";
98
- readonly lg: "1.5rem";
99
- readonly xl: "2rem";
100
- readonly '2xl': "3rem";
101
- readonly '3xl': "4rem";
102
- readonly '4xl': "6rem";
103
- };
104
-
105
- declare const typography: {
106
- readonly fontSizes: {
107
- readonly xs: "0.75rem";
108
- readonly sm: "0.875rem";
109
- readonly base: "1rem";
110
- readonly lg: "1.125rem";
111
- readonly xl: "1.25rem";
112
- readonly '2xl': "1.5rem";
113
- readonly '3xl': "1.875rem";
114
- readonly '4xl': "2.25rem";
115
- readonly '5xl': "3rem";
116
- };
117
- readonly fontWeights: {
118
- readonly light: "300";
119
- readonly normal: "400";
120
- readonly medium: "500";
121
- readonly semibold: "600";
122
- readonly bold: "700";
123
- readonly extrabold: "800";
124
- };
125
- readonly lineHeights: {
126
- readonly tight: "1.25";
127
- readonly normal: "1.5";
128
- readonly relaxed: "1.75";
129
- readonly loose: "2";
130
- };
131
- };
132
-
133
- export { Button, type ButtonProps, colors, spacing, typography };
9
+ export { Button, type ButtonProps };
package/dist/index.d.ts CHANGED
@@ -1,133 +1,9 @@
1
1
  import * as React from 'react';
2
2
 
3
- type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'success' | 'warning' | 'error';
4
- type ButtonSize = 'sm' | 'md' | 'lg';
5
3
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6
- variant?: ButtonVariant;
7
- size?: ButtonSize;
8
4
  children: React.ReactNode;
9
5
  }
10
6
 
11
7
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
12
8
 
13
- declare const colors: {
14
- readonly primary: {
15
- readonly 50: "#eff6ff";
16
- readonly 100: "#dbeafe";
17
- readonly 200: "#bfdbfe";
18
- readonly 300: "#93c5fd";
19
- readonly 400: "#60a5fa";
20
- readonly 500: "#3b82f6";
21
- readonly 600: "#2563eb";
22
- readonly 700: "#1d4ed8";
23
- readonly 800: "#1e40af";
24
- readonly 900: "#1e3a8a";
25
- readonly 950: "#172554";
26
- };
27
- readonly secondary: {
28
- readonly 50: "#f8fafc";
29
- readonly 100: "#f1f5f9";
30
- readonly 200: "#e2e8f0";
31
- readonly 300: "#cbd5e1";
32
- readonly 400: "#94a3b8";
33
- readonly 500: "#64748b";
34
- readonly 600: "#475569";
35
- readonly 700: "#334155";
36
- readonly 800: "#1e293b";
37
- readonly 900: "#0f172a";
38
- readonly 950: "#020617";
39
- };
40
- readonly success: {
41
- readonly 50: "#f0fdf4";
42
- readonly 100: "#dcfce7";
43
- readonly 200: "#bbf7d0";
44
- readonly 300: "#86efac";
45
- readonly 400: "#4ade80";
46
- readonly 500: "#22c55e";
47
- readonly 600: "#16a34a";
48
- readonly 700: "#15803d";
49
- readonly 800: "#166534";
50
- readonly 900: "#14532d";
51
- readonly 950: "#052e16";
52
- };
53
- readonly warning: {
54
- readonly 50: "#fffbeb";
55
- readonly 100: "#fef3c7";
56
- readonly 200: "#fde68a";
57
- readonly 300: "#fcd34d";
58
- readonly 400: "#fbbf24";
59
- readonly 500: "#f59e0b";
60
- readonly 600: "#d97706";
61
- readonly 700: "#b45309";
62
- readonly 800: "#92400e";
63
- readonly 900: "#78350f";
64
- readonly 950: "#451a03";
65
- };
66
- readonly error: {
67
- readonly 50: "#fef2f2";
68
- readonly 100: "#fee2e2";
69
- readonly 200: "#fecaca";
70
- readonly 300: "#fca5a5";
71
- readonly 400: "#f87171";
72
- readonly 500: "#ef4444";
73
- readonly 600: "#dc2626";
74
- readonly 700: "#b91c1c";
75
- readonly 800: "#991b1b";
76
- readonly 900: "#7f1d1d";
77
- readonly 950: "#450a0a";
78
- };
79
- readonly neutral: {
80
- readonly 50: "#fafafa";
81
- readonly 100: "#f5f5f5";
82
- readonly 200: "#e5e5e5";
83
- readonly 300: "#d4d4d4";
84
- readonly 400: "#a3a3a3";
85
- readonly 500: "#737373";
86
- readonly 600: "#525252";
87
- readonly 700: "#404040";
88
- readonly 800: "#262626";
89
- readonly 900: "#171717";
90
- readonly 950: "#0a0a0a";
91
- };
92
- };
93
-
94
- declare const spacing: {
95
- readonly xs: "0.5rem";
96
- readonly sm: "0.75rem";
97
- readonly md: "1rem";
98
- readonly lg: "1.5rem";
99
- readonly xl: "2rem";
100
- readonly '2xl': "3rem";
101
- readonly '3xl': "4rem";
102
- readonly '4xl': "6rem";
103
- };
104
-
105
- declare const typography: {
106
- readonly fontSizes: {
107
- readonly xs: "0.75rem";
108
- readonly sm: "0.875rem";
109
- readonly base: "1rem";
110
- readonly lg: "1.125rem";
111
- readonly xl: "1.25rem";
112
- readonly '2xl': "1.5rem";
113
- readonly '3xl': "1.875rem";
114
- readonly '4xl': "2.25rem";
115
- readonly '5xl': "3rem";
116
- };
117
- readonly fontWeights: {
118
- readonly light: "300";
119
- readonly normal: "400";
120
- readonly medium: "500";
121
- readonly semibold: "600";
122
- readonly bold: "700";
123
- readonly extrabold: "800";
124
- };
125
- readonly lineHeights: {
126
- readonly tight: "1.25";
127
- readonly normal: "1.5";
128
- readonly relaxed: "1.75";
129
- readonly loose: "2";
130
- };
131
- };
132
-
133
- export { Button, type ButtonProps, colors, spacing, typography };
9
+ export { Button, type ButtonProps };
package/dist/index.js CHANGED
@@ -31,188 +31,29 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
31
31
  // src/index.ts
32
32
  var index_exports = {};
33
33
  __export(index_exports, {
34
- Button: () => Button,
35
- colors: () => colors,
36
- spacing: () => spacing,
37
- typography: () => typography
34
+ Button: () => Button
38
35
  });
39
36
  module.exports = __toCommonJS(index_exports);
40
37
 
41
38
  // src/components/Button/Button.tsx
42
39
  var React = __toESM(require("react"));
43
40
  var import_jsx_runtime = require("react/jsx-runtime");
44
- var baseStyles = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
45
- var variantStyles = {
46
- primary: "bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus-visible:ring-primary-500",
47
- secondary: "bg-secondary-600 text-white hover:bg-secondary-700 active:bg-secondary-800 focus-visible:ring-secondary-500",
48
- outline: "border-2 border-primary-600 text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500",
49
- ghost: "text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500",
50
- success: "bg-success-600 text-white hover:bg-success-700 active:bg-success-800 focus-visible:ring-success-500",
51
- warning: "bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800 focus-visible:ring-warning-500",
52
- error: "bg-error-600 text-white hover:bg-error-700 active:bg-error-800 focus-visible:ring-error-500"
53
- };
54
- var sizeStyles = {
55
- sm: "h-9 px-3 text-sm",
56
- md: "h-10 px-4 text-base",
57
- lg: "h-11 px-6 text-lg"
58
- };
59
41
  var Button = React.forwardRef(
60
- ({ className = "", variant = "primary", size = "md", children, ...props }, ref) => {
61
- const computedClassName = [
62
- baseStyles,
63
- variantStyles[variant],
64
- sizeStyles[size],
65
- className
66
- ].filter(Boolean).join(" ");
67
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, className: computedClassName, ...props, children });
42
+ ({ className = "", children, ...props }, ref) => {
43
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
44
+ "button",
45
+ {
46
+ ref,
47
+ className: `cursor-pointer inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`,
48
+ ...props,
49
+ children
50
+ }
51
+ );
68
52
  }
69
53
  );
70
54
  Button.displayName = "Button";
71
-
72
- // src/tokens/colors.ts
73
- var colors = {
74
- primary: {
75
- 50: "#eff6ff",
76
- 100: "#dbeafe",
77
- 200: "#bfdbfe",
78
- 300: "#93c5fd",
79
- 400: "#60a5fa",
80
- 500: "#3b82f6",
81
- 600: "#2563eb",
82
- 700: "#1d4ed8",
83
- 800: "#1e40af",
84
- 900: "#1e3a8a",
85
- 950: "#172554"
86
- },
87
- secondary: {
88
- 50: "#f8fafc",
89
- 100: "#f1f5f9",
90
- 200: "#e2e8f0",
91
- 300: "#cbd5e1",
92
- 400: "#94a3b8",
93
- 500: "#64748b",
94
- 600: "#475569",
95
- 700: "#334155",
96
- 800: "#1e293b",
97
- 900: "#0f172a",
98
- 950: "#020617"
99
- },
100
- success: {
101
- 50: "#f0fdf4",
102
- 100: "#dcfce7",
103
- 200: "#bbf7d0",
104
- 300: "#86efac",
105
- 400: "#4ade80",
106
- 500: "#22c55e",
107
- 600: "#16a34a",
108
- 700: "#15803d",
109
- 800: "#166534",
110
- 900: "#14532d",
111
- 950: "#052e16"
112
- },
113
- warning: {
114
- 50: "#fffbeb",
115
- 100: "#fef3c7",
116
- 200: "#fde68a",
117
- 300: "#fcd34d",
118
- 400: "#fbbf24",
119
- 500: "#f59e0b",
120
- 600: "#d97706",
121
- 700: "#b45309",
122
- 800: "#92400e",
123
- 900: "#78350f",
124
- 950: "#451a03"
125
- },
126
- error: {
127
- 50: "#fef2f2",
128
- 100: "#fee2e2",
129
- 200: "#fecaca",
130
- 300: "#fca5a5",
131
- 400: "#f87171",
132
- 500: "#ef4444",
133
- 600: "#dc2626",
134
- 700: "#b91c1c",
135
- 800: "#991b1b",
136
- 900: "#7f1d1d",
137
- 950: "#450a0a"
138
- },
139
- neutral: {
140
- 50: "#fafafa",
141
- 100: "#f5f5f5",
142
- 200: "#e5e5e5",
143
- 300: "#d4d4d4",
144
- 400: "#a3a3a3",
145
- 500: "#737373",
146
- 600: "#525252",
147
- 700: "#404040",
148
- 800: "#262626",
149
- 900: "#171717",
150
- 950: "#0a0a0a"
151
- }
152
- };
153
-
154
- // src/tokens/spacing.ts
155
- var spacing = {
156
- xs: "0.5rem",
157
- // 8px
158
- sm: "0.75rem",
159
- // 12px
160
- md: "1rem",
161
- // 16px
162
- lg: "1.5rem",
163
- // 24px
164
- xl: "2rem",
165
- // 32px
166
- "2xl": "3rem",
167
- // 48px
168
- "3xl": "4rem",
169
- // 64px
170
- "4xl": "6rem"
171
- // 96px
172
- };
173
-
174
- // src/tokens/typography.ts
175
- var typography = {
176
- fontSizes: {
177
- xs: "0.75rem",
178
- // 12px
179
- sm: "0.875rem",
180
- // 14px
181
- base: "1rem",
182
- // 16px
183
- lg: "1.125rem",
184
- // 18px
185
- xl: "1.25rem",
186
- // 20px
187
- "2xl": "1.5rem",
188
- // 24px
189
- "3xl": "1.875rem",
190
- // 30px
191
- "4xl": "2.25rem",
192
- // 36px
193
- "5xl": "3rem"
194
- // 48px
195
- },
196
- fontWeights: {
197
- light: "300",
198
- normal: "400",
199
- medium: "500",
200
- semibold: "600",
201
- bold: "700",
202
- extrabold: "800"
203
- },
204
- lineHeights: {
205
- tight: "1.25",
206
- normal: "1.5",
207
- relaxed: "1.75",
208
- loose: "2"
209
- }
210
- };
211
55
  // Annotate the CommonJS export names for ESM import in node:
212
56
  0 && (module.exports = {
213
- Button,
214
- colors,
215
- spacing,
216
- typography
57
+ Button
217
58
  });
218
59
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx","../src/tokens/colors.ts","../src/tokens/spacing.ts","../src/tokens/typography.ts"],"sourcesContent":["// Export components\r\nexport * from './components';\r\n\r\n// Export design tokens\r\nexport * from './tokens';\r\n\r\n","import * as React from 'react';\r\nimport { ButtonProps, ButtonSize, ButtonVariant } from './types';\r\n\r\nconst baseStyles =\r\n 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';\r\n\r\nconst variantStyles: Record<ButtonVariant, string> = {\r\n primary:\r\n 'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus-visible:ring-primary-500',\r\n secondary:\r\n 'bg-secondary-600 text-white hover:bg-secondary-700 active:bg-secondary-800 focus-visible:ring-secondary-500',\r\n outline:\r\n 'border-2 border-primary-600 text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500',\r\n ghost:\r\n 'text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500',\r\n success:\r\n 'bg-success-600 text-white hover:bg-success-700 active:bg-success-800 focus-visible:ring-success-500',\r\n warning:\r\n 'bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800 focus-visible:ring-warning-500',\r\n error:\r\n 'bg-error-600 text-white hover:bg-error-700 active:bg-error-800 focus-visible:ring-error-500',\r\n};\r\n\r\nconst sizeStyles: Record<ButtonSize, string> = {\r\n sm: 'h-9 px-3 text-sm',\r\n md: 'h-10 px-4 text-base',\r\n lg: 'h-11 px-6 text-lg',\r\n};\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n { className = '', variant = 'primary', size = 'md', children, ...props },\r\n ref\r\n ) => {\r\n const computedClassName = [\r\n baseStyles,\r\n variantStyles[variant],\r\n sizeStyles[size],\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n return (\r\n <button ref={ref} className={computedClassName} {...props}>\r\n {children}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = 'Button';\r\n","export const colors = {\r\n primary: {\r\n 50: '#eff6ff',\r\n 100: '#dbeafe',\r\n 200: '#bfdbfe',\r\n 300: '#93c5fd',\r\n 400: '#60a5fa',\r\n 500: '#3b82f6',\r\n 600: '#2563eb',\r\n 700: '#1d4ed8',\r\n 800: '#1e40af',\r\n 900: '#1e3a8a',\r\n 950: '#172554',\r\n },\r\n secondary: {\r\n 50: '#f8fafc',\r\n 100: '#f1f5f9',\r\n 200: '#e2e8f0',\r\n 300: '#cbd5e1',\r\n 400: '#94a3b8',\r\n 500: '#64748b',\r\n 600: '#475569',\r\n 700: '#334155',\r\n 800: '#1e293b',\r\n 900: '#0f172a',\r\n 950: '#020617',\r\n },\r\n success: {\r\n 50: '#f0fdf4',\r\n 100: '#dcfce7',\r\n 200: '#bbf7d0',\r\n 300: '#86efac',\r\n 400: '#4ade80',\r\n 500: '#22c55e',\r\n 600: '#16a34a',\r\n 700: '#15803d',\r\n 800: '#166534',\r\n 900: '#14532d',\r\n 950: '#052e16',\r\n },\r\n warning: {\r\n 50: '#fffbeb',\r\n 100: '#fef3c7',\r\n 200: '#fde68a',\r\n 300: '#fcd34d',\r\n 400: '#fbbf24',\r\n 500: '#f59e0b',\r\n 600: '#d97706',\r\n 700: '#b45309',\r\n 800: '#92400e',\r\n 900: '#78350f',\r\n 950: '#451a03',\r\n },\r\n error: {\r\n 50: '#fef2f2',\r\n 100: '#fee2e2',\r\n 200: '#fecaca',\r\n 300: '#fca5a5',\r\n 400: '#f87171',\r\n 500: '#ef4444',\r\n 600: '#dc2626',\r\n 700: '#b91c1c',\r\n 800: '#991b1b',\r\n 900: '#7f1d1d',\r\n 950: '#450a0a',\r\n },\r\n neutral: {\r\n 50: '#fafafa',\r\n 100: '#f5f5f5',\r\n 200: '#e5e5e5',\r\n 300: '#d4d4d4',\r\n 400: '#a3a3a3',\r\n 500: '#737373',\r\n 600: '#525252',\r\n 700: '#404040',\r\n 800: '#262626',\r\n 900: '#171717',\r\n 950: '#0a0a0a',\r\n },\r\n} as const;\r\n","export const spacing = {\r\n xs: '0.5rem', // 8px\r\n sm: '0.75rem', // 12px\r\n md: '1rem', // 16px\r\n lg: '1.5rem', // 24px\r\n xl: '2rem', // 32px\r\n '2xl': '3rem', // 48px\r\n '3xl': '4rem', // 64px\r\n '4xl': '6rem', // 96px\r\n} as const;\r\n","export const typography = {\r\n fontSizes: {\r\n xs: '0.75rem', // 12px\r\n sm: '0.875rem', // 14px\r\n base: '1rem', // 16px\r\n lg: '1.125rem', // 18px\r\n xl: '1.25rem', // 20px\r\n '2xl': '1.5rem', // 24px\r\n '3xl': '1.875rem', // 30px\r\n '4xl': '2.25rem', // 36px\r\n '5xl': '3rem', // 48px\r\n },\r\n fontWeights: {\r\n light: '300',\r\n normal: '400',\r\n medium: '500',\r\n semibold: '600',\r\n bold: '700',\r\n extrabold: '800',\r\n },\r\n lineHeights: {\r\n tight: '1.25',\r\n normal: '1.5',\r\n relaxed: '1.75',\r\n loose: '2',\r\n },\r\n} as const;\r\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx"],"sourcesContent":["// Export components\r\nexport * from './components';\r\n","import * as React from 'react';\r\nimport { ButtonProps } from './types';\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ className = '', children, ...props }, ref) => {\r\n return (\r\n <button \r\n ref={ref} \r\n className={`cursor-pointer inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`}\r\n {...props}\r\n >\r\n {children}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = 'Button';\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AAMjB;AAHC,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,YAAY,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,0OAA0O,SAAS;AAAA,QAC7P,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}
package/dist/index.mjs CHANGED
@@ -3,177 +3,21 @@
3
3
  // src/components/Button/Button.tsx
4
4
  import * as React from "react";
5
5
  import { jsx } from "react/jsx-runtime";
6
- var baseStyles = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
7
- var variantStyles = {
8
- primary: "bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus-visible:ring-primary-500",
9
- secondary: "bg-secondary-600 text-white hover:bg-secondary-700 active:bg-secondary-800 focus-visible:ring-secondary-500",
10
- outline: "border-2 border-primary-600 text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500",
11
- ghost: "text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500",
12
- success: "bg-success-600 text-white hover:bg-success-700 active:bg-success-800 focus-visible:ring-success-500",
13
- warning: "bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800 focus-visible:ring-warning-500",
14
- error: "bg-error-600 text-white hover:bg-error-700 active:bg-error-800 focus-visible:ring-error-500"
15
- };
16
- var sizeStyles = {
17
- sm: "h-9 px-3 text-sm",
18
- md: "h-10 px-4 text-base",
19
- lg: "h-11 px-6 text-lg"
20
- };
21
6
  var Button = React.forwardRef(
22
- ({ className = "", variant = "primary", size = "md", children, ...props }, ref) => {
23
- const computedClassName = [
24
- baseStyles,
25
- variantStyles[variant],
26
- sizeStyles[size],
27
- className
28
- ].filter(Boolean).join(" ");
29
- return /* @__PURE__ */ jsx("button", { ref, className: computedClassName, ...props, children });
7
+ ({ className = "", children, ...props }, ref) => {
8
+ return /* @__PURE__ */ jsx(
9
+ "button",
10
+ {
11
+ ref,
12
+ className: `cursor-pointer inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`,
13
+ ...props,
14
+ children
15
+ }
16
+ );
30
17
  }
31
18
  );
32
19
  Button.displayName = "Button";
33
-
34
- // src/tokens/colors.ts
35
- var colors = {
36
- primary: {
37
- 50: "#eff6ff",
38
- 100: "#dbeafe",
39
- 200: "#bfdbfe",
40
- 300: "#93c5fd",
41
- 400: "#60a5fa",
42
- 500: "#3b82f6",
43
- 600: "#2563eb",
44
- 700: "#1d4ed8",
45
- 800: "#1e40af",
46
- 900: "#1e3a8a",
47
- 950: "#172554"
48
- },
49
- secondary: {
50
- 50: "#f8fafc",
51
- 100: "#f1f5f9",
52
- 200: "#e2e8f0",
53
- 300: "#cbd5e1",
54
- 400: "#94a3b8",
55
- 500: "#64748b",
56
- 600: "#475569",
57
- 700: "#334155",
58
- 800: "#1e293b",
59
- 900: "#0f172a",
60
- 950: "#020617"
61
- },
62
- success: {
63
- 50: "#f0fdf4",
64
- 100: "#dcfce7",
65
- 200: "#bbf7d0",
66
- 300: "#86efac",
67
- 400: "#4ade80",
68
- 500: "#22c55e",
69
- 600: "#16a34a",
70
- 700: "#15803d",
71
- 800: "#166534",
72
- 900: "#14532d",
73
- 950: "#052e16"
74
- },
75
- warning: {
76
- 50: "#fffbeb",
77
- 100: "#fef3c7",
78
- 200: "#fde68a",
79
- 300: "#fcd34d",
80
- 400: "#fbbf24",
81
- 500: "#f59e0b",
82
- 600: "#d97706",
83
- 700: "#b45309",
84
- 800: "#92400e",
85
- 900: "#78350f",
86
- 950: "#451a03"
87
- },
88
- error: {
89
- 50: "#fef2f2",
90
- 100: "#fee2e2",
91
- 200: "#fecaca",
92
- 300: "#fca5a5",
93
- 400: "#f87171",
94
- 500: "#ef4444",
95
- 600: "#dc2626",
96
- 700: "#b91c1c",
97
- 800: "#991b1b",
98
- 900: "#7f1d1d",
99
- 950: "#450a0a"
100
- },
101
- neutral: {
102
- 50: "#fafafa",
103
- 100: "#f5f5f5",
104
- 200: "#e5e5e5",
105
- 300: "#d4d4d4",
106
- 400: "#a3a3a3",
107
- 500: "#737373",
108
- 600: "#525252",
109
- 700: "#404040",
110
- 800: "#262626",
111
- 900: "#171717",
112
- 950: "#0a0a0a"
113
- }
114
- };
115
-
116
- // src/tokens/spacing.ts
117
- var spacing = {
118
- xs: "0.5rem",
119
- // 8px
120
- sm: "0.75rem",
121
- // 12px
122
- md: "1rem",
123
- // 16px
124
- lg: "1.5rem",
125
- // 24px
126
- xl: "2rem",
127
- // 32px
128
- "2xl": "3rem",
129
- // 48px
130
- "3xl": "4rem",
131
- // 64px
132
- "4xl": "6rem"
133
- // 96px
134
- };
135
-
136
- // src/tokens/typography.ts
137
- var typography = {
138
- fontSizes: {
139
- xs: "0.75rem",
140
- // 12px
141
- sm: "0.875rem",
142
- // 14px
143
- base: "1rem",
144
- // 16px
145
- lg: "1.125rem",
146
- // 18px
147
- xl: "1.25rem",
148
- // 20px
149
- "2xl": "1.5rem",
150
- // 24px
151
- "3xl": "1.875rem",
152
- // 30px
153
- "4xl": "2.25rem",
154
- // 36px
155
- "5xl": "3rem"
156
- // 48px
157
- },
158
- fontWeights: {
159
- light: "300",
160
- normal: "400",
161
- medium: "500",
162
- semibold: "600",
163
- bold: "700",
164
- extrabold: "800"
165
- },
166
- lineHeights: {
167
- tight: "1.25",
168
- normal: "1.5",
169
- relaxed: "1.75",
170
- loose: "2"
171
- }
172
- };
173
20
  export {
174
- Button,
175
- colors,
176
- spacing,
177
- typography
21
+ Button
178
22
  };
179
23
  //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Button/Button.tsx","../src/tokens/colors.ts","../src/tokens/spacing.ts","../src/tokens/typography.ts"],"sourcesContent":["import * as React from 'react';\r\nimport { ButtonProps, ButtonSize, ButtonVariant } from './types';\r\n\r\nconst baseStyles =\r\n 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';\r\n\r\nconst variantStyles: Record<ButtonVariant, string> = {\r\n primary:\r\n 'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus-visible:ring-primary-500',\r\n secondary:\r\n 'bg-secondary-600 text-white hover:bg-secondary-700 active:bg-secondary-800 focus-visible:ring-secondary-500',\r\n outline:\r\n 'border-2 border-primary-600 text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500',\r\n ghost:\r\n 'text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500',\r\n success:\r\n 'bg-success-600 text-white hover:bg-success-700 active:bg-success-800 focus-visible:ring-success-500',\r\n warning:\r\n 'bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800 focus-visible:ring-warning-500',\r\n error:\r\n 'bg-error-600 text-white hover:bg-error-700 active:bg-error-800 focus-visible:ring-error-500',\r\n};\r\n\r\nconst sizeStyles: Record<ButtonSize, string> = {\r\n sm: 'h-9 px-3 text-sm',\r\n md: 'h-10 px-4 text-base',\r\n lg: 'h-11 px-6 text-lg',\r\n};\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n { className = '', variant = 'primary', size = 'md', children, ...props },\r\n ref\r\n ) => {\r\n const computedClassName = [\r\n baseStyles,\r\n variantStyles[variant],\r\n sizeStyles[size],\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n return (\r\n <button ref={ref} className={computedClassName} {...props}>\r\n {children}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = 'Button';\r\n","export const colors = {\r\n primary: {\r\n 50: '#eff6ff',\r\n 100: '#dbeafe',\r\n 200: '#bfdbfe',\r\n 300: '#93c5fd',\r\n 400: '#60a5fa',\r\n 500: '#3b82f6',\r\n 600: '#2563eb',\r\n 700: '#1d4ed8',\r\n 800: '#1e40af',\r\n 900: '#1e3a8a',\r\n 950: '#172554',\r\n },\r\n secondary: {\r\n 50: '#f8fafc',\r\n 100: '#f1f5f9',\r\n 200: '#e2e8f0',\r\n 300: '#cbd5e1',\r\n 400: '#94a3b8',\r\n 500: '#64748b',\r\n 600: '#475569',\r\n 700: '#334155',\r\n 800: '#1e293b',\r\n 900: '#0f172a',\r\n 950: '#020617',\r\n },\r\n success: {\r\n 50: '#f0fdf4',\r\n 100: '#dcfce7',\r\n 200: '#bbf7d0',\r\n 300: '#86efac',\r\n 400: '#4ade80',\r\n 500: '#22c55e',\r\n 600: '#16a34a',\r\n 700: '#15803d',\r\n 800: '#166534',\r\n 900: '#14532d',\r\n 950: '#052e16',\r\n },\r\n warning: {\r\n 50: '#fffbeb',\r\n 100: '#fef3c7',\r\n 200: '#fde68a',\r\n 300: '#fcd34d',\r\n 400: '#fbbf24',\r\n 500: '#f59e0b',\r\n 600: '#d97706',\r\n 700: '#b45309',\r\n 800: '#92400e',\r\n 900: '#78350f',\r\n 950: '#451a03',\r\n },\r\n error: {\r\n 50: '#fef2f2',\r\n 100: '#fee2e2',\r\n 200: '#fecaca',\r\n 300: '#fca5a5',\r\n 400: '#f87171',\r\n 500: '#ef4444',\r\n 600: '#dc2626',\r\n 700: '#b91c1c',\r\n 800: '#991b1b',\r\n 900: '#7f1d1d',\r\n 950: '#450a0a',\r\n },\r\n neutral: {\r\n 50: '#fafafa',\r\n 100: '#f5f5f5',\r\n 200: '#e5e5e5',\r\n 300: '#d4d4d4',\r\n 400: '#a3a3a3',\r\n 500: '#737373',\r\n 600: '#525252',\r\n 700: '#404040',\r\n 800: '#262626',\r\n 900: '#171717',\r\n 950: '#0a0a0a',\r\n },\r\n} as const;\r\n","export const spacing = {\r\n xs: '0.5rem', // 8px\r\n sm: '0.75rem', // 12px\r\n md: '1rem', // 16px\r\n lg: '1.5rem', // 24px\r\n xl: '2rem', // 32px\r\n '2xl': '3rem', // 48px\r\n '3xl': '4rem', // 64px\r\n '4xl': '6rem', // 96px\r\n} as const;\r\n","export const typography = {\r\n fontSizes: {\r\n xs: '0.75rem', // 12px\r\n sm: '0.875rem', // 14px\r\n base: '1rem', // 16px\r\n lg: '1.125rem', // 18px\r\n xl: '1.25rem', // 20px\r\n '2xl': '1.5rem', // 24px\r\n '3xl': '1.875rem', // 30px\r\n '4xl': '2.25rem', // 36px\r\n '5xl': '3rem', // 48px\r\n },\r\n fontWeights: {\r\n light: '300',\r\n normal: '400',\r\n medium: '500',\r\n semibold: '600',\r\n bold: '700',\r\n extrabold: '800',\r\n },\r\n lineHeights: {\r\n tight: '1.25',\r\n normal: '1.5',\r\n relaxed: '1.75',\r\n loose: '2',\r\n },\r\n} as const;\r\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { ButtonProps } from './types';\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n ({ className = '', children, ...props }, ref) => {\r\n return (\r\n <button \r\n ref={ref} \r\n className={`cursor-pointer inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`}\r\n {...props}\r\n >\r\n {children}\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = 'Button';\r\n"],"mappings":";;;AAAA,YAAY,WAAW;AAMjB;AAHC,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,YAAY,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,0OAA0O,SAAS;AAAA,QAC7P,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}
package/dist/styles.css CHANGED
@@ -7,42 +7,13 @@
7
7
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
8
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
9
  "Courier New", monospace;
10
- --color-white: #fff;
11
10
  --spacing: 0.25rem;
12
- --text-sm: 0.875rem;
13
- --text-sm--line-height: calc(1.25 / 0.875);
14
- --text-base: 1rem;
15
- --text-base--line-height: calc(1.5 / 1);
16
- --text-lg: 1.125rem;
17
- --text-lg--line-height: calc(1.75 / 1.125);
18
11
  --font-weight-medium: 500;
19
12
  --radius-md: 0.375rem;
20
13
  --default-transition-duration: 150ms;
21
14
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
22
15
  --default-font-family: var(--font-sans);
23
16
  --default-mono-font-family: var(--font-mono);
24
- --color-primary-50: #eff6ff;
25
- --color-primary-100: #dbeafe;
26
- --color-primary-500: #3b82f6;
27
- --color-primary-600: #2563eb;
28
- --color-primary-700: #1d4ed8;
29
- --color-primary-800: #1e40af;
30
- --color-secondary-500: #64748b;
31
- --color-secondary-600: #475569;
32
- --color-secondary-700: #334155;
33
- --color-secondary-800: #1e293b;
34
- --color-success-500: #22c55e;
35
- --color-success-600: #16a34a;
36
- --color-success-700: #15803d;
37
- --color-success-800: #166534;
38
- --color-warning-500: #f59e0b;
39
- --color-warning-600: #d97706;
40
- --color-warning-700: #b45309;
41
- --color-warning-800: #92400e;
42
- --color-error-500: #ef4444;
43
- --color-error-600: #dc2626;
44
- --color-error-700: #b91c1c;
45
- --color-error-800: #991b1b;
46
17
  }
47
18
  }
48
19
  @layer base {
@@ -197,14 +168,8 @@
197
168
  .inline-flex {
198
169
  display: inline-flex;
199
170
  }
200
- .h-9 {
201
- height: calc(var(--spacing) * 9);
202
- }
203
- .h-10 {
204
- height: calc(var(--spacing) * 10);
205
- }
206
- .h-11 {
207
- height: calc(var(--spacing) * 11);
171
+ .cursor-pointer {
172
+ cursor: pointer;
208
173
  }
209
174
  .items-center {
210
175
  align-items: center;
@@ -215,141 +180,27 @@
215
180
  .rounded-md {
216
181
  border-radius: var(--radius-md);
217
182
  }
218
- .border-2 {
219
- border-style: var(--tw-border-style);
220
- border-width: 2px;
221
- }
222
- .border-primary-600 {
223
- border-color: var(--color-primary-600);
224
- }
225
- .bg-error-600 {
226
- background-color: var(--color-error-600);
227
- }
228
- .bg-primary-600 {
229
- background-color: var(--color-primary-600);
230
- }
231
- .bg-secondary-600 {
232
- background-color: var(--color-secondary-600);
233
- }
234
- .bg-success-600 {
235
- background-color: var(--color-success-600);
236
- }
237
- .bg-warning-600 {
238
- background-color: var(--color-warning-600);
239
- }
240
- .px-3 {
241
- padding-inline: calc(var(--spacing) * 3);
242
- }
243
183
  .px-4 {
244
184
  padding-inline: calc(var(--spacing) * 4);
245
185
  }
246
- .px-6 {
247
- padding-inline: calc(var(--spacing) * 6);
248
- }
249
- .text-base {
250
- font-size: var(--text-base);
251
- line-height: var(--tw-leading, var(--text-base--line-height));
252
- }
253
- .text-lg {
254
- font-size: var(--text-lg);
255
- line-height: var(--tw-leading, var(--text-lg--line-height));
256
- }
257
- .text-sm {
258
- font-size: var(--text-sm);
259
- line-height: var(--tw-leading, var(--text-sm--line-height));
186
+ .py-2 {
187
+ padding-block: calc(var(--spacing) * 2);
260
188
  }
261
189
  .font-medium {
262
190
  --tw-font-weight: var(--font-weight-medium);
263
191
  font-weight: var(--font-weight-medium);
264
192
  }
265
- .text-primary-600 {
266
- color: var(--color-primary-600);
267
- }
268
- .text-white {
269
- color: var(--color-white);
270
- }
271
- .outline {
272
- outline-style: var(--tw-outline-style);
273
- outline-width: 1px;
274
- }
275
193
  .transition-colors {
276
194
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
277
195
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
278
196
  transition-duration: var(--tw-duration, var(--default-transition-duration));
279
197
  }
280
- .hover\:bg-error-700 {
281
- &:hover {
282
- @media (hover: hover) {
283
- background-color: var(--color-error-700);
284
- }
285
- }
286
- }
287
- .hover\:bg-primary-50 {
288
- &:hover {
289
- @media (hover: hover) {
290
- background-color: var(--color-primary-50);
291
- }
292
- }
293
- }
294
- .hover\:bg-primary-700 {
295
- &:hover {
296
- @media (hover: hover) {
297
- background-color: var(--color-primary-700);
298
- }
299
- }
300
- }
301
- .hover\:bg-secondary-700 {
302
- &:hover {
303
- @media (hover: hover) {
304
- background-color: var(--color-secondary-700);
305
- }
306
- }
307
- }
308
- .hover\:bg-success-700 {
309
- &:hover {
310
- @media (hover: hover) {
311
- background-color: var(--color-success-700);
312
- }
313
- }
314
- }
315
- .hover\:bg-warning-700 {
316
- &:hover {
317
- @media (hover: hover) {
318
- background-color: var(--color-warning-700);
319
- }
320
- }
321
- }
322
198
  .focus-visible\:ring-2 {
323
199
  &:focus-visible {
324
200
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
325
201
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
326
202
  }
327
203
  }
328
- .focus-visible\:ring-error-500 {
329
- &:focus-visible {
330
- --tw-ring-color: var(--color-error-500);
331
- }
332
- }
333
- .focus-visible\:ring-primary-500 {
334
- &:focus-visible {
335
- --tw-ring-color: var(--color-primary-500);
336
- }
337
- }
338
- .focus-visible\:ring-secondary-500 {
339
- &:focus-visible {
340
- --tw-ring-color: var(--color-secondary-500);
341
- }
342
- }
343
- .focus-visible\:ring-success-500 {
344
- &:focus-visible {
345
- --tw-ring-color: var(--color-success-500);
346
- }
347
- }
348
- .focus-visible\:ring-warning-500 {
349
- &:focus-visible {
350
- --tw-ring-color: var(--color-warning-500);
351
- }
352
- }
353
204
  .focus-visible\:ring-offset-2 {
354
205
  &:focus-visible {
355
206
  --tw-ring-offset-width: 2px;
@@ -362,36 +213,6 @@
362
213
  outline-style: none;
363
214
  }
364
215
  }
365
- .active\:bg-error-800 {
366
- &:active {
367
- background-color: var(--color-error-800);
368
- }
369
- }
370
- .active\:bg-primary-100 {
371
- &:active {
372
- background-color: var(--color-primary-100);
373
- }
374
- }
375
- .active\:bg-primary-800 {
376
- &:active {
377
- background-color: var(--color-primary-800);
378
- }
379
- }
380
- .active\:bg-secondary-800 {
381
- &:active {
382
- background-color: var(--color-secondary-800);
383
- }
384
- }
385
- .active\:bg-success-800 {
386
- &:active {
387
- background-color: var(--color-success-800);
388
- }
389
- }
390
- .active\:bg-warning-800 {
391
- &:active {
392
- background-color: var(--color-warning-800);
393
- }
394
- }
395
216
  .disabled\:pointer-events-none {
396
217
  &:disabled {
397
218
  pointer-events: none;
@@ -403,20 +224,10 @@
403
224
  }
404
225
  }
405
226
  }
406
- @property --tw-border-style {
407
- syntax: "*";
408
- inherits: false;
409
- initial-value: solid;
410
- }
411
227
  @property --tw-font-weight {
412
228
  syntax: "*";
413
229
  inherits: false;
414
230
  }
415
- @property --tw-outline-style {
416
- syntax: "*";
417
- inherits: false;
418
- initial-value: solid;
419
- }
420
231
  @property --tw-shadow {
421
232
  syntax: "*";
422
233
  inherits: false;
@@ -485,9 +296,7 @@
485
296
  @layer properties {
486
297
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
487
298
  *, ::before, ::after, ::backdrop {
488
- --tw-border-style: solid;
489
299
  --tw-font-weight: initial;
490
- --tw-outline-style: solid;
491
300
  --tw-shadow: 0 0 #0000;
492
301
  --tw-shadow-color: initial;
493
302
  --tw-shadow-alpha: 100%;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "soongle-ui",
3
- "version": "0.1.0",
4
- "description": "A design system library for React.js and Next.js with TailwindCSS v4",
3
+ "version": "0.1.2",
4
+ "description": "A design system library for React.js and Next.js with TailwindCSS v4 by Soongle",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
@@ -38,10 +38,6 @@
38
38
  "react": "^18.0.0 || ^19.0.0",
39
39
  "react-dom": "^18.0.0 || ^19.0.0"
40
40
  },
41
- "dependencies": {
42
- "class-variance-authority": "^0.7.0",
43
- "clsx": "^2.1.0"
44
- },
45
41
  "devDependencies": {
46
42
  "@tailwindcss/cli": "^4.1.18",
47
43
  "@types/react": "^18.2.48",