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.
- package/README.md +1 -3
- package/dist/index.d.mts +13 -128
- package/dist/index.d.ts +13 -128
- package/dist/index.js +93 -165
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +92 -161
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +140 -133
- package/package.json +58 -51
package/dist/index.mjs
CHANGED
|
@@ -1,179 +1,110 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
// src/components/Button/Button.tsx
|
|
4
|
+
import * as React2 from "react";
|
|
5
|
+
|
|
6
|
+
// src/components/Text/Text.tsx
|
|
4
7
|
import * as React from "react";
|
|
5
8
|
import { jsx } from "react/jsx-runtime";
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
var sizeClasses = {
|
|
10
|
+
xs: "text-xs",
|
|
11
|
+
sm: "text-sm",
|
|
12
|
+
base: "text-base",
|
|
13
|
+
lg: "text-lg",
|
|
14
|
+
xl: "text-xl",
|
|
15
|
+
"2xl": "text-2xl",
|
|
16
|
+
"3xl": "text-3xl",
|
|
17
|
+
"4xl": "text-4xl"
|
|
18
|
+
};
|
|
19
|
+
var weightClasses = {
|
|
20
|
+
light: "font-light",
|
|
21
|
+
normal: "font-normal",
|
|
22
|
+
medium: "font-medium",
|
|
23
|
+
semibold: "font-semibold",
|
|
24
|
+
bold: "font-bold"
|
|
25
|
+
};
|
|
26
|
+
var colorClasses = {
|
|
27
|
+
default: "text-gray-900",
|
|
28
|
+
muted: "text-gray-500",
|
|
29
|
+
primary: "text-blue-600",
|
|
30
|
+
secondary: "text-green-600",
|
|
31
|
+
danger: "text-red-600",
|
|
32
|
+
success: "text-emerald-600"
|
|
15
33
|
};
|
|
16
|
-
var
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
34
|
+
var alignClasses = {
|
|
35
|
+
left: "text-left",
|
|
36
|
+
center: "text-center",
|
|
37
|
+
right: "text-right"
|
|
20
38
|
};
|
|
21
|
-
var
|
|
22
|
-
({
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
39
|
+
var Text = React.forwardRef(
|
|
40
|
+
({
|
|
41
|
+
children,
|
|
42
|
+
as: Component = "p",
|
|
43
|
+
size = "base",
|
|
44
|
+
weight = "normal",
|
|
45
|
+
color = "default",
|
|
46
|
+
align = "left",
|
|
47
|
+
className = "",
|
|
48
|
+
...props
|
|
49
|
+
}, ref) => {
|
|
50
|
+
const classes = [
|
|
51
|
+
sizeClasses[size],
|
|
52
|
+
weightClasses[weight],
|
|
53
|
+
colorClasses[color],
|
|
54
|
+
alignClasses[align],
|
|
27
55
|
className
|
|
28
56
|
].filter(Boolean).join(" ");
|
|
29
|
-
return /* @__PURE__ */ jsx(
|
|
57
|
+
return /* @__PURE__ */ jsx(Component, { ref, className: classes, ...props, children });
|
|
30
58
|
}
|
|
31
59
|
);
|
|
32
|
-
|
|
60
|
+
Text.displayName = "Text";
|
|
33
61
|
|
|
34
|
-
// src/
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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
|
-
}
|
|
62
|
+
// src/components/Button/Button.tsx
|
|
63
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
64
|
+
var variantClasses = {
|
|
65
|
+
default: "bg-gray-200 text-gray-900 hover:bg-gray-300",
|
|
66
|
+
primary: "bg-blue-600 text-white hover:bg-blue-700",
|
|
67
|
+
secondary: "bg-green-600 text-white hover:bg-green-700",
|
|
68
|
+
danger: "bg-red-600 text-white hover:bg-red-700",
|
|
69
|
+
ghost: "bg-transparent text-gray-700 hover:bg-gray-100"
|
|
114
70
|
};
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
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
|
|
71
|
+
var sizeClasses2 = {
|
|
72
|
+
sm: "px-3 py-1.5",
|
|
73
|
+
md: "px-4 py-2",
|
|
74
|
+
lg: "px-6 py-3"
|
|
134
75
|
};
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
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
|
-
}
|
|
76
|
+
var textSizeMap = {
|
|
77
|
+
sm: "sm",
|
|
78
|
+
md: "base",
|
|
79
|
+
lg: "lg"
|
|
172
80
|
};
|
|
81
|
+
var Button = React2.forwardRef(
|
|
82
|
+
({ className = "", children, variant = "default", size = "md", ...props }, ref) => {
|
|
83
|
+
const variantClass = variantClasses[variant];
|
|
84
|
+
const sizeClass = sizeClasses2[size];
|
|
85
|
+
const textSize = textSizeMap[size];
|
|
86
|
+
return /* @__PURE__ */ jsx2(
|
|
87
|
+
"button",
|
|
88
|
+
{
|
|
89
|
+
ref,
|
|
90
|
+
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}`,
|
|
91
|
+
...props,
|
|
92
|
+
children: /* @__PURE__ */ jsx2(
|
|
93
|
+
Text,
|
|
94
|
+
{
|
|
95
|
+
as: "span",
|
|
96
|
+
size: textSize,
|
|
97
|
+
weight: "medium",
|
|
98
|
+
className: "leading-none",
|
|
99
|
+
children
|
|
100
|
+
}
|
|
101
|
+
)
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
);
|
|
106
|
+
Button.displayName = "Button";
|
|
173
107
|
export {
|
|
174
|
-
Button
|
|
175
|
-
colors,
|
|
176
|
-
spacing,
|
|
177
|
-
typography
|
|
108
|
+
Button
|
|
178
109
|
};
|
|
179
110
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/Button.tsx","../src/
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Text/Text.tsx"],"sourcesContent":["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,YAAYA,YAAW;;;ACAvB,YAAY,WAAW;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,oBAAC,aAAU,KAAiB,WAAW,SAAU,GAAG,OACjD,UACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;;;ADhCX,gBAAAC,YAAA;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,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,gOAAgO,YAAY,IAAI,SAAS,IAAI,SAAS;AAAA,QAChR,GAAG;AAAA,QAEJ,0BAAAA;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","jsx","sizeClasses"]}
|