the-omelet-ui 0.1.6 → 0.1.7

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 (5) hide show
  1. package/dist/index.cjs +63 -1
  2. package/dist/index.d.cts +29 -1
  3. package/dist/index.d.ts +29 -1
  4. package/dist/index.js +64 -3
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -48,7 +48,7 @@ var clsx_default = clsx;
48
48
  var cn = (...inputs) => tailwindMerge.twMerge(clsx_default(inputs));
49
49
  var buttonStyles = classVarianceAuthority.cva(
50
50
  // base
51
- "inline-flex items-center justify-center rounded-md font-medium outline-none text-[18px] transition-colors focus-visible:ring-2 ring-black/20 disabled:pointer-events-none disabled:bg-[#afafaf]",
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]",
52
52
  {
53
53
  variants: {
54
54
  variant: {
@@ -120,5 +120,67 @@ var Button = React__namespace.forwardRef(
120
120
  }
121
121
  );
122
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";
123
184
 
124
185
  exports.Button = Button;
186
+ exports.TextInput = TextInput;
package/dist/index.d.cts CHANGED
@@ -23,4 +23,32 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
23
23
  }
24
24
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
25
25
 
26
- export { Button, type ButtonProps };
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
@@ -23,4 +23,32 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
23
23
  }
24
24
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
25
25
 
26
- export { Button, type ButtonProps };
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,7 +2,7 @@ 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
8
 
@@ -26,7 +26,7 @@ var clsx_default = clsx;
26
26
  var cn = (...inputs) => twMerge(clsx_default(inputs));
27
27
  var buttonStyles = cva(
28
28
  // base
29
- "inline-flex items-center justify-center rounded-md font-medium outline-none text-[18px] transition-colors focus-visible:ring-2 ring-black/20 disabled:pointer-events-none disabled:bg-[#afafaf]",
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]",
30
30
  {
31
31
  variants: {
32
32
  variant: {
@@ -98,5 +98,66 @@ var Button = React.forwardRef(
98
98
  }
99
99
  );
100
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";
101
162
 
102
- export { Button };
163
+ export { Button, TextInput };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "the-omelet-ui",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",