the-omelet-ui 0.1.3 → 0.1.6

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 +81 -9
  2. package/dist/index.d.cts +14 -2
  3. package/dist/index.d.ts +14 -2
  4. package/dist/index.js +81 -9
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -27,24 +27,96 @@ function _interopNamespace(e) {
27
27
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
28
28
 
29
29
  // src/button.tsx
30
- var styles = classVarianceAuthority.cva(
31
- "inline-flex items-center justify-center rounded-xl font-medium outline-none transition-colors focus-visible:ring-2 ring-black/20 disabled:opacity-50 disabled:pointer-events-none",
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] transition-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: "bg-black text-white hover:bg-black/85",
36
- outline: "border border-black text-black hover:bg-black/5",
37
- ghost: "text-black hover:bg-black/5"
55
+ solid: "",
56
+ outline: "border bg-transparent",
57
+ ghost: "bg-transparent"
38
58
  },
39
- size: { sm: "h-9 px-3 text-sm", md: "h-10 px-4", lg: "h-11 px-5 text-base" }
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
- defaultVariants: { variant: "solid", size: "md" }
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(Comp, { ref, className: tailwindMerge.twMerge(styles({ variant, size }), className), ...props });
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";
package/dist/index.d.cts CHANGED
@@ -2,12 +2,24 @@ 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
- declare const styles: (props?: ({
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 styles> {
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
 
package/dist/index.d.ts CHANGED
@@ -2,12 +2,24 @@ 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
- declare const styles: (props?: ({
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 styles> {
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
 
package/dist/index.js CHANGED
@@ -5,24 +5,96 @@ import { twMerge } from 'tailwind-merge';
5
5
  import { jsx } from 'react/jsx-runtime';
6
6
 
7
7
  // src/button.tsx
8
- var styles = cva(
9
- "inline-flex items-center justify-center rounded-xl font-medium outline-none transition-colors focus-visible:ring-2 ring-black/20 disabled:opacity-50 disabled:pointer-events-none",
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] transition-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: "bg-black text-white hover:bg-black/85",
14
- outline: "border border-black text-black hover:bg-black/5",
15
- ghost: "text-black hover:bg-black/5"
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
- size: { sm: "h-9 px-3 text-sm", md: "h-10 px-4", lg: "h-11 px-5 text-base" }
42
+ color: {
43
+ // แผงสีพรีเซ็ต (เพิ่มได้ตามต้องการ)
44
+ neutral: "",
45
+ primary: "",
46
+ red: "",
47
+ green: "",
48
+ blue: "",
49
+ yellow: "",
50
+ violet: ""
51
+ }
18
52
  },
19
- defaultVariants: { variant: "solid", size: "md" }
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(Comp, { ref, className: twMerge(styles({ variant, size }), className), ...props });
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";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "the-omelet-ui",
3
- "version": "0.1.3",
3
+ "version": "0.1.6",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",