@sikka/hawa 0.30.27-next → 0.30.28-next
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/dist/blocks/index.js +10 -2
- package/dist/blocks/index.mjs +1 -1
- package/dist/blocks/misc/index.js +10 -2
- package/dist/blocks/misc/index.mjs +10 -2
- package/dist/{chunk-SW7UK35T.mjs → chunk-MNK7PSNG.mjs} +10 -2
- package/dist/elements/index.js +10 -2
- package/dist/elements/index.mjs +1 -1
- package/dist/floatBox/index.d.mts +1 -0
- package/dist/floatBox/index.d.ts +1 -0
- package/dist/floatBox/index.js +10 -2
- package/dist/floatBox/index.js.map +1 -1
- package/dist/floatBox/index.mjs +10 -2
- package/dist/floatBox/index.mjs.map +1 -1
- package/dist/index.css +68 -0
- package/dist/index.js +10 -2
- package/dist/index.mjs +10 -2
- package/dist/tabs/index.js +10 -2
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +10 -2
- package/dist/tabs/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/blocks/index.js
CHANGED
|
@@ -5722,6 +5722,7 @@ var FloatBox = ({
|
|
|
5722
5722
|
side = "bottom",
|
|
5723
5723
|
sideOffset = 40,
|
|
5724
5724
|
align = "center",
|
|
5725
|
+
arrow = true,
|
|
5725
5726
|
...props
|
|
5726
5727
|
}) => {
|
|
5727
5728
|
let stylesMap = {
|
|
@@ -5746,18 +5747,25 @@ var FloatBox = ({
|
|
|
5746
5747
|
end: { right: sideOffset, bottom: 0 }
|
|
5747
5748
|
}
|
|
5748
5749
|
};
|
|
5750
|
+
const arrowDirection = {
|
|
5751
|
+
top: "hawa-arrow-default-bottom",
|
|
5752
|
+
bottom: "hawa-arrow-default-top",
|
|
5753
|
+
right: "hawa-arrow-default-left",
|
|
5754
|
+
left: "hawa-arrow-default-right"
|
|
5755
|
+
};
|
|
5749
5756
|
return /* @__PURE__ */ React43.createElement(
|
|
5750
5757
|
"div",
|
|
5751
5758
|
{
|
|
5752
5759
|
className: cn(
|
|
5753
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
5760
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
|
5754
5761
|
className
|
|
5755
5762
|
),
|
|
5756
5763
|
style: { ...stylesMap[side][align] },
|
|
5757
5764
|
"data-side": side,
|
|
5758
5765
|
"data-floatbox-state": open ? "open" : "closed"
|
|
5759
5766
|
},
|
|
5760
|
-
|
|
5767
|
+
arrow && /* @__PURE__ */ React43.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
5768
|
+
/* @__PURE__ */ React43.createElement("span", null, props.children)
|
|
5761
5769
|
);
|
|
5762
5770
|
};
|
|
5763
5771
|
|
package/dist/blocks/index.mjs
CHANGED
|
@@ -271,6 +271,7 @@ var FloatBox = ({
|
|
|
271
271
|
side = "bottom",
|
|
272
272
|
sideOffset = 40,
|
|
273
273
|
align = "center",
|
|
274
|
+
arrow = true,
|
|
274
275
|
...props
|
|
275
276
|
}) => {
|
|
276
277
|
let stylesMap = {
|
|
@@ -295,18 +296,25 @@ var FloatBox = ({
|
|
|
295
296
|
end: { right: sideOffset, bottom: 0 }
|
|
296
297
|
}
|
|
297
298
|
};
|
|
299
|
+
const arrowDirection = {
|
|
300
|
+
top: "hawa-arrow-default-bottom",
|
|
301
|
+
bottom: "hawa-arrow-default-top",
|
|
302
|
+
right: "hawa-arrow-default-left",
|
|
303
|
+
left: "hawa-arrow-default-right"
|
|
304
|
+
};
|
|
298
305
|
return /* @__PURE__ */ React11.createElement(
|
|
299
306
|
"div",
|
|
300
307
|
{
|
|
301
308
|
className: cn(
|
|
302
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
309
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
|
303
310
|
className
|
|
304
311
|
),
|
|
305
312
|
style: { ...stylesMap[side][align] },
|
|
306
313
|
"data-side": side,
|
|
307
314
|
"data-floatbox-state": open ? "open" : "closed"
|
|
308
315
|
},
|
|
309
|
-
|
|
316
|
+
arrow && /* @__PURE__ */ React11.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
317
|
+
/* @__PURE__ */ React11.createElement("span", null, props.children)
|
|
310
318
|
);
|
|
311
319
|
};
|
|
312
320
|
|
|
@@ -122,6 +122,7 @@ var FloatBox = ({
|
|
|
122
122
|
side = "bottom",
|
|
123
123
|
sideOffset = 40,
|
|
124
124
|
align = "center",
|
|
125
|
+
arrow = true,
|
|
125
126
|
...props
|
|
126
127
|
}) => {
|
|
127
128
|
let stylesMap = {
|
|
@@ -146,18 +147,25 @@ var FloatBox = ({
|
|
|
146
147
|
end: { right: sideOffset, bottom: 0 }
|
|
147
148
|
}
|
|
148
149
|
};
|
|
150
|
+
const arrowDirection = {
|
|
151
|
+
top: "hawa-arrow-default-bottom",
|
|
152
|
+
bottom: "hawa-arrow-default-top",
|
|
153
|
+
right: "hawa-arrow-default-left",
|
|
154
|
+
left: "hawa-arrow-default-right"
|
|
155
|
+
};
|
|
149
156
|
return /* @__PURE__ */ React9.createElement(
|
|
150
157
|
"div",
|
|
151
158
|
{
|
|
152
159
|
className: cn(
|
|
153
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
160
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
|
154
161
|
className
|
|
155
162
|
),
|
|
156
163
|
style: { ...stylesMap[side][align] },
|
|
157
164
|
"data-side": side,
|
|
158
165
|
"data-floatbox-state": open ? "open" : "closed"
|
|
159
166
|
},
|
|
160
|
-
|
|
167
|
+
arrow && /* @__PURE__ */ React9.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
168
|
+
/* @__PURE__ */ React9.createElement("span", null, props.children)
|
|
161
169
|
);
|
|
162
170
|
};
|
|
163
171
|
|
|
@@ -2870,6 +2870,7 @@ var FloatBox = ({
|
|
|
2870
2870
|
side = "bottom",
|
|
2871
2871
|
sideOffset = 40,
|
|
2872
2872
|
align = "center",
|
|
2873
|
+
arrow = true,
|
|
2873
2874
|
...props
|
|
2874
2875
|
}) => {
|
|
2875
2876
|
let stylesMap = {
|
|
@@ -2894,18 +2895,25 @@ var FloatBox = ({
|
|
|
2894
2895
|
end: { right: sideOffset, bottom: 0 }
|
|
2895
2896
|
}
|
|
2896
2897
|
};
|
|
2898
|
+
const arrowDirection = {
|
|
2899
|
+
top: "hawa-arrow-default-bottom",
|
|
2900
|
+
bottom: "hawa-arrow-default-top",
|
|
2901
|
+
right: "hawa-arrow-default-left",
|
|
2902
|
+
left: "hawa-arrow-default-right"
|
|
2903
|
+
};
|
|
2897
2904
|
return /* @__PURE__ */ React13.createElement(
|
|
2898
2905
|
"div",
|
|
2899
2906
|
{
|
|
2900
2907
|
className: cn(
|
|
2901
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
2908
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
|
2902
2909
|
className
|
|
2903
2910
|
),
|
|
2904
2911
|
style: { ...stylesMap[side][align] },
|
|
2905
2912
|
"data-side": side,
|
|
2906
2913
|
"data-floatbox-state": open ? "open" : "closed"
|
|
2907
2914
|
},
|
|
2908
|
-
|
|
2915
|
+
arrow && /* @__PURE__ */ React13.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
2916
|
+
/* @__PURE__ */ React13.createElement("span", null, props.children)
|
|
2909
2917
|
);
|
|
2910
2918
|
};
|
|
2911
2919
|
|
package/dist/elements/index.js
CHANGED
|
@@ -4226,6 +4226,7 @@ var FloatBox = ({
|
|
|
4226
4226
|
side = "bottom",
|
|
4227
4227
|
sideOffset = 40,
|
|
4228
4228
|
align = "center",
|
|
4229
|
+
arrow = true,
|
|
4229
4230
|
...props
|
|
4230
4231
|
}) => {
|
|
4231
4232
|
let stylesMap = {
|
|
@@ -4250,18 +4251,25 @@ var FloatBox = ({
|
|
|
4250
4251
|
end: { right: sideOffset, bottom: 0 }
|
|
4251
4252
|
}
|
|
4252
4253
|
};
|
|
4254
|
+
const arrowDirection = {
|
|
4255
|
+
top: "hawa-arrow-default-bottom",
|
|
4256
|
+
bottom: "hawa-arrow-default-top",
|
|
4257
|
+
right: "hawa-arrow-default-left",
|
|
4258
|
+
left: "hawa-arrow-default-right"
|
|
4259
|
+
};
|
|
4253
4260
|
return /* @__PURE__ */ React39.createElement(
|
|
4254
4261
|
"div",
|
|
4255
4262
|
{
|
|
4256
4263
|
className: cn(
|
|
4257
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
4264
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
|
4258
4265
|
className
|
|
4259
4266
|
),
|
|
4260
4267
|
style: { ...stylesMap[side][align] },
|
|
4261
4268
|
"data-side": side,
|
|
4262
4269
|
"data-floatbox-state": open ? "open" : "closed"
|
|
4263
4270
|
},
|
|
4264
|
-
|
|
4271
|
+
arrow && /* @__PURE__ */ React39.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
4272
|
+
/* @__PURE__ */ React39.createElement("span", null, props.children)
|
|
4265
4273
|
);
|
|
4266
4274
|
};
|
|
4267
4275
|
|
package/dist/elements/index.mjs
CHANGED
package/dist/floatBox/index.d.ts
CHANGED
package/dist/floatBox/index.js
CHANGED
|
@@ -52,6 +52,7 @@ var FloatBox = ({
|
|
|
52
52
|
side = "bottom",
|
|
53
53
|
sideOffset = 40,
|
|
54
54
|
align = "center",
|
|
55
|
+
arrow = true,
|
|
55
56
|
...props
|
|
56
57
|
}) => {
|
|
57
58
|
let stylesMap = {
|
|
@@ -76,18 +77,25 @@ var FloatBox = ({
|
|
|
76
77
|
end: { right: sideOffset, bottom: 0 }
|
|
77
78
|
}
|
|
78
79
|
};
|
|
80
|
+
const arrowDirection = {
|
|
81
|
+
top: "hawa-arrow-default-bottom",
|
|
82
|
+
bottom: "hawa-arrow-default-top",
|
|
83
|
+
right: "hawa-arrow-default-left",
|
|
84
|
+
left: "hawa-arrow-default-right"
|
|
85
|
+
};
|
|
79
86
|
return /* @__PURE__ */ React.createElement(
|
|
80
87
|
"div",
|
|
81
88
|
{
|
|
82
89
|
className: cn(
|
|
83
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
90
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
|
84
91
|
className
|
|
85
92
|
),
|
|
86
93
|
style: { ...stylesMap[side][align] },
|
|
87
94
|
"data-side": side,
|
|
88
95
|
"data-floatbox-state": open ? "open" : "closed"
|
|
89
96
|
},
|
|
90
|
-
|
|
97
|
+
arrow && /* @__PURE__ */ React.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
98
|
+
/* @__PURE__ */ React.createElement("span", null, props.children)
|
|
91
99
|
);
|
|
92
100
|
};
|
|
93
101
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../elements/floatBox/index.ts","../../elements/floatBox/FloatBox.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./FloatBox\";\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
1
|
+
{"version":3,"sources":["../../elements/floatBox/index.ts","../../elements/floatBox/FloatBox.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./FloatBox\";\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n arrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n arrow = true,\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n const arrowDirection = {\n top: \"hawa-arrow-default-bottom\",\n bottom: \"hawa-arrow-default-top\",\n right: \"hawa-arrow-default-left\",\n left: \"hawa-arrow-default-right\",\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover\",\n className,\n )}\n style={{ ...stylesMap[side][align] }}\n data-side={side}\n data-floatbox-state={open ? \"open\" : \"closed\"}\n >\n {arrow && <div className={cn(\"hawa-bg-red-500\", arrowDirection[side])} />}\n <span>{props.children}</span>\n </div>\n );\n};\n\nexport { FloatBox };\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADUA,IAAM,WAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,MAAI,YAAY;AAAA,IACd,QAAQ;AAAA,MACN,OAAO,EAAE,KAAK,YAAY,kBAAkB,EAAE;AAAA,MAC9C,QAAQ,EAAE,KAAK,WAAW;AAAA,MAC1B,KAAK,EAAE,KAAK,YAAY,gBAAgB,EAAE;AAAA,IAC5C;AAAA,IACA,KAAK;AAAA,MACH,OAAO,EAAE,QAAQ,YAAY,kBAAkB,EAAE;AAAA,MACjD,QAAQ,EAAE,QAAQ,WAAW;AAAA,MAC7B,KAAK,EAAE,QAAQ,YAAY,gBAAgB,EAAE;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,OAAO,EAAE,MAAM,YAAY,KAAK,GAAG;AAAA,MACnC,QAAQ,EAAE,MAAM,WAAW;AAAA,MAC3B,KAAK,EAAE,MAAM,YAAY,QAAQ,EAAE;AAAA,IACrC;AAAA,IACA,MAAM;AAAA,MACJ,OAAO,EAAE,OAAO,YAAY,KAAK,EAAE;AAAA,MACnC,QAAQ,EAAE,OAAO,WAAW;AAAA,MAC5B,KAAK,EAAE,OAAO,YAAY,QAAQ,EAAE;AAAA,IACtC;AAAA,EACF;AACA,QAAM,iBAAiB;AAAA,IACrB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,GAAG,UAAU,IAAI,EAAE,KAAK,EAAE;AAAA,MACnC,aAAW;AAAA,MACX,uBAAqB,OAAO,SAAS;AAAA;AAAA,IAEpC,SAAS,oCAAC,SAAI,WAAW,GAAG,mBAAmB,eAAe,IAAI,CAAC,GAAG;AAAA,IACvE,oCAAC,cAAM,MAAM,QAAS;AAAA,EACxB;AAEJ;","names":[]}
|
package/dist/floatBox/index.mjs
CHANGED
|
@@ -17,6 +17,7 @@ var FloatBox = ({
|
|
|
17
17
|
side = "bottom",
|
|
18
18
|
sideOffset = 40,
|
|
19
19
|
align = "center",
|
|
20
|
+
arrow = true,
|
|
20
21
|
...props
|
|
21
22
|
}) => {
|
|
22
23
|
let stylesMap = {
|
|
@@ -41,18 +42,25 @@ var FloatBox = ({
|
|
|
41
42
|
end: { right: sideOffset, bottom: 0 }
|
|
42
43
|
}
|
|
43
44
|
};
|
|
45
|
+
const arrowDirection = {
|
|
46
|
+
top: "hawa-arrow-default-bottom",
|
|
47
|
+
bottom: "hawa-arrow-default-top",
|
|
48
|
+
right: "hawa-arrow-default-left",
|
|
49
|
+
left: "hawa-arrow-default-right"
|
|
50
|
+
};
|
|
44
51
|
return /* @__PURE__ */ React.createElement(
|
|
45
52
|
"div",
|
|
46
53
|
{
|
|
47
54
|
className: cn(
|
|
48
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
55
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
|
49
56
|
className
|
|
50
57
|
),
|
|
51
58
|
style: { ...stylesMap[side][align] },
|
|
52
59
|
"data-side": side,
|
|
53
60
|
"data-floatbox-state": open ? "open" : "closed"
|
|
54
61
|
},
|
|
55
|
-
|
|
62
|
+
arrow && /* @__PURE__ */ React.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
63
|
+
/* @__PURE__ */ React.createElement("span", null, props.children)
|
|
56
64
|
);
|
|
57
65
|
};
|
|
58
66
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../elements/floatBox/FloatBox.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
1
|
+
{"version":3,"sources":["../../elements/floatBox/FloatBox.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n arrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n arrow = true,\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n const arrowDirection = {\n top: \"hawa-arrow-default-bottom\",\n bottom: \"hawa-arrow-default-top\",\n right: \"hawa-arrow-default-left\",\n left: \"hawa-arrow-default-right\",\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover\",\n className,\n )}\n style={{ ...stylesMap[side][align] }}\n data-side={side}\n data-floatbox-state={open ? \"open\" : \"closed\"}\n >\n {arrow && <div className={cn(\"hawa-bg-red-500\", arrowDirection[side])} />}\n <span>{props.children}</span>\n </div>\n );\n};\n\nexport { FloatBox };\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;AAAA,YAAY,WAAW;;;ACAvB,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADUA,IAAM,WAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,MAAI,YAAY;AAAA,IACd,QAAQ;AAAA,MACN,OAAO,EAAE,KAAK,YAAY,kBAAkB,EAAE;AAAA,MAC9C,QAAQ,EAAE,KAAK,WAAW;AAAA,MAC1B,KAAK,EAAE,KAAK,YAAY,gBAAgB,EAAE;AAAA,IAC5C;AAAA,IACA,KAAK;AAAA,MACH,OAAO,EAAE,QAAQ,YAAY,kBAAkB,EAAE;AAAA,MACjD,QAAQ,EAAE,QAAQ,WAAW;AAAA,MAC7B,KAAK,EAAE,QAAQ,YAAY,gBAAgB,EAAE;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,OAAO,EAAE,MAAM,YAAY,KAAK,GAAG;AAAA,MACnC,QAAQ,EAAE,MAAM,WAAW;AAAA,MAC3B,KAAK,EAAE,MAAM,YAAY,QAAQ,EAAE;AAAA,IACrC;AAAA,IACA,MAAM;AAAA,MACJ,OAAO,EAAE,OAAO,YAAY,KAAK,EAAE;AAAA,MACnC,QAAQ,EAAE,OAAO,WAAW;AAAA,MAC5B,KAAK,EAAE,OAAO,YAAY,QAAQ,EAAE;AAAA,IACtC;AAAA,EACF;AACA,QAAM,iBAAiB;AAAA,IACrB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,GAAG,UAAU,IAAI,EAAE,KAAK,EAAE;AAAA,MACnC,aAAW;AAAA,MACX,uBAAqB,OAAO,SAAS;AAAA;AAAA,IAEpC,SAAS,oCAAC,SAAI,WAAW,GAAG,mBAAmB,eAAe,IAAI,CAAC,GAAG;AAAA,IACvE,oCAAC,cAAM,MAAM,QAAS;AAAA,EACxB;AAEJ;","names":[]}
|
package/dist/index.css
CHANGED
|
@@ -3158,6 +3158,74 @@ input[type="number"]::-webkit-inner-spin-button,
|
|
|
3158
3158
|
.hawa-repeat-infinite {
|
|
3159
3159
|
animation-iteration-count: infinite;
|
|
3160
3160
|
}
|
|
3161
|
+
.hawa-arrow-default-top {
|
|
3162
|
+
position: relative;
|
|
3163
|
+
}
|
|
3164
|
+
.hawa-arrow-default-top:before, .hawa-arrow-default-top:after {
|
|
3165
|
+
content: "";
|
|
3166
|
+
position: absolute;
|
|
3167
|
+
border-top: 10px solid transparent;
|
|
3168
|
+
border-right: 10px solid transparent;
|
|
3169
|
+
border-bottom: 10px solid hsl(var(--border));
|
|
3170
|
+
border-left: 10px solid transparent;
|
|
3171
|
+
left: 10px;
|
|
3172
|
+
top: -20px;
|
|
3173
|
+
}
|
|
3174
|
+
.hawa-arrow-default-top:after {
|
|
3175
|
+
border-bottom: 10px solid hsl(var(--popover));
|
|
3176
|
+
top: -19px;
|
|
3177
|
+
}
|
|
3178
|
+
.hawa-arrow-default-right {
|
|
3179
|
+
position: relative;
|
|
3180
|
+
}
|
|
3181
|
+
.hawa-arrow-default-right:before, .hawa-arrow-default-right:after {
|
|
3182
|
+
content: "";
|
|
3183
|
+
position: absolute;
|
|
3184
|
+
border-top: 10px solid transparent;
|
|
3185
|
+
border-right: 10px solid transparent;
|
|
3186
|
+
border-bottom: 10px solid transparent;
|
|
3187
|
+
border-left: 10px solid hsl(var(--border));
|
|
3188
|
+
top: 10px;
|
|
3189
|
+
right: -20px;
|
|
3190
|
+
}
|
|
3191
|
+
.hawa-arrow-default-right:after {
|
|
3192
|
+
border-left: 10px solid hsl(var(--popover));
|
|
3193
|
+
right: -19px;
|
|
3194
|
+
}
|
|
3195
|
+
.hawa-arrow-default-bottom {
|
|
3196
|
+
position: relative;
|
|
3197
|
+
}
|
|
3198
|
+
.hawa-arrow-default-bottom:before, .hawa-arrow-default-bottom:after {
|
|
3199
|
+
content: "";
|
|
3200
|
+
position: absolute;
|
|
3201
|
+
border-top: 10px solid hsl(var(--border));
|
|
3202
|
+
border-right: 10px solid transparent;
|
|
3203
|
+
border-bottom: 10px solid transparent;
|
|
3204
|
+
border-left: 10px solid transparent;
|
|
3205
|
+
left: 10px;
|
|
3206
|
+
bottom: -20px;
|
|
3207
|
+
}
|
|
3208
|
+
.hawa-arrow-default-bottom:after {
|
|
3209
|
+
border-top: 10px solid hsl(var(--popover));
|
|
3210
|
+
bottom: -19px;
|
|
3211
|
+
}
|
|
3212
|
+
.hawa-arrow-default-left {
|
|
3213
|
+
position: relative;
|
|
3214
|
+
}
|
|
3215
|
+
.hawa-arrow-default-left:before, .hawa-arrow-default-left:after {
|
|
3216
|
+
content: "";
|
|
3217
|
+
position: absolute;
|
|
3218
|
+
border-top: 10px solid transparent;
|
|
3219
|
+
border-right: 10px solid hsl(var(--border));
|
|
3220
|
+
border-bottom: 10px solid transparent;
|
|
3221
|
+
border-left: 10px solid transparent;
|
|
3222
|
+
top: 10px;
|
|
3223
|
+
left: -20px;
|
|
3224
|
+
}
|
|
3225
|
+
.hawa-arrow-default-left:after {
|
|
3226
|
+
border-right: 10px solid hsl(var(--popover));
|
|
3227
|
+
left: -19px;
|
|
3228
|
+
}
|
|
3161
3229
|
.shadow-color-primary {
|
|
3162
3230
|
--tw-shadow: 0.25rem 0.25rem hsl(var(--primary));
|
|
3163
3231
|
box-shadow: var(--tw-shadow);
|
package/dist/index.js
CHANGED
|
@@ -4604,6 +4604,7 @@ var FloatBox = ({
|
|
|
4604
4604
|
side = "bottom",
|
|
4605
4605
|
sideOffset = 40,
|
|
4606
4606
|
align = "center",
|
|
4607
|
+
arrow = true,
|
|
4607
4608
|
...props
|
|
4608
4609
|
}) => {
|
|
4609
4610
|
let stylesMap = {
|
|
@@ -4628,18 +4629,25 @@ var FloatBox = ({
|
|
|
4628
4629
|
end: { right: sideOffset, bottom: 0 }
|
|
4629
4630
|
}
|
|
4630
4631
|
};
|
|
4632
|
+
const arrowDirection = {
|
|
4633
|
+
top: "hawa-arrow-default-bottom",
|
|
4634
|
+
bottom: "hawa-arrow-default-top",
|
|
4635
|
+
right: "hawa-arrow-default-left",
|
|
4636
|
+
left: "hawa-arrow-default-right"
|
|
4637
|
+
};
|
|
4631
4638
|
return /* @__PURE__ */ React39.createElement(
|
|
4632
4639
|
"div",
|
|
4633
4640
|
{
|
|
4634
4641
|
className: cn(
|
|
4635
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
4642
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
|
4636
4643
|
className
|
|
4637
4644
|
),
|
|
4638
4645
|
style: { ...stylesMap[side][align] },
|
|
4639
4646
|
"data-side": side,
|
|
4640
4647
|
"data-floatbox-state": open ? "open" : "closed"
|
|
4641
4648
|
},
|
|
4642
|
-
|
|
4649
|
+
arrow && /* @__PURE__ */ React39.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
4650
|
+
/* @__PURE__ */ React39.createElement("span", null, props.children)
|
|
4643
4651
|
);
|
|
4644
4652
|
};
|
|
4645
4653
|
|
package/dist/index.mjs
CHANGED
|
@@ -4374,6 +4374,7 @@ var FloatBox = ({
|
|
|
4374
4374
|
side = "bottom",
|
|
4375
4375
|
sideOffset = 40,
|
|
4376
4376
|
align = "center",
|
|
4377
|
+
arrow = true,
|
|
4377
4378
|
...props
|
|
4378
4379
|
}) => {
|
|
4379
4380
|
let stylesMap = {
|
|
@@ -4398,18 +4399,25 @@ var FloatBox = ({
|
|
|
4398
4399
|
end: { right: sideOffset, bottom: 0 }
|
|
4399
4400
|
}
|
|
4400
4401
|
};
|
|
4402
|
+
const arrowDirection = {
|
|
4403
|
+
top: "hawa-arrow-default-bottom",
|
|
4404
|
+
bottom: "hawa-arrow-default-top",
|
|
4405
|
+
right: "hawa-arrow-default-left",
|
|
4406
|
+
left: "hawa-arrow-default-right"
|
|
4407
|
+
};
|
|
4401
4408
|
return /* @__PURE__ */ React39.createElement(
|
|
4402
4409
|
"div",
|
|
4403
4410
|
{
|
|
4404
4411
|
className: cn(
|
|
4405
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
4412
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
|
4406
4413
|
className
|
|
4407
4414
|
),
|
|
4408
4415
|
style: { ...stylesMap[side][align] },
|
|
4409
4416
|
"data-side": side,
|
|
4410
4417
|
"data-floatbox-state": open ? "open" : "closed"
|
|
4411
4418
|
},
|
|
4412
|
-
|
|
4419
|
+
arrow && /* @__PURE__ */ React39.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
4420
|
+
/* @__PURE__ */ React39.createElement("span", null, props.children)
|
|
4413
4421
|
);
|
|
4414
4422
|
};
|
|
4415
4423
|
|
package/dist/tabs/index.js
CHANGED
|
@@ -224,6 +224,7 @@ var FloatBox = ({
|
|
|
224
224
|
side = "bottom",
|
|
225
225
|
sideOffset = 40,
|
|
226
226
|
align = "center",
|
|
227
|
+
arrow = true,
|
|
227
228
|
...props
|
|
228
229
|
}) => {
|
|
229
230
|
let stylesMap = {
|
|
@@ -248,18 +249,25 @@ var FloatBox = ({
|
|
|
248
249
|
end: { right: sideOffset, bottom: 0 }
|
|
249
250
|
}
|
|
250
251
|
};
|
|
252
|
+
const arrowDirection = {
|
|
253
|
+
top: "hawa-arrow-default-bottom",
|
|
254
|
+
bottom: "hawa-arrow-default-top",
|
|
255
|
+
right: "hawa-arrow-default-left",
|
|
256
|
+
left: "hawa-arrow-default-right"
|
|
257
|
+
};
|
|
251
258
|
return /* @__PURE__ */ React10.createElement(
|
|
252
259
|
"div",
|
|
253
260
|
{
|
|
254
261
|
className: cn(
|
|
255
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
262
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
|
256
263
|
className
|
|
257
264
|
),
|
|
258
265
|
style: { ...stylesMap[side][align] },
|
|
259
266
|
"data-side": side,
|
|
260
267
|
"data-floatbox-state": open ? "open" : "closed"
|
|
261
268
|
},
|
|
262
|
-
|
|
269
|
+
arrow && /* @__PURE__ */ React10.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
270
|
+
/* @__PURE__ */ React10.createElement("span", null, props.children)
|
|
263
271
|
);
|
|
264
272
|
};
|
|
265
273
|
|
package/dist/tabs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../elements/tabs/index.ts","../../elements/tabs/Tabs.tsx","../../hooks/useIsomorphicEffect.ts","../../hooks/useDiscloser.ts","../../hooks/useHover.ts","../../hooks/useToast.ts","../../hooks/useCarousel.ts","../../hooks/useDialogCarousel.ts","../../hooks/useDialogSteps.ts","../../hooks/useClipboard.ts","../../hooks/useBreakpoint.ts","../../hooks/useWindowSize.ts","../../hooks/useFocusWithin.ts","../../hooks/useMediaQuery.ts","../../hooks/useScrollPosition.ts","../../hooks/useTable.ts","../../hooks/useTabs.ts","../../hooks/useMeasureDirty.ts","../../util/index.ts","../../elements/chip/Chip.tsx","../../elements/floatBox/FloatBox.tsx"],"sourcesContent":["export * from \"./Tabs\";\n","import * as React from \"react\";\n\nimport { useMeasureDirty } from \"@hooks/index\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cn } from \"@util/index\";\nimport { tv } from \"tailwind-variants\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { Chip, ChipTypes } from \"../chip\";\nimport { FloatBox } from \"../floatBox\";\n\nconst tabsListVariant = tv({\n base: \"\",\n variants: {\n variant: {\n default:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n underlined:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n underlined_tabs:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground\",\n },\n orientation: { horizontal: \"\", vertical: \"\" },\n },\n compoundVariants: [\n {\n variant: \"underlined_tabs\",\n orientation: \"vertical\",\n class: \"hawa-border-e-2 hawa-border-e-primary\",\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"horizontal\",\n class: \"hawa-border-b-2 hawa-border-b-primary\",\n },\n ],\n defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\nconst tabsTriggerVariant = tv({\n base: \"\",\n variants: {\n variant: {\n default:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10\",\n underlined:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n underlined_tabs:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground dark:hawa-border-primary/10\",\n },\n orientation: { horizontal: \"\", vertical: \"\" },\n },\n compoundVariants: [\n {\n variant: \"underlined\",\n orientation: \"horizontal\",\n class:\n \"data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2\",\n },\n {\n variant: \"underlined\",\n orientation: \"vertical\",\n class:\n \"data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2\",\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"horizontal\",\n class: \"hawa-rounded-b-none\",\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"vertical\",\n class: \"hawa-rounded-e-none\",\n },\n ],\n defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\ntype TabsVariants = \"default\" | \"underlined\" | \"underlined_tabs\";\n\nconst TabsContext = React.createContext<{\n orientation?: OrientationType;\n variant?: TabsVariants;\n}>({ orientation: \"horizontal\", variant: \"default\" });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Root\n> & { variant?: TabsVariants };\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n TabsRootProps\n>(({ className, orientation, variant = \"default\", ...props }, ref) => (\n <TabsPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-flex hawa-gap-2\",\n orientation === \"vertical\" ? \"hawa-flex-row\" : \"hawa-flex-col\",\n className,\n )}\n {...props}\n >\n <TabsContext.Provider value={{ orientation, variant }}>\n {props.children}\n </TabsContext.Provider>\n </TabsPrimitive.Root>\n));\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { orientation, variant } = React.useContext(TabsContext);\n\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n tabsListVariant({ variant, orientation }),\n orientation === \"vertical\" ? \"hawa-flex-col\" : \"hawa-flex-row\",\n className,\n )}\n {...props}\n />\n );\n});\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Trigger\n> & {\n chipProps?: ChipTypes;\n className?: string;\n showPopover?: boolean;\n popoverContent?: React.ReactNode;\n};\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, chipProps, ...props }, ref) => {\n const { orientation, variant } = React.useContext(TabsContext);\n const tabTriggerRef = React.useRef(null);\n const { width } = useMeasureDirty(tabTriggerRef);\n\n return (\n <TabsPrimitive.Trigger\n ref={tabTriggerRef}\n className={cn(\n tabsTriggerVariant({ variant, orientation }),\n \"hawa-relative\",\n className,\n )}\n {...props}\n >\n {props.children}\n {chipProps && <Chip {...chipProps} />}\n\n <FloatBox\n align={orientation === \"vertical\" ? \"start\" : \"start\"}\n side={orientation === \"vertical\" ? \"right\" : \"bottom\"}\n sideOffset={orientation === \"vertical\" ? width + 30 : 45}\n open={props.showPopover}\n >\n {props.popoverContent}\n </FloatBox>\n </TabsPrimitive.Trigger>\n );\n});\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n \"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2\",\n className,\n )}\n {...props}\n />\n));\n\nTabs.displayName = TabsPrimitive.Root.displayName;\nTabsList.displayName = TabsPrimitive.List.displayName;\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n","import { useEffect, useLayoutEffect } from \"react\";\n\n// useLayoutEffect will show warning if used during ssr, e.g. with Next.js\n// useIsomorphicEffect removes it by replacing useLayoutEffect with useEffect during ssr\nexport const useIsomorphicEffect =\n typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n","import React, { useState } from \"react\";\n\ntype TUseDiscloser = {\n isOpen: boolean;\n onOpen: () => void;\n onClose: () => void;\n};\n\nconst useDiscloser = (value: boolean = false): TUseDiscloser => {\n const [open, setOpen] = useState<boolean>(value);\n const onOpen = () => setOpen(true);\n const onClose = () => setOpen(false);\n\n return {\n isOpen: open,\n onOpen: onOpen,\n onClose: onClose\n };\n};\n\nexport default useDiscloser;\n","import React, { useEffect, useRef, useState } from \"react\";\n\nfunction useHover() {\n const [value, setValue] = useState(false);\n const ref = useRef<any>(null);\n const handleMouseOver = () => setValue(true);\n const handleMouseOut = () => setValue(false);\n useEffect(\n () => {\n const node = ref.current;\n if (node) {\n node.addEventListener(\"mouseover\", handleMouseOver);\n node.addEventListener(\"mouseout\", handleMouseOut);\n return () => {\n node.removeEventListener(\"mouseover\", handleMouseOver);\n node.removeEventListener(\"mouseout\", handleMouseOut);\n };\n }\n },\n [ref.current] // Recall only if ref changes\n );\n return [ref, value];\n}\n\nexport default useHover;\n","import * as React from \"react\";\n\nimport type { ToasterToastProps } from \"@elements/toast\";\n\nconst TOAST_LIMIT = 5;\nconst TOAST_REMOVE_DELAY = 100000;\n\nconst actionTypes = {\n ADD_TOAST: \"ADD_TOAST\",\n UPDATE_TOAST: \"UPDATE_TOAST\",\n DISMISS_TOAST: \"DISMISS_TOAST\",\n REMOVE_TOAST: \"REMOVE_TOAST\"\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n count = (count + 1) % Number.MAX_VALUE;\n return count.toString();\n}\n\ntype ActionType = typeof actionTypes;\n\ntype Action =\n | { type: ActionType[\"ADD_TOAST\"]; toast: ToasterToastProps }\n | { type: ActionType[\"UPDATE_TOAST\"]; toast: Partial<ToasterToastProps> }\n | { type: ActionType[\"DISMISS_TOAST\"]; toastId?: ToasterToastProps[\"id\"] }\n | { type: ActionType[\"REMOVE_TOAST\"]; toastId?: ToasterToastProps[\"id\"] };\n\ninterface State {\n toasts: ToasterToastProps[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({ type: \"REMOVE_TOAST\", toastId: toastId });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case \"ADD_TOAST\":\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)\n };\n\n case \"UPDATE_TOAST\":\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n )\n };\n\n case \"DISMISS_TOAST\": {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined ? { ...t, open: false } : t\n )\n };\n }\n case \"REMOVE_TOAST\":\n if (action.toastId === undefined) {\n return { ...state, toasts: [] };\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId)\n };\n }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n}\n\ntype Toast = Omit<ToasterToastProps, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n const id = genId();\n\n const update = (props: ToasterToastProps) =>\n dispatch({ type: \"UPDATE_TOAST\", toast: { ...props, id } });\n const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id });\n\n dispatch({\n type: \"ADD_TOAST\",\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n }\n }\n });\n\n return { id: id, dismiss, update };\n}\n\nfunction useToast() {\n const [state, setState] = React.useState<State>(memoryState);\n\n React.useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId })\n };\n}\n\nexport { useToast, toast };\n","import { useState, useRef } from \"react\";\n\nconst useCarousel = (imageWidth: number) => {\n const [isDragging, setIsDragging] = useState(false);\n const [startDragX, setStartDragX] = useState(0);\n const [scrollLeft, setScrollLeft] = useState(0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const findClosestSnapPoint = (scrollLeft: number): number => {\n return Math.round(scrollLeft / imageWidth) * imageWidth;\n };\n\n const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n setIsDragging(true);\n setStartDragX(e.pageX - containerRef.current!.offsetLeft);\n setScrollLeft(containerRef.current!.scrollLeft);\n };\n\n const handleMouseLeave = () => {\n if (isDragging) {\n handleDragEnd();\n }\n };\n\n const handleMouseUp = () => {\n if (isDragging) {\n handleDragEnd();\n }\n };\n\n const handleDragEnd = () => {\n setIsDragging(false);\n const closestSnapPoint = findClosestSnapPoint(\n containerRef.current!.scrollLeft\n );\n containerRef.current!.scrollTo({\n left: closestSnapPoint,\n behavior: \"smooth\"\n });\n };\n\n const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!isDragging) return;\n e.preventDefault();\n const x = e.pageX - containerRef.current!.offsetLeft;\n const walk = x - startDragX;\n containerRef.current!.scrollLeft = scrollLeft - walk;\n };\n\n return {\n containerRef,\n handleMouseDown,\n handleMouseLeave,\n handleMouseUp,\n handleMouseMove\n };\n};\n\nexport default useCarousel;\n","import React, { useEffect, useState } from \"react\";\n\nimport AutoHeight from \"embla-carousel-auto-height\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\ntype DialogCarouselType = {\n canScrollPrev?: any;\n emblaRef?: any;\n emblaApi?: any;\n nextStep?: any;\n prevStep?: any;\n};\n\nexport const useDialogCarousel = (options?: any): DialogCarouselType => {\n const [emblaRef, emblaApi] = useEmblaCarousel(\n { loop: false, watchDrag: false, startIndex: 0, ...options },\n [AutoHeight({ destroyHeight: \"fit\", active: true })]\n );\n const [canScrollPrev, setCanScrollPrev] = useState(false);\n const checkCanScrollPrev = () => {\n if (emblaApi) {\n setCanScrollPrev(emblaApi.canScrollPrev());\n }\n };\n const nextStep = () => {\n if (emblaApi) {\n console.log(\"going to NEXT 👉\");\n emblaApi.scrollNext();\n }\n };\n\n const prevStep = () => {\n if (emblaApi) {\n console.log(\"going to BACK 👈\");\n emblaApi.scrollPrev();\n }\n };\n useEffect(() => {\n checkCanScrollPrev(); // Initial check\n emblaApi && emblaApi.on(\"select\", checkCanScrollPrev); // Update on slide change\n return () => {\n emblaApi && emblaApi.off(\"select\", checkCanScrollPrev);\n };\n }, [emblaApi]);\n\n return {\n emblaRef,\n emblaApi,\n nextStep,\n prevStep,\n canScrollPrev\n };\n};\n","import React, { useState, useEffect, useRef } from \"react\";\n\nexport const useMultiStepDialog = (\n initialStep: any,\n stepIds: any[],\n setOpenDialog: any\n) => {\n const [currentStep, setCurrentStep] = useState(initialStep);\n const [dialogHeight, setDialogHeight] = useState(null);\n const visibleStepRef = useRef<any>(null);\n\n useEffect(() => {\n if (visibleStepRef.current) {\n setDialogHeight(visibleStepRef.current.offsetHeight);\n }\n }, [currentStep, setOpenDialog]);\n\n const handleNext = () => {\n const currentIndex = stepIds.indexOf(currentStep);\n if (currentIndex < stepIds.length - 1) {\n setTimeout(() => {\n setCurrentStep(stepIds[currentIndex + 1]);\n }, 100);\n }\n };\n const handleBack = () => {\n const currentIndex = stepIds.indexOf(currentStep);\n if (currentIndex > 0) {\n setTimeout(() => {\n setCurrentStep(stepIds[currentIndex - 1]);\n }, 100);\n }\n };\n\n return {\n currentStep,\n dialogHeight,\n visibleStepRef,\n handleNext,\n handleBack\n };\n};\n","import { useState } from \"react\";\n\nexport function useClipboard({ timeout = 2000 } = {}): {\n copy: (value: any) => void;\n reset: () => void;\n error: Error | null;\n copied: boolean;\n} {\n const [error, setError] = useState<Error | null>(null);\n const [copied, setCopied] = useState<boolean>(false);\n const [copyTimeout, setCopyTimeout] = useState<NodeJS.Timeout | null>(null);\n\n const handleCopyResult = (value: boolean) => {\n clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n setCopyTimeout(setTimeout(() => setCopied(false), timeout));\n setCopied(value);\n };\n\n const copy = (valueToCopy: any) => {\n if (\"clipboard\" in navigator) {\n navigator.clipboard\n .writeText(valueToCopy)\n .then(() => handleCopyResult(true))\n .catch((err) => setError(err));\n } else {\n setError(new Error(\"useClipboard: navigator.clipboard is not supported\"));\n }\n };\n\n const reset = () => {\n setCopied(false);\n setError(null);\n clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n };\n\n return { copy, reset, error, copied };\n}\n","import React, { useState, useEffect } from \"react\";\n\nexport const useBreakpoint = () => {\n // Initialize breakpoint with a null value.\n const [breakpoint, setBreakpoint] = useState<any>(null);\n\n useEffect(() => {\n // Check if window is defined (i.e., if running on the client side)\n if (typeof window !== \"undefined\") {\n // Define the resize function within the effect.\n const resize = () => {\n setBreakpoint(window.innerWidth);\n };\n\n // Call resize initially to set the breakpoint based on the initial window size.\n resize();\n\n // Set up the resize event listener.\n window.addEventListener(\"resize\", resize);\n\n // Clean up the event listener when the component is unmounted.\n return () => {\n window.removeEventListener(\"resize\", resize);\n };\n }\n }, []); // The empty array ensures this useEffect runs once, similar to componentDidMount.\n\n return breakpoint;\n};\n\n// import React, { useState, useEffect } from \"react\";\n\n// export const useBreakpoint = () => {\n// const [breakpoint, setBreakpoint] = useState(window?.innerWidth);\n// const resize = () => {\n// setBreakpoint(window?.innerWidth);\n// };\n\n// useEffect(() => {\n// // Ensure this code is only run on the client side\n// if (typeof window !== \"undefined\") {\n// // Now it's safe to use window\n// setBreakpoint(window?.innerWidth);\n// window?.addEventListener(\"resize\", resize);\n\n// return () => {\n// window?.removeEventListener(\"resize\", resize);\n// };\n// }\n// }, []); // Empty dependency array ensures this useEffect runs once, similar to componentDidMount\n\n// return breakpoint;\n// };\n","import { useEffect, useState } from \"react\";\n\ninterface WindowSize {\n width: number | undefined;\n height: number | undefined;\n}\n\nexport const useWindowSize = () => {\n const [windowSize, setWindowSize] = useState<WindowSize>({\n width: undefined,\n height: undefined\n });\n\n useEffect(() => {\n function handleResize() {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight\n });\n }\n window.addEventListener(\"resize\", handleResize);\n handleResize();\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n return windowSize;\n};\n","// useFocusWithin hook detects if any element within has focus, it works the same way as :focus-within CSS selector:\nimport { useRef, useState, useEffect } from \"react\";\n\n// Define options for the useFocusWithin hook, which includes onFocus and onBlur callbacks.\nexport interface UseFocusWithinOptions {\n onFocus?(event: FocusEvent): void;\n onBlur?(event: FocusEvent): void;\n}\n\n// Function to check if the event's related target is contained within the current target.\nfunction containsRelatedTarget(event: FocusEvent) {\n if (\n event.currentTarget instanceof HTMLElement &&\n event.relatedTarget instanceof HTMLElement\n ) {\n return event.currentTarget.contains(event.relatedTarget);\n }\n\n return false;\n}\n\n// Custom React hook for handling focus events within an element.\nexport function useFocusWithin<T extends HTMLElement = any>({\n onBlur,\n onFocus\n}: UseFocusWithinOptions = {}): {\n ref: React.MutableRefObject<T>;\n focused: boolean;\n} {\n // Create a ref to hold the target element.\n const ref = useRef<T>(null!);\n\n // State to track if the element is focused.\n const [focused, _setFocused] = useState(false);\n\n // Create a ref to store the focused state.\n const focusedRef = useRef(false);\n\n // Function to set the focused state and update the ref.\n const setFocused = (value: boolean) => {\n _setFocused(value);\n focusedRef.current = value;\n };\n\n // Handle focus-in event: when the element gains focus.\n const handleFocusIn = (event: FocusEvent) => {\n if (!focusedRef.current) {\n setFocused(true);\n onFocus?.(event); // Call the onFocus callback if provided.\n }\n };\n\n // Handle focus-out event: when the element loses focus.\n const handleFocusOut = (event: FocusEvent) => {\n if (focusedRef.current && !containsRelatedTarget(event)) {\n setFocused(false);\n onBlur?.(event); // Call the onBlur callback if provided.\n }\n };\n\n // Attach event listeners for focusin and focusout events.\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener(\"focusin\", handleFocusIn);\n ref.current.addEventListener(\"focusout\", handleFocusOut);\n\n // Clean up event listeners when the component unmounts.\n return () => {\n ref.current?.removeEventListener(\"focusin\", handleFocusIn);\n ref.current?.removeEventListener(\"focusout\", handleFocusOut);\n };\n }\n\n return undefined;\n }, [handleFocusIn, handleFocusOut]);\n\n // Return the ref and focused state.\n return { ref, focused };\n}\n","import { useState, useEffect, useRef } from \"react\";\n\nexport interface UseMediaQueryOptions {\n getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(\n query: MediaQueryList,\n callback: MediaQueryCallback\n) {\n try {\n query.addEventListener(\"change\", callback);\n return () => query.removeEventListener(\"change\", callback);\n } catch (e) {\n query.addListener(callback);\n return () => query.removeListener(callback);\n }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n if (typeof initialValue === \"boolean\") {\n return initialValue;\n }\n\n if (typeof window !== \"undefined\" && \"matchMedia\" in window) {\n return window.matchMedia(query).matches;\n }\n\n return false;\n}\n\nexport function useMediaQuery(\n query: string,\n initialValue?: boolean,\n { getInitialValueInEffect }: UseMediaQueryOptions = {\n getInitialValueInEffect: true\n }\n) {\n const [matches, setMatches] = useState(\n getInitialValueInEffect\n ? initialValue\n : getInitialValue(query, initialValue)\n );\n const queryRef = useRef<MediaQueryList>();\n\n useEffect(() => {\n if (\"matchMedia\" in window) {\n queryRef.current = window.matchMedia(query);\n setMatches(queryRef.current.matches);\n return attachMediaListener(queryRef.current, (event) =>\n setMatches(event.matches)\n );\n }\n\n return undefined;\n }, [query]);\n\n return matches;\n}\n","import React, { useState, useEffect, useRef } from \"react\";\n\nfunction useScrollPosition(ref: any) {\n const [scrollPosition, setScrollPosition] = useState(0);\n // const savedRef = useRef();\n\n // useEffect(() => {\n // savedRef.current = ref;\n // }, [ref]);\n\n useEffect(() => {\n function handleScroll() {\n setScrollPosition(ref.current.scrollTop);\n }\n\n if (ref.current) {\n ref.current.addEventListener(\"scroll\", handleScroll);\n }\n\n return () => {\n if (ref.current) {\n ref.current.removeEventListener(\"scroll\", handleScroll);\n }\n };\n }, [ref]);\n\n return scrollPosition;\n}\n\nexport default useScrollPosition;\n","import React, { useState, useEffect } from \"react\";\n\nconst calculateRange = (data: any, rowsPerPage: any) => {\n const range = [];\n const num = Math.ceil(data?.length / rowsPerPage);\n let i = 1;\n for (let i = 1; i <= num; i++) {\n range.push(i);\n }\n return range;\n};\n\nconst sliceData = (data: any, page: any, rowsPerPage: any) => {\n return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage);\n};\n\n// useTable.js\nconst sortData = (data: any, sortColumn: any, sortDirection: any) => {\n if (sortColumn !== null) {\n return data?.sort((a: any, b: any) => {\n const aValue = a[sortColumn].value;\n const bValue = b[sortColumn].value;\n\n // Handle non-string values by using simple comparison\n if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n if (sortDirection === \"asc\") {\n return aValue.localeCompare(bValue);\n } else {\n return bValue.localeCompare(aValue);\n }\n } else {\n if (sortDirection === \"asc\") {\n return aValue - bValue;\n } else {\n return bValue - aValue;\n }\n }\n });\n }\n return data;\n};\n\nconst useTable = (\n data: any,\n page: any,\n rowsPerPage: any,\n sortColumn: any,\n sortDirection: any\n) => {\n const [tableRange, setTableRange] = useState<any>([]);\n const [slice, setSlice] = useState<any>([]);\n\n useEffect(() => {\n if (data) {\n const range = calculateRange(data, rowsPerPage);\n setTableRange([...range]);\n\n const sortedData = sortData(data, sortColumn, sortDirection);\n const slicedData = sliceData(sortedData, page, rowsPerPage);\n setSlice([...slicedData]);\n }\n }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection]);\n\n return { slice, range: tableRange };\n};\n\nexport default useTable;\n","import { useEffect, useState } from \"react\";\n\nfunction useTabs(initialTab = \"\") {\n const [activeTab, setActiveTab] = useState(initialTab);\n\n // Listen to hash changes in the URL\n useEffect(() => {\n const handleHashChange = () => {\n const hash = window.location.hash.substring(1);\n setActiveTab(hash || initialTab);\n };\n\n window.addEventListener(\"hashchange\", handleHashChange);\n\n // Initialize the tab based on the initial hash\n handleHashChange();\n\n return () => {\n // Remove the event listener when the component unmounts\n window.removeEventListener(\"hashchange\", handleHashChange);\n };\n }, [initialTab]);\n\n const handleTabChange = (index: any) => {\n setActiveTab(index);\n\n // Update the URL hash when the tab changes\n window.location.hash = index;\n };\n\n return {\n activeTab,\n handleTabChange\n };\n}\n\nexport { useTabs };\n","import { RefObject, useEffect, useRef, useState } from \"react\";\n\nexport interface ContentRect {\n width: number;\n height: number;\n top: number;\n right: number;\n left: number;\n bottom: number;\n}\nexport const useMeasureDirty = (ref: RefObject<HTMLElement>): ContentRect => {\n const frame = useRef(0);\n const [rect, set] = useState({\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n });\n\n const [observer] = useState(\n () =>\n new ResizeObserver((entries) => {\n const entry = entries[0];\n\n if (entry) {\n cancelAnimationFrame(frame.current);\n\n frame.current = requestAnimationFrame(() => {\n if (ref.current) {\n set(entry.contentRect);\n }\n });\n }\n }),\n );\n\n useEffect(() => {\n observer.disconnect();\n\n if (ref.current) {\n observer.observe(ref.current);\n }\n }, [ref]);\n\n return rect;\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nexport type ChipColors =\n | \"green\"\n | \"blue\"\n | \"red\"\n | \"yellow\"\n | \"orange\"\n | \"purple\"\n | \"cyan\"\n | \"hyper\"\n | \"oceanic\";\n\nexport type ChipTypes = React.HTMLAttributes<HTMLSpanElement> & {\n /** The text inside the chip */\n label: string;\n /** The small icon before the chip label */\n icon?: JSX.Element;\n /** The color of the chip, must be a tailwind color */\n color?: ChipColors;\n /** The size of the chip */\n size?: \"small\" | \"normal\" | \"large\";\n /** Enable/Disable the dot before the label of the chip */\n dot?: boolean;\n /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */\n dotType?: \"available\" | \"unavailable\";\n radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n (\n {\n label,\n size = \"normal\",\n icon,\n color,\n radius = \"inherit\",\n dotType,\n ...rest\n },\n ref\n ) => {\n let defaultStyles =\n \"hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center hawa-px-2.5 hawa-py-1 hawa-font-bold \";\n let radiusStyles = {\n inherit: \" hawa-rounded\",\n full: \"hawa-rounded-full\",\n none: \"hawa-rounded-none\"\n };\n let sizeStyles = {\n small:\n \"hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 \",\n normal: \"hawa-h-fit hawa-text-xs\",\n large: \"hawa-text-base\"\n };\n let dotStyles = {\n small: \"hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full\",\n normal: \"hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full\",\n large: \"hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full\"\n };\n let dotTypeStyles = {\n available: \"hawa-bg-green-500\",\n unavailable: \"hawa-bg-red-500\"\n };\n let colorStyles: any = {\n green:\n \"hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800\",\n blue: \"hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100\",\n red: \"hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100\",\n yellow:\n \"hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800\",\n orange:\n \"hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100\",\n purple:\n \"hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100\",\n cyan: \"hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800\",\n hyper:\n \"hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n oceanic:\n \"hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600\"\n };\n if (label) {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n defaultStyles,\n sizeStyles[size],\n radiusStyles[radius],\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n >\n {dotType && (\n <span\n className={cn(dotStyles[size], dotTypeStyles[dotType])}\n ></span>\n )}\n {icon && icon}\n {label}\n </span>\n );\n } else {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n \"hawa-h-2 hawa-w-2 hawa-rounded-full\",\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n ></span>\n );\n }\n }\n);\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n className,\n )}\n style={{ ...stylesMap[side][align] }}\n data-side={side}\n data-floatbox-state={open ? \"open\" : \"closed\"}\n >\n {props.children}\n </div>\n );\n};\n\nexport { FloatBox };\n"],"mappings":"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","names":["React","import_react","import_react","React","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","React","React"]}
|
|
1
|
+
{"version":3,"sources":["../../elements/tabs/index.ts","../../elements/tabs/Tabs.tsx","../../hooks/useIsomorphicEffect.ts","../../hooks/useDiscloser.ts","../../hooks/useHover.ts","../../hooks/useToast.ts","../../hooks/useCarousel.ts","../../hooks/useDialogCarousel.ts","../../hooks/useDialogSteps.ts","../../hooks/useClipboard.ts","../../hooks/useBreakpoint.ts","../../hooks/useWindowSize.ts","../../hooks/useFocusWithin.ts","../../hooks/useMediaQuery.ts","../../hooks/useScrollPosition.ts","../../hooks/useTable.ts","../../hooks/useTabs.ts","../../hooks/useMeasureDirty.ts","../../util/index.ts","../../elements/chip/Chip.tsx","../../elements/floatBox/FloatBox.tsx"],"sourcesContent":["export * from \"./Tabs\";\n","import * as React from \"react\";\n\nimport { useMeasureDirty } from \"@hooks/index\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cn } from \"@util/index\";\nimport { tv } from \"tailwind-variants\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { Chip, ChipTypes } from \"../chip\";\nimport { FloatBox } from \"../floatBox\";\n\nconst tabsListVariant = tv({\n base: \"\",\n variants: {\n variant: {\n default:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n underlined:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n underlined_tabs:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground\",\n },\n orientation: { horizontal: \"\", vertical: \"\" },\n },\n compoundVariants: [\n {\n variant: \"underlined_tabs\",\n orientation: \"vertical\",\n class: \"hawa-border-e-2 hawa-border-e-primary\",\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"horizontal\",\n class: \"hawa-border-b-2 hawa-border-b-primary\",\n },\n ],\n defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\nconst tabsTriggerVariant = tv({\n base: \"\",\n variants: {\n variant: {\n default:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10\",\n underlined:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n underlined_tabs:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground dark:hawa-border-primary/10\",\n },\n orientation: { horizontal: \"\", vertical: \"\" },\n },\n compoundVariants: [\n {\n variant: \"underlined\",\n orientation: \"horizontal\",\n class:\n \"data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2\",\n },\n {\n variant: \"underlined\",\n orientation: \"vertical\",\n class:\n \"data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2\",\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"horizontal\",\n class: \"hawa-rounded-b-none\",\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"vertical\",\n class: \"hawa-rounded-e-none\",\n },\n ],\n defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\ntype TabsVariants = \"default\" | \"underlined\" | \"underlined_tabs\";\n\nconst TabsContext = React.createContext<{\n orientation?: OrientationType;\n variant?: TabsVariants;\n}>({ orientation: \"horizontal\", variant: \"default\" });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Root\n> & { variant?: TabsVariants };\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n TabsRootProps\n>(({ className, orientation, variant = \"default\", ...props }, ref) => (\n <TabsPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-flex hawa-gap-2\",\n orientation === \"vertical\" ? \"hawa-flex-row\" : \"hawa-flex-col\",\n className,\n )}\n {...props}\n >\n <TabsContext.Provider value={{ orientation, variant }}>\n {props.children}\n </TabsContext.Provider>\n </TabsPrimitive.Root>\n));\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { orientation, variant } = React.useContext(TabsContext);\n\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n tabsListVariant({ variant, orientation }),\n orientation === \"vertical\" ? \"hawa-flex-col\" : \"hawa-flex-row\",\n className,\n )}\n {...props}\n />\n );\n});\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Trigger\n> & {\n chipProps?: ChipTypes;\n className?: string;\n showPopover?: boolean;\n popoverContent?: React.ReactNode;\n};\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, chipProps, ...props }, ref) => {\n const { orientation, variant } = React.useContext(TabsContext);\n const tabTriggerRef = React.useRef(null);\n const { width } = useMeasureDirty(tabTriggerRef);\n\n return (\n <TabsPrimitive.Trigger\n ref={tabTriggerRef}\n className={cn(\n tabsTriggerVariant({ variant, orientation }),\n \"hawa-relative\",\n className,\n )}\n {...props}\n >\n {props.children}\n {chipProps && <Chip {...chipProps} />}\n\n <FloatBox\n align={orientation === \"vertical\" ? \"start\" : \"start\"}\n side={orientation === \"vertical\" ? \"right\" : \"bottom\"}\n sideOffset={orientation === \"vertical\" ? width + 30 : 45}\n open={props.showPopover}\n >\n {props.popoverContent}\n </FloatBox>\n </TabsPrimitive.Trigger>\n );\n});\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n \"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2\",\n className,\n )}\n {...props}\n />\n));\n\nTabs.displayName = TabsPrimitive.Root.displayName;\nTabsList.displayName = TabsPrimitive.List.displayName;\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n","import { useEffect, useLayoutEffect } from \"react\";\n\n// useLayoutEffect will show warning if used during ssr, e.g. with Next.js\n// useIsomorphicEffect removes it by replacing useLayoutEffect with useEffect during ssr\nexport const useIsomorphicEffect =\n typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n","import React, { useState } from \"react\";\n\ntype TUseDiscloser = {\n isOpen: boolean;\n onOpen: () => void;\n onClose: () => void;\n};\n\nconst useDiscloser = (value: boolean = false): TUseDiscloser => {\n const [open, setOpen] = useState<boolean>(value);\n const onOpen = () => setOpen(true);\n const onClose = () => setOpen(false);\n\n return {\n isOpen: open,\n onOpen: onOpen,\n onClose: onClose\n };\n};\n\nexport default useDiscloser;\n","import React, { useEffect, useRef, useState } from \"react\";\n\nfunction useHover() {\n const [value, setValue] = useState(false);\n const ref = useRef<any>(null);\n const handleMouseOver = () => setValue(true);\n const handleMouseOut = () => setValue(false);\n useEffect(\n () => {\n const node = ref.current;\n if (node) {\n node.addEventListener(\"mouseover\", handleMouseOver);\n node.addEventListener(\"mouseout\", handleMouseOut);\n return () => {\n node.removeEventListener(\"mouseover\", handleMouseOver);\n node.removeEventListener(\"mouseout\", handleMouseOut);\n };\n }\n },\n [ref.current] // Recall only if ref changes\n );\n return [ref, value];\n}\n\nexport default useHover;\n","import * as React from \"react\";\n\nimport type { ToasterToastProps } from \"@elements/toast\";\n\nconst TOAST_LIMIT = 5;\nconst TOAST_REMOVE_DELAY = 100000;\n\nconst actionTypes = {\n ADD_TOAST: \"ADD_TOAST\",\n UPDATE_TOAST: \"UPDATE_TOAST\",\n DISMISS_TOAST: \"DISMISS_TOAST\",\n REMOVE_TOAST: \"REMOVE_TOAST\"\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n count = (count + 1) % Number.MAX_VALUE;\n return count.toString();\n}\n\ntype ActionType = typeof actionTypes;\n\ntype Action =\n | { type: ActionType[\"ADD_TOAST\"]; toast: ToasterToastProps }\n | { type: ActionType[\"UPDATE_TOAST\"]; toast: Partial<ToasterToastProps> }\n | { type: ActionType[\"DISMISS_TOAST\"]; toastId?: ToasterToastProps[\"id\"] }\n | { type: ActionType[\"REMOVE_TOAST\"]; toastId?: ToasterToastProps[\"id\"] };\n\ninterface State {\n toasts: ToasterToastProps[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({ type: \"REMOVE_TOAST\", toastId: toastId });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case \"ADD_TOAST\":\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)\n };\n\n case \"UPDATE_TOAST\":\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n )\n };\n\n case \"DISMISS_TOAST\": {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined ? { ...t, open: false } : t\n )\n };\n }\n case \"REMOVE_TOAST\":\n if (action.toastId === undefined) {\n return { ...state, toasts: [] };\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId)\n };\n }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n}\n\ntype Toast = Omit<ToasterToastProps, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n const id = genId();\n\n const update = (props: ToasterToastProps) =>\n dispatch({ type: \"UPDATE_TOAST\", toast: { ...props, id } });\n const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id });\n\n dispatch({\n type: \"ADD_TOAST\",\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n }\n }\n });\n\n return { id: id, dismiss, update };\n}\n\nfunction useToast() {\n const [state, setState] = React.useState<State>(memoryState);\n\n React.useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId })\n };\n}\n\nexport { useToast, toast };\n","import { useState, useRef } from \"react\";\n\nconst useCarousel = (imageWidth: number) => {\n const [isDragging, setIsDragging] = useState(false);\n const [startDragX, setStartDragX] = useState(0);\n const [scrollLeft, setScrollLeft] = useState(0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const findClosestSnapPoint = (scrollLeft: number): number => {\n return Math.round(scrollLeft / imageWidth) * imageWidth;\n };\n\n const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n setIsDragging(true);\n setStartDragX(e.pageX - containerRef.current!.offsetLeft);\n setScrollLeft(containerRef.current!.scrollLeft);\n };\n\n const handleMouseLeave = () => {\n if (isDragging) {\n handleDragEnd();\n }\n };\n\n const handleMouseUp = () => {\n if (isDragging) {\n handleDragEnd();\n }\n };\n\n const handleDragEnd = () => {\n setIsDragging(false);\n const closestSnapPoint = findClosestSnapPoint(\n containerRef.current!.scrollLeft\n );\n containerRef.current!.scrollTo({\n left: closestSnapPoint,\n behavior: \"smooth\"\n });\n };\n\n const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!isDragging) return;\n e.preventDefault();\n const x = e.pageX - containerRef.current!.offsetLeft;\n const walk = x - startDragX;\n containerRef.current!.scrollLeft = scrollLeft - walk;\n };\n\n return {\n containerRef,\n handleMouseDown,\n handleMouseLeave,\n handleMouseUp,\n handleMouseMove\n };\n};\n\nexport default useCarousel;\n","import React, { useEffect, useState } from \"react\";\n\nimport AutoHeight from \"embla-carousel-auto-height\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\ntype DialogCarouselType = {\n canScrollPrev?: any;\n emblaRef?: any;\n emblaApi?: any;\n nextStep?: any;\n prevStep?: any;\n};\n\nexport const useDialogCarousel = (options?: any): DialogCarouselType => {\n const [emblaRef, emblaApi] = useEmblaCarousel(\n { loop: false, watchDrag: false, startIndex: 0, ...options },\n [AutoHeight({ destroyHeight: \"fit\", active: true })]\n );\n const [canScrollPrev, setCanScrollPrev] = useState(false);\n const checkCanScrollPrev = () => {\n if (emblaApi) {\n setCanScrollPrev(emblaApi.canScrollPrev());\n }\n };\n const nextStep = () => {\n if (emblaApi) {\n console.log(\"going to NEXT 👉\");\n emblaApi.scrollNext();\n }\n };\n\n const prevStep = () => {\n if (emblaApi) {\n console.log(\"going to BACK 👈\");\n emblaApi.scrollPrev();\n }\n };\n useEffect(() => {\n checkCanScrollPrev(); // Initial check\n emblaApi && emblaApi.on(\"select\", checkCanScrollPrev); // Update on slide change\n return () => {\n emblaApi && emblaApi.off(\"select\", checkCanScrollPrev);\n };\n }, [emblaApi]);\n\n return {\n emblaRef,\n emblaApi,\n nextStep,\n prevStep,\n canScrollPrev\n };\n};\n","import React, { useState, useEffect, useRef } from \"react\";\n\nexport const useMultiStepDialog = (\n initialStep: any,\n stepIds: any[],\n setOpenDialog: any\n) => {\n const [currentStep, setCurrentStep] = useState(initialStep);\n const [dialogHeight, setDialogHeight] = useState(null);\n const visibleStepRef = useRef<any>(null);\n\n useEffect(() => {\n if (visibleStepRef.current) {\n setDialogHeight(visibleStepRef.current.offsetHeight);\n }\n }, [currentStep, setOpenDialog]);\n\n const handleNext = () => {\n const currentIndex = stepIds.indexOf(currentStep);\n if (currentIndex < stepIds.length - 1) {\n setTimeout(() => {\n setCurrentStep(stepIds[currentIndex + 1]);\n }, 100);\n }\n };\n const handleBack = () => {\n const currentIndex = stepIds.indexOf(currentStep);\n if (currentIndex > 0) {\n setTimeout(() => {\n setCurrentStep(stepIds[currentIndex - 1]);\n }, 100);\n }\n };\n\n return {\n currentStep,\n dialogHeight,\n visibleStepRef,\n handleNext,\n handleBack\n };\n};\n","import { useState } from \"react\";\n\nexport function useClipboard({ timeout = 2000 } = {}): {\n copy: (value: any) => void;\n reset: () => void;\n error: Error | null;\n copied: boolean;\n} {\n const [error, setError] = useState<Error | null>(null);\n const [copied, setCopied] = useState<boolean>(false);\n const [copyTimeout, setCopyTimeout] = useState<NodeJS.Timeout | null>(null);\n\n const handleCopyResult = (value: boolean) => {\n clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n setCopyTimeout(setTimeout(() => setCopied(false), timeout));\n setCopied(value);\n };\n\n const copy = (valueToCopy: any) => {\n if (\"clipboard\" in navigator) {\n navigator.clipboard\n .writeText(valueToCopy)\n .then(() => handleCopyResult(true))\n .catch((err) => setError(err));\n } else {\n setError(new Error(\"useClipboard: navigator.clipboard is not supported\"));\n }\n };\n\n const reset = () => {\n setCopied(false);\n setError(null);\n clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n };\n\n return { copy, reset, error, copied };\n}\n","import React, { useState, useEffect } from \"react\";\n\nexport const useBreakpoint = () => {\n // Initialize breakpoint with a null value.\n const [breakpoint, setBreakpoint] = useState<any>(null);\n\n useEffect(() => {\n // Check if window is defined (i.e., if running on the client side)\n if (typeof window !== \"undefined\") {\n // Define the resize function within the effect.\n const resize = () => {\n setBreakpoint(window.innerWidth);\n };\n\n // Call resize initially to set the breakpoint based on the initial window size.\n resize();\n\n // Set up the resize event listener.\n window.addEventListener(\"resize\", resize);\n\n // Clean up the event listener when the component is unmounted.\n return () => {\n window.removeEventListener(\"resize\", resize);\n };\n }\n }, []); // The empty array ensures this useEffect runs once, similar to componentDidMount.\n\n return breakpoint;\n};\n\n// import React, { useState, useEffect } from \"react\";\n\n// export const useBreakpoint = () => {\n// const [breakpoint, setBreakpoint] = useState(window?.innerWidth);\n// const resize = () => {\n// setBreakpoint(window?.innerWidth);\n// };\n\n// useEffect(() => {\n// // Ensure this code is only run on the client side\n// if (typeof window !== \"undefined\") {\n// // Now it's safe to use window\n// setBreakpoint(window?.innerWidth);\n// window?.addEventListener(\"resize\", resize);\n\n// return () => {\n// window?.removeEventListener(\"resize\", resize);\n// };\n// }\n// }, []); // Empty dependency array ensures this useEffect runs once, similar to componentDidMount\n\n// return breakpoint;\n// };\n","import { useEffect, useState } from \"react\";\n\ninterface WindowSize {\n width: number | undefined;\n height: number | undefined;\n}\n\nexport const useWindowSize = () => {\n const [windowSize, setWindowSize] = useState<WindowSize>({\n width: undefined,\n height: undefined\n });\n\n useEffect(() => {\n function handleResize() {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight\n });\n }\n window.addEventListener(\"resize\", handleResize);\n handleResize();\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n return windowSize;\n};\n","// useFocusWithin hook detects if any element within has focus, it works the same way as :focus-within CSS selector:\nimport { useRef, useState, useEffect } from \"react\";\n\n// Define options for the useFocusWithin hook, which includes onFocus and onBlur callbacks.\nexport interface UseFocusWithinOptions {\n onFocus?(event: FocusEvent): void;\n onBlur?(event: FocusEvent): void;\n}\n\n// Function to check if the event's related target is contained within the current target.\nfunction containsRelatedTarget(event: FocusEvent) {\n if (\n event.currentTarget instanceof HTMLElement &&\n event.relatedTarget instanceof HTMLElement\n ) {\n return event.currentTarget.contains(event.relatedTarget);\n }\n\n return false;\n}\n\n// Custom React hook for handling focus events within an element.\nexport function useFocusWithin<T extends HTMLElement = any>({\n onBlur,\n onFocus\n}: UseFocusWithinOptions = {}): {\n ref: React.MutableRefObject<T>;\n focused: boolean;\n} {\n // Create a ref to hold the target element.\n const ref = useRef<T>(null!);\n\n // State to track if the element is focused.\n const [focused, _setFocused] = useState(false);\n\n // Create a ref to store the focused state.\n const focusedRef = useRef(false);\n\n // Function to set the focused state and update the ref.\n const setFocused = (value: boolean) => {\n _setFocused(value);\n focusedRef.current = value;\n };\n\n // Handle focus-in event: when the element gains focus.\n const handleFocusIn = (event: FocusEvent) => {\n if (!focusedRef.current) {\n setFocused(true);\n onFocus?.(event); // Call the onFocus callback if provided.\n }\n };\n\n // Handle focus-out event: when the element loses focus.\n const handleFocusOut = (event: FocusEvent) => {\n if (focusedRef.current && !containsRelatedTarget(event)) {\n setFocused(false);\n onBlur?.(event); // Call the onBlur callback if provided.\n }\n };\n\n // Attach event listeners for focusin and focusout events.\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener(\"focusin\", handleFocusIn);\n ref.current.addEventListener(\"focusout\", handleFocusOut);\n\n // Clean up event listeners when the component unmounts.\n return () => {\n ref.current?.removeEventListener(\"focusin\", handleFocusIn);\n ref.current?.removeEventListener(\"focusout\", handleFocusOut);\n };\n }\n\n return undefined;\n }, [handleFocusIn, handleFocusOut]);\n\n // Return the ref and focused state.\n return { ref, focused };\n}\n","import { useState, useEffect, useRef } from \"react\";\n\nexport interface UseMediaQueryOptions {\n getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(\n query: MediaQueryList,\n callback: MediaQueryCallback\n) {\n try {\n query.addEventListener(\"change\", callback);\n return () => query.removeEventListener(\"change\", callback);\n } catch (e) {\n query.addListener(callback);\n return () => query.removeListener(callback);\n }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n if (typeof initialValue === \"boolean\") {\n return initialValue;\n }\n\n if (typeof window !== \"undefined\" && \"matchMedia\" in window) {\n return window.matchMedia(query).matches;\n }\n\n return false;\n}\n\nexport function useMediaQuery(\n query: string,\n initialValue?: boolean,\n { getInitialValueInEffect }: UseMediaQueryOptions = {\n getInitialValueInEffect: true\n }\n) {\n const [matches, setMatches] = useState(\n getInitialValueInEffect\n ? initialValue\n : getInitialValue(query, initialValue)\n );\n const queryRef = useRef<MediaQueryList>();\n\n useEffect(() => {\n if (\"matchMedia\" in window) {\n queryRef.current = window.matchMedia(query);\n setMatches(queryRef.current.matches);\n return attachMediaListener(queryRef.current, (event) =>\n setMatches(event.matches)\n );\n }\n\n return undefined;\n }, [query]);\n\n return matches;\n}\n","import React, { useState, useEffect, useRef } from \"react\";\n\nfunction useScrollPosition(ref: any) {\n const [scrollPosition, setScrollPosition] = useState(0);\n // const savedRef = useRef();\n\n // useEffect(() => {\n // savedRef.current = ref;\n // }, [ref]);\n\n useEffect(() => {\n function handleScroll() {\n setScrollPosition(ref.current.scrollTop);\n }\n\n if (ref.current) {\n ref.current.addEventListener(\"scroll\", handleScroll);\n }\n\n return () => {\n if (ref.current) {\n ref.current.removeEventListener(\"scroll\", handleScroll);\n }\n };\n }, [ref]);\n\n return scrollPosition;\n}\n\nexport default useScrollPosition;\n","import React, { useState, useEffect } from \"react\";\n\nconst calculateRange = (data: any, rowsPerPage: any) => {\n const range = [];\n const num = Math.ceil(data?.length / rowsPerPage);\n let i = 1;\n for (let i = 1; i <= num; i++) {\n range.push(i);\n }\n return range;\n};\n\nconst sliceData = (data: any, page: any, rowsPerPage: any) => {\n return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage);\n};\n\n// useTable.js\nconst sortData = (data: any, sortColumn: any, sortDirection: any) => {\n if (sortColumn !== null) {\n return data?.sort((a: any, b: any) => {\n const aValue = a[sortColumn].value;\n const bValue = b[sortColumn].value;\n\n // Handle non-string values by using simple comparison\n if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n if (sortDirection === \"asc\") {\n return aValue.localeCompare(bValue);\n } else {\n return bValue.localeCompare(aValue);\n }\n } else {\n if (sortDirection === \"asc\") {\n return aValue - bValue;\n } else {\n return bValue - aValue;\n }\n }\n });\n }\n return data;\n};\n\nconst useTable = (\n data: any,\n page: any,\n rowsPerPage: any,\n sortColumn: any,\n sortDirection: any\n) => {\n const [tableRange, setTableRange] = useState<any>([]);\n const [slice, setSlice] = useState<any>([]);\n\n useEffect(() => {\n if (data) {\n const range = calculateRange(data, rowsPerPage);\n setTableRange([...range]);\n\n const sortedData = sortData(data, sortColumn, sortDirection);\n const slicedData = sliceData(sortedData, page, rowsPerPage);\n setSlice([...slicedData]);\n }\n }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection]);\n\n return { slice, range: tableRange };\n};\n\nexport default useTable;\n","import { useEffect, useState } from \"react\";\n\nfunction useTabs(initialTab = \"\") {\n const [activeTab, setActiveTab] = useState(initialTab);\n\n // Listen to hash changes in the URL\n useEffect(() => {\n const handleHashChange = () => {\n const hash = window.location.hash.substring(1);\n setActiveTab(hash || initialTab);\n };\n\n window.addEventListener(\"hashchange\", handleHashChange);\n\n // Initialize the tab based on the initial hash\n handleHashChange();\n\n return () => {\n // Remove the event listener when the component unmounts\n window.removeEventListener(\"hashchange\", handleHashChange);\n };\n }, [initialTab]);\n\n const handleTabChange = (index: any) => {\n setActiveTab(index);\n\n // Update the URL hash when the tab changes\n window.location.hash = index;\n };\n\n return {\n activeTab,\n handleTabChange\n };\n}\n\nexport { useTabs };\n","import { RefObject, useEffect, useRef, useState } from \"react\";\n\nexport interface ContentRect {\n width: number;\n height: number;\n top: number;\n right: number;\n left: number;\n bottom: number;\n}\nexport const useMeasureDirty = (ref: RefObject<HTMLElement>): ContentRect => {\n const frame = useRef(0);\n const [rect, set] = useState({\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n });\n\n const [observer] = useState(\n () =>\n new ResizeObserver((entries) => {\n const entry = entries[0];\n\n if (entry) {\n cancelAnimationFrame(frame.current);\n\n frame.current = requestAnimationFrame(() => {\n if (ref.current) {\n set(entry.contentRect);\n }\n });\n }\n }),\n );\n\n useEffect(() => {\n observer.disconnect();\n\n if (ref.current) {\n observer.observe(ref.current);\n }\n }, [ref]);\n\n return rect;\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nexport type ChipColors =\n | \"green\"\n | \"blue\"\n | \"red\"\n | \"yellow\"\n | \"orange\"\n | \"purple\"\n | \"cyan\"\n | \"hyper\"\n | \"oceanic\";\n\nexport type ChipTypes = React.HTMLAttributes<HTMLSpanElement> & {\n /** The text inside the chip */\n label: string;\n /** The small icon before the chip label */\n icon?: JSX.Element;\n /** The color of the chip, must be a tailwind color */\n color?: ChipColors;\n /** The size of the chip */\n size?: \"small\" | \"normal\" | \"large\";\n /** Enable/Disable the dot before the label of the chip */\n dot?: boolean;\n /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */\n dotType?: \"available\" | \"unavailable\";\n radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n (\n {\n label,\n size = \"normal\",\n icon,\n color,\n radius = \"inherit\",\n dotType,\n ...rest\n },\n ref\n ) => {\n let defaultStyles =\n \"hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center hawa-px-2.5 hawa-py-1 hawa-font-bold \";\n let radiusStyles = {\n inherit: \" hawa-rounded\",\n full: \"hawa-rounded-full\",\n none: \"hawa-rounded-none\"\n };\n let sizeStyles = {\n small:\n \"hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 \",\n normal: \"hawa-h-fit hawa-text-xs\",\n large: \"hawa-text-base\"\n };\n let dotStyles = {\n small: \"hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full\",\n normal: \"hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full\",\n large: \"hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full\"\n };\n let dotTypeStyles = {\n available: \"hawa-bg-green-500\",\n unavailable: \"hawa-bg-red-500\"\n };\n let colorStyles: any = {\n green:\n \"hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800\",\n blue: \"hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100\",\n red: \"hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100\",\n yellow:\n \"hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800\",\n orange:\n \"hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100\",\n purple:\n \"hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100\",\n cyan: \"hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800\",\n hyper:\n \"hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n oceanic:\n \"hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600\"\n };\n if (label) {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n defaultStyles,\n sizeStyles[size],\n radiusStyles[radius],\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n >\n {dotType && (\n <span\n className={cn(dotStyles[size], dotTypeStyles[dotType])}\n ></span>\n )}\n {icon && icon}\n {label}\n </span>\n );\n } else {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n \"hawa-h-2 hawa-w-2 hawa-rounded-full\",\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n ></span>\n );\n }\n }\n);\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n arrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n arrow = true,\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n const arrowDirection = {\n top: \"hawa-arrow-default-bottom\",\n bottom: \"hawa-arrow-default-top\",\n right: \"hawa-arrow-default-left\",\n left: \"hawa-arrow-default-right\",\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover\",\n className,\n )}\n style={{ ...stylesMap[side][align] }}\n data-side={side}\n data-floatbox-state={open ? \"open\" : \"closed\"}\n >\n {arrow && <div className={cn(\"hawa-bg-red-500\", arrowDirection[side])} />}\n <span>{props.children}</span>\n </div>\n );\n};\n\nexport { FloatBox };\n"],"mappings":"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","names":["React","import_react","import_react","React","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","import_react","React","React"]}
|
package/dist/tabs/index.mjs
CHANGED
|
@@ -186,6 +186,7 @@ var FloatBox = ({
|
|
|
186
186
|
side = "bottom",
|
|
187
187
|
sideOffset = 40,
|
|
188
188
|
align = "center",
|
|
189
|
+
arrow = true,
|
|
189
190
|
...props
|
|
190
191
|
}) => {
|
|
191
192
|
let stylesMap = {
|
|
@@ -210,18 +211,25 @@ var FloatBox = ({
|
|
|
210
211
|
end: { right: sideOffset, bottom: 0 }
|
|
211
212
|
}
|
|
212
213
|
};
|
|
214
|
+
const arrowDirection = {
|
|
215
|
+
top: "hawa-arrow-default-bottom",
|
|
216
|
+
bottom: "hawa-arrow-default-top",
|
|
217
|
+
right: "hawa-arrow-default-left",
|
|
218
|
+
left: "hawa-arrow-default-right"
|
|
219
|
+
};
|
|
213
220
|
return /* @__PURE__ */ React10.createElement(
|
|
214
221
|
"div",
|
|
215
222
|
{
|
|
216
223
|
className: cn(
|
|
217
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
224
|
+
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover",
|
|
218
225
|
className
|
|
219
226
|
),
|
|
220
227
|
style: { ...stylesMap[side][align] },
|
|
221
228
|
"data-side": side,
|
|
222
229
|
"data-floatbox-state": open ? "open" : "closed"
|
|
223
230
|
},
|
|
224
|
-
|
|
231
|
+
arrow && /* @__PURE__ */ React10.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
232
|
+
/* @__PURE__ */ React10.createElement("span", null, props.children)
|
|
225
233
|
);
|
|
226
234
|
};
|
|
227
235
|
|
package/dist/tabs/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../elements/tabs/Tabs.tsx","../../hooks/useIsomorphicEffect.ts","../../hooks/useDiscloser.ts","../../hooks/useHover.ts","../../hooks/useToast.ts","../../hooks/useCarousel.ts","../../hooks/useDialogCarousel.ts","../../hooks/useDialogSteps.ts","../../hooks/useClipboard.ts","../../hooks/useBreakpoint.ts","../../hooks/useWindowSize.ts","../../hooks/useFocusWithin.ts","../../hooks/useMediaQuery.ts","../../hooks/useScrollPosition.ts","../../hooks/useTable.ts","../../hooks/useTabs.ts","../../hooks/useMeasureDirty.ts","../../util/index.ts","../../elements/chip/Chip.tsx","../../elements/floatBox/FloatBox.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { useMeasureDirty } from \"@hooks/index\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cn } from \"@util/index\";\nimport { tv } from \"tailwind-variants\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { Chip, ChipTypes } from \"../chip\";\nimport { FloatBox } from \"../floatBox\";\n\nconst tabsListVariant = tv({\n base: \"\",\n variants: {\n variant: {\n default:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n underlined:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n underlined_tabs:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground\",\n },\n orientation: { horizontal: \"\", vertical: \"\" },\n },\n compoundVariants: [\n {\n variant: \"underlined_tabs\",\n orientation: \"vertical\",\n class: \"hawa-border-e-2 hawa-border-e-primary\",\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"horizontal\",\n class: \"hawa-border-b-2 hawa-border-b-primary\",\n },\n ],\n defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\nconst tabsTriggerVariant = tv({\n base: \"\",\n variants: {\n variant: {\n default:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10\",\n underlined:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n underlined_tabs:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground dark:hawa-border-primary/10\",\n },\n orientation: { horizontal: \"\", vertical: \"\" },\n },\n compoundVariants: [\n {\n variant: \"underlined\",\n orientation: \"horizontal\",\n class:\n \"data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2\",\n },\n {\n variant: \"underlined\",\n orientation: \"vertical\",\n class:\n \"data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2\",\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"horizontal\",\n class: \"hawa-rounded-b-none\",\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"vertical\",\n class: \"hawa-rounded-e-none\",\n },\n ],\n defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\ntype TabsVariants = \"default\" | \"underlined\" | \"underlined_tabs\";\n\nconst TabsContext = React.createContext<{\n orientation?: OrientationType;\n variant?: TabsVariants;\n}>({ orientation: \"horizontal\", variant: \"default\" });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Root\n> & { variant?: TabsVariants };\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n TabsRootProps\n>(({ className, orientation, variant = \"default\", ...props }, ref) => (\n <TabsPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-flex hawa-gap-2\",\n orientation === \"vertical\" ? \"hawa-flex-row\" : \"hawa-flex-col\",\n className,\n )}\n {...props}\n >\n <TabsContext.Provider value={{ orientation, variant }}>\n {props.children}\n </TabsContext.Provider>\n </TabsPrimitive.Root>\n));\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { orientation, variant } = React.useContext(TabsContext);\n\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n tabsListVariant({ variant, orientation }),\n orientation === \"vertical\" ? \"hawa-flex-col\" : \"hawa-flex-row\",\n className,\n )}\n {...props}\n />\n );\n});\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Trigger\n> & {\n chipProps?: ChipTypes;\n className?: string;\n showPopover?: boolean;\n popoverContent?: React.ReactNode;\n};\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, chipProps, ...props }, ref) => {\n const { orientation, variant } = React.useContext(TabsContext);\n const tabTriggerRef = React.useRef(null);\n const { width } = useMeasureDirty(tabTriggerRef);\n\n return (\n <TabsPrimitive.Trigger\n ref={tabTriggerRef}\n className={cn(\n tabsTriggerVariant({ variant, orientation }),\n \"hawa-relative\",\n className,\n )}\n {...props}\n >\n {props.children}\n {chipProps && <Chip {...chipProps} />}\n\n <FloatBox\n align={orientation === \"vertical\" ? \"start\" : \"start\"}\n side={orientation === \"vertical\" ? \"right\" : \"bottom\"}\n sideOffset={orientation === \"vertical\" ? width + 30 : 45}\n open={props.showPopover}\n >\n {props.popoverContent}\n </FloatBox>\n </TabsPrimitive.Trigger>\n );\n});\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n \"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2\",\n className,\n )}\n {...props}\n />\n));\n\nTabs.displayName = TabsPrimitive.Root.displayName;\nTabsList.displayName = TabsPrimitive.List.displayName;\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n","import { useEffect, useLayoutEffect } from \"react\";\n\n// useLayoutEffect will show warning if used during ssr, e.g. with Next.js\n// useIsomorphicEffect removes it by replacing useLayoutEffect with useEffect during ssr\nexport const useIsomorphicEffect =\n typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n","import React, { useState } from \"react\";\n\ntype TUseDiscloser = {\n isOpen: boolean;\n onOpen: () => void;\n onClose: () => void;\n};\n\nconst useDiscloser = (value: boolean = false): TUseDiscloser => {\n const [open, setOpen] = useState<boolean>(value);\n const onOpen = () => setOpen(true);\n const onClose = () => setOpen(false);\n\n return {\n isOpen: open,\n onOpen: onOpen,\n onClose: onClose\n };\n};\n\nexport default useDiscloser;\n","import React, { useEffect, useRef, useState } from \"react\";\n\nfunction useHover() {\n const [value, setValue] = useState(false);\n const ref = useRef<any>(null);\n const handleMouseOver = () => setValue(true);\n const handleMouseOut = () => setValue(false);\n useEffect(\n () => {\n const node = ref.current;\n if (node) {\n node.addEventListener(\"mouseover\", handleMouseOver);\n node.addEventListener(\"mouseout\", handleMouseOut);\n return () => {\n node.removeEventListener(\"mouseover\", handleMouseOver);\n node.removeEventListener(\"mouseout\", handleMouseOut);\n };\n }\n },\n [ref.current] // Recall only if ref changes\n );\n return [ref, value];\n}\n\nexport default useHover;\n","import * as React from \"react\";\n\nimport type { ToasterToastProps } from \"@elements/toast\";\n\nconst TOAST_LIMIT = 5;\nconst TOAST_REMOVE_DELAY = 100000;\n\nconst actionTypes = {\n ADD_TOAST: \"ADD_TOAST\",\n UPDATE_TOAST: \"UPDATE_TOAST\",\n DISMISS_TOAST: \"DISMISS_TOAST\",\n REMOVE_TOAST: \"REMOVE_TOAST\"\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n count = (count + 1) % Number.MAX_VALUE;\n return count.toString();\n}\n\ntype ActionType = typeof actionTypes;\n\ntype Action =\n | { type: ActionType[\"ADD_TOAST\"]; toast: ToasterToastProps }\n | { type: ActionType[\"UPDATE_TOAST\"]; toast: Partial<ToasterToastProps> }\n | { type: ActionType[\"DISMISS_TOAST\"]; toastId?: ToasterToastProps[\"id\"] }\n | { type: ActionType[\"REMOVE_TOAST\"]; toastId?: ToasterToastProps[\"id\"] };\n\ninterface State {\n toasts: ToasterToastProps[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({ type: \"REMOVE_TOAST\", toastId: toastId });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case \"ADD_TOAST\":\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)\n };\n\n case \"UPDATE_TOAST\":\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n )\n };\n\n case \"DISMISS_TOAST\": {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined ? { ...t, open: false } : t\n )\n };\n }\n case \"REMOVE_TOAST\":\n if (action.toastId === undefined) {\n return { ...state, toasts: [] };\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId)\n };\n }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n}\n\ntype Toast = Omit<ToasterToastProps, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n const id = genId();\n\n const update = (props: ToasterToastProps) =>\n dispatch({ type: \"UPDATE_TOAST\", toast: { ...props, id } });\n const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id });\n\n dispatch({\n type: \"ADD_TOAST\",\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n }\n }\n });\n\n return { id: id, dismiss, update };\n}\n\nfunction useToast() {\n const [state, setState] = React.useState<State>(memoryState);\n\n React.useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId })\n };\n}\n\nexport { useToast, toast };\n","import { useState, useRef } from \"react\";\n\nconst useCarousel = (imageWidth: number) => {\n const [isDragging, setIsDragging] = useState(false);\n const [startDragX, setStartDragX] = useState(0);\n const [scrollLeft, setScrollLeft] = useState(0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const findClosestSnapPoint = (scrollLeft: number): number => {\n return Math.round(scrollLeft / imageWidth) * imageWidth;\n };\n\n const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n setIsDragging(true);\n setStartDragX(e.pageX - containerRef.current!.offsetLeft);\n setScrollLeft(containerRef.current!.scrollLeft);\n };\n\n const handleMouseLeave = () => {\n if (isDragging) {\n handleDragEnd();\n }\n };\n\n const handleMouseUp = () => {\n if (isDragging) {\n handleDragEnd();\n }\n };\n\n const handleDragEnd = () => {\n setIsDragging(false);\n const closestSnapPoint = findClosestSnapPoint(\n containerRef.current!.scrollLeft\n );\n containerRef.current!.scrollTo({\n left: closestSnapPoint,\n behavior: \"smooth\"\n });\n };\n\n const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!isDragging) return;\n e.preventDefault();\n const x = e.pageX - containerRef.current!.offsetLeft;\n const walk = x - startDragX;\n containerRef.current!.scrollLeft = scrollLeft - walk;\n };\n\n return {\n containerRef,\n handleMouseDown,\n handleMouseLeave,\n handleMouseUp,\n handleMouseMove\n };\n};\n\nexport default useCarousel;\n","import React, { useEffect, useState } from \"react\";\n\nimport AutoHeight from \"embla-carousel-auto-height\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\ntype DialogCarouselType = {\n canScrollPrev?: any;\n emblaRef?: any;\n emblaApi?: any;\n nextStep?: any;\n prevStep?: any;\n};\n\nexport const useDialogCarousel = (options?: any): DialogCarouselType => {\n const [emblaRef, emblaApi] = useEmblaCarousel(\n { loop: false, watchDrag: false, startIndex: 0, ...options },\n [AutoHeight({ destroyHeight: \"fit\", active: true })]\n );\n const [canScrollPrev, setCanScrollPrev] = useState(false);\n const checkCanScrollPrev = () => {\n if (emblaApi) {\n setCanScrollPrev(emblaApi.canScrollPrev());\n }\n };\n const nextStep = () => {\n if (emblaApi) {\n console.log(\"going to NEXT 👉\");\n emblaApi.scrollNext();\n }\n };\n\n const prevStep = () => {\n if (emblaApi) {\n console.log(\"going to BACK 👈\");\n emblaApi.scrollPrev();\n }\n };\n useEffect(() => {\n checkCanScrollPrev(); // Initial check\n emblaApi && emblaApi.on(\"select\", checkCanScrollPrev); // Update on slide change\n return () => {\n emblaApi && emblaApi.off(\"select\", checkCanScrollPrev);\n };\n }, [emblaApi]);\n\n return {\n emblaRef,\n emblaApi,\n nextStep,\n prevStep,\n canScrollPrev\n };\n};\n","import React, { useState, useEffect, useRef } from \"react\";\n\nexport const useMultiStepDialog = (\n initialStep: any,\n stepIds: any[],\n setOpenDialog: any\n) => {\n const [currentStep, setCurrentStep] = useState(initialStep);\n const [dialogHeight, setDialogHeight] = useState(null);\n const visibleStepRef = useRef<any>(null);\n\n useEffect(() => {\n if (visibleStepRef.current) {\n setDialogHeight(visibleStepRef.current.offsetHeight);\n }\n }, [currentStep, setOpenDialog]);\n\n const handleNext = () => {\n const currentIndex = stepIds.indexOf(currentStep);\n if (currentIndex < stepIds.length - 1) {\n setTimeout(() => {\n setCurrentStep(stepIds[currentIndex + 1]);\n }, 100);\n }\n };\n const handleBack = () => {\n const currentIndex = stepIds.indexOf(currentStep);\n if (currentIndex > 0) {\n setTimeout(() => {\n setCurrentStep(stepIds[currentIndex - 1]);\n }, 100);\n }\n };\n\n return {\n currentStep,\n dialogHeight,\n visibleStepRef,\n handleNext,\n handleBack\n };\n};\n","import { useState } from \"react\";\n\nexport function useClipboard({ timeout = 2000 } = {}): {\n copy: (value: any) => void;\n reset: () => void;\n error: Error | null;\n copied: boolean;\n} {\n const [error, setError] = useState<Error | null>(null);\n const [copied, setCopied] = useState<boolean>(false);\n const [copyTimeout, setCopyTimeout] = useState<NodeJS.Timeout | null>(null);\n\n const handleCopyResult = (value: boolean) => {\n clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n setCopyTimeout(setTimeout(() => setCopied(false), timeout));\n setCopied(value);\n };\n\n const copy = (valueToCopy: any) => {\n if (\"clipboard\" in navigator) {\n navigator.clipboard\n .writeText(valueToCopy)\n .then(() => handleCopyResult(true))\n .catch((err) => setError(err));\n } else {\n setError(new Error(\"useClipboard: navigator.clipboard is not supported\"));\n }\n };\n\n const reset = () => {\n setCopied(false);\n setError(null);\n clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n };\n\n return { copy, reset, error, copied };\n}\n","import React, { useState, useEffect } from \"react\";\n\nexport const useBreakpoint = () => {\n // Initialize breakpoint with a null value.\n const [breakpoint, setBreakpoint] = useState<any>(null);\n\n useEffect(() => {\n // Check if window is defined (i.e., if running on the client side)\n if (typeof window !== \"undefined\") {\n // Define the resize function within the effect.\n const resize = () => {\n setBreakpoint(window.innerWidth);\n };\n\n // Call resize initially to set the breakpoint based on the initial window size.\n resize();\n\n // Set up the resize event listener.\n window.addEventListener(\"resize\", resize);\n\n // Clean up the event listener when the component is unmounted.\n return () => {\n window.removeEventListener(\"resize\", resize);\n };\n }\n }, []); // The empty array ensures this useEffect runs once, similar to componentDidMount.\n\n return breakpoint;\n};\n\n// import React, { useState, useEffect } from \"react\";\n\n// export const useBreakpoint = () => {\n// const [breakpoint, setBreakpoint] = useState(window?.innerWidth);\n// const resize = () => {\n// setBreakpoint(window?.innerWidth);\n// };\n\n// useEffect(() => {\n// // Ensure this code is only run on the client side\n// if (typeof window !== \"undefined\") {\n// // Now it's safe to use window\n// setBreakpoint(window?.innerWidth);\n// window?.addEventListener(\"resize\", resize);\n\n// return () => {\n// window?.removeEventListener(\"resize\", resize);\n// };\n// }\n// }, []); // Empty dependency array ensures this useEffect runs once, similar to componentDidMount\n\n// return breakpoint;\n// };\n","import { useEffect, useState } from \"react\";\n\ninterface WindowSize {\n width: number | undefined;\n height: number | undefined;\n}\n\nexport const useWindowSize = () => {\n const [windowSize, setWindowSize] = useState<WindowSize>({\n width: undefined,\n height: undefined\n });\n\n useEffect(() => {\n function handleResize() {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight\n });\n }\n window.addEventListener(\"resize\", handleResize);\n handleResize();\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n return windowSize;\n};\n","// useFocusWithin hook detects if any element within has focus, it works the same way as :focus-within CSS selector:\nimport { useRef, useState, useEffect } from \"react\";\n\n// Define options for the useFocusWithin hook, which includes onFocus and onBlur callbacks.\nexport interface UseFocusWithinOptions {\n onFocus?(event: FocusEvent): void;\n onBlur?(event: FocusEvent): void;\n}\n\n// Function to check if the event's related target is contained within the current target.\nfunction containsRelatedTarget(event: FocusEvent) {\n if (\n event.currentTarget instanceof HTMLElement &&\n event.relatedTarget instanceof HTMLElement\n ) {\n return event.currentTarget.contains(event.relatedTarget);\n }\n\n return false;\n}\n\n// Custom React hook for handling focus events within an element.\nexport function useFocusWithin<T extends HTMLElement = any>({\n onBlur,\n onFocus\n}: UseFocusWithinOptions = {}): {\n ref: React.MutableRefObject<T>;\n focused: boolean;\n} {\n // Create a ref to hold the target element.\n const ref = useRef<T>(null!);\n\n // State to track if the element is focused.\n const [focused, _setFocused] = useState(false);\n\n // Create a ref to store the focused state.\n const focusedRef = useRef(false);\n\n // Function to set the focused state and update the ref.\n const setFocused = (value: boolean) => {\n _setFocused(value);\n focusedRef.current = value;\n };\n\n // Handle focus-in event: when the element gains focus.\n const handleFocusIn = (event: FocusEvent) => {\n if (!focusedRef.current) {\n setFocused(true);\n onFocus?.(event); // Call the onFocus callback if provided.\n }\n };\n\n // Handle focus-out event: when the element loses focus.\n const handleFocusOut = (event: FocusEvent) => {\n if (focusedRef.current && !containsRelatedTarget(event)) {\n setFocused(false);\n onBlur?.(event); // Call the onBlur callback if provided.\n }\n };\n\n // Attach event listeners for focusin and focusout events.\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener(\"focusin\", handleFocusIn);\n ref.current.addEventListener(\"focusout\", handleFocusOut);\n\n // Clean up event listeners when the component unmounts.\n return () => {\n ref.current?.removeEventListener(\"focusin\", handleFocusIn);\n ref.current?.removeEventListener(\"focusout\", handleFocusOut);\n };\n }\n\n return undefined;\n }, [handleFocusIn, handleFocusOut]);\n\n // Return the ref and focused state.\n return { ref, focused };\n}\n","import { useState, useEffect, useRef } from \"react\";\n\nexport interface UseMediaQueryOptions {\n getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(\n query: MediaQueryList,\n callback: MediaQueryCallback\n) {\n try {\n query.addEventListener(\"change\", callback);\n return () => query.removeEventListener(\"change\", callback);\n } catch (e) {\n query.addListener(callback);\n return () => query.removeListener(callback);\n }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n if (typeof initialValue === \"boolean\") {\n return initialValue;\n }\n\n if (typeof window !== \"undefined\" && \"matchMedia\" in window) {\n return window.matchMedia(query).matches;\n }\n\n return false;\n}\n\nexport function useMediaQuery(\n query: string,\n initialValue?: boolean,\n { getInitialValueInEffect }: UseMediaQueryOptions = {\n getInitialValueInEffect: true\n }\n) {\n const [matches, setMatches] = useState(\n getInitialValueInEffect\n ? initialValue\n : getInitialValue(query, initialValue)\n );\n const queryRef = useRef<MediaQueryList>();\n\n useEffect(() => {\n if (\"matchMedia\" in window) {\n queryRef.current = window.matchMedia(query);\n setMatches(queryRef.current.matches);\n return attachMediaListener(queryRef.current, (event) =>\n setMatches(event.matches)\n );\n }\n\n return undefined;\n }, [query]);\n\n return matches;\n}\n","import React, { useState, useEffect, useRef } from \"react\";\n\nfunction useScrollPosition(ref: any) {\n const [scrollPosition, setScrollPosition] = useState(0);\n // const savedRef = useRef();\n\n // useEffect(() => {\n // savedRef.current = ref;\n // }, [ref]);\n\n useEffect(() => {\n function handleScroll() {\n setScrollPosition(ref.current.scrollTop);\n }\n\n if (ref.current) {\n ref.current.addEventListener(\"scroll\", handleScroll);\n }\n\n return () => {\n if (ref.current) {\n ref.current.removeEventListener(\"scroll\", handleScroll);\n }\n };\n }, [ref]);\n\n return scrollPosition;\n}\n\nexport default useScrollPosition;\n","import React, { useState, useEffect } from \"react\";\n\nconst calculateRange = (data: any, rowsPerPage: any) => {\n const range = [];\n const num = Math.ceil(data?.length / rowsPerPage);\n let i = 1;\n for (let i = 1; i <= num; i++) {\n range.push(i);\n }\n return range;\n};\n\nconst sliceData = (data: any, page: any, rowsPerPage: any) => {\n return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage);\n};\n\n// useTable.js\nconst sortData = (data: any, sortColumn: any, sortDirection: any) => {\n if (sortColumn !== null) {\n return data?.sort((a: any, b: any) => {\n const aValue = a[sortColumn].value;\n const bValue = b[sortColumn].value;\n\n // Handle non-string values by using simple comparison\n if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n if (sortDirection === \"asc\") {\n return aValue.localeCompare(bValue);\n } else {\n return bValue.localeCompare(aValue);\n }\n } else {\n if (sortDirection === \"asc\") {\n return aValue - bValue;\n } else {\n return bValue - aValue;\n }\n }\n });\n }\n return data;\n};\n\nconst useTable = (\n data: any,\n page: any,\n rowsPerPage: any,\n sortColumn: any,\n sortDirection: any\n) => {\n const [tableRange, setTableRange] = useState<any>([]);\n const [slice, setSlice] = useState<any>([]);\n\n useEffect(() => {\n if (data) {\n const range = calculateRange(data, rowsPerPage);\n setTableRange([...range]);\n\n const sortedData = sortData(data, sortColumn, sortDirection);\n const slicedData = sliceData(sortedData, page, rowsPerPage);\n setSlice([...slicedData]);\n }\n }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection]);\n\n return { slice, range: tableRange };\n};\n\nexport default useTable;\n","import { useEffect, useState } from \"react\";\n\nfunction useTabs(initialTab = \"\") {\n const [activeTab, setActiveTab] = useState(initialTab);\n\n // Listen to hash changes in the URL\n useEffect(() => {\n const handleHashChange = () => {\n const hash = window.location.hash.substring(1);\n setActiveTab(hash || initialTab);\n };\n\n window.addEventListener(\"hashchange\", handleHashChange);\n\n // Initialize the tab based on the initial hash\n handleHashChange();\n\n return () => {\n // Remove the event listener when the component unmounts\n window.removeEventListener(\"hashchange\", handleHashChange);\n };\n }, [initialTab]);\n\n const handleTabChange = (index: any) => {\n setActiveTab(index);\n\n // Update the URL hash when the tab changes\n window.location.hash = index;\n };\n\n return {\n activeTab,\n handleTabChange\n };\n}\n\nexport { useTabs };\n","import { RefObject, useEffect, useRef, useState } from \"react\";\n\nexport interface ContentRect {\n width: number;\n height: number;\n top: number;\n right: number;\n left: number;\n bottom: number;\n}\nexport const useMeasureDirty = (ref: RefObject<HTMLElement>): ContentRect => {\n const frame = useRef(0);\n const [rect, set] = useState({\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n });\n\n const [observer] = useState(\n () =>\n new ResizeObserver((entries) => {\n const entry = entries[0];\n\n if (entry) {\n cancelAnimationFrame(frame.current);\n\n frame.current = requestAnimationFrame(() => {\n if (ref.current) {\n set(entry.contentRect);\n }\n });\n }\n }),\n );\n\n useEffect(() => {\n observer.disconnect();\n\n if (ref.current) {\n observer.observe(ref.current);\n }\n }, [ref]);\n\n return rect;\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nexport type ChipColors =\n | \"green\"\n | \"blue\"\n | \"red\"\n | \"yellow\"\n | \"orange\"\n | \"purple\"\n | \"cyan\"\n | \"hyper\"\n | \"oceanic\";\n\nexport type ChipTypes = React.HTMLAttributes<HTMLSpanElement> & {\n /** The text inside the chip */\n label: string;\n /** The small icon before the chip label */\n icon?: JSX.Element;\n /** The color of the chip, must be a tailwind color */\n color?: ChipColors;\n /** The size of the chip */\n size?: \"small\" | \"normal\" | \"large\";\n /** Enable/Disable the dot before the label of the chip */\n dot?: boolean;\n /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */\n dotType?: \"available\" | \"unavailable\";\n radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n (\n {\n label,\n size = \"normal\",\n icon,\n color,\n radius = \"inherit\",\n dotType,\n ...rest\n },\n ref\n ) => {\n let defaultStyles =\n \"hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center hawa-px-2.5 hawa-py-1 hawa-font-bold \";\n let radiusStyles = {\n inherit: \" hawa-rounded\",\n full: \"hawa-rounded-full\",\n none: \"hawa-rounded-none\"\n };\n let sizeStyles = {\n small:\n \"hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 \",\n normal: \"hawa-h-fit hawa-text-xs\",\n large: \"hawa-text-base\"\n };\n let dotStyles = {\n small: \"hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full\",\n normal: \"hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full\",\n large: \"hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full\"\n };\n let dotTypeStyles = {\n available: \"hawa-bg-green-500\",\n unavailable: \"hawa-bg-red-500\"\n };\n let colorStyles: any = {\n green:\n \"hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800\",\n blue: \"hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100\",\n red: \"hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100\",\n yellow:\n \"hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800\",\n orange:\n \"hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100\",\n purple:\n \"hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100\",\n cyan: \"hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800\",\n hyper:\n \"hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n oceanic:\n \"hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600\"\n };\n if (label) {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n defaultStyles,\n sizeStyles[size],\n radiusStyles[radius],\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n >\n {dotType && (\n <span\n className={cn(dotStyles[size], dotTypeStyles[dotType])}\n ></span>\n )}\n {icon && icon}\n {label}\n </span>\n );\n } else {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n \"hawa-h-2 hawa-w-2 hawa-rounded-full\",\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n ></span>\n );\n }\n }\n);\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2\",\n className,\n )}\n style={{ ...stylesMap[side][align] }}\n data-side={side}\n data-floatbox-state={open ? \"open\" : \"closed\"}\n >\n {props.children}\n </div>\n );\n};\n\nexport { FloatBox };\n"],"mappings":";;;AAAA,YAAYA,aAAW;;;ACAvB,SAAS,WAAW,uBAAuB;;;ACA3C,SAAgB,gBAAgB;;;ACAhC,SAAgB,aAAAC,YAAW,QAAQ,YAAAC,iBAAgB;;;ACAnD,YAAYC,YAAW;;;ACAvB,SAAS,YAAAC,WAAU,UAAAC,eAAc;;;ACAjC,SAAgB,aAAAC,YAAW,YAAAC,iBAAgB;AAE3C,OAAO,gBAAgB;AACvB,OAAO,sBAAsB;;;ACH7B,SAAgB,YAAAC,WAAU,aAAAC,YAAW,UAAAC,eAAc;;;ACAnD,SAAS,YAAAC,iBAAgB;;;ACAzB,SAAgB,YAAAC,WAAU,aAAAC,kBAAiB;;;ACA3C,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;;;ACCpC,SAAS,UAAAC,SAAQ,YAAAC,YAAU,aAAAC,kBAAiB;;;ACD5C,SAAS,YAAAC,YAAU,aAAAC,YAAW,UAAAC,eAAc;;;ACA5C,SAAgB,YAAAC,YAAU,aAAAC,mBAAyB;;;ACAnD,SAAgB,YAAAC,YAAU,aAAAC,mBAAiB;;;ACA3C,SAAS,aAAAC,aAAW,YAAAC,kBAAgB;;;ACApC,SAAoB,aAAAC,aAAW,UAAAC,SAAQ,YAAAC,kBAAgB;AAUhD,IAAM,kBAAkB,CAAC,QAA6C;AAC3E,QAAM,QAAQD,QAAO,CAAC;AACtB,QAAM,CAAC,MAAM,GAAG,IAAIC,WAAS;AAAA,IAC3B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,CAAC;AAED,QAAM,CAAC,QAAQ,IAAIA;AAAA,IACjB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,YAAM,QAAQ,QAAQ,CAAC;AAEvB,UAAI,OAAO;AACT,6BAAqB,MAAM,OAAO;AAElC,cAAM,UAAU,sBAAsB,MAAM;AAC1C,cAAI,IAAI,SAAS;AACf,gBAAI,MAAM,WAAW;AAAA,UACvB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACL;AAEA,EAAAF,YAAU,MAAM;AACd,aAAS,WAAW;AAEpB,QAAI,IAAI,SAAS;AACf,eAAS,QAAQ,IAAI,OAAO;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAER,SAAO;AACT;;;AhB5CA,YAAY,mBAAmB;;;AiBH/B,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AjBAA,SAAS,UAAU;;;AkBLnB,OAAOG,YAAW;AAiCX,IAAM,OAAOC,OAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,gBACF;AACF,QAAI,eAAe;AAAA,MACjB,SAAS;AAAA,MACT,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AACA,QAAI,aAAa;AAAA,MACf,OACE;AAAA,MACF,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AACA,QAAI,YAAY;AAAA,MACd,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AACA,QAAI,gBAAgB;AAAA,MAClB,WAAW;AAAA,MACX,aAAa;AAAA,IACf;AACA,QAAI,cAAmB;AAAA,MACrB,OACE;AAAA,MACF,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QACE;AAAA,MACF,QACE;AAAA,MACF,QACE;AAAA,MACF,MAAM;AAAA,MACN,OACE;AAAA,MACF,SACE;AAAA,IACJ;AACA,QAAI,OAAO;AACT,aACE,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,WAAW,IAAI;AAAA,YACf,aAAa,MAAM;AAAA,YACnB,QAAQ,YAAY,KAAK,IAAI;AAAA,UAC/B;AAAA;AAAA,QAEC,WACC,gBAAAA,OAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,UAAU,IAAI,GAAG,cAAc,OAAO,CAAC;AAAA;AAAA,QACtD;AAAA,QAEF,QAAQ;AAAA,QACR;AAAA,MACH;AAAA,IAEJ,OAAO;AACL,aACE,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,QAAQ,YAAY,KAAK,IAAI;AAAA,UAC/B;AAAA;AAAA,MACD;AAAA,IAEL;AAAA,EACF;AACF;;;ACvHA,YAAYC,aAAW;AAcvB,IAAM,WAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,MAAI,YAAY;AAAA,IACd,QAAQ;AAAA,MACN,OAAO,EAAE,KAAK,YAAY,kBAAkB,EAAE;AAAA,MAC9C,QAAQ,EAAE,KAAK,WAAW;AAAA,MAC1B,KAAK,EAAE,KAAK,YAAY,gBAAgB,EAAE;AAAA,IAC5C;AAAA,IACA,KAAK;AAAA,MACH,OAAO,EAAE,QAAQ,YAAY,kBAAkB,EAAE;AAAA,MACjD,QAAQ,EAAE,QAAQ,WAAW;AAAA,MAC7B,KAAK,EAAE,QAAQ,YAAY,gBAAgB,EAAE;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,OAAO,EAAE,MAAM,YAAY,KAAK,GAAG;AAAA,MACnC,QAAQ,EAAE,MAAM,WAAW;AAAA,MAC3B,KAAK,EAAE,MAAM,YAAY,QAAQ,EAAE;AAAA,IACrC;AAAA,IACA,MAAM;AAAA,MACJ,OAAO,EAAE,OAAO,YAAY,KAAK,EAAE;AAAA,MACnC,QAAQ,EAAE,OAAO,WAAW;AAAA,MAC5B,KAAK,EAAE,OAAO,YAAY,QAAQ,EAAE;AAAA,IACtC;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,GAAG,UAAU,IAAI,EAAE,KAAK,EAAE;AAAA,MACnC,aAAW;AAAA,MACX,uBAAqB,OAAO,SAAS;AAAA;AAAA,IAEpC,MAAM;AAAA,EACT;AAEJ;;;AnB9CA,IAAM,kBAAkB,GAAG;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SACE;AAAA,MACF,YACE;AAAA,MACF,iBACE;AAAA,IACJ;AAAA,IACA,aAAa,EAAE,YAAY,IAAI,UAAU,GAAG;AAAA,EAC9C;AAAA,EACA,kBAAkB;AAAA,IAChB;AAAA,MACE,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,WAAW,aAAa,aAAa;AACnE,CAAC;AAED,IAAM,qBAAqB,GAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SACE;AAAA,MACF,YACE;AAAA,MACF,iBACE;AAAA,IACJ;AAAA,IACA,aAAa,EAAE,YAAY,IAAI,UAAU,GAAG;AAAA,EAC9C;AAAA,EACA,kBAAkB;AAAA,IAChB;AAAA,MACE,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OACE;AAAA,IACJ;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OACE;AAAA,IACJ;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,WAAW,aAAa,aAAa;AACnE,CAAC;AAID,IAAM,cAAoB,sBAGvB,EAAE,aAAa,cAAc,SAAS,UAAU,CAAC;AAMpD,IAAM,OAAa,mBAGjB,CAAC,EAAE,WAAW,aAAa,UAAU,WAAW,GAAG,MAAM,GAAG,QAC5D;AAAA,EAAe;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,aAAa,kBAAkB;AAAA,MAC/C;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AAAA,EAEJ,sCAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,aAAa,QAAQ,KACjD,MAAM,QACT;AACF,CACD;AAED,IAAM,WAAiB,mBAGrB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,aAAa,QAAQ,IAAU,mBAAW,WAAW;AAE7D,SACE;AAAA,IAAe;AAAA,IAAd;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,gBAAgB,EAAE,SAAS,YAAY,CAAC;AAAA,QACxC,gBAAgB,aAAa,kBAAkB;AAAA,QAC/C;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAWD,IAAM,cAAoB,mBAGxB,CAAC,EAAE,WAAW,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC7C,QAAM,EAAE,aAAa,QAAQ,IAAU,mBAAW,WAAW;AAC7D,QAAM,gBAAsB,eAAO,IAAI;AACvC,QAAM,EAAE,MAAM,IAAI,gBAAgB,aAAa;AAE/C,SACE;AAAA,IAAe;AAAA,IAAd;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,mBAAmB,EAAE,SAAS,YAAY,CAAC;AAAA,QAC3C;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEH,MAAM;AAAA,IACN,aAAa,sCAAC,QAAM,GAAG,WAAW;AAAA,IAEnC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,gBAAgB,aAAa,UAAU;AAAA,QAC9C,MAAM,gBAAgB,aAAa,UAAU;AAAA,QAC7C,YAAY,gBAAgB,aAAa,QAAQ,KAAK;AAAA,QACtD,MAAM,MAAM;AAAA;AAAA,MAEX,MAAM;AAAA,IACT;AAAA,EACF;AAEJ,CAAC;AAED,IAAM,cAAoB,mBAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAe;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,KAAK,cAA4B,mBAAK;AACtC,SAAS,cAA4B,mBAAK;AAC1C,YAAY,cAA4B,sBAAQ;AAChD,YAAY,cAA4B,sBAAQ;","names":["React","useEffect","useState","React","useState","useRef","useEffect","useState","useState","useEffect","useRef","useState","useState","useEffect","useEffect","useState","useRef","useState","useEffect","useState","useEffect","useRef","useState","useEffect","useState","useEffect","useEffect","useState","useEffect","useRef","useState","React","React","React"]}
|
|
1
|
+
{"version":3,"sources":["../../elements/tabs/Tabs.tsx","../../hooks/useIsomorphicEffect.ts","../../hooks/useDiscloser.ts","../../hooks/useHover.ts","../../hooks/useToast.ts","../../hooks/useCarousel.ts","../../hooks/useDialogCarousel.ts","../../hooks/useDialogSteps.ts","../../hooks/useClipboard.ts","../../hooks/useBreakpoint.ts","../../hooks/useWindowSize.ts","../../hooks/useFocusWithin.ts","../../hooks/useMediaQuery.ts","../../hooks/useScrollPosition.ts","../../hooks/useTable.ts","../../hooks/useTabs.ts","../../hooks/useMeasureDirty.ts","../../util/index.ts","../../elements/chip/Chip.tsx","../../elements/floatBox/FloatBox.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { useMeasureDirty } from \"@hooks/index\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cn } from \"@util/index\";\nimport { tv } from \"tailwind-variants\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { Chip, ChipTypes } from \"../chip\";\nimport { FloatBox } from \"../floatBox\";\n\nconst tabsListVariant = tv({\n base: \"\",\n variants: {\n variant: {\n default:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n underlined:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10\",\n underlined_tabs:\n \"hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground\",\n },\n orientation: { horizontal: \"\", vertical: \"\" },\n },\n compoundVariants: [\n {\n variant: \"underlined_tabs\",\n orientation: \"vertical\",\n class: \"hawa-border-e-2 hawa-border-e-primary\",\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"horizontal\",\n class: \"hawa-border-b-2 hawa-border-b-primary\",\n },\n ],\n defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\nconst tabsTriggerVariant = tv({\n base: \"\",\n variants: {\n variant: {\n default:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10\",\n underlined:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50\",\n underlined_tabs:\n \"hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground dark:hawa-border-primary/10\",\n },\n orientation: { horizontal: \"\", vertical: \"\" },\n },\n compoundVariants: [\n {\n variant: \"underlined\",\n orientation: \"horizontal\",\n class:\n \"data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2\",\n },\n {\n variant: \"underlined\",\n orientation: \"vertical\",\n class:\n \"data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2\",\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"horizontal\",\n class: \"hawa-rounded-b-none\",\n },\n {\n variant: \"underlined_tabs\",\n orientation: \"vertical\",\n class: \"hawa-rounded-e-none\",\n },\n ],\n defaultVariants: { variant: \"default\", orientation: \"horizontal\" },\n});\n\ntype TabsVariants = \"default\" | \"underlined\" | \"underlined_tabs\";\n\nconst TabsContext = React.createContext<{\n orientation?: OrientationType;\n variant?: TabsVariants;\n}>({ orientation: \"horizontal\", variant: \"default\" });\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Root\n> & { variant?: TabsVariants };\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n TabsRootProps\n>(({ className, orientation, variant = \"default\", ...props }, ref) => (\n <TabsPrimitive.Root\n ref={ref}\n className={cn(\n \"hawa-flex hawa-gap-2\",\n orientation === \"vertical\" ? \"hawa-flex-row\" : \"hawa-flex-col\",\n className,\n )}\n {...props}\n >\n <TabsContext.Provider value={{ orientation, variant }}>\n {props.children}\n </TabsContext.Provider>\n </TabsPrimitive.Root>\n));\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { orientation, variant } = React.useContext(TabsContext);\n\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n tabsListVariant({ variant, orientation }),\n orientation === \"vertical\" ? \"hawa-flex-col\" : \"hawa-flex-row\",\n className,\n )}\n {...props}\n />\n );\n});\n\ntype TabsTriggerProps = React.ComponentPropsWithoutRef<\n typeof TabsPrimitive.Trigger\n> & {\n chipProps?: ChipTypes;\n className?: string;\n showPopover?: boolean;\n popoverContent?: React.ReactNode;\n};\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, chipProps, ...props }, ref) => {\n const { orientation, variant } = React.useContext(TabsContext);\n const tabTriggerRef = React.useRef(null);\n const { width } = useMeasureDirty(tabTriggerRef);\n\n return (\n <TabsPrimitive.Trigger\n ref={tabTriggerRef}\n className={cn(\n tabsTriggerVariant({ variant, orientation }),\n \"hawa-relative\",\n className,\n )}\n {...props}\n >\n {props.children}\n {chipProps && <Chip {...chipProps} />}\n\n <FloatBox\n align={orientation === \"vertical\" ? \"start\" : \"start\"}\n side={orientation === \"vertical\" ? \"right\" : \"bottom\"}\n sideOffset={orientation === \"vertical\" ? width + 30 : 45}\n open={props.showPopover}\n >\n {props.popoverContent}\n </FloatBox>\n </TabsPrimitive.Trigger>\n );\n});\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n \"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2\",\n className,\n )}\n {...props}\n />\n));\n\nTabs.displayName = TabsPrimitive.Root.displayName;\nTabsList.displayName = TabsPrimitive.List.displayName;\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n","import { useEffect, useLayoutEffect } from \"react\";\n\n// useLayoutEffect will show warning if used during ssr, e.g. with Next.js\n// useIsomorphicEffect removes it by replacing useLayoutEffect with useEffect during ssr\nexport const useIsomorphicEffect =\n typeof document !== \"undefined\" ? useLayoutEffect : useEffect;\n","import React, { useState } from \"react\";\n\ntype TUseDiscloser = {\n isOpen: boolean;\n onOpen: () => void;\n onClose: () => void;\n};\n\nconst useDiscloser = (value: boolean = false): TUseDiscloser => {\n const [open, setOpen] = useState<boolean>(value);\n const onOpen = () => setOpen(true);\n const onClose = () => setOpen(false);\n\n return {\n isOpen: open,\n onOpen: onOpen,\n onClose: onClose\n };\n};\n\nexport default useDiscloser;\n","import React, { useEffect, useRef, useState } from \"react\";\n\nfunction useHover() {\n const [value, setValue] = useState(false);\n const ref = useRef<any>(null);\n const handleMouseOver = () => setValue(true);\n const handleMouseOut = () => setValue(false);\n useEffect(\n () => {\n const node = ref.current;\n if (node) {\n node.addEventListener(\"mouseover\", handleMouseOver);\n node.addEventListener(\"mouseout\", handleMouseOut);\n return () => {\n node.removeEventListener(\"mouseover\", handleMouseOver);\n node.removeEventListener(\"mouseout\", handleMouseOut);\n };\n }\n },\n [ref.current] // Recall only if ref changes\n );\n return [ref, value];\n}\n\nexport default useHover;\n","import * as React from \"react\";\n\nimport type { ToasterToastProps } from \"@elements/toast\";\n\nconst TOAST_LIMIT = 5;\nconst TOAST_REMOVE_DELAY = 100000;\n\nconst actionTypes = {\n ADD_TOAST: \"ADD_TOAST\",\n UPDATE_TOAST: \"UPDATE_TOAST\",\n DISMISS_TOAST: \"DISMISS_TOAST\",\n REMOVE_TOAST: \"REMOVE_TOAST\"\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n count = (count + 1) % Number.MAX_VALUE;\n return count.toString();\n}\n\ntype ActionType = typeof actionTypes;\n\ntype Action =\n | { type: ActionType[\"ADD_TOAST\"]; toast: ToasterToastProps }\n | { type: ActionType[\"UPDATE_TOAST\"]; toast: Partial<ToasterToastProps> }\n | { type: ActionType[\"DISMISS_TOAST\"]; toastId?: ToasterToastProps[\"id\"] }\n | { type: ActionType[\"REMOVE_TOAST\"]; toastId?: ToasterToastProps[\"id\"] };\n\ninterface State {\n toasts: ToasterToastProps[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({ type: \"REMOVE_TOAST\", toastId: toastId });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case \"ADD_TOAST\":\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)\n };\n\n case \"UPDATE_TOAST\":\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n )\n };\n\n case \"DISMISS_TOAST\": {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined ? { ...t, open: false } : t\n )\n };\n }\n case \"REMOVE_TOAST\":\n if (action.toastId === undefined) {\n return { ...state, toasts: [] };\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId)\n };\n }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n}\n\ntype Toast = Omit<ToasterToastProps, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n const id = genId();\n\n const update = (props: ToasterToastProps) =>\n dispatch({ type: \"UPDATE_TOAST\", toast: { ...props, id } });\n const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id });\n\n dispatch({\n type: \"ADD_TOAST\",\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n }\n }\n });\n\n return { id: id, dismiss, update };\n}\n\nfunction useToast() {\n const [state, setState] = React.useState<State>(memoryState);\n\n React.useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId })\n };\n}\n\nexport { useToast, toast };\n","import { useState, useRef } from \"react\";\n\nconst useCarousel = (imageWidth: number) => {\n const [isDragging, setIsDragging] = useState(false);\n const [startDragX, setStartDragX] = useState(0);\n const [scrollLeft, setScrollLeft] = useState(0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const findClosestSnapPoint = (scrollLeft: number): number => {\n return Math.round(scrollLeft / imageWidth) * imageWidth;\n };\n\n const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n setIsDragging(true);\n setStartDragX(e.pageX - containerRef.current!.offsetLeft);\n setScrollLeft(containerRef.current!.scrollLeft);\n };\n\n const handleMouseLeave = () => {\n if (isDragging) {\n handleDragEnd();\n }\n };\n\n const handleMouseUp = () => {\n if (isDragging) {\n handleDragEnd();\n }\n };\n\n const handleDragEnd = () => {\n setIsDragging(false);\n const closestSnapPoint = findClosestSnapPoint(\n containerRef.current!.scrollLeft\n );\n containerRef.current!.scrollTo({\n left: closestSnapPoint,\n behavior: \"smooth\"\n });\n };\n\n const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n if (!isDragging) return;\n e.preventDefault();\n const x = e.pageX - containerRef.current!.offsetLeft;\n const walk = x - startDragX;\n containerRef.current!.scrollLeft = scrollLeft - walk;\n };\n\n return {\n containerRef,\n handleMouseDown,\n handleMouseLeave,\n handleMouseUp,\n handleMouseMove\n };\n};\n\nexport default useCarousel;\n","import React, { useEffect, useState } from \"react\";\n\nimport AutoHeight from \"embla-carousel-auto-height\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\ntype DialogCarouselType = {\n canScrollPrev?: any;\n emblaRef?: any;\n emblaApi?: any;\n nextStep?: any;\n prevStep?: any;\n};\n\nexport const useDialogCarousel = (options?: any): DialogCarouselType => {\n const [emblaRef, emblaApi] = useEmblaCarousel(\n { loop: false, watchDrag: false, startIndex: 0, ...options },\n [AutoHeight({ destroyHeight: \"fit\", active: true })]\n );\n const [canScrollPrev, setCanScrollPrev] = useState(false);\n const checkCanScrollPrev = () => {\n if (emblaApi) {\n setCanScrollPrev(emblaApi.canScrollPrev());\n }\n };\n const nextStep = () => {\n if (emblaApi) {\n console.log(\"going to NEXT 👉\");\n emblaApi.scrollNext();\n }\n };\n\n const prevStep = () => {\n if (emblaApi) {\n console.log(\"going to BACK 👈\");\n emblaApi.scrollPrev();\n }\n };\n useEffect(() => {\n checkCanScrollPrev(); // Initial check\n emblaApi && emblaApi.on(\"select\", checkCanScrollPrev); // Update on slide change\n return () => {\n emblaApi && emblaApi.off(\"select\", checkCanScrollPrev);\n };\n }, [emblaApi]);\n\n return {\n emblaRef,\n emblaApi,\n nextStep,\n prevStep,\n canScrollPrev\n };\n};\n","import React, { useState, useEffect, useRef } from \"react\";\n\nexport const useMultiStepDialog = (\n initialStep: any,\n stepIds: any[],\n setOpenDialog: any\n) => {\n const [currentStep, setCurrentStep] = useState(initialStep);\n const [dialogHeight, setDialogHeight] = useState(null);\n const visibleStepRef = useRef<any>(null);\n\n useEffect(() => {\n if (visibleStepRef.current) {\n setDialogHeight(visibleStepRef.current.offsetHeight);\n }\n }, [currentStep, setOpenDialog]);\n\n const handleNext = () => {\n const currentIndex = stepIds.indexOf(currentStep);\n if (currentIndex < stepIds.length - 1) {\n setTimeout(() => {\n setCurrentStep(stepIds[currentIndex + 1]);\n }, 100);\n }\n };\n const handleBack = () => {\n const currentIndex = stepIds.indexOf(currentStep);\n if (currentIndex > 0) {\n setTimeout(() => {\n setCurrentStep(stepIds[currentIndex - 1]);\n }, 100);\n }\n };\n\n return {\n currentStep,\n dialogHeight,\n visibleStepRef,\n handleNext,\n handleBack\n };\n};\n","import { useState } from \"react\";\n\nexport function useClipboard({ timeout = 2000 } = {}): {\n copy: (value: any) => void;\n reset: () => void;\n error: Error | null;\n copied: boolean;\n} {\n const [error, setError] = useState<Error | null>(null);\n const [copied, setCopied] = useState<boolean>(false);\n const [copyTimeout, setCopyTimeout] = useState<NodeJS.Timeout | null>(null);\n\n const handleCopyResult = (value: boolean) => {\n clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n setCopyTimeout(setTimeout(() => setCopied(false), timeout));\n setCopied(value);\n };\n\n const copy = (valueToCopy: any) => {\n if (\"clipboard\" in navigator) {\n navigator.clipboard\n .writeText(valueToCopy)\n .then(() => handleCopyResult(true))\n .catch((err) => setError(err));\n } else {\n setError(new Error(\"useClipboard: navigator.clipboard is not supported\"));\n }\n };\n\n const reset = () => {\n setCopied(false);\n setError(null);\n clearTimeout(copyTimeout as NodeJS.Timeout | undefined);\n };\n\n return { copy, reset, error, copied };\n}\n","import React, { useState, useEffect } from \"react\";\n\nexport const useBreakpoint = () => {\n // Initialize breakpoint with a null value.\n const [breakpoint, setBreakpoint] = useState<any>(null);\n\n useEffect(() => {\n // Check if window is defined (i.e., if running on the client side)\n if (typeof window !== \"undefined\") {\n // Define the resize function within the effect.\n const resize = () => {\n setBreakpoint(window.innerWidth);\n };\n\n // Call resize initially to set the breakpoint based on the initial window size.\n resize();\n\n // Set up the resize event listener.\n window.addEventListener(\"resize\", resize);\n\n // Clean up the event listener when the component is unmounted.\n return () => {\n window.removeEventListener(\"resize\", resize);\n };\n }\n }, []); // The empty array ensures this useEffect runs once, similar to componentDidMount.\n\n return breakpoint;\n};\n\n// import React, { useState, useEffect } from \"react\";\n\n// export const useBreakpoint = () => {\n// const [breakpoint, setBreakpoint] = useState(window?.innerWidth);\n// const resize = () => {\n// setBreakpoint(window?.innerWidth);\n// };\n\n// useEffect(() => {\n// // Ensure this code is only run on the client side\n// if (typeof window !== \"undefined\") {\n// // Now it's safe to use window\n// setBreakpoint(window?.innerWidth);\n// window?.addEventListener(\"resize\", resize);\n\n// return () => {\n// window?.removeEventListener(\"resize\", resize);\n// };\n// }\n// }, []); // Empty dependency array ensures this useEffect runs once, similar to componentDidMount\n\n// return breakpoint;\n// };\n","import { useEffect, useState } from \"react\";\n\ninterface WindowSize {\n width: number | undefined;\n height: number | undefined;\n}\n\nexport const useWindowSize = () => {\n const [windowSize, setWindowSize] = useState<WindowSize>({\n width: undefined,\n height: undefined\n });\n\n useEffect(() => {\n function handleResize() {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight\n });\n }\n window.addEventListener(\"resize\", handleResize);\n handleResize();\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n return windowSize;\n};\n","// useFocusWithin hook detects if any element within has focus, it works the same way as :focus-within CSS selector:\nimport { useRef, useState, useEffect } from \"react\";\n\n// Define options for the useFocusWithin hook, which includes onFocus and onBlur callbacks.\nexport interface UseFocusWithinOptions {\n onFocus?(event: FocusEvent): void;\n onBlur?(event: FocusEvent): void;\n}\n\n// Function to check if the event's related target is contained within the current target.\nfunction containsRelatedTarget(event: FocusEvent) {\n if (\n event.currentTarget instanceof HTMLElement &&\n event.relatedTarget instanceof HTMLElement\n ) {\n return event.currentTarget.contains(event.relatedTarget);\n }\n\n return false;\n}\n\n// Custom React hook for handling focus events within an element.\nexport function useFocusWithin<T extends HTMLElement = any>({\n onBlur,\n onFocus\n}: UseFocusWithinOptions = {}): {\n ref: React.MutableRefObject<T>;\n focused: boolean;\n} {\n // Create a ref to hold the target element.\n const ref = useRef<T>(null!);\n\n // State to track if the element is focused.\n const [focused, _setFocused] = useState(false);\n\n // Create a ref to store the focused state.\n const focusedRef = useRef(false);\n\n // Function to set the focused state and update the ref.\n const setFocused = (value: boolean) => {\n _setFocused(value);\n focusedRef.current = value;\n };\n\n // Handle focus-in event: when the element gains focus.\n const handleFocusIn = (event: FocusEvent) => {\n if (!focusedRef.current) {\n setFocused(true);\n onFocus?.(event); // Call the onFocus callback if provided.\n }\n };\n\n // Handle focus-out event: when the element loses focus.\n const handleFocusOut = (event: FocusEvent) => {\n if (focusedRef.current && !containsRelatedTarget(event)) {\n setFocused(false);\n onBlur?.(event); // Call the onBlur callback if provided.\n }\n };\n\n // Attach event listeners for focusin and focusout events.\n useEffect(() => {\n if (ref.current) {\n ref.current.addEventListener(\"focusin\", handleFocusIn);\n ref.current.addEventListener(\"focusout\", handleFocusOut);\n\n // Clean up event listeners when the component unmounts.\n return () => {\n ref.current?.removeEventListener(\"focusin\", handleFocusIn);\n ref.current?.removeEventListener(\"focusout\", handleFocusOut);\n };\n }\n\n return undefined;\n }, [handleFocusIn, handleFocusOut]);\n\n // Return the ref and focused state.\n return { ref, focused };\n}\n","import { useState, useEffect, useRef } from \"react\";\n\nexport interface UseMediaQueryOptions {\n getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(\n query: MediaQueryList,\n callback: MediaQueryCallback\n) {\n try {\n query.addEventListener(\"change\", callback);\n return () => query.removeEventListener(\"change\", callback);\n } catch (e) {\n query.addListener(callback);\n return () => query.removeListener(callback);\n }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n if (typeof initialValue === \"boolean\") {\n return initialValue;\n }\n\n if (typeof window !== \"undefined\" && \"matchMedia\" in window) {\n return window.matchMedia(query).matches;\n }\n\n return false;\n}\n\nexport function useMediaQuery(\n query: string,\n initialValue?: boolean,\n { getInitialValueInEffect }: UseMediaQueryOptions = {\n getInitialValueInEffect: true\n }\n) {\n const [matches, setMatches] = useState(\n getInitialValueInEffect\n ? initialValue\n : getInitialValue(query, initialValue)\n );\n const queryRef = useRef<MediaQueryList>();\n\n useEffect(() => {\n if (\"matchMedia\" in window) {\n queryRef.current = window.matchMedia(query);\n setMatches(queryRef.current.matches);\n return attachMediaListener(queryRef.current, (event) =>\n setMatches(event.matches)\n );\n }\n\n return undefined;\n }, [query]);\n\n return matches;\n}\n","import React, { useState, useEffect, useRef } from \"react\";\n\nfunction useScrollPosition(ref: any) {\n const [scrollPosition, setScrollPosition] = useState(0);\n // const savedRef = useRef();\n\n // useEffect(() => {\n // savedRef.current = ref;\n // }, [ref]);\n\n useEffect(() => {\n function handleScroll() {\n setScrollPosition(ref.current.scrollTop);\n }\n\n if (ref.current) {\n ref.current.addEventListener(\"scroll\", handleScroll);\n }\n\n return () => {\n if (ref.current) {\n ref.current.removeEventListener(\"scroll\", handleScroll);\n }\n };\n }, [ref]);\n\n return scrollPosition;\n}\n\nexport default useScrollPosition;\n","import React, { useState, useEffect } from \"react\";\n\nconst calculateRange = (data: any, rowsPerPage: any) => {\n const range = [];\n const num = Math.ceil(data?.length / rowsPerPage);\n let i = 1;\n for (let i = 1; i <= num; i++) {\n range.push(i);\n }\n return range;\n};\n\nconst sliceData = (data: any, page: any, rowsPerPage: any) => {\n return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage);\n};\n\n// useTable.js\nconst sortData = (data: any, sortColumn: any, sortDirection: any) => {\n if (sortColumn !== null) {\n return data?.sort((a: any, b: any) => {\n const aValue = a[sortColumn].value;\n const bValue = b[sortColumn].value;\n\n // Handle non-string values by using simple comparison\n if (typeof aValue === \"string\" && typeof bValue === \"string\") {\n if (sortDirection === \"asc\") {\n return aValue.localeCompare(bValue);\n } else {\n return bValue.localeCompare(aValue);\n }\n } else {\n if (sortDirection === \"asc\") {\n return aValue - bValue;\n } else {\n return bValue - aValue;\n }\n }\n });\n }\n return data;\n};\n\nconst useTable = (\n data: any,\n page: any,\n rowsPerPage: any,\n sortColumn: any,\n sortDirection: any\n) => {\n const [tableRange, setTableRange] = useState<any>([]);\n const [slice, setSlice] = useState<any>([]);\n\n useEffect(() => {\n if (data) {\n const range = calculateRange(data, rowsPerPage);\n setTableRange([...range]);\n\n const sortedData = sortData(data, sortColumn, sortDirection);\n const slicedData = sliceData(sortedData, page, rowsPerPage);\n setSlice([...slicedData]);\n }\n }, [data, setTableRange, page, rowsPerPage, sortColumn, sortDirection]);\n\n return { slice, range: tableRange };\n};\n\nexport default useTable;\n","import { useEffect, useState } from \"react\";\n\nfunction useTabs(initialTab = \"\") {\n const [activeTab, setActiveTab] = useState(initialTab);\n\n // Listen to hash changes in the URL\n useEffect(() => {\n const handleHashChange = () => {\n const hash = window.location.hash.substring(1);\n setActiveTab(hash || initialTab);\n };\n\n window.addEventListener(\"hashchange\", handleHashChange);\n\n // Initialize the tab based on the initial hash\n handleHashChange();\n\n return () => {\n // Remove the event listener when the component unmounts\n window.removeEventListener(\"hashchange\", handleHashChange);\n };\n }, [initialTab]);\n\n const handleTabChange = (index: any) => {\n setActiveTab(index);\n\n // Update the URL hash when the tab changes\n window.location.hash = index;\n };\n\n return {\n activeTab,\n handleTabChange\n };\n}\n\nexport { useTabs };\n","import { RefObject, useEffect, useRef, useState } from \"react\";\n\nexport interface ContentRect {\n width: number;\n height: number;\n top: number;\n right: number;\n left: number;\n bottom: number;\n}\nexport const useMeasureDirty = (ref: RefObject<HTMLElement>): ContentRect => {\n const frame = useRef(0);\n const [rect, set] = useState({\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n });\n\n const [observer] = useState(\n () =>\n new ResizeObserver((entries) => {\n const entry = entries[0];\n\n if (entry) {\n cancelAnimationFrame(frame.current);\n\n frame.current = requestAnimationFrame(() => {\n if (ref.current) {\n set(entry.contentRect);\n }\n });\n }\n }),\n );\n\n useEffect(() => {\n observer.disconnect();\n\n if (ref.current) {\n observer.observe(ref.current);\n }\n }, [ref]);\n\n return rect;\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n name: string;\n colors: {\n [key: number]: string;\n };\n};\ntype Rgb = {\n r: number;\n g: number;\n b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n sanitizedHex\n );\n\n if (!colorParts) {\n return null;\n }\n\n const [, r, g, b] = colorParts;\n\n return {\n r: parseInt(r, 16),\n g: parseInt(g, 16),\n b: parseInt(b, 16)\n } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n const rgbColor = hexToRgb(color);\n\n if (!rgbColor) {\n return \"#333\";\n }\n\n const { r, g, b } = rgbColor;\n const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n const color = hexToRgb(`#${hex}`);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r + (255 - color.r) * intensity);\n const g = Math.round(color.g + (255 - color.g) * intensity);\n const b = Math.round(color.b + (255 - color.b) * intensity);\n\n return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n const color = hexToRgb(hex);\n\n if (!color) {\n return \"\";\n }\n\n const r = Math.round(color.r * intensity);\n const g = Math.round(color.g * intensity);\n const b = Math.round(color.b * intensity);\n\n return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n if (color.startsWith(\"#\")) {\n // Convert hex to RGB\n let r = parseInt(color.slice(1, 3), 16);\n let g = parseInt(color.slice(3, 5), 16);\n let b = parseInt(color.slice(5, 7), 16);\n return [r, g, b];\n } else if (color.startsWith(\"rgb\")) {\n // Extract RGB values from rgb() format\n return color.match(/\\d+/g).map(Number);\n }\n // Default to white if format is unrecognized\n return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n const [r, g, b] = parseColor(color)?.map((c: any) => {\n c /= 255;\n return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n });\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n const name = baseColor;\n\n const response: Palette = {\n name,\n colors: {\n 500: `#${baseColor}`.replace(\"##\", \"#\")\n }\n };\n\n const intensityMap: {\n [key: number]: number;\n } = {\n 50: 0.95,\n 100: 0.9,\n 200: 0.75,\n 300: 0.6,\n 400: 0.3,\n 600: 0.9,\n 700: 0.75,\n 800: 0.6,\n 900: 0.49\n };\n\n [50, 100, 200, 300, 400].forEach((level) => {\n response.colors[level] = lighten(baseColor, intensityMap[level]);\n });\n [600, 700, 800, 900].forEach((level) => {\n response.colors[level] = darken(baseColor, intensityMap[level]);\n });\n\n return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n// let d = hex?.split(\"#\")[1];\n// var aRgbHex = d?.match(/.{1,2}/g);\n// var aRgb = [\n// parseInt(aRgbHex[0], 16),\n// parseInt(aRgbHex[1], 16),\n// parseInt(aRgbHex[2], 16)\n// ];\n// return aRgb;\n// };\n// const getTextColor = (backColor) => {\n// let rgbArray = hexToRgb(backColor);\n// if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n// return \"#000000\";\n// } else {\n// return \"#ffffff\";\n// }\n// };\n// const replaceAt = function (string, index, replacement) {\n// // if (replacement == \"\" || replacement == \" \") {\n// // return (\n// // string.substring(0, index) +\n// // string.substring(index + replacement.length )\n// // );\n// // }\n// const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n// return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n","import React from \"react\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nexport type ChipColors =\n | \"green\"\n | \"blue\"\n | \"red\"\n | \"yellow\"\n | \"orange\"\n | \"purple\"\n | \"cyan\"\n | \"hyper\"\n | \"oceanic\";\n\nexport type ChipTypes = React.HTMLAttributes<HTMLSpanElement> & {\n /** The text inside the chip */\n label: string;\n /** The small icon before the chip label */\n icon?: JSX.Element;\n /** The color of the chip, must be a tailwind color */\n color?: ChipColors;\n /** The size of the chip */\n size?: \"small\" | \"normal\" | \"large\";\n /** Enable/Disable the dot before the label of the chip */\n dot?: boolean;\n /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */\n dotType?: \"available\" | \"unavailable\";\n radius?: RadiusType;\n};\n\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(\n (\n {\n label,\n size = \"normal\",\n icon,\n color,\n radius = \"inherit\",\n dotType,\n ...rest\n },\n ref\n ) => {\n let defaultStyles =\n \"hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center hawa-px-2.5 hawa-py-1 hawa-font-bold \";\n let radiusStyles = {\n inherit: \" hawa-rounded\",\n full: \"hawa-rounded-full\",\n none: \"hawa-rounded-none\"\n };\n let sizeStyles = {\n small:\n \"hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 \",\n normal: \"hawa-h-fit hawa-text-xs\",\n large: \"hawa-text-base\"\n };\n let dotStyles = {\n small: \"hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full\",\n normal: \"hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full\",\n large: \"hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full\"\n };\n let dotTypeStyles = {\n available: \"hawa-bg-green-500\",\n unavailable: \"hawa-bg-red-500\"\n };\n let colorStyles: any = {\n green:\n \"hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800\",\n blue: \"hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100\",\n red: \"hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100\",\n yellow:\n \"hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800\",\n orange:\n \"hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100\",\n purple:\n \"hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100\",\n cyan: \"hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800\",\n hyper:\n \"hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 \",\n oceanic:\n \"hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600\"\n };\n if (label) {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n defaultStyles,\n sizeStyles[size],\n radiusStyles[radius],\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n >\n {dotType && (\n <span\n className={cn(dotStyles[size], dotTypeStyles[dotType])}\n ></span>\n )}\n {icon && icon}\n {label}\n </span>\n );\n } else {\n return (\n <span\n {...rest}\n ref={ref}\n className={cn(\n \"hawa-h-2 hawa-w-2 hawa-rounded-full\",\n color ? colorStyles[color] : \"hawa-border hawa-bg-none\"\n )}\n ></span>\n );\n }\n }\n);\n","import * as React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type FloatBoxProps = {\n className?: string;\n open?: boolean;\n children?: React.ReactNode;\n side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n sideOffset?: number;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n arrow?: boolean;\n};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n align = \"center\",\n arrow = true,\n ...props\n}) => {\n let stylesMap = {\n bottom: {\n start: { top: sideOffset, insetInlineStart: 0 },\n center: { top: sideOffset },\n end: { top: sideOffset, insetInlineEnd: 0 },\n },\n top: {\n start: { bottom: sideOffset, insetInlineStart: 0 },\n center: { bottom: sideOffset },\n end: { bottom: sideOffset, insetInlineEnd: 0 },\n },\n right: {\n start: { left: sideOffset, top: -5 },\n center: { left: sideOffset },\n end: { left: sideOffset, bottom: 0 },\n },\n left: {\n start: { right: sideOffset, top: 0 },\n center: { right: sideOffset },\n end: { right: sideOffset, bottom: 0 },\n },\n };\n const arrowDirection = {\n top: \"hawa-arrow-default-bottom\",\n bottom: \"hawa-arrow-default-top\",\n right: \"hawa-arrow-default-left\",\n left: \"hawa-arrow-default-right\",\n };\n\n return (\n <div\n className={cn(\n \"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2 hawa-bg-popover\",\n className,\n )}\n style={{ ...stylesMap[side][align] }}\n data-side={side}\n data-floatbox-state={open ? \"open\" : \"closed\"}\n >\n {arrow && <div className={cn(\"hawa-bg-red-500\", arrowDirection[side])} />}\n <span>{props.children}</span>\n </div>\n );\n};\n\nexport { FloatBox };\n"],"mappings":"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","names":["React","useEffect","useState","React","useState","useRef","useEffect","useState","useState","useEffect","useRef","useState","useState","useEffect","useEffect","useState","useRef","useState","useEffect","useState","useEffect","useRef","useState","useEffect","useState","useEffect","useEffect","useState","useEffect","useRef","useState","React","React","React"]}
|