@sikka/hawa 0.26.20 → 0.26.22

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 (53) hide show
  1. package/README.md +91 -0
  2. package/dist/blocks/auth/index.mjs +5 -4
  3. package/dist/blocks/feedback/index.js +114 -118
  4. package/dist/blocks/feedback/index.mjs +6 -5
  5. package/dist/blocks/index.js +28 -30
  6. package/dist/blocks/index.mjs +2 -2
  7. package/dist/blocks/misc/index.js +28 -30
  8. package/dist/blocks/misc/index.mjs +20 -17
  9. package/dist/blocks/pricing/index.mjs +4 -4
  10. package/dist/{chunk-OTGCLEKC.mjs → chunk-2R7F2GL7.mjs} +20 -0
  11. package/dist/{chunk-POIP5U4M.mjs → chunk-4EGKGSGY.mjs} +1 -1
  12. package/dist/{chunk-APZM24KK.mjs → chunk-5YXZXYLH.mjs} +15 -18
  13. package/dist/{chunk-WPSUV4AD.mjs → chunk-F3DQJHTG.mjs} +29 -31
  14. package/dist/{chunk-VQQ6MUX5.mjs → chunk-FQ6WVEHW.mjs} +1 -1
  15. package/dist/{chunk-U3TZWNDZ.mjs → chunk-GVJYACGA.mjs} +1 -1
  16. package/dist/{chunk-Z5SL5QTQ.mjs → chunk-MQUAGP7K.mjs} +20 -0
  17. package/dist/{chunk-OAXF3RCQ.mjs → chunk-NMS5LCSQ.mjs} +1 -1
  18. package/dist/{chunk-4IOG44R3.mjs → chunk-OY66MBXP.mjs} +1 -1
  19. package/dist/{chunk-FDKCMEMD.mjs → chunk-R4HAAT6R.mjs} +1 -1
  20. package/dist/chunk-WUHNPHD5.mjs +0 -0
  21. package/dist/codeBlock/index.mjs +1 -1
  22. package/dist/colorPicker/index.d.mts +4 -0
  23. package/dist/colorPicker/index.d.ts +4 -0
  24. package/dist/colorPicker/index.js +80 -23
  25. package/dist/colorPicker/index.mjs +54 -15
  26. package/dist/dataTable/index.d.mts +2 -1
  27. package/dist/dataTable/index.d.ts +2 -1
  28. package/dist/dataTable/index.js +1 -1
  29. package/dist/dataTable/index.mjs +1 -1
  30. package/dist/elements/index.d.mts +7 -1
  31. package/dist/elements/index.d.ts +7 -1
  32. package/dist/elements/index.js +62 -34
  33. package/dist/elements/index.mjs +19 -7
  34. package/dist/index.css +11 -3
  35. package/dist/index.d.mts +7 -1
  36. package/dist/index.d.ts +7 -1
  37. package/dist/index.js +62 -34
  38. package/dist/index.mjs +62 -34
  39. package/dist/layout/index.mjs +2 -2
  40. package/dist/switch/index.d.mts +1 -1
  41. package/dist/switch/index.d.ts +1 -1
  42. package/dist/tabs/index.d.mts +2 -2
  43. package/dist/tabs/index.d.ts +2 -2
  44. package/dist/tabs/index.js +15 -13
  45. package/dist/tabs/index.mjs +15 -13
  46. package/dist/textarea/index.d.mts +1 -0
  47. package/dist/textarea/index.d.ts +1 -0
  48. package/dist/textarea/index.js +59 -36
  49. package/dist/textarea/index.mjs +59 -36
  50. package/package.json +10 -10
  51. package/dist/commonTypes-cyhMPvmz.d.mts +0 -4
  52. package/dist/commonTypes-cyhMPvmz.d.ts +0 -4
  53. /package/dist/{chunk-AREFDTXK.mjs → chunk-D36MPDGE.mjs} +0 -0
