the-omelet-ui 0.1.3 → 0.1.5
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/dist/index.cjs +143 -9
- package/dist/index.d.cts +43 -3
- package/dist/index.d.ts +43 -3
- package/dist/index.js +144 -11
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -27,26 +27,160 @@ function _interopNamespace(e) {
|
|
|
27
27
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
28
28
|
|
|
29
29
|
// src/button.tsx
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
|
|
31
|
+
// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
|
|
32
|
+
function r(e) {
|
|
33
|
+
var t, f, n = "";
|
|
34
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
35
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
36
|
+
var o = e.length;
|
|
37
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
38
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
39
|
+
return n;
|
|
40
|
+
}
|
|
41
|
+
function clsx() {
|
|
42
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
43
|
+
return n;
|
|
44
|
+
}
|
|
45
|
+
var clsx_default = clsx;
|
|
46
|
+
|
|
47
|
+
// src/utils/cn.ts
|
|
48
|
+
var cn = (...inputs) => tailwindMerge.twMerge(clsx_default(inputs));
|
|
49
|
+
var buttonStyles = classVarianceAuthority.cva(
|
|
50
|
+
// base
|
|
51
|
+
"inline-flex items-center justify-center rounded-md font-medium outline-none text-[18px] cursor-pointertransition-colors focus-visible:ring-2 ring-black/20 disabled:pointer-events-none disabled:bg-[#afafaf]",
|
|
32
52
|
{
|
|
33
53
|
variants: {
|
|
34
54
|
variant: {
|
|
35
|
-
solid: "
|
|
36
|
-
outline: "border
|
|
37
|
-
ghost: "
|
|
55
|
+
solid: "",
|
|
56
|
+
outline: "border bg-transparent",
|
|
57
|
+
ghost: "bg-transparent"
|
|
38
58
|
},
|
|
39
|
-
size: {
|
|
59
|
+
size: {
|
|
60
|
+
sm: "h-[32px] p-3 text-sm",
|
|
61
|
+
md: "h-[48px] p-4 text-sm",
|
|
62
|
+
lg: "h-[56px] p-5 text-base"
|
|
63
|
+
},
|
|
64
|
+
color: {
|
|
65
|
+
// แผงสีพรีเซ็ต (เพิ่มได้ตามต้องการ)
|
|
66
|
+
neutral: "",
|
|
67
|
+
primary: "",
|
|
68
|
+
red: "",
|
|
69
|
+
green: "",
|
|
70
|
+
blue: "",
|
|
71
|
+
yellow: "",
|
|
72
|
+
violet: ""
|
|
73
|
+
}
|
|
40
74
|
},
|
|
41
|
-
|
|
75
|
+
// ใส่สีตาม variant ผ่าน compoundVariants
|
|
76
|
+
compoundVariants: [
|
|
77
|
+
// SOLID
|
|
78
|
+
{ variant: "solid", color: "neutral", class: "bg-neutral-900 text-white hover:bg-neutral-800" },
|
|
79
|
+
{ variant: "solid", color: "primary", class: "bg-black text-white hover:bg-black/85" },
|
|
80
|
+
{ variant: "solid", color: "red", class: "bg-red-600 text-white hover:bg-red-700" },
|
|
81
|
+
{ variant: "solid", color: "green", class: "bg-green-600 text-white hover:bg-green-700" },
|
|
82
|
+
{ variant: "solid", color: "blue", class: "bg-blue-600 text-white hover:bg-blue-700" },
|
|
83
|
+
{ variant: "solid", color: "yellow", class: "bg-yellow-500 text-black hover:bg-yellow-600" },
|
|
84
|
+
{ variant: "solid", color: "violet", class: "bg-violet-600 text-white hover:bg-violet-700" },
|
|
85
|
+
// OUTLINE
|
|
86
|
+
{ variant: "outline", color: "neutral", class: "border-neutral-900 text-neutral-900 hover:bg-neutral-50" },
|
|
87
|
+
{ variant: "outline", color: "primary", class: "border-black text-black hover:bg-black/[0.06]" },
|
|
88
|
+
{ variant: "outline", color: "red", class: "border-red-600 text-red-700 hover:bg-red-50" },
|
|
89
|
+
{ variant: "outline", color: "green", class: "border-green-600 text-green-700 hover:bg-green-50" },
|
|
90
|
+
{ variant: "outline", color: "blue", class: "border-blue-600 text-blue-700 hover:bg-blue-50" },
|
|
91
|
+
{ variant: "outline", color: "yellow", class: "border-yellow-500 text-yellow-700 hover:bg-yellow-50" },
|
|
92
|
+
{ variant: "outline", color: "violet", class: "border-violet-600 text-violet-700 hover:bg-violet-50" },
|
|
93
|
+
// GHOST
|
|
94
|
+
{ variant: "ghost", color: "neutral", class: "text-neutral-900 hover:bg-neutral-50" },
|
|
95
|
+
{ variant: "ghost", color: "primary", class: "text-black hover:bg-black/[0.06]" },
|
|
96
|
+
{ variant: "ghost", color: "red", class: "text-red-700 hover:bg-red-50" },
|
|
97
|
+
{ variant: "ghost", color: "green", class: "text-green-700 hover:bg-green-50" },
|
|
98
|
+
{ variant: "ghost", color: "blue", class: "text-blue-700 hover:bg-blue-50" },
|
|
99
|
+
{ variant: "ghost", color: "yellow", class: "text-yellow-700 hover:bg-yellow-50" },
|
|
100
|
+
{ variant: "ghost", color: "violet", class: "text-violet-700 hover:bg-violet-50" }
|
|
101
|
+
],
|
|
102
|
+
defaultVariants: {
|
|
103
|
+
variant: "solid",
|
|
104
|
+
size: "md",
|
|
105
|
+
color: "primary"
|
|
106
|
+
}
|
|
42
107
|
}
|
|
43
108
|
);
|
|
44
109
|
var Button = React__namespace.forwardRef(
|
|
45
|
-
({ className, variant, size, asChild, ...props }, ref) => {
|
|
110
|
+
({ className, variant, size, color, asChild, ...props }, ref) => {
|
|
46
111
|
const Comp = asChild ? reactSlot.Slot : "button";
|
|
47
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
112
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
+
Comp,
|
|
114
|
+
{
|
|
115
|
+
ref,
|
|
116
|
+
className: cn(buttonStyles({ variant, size, color }), className),
|
|
117
|
+
...props
|
|
118
|
+
}
|
|
119
|
+
);
|
|
48
120
|
}
|
|
49
121
|
);
|
|
50
122
|
Button.displayName = "Button";
|
|
123
|
+
var inputStyles = classVarianceAuthority.cva(
|
|
124
|
+
// base
|
|
125
|
+
"block w-full rounded-md bg-white outline-none text-sm borderborder disabled:border-none transition-shadow disabled:bg-[#f4f4f4] disabled:pointer-events-none disabled:text-[#BDC2BE] disabled:font-boldfocus-visible:ring-2",
|
|
126
|
+
{
|
|
127
|
+
variants: {
|
|
128
|
+
size: {
|
|
129
|
+
sm: "px-2 py-3",
|
|
130
|
+
md: "px-2 py-4",
|
|
131
|
+
lg: "px-4 py-6"
|
|
132
|
+
},
|
|
133
|
+
tone: {
|
|
134
|
+
neutral: "border border-[#C9D7E3] focus-visible:ring-black/20",
|
|
135
|
+
success: "border border-green-500/60 focus-visible:ring-green-300",
|
|
136
|
+
danger: "border border-red-500/60 focus-visible:ring-red-300",
|
|
137
|
+
warning: "border border-yellow-500/60 focus-visible:ring-yellow-300",
|
|
138
|
+
info: "border border-blue-500/60 focus-visible:ring-blue-300"
|
|
139
|
+
},
|
|
140
|
+
withStart: { true: "", false: "" },
|
|
141
|
+
withEnd: { true: "", false: "" }
|
|
142
|
+
},
|
|
143
|
+
compoundVariants: [
|
|
144
|
+
// เพิ่ม padding ด้านซ้าย/ขวา เมื่อมี adornment
|
|
145
|
+
{ withStart: true, class: "ps-10" },
|
|
146
|
+
{ withEnd: true, class: "pe-10" }
|
|
147
|
+
],
|
|
148
|
+
defaultVariants: { size: "md", tone: "neutral" }
|
|
149
|
+
}
|
|
150
|
+
);
|
|
151
|
+
var TextInput = React__namespace.forwardRef(
|
|
152
|
+
({ className, start, end, size, tone, withStart, withEnd, error, label, required, disabled = false, ...props }, ref) => {
|
|
153
|
+
const showStart = withStart ?? Boolean(start);
|
|
154
|
+
const showEnd = withEnd ?? Boolean(end);
|
|
155
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-2", children: [
|
|
156
|
+
label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-sm text-[#444] font-bold", children: [
|
|
157
|
+
required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" }),
|
|
158
|
+
label
|
|
159
|
+
] }),
|
|
160
|
+
start ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
161
|
+
"div",
|
|
162
|
+
{
|
|
163
|
+
className: "pointer-events-none absolute inset-y-0 left-0 flex items-center ps-3",
|
|
164
|
+
"aria-hidden": "true",
|
|
165
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-black/50", children: start })
|
|
166
|
+
}
|
|
167
|
+
) : null,
|
|
168
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
169
|
+
"input",
|
|
170
|
+
{
|
|
171
|
+
ref,
|
|
172
|
+
"data-state": error ? "invalid" : void 0,
|
|
173
|
+
className: cn(inputStyles({ size, tone, withStart: showStart, withEnd: showEnd }), className),
|
|
174
|
+
disabled,
|
|
175
|
+
...props
|
|
176
|
+
}
|
|
177
|
+
),
|
|
178
|
+
end ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pe-3", children: end }) : null,
|
|
179
|
+
error && /* @__PURE__ */ jsxRuntime.jsx("small", { className: "text-red-500 text-xs", children: error })
|
|
180
|
+
] });
|
|
181
|
+
}
|
|
182
|
+
);
|
|
183
|
+
TextInput.displayName = "TextInput";
|
|
51
184
|
|
|
52
185
|
exports.Button = Button;
|
|
186
|
+
exports.TextInput = TextInput;
|
package/dist/index.d.cts
CHANGED
|
@@ -2,13 +2,53 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* variant: solid | outline | ghost
|
|
7
|
+
* color: neutral | primary | red | green | blue | yellow | violet
|
|
8
|
+
* size: sm | md | lg
|
|
9
|
+
*
|
|
10
|
+
* หมายเหตุ:
|
|
11
|
+
* - สามารถ override สีพื้นหลัง/เส้นขอบด้วย className เช่น "bg-rose-600 hover:bg-rose-700"
|
|
12
|
+
* โดย className จะมากลบของเดิม (twMerge)
|
|
13
|
+
*/
|
|
14
|
+
declare const buttonStyles: (props?: ({
|
|
6
15
|
variant?: "solid" | "outline" | "ghost" | null | undefined;
|
|
7
16
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
17
|
+
color?: "neutral" | "primary" | "red" | "green" | "blue" | "yellow" | "violet" | null | undefined;
|
|
8
18
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
|
-
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof
|
|
19
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonStyles> {
|
|
10
20
|
asChild?: boolean;
|
|
21
|
+
color?: "neutral" | "primary" | "red" | "green" | "blue" | "yellow" | "violet";
|
|
22
|
+
size?: "sm" | "md" | "lg";
|
|
11
23
|
}
|
|
12
24
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
13
25
|
|
|
14
|
-
|
|
26
|
+
/**
|
|
27
|
+
* TextInput
|
|
28
|
+
* - size: sm | md | lg
|
|
29
|
+
* - tone: neutral | success | danger | warning | info
|
|
30
|
+
* - withStart / withEnd: เพิ่ม padding ให้ input เมื่อมี prefix/suffix
|
|
31
|
+
* - error: ใส่ data-state="invalid" อัตโนมัติ (ช่วยเขียน CSS เพิ่มได้ถ้าต้องการ)
|
|
32
|
+
*
|
|
33
|
+
* หมายเหตุ:
|
|
34
|
+
* - อยากปรับสีเอง ใช้ className เช่น "border-rose-600 focus-visible:ring-rose-300"
|
|
35
|
+
* className จะ override โทนเดิมให้โดยอัตโนมัติ (ผ่าน twMerge ใน cn)
|
|
36
|
+
*/
|
|
37
|
+
declare const inputStyles: (props?: ({
|
|
38
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
39
|
+
tone?: "neutral" | "success" | "danger" | "warning" | "info" | null | undefined;
|
|
40
|
+
withStart?: boolean | null | undefined;
|
|
41
|
+
withEnd?: boolean | null | undefined;
|
|
42
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
43
|
+
interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputStyles> {
|
|
44
|
+
/** องค์ประกอบด้านซ้าย เช่น ไอคอน */
|
|
45
|
+
start?: React.ReactNode;
|
|
46
|
+
/** องค์ประกอบด้านขวา เช่น ปุ่ม clear / ไอคอน */
|
|
47
|
+
end?: React.ReactNode;
|
|
48
|
+
/** แสดงเป็นสถานะ error (ใส่ data-state="invalid") */
|
|
49
|
+
error?: string;
|
|
50
|
+
label?: string;
|
|
51
|
+
}
|
|
52
|
+
declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
53
|
+
|
|
54
|
+
export { Button, type ButtonProps, TextInput, type TextInputProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,13 +2,53 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* variant: solid | outline | ghost
|
|
7
|
+
* color: neutral | primary | red | green | blue | yellow | violet
|
|
8
|
+
* size: sm | md | lg
|
|
9
|
+
*
|
|
10
|
+
* หมายเหตุ:
|
|
11
|
+
* - สามารถ override สีพื้นหลัง/เส้นขอบด้วย className เช่น "bg-rose-600 hover:bg-rose-700"
|
|
12
|
+
* โดย className จะมากลบของเดิม (twMerge)
|
|
13
|
+
*/
|
|
14
|
+
declare const buttonStyles: (props?: ({
|
|
6
15
|
variant?: "solid" | "outline" | "ghost" | null | undefined;
|
|
7
16
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
17
|
+
color?: "neutral" | "primary" | "red" | "green" | "blue" | "yellow" | "violet" | null | undefined;
|
|
8
18
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
|
-
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof
|
|
19
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonStyles> {
|
|
10
20
|
asChild?: boolean;
|
|
21
|
+
color?: "neutral" | "primary" | "red" | "green" | "blue" | "yellow" | "violet";
|
|
22
|
+
size?: "sm" | "md" | "lg";
|
|
11
23
|
}
|
|
12
24
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
13
25
|
|
|
14
|
-
|
|
26
|
+
/**
|
|
27
|
+
* TextInput
|
|
28
|
+
* - size: sm | md | lg
|
|
29
|
+
* - tone: neutral | success | danger | warning | info
|
|
30
|
+
* - withStart / withEnd: เพิ่ม padding ให้ input เมื่อมี prefix/suffix
|
|
31
|
+
* - error: ใส่ data-state="invalid" อัตโนมัติ (ช่วยเขียน CSS เพิ่มได้ถ้าต้องการ)
|
|
32
|
+
*
|
|
33
|
+
* หมายเหตุ:
|
|
34
|
+
* - อยากปรับสีเอง ใช้ className เช่น "border-rose-600 focus-visible:ring-rose-300"
|
|
35
|
+
* className จะ override โทนเดิมให้โดยอัตโนมัติ (ผ่าน twMerge ใน cn)
|
|
36
|
+
*/
|
|
37
|
+
declare const inputStyles: (props?: ({
|
|
38
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
39
|
+
tone?: "neutral" | "success" | "danger" | "warning" | "info" | null | undefined;
|
|
40
|
+
withStart?: boolean | null | undefined;
|
|
41
|
+
withEnd?: boolean | null | undefined;
|
|
42
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
43
|
+
interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputStyles> {
|
|
44
|
+
/** องค์ประกอบด้านซ้าย เช่น ไอคอน */
|
|
45
|
+
start?: React.ReactNode;
|
|
46
|
+
/** องค์ประกอบด้านขวา เช่น ปุ่ม clear / ไอคอน */
|
|
47
|
+
end?: React.ReactNode;
|
|
48
|
+
/** แสดงเป็นสถานะ error (ใส่ data-state="invalid") */
|
|
49
|
+
error?: string;
|
|
50
|
+
label?: string;
|
|
51
|
+
}
|
|
52
|
+
declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
53
|
+
|
|
54
|
+
export { Button, type ButtonProps, TextInput, type TextInputProps };
|
package/dist/index.js
CHANGED
|
@@ -2,29 +2,162 @@ import * as React from 'react';
|
|
|
2
2
|
import { Slot } from '@radix-ui/react-slot';
|
|
3
3
|
import { cva } from 'class-variance-authority';
|
|
4
4
|
import { twMerge } from 'tailwind-merge';
|
|
5
|
-
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
7
|
// src/button.tsx
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
|
|
9
|
+
// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
|
|
10
|
+
function r(e) {
|
|
11
|
+
var t, f, n = "";
|
|
12
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
13
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
14
|
+
var o = e.length;
|
|
15
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
16
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
17
|
+
return n;
|
|
18
|
+
}
|
|
19
|
+
function clsx() {
|
|
20
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
21
|
+
return n;
|
|
22
|
+
}
|
|
23
|
+
var clsx_default = clsx;
|
|
24
|
+
|
|
25
|
+
// src/utils/cn.ts
|
|
26
|
+
var cn = (...inputs) => twMerge(clsx_default(inputs));
|
|
27
|
+
var buttonStyles = cva(
|
|
28
|
+
// base
|
|
29
|
+
"inline-flex items-center justify-center rounded-md font-medium outline-none text-[18px] cursor-pointertransition-colors focus-visible:ring-2 ring-black/20 disabled:pointer-events-none disabled:bg-[#afafaf]",
|
|
10
30
|
{
|
|
11
31
|
variants: {
|
|
12
32
|
variant: {
|
|
13
|
-
solid: "
|
|
14
|
-
outline: "border
|
|
15
|
-
ghost: "
|
|
33
|
+
solid: "",
|
|
34
|
+
outline: "border bg-transparent",
|
|
35
|
+
ghost: "bg-transparent"
|
|
36
|
+
},
|
|
37
|
+
size: {
|
|
38
|
+
sm: "h-[32px] p-3 text-sm",
|
|
39
|
+
md: "h-[48px] p-4 text-sm",
|
|
40
|
+
lg: "h-[56px] p-5 text-base"
|
|
16
41
|
},
|
|
17
|
-
|
|
42
|
+
color: {
|
|
43
|
+
// แผงสีพรีเซ็ต (เพิ่มได้ตามต้องการ)
|
|
44
|
+
neutral: "",
|
|
45
|
+
primary: "",
|
|
46
|
+
red: "",
|
|
47
|
+
green: "",
|
|
48
|
+
blue: "",
|
|
49
|
+
yellow: "",
|
|
50
|
+
violet: ""
|
|
51
|
+
}
|
|
18
52
|
},
|
|
19
|
-
|
|
53
|
+
// ใส่สีตาม variant ผ่าน compoundVariants
|
|
54
|
+
compoundVariants: [
|
|
55
|
+
// SOLID
|
|
56
|
+
{ variant: "solid", color: "neutral", class: "bg-neutral-900 text-white hover:bg-neutral-800" },
|
|
57
|
+
{ variant: "solid", color: "primary", class: "bg-black text-white hover:bg-black/85" },
|
|
58
|
+
{ variant: "solid", color: "red", class: "bg-red-600 text-white hover:bg-red-700" },
|
|
59
|
+
{ variant: "solid", color: "green", class: "bg-green-600 text-white hover:bg-green-700" },
|
|
60
|
+
{ variant: "solid", color: "blue", class: "bg-blue-600 text-white hover:bg-blue-700" },
|
|
61
|
+
{ variant: "solid", color: "yellow", class: "bg-yellow-500 text-black hover:bg-yellow-600" },
|
|
62
|
+
{ variant: "solid", color: "violet", class: "bg-violet-600 text-white hover:bg-violet-700" },
|
|
63
|
+
// OUTLINE
|
|
64
|
+
{ variant: "outline", color: "neutral", class: "border-neutral-900 text-neutral-900 hover:bg-neutral-50" },
|
|
65
|
+
{ variant: "outline", color: "primary", class: "border-black text-black hover:bg-black/[0.06]" },
|
|
66
|
+
{ variant: "outline", color: "red", class: "border-red-600 text-red-700 hover:bg-red-50" },
|
|
67
|
+
{ variant: "outline", color: "green", class: "border-green-600 text-green-700 hover:bg-green-50" },
|
|
68
|
+
{ variant: "outline", color: "blue", class: "border-blue-600 text-blue-700 hover:bg-blue-50" },
|
|
69
|
+
{ variant: "outline", color: "yellow", class: "border-yellow-500 text-yellow-700 hover:bg-yellow-50" },
|
|
70
|
+
{ variant: "outline", color: "violet", class: "border-violet-600 text-violet-700 hover:bg-violet-50" },
|
|
71
|
+
// GHOST
|
|
72
|
+
{ variant: "ghost", color: "neutral", class: "text-neutral-900 hover:bg-neutral-50" },
|
|
73
|
+
{ variant: "ghost", color: "primary", class: "text-black hover:bg-black/[0.06]" },
|
|
74
|
+
{ variant: "ghost", color: "red", class: "text-red-700 hover:bg-red-50" },
|
|
75
|
+
{ variant: "ghost", color: "green", class: "text-green-700 hover:bg-green-50" },
|
|
76
|
+
{ variant: "ghost", color: "blue", class: "text-blue-700 hover:bg-blue-50" },
|
|
77
|
+
{ variant: "ghost", color: "yellow", class: "text-yellow-700 hover:bg-yellow-50" },
|
|
78
|
+
{ variant: "ghost", color: "violet", class: "text-violet-700 hover:bg-violet-50" }
|
|
79
|
+
],
|
|
80
|
+
defaultVariants: {
|
|
81
|
+
variant: "solid",
|
|
82
|
+
size: "md",
|
|
83
|
+
color: "primary"
|
|
84
|
+
}
|
|
20
85
|
}
|
|
21
86
|
);
|
|
22
87
|
var Button = React.forwardRef(
|
|
23
|
-
({ className, variant, size, asChild, ...props }, ref) => {
|
|
88
|
+
({ className, variant, size, color, asChild, ...props }, ref) => {
|
|
24
89
|
const Comp = asChild ? Slot : "button";
|
|
25
|
-
return /* @__PURE__ */ jsx(
|
|
90
|
+
return /* @__PURE__ */ jsx(
|
|
91
|
+
Comp,
|
|
92
|
+
{
|
|
93
|
+
ref,
|
|
94
|
+
className: cn(buttonStyles({ variant, size, color }), className),
|
|
95
|
+
...props
|
|
96
|
+
}
|
|
97
|
+
);
|
|
26
98
|
}
|
|
27
99
|
);
|
|
28
100
|
Button.displayName = "Button";
|
|
101
|
+
var inputStyles = cva(
|
|
102
|
+
// base
|
|
103
|
+
"block w-full rounded-md bg-white outline-none text-sm borderborder disabled:border-none transition-shadow disabled:bg-[#f4f4f4] disabled:pointer-events-none disabled:text-[#BDC2BE] disabled:font-boldfocus-visible:ring-2",
|
|
104
|
+
{
|
|
105
|
+
variants: {
|
|
106
|
+
size: {
|
|
107
|
+
sm: "px-2 py-3",
|
|
108
|
+
md: "px-2 py-4",
|
|
109
|
+
lg: "px-4 py-6"
|
|
110
|
+
},
|
|
111
|
+
tone: {
|
|
112
|
+
neutral: "border border-[#C9D7E3] focus-visible:ring-black/20",
|
|
113
|
+
success: "border border-green-500/60 focus-visible:ring-green-300",
|
|
114
|
+
danger: "border border-red-500/60 focus-visible:ring-red-300",
|
|
115
|
+
warning: "border border-yellow-500/60 focus-visible:ring-yellow-300",
|
|
116
|
+
info: "border border-blue-500/60 focus-visible:ring-blue-300"
|
|
117
|
+
},
|
|
118
|
+
withStart: { true: "", false: "" },
|
|
119
|
+
withEnd: { true: "", false: "" }
|
|
120
|
+
},
|
|
121
|
+
compoundVariants: [
|
|
122
|
+
// เพิ่ม padding ด้านซ้าย/ขวา เมื่อมี adornment
|
|
123
|
+
{ withStart: true, class: "ps-10" },
|
|
124
|
+
{ withEnd: true, class: "pe-10" }
|
|
125
|
+
],
|
|
126
|
+
defaultVariants: { size: "md", tone: "neutral" }
|
|
127
|
+
}
|
|
128
|
+
);
|
|
129
|
+
var TextInput = React.forwardRef(
|
|
130
|
+
({ className, start, end, size, tone, withStart, withEnd, error, label, required, disabled = false, ...props }, ref) => {
|
|
131
|
+
const showStart = withStart ?? Boolean(start);
|
|
132
|
+
const showEnd = withEnd ?? Boolean(end);
|
|
133
|
+
return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-2", children: [
|
|
134
|
+
label && /* @__PURE__ */ jsxs("label", { className: "block text-sm text-[#444] font-bold", children: [
|
|
135
|
+
required && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" }),
|
|
136
|
+
label
|
|
137
|
+
] }),
|
|
138
|
+
start ? /* @__PURE__ */ jsx(
|
|
139
|
+
"div",
|
|
140
|
+
{
|
|
141
|
+
className: "pointer-events-none absolute inset-y-0 left-0 flex items-center ps-3",
|
|
142
|
+
"aria-hidden": "true",
|
|
143
|
+
children: /* @__PURE__ */ jsx("span", { className: "text-black/50", children: start })
|
|
144
|
+
}
|
|
145
|
+
) : null,
|
|
146
|
+
/* @__PURE__ */ jsx(
|
|
147
|
+
"input",
|
|
148
|
+
{
|
|
149
|
+
ref,
|
|
150
|
+
"data-state": error ? "invalid" : void 0,
|
|
151
|
+
className: cn(inputStyles({ size, tone, withStart: showStart, withEnd: showEnd }), className),
|
|
152
|
+
disabled,
|
|
153
|
+
...props
|
|
154
|
+
}
|
|
155
|
+
),
|
|
156
|
+
end ? /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pe-3", children: end }) : null,
|
|
157
|
+
error && /* @__PURE__ */ jsx("small", { className: "text-red-500 text-xs", children: error })
|
|
158
|
+
] });
|
|
159
|
+
}
|
|
160
|
+
);
|
|
161
|
+
TextInput.displayName = "TextInput";
|
|
29
162
|
|
|
30
|
-
export { Button };
|
|
163
|
+
export { Button, TextInput };
|