@sikka/hawa 0.26.28 → 0.26.30
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/accordion/index.js +1 -0
- package/dist/accordion/index.js.map +1 -0
- package/dist/accordion/index.mjs +2 -1
- package/dist/accordion/index.mjs.map +1 -0
- package/dist/alert/index.js +5 -4
- package/dist/alert/index.js.map +1 -0
- package/dist/alert/index.mjs +6 -5
- package/dist/alert/index.mjs.map +1 -0
- package/dist/appLayout/index.js +2 -2
- package/dist/appLayout/index.js.map +1 -0
- package/dist/appLayout/index.mjs +3 -3
- package/dist/appLayout/index.mjs.map +1 -0
- package/dist/appMenubar/index.js +1 -0
- package/dist/appMenubar/index.js.map +1 -0
- package/dist/appMenubar/index.mjs +2 -1
- package/dist/appMenubar/index.mjs.map +1 -0
- package/dist/appStores/index.js +1 -0
- package/dist/appStores/index.js.map +1 -0
- package/dist/appStores/index.mjs +1 -0
- package/dist/appStores/index.mjs.map +1 -0
- package/dist/appTabs/index.js +1 -0
- package/dist/appTabs/index.js.map +1 -0
- package/dist/appTabs/index.mjs +2 -1
- package/dist/appTabs/index.mjs.map +1 -0
- package/dist/appTopbar/index.js +1 -0
- package/dist/appTopbar/index.js.map +1 -0
- package/dist/appTopbar/index.mjs +2 -1
- package/dist/appTopbar/index.mjs.map +1 -0
- package/dist/avatar/index.js +2 -2
- package/dist/avatar/index.js.map +1 -0
- package/dist/avatar/index.mjs +3 -3
- package/dist/avatar/index.mjs.map +1 -0
- package/dist/backToTop/index.js +4 -6
- package/dist/backToTop/index.js.map +1 -0
- package/dist/backToTop/index.mjs +5 -7
- package/dist/backToTop/index.mjs.map +1 -0
- package/dist/badge/index.js +4 -4
- package/dist/badge/index.js.map +1 -0
- package/dist/badge/index.mjs +5 -5
- package/dist/badge/index.mjs.map +1 -0
- package/dist/breadcrumb/index.js +1 -0
- package/dist/breadcrumb/index.js.map +1 -0
- package/dist/breadcrumb/index.mjs +1 -0
- package/dist/breadcrumb/index.mjs.map +1 -0
- package/dist/button/index.js +1 -0
- package/dist/button/index.js.map +1 -0
- package/dist/button/index.mjs +2 -1
- package/dist/button/index.mjs.map +1 -0
- package/dist/card/index.js +1 -0
- package/dist/card/index.js.map +1 -0
- package/dist/card/index.mjs +2 -1
- package/dist/card/index.mjs.map +1 -0
- package/dist/carousel/index.js +11 -10
- package/dist/carousel/index.js.map +1 -0
- package/dist/carousel/index.mjs +12 -11
- package/dist/carousel/index.mjs.map +1 -0
- package/dist/checkbox/index.js +1 -0
- package/dist/checkbox/index.js.map +1 -0
- package/dist/checkbox/index.mjs +2 -1
- package/dist/checkbox/index.mjs.map +1 -0
- package/dist/chip/index.js +1 -0
- package/dist/chip/index.js.map +1 -0
- package/dist/chip/index.mjs +2 -1
- package/dist/chip/index.mjs.map +1 -0
- package/dist/chunk-3ODWQVIA.mjs +12 -0
- package/dist/chunk-3ODWQVIA.mjs.map +1 -0
- package/dist/{chunk-TGZRVRLP.mjs → chunk-53OZVR57.mjs} +1 -0
- package/dist/chunk-53OZVR57.mjs.map +1 -0
- package/dist/{chunk-TWNGV3RE.mjs → chunk-CBRGWUZG.mjs} +1 -0
- package/dist/chunk-CBRGWUZG.mjs.map +1 -0
- package/dist/{chunk-65TG6EVD.mjs → chunk-HYXZRCZW.mjs} +1 -0
- package/dist/chunk-HYXZRCZW.mjs.map +1 -0
- package/dist/{chunk-SJ2Z6ZOG.mjs → chunk-JX5YLRCU.mjs} +1 -0
- package/dist/chunk-JX5YLRCU.mjs.map +1 -0
- package/dist/{chunk-2R7F2GL7.mjs → chunk-NV3KR5Y7.mjs} +2 -2
- package/dist/chunk-NV3KR5Y7.mjs.map +1 -0
- package/dist/{chunk-KMCIHW76.mjs → chunk-OQ7MNEYW.mjs} +4 -3
- package/dist/chunk-OQ7MNEYW.mjs.map +1 -0
- package/dist/codeBlock/index.js +1 -0
- package/dist/codeBlock/index.js.map +1 -0
- package/dist/codeBlock/index.mjs +3 -2
- package/dist/codeBlock/index.mjs.map +1 -0
- package/dist/collapsible/index.js +1 -0
- package/dist/collapsible/index.js.map +1 -0
- package/dist/collapsible/index.mjs +2 -1
- package/dist/collapsible/index.mjs.map +1 -0
- package/dist/colorPicker/index.js +2 -2
- package/dist/colorPicker/index.js.map +1 -0
- package/dist/colorPicker/index.mjs +3 -2
- package/dist/colorPicker/index.mjs.map +1 -0
- package/dist/combobox/index.js +4 -4
- package/dist/combobox/index.js.map +1 -0
- package/dist/combobox/index.mjs +5 -5
- package/dist/combobox/index.mjs.map +1 -0
- package/dist/command/index.js +1 -0
- package/dist/command/index.js.map +1 -0
- package/dist/command/index.mjs +2 -1
- package/dist/command/index.mjs.map +1 -0
- package/dist/copyrights/index.js +1 -0
- package/dist/copyrights/index.js.map +1 -0
- package/dist/copyrights/index.mjs +1 -0
- package/dist/copyrights/index.mjs.map +1 -0
- package/dist/count/index.js +1 -0
- package/dist/count/index.js.map +1 -0
- package/dist/count/index.mjs +1 -0
- package/dist/count/index.mjs.map +1 -0
- package/dist/dataTable/index.js +28 -36
- package/dist/dataTable/index.js.map +1 -0
- package/dist/dataTable/index.mjs +29 -37
- package/dist/dataTable/index.mjs.map +1 -0
- package/dist/destroyableCard/index.js +3 -2
- package/dist/destroyableCard/index.js.map +1 -0
- package/dist/destroyableCard/index.mjs +4 -3
- package/dist/destroyableCard/index.mjs.map +1 -0
- package/dist/dialog/index.js +1 -0
- package/dist/dialog/index.js.map +1 -0
- package/dist/dialog/index.mjs +2 -1
- package/dist/dialog/index.mjs.map +1 -0
- package/dist/docsLayout/index.js +3 -2
- package/dist/docsLayout/index.js.map +1 -0
- package/dist/docsLayout/index.mjs +4 -3
- package/dist/docsLayout/index.mjs.map +1 -0
- package/dist/docsSidebar/index.js +3 -2
- package/dist/docsSidebar/index.js.map +1 -0
- package/dist/docsSidebar/index.mjs +4 -3
- package/dist/docsSidebar/index.mjs.map +1 -0
- package/dist/dropdownMenu/index.js +1 -0
- package/dist/dropdownMenu/index.js.map +1 -0
- package/dist/dropdownMenu/index.mjs +2 -1
- package/dist/dropdownMenu/index.mjs.map +1 -0
- package/dist/elements/index.js +2 -2
- package/dist/elements/index.mjs +2 -2
- package/dist/fileDropzone/index.js +12 -12
- package/dist/fileDropzone/index.js.map +1 -0
- package/dist/fileDropzone/index.mjs +13 -13
- package/dist/fileDropzone/index.mjs.map +1 -0
- package/dist/fileUploader/index.js +2 -2
- package/dist/fileUploader/index.js.map +1 -0
- package/dist/fileUploader/index.mjs +2 -2
- package/dist/fileUploader/index.mjs.map +1 -0
- package/dist/glow/index.js +18 -24
- package/dist/glow/index.js.map +1 -0
- package/dist/glow/index.mjs +18 -24
- package/dist/glow/index.mjs.map +1 -0
- package/dist/index.js +2 -2
- package/dist/index.mjs +2 -2
- package/dist/input/index.js +3 -3
- package/dist/input/index.js.map +1 -0
- package/dist/input/index.mjs +4 -4
- package/dist/input/index.mjs.map +1 -0
- package/dist/interfaceSettings/index.js +5 -6
- package/dist/interfaceSettings/index.js.map +1 -0
- package/dist/interfaceSettings/index.mjs +6 -7
- package/dist/interfaceSettings/index.mjs.map +1 -0
- package/dist/label/index.js +1 -0
- package/dist/label/index.js.map +1 -0
- package/dist/label/index.mjs +2 -1
- package/dist/label/index.mjs.map +1 -0
- package/dist/loading/index.js +1 -0
- package/dist/loading/index.js.map +1 -0
- package/dist/loading/index.mjs +2 -1
- package/dist/loading/index.mjs.map +1 -0
- package/dist/logos/index.js +1 -0
- package/dist/logos/index.js.map +1 -0
- package/dist/logos/index.mjs +1 -0
- package/dist/logos/index.mjs.map +1 -0
- package/dist/navbar/index.js +3 -3
- package/dist/navbar/index.js.map +1 -0
- package/dist/navbar/index.mjs +4 -4
- package/dist/navbar/index.mjs.map +1 -0
- package/dist/navigationMenu/index.js +1 -0
- package/dist/navigationMenu/index.js.map +1 -0
- package/dist/navigationMenu/index.mjs +2 -1
- package/dist/navigationMenu/index.mjs.map +1 -0
- package/dist/pagination/index.js +1 -0
- package/dist/pagination/index.js.map +1 -0
- package/dist/pagination/index.mjs +2 -1
- package/dist/pagination/index.mjs.map +1 -0
- package/dist/passwordInput/index.js +3 -3
- package/dist/passwordInput/index.js.map +1 -0
- package/dist/passwordInput/index.mjs +4 -4
- package/dist/passwordInput/index.mjs.map +1 -0
- package/dist/phoneInput/index.js +6 -10
- package/dist/phoneInput/index.js.map +1 -0
- package/dist/phoneInput/index.mjs +7 -11
- package/dist/phoneInput/index.mjs.map +1 -0
- package/dist/pinInput/index.js +4 -3
- package/dist/pinInput/index.js.map +1 -0
- package/dist/pinInput/index.mjs +5 -4
- package/dist/pinInput/index.mjs.map +1 -0
- package/dist/popover/index.js +1 -0
- package/dist/popover/index.js.map +1 -0
- package/dist/popover/index.mjs +2 -1
- package/dist/popover/index.mjs.map +1 -0
- package/dist/progress/index.js +1 -0
- package/dist/progress/index.js.map +1 -0
- package/dist/progress/index.mjs +2 -1
- package/dist/progress/index.mjs.map +1 -0
- package/dist/progressCircle/index.js +3 -2
- package/dist/progressCircle/index.js.map +1 -0
- package/dist/progressCircle/index.mjs +4 -3
- package/dist/progressCircle/index.mjs.map +1 -0
- package/dist/radio/index.js +5 -6
- package/dist/radio/index.js.map +1 -0
- package/dist/radio/index.mjs +6 -7
- package/dist/radio/index.mjs.map +1 -0
- package/dist/scrollArea/index.js +1 -0
- package/dist/scrollArea/index.js.map +1 -0
- package/dist/scrollArea/index.mjs +2 -1
- package/dist/scrollArea/index.mjs.map +1 -0
- package/dist/scrollIndicator/index.js +2 -2
- package/dist/scrollIndicator/index.js.map +1 -0
- package/dist/scrollIndicator/index.mjs +2 -2
- package/dist/scrollIndicator/index.mjs.map +1 -0
- package/dist/select/index.js +3 -6
- package/dist/select/index.js.map +1 -0
- package/dist/select/index.mjs +4 -7
- package/dist/select/index.mjs.map +1 -0
- package/dist/separator/index.js +1 -0
- package/dist/separator/index.js.map +1 -0
- package/dist/separator/index.mjs +2 -1
- package/dist/separator/index.mjs.map +1 -0
- package/dist/sheet/index.js +1 -0
- package/dist/sheet/index.js.map +1 -0
- package/dist/sheet/index.mjs +2 -1
- package/dist/sheet/index.mjs.map +1 -0
- package/dist/sidebar/index.js +1 -0
- package/dist/sidebar/index.js.map +1 -0
- package/dist/sidebar/index.mjs +2 -1
- package/dist/sidebar/index.mjs.map +1 -0
- package/dist/signature/index.js +12 -31
- package/dist/signature/index.js.map +1 -0
- package/dist/signature/index.mjs +13 -32
- package/dist/signature/index.mjs.map +1 -0
- package/dist/simpleTable/index.js +15 -18
- package/dist/simpleTable/index.js.map +1 -0
- package/dist/simpleTable/index.mjs +16 -19
- package/dist/simpleTable/index.mjs.map +1 -0
- package/dist/skeleton/index.js +1 -0
- package/dist/skeleton/index.js.map +1 -0
- package/dist/skeleton/index.mjs +2 -1
- package/dist/skeleton/index.mjs.map +1 -0
- package/dist/slider/index.js +1 -0
- package/dist/slider/index.js.map +1 -0
- package/dist/slider/index.mjs +2 -1
- package/dist/slider/index.mjs.map +1 -0
- package/dist/sortButton/index.js +1 -0
- package/dist/sortButton/index.js.map +1 -0
- package/dist/sortButton/index.mjs +2 -1
- package/dist/sortButton/index.mjs.map +1 -0
- package/dist/splitButton/index.js +1 -0
- package/dist/splitButton/index.js.map +1 -0
- package/dist/splitButton/index.mjs +2 -1
- package/dist/splitButton/index.mjs.map +1 -0
- package/dist/stats/index.js +1 -0
- package/dist/stats/index.js.map +1 -0
- package/dist/stats/index.mjs +1 -0
- package/dist/stats/index.mjs.map +1 -0
- package/dist/stopPropagationWrapper/index.js +1 -0
- package/dist/stopPropagationWrapper/index.js.map +1 -0
- package/dist/stopPropagationWrapper/index.mjs +1 -0
- package/dist/stopPropagationWrapper/index.mjs.map +1 -0
- package/dist/switch/index.js +2 -2
- package/dist/switch/index.js.map +1 -0
- package/dist/switch/index.mjs +3 -3
- package/dist/switch/index.mjs.map +1 -0
- package/dist/table/index.js +1 -0
- package/dist/table/index.js.map +1 -0
- package/dist/table/index.mjs +2 -1
- package/dist/table/index.mjs.map +1 -0
- package/dist/tabs/index.js +1 -0
- package/dist/tabs/index.js.map +1 -0
- package/dist/tabs/index.mjs +2 -1
- package/dist/tabs/index.mjs.map +1 -0
- package/dist/textarea/index.js +5 -4
- package/dist/textarea/index.js.map +1 -0
- package/dist/textarea/index.mjs +6 -5
- package/dist/textarea/index.mjs.map +1 -0
- package/dist/toast/index.js +3 -2
- package/dist/toast/index.js.map +1 -0
- package/dist/toast/index.mjs +3 -2
- package/dist/toast/index.mjs.map +1 -0
- package/dist/toaster/index.js +10 -9
- package/dist/toaster/index.js.map +1 -0
- package/dist/toaster/index.mjs +3 -2
- package/dist/toaster/index.mjs.map +1 -0
- package/dist/tooltip/index.js +1 -0
- package/dist/tooltip/index.js.map +1 -0
- package/dist/tooltip/index.mjs +1 -0
- package/dist/tooltip/index.mjs.map +1 -0
- package/package.json +1 -1
package/dist/radio/index.js
CHANGED
@@ -152,7 +152,6 @@ var Radio = ({
|
|
152
152
|
onChange,
|
153
153
|
...props
|
154
154
|
}) => {
|
155
|
-
var _a, _b, _c;
|
156
155
|
const [selectedOption, setSelectedOption] = (0, import_react2.useState)(props.defaultValue);
|
157
156
|
let activeTabStyle = "hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary hawa-active dark:hawa-bg-primary";
|
158
157
|
let inactiveTabStyle = "hawa-inline-block hawa-w-full hawa-transition-all hover:hawa-bg-muted hawa-bg-primary-foreground dark:hover:hawa-text-white";
|
@@ -176,8 +175,7 @@ var Radio = ({
|
|
176
175
|
);
|
177
176
|
const parentRef = (0, import_react2.useRef)(null);
|
178
177
|
(0, import_react2.useEffect)(() => {
|
179
|
-
|
180
|
-
const parentNode = (_a2 = parentRef.current) == null ? void 0 : _a2.parentNode;
|
178
|
+
const parentNode = parentRef.current?.parentNode;
|
181
179
|
if (parentNode) {
|
182
180
|
const dir = window.getComputedStyle(parentNode).direction;
|
183
181
|
setParentDirection(dir);
|
@@ -198,14 +196,14 @@ var Radio = ({
|
|
198
196
|
{
|
199
197
|
ref: parentRef,
|
200
198
|
className: cn(
|
201
|
-
props.options &&
|
199
|
+
props.options && props.options?.length > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
|
202
200
|
"hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium",
|
203
201
|
orientationStyle[orientation],
|
204
202
|
widthStyle[width],
|
205
203
|
tabsContainerClassName
|
206
204
|
)
|
207
205
|
},
|
208
|
-
|
206
|
+
props.options?.map((opt, o) => /* @__PURE__ */ import_react2.default.createElement(
|
209
207
|
"li",
|
210
208
|
{
|
211
209
|
"aria-current": "page",
|
@@ -259,7 +257,7 @@ var Radio = ({
|
|
259
257
|
)
|
260
258
|
))));
|
261
259
|
case "cards":
|
262
|
-
return /* @__PURE__ */ import_react2.default.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") },
|
260
|
+
return /* @__PURE__ */ import_react2.default.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options?.map((opt, o) => /* @__PURE__ */ import_react2.default.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ import_react2.default.createElement(
|
263
261
|
"input",
|
264
262
|
{
|
265
263
|
type: "radio",
|
@@ -329,3 +327,4 @@ var Radio = ({
|
|
329
327
|
0 && (module.exports = {
|
330
328
|
Radio
|
331
329
|
});
|
330
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../elements/radio/index.ts","../../elements/radio/Radio.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["export * from \"./Radio\";\n","import React, { useState, FC, useRef, useEffect } from \"react\";\n\nimport { DirectionType, OrientationType } from \"../../types/commonTypes\";\nimport { cn } from \"@util/index\";\nimport { Label, LabelProps } from \"../label/Label\";\n\nexport type RadioOptionsTypes = {\n value: any;\n label: any;\n disabled?: any;\n sublabel?: any;\n icon?: any;\n};\n\ntype RadioTypes = {\n orientation?: OrientationType;\n design?: \"default\" | \"tabs\" | \"cards\" | \"bordered\";\n width?: \"default\" | \"full\" | \"none\";\n size?: \"default\" | \"lg\" | \"sm\" | \"xs\";\n name?: string;\n options: RadioOptionsTypes[];\n onChange?: any;\n defaultValue?: any;\n direction?: DirectionType;\n helperText?: string;\n labelProps?: LabelProps;\n label?: string;\n tabsContainerClassName?: string;\n};\nexport const Radio: FC<RadioTypes> = ({\n design = \"default\",\n width = \"default\",\n size = \"default\",\n orientation = \"horizontal\",\n name,\n labelProps,\n tabsContainerClassName,\n onChange,\n ...props\n}) => {\n const [selectedOption, setSelectedOption] = useState(props.defaultValue);\n let activeTabStyle =\n \"hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary hawa-active dark:hawa-bg-primary\";\n let inactiveTabStyle =\n \"hawa-inline-block hawa-w-full hawa-transition-all hover:hawa-bg-muted hawa-bg-primary-foreground dark:hover:hawa-text-white\";\n // hawa-bg-primary/5\n let orientationStyle = {\n horizontal: \"hawa-flex hawa-flex-row\",\n vertical: \"hawa-flex hawa-flex-col\"\n };\n\n let tabSizeStyle = {\n default: \"hawa-py-2 hawa-px-4 hawa-text-sm\",\n lg: \"hawa-py-2 hawa-px-4\",\n sm: \"hawa-p-1.5 hawa-text-xs\",\n xs: \"hawa-p-1 hawa-text-[10px]\"\n };\n let widthStyle = {\n none: \"\",\n default: \"hawa-max-w-fit\",\n full: \"hawa-w-full\"\n };\n const [parentDirection, setParentDirection] = React.useState<string | null>(\n null\n );\n const parentRef = useRef<HTMLUListElement>(null);\n\n useEffect(() => {\n const parentNode = parentRef.current?.parentNode as HTMLElement | null;\n if (parentNode) {\n const dir = window.getComputedStyle(parentNode).direction;\n setParentDirection(dir);\n }\n });\n\n const handleChange = (opt: RadioOptionsTypes) => {\n setSelectedOption(opt.value);\n if (onChange) {\n // use the more generic onChange prop\n onChange(opt.value); // You can pass the entire option or just the value\n } else {\n console.log(\"onChange was not provided\");\n }\n };\n switch (design) {\n case \"tabs\":\n return (\n <ul\n ref={parentRef}\n className={cn(\n props.options && props.options?.length > 2\n ? \"hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap\"\n : \"\",\n \"hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium\",\n orientationStyle[orientation],\n widthStyle[width],\n tabsContainerClassName\n )}\n >\n {props.options?.map((opt: any, o) => (\n <li\n aria-current=\"page\"\n onClick={() => handleChange(opt)}\n className={cn(\n \"hawa-w-full hawa-cursor-pointer \",\n orientation === \"horizontal\" &&\n parentDirection === \"ltr\" &&\n \"hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r\",\n orientation === \"horizontal\" &&\n parentDirection === \"rtl\" &&\n \"hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l\",\n orientation === \"vertical\" &&\n \"hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b\",\n tabSizeStyle[size],\n \"hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 \",\n selectedOption === opt.value ? activeTabStyle : inactiveTabStyle\n )}\n key={o}\n >\n {opt.icon && opt.icon}\n {opt.label}\n </li>\n ))}\n </ul>\n );\n case \"bordered\":\n return (\n <div className={cn(orientationStyle[orientation], \"hawa-gap-4\")}>\n {props.options &&\n props.options.map((opt, i) => (\n <div key={i} className=\"hawa-w-full hawa-rounded hawa-border\">\n <div\n className={cn(\n \"radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all\",\n props.direction === \"rtl\"\n ? \"margin-left right-19px\"\n : \"margin-right left-23px\"\n )}\n key={i + 1}\n >\n <input\n disabled={opt.disabled}\n id={opt.value.toString()}\n type=\"radio\"\n value={opt.value}\n name={name}\n onChange={() => handleChange(opt)}\n />\n <label\n htmlFor={opt.value.toString()}\n className={cn(\n \"hawa-ml-2 hawa-w-full hawa-select-none hawa-p-4 hawa-pl-3 hawa-text-sm hawa-font-medium hawa-text-black dark:hawa-text-white\",\n opt.disabled\n ? \"hawa-opacity-50\"\n : \"hawa-cursor-pointer hawa-text-gray-900\"\n )}\n >\n {opt.label}\n </label>\n </div>\n </div>\n ))}\n </div>\n );\n case \"cards\":\n return (\n <ul className={cn(orientationStyle[orientation], \"hawa-gap-4\")}>\n {props.options?.map((opt: any, o) => (\n <li key={o} onClick={() => handleChange(opt)}>\n <input\n type=\"radio\"\n id={opt.value.toString()}\n name={name}\n value={opt.value.toString()}\n className=\"hawa-peer hawa-hidden\"\n required\n disabled={opt.disabled}\n />\n <label\n htmlFor={opt.value.toString()}\n className={cn(\n \"hawa-inline-flex hawa-h-full hawa-w-full hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-gray-200 hawa-bg-white hawa-p-5 hawa-text-gray-500 peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-gray-400 dark:peer-checked:hawa-text-primary\",\n opt.disabled\n ? \"hawa-opacity-50\"\n : \"hawa-cursor-pointer hover:hawa-bg-gray-100 hover:hawa-text-gray-600 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-gray-300\"\n )}\n >\n <div className=\"hawa-block hawa-h-full hawa-w-full\">\n <div className=\"hawa-w-full hawa-text-lg hawa-font-semibold\">\n {opt.label}\n </div>\n <div className=\"hawa-w-full\">{opt.sublabel}</div>\n </div>\n </label>\n </li>\n ))}\n </ul>\n );\n\n default:\n return (\n <div className=\"hawa-flex hawa-flex-col hawa-gap-2\">\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n <div className={cn(orientationStyle[orientation], \"hawa-gap-2\")}>\n {props.options &&\n props.options.map((opt, i) => (\n <div\n className={cn(\n \"radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all\",\n props.direction === \"rtl\"\n ? \"margin-left right-3px\"\n : \"margin-right left-3px\"\n )}\n key={i + 1}\n >\n <input\n // TODO: spread the usual radio props\n disabled={opt.disabled}\n id={opt.value.toString()}\n type=\"radio\"\n value={opt.value}\n name={name}\n onChange={() => handleChange(opt)}\n />\n <label\n htmlFor={opt.value.toString()}\n className={cn(\n \"hawa-text-sm hawa-font-medium dark:hawa-text-white\",\n opt.disabled\n ? \"hawa-text-gray-400\"\n : \"hawa-cursor-pointer hawa-text-gray-900\"\n )}\n >\n {opt.label}\n </label>\n </div>\n ))}\n </div>\n <p\n className={cn(\n \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n props.helperText\n ? \"hawa-h-4 hawa-opacity-100\"\n : \"hawa-h-0 hawa-opacity-0\"\n )}\n >\n {props.helperText}\n </p>\n </div>\n );\n }\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 * as React from \"react\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n hint?: React.ReactNode;\n hintSide?: PositionType;\n htmlFor?: string;\n required?: boolean;\n};\n\nconst Label = React.forwardRef<\n HTMLLabelElement,\n React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n <label\n ref={ref}\n className={cn(\n \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n className\n )}\n {...props}\n >\n {children}\n {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n </label>\n {hint && (\n <Tooltip\n content={hint}\n side={hintSide}\n triggerProps={{\n tabIndex: -1,\n onClick: (event) => event.preventDefault()\n }}\n >\n <div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n <path d=\"M12 17h.01\" />\n </svg>\n </div>\n </Tooltip>\n )}\n </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-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 {...props}\n />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n /** Controls the open state of the tooltip. */\n open?: any;\n /** Specifies the side where the tooltip will appear. */\n side?: PositionType;\n /** Content to be displayed within the tooltip. */\n content?: any;\n /** Elements to which the tooltip is anchored. */\n children?: any;\n /** Sets the default open state of the tooltip. */\n defaultOpen?: any;\n /** Event handler for open state changes. */\n onOpenChange?: any;\n /** Duration of the delay before the tooltip appears. */\n delayDuration?: any;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n open,\n content,\n children,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider\n delayDuration={delayDuration}\n {...providerProps}\n >\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent side={side} align=\"center\" {...contentProps}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n"],"mappings":"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","names":["import_react","React","React","React"]}
|
package/dist/radio/index.mjs
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import {
|
2
2
|
cn
|
3
|
-
} from "../chunk-
|
3
|
+
} from "../chunk-CBRGWUZG.mjs";
|
4
4
|
|
5
5
|
// elements/radio/Radio.tsx
|
6
6
|
import React3, { useState, useRef, useEffect } from "react";
|
@@ -113,7 +113,6 @@ var Radio = ({
|
|
113
113
|
onChange,
|
114
114
|
...props
|
115
115
|
}) => {
|
116
|
-
var _a, _b, _c;
|
117
116
|
const [selectedOption, setSelectedOption] = useState(props.defaultValue);
|
118
117
|
let activeTabStyle = "hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary hawa-active dark:hawa-bg-primary";
|
119
118
|
let inactiveTabStyle = "hawa-inline-block hawa-w-full hawa-transition-all hover:hawa-bg-muted hawa-bg-primary-foreground dark:hover:hawa-text-white";
|
@@ -137,8 +136,7 @@ var Radio = ({
|
|
137
136
|
);
|
138
137
|
const parentRef = useRef(null);
|
139
138
|
useEffect(() => {
|
140
|
-
|
141
|
-
const parentNode = (_a2 = parentRef.current) == null ? void 0 : _a2.parentNode;
|
139
|
+
const parentNode = parentRef.current?.parentNode;
|
142
140
|
if (parentNode) {
|
143
141
|
const dir = window.getComputedStyle(parentNode).direction;
|
144
142
|
setParentDirection(dir);
|
@@ -159,14 +157,14 @@ var Radio = ({
|
|
159
157
|
{
|
160
158
|
ref: parentRef,
|
161
159
|
className: cn(
|
162
|
-
props.options &&
|
160
|
+
props.options && props.options?.length > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
|
163
161
|
"hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium",
|
164
162
|
orientationStyle[orientation],
|
165
163
|
widthStyle[width],
|
166
164
|
tabsContainerClassName
|
167
165
|
)
|
168
166
|
},
|
169
|
-
|
167
|
+
props.options?.map((opt, o) => /* @__PURE__ */ React3.createElement(
|
170
168
|
"li",
|
171
169
|
{
|
172
170
|
"aria-current": "page",
|
@@ -220,7 +218,7 @@ var Radio = ({
|
|
220
218
|
)
|
221
219
|
))));
|
222
220
|
case "cards":
|
223
|
-
return /* @__PURE__ */ React3.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") },
|
221
|
+
return /* @__PURE__ */ React3.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options?.map((opt, o) => /* @__PURE__ */ React3.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ React3.createElement(
|
224
222
|
"input",
|
225
223
|
{
|
226
224
|
type: "radio",
|
@@ -289,3 +287,4 @@ var Radio = ({
|
|
289
287
|
export {
|
290
288
|
Radio
|
291
289
|
};
|
290
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../elements/radio/Radio.tsx","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState, FC, useRef, useEffect } from \"react\";\n\nimport { DirectionType, OrientationType } from \"../../types/commonTypes\";\nimport { cn } from \"@util/index\";\nimport { Label, LabelProps } from \"../label/Label\";\n\nexport type RadioOptionsTypes = {\n value: any;\n label: any;\n disabled?: any;\n sublabel?: any;\n icon?: any;\n};\n\ntype RadioTypes = {\n orientation?: OrientationType;\n design?: \"default\" | \"tabs\" | \"cards\" | \"bordered\";\n width?: \"default\" | \"full\" | \"none\";\n size?: \"default\" | \"lg\" | \"sm\" | \"xs\";\n name?: string;\n options: RadioOptionsTypes[];\n onChange?: any;\n defaultValue?: any;\n direction?: DirectionType;\n helperText?: string;\n labelProps?: LabelProps;\n label?: string;\n tabsContainerClassName?: string;\n};\nexport const Radio: FC<RadioTypes> = ({\n design = \"default\",\n width = \"default\",\n size = \"default\",\n orientation = \"horizontal\",\n name,\n labelProps,\n tabsContainerClassName,\n onChange,\n ...props\n}) => {\n const [selectedOption, setSelectedOption] = useState(props.defaultValue);\n let activeTabStyle =\n \"hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary hawa-active dark:hawa-bg-primary\";\n let inactiveTabStyle =\n \"hawa-inline-block hawa-w-full hawa-transition-all hover:hawa-bg-muted hawa-bg-primary-foreground dark:hover:hawa-text-white\";\n // hawa-bg-primary/5\n let orientationStyle = {\n horizontal: \"hawa-flex hawa-flex-row\",\n vertical: \"hawa-flex hawa-flex-col\"\n };\n\n let tabSizeStyle = {\n default: \"hawa-py-2 hawa-px-4 hawa-text-sm\",\n lg: \"hawa-py-2 hawa-px-4\",\n sm: \"hawa-p-1.5 hawa-text-xs\",\n xs: \"hawa-p-1 hawa-text-[10px]\"\n };\n let widthStyle = {\n none: \"\",\n default: \"hawa-max-w-fit\",\n full: \"hawa-w-full\"\n };\n const [parentDirection, setParentDirection] = React.useState<string | null>(\n null\n );\n const parentRef = useRef<HTMLUListElement>(null);\n\n useEffect(() => {\n const parentNode = parentRef.current?.parentNode as HTMLElement | null;\n if (parentNode) {\n const dir = window.getComputedStyle(parentNode).direction;\n setParentDirection(dir);\n }\n });\n\n const handleChange = (opt: RadioOptionsTypes) => {\n setSelectedOption(opt.value);\n if (onChange) {\n // use the more generic onChange prop\n onChange(opt.value); // You can pass the entire option or just the value\n } else {\n console.log(\"onChange was not provided\");\n }\n };\n switch (design) {\n case \"tabs\":\n return (\n <ul\n ref={parentRef}\n className={cn(\n props.options && props.options?.length > 2\n ? \"hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap\"\n : \"\",\n \"hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium\",\n orientationStyle[orientation],\n widthStyle[width],\n tabsContainerClassName\n )}\n >\n {props.options?.map((opt: any, o) => (\n <li\n aria-current=\"page\"\n onClick={() => handleChange(opt)}\n className={cn(\n \"hawa-w-full hawa-cursor-pointer \",\n orientation === \"horizontal\" &&\n parentDirection === \"ltr\" &&\n \"hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r\",\n orientation === \"horizontal\" &&\n parentDirection === \"rtl\" &&\n \"hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l\",\n orientation === \"vertical\" &&\n \"hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b\",\n tabSizeStyle[size],\n \"hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 \",\n selectedOption === opt.value ? activeTabStyle : inactiveTabStyle\n )}\n key={o}\n >\n {opt.icon && opt.icon}\n {opt.label}\n </li>\n ))}\n </ul>\n );\n case \"bordered\":\n return (\n <div className={cn(orientationStyle[orientation], \"hawa-gap-4\")}>\n {props.options &&\n props.options.map((opt, i) => (\n <div key={i} className=\"hawa-w-full hawa-rounded hawa-border\">\n <div\n className={cn(\n \"radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all\",\n props.direction === \"rtl\"\n ? \"margin-left right-19px\"\n : \"margin-right left-23px\"\n )}\n key={i + 1}\n >\n <input\n disabled={opt.disabled}\n id={opt.value.toString()}\n type=\"radio\"\n value={opt.value}\n name={name}\n onChange={() => handleChange(opt)}\n />\n <label\n htmlFor={opt.value.toString()}\n className={cn(\n \"hawa-ml-2 hawa-w-full hawa-select-none hawa-p-4 hawa-pl-3 hawa-text-sm hawa-font-medium hawa-text-black dark:hawa-text-white\",\n opt.disabled\n ? \"hawa-opacity-50\"\n : \"hawa-cursor-pointer hawa-text-gray-900\"\n )}\n >\n {opt.label}\n </label>\n </div>\n </div>\n ))}\n </div>\n );\n case \"cards\":\n return (\n <ul className={cn(orientationStyle[orientation], \"hawa-gap-4\")}>\n {props.options?.map((opt: any, o) => (\n <li key={o} onClick={() => handleChange(opt)}>\n <input\n type=\"radio\"\n id={opt.value.toString()}\n name={name}\n value={opt.value.toString()}\n className=\"hawa-peer hawa-hidden\"\n required\n disabled={opt.disabled}\n />\n <label\n htmlFor={opt.value.toString()}\n className={cn(\n \"hawa-inline-flex hawa-h-full hawa-w-full hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-gray-200 hawa-bg-white hawa-p-5 hawa-text-gray-500 peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-gray-400 dark:peer-checked:hawa-text-primary\",\n opt.disabled\n ? \"hawa-opacity-50\"\n : \"hawa-cursor-pointer hover:hawa-bg-gray-100 hover:hawa-text-gray-600 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-gray-300\"\n )}\n >\n <div className=\"hawa-block hawa-h-full hawa-w-full\">\n <div className=\"hawa-w-full hawa-text-lg hawa-font-semibold\">\n {opt.label}\n </div>\n <div className=\"hawa-w-full\">{opt.sublabel}</div>\n </div>\n </label>\n </li>\n ))}\n </ul>\n );\n\n default:\n return (\n <div className=\"hawa-flex hawa-flex-col hawa-gap-2\">\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n <div className={cn(orientationStyle[orientation], \"hawa-gap-2\")}>\n {props.options &&\n props.options.map((opt, i) => (\n <div\n className={cn(\n \"radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all\",\n props.direction === \"rtl\"\n ? \"margin-left right-3px\"\n : \"margin-right left-3px\"\n )}\n key={i + 1}\n >\n <input\n // TODO: spread the usual radio props\n disabled={opt.disabled}\n id={opt.value.toString()}\n type=\"radio\"\n value={opt.value}\n name={name}\n onChange={() => handleChange(opt)}\n />\n <label\n htmlFor={opt.value.toString()}\n className={cn(\n \"hawa-text-sm hawa-font-medium dark:hawa-text-white\",\n opt.disabled\n ? \"hawa-text-gray-400\"\n : \"hawa-cursor-pointer hawa-text-gray-900\"\n )}\n >\n {opt.label}\n </label>\n </div>\n ))}\n </div>\n <p\n className={cn(\n \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n props.helperText\n ? \"hawa-h-4 hawa-opacity-100\"\n : \"hawa-h-0 hawa-opacity-0\"\n )}\n >\n {props.helperText}\n </p>\n </div>\n );\n }\n};\n","import * as React from \"react\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n hint?: React.ReactNode;\n hintSide?: PositionType;\n htmlFor?: string;\n required?: boolean;\n};\n\nconst Label = React.forwardRef<\n HTMLLabelElement,\n React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n <label\n ref={ref}\n className={cn(\n \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n className\n )}\n {...props}\n >\n {children}\n {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n </label>\n {hint && (\n <Tooltip\n content={hint}\n side={hintSide}\n triggerProps={{\n tabIndex: -1,\n onClick: (event) => event.preventDefault()\n }}\n >\n <div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n <path d=\"M12 17h.01\" />\n </svg>\n </div>\n </Tooltip>\n )}\n </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-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 {...props}\n />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n /** Controls the open state of the tooltip. */\n open?: any;\n /** Specifies the side where the tooltip will appear. */\n side?: PositionType;\n /** Content to be displayed within the tooltip. */\n content?: any;\n /** Elements to which the tooltip is anchored. */\n children?: any;\n /** Sets the default open state of the tooltip. */\n defaultOpen?: any;\n /** Event handler for open state changes. */\n onOpenChange?: any;\n /** Duration of the delay before the tooltip appears. */\n delayDuration?: any;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n open,\n content,\n children,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider\n delayDuration={delayDuration}\n {...providerProps}\n >\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent side={side} align=\"center\" {...contentProps}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n"],"mappings":"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","names":["React","React","React"]}
|
package/dist/scrollArea/index.js
CHANGED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../elements/scrollArea/index.ts","../../elements/scrollArea/ScrollArea.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./ScrollArea\";\n","import * as React from \"react\";\n\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\ntype ScrollAreaProps = React.ComponentPropsWithoutRef<\n typeof ScrollAreaPrimitive.Root\n> & {\n orientation?: OrientationType;\n};\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n ScrollAreaProps\n>(({ className, children, orientation = \"vertical\", ...props }, ref) => (\n <ScrollAreaPrimitive.Root\n ref={ref}\n className={cn(\"hawa-relative hawa-overflow-hidden\", className)}\n {...props}\n >\n <ScrollAreaPrimitive.Viewport className=\"hawa-h-full hawa-w-full hawa-rounded-[inherit]\">\n {children}\n </ScrollAreaPrimitive.Viewport>\n <ScrollBar orientation={orientation} />\n <ScrollAreaPrimitive.Corner />\n </ScrollAreaPrimitive.Root>\n));\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n <ScrollAreaPrimitive.ScrollAreaScrollbar\n ref={ref}\n orientation={orientation}\n className={cn(\n \"hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors\",\n orientation === \"vertical\" &&\n \"hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]\",\n orientation === \"horizontal\" &&\n \"hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]\",\n className\n )}\n {...props}\n >\n <ScrollAreaPrimitive.ScrollAreaThumb\n className={cn(\n \"hawa-relative hawa-rounded-full hawa-bg-border\",\n orientation === \"vertical\" && \"hawa-flex-1\"\n )}\n />\n </ScrollAreaPrimitive.ScrollAreaScrollbar>\n));\n\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;\n\nexport { ScrollArea, ScrollBar };\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;AAAA;;;ACAA,YAAuB;AAEvB,0BAAqC;;;ACFrC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADSA,IAAM,aAAmB,iBAGvB,CAAC,EAAE,WAAW,UAAU,cAAc,YAAY,GAAG,MAAM,GAAG,QAC9D;AAAA,EAAqB;AAAA,EAApB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,sCAAsC,SAAS;AAAA,IAC5D,GAAG;AAAA;AAAA,EAEJ,oCAAqB,8BAApB,EAA6B,WAAU,oDACrC,QACH;AAAA,EACA,oCAAC,aAAU,aAA0B;AAAA,EACrC,oCAAqB,4BAApB,IAA2B;AAC9B,CACD;AAED,WAAW,cAAkC,yBAAK;AAElD,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,cAAc,YAAY,GAAG,MAAM,GAAG,QACpD;AAAA,EAAqB;AAAA,EAApB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,cACd;AAAA,MACF,gBAAgB,gBACd;AAAA,MACF;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AAAA,EAEJ;AAAA,IAAqB;AAAA,IAApB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,cAAc;AAAA,MAChC;AAAA;AAAA,EACF;AACF,CACD;AAED,UAAU,cAAkC,wCAAoB;","names":[]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../elements/scrollArea/ScrollArea.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\ntype ScrollAreaProps = React.ComponentPropsWithoutRef<\n typeof ScrollAreaPrimitive.Root\n> & {\n orientation?: OrientationType;\n};\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n ScrollAreaProps\n>(({ className, children, orientation = \"vertical\", ...props }, ref) => (\n <ScrollAreaPrimitive.Root\n ref={ref}\n className={cn(\"hawa-relative hawa-overflow-hidden\", className)}\n {...props}\n >\n <ScrollAreaPrimitive.Viewport className=\"hawa-h-full hawa-w-full hawa-rounded-[inherit]\">\n {children}\n </ScrollAreaPrimitive.Viewport>\n <ScrollBar orientation={orientation} />\n <ScrollAreaPrimitive.Corner />\n </ScrollAreaPrimitive.Root>\n));\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n <ScrollAreaPrimitive.ScrollAreaScrollbar\n ref={ref}\n orientation={orientation}\n className={cn(\n \"hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors\",\n orientation === \"vertical\" &&\n \"hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]\",\n orientation === \"horizontal\" &&\n \"hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]\",\n className\n )}\n {...props}\n >\n <ScrollAreaPrimitive.ScrollAreaThumb\n className={cn(\n \"hawa-relative hawa-rounded-full hawa-bg-border\",\n orientation === \"vertical\" && \"hawa-flex-1\"\n )}\n />\n </ScrollAreaPrimitive.ScrollAreaScrollbar>\n));\n\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AAEvB,YAAY,yBAAyB;AAYrC,IAAM,aAAmB,iBAGvB,CAAC,EAAE,WAAW,UAAU,cAAc,YAAY,GAAG,MAAM,GAAG,QAC9D;AAAA,EAAqB;AAAA,EAApB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,sCAAsC,SAAS;AAAA,IAC5D,GAAG;AAAA;AAAA,EAEJ,oCAAqB,8BAApB,EAA6B,WAAU,oDACrC,QACH;AAAA,EACA,oCAAC,aAAU,aAA0B;AAAA,EACrC,oCAAqB,4BAApB,IAA2B;AAC9B,CACD;AAED,WAAW,cAAkC,yBAAK;AAElD,IAAM,YAAkB,iBAGtB,CAAC,EAAE,WAAW,cAAc,YAAY,GAAG,MAAM,GAAG,QACpD;AAAA,EAAqB;AAAA,EAApB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,cACd;AAAA,MACF,gBAAgB,gBACd;AAAA,MACF;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AAAA,EAEJ;AAAA,IAAqB;AAAA,IAApB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,cAAc;AAAA,MAChC;AAAA;AAAA,EACF;AACF,CACD;AAED,UAAU,cAAkC,wCAAoB;","names":[]}
|
@@ -56,8 +56,7 @@ var ScrollIndicator = ({
|
|
56
56
|
return;
|
57
57
|
anchor.current.addEventListener("scroll", onScroll);
|
58
58
|
return () => {
|
59
|
-
|
60
|
-
(_a = anchor.current) == null ? void 0 : _a.removeEventListener("scroll", onScroll);
|
59
|
+
anchor.current?.removeEventListener("scroll", onScroll);
|
61
60
|
};
|
62
61
|
}, [anchor]);
|
63
62
|
return /* @__PURE__ */ import_react.default.createElement(
|
@@ -78,3 +77,4 @@ var ScrollIndicator = ({
|
|
78
77
|
0 && (module.exports = {
|
79
78
|
ScrollIndicator
|
80
79
|
});
|
80
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../elements/scrollIndicator/index.ts","../../elements/scrollIndicator/ScrollIndicator.tsx"],"sourcesContent":["export * from \"./ScrollIndicator\";\n","import React, { FC, RefObject, useState, useEffect } from \"react\";\n\ntype ScrollIndicatorProps = {\n anchor: RefObject<HTMLInputElement>;\n inContainer?: boolean;\n};\n\nexport const ScrollIndicator: FC<ScrollIndicatorProps> = ({\n anchor,\n inContainer = false\n}) => {\n const [scrollPercentage, setScrollPercentage] = useState(0);\n\n const onScroll = () => {\n const scrollElement = anchor.current;\n if (scrollElement) {\n const { scrollTop, scrollHeight, clientHeight } = scrollElement;\n const totalScroll = scrollHeight - clientHeight;\n const scrollPosition = scrollTop;\n const percentageScrolled = (scrollPosition / totalScroll) * 100;\n setScrollPercentage(percentageScrolled);\n }\n };\n\n useEffect(() => {\n if (!anchor.current) return;\n\n anchor.current.addEventListener(\"scroll\", onScroll);\n\n return () => {\n anchor.current?.removeEventListener(\"scroll\", onScroll);\n };\n }, [anchor]);\n\n return (\n <div\n style={{\n position: inContainer ? \"absolute\" : \"fixed\",\n top: 0,\n left: 0,\n height: \"5px\",\n width: `${scrollPercentage}%`,\n backgroundColor: \"hsl(var(--primary))\"\n }}\n ></div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA0D;AAOnD,IAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,cAAc;AAChB,MAAM;AACJ,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAS,CAAC;AAE1D,QAAM,WAAW,MAAM;AACrB,UAAM,gBAAgB,OAAO;AAC7B,QAAI,eAAe;AACjB,YAAM,EAAE,WAAW,cAAc,aAAa,IAAI;AAClD,YAAM,cAAc,eAAe;AACnC,YAAM,iBAAiB;AACvB,YAAM,qBAAsB,iBAAiB,cAAe;AAC5D,0BAAoB,kBAAkB;AAAA,IACxC;AAAA,EACF;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,OAAO;AAAS;AAErB,WAAO,QAAQ,iBAAiB,UAAU,QAAQ;AAElD,WAAO,MAAM;AACX,aAAO,SAAS,oBAAoB,UAAU,QAAQ;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU,cAAc,aAAa;AAAA,QACrC,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO,GAAG,gBAAgB;AAAA,QAC1B,iBAAiB;AAAA,MACnB;AAAA;AAAA,EACD;AAEL;","names":["React"]}
|
@@ -20,8 +20,7 @@ var ScrollIndicator = ({
|
|
20
20
|
return;
|
21
21
|
anchor.current.addEventListener("scroll", onScroll);
|
22
22
|
return () => {
|
23
|
-
|
24
|
-
(_a = anchor.current) == null ? void 0 : _a.removeEventListener("scroll", onScroll);
|
23
|
+
anchor.current?.removeEventListener("scroll", onScroll);
|
25
24
|
};
|
26
25
|
}, [anchor]);
|
27
26
|
return /* @__PURE__ */ React.createElement(
|
@@ -41,3 +40,4 @@ var ScrollIndicator = ({
|
|
41
40
|
export {
|
42
41
|
ScrollIndicator
|
43
42
|
};
|
43
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../elements/scrollIndicator/ScrollIndicator.tsx"],"sourcesContent":["import React, { FC, RefObject, useState, useEffect } from \"react\";\n\ntype ScrollIndicatorProps = {\n anchor: RefObject<HTMLInputElement>;\n inContainer?: boolean;\n};\n\nexport const ScrollIndicator: FC<ScrollIndicatorProps> = ({\n anchor,\n inContainer = false\n}) => {\n const [scrollPercentage, setScrollPercentage] = useState(0);\n\n const onScroll = () => {\n const scrollElement = anchor.current;\n if (scrollElement) {\n const { scrollTop, scrollHeight, clientHeight } = scrollElement;\n const totalScroll = scrollHeight - clientHeight;\n const scrollPosition = scrollTop;\n const percentageScrolled = (scrollPosition / totalScroll) * 100;\n setScrollPercentage(percentageScrolled);\n }\n };\n\n useEffect(() => {\n if (!anchor.current) return;\n\n anchor.current.addEventListener(\"scroll\", onScroll);\n\n return () => {\n anchor.current?.removeEventListener(\"scroll\", onScroll);\n };\n }, [anchor]);\n\n return (\n <div\n style={{\n position: inContainer ? \"absolute\" : \"fixed\",\n top: 0,\n left: 0,\n height: \"5px\",\n width: `${scrollPercentage}%`,\n backgroundColor: \"hsl(var(--primary))\"\n }}\n ></div>\n );\n};\n"],"mappings":";AAAA,OAAO,SAAwB,UAAU,iBAAiB;AAOnD,IAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,cAAc;AAChB,MAAM;AACJ,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,CAAC;AAE1D,QAAM,WAAW,MAAM;AACrB,UAAM,gBAAgB,OAAO;AAC7B,QAAI,eAAe;AACjB,YAAM,EAAE,WAAW,cAAc,aAAa,IAAI;AAClD,YAAM,cAAc,eAAe;AACnC,YAAM,iBAAiB;AACvB,YAAM,qBAAsB,iBAAiB,cAAe;AAC5D,0BAAoB,kBAAkB;AAAA,IACxC;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,OAAO;AAAS;AAErB,WAAO,QAAQ,iBAAiB,UAAU,QAAQ;AAElD,WAAO,MAAM;AACX,aAAO,SAAS,oBAAoB,UAAU,QAAQ;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU,cAAc,aAAa;AAAA,QACrC,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO,GAAG,gBAAgB;AAAA,QAC1B,iBAAiB;AAAA,MACnB;AAAA;AAAA,EACD;AAEL;","names":[]}
|
package/dist/select/index.js
CHANGED
@@ -177,8 +177,7 @@ var Select = ({
|
|
177
177
|
...props
|
178
178
|
}) => {
|
179
179
|
const NoOption = () => {
|
180
|
-
|
181
|
-
return /* @__PURE__ */ import_react3.default.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
|
180
|
+
return /* @__PURE__ */ import_react3.default.createElement("div", null, props.texts?.noOptions ?? "No Items Found");
|
182
181
|
};
|
183
182
|
const Control = ({ children, innerProps, innerRef }) => {
|
184
183
|
return /* @__PURE__ */ import_react3.default.createElement(
|
@@ -280,10 +279,7 @@ var Select = ({
|
|
280
279
|
) : /* @__PURE__ */ import_react3.default.createElement(
|
281
280
|
import_creatable.default,
|
282
281
|
{
|
283
|
-
formatCreateLabel: (inputValue) => {
|
284
|
-
var _a, _b;
|
285
|
-
return `${(_b = (_a = props.texts) == null ? void 0 : _a.createLabel) != null ? _b : "Create"} "${inputValue}"`;
|
286
|
-
},
|
282
|
+
formatCreateLabel: (inputValue) => `${props.texts?.createLabel ?? "Create"} "${inputValue}"`,
|
287
283
|
classNames: {
|
288
284
|
container: () => cn(
|
289
285
|
"hawa-rounded",
|
@@ -323,3 +319,4 @@ var Select = ({
|
|
323
319
|
0 && (module.exports = {
|
324
320
|
Select
|
325
321
|
});
|
322
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../elements/select/index.ts","../../elements/select/Select.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx","../../elements/skeleton/Skeleton.tsx"],"sourcesContent":["export * from \"./Select\";","import React, { FC } from \"react\";\nimport ReactSelect, { MenuProps } from \"react-select\";\nimport CreatableSelect from \"react-select/creatable\";\n\nimport clsx from \"clsx\";\n\nimport { cn } from \"@util/index\";\nimport { Label, LabelProps } from \"../label\";\nimport { Skeleton } from \"../skeleton\";\n\ntype ControlTypes = {\n cx: any;\n children: any;\n getStyles: any;\n innerProps: any;\n innerRef: any;\n size?: \"small\" | \"normal\" | \"large\";\n};\n\n// The options container\ntype MenuTypes = MenuProps & {\n cx: any;\n children: any;\n getStyles: any;\n innerProps: any;\n innerRef: any;\n};\n\n// The single options\ntype OptionTypes = {\n cx: any;\n children: any;\n getStyles: any;\n innerProps: any;\n innerRef: any;\n size?: \"small\" | \"normal\" | \"large\";\n};\n\nexport type SelectOptionProps = {\n value: any;\n label: any;\n};\n\ntype SelectTypes = {\n label?: string;\n hideHelperText?: boolean;\n options?: SelectOptionProps[];\n labelKey?: string;\n isCreatable?: boolean;\n isClearable?: boolean;\n isMulti?: boolean;\n isSearchable?: boolean;\n controlClassNames?: string;\n containerClassNames?: string;\n onChange?: any;\n helperText?: string;\n onInputChange?: any;\n native?: any;\n width?: \"full\" | \"small\" | \"fit\";\n value?: any;\n children?: any;\n getOptionLabel?: any;\n disabled?: boolean;\n defaultValue?: any;\n handleCreateOption?: () => void;\n placeholder?: string;\n hideIndicator?: boolean;\n phoneCode?: boolean;\n isLoading?: any;\n labelProps?: LabelProps;\n texts?: {\n noOptions?: string;\n createLabel?: string;\n };\n};\n\nexport const Select: FC<SelectTypes> = ({\n labelProps,\n labelKey = \"label\",\n ...props\n}) => {\n const NoOption = () => {\n return <div>{props.texts?.noOptions ?? \"No Items Found\"}</div>;\n };\n const Control: FC<ControlTypes> = ({ children, innerProps, innerRef }) => {\n return (\n <div\n ref={innerRef}\n className={clsx(\n \"hawa-flex hawa-w-full hawa-rounded hawa-border hawa-bg-background hawa-p-2 hawa-text-sm hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500\"\n )}\n {...innerProps}\n >\n {children}\n </div>\n );\n };\n const Option: FC<OptionTypes> = ({ children, innerProps, innerRef }) => {\n return (\n <div\n ref={innerRef}\n className={cn(\n \"hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hawa-transition-all hover:hawa-bg-primary hover:hawa-text-primary-foreground\"\n )}\n {...innerProps}\n >\n {children}\n </div>\n );\n };\n const Menu: FC<MenuTypes> = ({\n cx,\n children,\n getStyles,\n innerProps,\n innerRef,\n ...menuProps\n }) => {\n const menuOpen = menuProps.selectProps.menuIsOpen;\n return (\n <div\n className={cn(\n \"dark:dark-shadow hawa-absolute hawa-z-10 -hawa-mx-1 hawa-mt-1 hawa-flex hawa-flex-col hawa-justify-start hawa-rounded hawa-border hawa-bg-background hawa-shadow-md\",\n props.phoneCode ? \"hawa-p-1.5\" : \"hawa-w-full hawa-p-1.5\",\n menuOpen && \"hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 \"\n )}\n ref={innerRef}\n {...innerProps}\n // {...props}\n >\n {children}\n </div>\n );\n };\n\n return (\n <div\n className={cn(\n \"hawa-flex hawa-flex-col hawa-gap-2\",\n props.width === \"fit\" ? \"hawa-w-fit\" : \"hawa-w-full\"\n )}\n >\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n {props.isLoading ? (\n <Skeleton className=\"hawa-h-[40px] hawa-w-full\" />\n ) : !props.isCreatable ? (\n // TODO: enable keyboard to go to the next item in the list\n <ReactSelect\n noOptionsMessage={NoOption}\n classNames={{\n control: () =>\n cn(\n props.phoneCode && \"hawa-rounded-r-none\",\n props.controlClassNames\n ),\n container: () =>\n cn(\n \"hawa-rounded\",\n props.phoneCode &&\n \"hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px] hawa-p-0 hawa-rounded-r-none hawa-h-[40px] \",\n\n \"hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-0 hawa-px-1 hawa-text-sm\",\n props.disabled\n ? \"hawa-cursor-not-allowed\"\n : \"hawa-cursor-pointer\"\n ),\n placeholder: () =>\n \"hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1\",\n valueContainer: () => \"hawa-text-foreground hawa-px-1 \",\n singleValue: () => \"hawa-text-foreground\",\n indicatorsContainer: () =>\n cn(\n \"hawa-cursor-pointer hawa-text-muted-foreground\",\n props.hideIndicator ? \"hawa-invisible\" : \"hawa-px-1\"\n )\n }}\n unstyled\n autoFocus\n components={\n props.hideIndicator\n ? { Option, Menu, IndicatorsContainer: () => null }\n : { Option, Menu }\n }\n onChange={(newValue: any, action) => props.onChange(newValue, action)}\n options={props.options}\n getOptionLabel={props.getOptionLabel}\n defaultValue={props.defaultValue}\n placeholder={props.placeholder}\n isDisabled={props.disabled}\n isClearable={props.isClearable}\n isMulti={props.isMulti}\n isSearchable={props.isSearchable}\n />\n ) : (\n <CreatableSelect\n formatCreateLabel={(inputValue) =>\n `${props.texts?.createLabel ?? \"Create\"} \"${inputValue}\"`\n }\n classNames={{\n container: () =>\n cn(\n \"hawa-rounded\",\n props.disabled\n ? \"hawa-cursor-not-allowed\"\n : \"hawa-cursor-pointer\"\n ),\n placeholder: () => \"hawa-px-2 hawa-text-muted-foreground\",\n input: () => \"hawa-text-primary hawa-px-2\",\n valueContainer: () =>\n \"hawa-text-white dark:hawa-text-muted-foreground\",\n singleValue: () => \"hawa-text-black dark:hawa-text-white hawa-px-2\",\n indicatorsContainer: () =>\n \" hawa-px-2 hawa-cursor-pointer hawa-text-muted-foreground\"\n }}\n unstyled\n options={props.options}\n isClearable={props.isClearable}\n isMulti={props.isMulti}\n isSearchable={props.isSearchable}\n placeholder={props.placeholder}\n onCreateOption={props.handleCreateOption}\n onChange={(newValue, action) => props.onChange(newValue, action)}\n components={{ Control, Option, Menu }}\n onInputChange={(newValue, action) =>\n props.onInputChange(newValue, action)\n }\n />\n )}\n {!props.hideHelperText && (\n <p\n className={cn(\n \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n props.helperText\n ? \"hawa-h-4 hawa-opacity-100\"\n : \"hawa-h-0 hawa-opacity-0\"\n )}\n >\n {props.helperText}\n </p>\n )}\n </div>\n );\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 * as React from \"react\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n hint?: React.ReactNode;\n hintSide?: PositionType;\n htmlFor?: string;\n required?: boolean;\n};\n\nconst Label = React.forwardRef<\n HTMLLabelElement,\n React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n <label\n ref={ref}\n className={cn(\n \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n className\n )}\n {...props}\n >\n {children}\n {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n </label>\n {hint && (\n <Tooltip\n content={hint}\n side={hintSide}\n triggerProps={{\n tabIndex: -1,\n onClick: (event) => event.preventDefault()\n }}\n >\n <div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n <path d=\"M12 17h.01\" />\n </svg>\n </div>\n </Tooltip>\n )}\n </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-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 {...props}\n />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n /** Controls the open state of the tooltip. */\n open?: any;\n /** Specifies the side where the tooltip will appear. */\n side?: PositionType;\n /** Content to be displayed within the tooltip. */\n content?: any;\n /** Elements to which the tooltip is anchored. */\n children?: any;\n /** Sets the default open state of the tooltip. */\n defaultOpen?: any;\n /** Event handler for open state changes. */\n onOpenChange?: any;\n /** Duration of the delay before the tooltip appears. */\n delayDuration?: any;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n open,\n content,\n children,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider\n delayDuration={delayDuration}\n {...providerProps}\n >\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent side={side} align=\"center\" {...contentProps}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n animation?: \"none\" | \"pulse\" | \"shimmer\";\n content?: any;\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n ...props\n}: SkeletonProps) {\n const animationStyles = {\n none: \"hawa-rounded hawa-bg-muted\",\n pulse: \"hawa-animate-pulse hawa-rounded hawa-bg-muted\",\n shimmer:\n \"hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10\"\n };\n return (\n <div\n className={cn(\n animationStyles[animation],\n content &&\n \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\",\n className\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\n"],"mappings":"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","names":["import_react","import_clsx","React","React","import_react","React","React","clsx","ReactSelect","CreatableSelect"]}
|
package/dist/select/index.mjs
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import {
|
2
2
|
cn
|
3
|
-
} from "../chunk-
|
3
|
+
} from "../chunk-CBRGWUZG.mjs";
|
4
4
|
|
5
5
|
// elements/select/Select.tsx
|
6
6
|
import React4 from "react";
|
@@ -138,8 +138,7 @@ var Select = ({
|
|
138
138
|
...props
|
139
139
|
}) => {
|
140
140
|
const NoOption = () => {
|
141
|
-
|
142
|
-
return /* @__PURE__ */ React4.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
|
141
|
+
return /* @__PURE__ */ React4.createElement("div", null, props.texts?.noOptions ?? "No Items Found");
|
143
142
|
};
|
144
143
|
const Control = ({ children, innerProps, innerRef }) => {
|
145
144
|
return /* @__PURE__ */ React4.createElement(
|
@@ -241,10 +240,7 @@ var Select = ({
|
|
241
240
|
) : /* @__PURE__ */ React4.createElement(
|
242
241
|
CreatableSelect,
|
243
242
|
{
|
244
|
-
formatCreateLabel: (inputValue) => {
|
245
|
-
var _a, _b;
|
246
|
-
return `${(_b = (_a = props.texts) == null ? void 0 : _a.createLabel) != null ? _b : "Create"} "${inputValue}"`;
|
247
|
-
},
|
243
|
+
formatCreateLabel: (inputValue) => `${props.texts?.createLabel ?? "Create"} "${inputValue}"`,
|
248
244
|
classNames: {
|
249
245
|
container: () => cn(
|
250
246
|
"hawa-rounded",
|
@@ -283,3 +279,4 @@ var Select = ({
|
|
283
279
|
export {
|
284
280
|
Select
|
285
281
|
};
|
282
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../elements/select/Select.tsx","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx","../../elements/skeleton/Skeleton.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport ReactSelect, { MenuProps } from \"react-select\";\nimport CreatableSelect from \"react-select/creatable\";\n\nimport clsx from \"clsx\";\n\nimport { cn } from \"@util/index\";\nimport { Label, LabelProps } from \"../label\";\nimport { Skeleton } from \"../skeleton\";\n\ntype ControlTypes = {\n cx: any;\n children: any;\n getStyles: any;\n innerProps: any;\n innerRef: any;\n size?: \"small\" | \"normal\" | \"large\";\n};\n\n// The options container\ntype MenuTypes = MenuProps & {\n cx: any;\n children: any;\n getStyles: any;\n innerProps: any;\n innerRef: any;\n};\n\n// The single options\ntype OptionTypes = {\n cx: any;\n children: any;\n getStyles: any;\n innerProps: any;\n innerRef: any;\n size?: \"small\" | \"normal\" | \"large\";\n};\n\nexport type SelectOptionProps = {\n value: any;\n label: any;\n};\n\ntype SelectTypes = {\n label?: string;\n hideHelperText?: boolean;\n options?: SelectOptionProps[];\n labelKey?: string;\n isCreatable?: boolean;\n isClearable?: boolean;\n isMulti?: boolean;\n isSearchable?: boolean;\n controlClassNames?: string;\n containerClassNames?: string;\n onChange?: any;\n helperText?: string;\n onInputChange?: any;\n native?: any;\n width?: \"full\" | \"small\" | \"fit\";\n value?: any;\n children?: any;\n getOptionLabel?: any;\n disabled?: boolean;\n defaultValue?: any;\n handleCreateOption?: () => void;\n placeholder?: string;\n hideIndicator?: boolean;\n phoneCode?: boolean;\n isLoading?: any;\n labelProps?: LabelProps;\n texts?: {\n noOptions?: string;\n createLabel?: string;\n };\n};\n\nexport const Select: FC<SelectTypes> = ({\n labelProps,\n labelKey = \"label\",\n ...props\n}) => {\n const NoOption = () => {\n return <div>{props.texts?.noOptions ?? \"No Items Found\"}</div>;\n };\n const Control: FC<ControlTypes> = ({ children, innerProps, innerRef }) => {\n return (\n <div\n ref={innerRef}\n className={clsx(\n \"hawa-flex hawa-w-full hawa-rounded hawa-border hawa-bg-background hawa-p-2 hawa-text-sm hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500\"\n )}\n {...innerProps}\n >\n {children}\n </div>\n );\n };\n const Option: FC<OptionTypes> = ({ children, innerProps, innerRef }) => {\n return (\n <div\n ref={innerRef}\n className={cn(\n \"hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hawa-transition-all hover:hawa-bg-primary hover:hawa-text-primary-foreground\"\n )}\n {...innerProps}\n >\n {children}\n </div>\n );\n };\n const Menu: FC<MenuTypes> = ({\n cx,\n children,\n getStyles,\n innerProps,\n innerRef,\n ...menuProps\n }) => {\n const menuOpen = menuProps.selectProps.menuIsOpen;\n return (\n <div\n className={cn(\n \"dark:dark-shadow hawa-absolute hawa-z-10 -hawa-mx-1 hawa-mt-1 hawa-flex hawa-flex-col hawa-justify-start hawa-rounded hawa-border hawa-bg-background hawa-shadow-md\",\n props.phoneCode ? \"hawa-p-1.5\" : \"hawa-w-full hawa-p-1.5\",\n menuOpen && \"hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 \"\n )}\n ref={innerRef}\n {...innerProps}\n // {...props}\n >\n {children}\n </div>\n );\n };\n\n return (\n <div\n className={cn(\n \"hawa-flex hawa-flex-col hawa-gap-2\",\n props.width === \"fit\" ? \"hawa-w-fit\" : \"hawa-w-full\"\n )}\n >\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n {props.isLoading ? (\n <Skeleton className=\"hawa-h-[40px] hawa-w-full\" />\n ) : !props.isCreatable ? (\n // TODO: enable keyboard to go to the next item in the list\n <ReactSelect\n noOptionsMessage={NoOption}\n classNames={{\n control: () =>\n cn(\n props.phoneCode && \"hawa-rounded-r-none\",\n props.controlClassNames\n ),\n container: () =>\n cn(\n \"hawa-rounded\",\n props.phoneCode &&\n \"hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px] hawa-p-0 hawa-rounded-r-none hawa-h-[40px] \",\n\n \"hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-0 hawa-px-1 hawa-text-sm\",\n props.disabled\n ? \"hawa-cursor-not-allowed\"\n : \"hawa-cursor-pointer\"\n ),\n placeholder: () =>\n \"hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1\",\n valueContainer: () => \"hawa-text-foreground hawa-px-1 \",\n singleValue: () => \"hawa-text-foreground\",\n indicatorsContainer: () =>\n cn(\n \"hawa-cursor-pointer hawa-text-muted-foreground\",\n props.hideIndicator ? \"hawa-invisible\" : \"hawa-px-1\"\n )\n }}\n unstyled\n autoFocus\n components={\n props.hideIndicator\n ? { Option, Menu, IndicatorsContainer: () => null }\n : { Option, Menu }\n }\n onChange={(newValue: any, action) => props.onChange(newValue, action)}\n options={props.options}\n getOptionLabel={props.getOptionLabel}\n defaultValue={props.defaultValue}\n placeholder={props.placeholder}\n isDisabled={props.disabled}\n isClearable={props.isClearable}\n isMulti={props.isMulti}\n isSearchable={props.isSearchable}\n />\n ) : (\n <CreatableSelect\n formatCreateLabel={(inputValue) =>\n `${props.texts?.createLabel ?? \"Create\"} \"${inputValue}\"`\n }\n classNames={{\n container: () =>\n cn(\n \"hawa-rounded\",\n props.disabled\n ? \"hawa-cursor-not-allowed\"\n : \"hawa-cursor-pointer\"\n ),\n placeholder: () => \"hawa-px-2 hawa-text-muted-foreground\",\n input: () => \"hawa-text-primary hawa-px-2\",\n valueContainer: () =>\n \"hawa-text-white dark:hawa-text-muted-foreground\",\n singleValue: () => \"hawa-text-black dark:hawa-text-white hawa-px-2\",\n indicatorsContainer: () =>\n \" hawa-px-2 hawa-cursor-pointer hawa-text-muted-foreground\"\n }}\n unstyled\n options={props.options}\n isClearable={props.isClearable}\n isMulti={props.isMulti}\n isSearchable={props.isSearchable}\n placeholder={props.placeholder}\n onCreateOption={props.handleCreateOption}\n onChange={(newValue, action) => props.onChange(newValue, action)}\n components={{ Control, Option, Menu }}\n onInputChange={(newValue, action) =>\n props.onInputChange(newValue, action)\n }\n />\n )}\n {!props.hideHelperText && (\n <p\n className={cn(\n \"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all\",\n props.helperText\n ? \"hawa-h-4 hawa-opacity-100\"\n : \"hawa-h-0 hawa-opacity-0\"\n )}\n >\n {props.helperText}\n </p>\n )}\n </div>\n );\n};\n","import * as React from \"react\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Tooltip } from \"../tooltip\";\n\nexport type LabelProps = {\n hint?: React.ReactNode;\n hintSide?: PositionType;\n htmlFor?: string;\n required?: boolean;\n};\n\nconst Label = React.forwardRef<\n HTMLLabelElement,\n React.LabelHTMLAttributes<HTMLLabelElement> & LabelProps\n>(({ className, hint, hintSide, required, children, ...props }, ref) => (\n <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all\">\n <label\n ref={ref}\n className={cn(\n \"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70\",\n className\n )}\n {...props}\n >\n {children}\n {required && <span className=\"hawa-mx-0.5 hawa-text-red-500\">*</span>}\n </label>\n {hint && (\n <Tooltip\n content={hint}\n side={hintSide}\n triggerProps={{\n tabIndex: -1,\n onClick: (event) => event.preventDefault()\n }}\n >\n <div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"hawa-h-[14px] hawa-w-[14px] hawa-cursor-help\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" />\n <path d=\"M12 17h.01\" />\n </svg>\n </div>\n </Tooltip>\n )}\n </div>\n));\n\nLabel.displayName = \"Label\";\n\nexport { Label };\n","import React from \"react\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n <TooltipPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n className={cn(\n \"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-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 {...props}\n />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nconst TooltipArrow = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <TooltipPrimitive.Arrow ref={ref} className={cn(className)} {...props} />\n));\nTooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;\n\ntype TooltipTypes = {\n /** Controls the open state of the tooltip. */\n open?: any;\n /** Specifies the side where the tooltip will appear. */\n side?: PositionType;\n /** Content to be displayed within the tooltip. */\n content?: any;\n /** Elements to which the tooltip is anchored. */\n children?: any;\n /** Sets the default open state of the tooltip. */\n defaultOpen?: any;\n /** Event handler for open state changes. */\n onOpenChange?: any;\n /** Duration of the delay before the tooltip appears. */\n delayDuration?: any;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n open,\n content,\n children,\n defaultOpen,\n onOpenChange,\n triggerProps,\n contentProps,\n providerProps,\n delayDuration = 300,\n ...props\n}) => {\n return (\n <TooltipPrimitive.TooltipProvider\n delayDuration={delayDuration}\n {...providerProps}\n >\n <TooltipPrimitive.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent side={side} align=\"center\" {...contentProps}>\n {content}\n </TooltipContent>\n </TooltipPrimitive.Root>\n </TooltipPrimitive.TooltipProvider>\n );\n};\n\nexport { Tooltip };\n","import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\ninterface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n className?: string;\n animation?: \"none\" | \"pulse\" | \"shimmer\";\n content?: any;\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n ...props\n}: SkeletonProps) {\n const animationStyles = {\n none: \"hawa-rounded hawa-bg-muted\",\n pulse: \"hawa-animate-pulse hawa-rounded hawa-bg-muted\",\n shimmer:\n \"hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10\"\n };\n return (\n <div\n className={cn(\n animationStyles[animation],\n content &&\n \"hawa-flex hawa-flex-col hawa-items-center hawa-justify-center\",\n className\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\n"],"mappings":";;;;;AAAA,OAAOA,YAAmB;AAC1B,OAAO,iBAAgC;AACvC,OAAO,qBAAqB;AAE5B,OAAO,UAAU;;;ACJjB,YAAYC,YAAW;;;ACAvB,OAAO,WAAW;AAElB,YAAY,sBAAsB;AAMlC,IAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,aAAa,GAAG,GAAG,MAAM,GAAG,QAC1C;AAAA,EAAkB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,eAAe,cAA+B,yBAAQ;AAEtD,IAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oCAAkB,wBAAjB,EAAuB,KAAU,WAAW,GAAG,SAAS,GAAI,GAAG,OAAO,CACxE;AACD,aAAa,cAA+B,uBAAM;AAsBlD,IAAM,UAAiD,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC;AAAA,MACC,GAAG;AAAA;AAAA,IAEJ;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,MAEJ,oCAAkB,0BAAjB,EAA0B,GAAG,gBAC3B,QACH;AAAA,MACA,oCAAC,kBAAe,MAAY,OAAM,UAAU,GAAG,gBAC5C,OACH;AAAA,IACF;AAAA,EACF;AAEJ;;;ADvEA,IAAM,QAAc,kBAGlB,CAAC,EAAE,WAAW,MAAM,UAAU,UAAU,UAAU,GAAG,MAAM,GAAG,QAC9D,qCAAC,SAAI,WAAU,8EACb;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AAAA,EAEH;AAAA,EACA,YAAY,qCAAC,UAAK,WAAU,mCAAgC,GAAC;AAChE,GACC,QACC;AAAA,EAAC;AAAA;AAAA,IACC,SAAS;AAAA,IACT,MAAM;AAAA,IACN,cAAc;AAAA,MACZ,UAAU;AAAA,MACV,SAAS,CAAC,UAAU,MAAM,eAAe;AAAA,IAC3C;AAAA;AAAA,EAEA,qCAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA;AAAA,IAEf,qCAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,IAC/B,qCAAC,UAAK,GAAE,wCAAuC;AAAA,IAC/C,qCAAC,UAAK,GAAE,cAAa;AAAA,EACvB,CACF;AACF,CAEJ,CACD;AAED,MAAM,cAAc;;;AE5DpB,OAAOC,YAAW;AAUlB,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAkB;AAChB,QAAM,kBAAkB;AAAA,IACtB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AACA,SACE,gBAAAC,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,gBAAgB,SAAS;AAAA,QACzB,WACE;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEH,WAAW;AAAA,EACd;AAEJ;;;AHyCO,IAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,MAAM;AACJ,QAAM,WAAW,MAAM;AACrB,WAAO,gBAAAC,OAAA,cAAC,aAAK,MAAM,OAAO,aAAa,gBAAiB;AAAA,EAC1D;AACA,QAAM,UAA4B,CAAC,EAAE,UAAU,YAAY,SAAS,MAAM;AACxE,WACE,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACA,QAAM,SAA0B,CAAC,EAAE,UAAU,YAAY,SAAS,MAAM;AACtE,WACE,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACA,QAAM,OAAsB,CAAC;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,MAAM;AACJ,UAAM,WAAW,UAAU,YAAY;AACvC,WACE,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,MAAM,YAAY,eAAe;AAAA,UACjC,YAAY;AAAA,QACd;AAAA,QACA,KAAK;AAAA,QACJ,GAAG;AAAA;AAAA,MAGH;AAAA,IACH;AAAA,EAEJ;AAEA,SACE,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,MAAM,UAAU,QAAQ,eAAe;AAAA,MACzC;AAAA;AAAA,IAEC,MAAM,SAAS,gBAAAA,OAAA,cAAC,SAAO,GAAG,cAAa,MAAM,KAAM;AAAA,IACnD,MAAM,YACL,gBAAAA,OAAA,cAAC,YAAS,WAAU,6BAA4B,IAC9C,CAAC,MAAM;AAAA;AAAA,MAET,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACC,kBAAkB;AAAA,UAClB,YAAY;AAAA,YACV,SAAS,MACP;AAAA,cACE,MAAM,aAAa;AAAA,cACnB,MAAM;AAAA,YACR;AAAA,YACF,WAAW,MACT;AAAA,cACE;AAAA,cACA,MAAM,aACJ;AAAA,cAEF;AAAA,cACA,MAAM,WACF,4BACA;AAAA,YACN;AAAA,YACF,aAAa,MACX;AAAA,YACF,gBAAgB,MAAM;AAAA,YACtB,aAAa,MAAM;AAAA,YACnB,qBAAqB,MACnB;AAAA,cACE;AAAA,cACA,MAAM,gBAAgB,mBAAmB;AAAA,YAC3C;AAAA,UACJ;AAAA,UACA,UAAQ;AAAA,UACR,WAAS;AAAA,UACT,YACE,MAAM,gBACF,EAAE,QAAQ,MAAM,qBAAqB,MAAM,KAAK,IAChD,EAAE,QAAQ,KAAK;AAAA,UAErB,UAAU,CAAC,UAAe,WAAW,MAAM,SAAS,UAAU,MAAM;AAAA,UACpE,SAAS,MAAM;AAAA,UACf,gBAAgB,MAAM;AAAA,UACtB,cAAc,MAAM;AAAA,UACpB,aAAa,MAAM;AAAA,UACnB,YAAY,MAAM;AAAA,UAClB,aAAa,MAAM;AAAA,UACnB,SAAS,MAAM;AAAA,UACf,cAAc,MAAM;AAAA;AAAA,MACtB;AAAA,QAEA,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,mBAAmB,CAAC,eAClB,GAAG,MAAM,OAAO,eAAe,QAAQ,KAAK,UAAU;AAAA,QAExD,YAAY;AAAA,UACV,WAAW,MACT;AAAA,YACE;AAAA,YACA,MAAM,WACF,4BACA;AAAA,UACN;AAAA,UACF,aAAa,MAAM;AAAA,UACnB,OAAO,MAAM;AAAA,UACb,gBAAgB,MACd;AAAA,UACF,aAAa,MAAM;AAAA,UACnB,qBAAqB,MACnB;AAAA,QACJ;AAAA,QACA,UAAQ;AAAA,QACR,SAAS,MAAM;AAAA,QACf,aAAa,MAAM;AAAA,QACnB,SAAS,MAAM;AAAA,QACf,cAAc,MAAM;AAAA,QACpB,aAAa,MAAM;AAAA,QACnB,gBAAgB,MAAM;AAAA,QACtB,UAAU,CAAC,UAAU,WAAW,MAAM,SAAS,UAAU,MAAM;AAAA,QAC/D,YAAY,EAAE,SAAS,QAAQ,KAAK;AAAA,QACpC,eAAe,CAAC,UAAU,WACxB,MAAM,cAAc,UAAU,MAAM;AAAA;AAAA,IAExC;AAAA,IAED,CAAC,MAAM,kBACN,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,MAAM,aACF,8BACA;AAAA,QACN;AAAA;AAAA,MAEC,MAAM;AAAA,IACT;AAAA,EAEJ;AAEJ;","names":["React","React","React","React","React"]}
|
package/dist/separator/index.js
CHANGED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../elements/separator/index.ts","../../elements/separator/Separator.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Separator\";\n","import * as React from \"react\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\ntype SeparatorProps = {\n className?: string;\n orientation?: OrientationType;\n};\n\nconst Separator: React.FC<SeparatorProps> = ({\n className,\n orientation = \"horizontal\",\n ...props\n}) => (\n <div\n className={cn(\n \"hawa-shrink-0 hawa-bg-border\",\n orientation === \"horizontal\"\n ? \"hawa-h-[1px] hawa-w-full\"\n : \"hawa-h-full hawa-w-[1px]\",\n className\n )}\n {...props}\n />\n);\n\nexport { Separator };\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;;;ADMA,IAAM,YAAsC,CAAC;AAAA,EAC3C;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,eACZ,6BACA;AAAA,MACJ;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN;","names":[]}
|
package/dist/separator/index.mjs
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import {
|
2
2
|
cn
|
3
|
-
} from "../chunk-
|
3
|
+
} from "../chunk-CBRGWUZG.mjs";
|
4
4
|
|
5
5
|
// elements/separator/Separator.tsx
|
6
6
|
import * as React from "react";
|
@@ -22,3 +22,4 @@ var Separator = ({
|
|
22
22
|
export {
|
23
23
|
Separator
|
24
24
|
};
|
25
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../elements/separator/Separator.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\n\ntype SeparatorProps = {\n className?: string;\n orientation?: OrientationType;\n};\n\nconst Separator: React.FC<SeparatorProps> = ({\n className,\n orientation = \"horizontal\",\n ...props\n}) => (\n <div\n className={cn(\n \"hawa-shrink-0 hawa-bg-border\",\n orientation === \"horizontal\"\n ? \"hawa-h-[1px] hawa-w-full\"\n : \"hawa-h-full hawa-w-[1px]\",\n className\n )}\n {...props}\n />\n);\n\nexport { Separator };\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AAWvB,IAAM,YAAsC,CAAC;AAAA,EAC3C;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,eACZ,6BACA;AAAA,MACJ;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN;","names":[]}
|
package/dist/sheet/index.js
CHANGED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../elements/sheet/index.ts","../../elements/sheet/Sheet.tsx","../../util/index.ts"],"sourcesContent":["export * from \"./Sheet\";\n","import * as React from \"react\";\n\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@util/index\";\n\nconst Sheet = SheetPrimitive.Root;\nconst SheetTrigger = SheetPrimitive.Trigger;\nconst SheetClose = SheetPrimitive.Close;\nconst SheetPortal = SheetPrimitive.Portal;\nconst SheetOverlay = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Overlay\n className={cn(\n \"hawa-fixed hawa-inset-0 hawa-z-50 hawa-bg-background/80 hawa-backdrop-blur-sm data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0\",\n className\n )}\n {...props}\n ref={ref}\n />\n));\n\nconst sheetVariants = cva(\n \"hawa-fixed hawa-z-50 hawa-gap-4 hawa-bg-background hawa-p-2 hawa-shadow-lg hawa-transition hawa-ease-in-out data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-duration-300 data-[state=open]:hawa-duration-300\",\n {\n variants: {\n side: {\n top: \"hawa-inset-x-0 hawa-top-0 hawa-border-b data-[state=closed]:hawa-slide-out-to-top data-[state=open]:hawa-slide-in-from-top\",\n bottom:\n \"hawa-inset-x-0 hawa-bottom-0 hawa-border-t data-[state=closed]:hawa-slide-out-to-bottom data-[state=open]:hawa-slide-in-from-bottom\",\n left: \"hawa-inset-y-0 hawa-left-0 hawa-h-full hawa-w-3/4 hawa-border-r data-[state=closed]:hawa-slide-out-to-left data-[state=open]:hawa-slide-in-from-left sm:hawa-max-w-sm\",\n right:\n \"hawa-inset-y-0 hawa-right-0 hawa-h-full hawa-w-3/4 hawa-border-l data-[state=closed]:hawa-slide-out-to-right data-[state=open]:hawa-slide-in-from-right sm:hawa-max-w-sm\"\n }\n },\n defaultVariants: {\n side: \"right\"\n }\n }\n);\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n VariantProps<typeof sheetVariants> {\n hideCloseButton?: boolean;\n persist?: boolean;\n}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Content>,\n SheetContentProps\n>(\n (\n { side = \"right\", className, children, persist, hideCloseButton, ...props },\n ref\n ) => (\n <SheetPortal>\n <SheetOverlay />\n <SheetPrimitive.Content\n ref={ref}\n className={cn(sheetVariants({ side }), className)}\n onPointerDownOutside={(e) => {\n if (persist) {\n e.preventDefault();\n }\n }}\n {...props}\n >\n {children}\n {!hideCloseButton && (\n <SheetPrimitive.Close\n className={cn(\n \"hawa-absolute hawa-rounded-sm hawa-opacity-70 hawa-ring-offset-background hawa-transition-opacity hover:hawa-opacity-100 focus:hawa-outline-none focus:hawa-ring-2 focus:hawa-ring-ring focus:hawa-ring-offset-2 disabled:hawa-pointer-events-none data-[state=open]:hawa-bg-secondary\",\n {\n \"hawa-right-4 hawa-top-4\": side === \"left\" || side === \"bottom\",\n \"hawa-left-4 hawa-top-4\": side === \"right\",\n \"hawa-bottom-4 hawa-right-4\": side === \"top\"\n }\n )}\n >\n <svg\n aria-label=\"Close Icon\"\n aria-hidden=\"true\"\n className=\"hawa-h-5 hawa-w-5\"\n fill=\"currentColor\"\n viewBox=\"0 0 20 20\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n ></path>\n </svg>\n <span className=\"hawa-sr-only\">Close</span>\n </SheetPrimitive.Close>\n )}\n </SheetPrimitive.Content>\n </SheetPortal>\n )\n);\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"hawa-flex hawa-flex-col hawa-space-y-2 hawa-text-center sm:hawa-text-left\",\n className\n )}\n {...props}\n />\n);\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"hawa-flex hawa-flex-col-reverse sm:hawa-flex-row sm:hawa-justify-end sm:hawa-space-x-2\",\n className\n )}\n {...props}\n />\n);\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Title\n ref={ref}\n className={cn(\n \"hawa-text-lg hawa-font-semibold hawa-text-foreground\",\n className\n )}\n {...props}\n />\n));\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Description\n ref={ref}\n className={cn(\"hawa-text-sm hawa-text-muted-foreground\", className)}\n {...props}\n />\n));\n\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\nSheetContent.displayName = SheetPrimitive.Content.displayName;\nSheetHeader.displayName = \"SheetHeader\";\nSheetFooter.displayName = \"SheetFooter\";\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription\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"],"mappings":"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","names":[]}
|
package/dist/sheet/index.mjs
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import {
|
2
2
|
cn
|
3
|
-
} from "../chunk-
|
3
|
+
} from "../chunk-CBRGWUZG.mjs";
|
4
4
|
|
5
5
|
// elements/sheet/Sheet.tsx
|
6
6
|
import * as React from "react";
|
@@ -148,3 +148,4 @@ export {
|
|
148
148
|
SheetTitle,
|
149
149
|
SheetTrigger
|
150
150
|
};
|
151
|
+
//# sourceMappingURL=index.mjs.map
|