soongle-ui 0.1.1 → 0.1.3

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 +13 -128
  3. package/dist/index.d.ts +13 -128
  4. package/dist/index.js +93 -165
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +92 -161
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/styles.css +140 -133
  9. package/package.json +58 -51
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,18 @@
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
- interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6
- variant?: ButtonVariant;
7
- size?: ButtonSize;
8
- children: React.ReactNode;
3
+ interface ButtonProps$1 extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4
+ children?: React.ReactNode;
5
+ variant?: "default" | "primary" | "secondary" | "danger" | "ghost";
6
+ size?: "sm" | "md" | "lg";
7
+ className?: string;
9
8
  }
9
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps$1 & React.RefAttributes<HTMLButtonElement>>;
10
10
 
11
- declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
12
-
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
- };
11
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
12
+ children?: React.ReactNode;
13
+ variant?: "default" | "primary" | "secondary" | "danger" | "ghost";
14
+ size?: "sm" | "md" | "lg";
15
+ className?: string;
16
+ }
132
17
 
133
- export { Button, type ButtonProps, colors, spacing, typography };
18
+ export { Button, type ButtonProps };
package/dist/index.d.ts CHANGED
@@ -1,133 +1,18 @@
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
- interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6
- variant?: ButtonVariant;
7
- size?: ButtonSize;
8
- children: React.ReactNode;
3
+ interface ButtonProps$1 extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4
+ children?: React.ReactNode;
5
+ variant?: "default" | "primary" | "secondary" | "danger" | "ghost";
6
+ size?: "sm" | "md" | "lg";
7
+ className?: string;
9
8
  }
9
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps$1 & React.RefAttributes<HTMLButtonElement>>;
10
10
 
11
- declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
12
-
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
- };
11
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
12
+ children?: React.ReactNode;
13
+ variant?: "default" | "primary" | "secondary" | "danger" | "ghost";
14
+ size?: "sm" | "md" | "lg";
15
+ className?: string;
16
+ }
132
17
 
133
- export { Button, type ButtonProps, colors, spacing, typography };
18
+ export { Button, type ButtonProps };
package/dist/index.js CHANGED
@@ -31,188 +31,116 @@ 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
39
+ var React2 = __toESM(require("react"));
40
+
41
+ // src/components/Text/Text.tsx
42
42
  var React = __toESM(require("react"));
43
43
  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"
44
+ var sizeClasses = {
45
+ xs: "text-xs",
46
+ sm: "text-sm",
47
+ base: "text-base",
48
+ lg: "text-lg",
49
+ xl: "text-xl",
50
+ "2xl": "text-2xl",
51
+ "3xl": "text-3xl",
52
+ "4xl": "text-4xl"
53
+ };
54
+ var weightClasses = {
55
+ light: "font-light",
56
+ normal: "font-normal",
57
+ medium: "font-medium",
58
+ semibold: "font-semibold",
59
+ bold: "font-bold"
60
+ };
61
+ var colorClasses = {
62
+ default: "text-gray-900",
63
+ muted: "text-gray-500",
64
+ primary: "text-blue-600",
65
+ secondary: "text-green-600",
66
+ danger: "text-red-600",
67
+ success: "text-emerald-600"
53
68
  };
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"
69
+ var alignClasses = {
70
+ left: "text-left",
71
+ center: "text-center",
72
+ right: "text-right"
58
73
  };
59
- var Button = React.forwardRef(
60
- ({ className = "", variant = "primary", size = "md", children, ...props }, ref) => {
61
- const computedClassName = [
62
- baseStyles,
63
- variantStyles[variant],
64
- sizeStyles[size],
74
+ var Text = React.forwardRef(
75
+ ({
76
+ children,
77
+ as: Component = "p",
78
+ size = "base",
79
+ weight = "normal",
80
+ color = "default",
81
+ align = "left",
82
+ className = "",
83
+ ...props
84
+ }, ref) => {
85
+ const classes = [
86
+ sizeClasses[size],
87
+ weightClasses[weight],
88
+ colorClasses[color],
89
+ alignClasses[align],
65
90
  className
66
91
  ].filter(Boolean).join(" ");
67
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, className: computedClassName, ...props, children });
92
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref, className: classes, ...props, children });
68
93
  }