@@ -35,7 +35,7 @@ __export(colorPicker_exports, {
35
35
  module.exports = __toCommonJS(colorPicker_exports);
36
36
 
37
37
  // elements/colorPicker/ColorPicker.tsx
38
- var import_react2 = __toESM(require("react"));
38
+ var import_react3 = __toESM(require("react"));
39
39
 
40
40
  // util/index.ts
41
41
  var import_clsx = require("clsx");
@@ -43,14 +43,60 @@ var import_tailwind_merge = require("tailwind-merge");
43
43
  function cn(...inputs) {
44
44
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
45
45
  }
46
+ var parseColor = (color) => {
47
+ if (color.startsWith("#")) {
48
+ let r = parseInt(color.slice(1, 3), 16);
49
+ let g = parseInt(color.slice(3, 5), 16);
50
+ let b = parseInt(color.slice(5, 7), 16);
51
+ return [r, g, b];
52
+ } else if (color.startsWith("rgb")) {
53
+ return color.match(/\d+/g).map(Number);
54
+ }
55
+ return [255, 255, 255];
56
+ };
57
+ var calculateLuminance = (color) => {
58
+ var _a;
59
+ const [r, g, b] = (_a = parseColor(color)) == null ? void 0 : _a.map((c) => {
60
+ c /= 255;
61
+ return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
62
+ });
63
+ return 0.2126 * r + 0.7152 * g + 0.0722 * b;
64
+ };
65
+
66
+ // elements/skeleton/Skeleton.tsx
67
+ var import_react = __toESM(require("react"));
68
+ function Skeleton({
69
+ className,
70
+ content,
71
+ animation = "pulse",
72
+ ...props
73
+ }) {
74
+ const animationStyles = {
75
+ none: "hawa-rounded hawa-bg-muted",
76
+ pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
77
+ shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
78
+ };
79
+ return /* @__PURE__ */ import_react.default.createElement(
80
+ "div",
81
+ {
82
+ className: cn(
83
+ animationStyles[animation],
84
+ content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
85
+ className
86
+ ),
87
+ ...props
88
+ },
89
+ content && content
90
+ );
91
+ }
46
92
 
47
93
  // elements/label/Label.tsx
48
- var React2 = __toESM(require("react"));
94
+ var React3 = __toESM(require("react"));
49
95
 
50
96
  // elements/tooltip/Tooltip.tsx
51
- var import_react = __toESM(require("react"));
97
+ var import_react2 = __toESM(require("react"));
52
98
  var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
53
- var TooltipContent = import_react.default.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(
99
+ var TooltipContent = import_react2.default.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ import_react2.default.createElement(
54
100
  TooltipPrimitive.Content,
55
101
  {
56
102
  ref,
@@ -63,7 +109,7 @@ var TooltipContent = import_react.default.forwardRef(({ className, sideOffset =
63
109
  }
64
110
  ));
65
111
  TooltipContent.displayName = TooltipPrimitive.Content.displayName;
66
- var TooltipArrow = import_react.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
112
+ var TooltipArrow = import_react2.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react2.default.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
67
113
  TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
68
114
  var Tooltip = ({
69
115
  side,
@@ -78,13 +124,13 @@ var Tooltip = ({
78
124
  delayDuration = 300,
79
125
  ...props
80
126
  }) => {
81
- return /* @__PURE__ */ import_react.default.createElement(
127
+ return /* @__PURE__ */ import_react2.default.createElement(
82
128
  TooltipPrimitive.TooltipProvider,
83
129
  {
84
130
  delayDuration,
85
131
  ...providerProps
86
132
  },
87
- /* @__PURE__ */ import_react.default.createElement(
133
+ /* @__PURE__ */ import_react2.default.createElement(
88
134
  TooltipPrimitive.Root,
89
135
  {
90
136
  open,
@@ -92,14 +138,14 @@ var Tooltip = ({
92
138
  onOpenChange,
93
139
  ...props
94
140
  },
95
- /* @__PURE__ */ import_react.default.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
96
- /* @__PURE__ */ import_react.default.createElement(TooltipContent, { side, align: "center", ...contentProps }, content)
141
+ /* @__PURE__ */ import_react2.default.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
142
+ /* @__PURE__ */ import_react2.default.createElement(TooltipContent, { side, align: "center", ...contentProps }, content)
97
143
  )
98
144
  );
99
145
  };
100
146
 
101
147
  // elements/label/Label.tsx
102
- var Label = React2.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React2.createElement(
148
+ var Label = React3.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React3.createElement(
103
149
  "label",
104
150
  {
105
151
  ref,
@@ -110,8 +156,8 @@ var Label = React2.forwardRef(({ className, hint, hintSide, required, children,
110
156
  ...props
111
157
  },
112
158
  children,
113
- required && /* @__PURE__ */ React2.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
114
- ), hint && /* @__PURE__ */ React2.createElement(
159
+ required && /* @__PURE__ */ React3.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
160
+ ), hint && /* @__PURE__ */ React3.createElement(
115
161
  Tooltip,
116
162
  {
117
163
  content: hint,
@@ -121,7 +167,7 @@ var Label = React2.forwardRef(({ className, hint, hintSide, required, children,
121
167
  onClick: (event) => event.preventDefault()
122
168
  }
123
169
  },
124
- /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
170
+ /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(
125
171
  "svg",
126
172
  {
127
173
  xmlns: "http://www.w3.org/2000/svg",
@@ -133,9 +179,9 @@ var Label = React2.forwardRef(({ className, hint, hintSide, required, children,
133
179
  strokeLinecap: "round",
134
180
  strokeLinejoin: "round"
135
181
  },
136
- /* @__PURE__ */ React2.createElement("circle", { cx: "12", cy: "12", r: "10" }),
137
- /* @__PURE__ */ React2.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
138
- /* @__PURE__ */ React2.createElement("path", { d: "M12 17h.01" })
182
+ /* @__PURE__ */ React3.createElement("circle", { cx: "12", cy: "12", r: "10" }),
183
+ /* @__PURE__ */ React3.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
184
+ /* @__PURE__ */ React3.createElement("path", { d: "M12 17h.01" })
139
185
  ))
140
186
  )));
141
187
  Label.displayName = "Label";
@@ -146,10 +192,13 @@ var ColorPicker = ({
146
192
  colorPickerProps,
147
193
  textInputProps,
148
194
  labelProps,
195
+ forceHideHelperText,
196
+ isLoading,
197
+ preview = false,
149
198
  ...props
150
199
  }) => {
151
- const [selectedColor, setSelectedColor] = (0, import_react2.useState)(props.color);
152
- (0, import_react2.useEffect)(() => {
200
+ const [selectedColor, setSelectedColor] = (0, import_react3.useState)(props.color);
201
+ (0, import_react3.useEffect)(() => {
153
202
  if (selectedColor && selectedColor[0] !== "#") {
154
203
  setSelectedColor(`#${selectedColor}`);
155
204
  }
@@ -166,15 +215,16 @@ var ColorPicker = ({
166
215
  props.handleChange(e);
167
216
  }
168
217
  };
169
- return /* @__PURE__ */ import_react2.default.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react2.default.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ import_react2.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react2.default.createElement(
218
+ return /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react3.default.createElement(Label, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react3.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react3.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react3.default.createElement(
170
219
  "div",
171
220
  {
172
221
  style: { height: 40, backgroundColor: selectedColor },
173
222
  className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border"
174
223
  },
175
- /* @__PURE__ */ import_react2.default.createElement(
224
+ /* @__PURE__ */ import_react3.default.createElement(
176
225
  "input",
177
226
  {
227
+ disabled: preview,
178
228
  type: "color",
179
229
  value: selectedColor,
180
230
  onChange: (e) => {
@@ -190,19 +240,26 @@ var ColorPicker = ({
190
240
  ...colorPickerProps
191
241
  }
192
242
  )
193
- ), /* @__PURE__ */ import_react2.default.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react2.default.createElement(
243
+ ), /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react3.default.createElement(
194
244
  "input",
195
245
  {
246
+ disabled: preview,
196
247
  maxLength: 7,
197
248
  type: "text",
198
249
  onInput: handleTextInputChange,
199
250
  value: selectedColor,
200
251
  className: cn(
201
- "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
252
+ "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all",
253
+ "hawa-border hawa-border-l-0 hawa-border-l-transparent"
254
+ // "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
202
255
  ),
256
+ style: {
257
+ backgroundColor: preview ? selectedColor : "hsl(var(--background))",
258
+ color: preview ? calculateLuminance(selectedColor) > 0.5 ? "black" : "white" : ""
259
+ },
203
260
  ...textInputProps
204
261
  }
205
- ))), /* @__PURE__ */ import_react2.default.createElement(
262
+ ))), !forceHideHelperText && /* @__PURE__ */ import_react3.default.createElement(
206
263
  "p",
207
264
  {
208
265
  className: cn(
@@ -1,17 +1,45 @@
1
1
  import {
2
2
  Tooltip,
3
+ calculateLuminance,
3
4
  cn
4
- } from "../chunk-OTGCLEKC.mjs";
5
+ } from "../chunk-2R7F2GL7.mjs";
5
6
 
6
7
  // elements/colorPicker/ColorPicker.tsx
7
- import React2, {
8
+ import React3, {
8
9
  useState,
9
10
  useEffect
10
11
  } from "react";
11
12
 
13
+ // elements/skeleton/Skeleton.tsx
14
+ import React from "react";
15
+ function Skeleton({
16
+ className,
17
+ content,
18
+ animation = "pulse",
19
+ ...props
20
+ }) {
21
+ const animationStyles = {
22
+ none: "hawa-rounded hawa-bg-muted",
23
+ pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
24
+ shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
25
+ };
26
+ return /* @__PURE__ */ React.createElement(
27
+ "div",
28
+ {
29
+ className: cn(
30
+ animationStyles[animation],
31
+ content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
32
+ className
33
+ ),
34
+ ...props
35
+ },
36
+ content && content
37
+ );
38
+ }
39
+
12
40
  // elements/label/Label.tsx
13
- import * as React from "react";
14
- var Label = React.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React.createElement(
41
+ import * as React2 from "react";
42
+ var Label = React2.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React2.createElement(
15
43
  "label",
16
44
  {
17
45
  ref,
@@ -22,8 +50,8 @@ var Label = React.forwardRef(({ className, hint, hintSide, required, children, .
22
50
  ...props
23
51
  },
24
52
  children,
25
- required && /* @__PURE__ */ React.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
26
- ), hint && /* @__PURE__ */ React.createElement(
53
+ required && /* @__PURE__ */ React2.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
54
+ ), hint && /* @__PURE__ */ React2.createElement(
27
55
  Tooltip,
28
56
  {
29
57
  content: hint,
@@ -33,7 +61,7 @@ var Label = React.forwardRef(({ className, hint, hintSide, required, children, .
33
61
  onClick: (event) => event.preventDefault()
34
62
  }
35
63
  },
36
- /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
64
+ /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(
37
65
  "svg",
38
66
  {
39
67
  xmlns: "http://www.w3.org/2000/svg",
@@ -45,9 +73,9 @@ var Label = React.forwardRef(({ className, hint, hintSide, required, children, .
45
73
  strokeLinecap: "round",
46
74
  strokeLinejoin: "round"
47
75
  },
48
- /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
49
- /* @__PURE__ */ React.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
50
- /* @__PURE__ */ React.createElement("path", { d: "M12 17h.01" })
76
+ /* @__PURE__ */ React2.createElement("circle", { cx: "12", cy: "12", r: "10" }),
77
+ /* @__PURE__ */ React2.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
78
+ /* @__PURE__ */ React2.createElement("path", { d: "M12 17h.01" })
51
79
  ))
52
80
  )));
53
81
  Label.displayName = "Label";
@@ -58,6 +86,9 @@ var ColorPicker = ({
58
86
  colorPickerProps,
59
87
  textInputProps,
60
88
  labelProps,
89
+ forceHideHelperText,
90
+ isLoading,
91
+ preview = false,
61
92
  ...props
62
93
  }) => {
63
94
  const [selectedColor, setSelectedColor] = useState(props.color);
@@ -78,15 +109,16 @@ var ColorPicker = ({
78
109
  props.handleChange(e);
79
110
  }
80
111
  };
81
- return /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React2.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ React2.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React2.createElement(
112
+ return /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React3.createElement(Label, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ React3.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ React3.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React3.createElement(
82
113
  "div",
83
114
  {
84
115
  style: { height: 40, backgroundColor: selectedColor },
85
116
  className: "hawa-rounded-bl-lg hawa-rounded-tl-lg hawa-border"
86
117
  },
87
- /* @__PURE__ */ React2.createElement(
118
+ /* @__PURE__ */ React3.createElement(
88
119
  "input",
89
120
  {
121
+ disabled: preview,
90
122
  type: "color",
91
123
  value: selectedColor,
92
124
  onChange: (e) => {
@@ -102,19 +134,26 @@ var ColorPicker = ({
102
134
  ...colorPickerProps
103
135
  }
104
136
  )
105
- ), /* @__PURE__ */ React2.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React2.createElement(
137
+ ), /* @__PURE__ */ React3.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React3.createElement(
106
138
  "input",
107
139
  {
140
+ disabled: preview,
108
141
  maxLength: 7,
109
142
  type: "text",
110
143
  onInput: handleTextInputChange,
111
144
  value: selectedColor,
112
145
  className: cn(
113
- "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
146
+ "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all",
147
+ "hawa-border hawa-border-l-0 hawa-border-l-transparent"
148
+ // "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
114
149
  ),
150
+ style: {
151
+ backgroundColor: preview ? selectedColor : "hsl(var(--background))",
152
+ color: preview ? calculateLuminance(selectedColor) > 0.5 ? "black" : "white" : ""
153
+ },
115
154
  ...textInputProps
116
155
  }
117
- ))), /* @__PURE__ */ React2.createElement(
156
+ ))), !forceHideHelperText && /* @__PURE__ */ React3.createElement(
118
157
  "p",
119
158
  {
120
159
  className: cn(
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
- import { RowData, ColumnDef } from '@tanstack/react-table';
3
2
  import { D as DirectionType } from '../commonTypes-ko_NGEoT.mjs';
3
+ import { RowData, ColumnDef } from '@tanstack/react-table';
4
+ export { ColumnDef } from '@tanstack/react-table';
4
5
 
5
6
  type DataTableProps<DataProps = {}> = {
6
7
  direction?: DirectionType;
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
- import { RowData, ColumnDef } from '@tanstack/react-table';
3
2
  import { D as DirectionType } from '../commonTypes-ko_NGEoT.js';
3
+ import { RowData, ColumnDef } from '@tanstack/react-table';
4
+ export { ColumnDef } from '@tanstack/react-table';
4
5
 
5
6
  type DataTableProps<DataProps = {}> = {
6
7
  direction?: DirectionType;
@@ -1145,7 +1145,7 @@ var DataTable = ({
1145
1145
  /* @__PURE__ */ React9.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between" }, !props.showCount && /* @__PURE__ */ React9.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm hawa-text-muted-foreground" }), props.showCount && /* @__PURE__ */ React9.createElement(
1146
1146
  "div",
1147
1147
  {
1148
- className: "text-sm text-muted-foreground",
1148
+ className: "text-muted-foreground text-sm",
1149
1149
  dir: props.direction
1150
1150
  },
1151
1151
  /* @__PURE__ */ React9.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
@@ -1114,7 +1114,7 @@ var DataTable = ({
1114
1114
  /* @__PURE__ */ React9.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between" }, !props.showCount && /* @__PURE__ */ React9.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm hawa-text-muted-foreground" }), props.showCount && /* @__PURE__ */ React9.createElement(
1115
1115
  "div",
1116
1116
  {
1117
- className: "text-sm text-muted-foreground",
1117
+ className: "text-muted-foreground text-sm",
1118
1118
  dir: props.direction
1119
1119
  },
1120
1120
  /* @__PURE__ */ React9.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
@@ -12,6 +12,7 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
12
12
  import { DialogProps } from '@radix-ui/react-dialog';
13
13
  import { VariantProps } from 'class-variance-authority';
14
14
  import { RowData, ColumnDef } from '@tanstack/react-table';
15
+ export { ColumnDef } from '@tanstack/react-table';
15
16
  import { L as LabelProps } from '../Radio-hsrLKNxE.mjs';
16
17
  export { b as Label, a as Radio, R as RadioOptionsTypes, c as Select, S as SelectOptionProps } from '../Radio-hsrLKNxE.mjs';
17
18
  import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -382,6 +383,7 @@ declare const Combobox: React.ForwardRefExoticComponent<ComboboxTypes<any> & Rea
382
383
 
383
384
  interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
384
385
  helperText?: string;
386
+ isLoading?: boolean;
385
387
  /** The label of the input field */
386
388
  label?: any;
387
389
  labelProps?: LabelProps;
@@ -437,7 +439,7 @@ type SortButtonProps = {
437
439
  declare const SortButton: React__default.FC<SortButtonProps>;
438
440
 
439
441
  declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
440
- orientation?: OrientationType | undefined;
442
+ orientation?: "vertical" | "horizontal" | undefined;
441
443
  } & React.RefAttributes<HTMLDivElement>>;
442
444
  declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
443
445
  declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
@@ -627,8 +629,12 @@ declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitiv
627
629
  type ColorPickerTypes = {
628
630
  label?: string;
629
631
  id?: string;
632
+ isLoading?: boolean;
630
633
  labelProps?: LabelProps;
631
634
  helperText?: string;
635
+ forceHideHelperText?: boolean;
636
+ /** Boolean to enable/disable editing the input field and using it as a text field */
637
+ preview?: boolean;
632
638
  /** The hex code for the color */
633
639
  color?: any;
634
640
  /** Fires everytime the color changes */
@@ -12,6 +12,7 @@ import * as SheetPrimitive from '@radix-ui/react-dialog';
12
12
  import { DialogProps } from '@radix-ui/react-dialog';
13
13
  import { VariantProps } from 'class-variance-authority';
14
14
  import { RowData, ColumnDef } from '@tanstack/react-table';
15
+ export { ColumnDef } from '@tanstack/react-table';
15
16
  import { L as LabelProps } from '../Radio-K1WGpnGA.js';
16
17
  export { b as Label, a as Radio, R as RadioOptionsTypes, c as Select, S as SelectOptionProps } from '../Radio-K1WGpnGA.js';
17
18
  import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -382,6 +383,7 @@ declare const Combobox: React.ForwardRefExoticComponent<ComboboxTypes<any> & Rea
382
383
 
383
384
  interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
384
385
  helperText?: string;
386
+ isLoading?: boolean;
385
387
  /** The label of the input field */
386
388
  label?: any;
387
389
  labelProps?: LabelProps;
@@ -437,7 +439,7 @@ type SortButtonProps = {
437
439
  declare const SortButton: React__default.FC<SortButtonProps>;
438
440
 
439
441
  declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
440
- orientation?: OrientationType | undefined;
442
+ orientation?: "vertical" | "horizontal" | undefined;
441
443
  } & React.RefAttributes<HTMLDivElement>>;
442
444
  declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
443
445
  declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
@@ -627,8 +629,12 @@ declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitiv
627
629
  type ColorPickerTypes = {
628
630
  label?: string;
629
631
  id?: string;
632
+ isLoading?: boolean;
630
633
  labelProps?: LabelProps;
631
634
  helperText?: string;
635
+ forceHideHelperText?: boolean;
636
+ /** Boolean to enable/disable editing the input field and using it as a text field */
637
+ preview?: boolean;
632
638
  /** The hex code for the color */
633
639
  color?: any;
634
640
  /** Fires everytime the color changes */
@@ -182,6 +182,25 @@ var import_tailwind_merge = require("tailwind-merge");
182
182
  function cn(...inputs) {
183
183
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
184
184
  }
185
+ var parseColor = (color) => {
186
+ if (color.startsWith("#")) {
187
+ let r = parseInt(color.slice(1, 3), 16);
188
+ let g = parseInt(color.slice(3, 5), 16);
189
+ let b = parseInt(color.slice(5, 7), 16);
190
+ return [r, g, b];
191
+ } else if (color.startsWith("rgb")) {
192
+ return color.match(/\d+/g).map(Number);
193
+ }
194
+ return [255, 255, 255];
195
+ };
196
+ var calculateLuminance = (color) => {
197
+ var _a;
198
+ const [r, g, b] = (_a = parseColor(color)) == null ? void 0 : _a.map((c) => {
199
+ c /= 255;
200
+ return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
201
+ });
202
+ return 0.2126 * r + 0.7152 * g + 0.0722 * b;
203
+ };
185
204
 
186
205
  // elements/card/Card.tsx
187
206
  var Card = React.forwardRef(
@@ -2640,7 +2659,7 @@ var DataTable = ({
2640
2659
  /* @__PURE__ */ React22.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between" }, !props.showCount && /* @__PURE__ */ React22.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm hawa-text-muted-foreground" }), props.showCount && /* @__PURE__ */ React22.createElement(
2641
2660
  "div",
2642
2661
  {
2643
- className: "text-sm text-muted-foreground",
2662
+ className: "text-muted-foreground text-sm",
2644
2663
  dir: props.direction
2645
2664
  },
2646
2665
  /* @__PURE__ */ React22.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
@@ -3426,6 +3445,7 @@ var Textarea = React28.forwardRef(
3426
3445
  forceHideHelperText,
3427
3446
  textareaProps,
3428
3447
  countPosition = "bottom",
3448
+ isLoading,
3429
3449
  ...props
3430
3450
  }, ref) => {
3431
3451
  return /* @__PURE__ */ React28.createElement(
@@ -3437,12 +3457,20 @@ var Textarea = React28.forwardRef(
3437
3457
  className
3438
3458
  )
3439
3459
  },
3440
- props.label && /* @__PURE__ */ React28.createElement(Label2, { ...labelProps }, props.label),
3441
- /* @__PURE__ */ React28.createElement(
3460
+ /* @__PURE__ */ React28.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, props.label && /* @__PURE__ */ React28.createElement(Label2, { ...labelProps }, props.label), showCount && countPosition === "top" && /* @__PURE__ */ React28.createElement(
3461
+ "div",
3462
+ {
3463
+ className: "hawa-text-start hawa-text-xs hawa-transition-all hawa-leading-none"
3464
+ },
3465
+ (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
3466
+ "/",
3467
+ textareaProps == null ? void 0 : textareaProps.maxLength
3468
+ )),
3469
+ isLoading ? /* @__PURE__ */ React28.createElement(Skeleton, { style: { height: 40 } }) : /* @__PURE__ */ React28.createElement(
3442
3470
  "textarea",
3443
3471
  {
3444
3472
  className: cn(
3445
- "hawa-flex hawa-min-h-[40px] hawa-w-full hawa-rounded-md hawa-border hawa-border-input hawa-bg-background hawa-px-3 hawa-py-2 hawa-text-sm hawa-ring-offset-background placeholder:hawa-text-gray-400 placeholder:hawa-text-muted-foreground focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50",
3473
+ "hawa-flex hawa-min-h-[40px] hawa-h-[40px] hawa-w-full hawa-rounded-md hawa-border hawa-border-input hawa-bg-background hawa-px-3 hawa-py-2 hawa-text-sm hawa-ring-offset-background placeholder:hawa-text-gray-400 placeholder:hawa-text-muted-foreground focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50",
3446
3474
  classNames == null ? void 0 : classNames.textarea
3447
3475
  ),
3448
3476
  ref,
@@ -3458,20 +3486,7 @@ var Textarea = React28.forwardRef(
3458
3486
  )
3459
3487
  },
3460
3488
  props.helperText
3461
- ), showCount && /* @__PURE__ */ React28.createElement(
3462
- "div",
3463
- {
3464
- className: cn(
3465
- "hawa-text-start hawa-text-xs hawa-transition-all",
3466
- {
3467
- "hawa-absolute hawa-bottom-[80px] hawa-end-0 hawa-translate-y-1/2": countPosition === "top"
3468
- }
3469
- )
3470
- },
3471
- (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
3472
- "/",
3473
- textareaProps == null ? void 0 : textareaProps.maxLength
3474
- ))
3489
+ ), showCount && countPosition === "bottom" && /* @__PURE__ */ React28.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
3475
3490
  );
3476
3491
  }
3477
3492
  );
@@ -3737,19 +3752,21 @@ var SortButton = (props) => {
3737
3752
  var React31 = __toESM(require("react"));
3738
3753
  var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
3739
3754
  var TabsContext = React31.createContext({ orientation: "vertical" });
3740
- var Tabs = React31.forwardRef(({ className, orientation, ...props }, ref) => /* @__PURE__ */ React31.createElement(
3741
- TabsPrimitive.Root,
3742
- {
3743
- ref,
3744
- className: cn(
3745
- "hawa-flex hawa-gap-2",
3746
- orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
3747
- className
3748
- ),
3749
- ...props
3750
- },
3751
- /* @__PURE__ */ React31.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
3752
- ));
3755
+ var Tabs = React31.forwardRef(
3756
+ ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React31.createElement(
3757
+ TabsPrimitive.Root,
3758
+ {
3759
+ ref,
3760
+ className: cn(
3761
+ "hawa-flex hawa-gap-2",
3762
+ orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
3763
+ className
3764
+ ),
3765
+ ...props
3766
+ },
3767
+ /* @__PURE__ */ React31.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
3768
+ )
3769
+ );
3753
3770
  Tabs.displayName = TabsPrimitive.Root.displayName;
3754
3771
  var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
3755
3772
  const { orientation } = React31.useContext(TabsContext);
@@ -6222,6 +6239,9 @@ var ColorPicker = ({
6222
6239
  colorPickerProps,
6223
6240
  textInputProps,
6224
6241
  labelProps,
6242
+ forceHideHelperText,
6243
+ isLoading,
6244
+ preview = false,
6225
6245
  ...props
6226
6246
  }) => {
6227
6247
  const [selectedColor, setSelectedColor] = (0, import_react21.useState)(props.color);
@@ -6242,7 +6262,7 @@ var ColorPicker = ({
6242
6262
  props.handleChange(e);
6243
6263
  }
6244
6264
  };
6245
- return /* @__PURE__ */ import_react21.default.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react21.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react21.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react21.default.createElement(
6265
+ return /* @__PURE__ */ import_react21.default.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react21.default.createElement(Label2, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ import_react21.default.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ import_react21.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react21.default.createElement(
6246
6266
  "div",
6247
6267
  {
6248
6268
  style: { height: 40, backgroundColor: selectedColor },
@@ -6251,6 +6271,7 @@ var ColorPicker = ({
6251
6271
  /* @__PURE__ */ import_react21.default.createElement(
6252
6272
  "input",
6253
6273
  {
6274
+ disabled: preview,
6254
6275
  type: "color",
6255
6276
  value: selectedColor,
6256
6277
  onChange: (e) => {
@@ -6269,16 +6290,23 @@ var ColorPicker = ({
6269
6290
  ), /* @__PURE__ */ import_react21.default.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react21.default.createElement(
6270
6291
  "input",
6271
6292
  {
6293
+ disabled: preview,
6272
6294
  maxLength: 7,
6273
6295
  type: "text",
6274
6296
  onInput: handleTextInputChange,
6275
6297
  value: selectedColor,
6276
6298
  className: cn(
6277
- "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
6299
+ "hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all",
6300
+ "hawa-border hawa-border-l-0 hawa-border-l-transparent"
6301
+ // "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
6278
6302
  ),
6303
+ style: {
6304
+ backgroundColor: preview ? selectedColor : "hsl(var(--background))",
6305
+ color: preview ? calculateLuminance(selectedColor) > 0.5 ? "black" : "white" : ""
6306
+ },
6279
6307
  ...textInputProps
6280
6308
  }
6281
- ))), /* @__PURE__ */ import_react21.default.createElement(
6309
+ ))), !forceHideHelperText && /* @__PURE__ */ import_react21.default.createElement(
6282
6310
  "p",
6283
6311
  {
6284
6312
  className: cn(