@sikka/hawa 0.26.21 → 0.26.23
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 +2 -18
- package/dist/alert/index.d.mts +1 -0
- package/dist/alert/index.d.ts +1 -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 +3 -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/carousel/index.d.mts +2 -0
- package/dist/carousel/index.d.ts +2 -0
- package/dist/carousel/index.js +31 -16
- package/dist/carousel/index.mjs +30 -15
- package/dist/checkbox/index.d.mts +1 -1
- package/dist/checkbox/index.d.ts +1 -1
- package/dist/chip/index.d.mts +1 -1
- package/dist/chip/index.d.ts +1 -1
- 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/chunk-ZFXKCRJC.mjs +11 -0
- package/dist/codeBlock/index.d.mts +2 -1
- package/dist/codeBlock/index.d.ts +2 -1
- package/dist/codeBlock/index.js +21 -17
- package/dist/codeBlock/index.mjs +21 -12
- package/dist/collapsible/index.mjs +2 -0
- 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 +55 -15
- package/dist/commonTypes-2k6FnHw5.d.mts +4 -0
- package/dist/commonTypes-2k6FnHw5.d.ts +4 -0
- 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 +11 -2
- package/dist/elements/index.d.ts +11 -2
- package/dist/elements/index.js +104 -59
- package/dist/elements/index.mjs +69 -33
- package/dist/hooks/index.mjs +1 -0
- package/dist/index.css +377 -202
- package/dist/index.d.mts +11 -2
- package/dist/index.d.ts +11 -2
- package/dist/index.js +104 -59
- package/dist/index.mjs +117 -60
- package/dist/layout/index.mjs +3 -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 +11 -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
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(
|
@@ -6910,6 +6938,8 @@ function useClipboard({ timeout = 2e3 } = {}) {
|
|
6910
6938
|
}
|
6911
6939
|
|
6912
6940
|
// elements/codeBlock/CodeBlock.tsx
|
6941
|
+
(typeof global !== "undefined" ? global : window).Prism = import_prism_react_renderer.Prism;
|
6942
|
+
require("prismjs/components/prism-bash");
|
6913
6943
|
var CodeBlock = ({
|
6914
6944
|
tabs,
|
6915
6945
|
code,
|
@@ -6922,8 +6952,7 @@ var CodeBlock = ({
|
|
6922
6952
|
}) => {
|
6923
6953
|
const clipboard = useClipboard();
|
6924
6954
|
const [selectedTab, setSelectedTab] = (0, import_react30.useState)(0);
|
6925
|
-
const
|
6926
|
-
const theme = isDarkMode ? import_prism_react_renderer.themes.vsDark : import_prism_react_renderer.themes.vsLight;
|
6955
|
+
const theme = import_prism_react_renderer.themes.oceanicNext;
|
6927
6956
|
let widthStyles = {
|
6928
6957
|
full: "hawa-w-full",
|
6929
6958
|
md: "hawa-w-full hawa-max-w-md",
|
@@ -6943,15 +6972,15 @@ var CodeBlock = ({
|
|
6943
6972
|
"div",
|
6944
6973
|
{
|
6945
6974
|
className: cn(
|
6946
|
-
"hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t
|
6947
|
-
fileName && tabs ? "hawa-bg-
|
6975
|
+
"hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-2 hawa-py-0.5 hawa-pb-0 hawa-font-mono hawa-text-foreground",
|
6976
|
+
fileName && tabs ? "hawa-bg-primary/10" : "hawa-bg-primary/15"
|
6948
6977
|
)
|
6949
6978
|
},
|
6950
6979
|
/* @__PURE__ */ import_react30.default.createElement(
|
6951
6980
|
"div",
|
6952
6981
|
{
|
6953
6982
|
className: cn(
|
6954
|
-
"mono hawa-w-full hawa-max-w-[52px] hawa-rounded-inner hawa-p-1 hawa-py-0.5 hawa-text-center hawa-text-[0.75rem]"
|
6983
|
+
"hawa-font-mono hawa-w-full hawa-max-w-[52px] hawa-rounded-inner hawa-p-1 hawa-py-0.5 hawa-text-center hawa-text-[0.75rem]"
|
6955
6984
|
)
|
6956
6985
|
},
|
6957
6986
|
fileName
|
@@ -6961,7 +6990,8 @@ var CodeBlock = ({
|
|
6961
6990
|
"div",
|
6962
6991
|
{
|
6963
6992
|
className: cn(
|
6964
|
-
|
6993
|
+
// hawa-bg-gray-300 dark:hawa-bg-red-600
|
6994
|
+
"hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-1 hawa-bg-primary/15 hawa-pb-0 hawa-font-mono hawa-text-foreground",
|
6965
6995
|
tabs && fileName && "hawa-rounded-t-none"
|
6966
6996
|
)
|
6967
6997
|
},
|
@@ -6978,7 +7008,7 @@ var CodeBlock = ({
|
|
6978
7008
|
{
|
6979
7009
|
onClick: () => setSelectedTab(i),
|
6980
7010
|
className: cn(
|
6981
|
-
"hawa-mb-
|
7011
|
+
"hawa-mb-0.5 hawa-w-full hawa-max-w-[52px] hawa-cursor-pointer hawa-rounded-inner hawa-p-2 hawa-py-0.5 hawa-text-center hawa-text-[0.7rem] hawa-transition-all hover:hawa-bg-muted-foreground/20"
|
6982
7012
|
)
|
6983
7013
|
},
|
6984
7014
|
tab.title
|
@@ -6989,7 +7019,7 @@ var CodeBlock = ({
|
|
6989
7019
|
"div",
|
6990
7020
|
{
|
6991
7021
|
className: cn(
|
6992
|
-
"hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-between hawa-border hawa-bg-
|
7022
|
+
"hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-between hawa-border hawa-bg-gray-700 hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base ",
|
6993
7023
|
tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded"
|
6994
7024
|
)
|
6995
7025
|
},
|
@@ -7018,12 +7048,12 @@ var CodeBlock = ({
|
|
7018
7048
|
size: "icon",
|
7019
7049
|
onClick: () => clipboard.copy(tabs ? tabs[selectedTab].code : code),
|
7020
7050
|
variant: "outline",
|
7021
|
-
className: "hawa-text-
|
7051
|
+
className: "hawa-text-gray-200 hawa-opacity-50 "
|
7022
7052
|
},
|
7023
7053
|
/* @__PURE__ */ import_react30.default.createElement(
|
7024
7054
|
"svg",
|
7025
7055
|
{
|
7026
|
-
"aria-label": "Copy
|
7056
|
+
"aria-label": "Copy",
|
7027
7057
|
stroke: "currentColor",
|
7028
7058
|
fill: "none",
|
7029
7059
|
strokeWidth: "2",
|
@@ -7050,11 +7080,13 @@ var Carousel = ({
|
|
7050
7080
|
showArrows,
|
7051
7081
|
options,
|
7052
7082
|
autoplay,
|
7083
|
+
direction = "ltr",
|
7053
7084
|
autoplayInterval = 3e3,
|
7054
7085
|
...props
|
7055
7086
|
}) => {
|
7056
7087
|
const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)({
|
7057
7088
|
...options,
|
7089
|
+
direction,
|
7058
7090
|
loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
|
7059
7091
|
});
|
7060
7092
|
const [selectedIndex, setSelectedIndex] = (0, import_react31.useState)(0);
|
@@ -7093,6 +7125,7 @@ var Carousel = ({
|
|
7093
7125
|
))))), /* @__PURE__ */ import_react31.default.createElement(
|
7094
7126
|
Dots,
|
7095
7127
|
{
|
7128
|
+
direction,
|
7096
7129
|
itemsLength: length,
|
7097
7130
|
selectedIndex,
|
7098
7131
|
onDotClick: (index) => emblaApi == null ? void 0 : emblaApi.scrollTo(index)
|
@@ -7107,22 +7140,34 @@ var Carousel = ({
|
|
7107
7140
|
}
|
7108
7141
|
));
|
7109
7142
|
};
|
7110
|
-
var Dots = ({
|
7143
|
+
var Dots = ({
|
7144
|
+
onDotClick,
|
7145
|
+
itemsLength,
|
7146
|
+
selectedIndex,
|
7147
|
+
direction
|
7148
|
+
}) => {
|
7111
7149
|
const arr = new Array(itemsLength).fill(0);
|
7112
|
-
return /* @__PURE__ */ import_react31.default.createElement(
|
7113
|
-
|
7114
|
-
|
7115
|
-
|
7116
|
-
|
7117
|
-
|
7118
|
-
|
7119
|
-
|
7120
|
-
|
7121
|
-
|
7122
|
-
|
7123
|
-
|
7124
|
-
|
7125
|
-
|
7150
|
+
return /* @__PURE__ */ import_react31.default.createElement(
|
7151
|
+
"div",
|
7152
|
+
{
|
7153
|
+
dir: direction,
|
7154
|
+
className: "hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1"
|
7155
|
+
},
|
7156
|
+
arr.map((_, index) => {
|
7157
|
+
const selected = index === selectedIndex;
|
7158
|
+
return /* @__PURE__ */ import_react31.default.createElement(
|
7159
|
+
"div",
|
7160
|
+
{
|
7161
|
+
key: index,
|
7162
|
+
onClick: () => onDotClick(index),
|
7163
|
+
className: cn(
|
7164
|
+
"hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer",
|
7165
|
+
!selected ? "hawa-w-2 hawa-opacity-50" : "hawa-w-6 hawa-opacity-100"
|
7166
|
+
)
|
7167
|
+
}
|
7168
|
+
);
|
7169
|
+
})
|
7170
|
+
);
|
7126
7171
|
};
|
7127
7172
|
var CarouselControls = (props) => {
|
7128
7173
|
return /* @__PURE__ */ import_react31.default.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ import_react31.default.createElement(
|
package/dist/elements/index.mjs
CHANGED
@@ -28,7 +28,7 @@ import {
|
|
28
28
|
TabsTrigger,
|
29
29
|
Textarea,
|
30
30
|
UncheckMark
|
31
|
-
} from "../chunk-
|
31
|
+
} from "../chunk-F3DQJHTG.mjs";
|
32
32
|
import {
|
33
33
|
Sheet,
|
34
34
|
SheetClose,
|
@@ -40,7 +40,7 @@ import {
|
|
40
40
|
SheetPortal,
|
41
41
|
SheetTitle,
|
42
42
|
SheetTrigger
|
43
|
-
} from "../chunk-
|
43
|
+
} from "../chunk-FQ6WVEHW.mjs";
|
44
44
|
import {
|
45
45
|
Button,
|
46
46
|
Card,
|
@@ -72,8 +72,12 @@ import {
|
|
72
72
|
Skeleton,
|
73
73
|
Tooltip,
|
74
74
|
buttonVariants,
|
75
|
+
calculateLuminance,
|
75
76
|
cn
|
76
|
-
} from "../chunk-
|
77
|
+
} from "../chunk-MQUAGP7K.mjs";
|
78
|
+
import {
|
79
|
+
__require
|
80
|
+
} from "../chunk-ZFXKCRJC.mjs";
|
77
81
|
|
78
82
|
// elements/accordion/Accordion.tsx
|
79
83
|
import * as React3 from "react";
|
@@ -1060,7 +1064,7 @@ var DataTable = ({
|
|
1060
1064
|
/* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-items-center hawa-justify-between" }, !props.showCount && /* @__PURE__ */ React10.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__ */ React10.createElement(
|
1061
1065
|
"div",
|
1062
1066
|
{
|
1063
|
-
className: "text-
|
1067
|
+
className: "text-muted-foreground text-sm",
|
1064
1068
|
dir: props.direction
|
1065
1069
|
},
|
1066
1070
|
/* @__PURE__ */ React10.createElement("span", null, (_g = props.texts) == null ? void 0 : _g.total),
|
@@ -2068,6 +2072,9 @@ var ColorPicker = ({
|
|
2068
2072
|
colorPickerProps,
|
2069
2073
|
textInputProps,
|
2070
2074
|
labelProps,
|
2075
|
+
forceHideHelperText,
|
2076
|
+
isLoading,
|
2077
|
+
preview = false,
|
2071
2078
|
...props
|
2072
2079
|
}) => {
|
2073
2080
|
const [selectedColor, setSelectedColor] = useState8(props.color);
|
@@ -2088,7 +2095,7 @@ var ColorPicker = ({
|
|
2088
2095
|
props.handleChange(e);
|
2089
2096
|
}
|
2090
2097
|
};
|
2091
|
-
return /* @__PURE__ */ React20.createElement("div", { className: "hawa-flex hawa-w-
|
2098
|
+
return /* @__PURE__ */ React20.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React20.createElement(Label, { ...labelProps }, props.label), isLoading ? /* @__PURE__ */ React20.createElement(Skeleton, { style: { height: 40, width: 148 } }) : /* @__PURE__ */ React20.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React20.createElement(
|
2092
2099
|
"div",
|
2093
2100
|
{
|
2094
2101
|
style: { height: 40, backgroundColor: selectedColor },
|
@@ -2097,6 +2104,7 @@ var ColorPicker = ({
|
|
2097
2104
|
/* @__PURE__ */ React20.createElement(
|
2098
2105
|
"input",
|
2099
2106
|
{
|
2107
|
+
disabled: preview,
|
2100
2108
|
type: "color",
|
2101
2109
|
value: selectedColor,
|
2102
2110
|
onChange: (e) => {
|
@@ -2115,16 +2123,23 @@ var ColorPicker = ({
|
|
2115
2123
|
), /* @__PURE__ */ React20.createElement("div", { className: "hawa-relative hawa-flex hawa-max-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React20.createElement(
|
2116
2124
|
"input",
|
2117
2125
|
{
|
2126
|
+
disabled: preview,
|
2118
2127
|
maxLength: 7,
|
2119
2128
|
type: "text",
|
2120
2129
|
onInput: handleTextInputChange,
|
2121
2130
|
value: selectedColor,
|
2122
2131
|
className: cn(
|
2123
|
-
"hawa-block hawa-h-[40px] hawa-w-24 hawa-rounded hawa-rounded-l-none hawa-
|
2132
|
+
"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",
|
2133
|
+
"hawa-border hawa-border-l-0 hawa-border-l-transparent"
|
2134
|
+
// "hawa-border hawa-border-x-0 hawa-border-x-transparent hawa-border-b-0 hawa-rounded-tr-none"
|
2124
2135
|
),
|
2136
|
+
style: {
|
2137
|
+
backgroundColor: preview ? selectedColor : "hsl(var(--background))",
|
2138
|
+
color: preview ? calculateLuminance(selectedColor) > 0.5 ? "black" : "white" : ""
|
2139
|
+
},
|
2125
2140
|
...textInputProps
|
2126
2141
|
}
|
2127
|
-
))), /* @__PURE__ */ React20.createElement(
|
2142
|
+
))), !forceHideHelperText && /* @__PURE__ */ React20.createElement(
|
2128
2143
|
"p",
|
2129
2144
|
{
|
2130
2145
|
className: cn(
|
@@ -2626,7 +2641,13 @@ var ScrollIndicator = ({
|
|
2626
2641
|
|
2627
2642
|
// elements/codeBlock/CodeBlock.tsx
|
2628
2643
|
import React27, { useState as useState11 } from "react";
|
2629
|
-
import {
|
2644
|
+
import {
|
2645
|
+
Highlight,
|
2646
|
+
themes,
|
2647
|
+
Prism
|
2648
|
+
} from "prism-react-renderer";
|
2649
|
+
(typeof global !== "undefined" ? global : window).Prism = Prism;
|
2650
|
+
__require("prismjs/components/prism-bash");
|
2630
2651
|
var CodeBlock = ({
|
2631
2652
|
tabs,
|
2632
2653
|
code,
|
@@ -2639,8 +2660,7 @@ var CodeBlock = ({
|
|
2639
2660
|
}) => {
|
2640
2661
|
const clipboard = useClipboard();
|
2641
2662
|
const [selectedTab, setSelectedTab] = useState11(0);
|
2642
|
-
const
|
2643
|
-
const theme = isDarkMode ? themes.vsDark : themes.vsLight;
|
2663
|
+
const theme = themes.oceanicNext;
|
2644
2664
|
let widthStyles = {
|
2645
2665
|
full: "hawa-w-full",
|
2646
2666
|
md: "hawa-w-full hawa-max-w-md",
|
@@ -2660,15 +2680,15 @@ var CodeBlock = ({
|
|
2660
2680
|
"div",
|
2661
2681
|
{
|
2662
2682
|
className: cn(
|
2663
|
-
"hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t
|
2664
|
-
fileName && tabs ? "hawa-bg-
|
2683
|
+
"hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-2 hawa-py-0.5 hawa-pb-0 hawa-font-mono hawa-text-foreground",
|
2684
|
+
fileName && tabs ? "hawa-bg-primary/10" : "hawa-bg-primary/15"
|
2665
2685
|
)
|
2666
2686
|
},
|
2667
2687
|
/* @__PURE__ */ React27.createElement(
|
2668
2688
|
"div",
|
2669
2689
|
{
|
2670
2690
|
className: cn(
|
2671
|
-
"mono hawa-w-full hawa-max-w-[52px] hawa-rounded-inner hawa-p-1 hawa-py-0.5 hawa-text-center hawa-text-[0.75rem]"
|
2691
|
+
"hawa-font-mono hawa-w-full hawa-max-w-[52px] hawa-rounded-inner hawa-p-1 hawa-py-0.5 hawa-text-center hawa-text-[0.75rem]"
|
2672
2692
|
)
|
2673
2693
|
},
|
2674
2694
|
fileName
|
@@ -2678,7 +2698,8 @@ var CodeBlock = ({
|
|
2678
2698
|
"div",
|
2679
2699
|
{
|
2680
2700
|
className: cn(
|
2681
|
-
|
2701
|
+
// hawa-bg-gray-300 dark:hawa-bg-red-600
|
2702
|
+
"hawa-flex hawa-flex-row hawa-gap-2 hawa-rounded-t hawa-p-1 hawa-bg-primary/15 hawa-pb-0 hawa-font-mono hawa-text-foreground",
|
2682
2703
|
tabs && fileName && "hawa-rounded-t-none"
|
2683
2704
|
)
|
2684
2705
|
},
|
@@ -2695,7 +2716,7 @@ var CodeBlock = ({
|
|
2695
2716
|
{
|
2696
2717
|
onClick: () => setSelectedTab(i),
|
2697
2718
|
className: cn(
|
2698
|
-
"hawa-mb-
|
2719
|
+
"hawa-mb-0.5 hawa-w-full hawa-max-w-[52px] hawa-cursor-pointer hawa-rounded-inner hawa-p-2 hawa-py-0.5 hawa-text-center hawa-text-[0.7rem] hawa-transition-all hover:hawa-bg-muted-foreground/20"
|
2699
2720
|
)
|
2700
2721
|
},
|
2701
2722
|
tab.title
|
@@ -2706,7 +2727,7 @@ var CodeBlock = ({
|
|
2706
2727
|
"div",
|
2707
2728
|
{
|
2708
2729
|
className: cn(
|
2709
|
-
"hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-between hawa-border hawa-bg-
|
2730
|
+
"hawa-flex hawa-w-full hawa-flex-row hawa-items-start hawa-justify-between hawa-border hawa-bg-gray-700 hawa-p-0 hawa-text-left hawa-text-sm sm:hawa-text-base ",
|
2710
2731
|
tabs || fileName ? "hawa-rounded-b hawa-rounded-t-none" : "hawa-rounded"
|
2711
2732
|
)
|
2712
2733
|
},
|
@@ -2735,12 +2756,12 @@ var CodeBlock = ({
|
|
2735
2756
|
size: "icon",
|
2736
2757
|
onClick: () => clipboard.copy(tabs ? tabs[selectedTab].code : code),
|
2737
2758
|
variant: "outline",
|
2738
|
-
className: "hawa-text-
|
2759
|
+
className: "hawa-text-gray-200 hawa-opacity-50 "
|
2739
2760
|
},
|
2740
2761
|
/* @__PURE__ */ React27.createElement(
|
2741
2762
|
"svg",
|
2742
2763
|
{
|
2743
|
-
"aria-label": "Copy
|
2764
|
+
"aria-label": "Copy",
|
2744
2765
|
stroke: "currentColor",
|
2745
2766
|
fill: "none",
|
2746
2767
|
strokeWidth: "2",
|
@@ -2767,11 +2788,13 @@ var Carousel = ({
|
|
2767
2788
|
showArrows,
|
2768
2789
|
options,
|
2769
2790
|
autoplay,
|
2791
|
+
direction = "ltr",
|
2770
2792
|
autoplayInterval = 3e3,
|
2771
2793
|
...props
|
2772
2794
|
}) => {
|
2773
2795
|
const [emblaRef, emblaApi] = useEmblaCarousel({
|
2774
2796
|
...options,
|
2797
|
+
direction,
|
2775
2798
|
loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
|
2776
2799
|
});
|
2777
2800
|
const [selectedIndex, setSelectedIndex] = useState12(0);
|
@@ -2810,6 +2833,7 @@ var Carousel = ({
|
|
2810
2833
|
))))), /* @__PURE__ */ React28.createElement(
|
2811
2834
|
Dots,
|
2812
2835
|
{
|
2836
|
+
direction,
|
2813
2837
|
itemsLength: length,
|
2814
2838
|
selectedIndex,
|
2815
2839
|
onDotClick: (index) => emblaApi == null ? void 0 : emblaApi.scrollTo(index)
|
@@ -2824,22 +2848,34 @@ var Carousel = ({
|
|
2824
2848
|
}
|
2825
2849
|
));
|
2826
2850
|
};
|
2827
|
-
var Dots = ({
|
2851
|
+
var Dots = ({
|
2852
|
+
onDotClick,
|
2853
|
+
itemsLength,
|
2854
|
+
selectedIndex,
|
2855
|
+
direction
|
2856
|
+
}) => {
|
2828
2857
|
const arr = new Array(itemsLength).fill(0);
|
2829
|
-
return /* @__PURE__ */ React28.createElement(
|
2830
|
-
|
2831
|
-
|
2832
|
-
|
2833
|
-
|
2834
|
-
|
2835
|
-
|
2836
|
-
|
2837
|
-
|
2838
|
-
|
2839
|
-
|
2840
|
-
|
2841
|
-
|
2842
|
-
|
2858
|
+
return /* @__PURE__ */ React28.createElement(
|
2859
|
+
"div",
|
2860
|
+
{
|
2861
|
+
dir: direction,
|
2862
|
+
className: "hawa-z-50 hawa-my-2 hawa-flex hawa-justify-center hawa-gap-1"
|
2863
|
+
},
|
2864
|
+
arr.map((_, index) => {
|
2865
|
+
const selected = index === selectedIndex;
|
2866
|
+
return /* @__PURE__ */ React28.createElement(
|
2867
|
+
"div",
|
2868
|
+
{
|
2869
|
+
key: index,
|
2870
|
+
onClick: () => onDotClick(index),
|
2871
|
+
className: cn(
|
2872
|
+
"hawa-h-2 hawa-rounded-full hawa-bg-primary hawa-transition-all hawa-duration-300 hover:hawa-cursor-pointer",
|
2873
|
+
!selected ? "hawa-w-2 hawa-opacity-50" : "hawa-w-6 hawa-opacity-100"
|
2874
|
+
)
|
2875
|
+
}
|
2876
|
+
);
|
2877
|
+
})
|
2878
|
+
);
|
2843
2879
|
};
|
2844
2880
|
var CarouselControls = (props) => {
|
2845
2881
|
return /* @__PURE__ */ React28.createElement("div", { className: "hawa-flex hawa-justify-end hawa-gap-2 " }, /* @__PURE__ */ React28.createElement(
|