69
94
  );
70
- Button.displayName = "Button";
95
+ Text.displayName = "Text";
71
96
 
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
- }
97
+ // src/components/Button/Button.tsx
98
+ var import_jsx_runtime2 = require("react/jsx-runtime");
99
+ var variantClasses = {
100
+ default: "bg-gray-200 text-gray-900 hover:bg-gray-300",
101
+ primary: "bg-blue-600 text-white hover:bg-blue-700",
102
+ secondary: "bg-green-600 text-white hover:bg-green-700",
103
+ danger: "bg-red-600 text-white hover:bg-red-700",
104
+ ghost: "bg-transparent text-gray-700 hover:bg-gray-100"
152
105
  };
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
106
+ var sizeClasses2 = {
107
+ sm: "px-3 py-1.5",
108
+ md: "px-4 py-2",
109
+ lg: "px-6 py-3"
172
110
  };
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
- }
111
+ var textSizeMap = {
112
+ sm: "sm",
113
+ md: "base",
114
+ lg: "lg"
210
115
  };
116
+ var Button = React2.forwardRef(
117
+ ({ className = "", children, variant = "default", size = "md", ...props }, ref) => {
118
+ const variantClass = variantClasses[variant];
119
+ const sizeClass = sizeClasses2[size];
120
+ const textSize = textSizeMap[size];
121
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
122
+ "button",
123
+ {
124
+ ref,
125
+ className: `cursor-pointer 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 ${variantClass} ${sizeClass} ${className}`,
126
+ ...props,
127
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
128
+ Text,
129
+ {
130
+ as: "span",
131
+ size: textSize,
132
+ weight: "medium",
133
+ className: "leading-none",
134
+ children
135
+ }
136
+ )
137
+ }
138
+ );
139
+ }
140
+ );
141
+ Button.displayName = "Button";
211
142
  // Annotate the CommonJS export names for ESM import in node:
212
143
  0 && (module.exports = {
213
- Button,
214
- colors,
215
- spacing,
216
- typography
144
+ Button
217
145
  });
