@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.
- package/README.md +91 -0
- package/dist/blocks/auth/index.mjs +5 -4
- package/dist/blocks/feedback/index.js +114 -118
- package/dist/blocks/feedback/index.mjs +6 -5
- package/dist/blocks/index.js +28 -30
- package/dist/blocks/index.mjs +2 -2
- package/dist/blocks/misc/index.js +28 -30
- package/dist/blocks/misc/index.mjs +20 -17
- package/dist/blocks/pricing/index.mjs +4 -4
- package/dist/{chunk-OTGCLEKC.mjs → chunk-2R7F2GL7.mjs} +20 -0
- package/dist/{chunk-POIP5U4M.mjs → chunk-4EGKGSGY.mjs} +1 -1
- package/dist/{chunk-APZM24KK.mjs → chunk-5YXZXYLH.mjs} +15 -18
- package/dist/{chunk-WPSUV4AD.mjs → chunk-F3DQJHTG.mjs} +29 -31
- package/dist/{chunk-VQQ6MUX5.mjs → chunk-FQ6WVEHW.mjs} +1 -1
- package/dist/{chunk-U3TZWNDZ.mjs → chunk-GVJYACGA.mjs} +1 -1
- package/dist/{chunk-Z5SL5QTQ.mjs → chunk-MQUAGP7K.mjs} +20 -0
- package/dist/{chunk-OAXF3RCQ.mjs → chunk-NMS5LCSQ.mjs} +1 -1
- package/dist/{chunk-4IOG44R3.mjs → chunk-OY66MBXP.mjs} +1 -1
- package/dist/{chunk-FDKCMEMD.mjs → chunk-R4HAAT6R.mjs} +1 -1
- package/dist/chunk-WUHNPHD5.mjs +0 -0
- package/dist/codeBlock/index.mjs +1 -1
- package/dist/colorPicker/index.d.mts +4 -0
- package/dist/colorPicker/index.d.ts +4 -0
- package/dist/colorPicker/index.js +80 -23
- package/dist/colorPicker/index.mjs +54 -15
- package/dist/dataTable/index.d.mts +2 -1
- package/dist/dataTable/index.d.ts +2 -1
- package/dist/dataTable/index.js +1 -1
- package/dist/dataTable/index.mjs +1 -1
- package/dist/elements/index.d.mts +7 -1
- package/dist/elements/index.d.ts +7 -1
- package/dist/elements/index.js +62 -34
- package/dist/elements/index.mjs +19 -7
- package/dist/index.css +11 -3
- package/dist/index.d.mts +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +62 -34
- package/dist/index.mjs +62 -34
- package/dist/layout/index.mjs +2 -2
- package/dist/switch/index.d.mts +1 -1
- package/dist/switch/index.d.ts +1 -1
- package/dist/tabs/index.d.mts +2 -2
- package/dist/tabs/index.d.ts +2 -2
- package/dist/tabs/index.js +15 -13
- package/dist/tabs/index.mjs +15 -13
- package/dist/textarea/index.d.mts +1 -0
- package/dist/textarea/index.d.ts +1 -0
- package/dist/textarea/index.js +59 -36
- package/dist/textarea/index.mjs +59 -36
- package/package.json +10 -10
- package/dist/commonTypes-cyhMPvmz.d.mts +0 -4
- package/dist/commonTypes-cyhMPvmz.d.ts +0 -4
- /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
|
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
|
94
|
+
var React3 = __toESM(require("react"));
|
49
95
|
|
50
96
|
// elements/tooltip/Tooltip.tsx
|
51
|
-
var
|
97
|
+
var import_react2 = __toESM(require("react"));
|
52
98
|
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
|
53
|
-
var TooltipContent =
|
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 =
|
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__ */
|
127
|
+
return /* @__PURE__ */ import_react2.default.createElement(
|
82
128
|
TooltipPrimitive.TooltipProvider,
|
83
129
|
{
|
84
130
|
delayDuration,
|
85
131
|
...providerProps
|
86
132
|
},
|
87
|
-
/* @__PURE__ */
|
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__ */
|
96
|
-
/* @__PURE__ */
|
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 =
|
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__ */
|
114
|
-
), hint && /* @__PURE__ */
|
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__ */
|
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__ */
|
137
|
-
/* @__PURE__ */
|
138
|
-
/* @__PURE__ */
|
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,
|
152
|
-
(0,
|
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__ */
|
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__ */
|
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__ */
|
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-
|
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__ */
|
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-
|
5
|
+
} from "../chunk-2R7F2GL7.mjs";
|
5
6
|
|
6
7
|
// elements/colorPicker/ColorPicker.tsx
|
7
|
-
import
|
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
|
14
|
-
var Label =
|
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__ */
|
26
|
-
), hint && /* @__PURE__ */
|
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__ */
|
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__ */
|
49
|
-
/* @__PURE__ */
|
50
|
-
/* @__PURE__ */
|
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__ */
|
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__ */
|
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__ */
|
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-
|
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__ */
|
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;
|
package/dist/dataTable/index.js
CHANGED
@@ -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-
|
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),
|
package/dist/dataTable/index.mjs
CHANGED
@@ -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-
|
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?:
|
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 */
|
package/dist/elements/index.d.ts
CHANGED
@@ -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?:
|
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 */
|
package/dist/elements/index.js
CHANGED
@@ -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-
|
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
|
-
|
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(
|
3741
|
-
|
3742
|
-
|
3743
|
-
|
3744
|
-
|
3745
|
-
|
3746
|
-
|
3747
|
-
|
3748
|
-
|
3749
|
-
|
3750
|
-
|
3751
|
-
|
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-
|
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-
|
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(
|