@sikka/hawa 0.30.26-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 +319 -205
- package/dist/blocks/index.mjs +3 -2
- package/dist/blocks/misc/index.js +263 -149
- package/dist/blocks/misc/index.mjs +184 -70
- package/dist/{chunk-QDRFTC7W.mjs → chunk-MNK7PSNG.mjs} +48 -14
- package/dist/chunk-R2SKHHDK.mjs +411 -0
- package/dist/{chunk-H7ZADF2Z.mjs → chunk-UDCDD66A.mjs} +8 -0
- package/dist/elements/index.js +398 -289
- package/dist/elements/index.mjs +5 -5
- package/dist/floatBox/index.d.mts +3 -0
- package/dist/floatBox/index.d.ts +3 -0
- package/dist/floatBox/index.js +32 -12
- package/dist/floatBox/index.js.map +1 -1
- package/dist/floatBox/index.mjs +32 -12
- package/dist/floatBox/index.mjs.map +1 -1
- package/dist/hooks/index.d.mts +12 -2
- package/dist/hooks/index.d.ts +12 -2
- package/dist/hooks/index.js +36 -0
- package/dist/hooks/index.mjs +16 -340
- package/dist/index.css +68 -0
- package/dist/index.d.mts +11 -1
- package/dist/index.d.ts +11 -1
- package/dist/index.js +4243 -4176
- package/dist/index.mjs +1490 -1424
- package/dist/layout/index.mjs +3 -4
- package/dist/tabs/index.js +146 -32
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +146 -32
- package/dist/tabs/index.mjs.map +1 -1
- package/package.json +1 -1
- package/dist/chunk-4OOSUQZG.mjs +0 -12
- package/dist/chunk-57SB6MBG.mjs +0 -31
package/dist/elements/index.mjs
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
useClipboard
|
|
4
|
-
} from "../chunk-57SB6MBG.mjs";
|
|
5
2
|
import {
|
|
6
3
|
Alert,
|
|
7
4
|
CheckMark,
|
|
@@ -30,7 +27,10 @@ import {
|
|
|
30
27
|
TabsTrigger,
|
|
31
28
|
Textarea,
|
|
32
29
|
UncheckMark
|
|
33
|
-
} from "../chunk-
|
|
30
|
+
} from "../chunk-MNK7PSNG.mjs";
|
|
31
|
+
import {
|
|
32
|
+
useClipboard
|
|
33
|
+
} from "../chunk-R2SKHHDK.mjs";
|
|
34
34
|
import {
|
|
35
35
|
Sheet,
|
|
36
36
|
SheetClose,
|
|
@@ -79,7 +79,7 @@ import {
|
|
|
79
79
|
} from "../chunk-DGOT2FVH.mjs";
|
|
80
80
|
import {
|
|
81
81
|
__require
|
|
82
|
-
} from "../chunk-
|
|
82
|
+
} from "../chunk-UDCDD66A.mjs";
|
|
83
83
|
|
|
84
84
|
// elements/accordion/Accordion.tsx
|
|
85
85
|
import * as React3 from "react";
|
|
@@ -6,6 +6,9 @@ type FloatBoxProps = {
|
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
side?: "bottom" | "left" | "right" | "top";
|
|
8
8
|
sideOffset?: number;
|
|
9
|
+
align?: "start" | "center" | "end";
|
|
10
|
+
alignOffset?: number;
|
|
11
|
+
arrow?: boolean;
|
|
9
12
|
};
|
|
10
13
|
declare const FloatBox: React.FC<FloatBoxProps>;
|
|
11
14
|
|
package/dist/floatBox/index.d.ts
CHANGED
|
@@ -6,6 +6,9 @@ type FloatBoxProps = {
|
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
side?: "bottom" | "left" | "right" | "top";
|
|
8
8
|
sideOffset?: number;
|
|
9
|
+
align?: "start" | "center" | "end";
|
|
10
|
+
alignOffset?: number;
|
|
11
|
+
arrow?: boolean;
|
|
9
12
|
};
|
|
10
13
|
declare const FloatBox: React.FC<FloatBoxProps>;
|
|
11
14
|
|
package/dist/floatBox/index.js
CHANGED
|
@@ -51,31 +51,51 @@ var FloatBox = ({
|
|
|
51
51
|
open,
|
|
52
52
|
side = "bottom",
|
|
53
53
|
sideOffset = 40,
|
|
54
|
+
align = "center",
|
|
55
|
+
arrow = true,
|
|
54
56
|
...props
|
|
55
57
|
}) => {
|
|
56
|
-
let
|
|
57
|
-
|
|
58
|
-
|
|
58
|
+
let stylesMap = {
|
|
59
|
+
bottom: {
|
|
60
|
+
start: { top: sideOffset, insetInlineStart: 0 },
|
|
61
|
+
center: { top: sideOffset },
|
|
62
|
+
end: { top: sideOffset, insetInlineEnd: 0 }
|
|
63
|
+
},
|
|
64
|
+
top: {
|
|
65
|
+
start: { bottom: sideOffset, insetInlineStart: 0 },
|
|
66
|
+
center: { bottom: sideOffset },
|
|
67
|
+
end: { bottom: sideOffset, insetInlineEnd: 0 }
|
|
68
|
+
},
|
|
69
|
+
right: {
|
|
70
|
+
start: { left: sideOffset, top: -5 },
|
|
71
|
+
center: { left: sideOffset },
|
|
72
|
+
end: { left: sideOffset, bottom: 0 }
|
|
73
|
+
},
|
|
74
|
+
left: {
|
|
75
|
+
start: { right: sideOffset, top: 0 },
|
|
76
|
+
center: { right: sideOffset },
|
|
77
|
+
end: { right: sideOffset, bottom: 0 }
|
|
78
|
+
}
|
|
59
79
|
};
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
right:
|
|
64
|
-
left:
|
|
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"
|
|
65
85
|
};
|
|
66
86
|
return /* @__PURE__ */ React.createElement(
|
|
67
87
|
"div",
|
|
68
88
|
{
|
|
69
89
|
className: cn(
|
|
70
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
71
|
-
sideOffsetStyles[side],
|
|
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",
|
|
72
91
|
className
|
|
73
92
|
),
|
|
74
|
-
style: { ...
|
|
93
|
+
style: { ...stylesMap[side][align] },
|
|
75
94
|
"data-side": side,
|
|
76
95
|
"data-floatbox-state": open ? "open" : "closed"
|
|
77
96
|
},
|
|
78
|
-
|
|
97
|
+
arrow && /* @__PURE__ */ React.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
98
|
+
/* @__PURE__ */ React.createElement("span", null, props.children)
|
|
79
99
|
);
|
|
80
100
|
};
|
|
81
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};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n ...props\n}) => {\n let
|
|
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
|
@@ -16,31 +16,51 @@ var FloatBox = ({
|
|
|
16
16
|
open,
|
|
17
17
|
side = "bottom",
|
|
18
18
|
sideOffset = 40,
|
|
19
|
+
align = "center",
|
|
20
|
+
arrow = true,
|
|
19
21
|
...props
|
|
20
22
|
}) => {
|
|
21
|
-
let
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
let stylesMap = {
|
|
24
|
+
bottom: {
|
|
25
|
+
start: { top: sideOffset, insetInlineStart: 0 },
|
|
26
|
+
center: { top: sideOffset },
|
|
27
|
+
end: { top: sideOffset, insetInlineEnd: 0 }
|
|
28
|
+
},
|
|
29
|
+
top: {
|
|
30
|
+
start: { bottom: sideOffset, insetInlineStart: 0 },
|
|
31
|
+
center: { bottom: sideOffset },
|
|
32
|
+
end: { bottom: sideOffset, insetInlineEnd: 0 }
|
|
33
|
+
},
|
|
34
|
+
right: {
|
|
35
|
+
start: { left: sideOffset, top: -5 },
|
|
36
|
+
center: { left: sideOffset },
|
|
37
|
+
end: { left: sideOffset, bottom: 0 }
|
|
38
|
+
},
|
|
39
|
+
left: {
|
|
40
|
+
start: { right: sideOffset, top: 0 },
|
|
41
|
+
center: { right: sideOffset },
|
|
42
|
+
end: { right: sideOffset, bottom: 0 }
|
|
43
|
+
}
|
|
24
44
|
};
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
right:
|
|
29
|
-
left:
|
|
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"
|
|
30
50
|
};
|
|
31
51
|
return /* @__PURE__ */ React.createElement(
|
|
32
52
|
"div",
|
|
33
53
|
{
|
|
34
54
|
className: cn(
|
|
35
|
-
"data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border
|
|
36
|
-
sideOffsetStyles[side],
|
|
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",
|
|
37
56
|
className
|
|
38
57
|
),
|
|
39
|
-
style: { ...
|
|
58
|
+
style: { ...stylesMap[side][align] },
|
|
40
59
|
"data-side": side,
|
|
41
60
|
"data-floatbox-state": open ? "open" : "closed"
|
|
42
61
|
},
|
|
43
|
-
|
|
62
|
+
arrow && /* @__PURE__ */ React.createElement("div", { className: cn("hawa-bg-red-500", arrowDirection[side]) }),
|
|
63
|
+
/* @__PURE__ */ React.createElement("span", null, props.children)
|
|
44
64
|
);
|
|
45
65
|
};
|
|
46
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};\n\nconst FloatBox: React.FC<FloatBoxProps> = ({\n className,\n open,\n side = \"bottom\",\n sideOffset = 40,\n ...props\n}) => {\n let
|
|
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/hooks/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { useLayoutEffect } from 'react';
|
|
1
|
+
import React__default, { useLayoutEffect, RefObject } from 'react';
|
|
2
2
|
import { T as ToasterToastProps } from '../Toast-ySvjL_-K.mjs';
|
|
3
3
|
import 'class-variance-authority/types';
|
|
4
4
|
import '@radix-ui/react-toast';
|
|
@@ -96,4 +96,14 @@ declare function useTabs(initialTab?: string): {
|
|
|
96
96
|
handleTabChange: (index: any) => void;
|
|
97
97
|
};
|
|
98
98
|
|
|
99
|
-
|
|
99
|
+
interface ContentRect {
|
|
100
|
+
width: number;
|
|
101
|
+
height: number;
|
|
102
|
+
top: number;
|
|
103
|
+
right: number;
|
|
104
|
+
left: number;
|
|
105
|
+
bottom: number;
|
|
106
|
+
}
|
|
107
|
+
declare const useMeasureDirty: (ref: RefObject<HTMLElement>) => ContentRect;
|
|
108
|
+
|
|
109
|
+
export { type ContentRect, type UseFocusWithinOptions, type UseMediaQueryOptions, reducer, toast, useBreakpoint, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMeasureDirty, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { useLayoutEffect } from 'react';
|
|
1
|
+
import React__default, { useLayoutEffect, RefObject } from 'react';
|
|
2
2
|
import { T as ToasterToastProps } from '../Toast-YaClwi7z.js';
|
|
3
3
|
import 'class-variance-authority/types';
|
|
4
4
|
import '@radix-ui/react-toast';
|
|
@@ -96,4 +96,14 @@ declare function useTabs(initialTab?: string): {
|
|
|
96
96
|
handleTabChange: (index: any) => void;
|
|
97
97
|
};
|
|
98
98
|
|
|
99
|
-
|
|
99
|
+
interface ContentRect {
|
|
100
|
+
width: number;
|
|
101
|
+
height: number;
|
|
102
|
+
top: number;
|
|
103
|
+
right: number;
|
|
104
|
+
left: number;
|
|
105
|
+
bottom: number;
|
|
106
|
+
}
|
|
107
|
+
declare const useMeasureDirty: (ref: RefObject<HTMLElement>) => ContentRect;
|
|
108
|
+
|
|
109
|
+
export { type ContentRect, type UseFocusWithinOptions, type UseMediaQueryOptions, reducer, toast, useBreakpoint, useClipboard, useDialogCarousel, useFocusWithin, useIsomorphicEffect, useMeasureDirty, useMediaQuery, useMultiStepDialog, useTabs, useToast, useWindowSize };
|
package/dist/hooks/index.js
CHANGED
|
@@ -38,6 +38,7 @@ __export(hooks_exports, {
|
|
|
38
38
|
useDialogCarousel: () => useDialogCarousel,
|
|
39
39
|
useFocusWithin: () => useFocusWithin,
|
|
40
40
|
useIsomorphicEffect: () => useIsomorphicEffect,
|
|
41
|
+
useMeasureDirty: () => useMeasureDirty,
|
|
41
42
|
useMediaQuery: () => useMediaQuery,
|
|
42
43
|
useMultiStepDialog: () => useMultiStepDialog,
|
|
43
44
|
useTabs: () => useTabs,
|
|
@@ -425,6 +426,40 @@ function useTabs(initialTab = "") {
|
|
|
425
426
|
handleTabChange
|
|
426
427
|
};
|
|
427
428
|
}
|
|
429
|
+
|
|
430
|
+
// hooks/useMeasureDirty.ts
|
|
431
|
+
var import_react15 = require("react");
|
|
432
|
+
var useMeasureDirty = (ref) => {
|
|
433
|
+
const frame = (0, import_react15.useRef)(0);
|
|
434
|
+
const [rect, set] = (0, import_react15.useState)({
|
|
435
|
+
width: 0,
|
|
436
|
+
height: 0,
|
|
437
|
+
top: 0,
|
|
438
|
+
left: 0,
|
|
439
|
+
bottom: 0,
|
|
440
|
+
right: 0
|
|
441
|
+
});
|
|
442
|
+
const [observer] = (0, import_react15.useState)(
|
|
443
|
+
() => new ResizeObserver((entries) => {
|
|
444
|
+
const entry = entries[0];
|
|
445
|
+
if (entry) {
|
|
446
|
+
cancelAnimationFrame(frame.current);
|
|
447
|
+
frame.current = requestAnimationFrame(() => {
|
|
448
|
+
if (ref.current) {
|
|
449
|
+
set(entry.contentRect);
|
|
450
|
+
}
|
|
451
|
+
});
|
|
452
|
+
}
|
|
453
|
+
})
|
|
454
|
+
);
|
|
455
|
+
(0, import_react15.useEffect)(() => {
|
|
456
|
+
observer.disconnect();
|
|
457
|
+
if (ref.current) {
|
|
458
|
+
observer.observe(ref.current);
|
|
459
|
+
}
|
|
460
|
+
}, [ref]);
|
|
461
|
+
return rect;
|
|
462
|
+
};
|
|
428
463
|
// Annotate the CommonJS export names for ESM import in node:
|
|
429
464
|
0 && (module.exports = {
|
|
430
465
|
reducer,
|
|
@@ -434,6 +469,7 @@ function useTabs(initialTab = "") {
|
|
|
434
469
|
useDialogCarousel,
|
|
435
470
|
useFocusWithin,
|
|
436
471
|
useIsomorphicEffect,
|
|
472
|
+
useMeasureDirty,
|
|
437
473
|
useMediaQuery,
|
|
438
474
|
useMultiStepDialog,
|
|
439
475
|
useTabs,
|