218
146
  //# 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","../src/components/Text/Text.tsx"],"sourcesContent":["// Export components\r\nexport * from './components';\r\n","import * as React from \"react\";\r\nimport { Text } from \"../Text/Text\";\r\n\r\nexport interface ButtonProps\r\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n children?: React.ReactNode;\r\n variant?: \"default\" | \"primary\" | \"secondary\" | \"danger\" | \"ghost\";\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n className?: string;\r\n}\r\n\r\nconst variantClasses = {\r\n default: \"bg-gray-200 text-gray-900 hover:bg-gray-300\",\r\n primary: \"bg-blue-600 text-white hover:bg-blue-700\",\r\n secondary: \"bg-green-600 text-white hover:bg-green-700\",\r\n danger: \"bg-red-600 text-white hover:bg-red-700\",\r\n ghost: \"bg-transparent text-gray-700 hover:bg-gray-100\",\r\n};\r\n\r\nconst sizeClasses = {\r\n sm: \"px-3 py-1.5\",\r\n md: \"px-4 py-2\",\r\n lg: \"px-6 py-3\",\r\n};\r\n\r\nconst textSizeMap = {\r\n sm: \"sm\" as const,\r\n md: \"base\" as const,\r\n lg: \"lg\" as const,\r\n};\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n { className = \"\", children, variant = \"default\", size = \"md\", ...props },\r\n ref\r\n ) => {\r\n const variantClass = variantClasses[variant];\r\n const sizeClass = sizeClasses[size];\r\n const textSize = textSizeMap[size];\r\n\r\n return (\r\n <button\r\n ref={ref}\r\n className={`cursor-pointer 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 ${variantClass} ${sizeClass} ${className}`}\r\n {...props}\r\n >\r\n <Text\r\n as=\"span\"\r\n size={textSize}\r\n weight=\"medium\"\r\n className=\"leading-none\"\r\n >\r\n {children}\r\n </Text>\r\n </button>\r\n );\r\n }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","import * as React from \"react\";\r\n\r\nexport interface TextProps {\r\n children?: React.ReactNode;\r\n as?: \"p\" | \"span\" | \"div\" | \"label\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\r\n weight?: \"light\" | \"normal\" | \"medium\" | \"semibold\" | \"bold\";\r\n color?: \"default\" | \"muted\" | \"primary\" | \"secondary\" | \"danger\" | \"success\";\r\n align?: \"left\" | \"center\" | \"right\";\r\n className?: string;\r\n}\r\n\r\nconst sizeClasses = {\r\n xs: \"text-xs\",\r\n sm: \"text-sm\",\r\n base: \"text-base\",\r\n lg: \"text-lg\",\r\n xl: \"text-xl\",\r\n \"2xl\": \"text-2xl\",\r\n \"3xl\": \"text-3xl\",\r\n \"4xl\": \"text-4xl\",\r\n};\r\n\r\nconst weightClasses = {\r\n light: \"font-light\",\r\n normal: \"font-normal\",\r\n medium: \"font-medium\",\r\n semibold: \"font-semibold\",\r\n bold: \"font-bold\",\r\n};\r\n\r\nconst colorClasses = {\r\n default: \"text-gray-900\",\r\n muted: \"text-gray-500\",\r\n primary: \"text-blue-600\",\r\n secondary: \"text-green-600\",\r\n danger: \"text-red-600\",\r\n success: \"text-emerald-600\",\r\n};\r\n\r\nconst alignClasses = {\r\n left: \"text-left\",\r\n center: \"text-center\",\r\n right: \"text-right\",\r\n};\r\n\r\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\r\n (\r\n {\r\n children,\r\n as: Component = \"p\",\r\n size = \"base\",\r\n weight = \"normal\",\r\n color = \"default\",\r\n align = \"left\",\r\n className = \"\",\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const classes = [\r\n sizeClasses[size],\r\n weightClasses[weight],\r\n colorClasses[color],\r\n alignClasses[align],\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(\" \");\r\n\r\n return (\r\n <Component ref={ref as any} className={classes} {...props}>\r\n {children}\r\n </Component>\r\n );\r\n }\r\n);\r\n\r\nText.displayName = \"Text\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACAvB,YAAuB;AAuEjB;AA3DN,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAEA,IAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEA,IAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,IAAM,eAAe;AAAA,EACnB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,IAAM,OAAa;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,IAAI,YAAY;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU;AAAA,MACd,YAAY,IAAI;AAAA,MAChB,cAAc,MAAM;AAAA,MACpB,aAAa,KAAK;AAAA,MAClB,aAAa,KAAK;AAAA,MAClB;AAAA,IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,4CAAC,aAAU,KAAiB,WAAW,SAAU,GAAG,OACjD,UACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;;;ADhCX,IAAAC,sBAAA;AAnCR,IAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAMC,eAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,SAAe;AAAA,EAC1B,CACE,EAAE,YAAY,IAAI,UAAU,UAAU,WAAW,OAAO,MAAM,GAAG,MAAM,GACvE,QACG;AACH,UAAM,eAAe,eAAe,OAAO;AAC3C,UAAM,YAAYA,aAAY,IAAI;AAClC,UAAM,WAAW,YAAY,IAAI;AAEjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,gOAAgO,YAAY,IAAI,SAAS,IAAI,SAAS;AAAA,QAChR,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":["React","import_jsx_runtime","sizeClasses"]}