@sikka/hawa 0.30.10-next → 0.30.12-next
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/blocks/auth/index.js +1 -1
- package/dist/blocks/auth/index.mjs +1 -1
- package/dist/blocks/index.js +1 -1
- package/dist/blocks/index.mjs +1 -1
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs.map +1 -1
- package/dist/dataTable/index.js +17 -8
- package/dist/dataTable/index.js.map +1 -1
- package/dist/dataTable/index.mjs +17 -8
- package/dist/dataTable/index.mjs.map +1 -1
- package/dist/destroyableCard/index.js.map +1 -1
- package/dist/destroyableCard/index.mjs.map +1 -1
- package/dist/elements/index.d.mts +6 -6
- package/dist/elements/index.d.ts +6 -6
- package/dist/elements/index.js +24 -9
- package/dist/elements/index.mjs +24 -9
- package/dist/index.d.mts +6 -6
- package/dist/index.d.ts +6 -6
- package/dist/index.js +25 -10
- package/dist/index.mjs +25 -10
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs.map +1 -1
- package/dist/passwordInput/index.js.map +1 -1
- package/dist/passwordInput/index.mjs.map +1 -1
- package/dist/simpleTable/index.js +14 -8
- package/dist/simpleTable/index.js.map +1 -1
- package/dist/simpleTable/index.mjs +14 -8
- package/dist/simpleTable/index.mjs.map +1 -1
- package/dist/stats/index.js.map +1 -1
- package/dist/stats/index.mjs.map +1 -1
- package/dist/table/index.d.mts +6 -6
- package/dist/table/index.d.ts +6 -6
- package/dist/table/index.js +7 -7
- package/dist/table/index.js.map +1 -1
- package/dist/table/index.mjs +7 -7
- package/dist/table/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
@@ -2500,7 +2500,6 @@ var Table = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
2500
2500
|
...props
|
2501
2501
|
}
|
2502
2502
|
)));
|
2503
|
-
Table.displayName = "Table";
|
2504
2503
|
var TableHeader = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement(
|
2505
2504
|
"thead",
|
2506
2505
|
{
|
@@ -2509,7 +2508,6 @@ var TableHeader = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
2509
2508
|
...props
|
2510
2509
|
}
|
2511
2510
|
));
|
2512
|
-
TableHeader.displayName = "TableHeader";
|
2513
2511
|
var TableHead = React21.forwardRef(
|
2514
2512
|
({ className, condensed, clickable, dir, ...props }, ref) => /* @__PURE__ */ React21.createElement(
|
2515
2513
|
"th",
|
@@ -2529,9 +2527,7 @@ var TableHead = React21.forwardRef(
|
|
2529
2527
|
}
|
2530
2528
|
)
|
2531
2529
|
);
|
2532
|
-
TableHead.displayName = "TableHead";
|
2533
2530
|
var TableBody = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement("tbody", { ref, className: cn("hawa-border-none", className), ...props }));
|
2534
|
-
TableBody.displayName = "TableBody";
|
2535
2531
|
var TableFooter = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement(
|
2536
2532
|
"tfoot",
|
2537
2533
|
{
|
@@ -2543,7 +2539,6 @@ var TableFooter = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
2543
2539
|
...props
|
2544
2540
|
}
|
2545
2541
|
));
|
2546
|
-
TableFooter.displayName = "TableFooter";
|
2547
2542
|
var TableRow = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement(
|
2548
2543
|
"tr",
|
2549
2544
|
{
|
@@ -2557,7 +2552,6 @@ var TableRow = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__
|
|
2557
2552
|
...props
|
2558
2553
|
}
|
2559
2554
|
));
|
2560
|
-
TableRow.displayName = "TableRow";
|
2561
2555
|
var TableCell = React21.forwardRef(
|
2562
2556
|
({ className, enablePadding = true, padding = "default", ...props }, ref) => {
|
2563
2557
|
let paddingStyles = {
|
@@ -2586,7 +2580,6 @@ var TableCell = React21.forwardRef(
|
|
2586
2580
|
);
|
2587
2581
|
}
|
2588
2582
|
);
|
2589
|
-
TableCell.displayName = "TableCell";
|
2590
2583
|
var TableCaption = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React21.createElement(
|
2591
2584
|
"caption",
|
2592
2585
|
{
|
@@ -2598,6 +2591,13 @@ var TableCaption = React21.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
2598
2591
|
...props
|
2599
2592
|
}
|
2600
2593
|
));
|
2594
|
+
Table.displayName = "Table";
|
2595
|
+
TableRow.displayName = "TableRow";
|
2596
|
+
TableBody.displayName = "TableBody";
|
2597
|
+
TableHead.displayName = "TableHead";
|
2598
|
+
TableCell.displayName = "TableCell";
|
2599
|
+
TableFooter.displayName = "TableFooter";
|
2600
|
+
TableHeader.displayName = "TableHeader";
|
2601
2601
|
TableCaption.displayName = "TableCaption";
|
2602
2602
|
|
2603
2603
|
// elements/dataTable/DataTable.tsx
|
@@ -2650,6 +2650,9 @@ var DataTable = ({
|
|
2650
2650
|
rowSelection,
|
2651
2651
|
expanded
|
2652
2652
|
}
|
2653
|
+
// defaultColumn: {
|
2654
|
+
// maxSize: 200
|
2655
|
+
// }
|
2653
2656
|
});
|
2654
2657
|
const pageText = ((_a = props.texts) == null ? void 0 : _a.page) || "page";
|
2655
2658
|
const itemsPerPageOptions = (_b = props.itemsPerPage) == null ? void 0 : _b.map((item) => ({
|
@@ -2723,7 +2726,10 @@ var DataTable = ({
|
|
2723
2726
|
dir: props.direction,
|
2724
2727
|
condensed: props.condensed,
|
2725
2728
|
clickable: Boolean(isSortable),
|
2726
|
-
key: header.id
|
2729
|
+
key: header.id,
|
2730
|
+
style: {
|
2731
|
+
maxWidth: header.column.columnDef.maxSize
|
2732
|
+
}
|
2727
2733
|
},
|
2728
2734
|
header.isPlaceholder ? null : flexRender(
|
2729
2735
|
header.column.columnDef.header,
|
@@ -2741,6 +2747,9 @@ var DataTable = ({
|
|
2741
2747
|
return /* @__PURE__ */ React22.createElement(
|
2742
2748
|
TableCell,
|
2743
2749
|
{
|
2750
|
+
style: {
|
2751
|
+
maxWidth: cell.column.columnDef.maxSize
|
2752
|
+
},
|
2744
2753
|
dir: props.direction,
|
2745
2754
|
padding: props.condensed ? "condensed" : (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.padding,
|
2746
2755
|
key: cell.id
|
@@ -7087,7 +7096,10 @@ var SimpleTable = ({
|
|
7087
7096
|
{
|
7088
7097
|
condensed: props.condensed,
|
7089
7098
|
dir: props.direction,
|
7090
|
-
key: header.id
|
7099
|
+
key: header.id,
|
7100
|
+
style: {
|
7101
|
+
maxWidth: header.column.columnDef.maxSize
|
7102
|
+
}
|
7091
7103
|
},
|
7092
7104
|
header.isPlaceholder ? null : flexRender2(
|
7093
7105
|
header.column.columnDef.header,
|
@@ -7107,6 +7119,9 @@ var SimpleTable = ({
|
|
7107
7119
|
{
|
7108
7120
|
dir: props.direction,
|
7109
7121
|
padding: props.condensed ? "condensed" : (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.padding,
|
7122
|
+
style: {
|
7123
|
+
maxWidth: cell.column.columnDef.maxSize
|
7124
|
+
},
|
7110
7125
|
key: cell.id
|
7111
7126
|
},
|
7112
7127
|
flexRender2(
|
@@ -10016,7 +10031,7 @@ var RegisterForm = ({
|
|
10016
10031
|
(texts == null ? void 0 : texts.registerText) || "Register"
|
10017
10032
|
),
|
10018
10033
|
props.additionalButtons
|
10019
|
-
)), /* @__PURE__ */ React75.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-1 hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-white" }, /* @__PURE__ */ React75.createElement("span", null, (texts == null ? void 0 : texts.existingUserText) || "Already have an account?"), /* @__PURE__ */ React75.createElement("span", { onClick: props.onRouteToLogin, className: "clickable-link" }, (texts == null ? void 0 : texts.loginText) || "Login")))),
|
10034
|
+
)), props.onRouteToLogin && /* @__PURE__ */ React75.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-1 hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-white" }, /* @__PURE__ */ React75.createElement("span", null, (texts == null ? void 0 : texts.existingUserText) || "Already have an account?"), /* @__PURE__ */ React75.createElement("span", { onClick: props.onRouteToLogin, className: "clickable-link" }, (texts == null ? void 0 : texts.loginText) || "Login")))),
|
10020
10035
|
props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React75.createElement(
|
10021
10036
|
CardFooter,
|
10022
10037
|
{
|
package/dist/input/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/input/index.ts","../../elements/input/Input.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx","../../elements/skeleton/Skeleton.tsx"],"sourcesContent":["export * from \"./Input\";\n","import React, { forwardRef } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { Label, LabelProps } from \"../label/Label\";\nimport { Skeleton } from \"../skeleton/Skeleton\";\n\nexport type TextFieldTypes = React.InputHTMLAttributes<HTMLInputElement> & {\n isLoading?: boolean;\n containerClassName?: string;\n margin?: \"none\" | \"normal\" | \"large\";\n width?: \"small\" | \"normal\" | \"full\" | \"auto\";\n /** The label of the input field */\n label?: any;\n labelProps?: LabelProps;\n hideSeparator?: boolean;\n /** The small red text under the input field to show validation. */\n helperText?: any;\n forceHideHelperText?: boolean;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** The icon inside the input field */\n icon?: any;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n // maxLength?: any;\n iconInside?: React.ReactNode;\n endIcon?: React.ReactNode;\n endIconProps?: { className?: string };\n startIcon?: React.ReactNode;\n placeholder?: React.ReactNode;\n /** Show the count of characters left in the input field. Works along with maxLength prop. */\n showCount?: boolean;\n countPosition?: \"top\" | \"bottom\" | \"center\";\n popup?: boolean;\n popupContent?: React.ReactNode;\n outsidePrefix?: any;\n prefixText?: any;\n};\nexport const Input = forwardRef<HTMLInputElement, TextFieldTypes>(\n (\n {\n margin = \"none\",\n width = \"full\",\n preview = false,\n forceHideHelperText = false,\n labelProps,\n placeholder,\n showCount,\n inputProps,\n countPosition = \"bottom\",\n ...props\n },\n ref\n ) => {\n let marginStyles = {\n none: \"hawa-mb-0\",\n normal: \"hawa-mb-3\",\n large: \"hawa-mb-5\"\n };\n let widthStyles = {\n small: \"hawa-w-full hawa-max-w-2xs\",\n normal: \"hawa-w-1/2\",\n full: \"hawa-w-full\",\n auto: \"\"\n };\n\n let defaultStyle =\n \"hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0\";\n let defaultInputStyle =\n \"hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm \";\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n let newValue = e.target.value;\n\n if (props.prefixText) {\n // If newValue is shorter than prefixText, set newValue to prefixText\n if (newValue.length < props.prefixText.length) {\n newValue = props.prefixText;\n } else {\n // Check if newValue starts with a substring of prefixText\n const isSubstring = props.prefixText.startsWith(newValue);\n\n if (!isSubstring && !newValue.startsWith(props.prefixText)) {\n newValue = `${props.prefixText}${newValue}`;\n }\n }\n }\n\n if (props.onChange) {\n const newEvent = { ...e, target: { ...e.target, value: newValue } };\n props.onChange(newEvent as React.ChangeEvent<HTMLInputElement>);\n }\n };\n\n return (\n <div\n className={cn(\n defaultStyle,\n marginStyles[margin],\n widthStyles[width],\n props.containerClassName,\n \"hawa-w-full hawa-gap-2\"\n )}\n >\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n <div className=\"hawa-flex hawa-flex-row hawa-w-full hawa-items-center \">\n {props.outsidePrefix && (\n <span\n className={cn(\n \"hawa-me-2 hawa-opacity-90\",\n !forceHideHelperText && \"hawa-mb-2\"\n )}\n >\n {props.outsidePrefix}\n </span>\n )}\n {props.isLoading ? (\n <div className=\"hawa-pb-2\">\n <Skeleton className=\"hawa-h-[40px] hawa-w-full\" />\n </div>\n ) : (\n <>\n {!props.hideSeparator && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800\",\n preview ? \"hawa-opacity-100\" : \"hawa-opacity-0\"\n )}\n ></div>\n )}\n <div className=\"hawa-flex hawa-flex-col hawa-w-full hawa-gap-2\">\n <div className={\"hawa-relative\"}>\n {props.startIcon && (\n <div className=\"hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2\">\n {props.startIcon}\n </div>\n )}\n {props.endIcon && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2\",\n props.endIconProps?.className\n )}\n >\n {props.endIcon}\n </div>\n )}\n <input\n required\n dir={props.dir}\n type={props.type}\n value={props.value}\n onChange={handleChange}\n autoComplete={props.autoComplete}\n defaultValue={props.defaultValue}\n placeholder={placeholder}\n disabled={props.disabled || preview}\n style={{ height: 40 }}\n {...inputProps}\n className={cn(\n defaultInputStyle,\n \" focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 dark:hawa-text-white\",\n {\n \"hawa-pe-9\": props.endIcon,\n \"hawa-ps-9\": props.startIcon,\n \"hawa-pe-[60px]\": countPosition === \"center\"\n },\n preview &&\n \"hawa-border-transparent hawa-bg-transparent hawa-px-0\",\n inputProps?.className\n )}\n />\n </div>\n\n {/* Regular helper text */}\n {!forceHideHelperText && (\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 {/* Popover helper text */}\n {!props.disabled && forceHideHelperText && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-0 hawa-top-[47px] hawa-z-20 hawa-translate-y-1/2 hawa-rounded hawa-bg-background hawa-text-start hawa-text-xs hawa-text-helper-color hawa-drop-shadow-md hawa-transition-all\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.helperText}\n </div>\n )}\n {/* Character Counter */}\n {showCount && (\n <div\n className={cn(\n \"hawa-absolute hawa-translate-y-1/2 hawa-text-start hawa-text-xs hawa-transition-all\",\n {\n \"hawa-end-0 hawa-top-[62px]\":\n countPosition === \"bottom\",\n \"hawa-bottom-[62px] hawa-end-0\":\n countPosition === \"top\",\n \"hawa-end-2\": countPosition === \"center\"\n }\n )}\n >\n {props.value ? String(props.value).length : 0}/\n {props.maxLength}\n </div>\n )}\n\n {/* Popover helper text */}\n {/* {props.popup && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[47px] hawa-min-h-fit hawa-w-full hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start hawa-rounded hawa-end-0 hawa-z-20 hawa-drop-shadow-md hawa-bg-background hawa-translate-y-1/2\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.popupContent}\n </div>\n )} */}\n </div>\n </>\n )}\n </div>\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\";\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n size?: \"default\" | \"small\" | \"large\";\n }\n>(({ className, sideOffset = 4, size = \"default\", ...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 {\n \"hawa-text-xs\": size === \"small\",\n \"hawa-text-xl\": size === \"large\"\n },\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 /** Size of the tooltip. */\n size?: \"default\" | \"small\" | \"large\";\n /** Disables the tooltip. */\n disabled?: boolean;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n size,\n open,\n content,\n children,\n disabled,\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={!disabled && open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent\n size={size}\n side={side}\n align=\"center\"\n {...contentProps}\n style={{\n ...contentProps?.style,\n maxWidth: \"var(--radix-tooltip-content-available-width)\",\n maxHeight: \"var(--radix-tooltip-content-available-height)\"\n }}\n >\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 fade?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n fade,\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 const fadeStyle = {\n bottom: \"hawa-mask-fade-bottom\",\n top: \"hawa-mask-fade-top\",\n right: \"hawa-mask-fade-right\",\n left: \"hawa-mask-fade-left \"\n };\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 fade && fadeStyle[fade],\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","React","React","import_react","React","React"]}
|
1
|
+
{"version":3,"sources":["../../elements/input/index.ts","../../elements/input/Input.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx","../../elements/skeleton/Skeleton.tsx"],"sourcesContent":["export * from \"./Input\";\n","import React, { forwardRef } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { Label, LabelProps } from \"../label/Label\";\nimport { Skeleton } from \"../skeleton/Skeleton\";\n\nexport type TextFieldTypes = React.InputHTMLAttributes<HTMLInputElement> & {\n isLoading?: boolean;\n containerClassName?: string;\n margin?: \"none\" | \"normal\" | \"large\";\n width?: \"small\" | \"normal\" | \"full\" | \"auto\";\n /** The label of the input field */\n label?: any;\n labelProps?: LabelProps;\n hideSeparator?: boolean;\n /** The small red text under the input field to show validation. */\n helperText?: any;\n forceHideHelperText?: boolean;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** The icon inside the input field */\n icon?: any;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n // maxLength?: any;\n iconInside?: React.ReactNode;\n endIcon?: React.ReactNode;\n endIconProps?: { className?: string };\n startIcon?: React.ReactNode;\n placeholder?: React.ReactNode;\n /** Show the count of characters left in the input field. Works along with maxLength prop. */\n showCount?: boolean;\n countPosition?: \"top\" | \"bottom\" | \"center\";\n popup?: boolean;\n popupContent?: React.ReactNode;\n outsidePrefix?: any;\n prefixText?: any;\n};\nexport const Input = forwardRef<HTMLInputElement, TextFieldTypes>(\n (\n {\n margin = \"none\",\n width = \"full\",\n preview = false,\n forceHideHelperText = false,\n labelProps,\n placeholder,\n showCount,\n inputProps,\n countPosition = \"bottom\",\n ...props\n },\n ref,\n ) => {\n let marginStyles = {\n none: \"hawa-mb-0\",\n normal: \"hawa-mb-3\",\n large: \"hawa-mb-5\",\n };\n let widthStyles = {\n small: \"hawa-w-full hawa-max-w-2xs\",\n normal: \"hawa-w-1/2\",\n full: \"hawa-w-full\",\n auto: \"\",\n };\n\n let defaultStyle =\n \"hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0\";\n let defaultInputStyle =\n \"hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm \";\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n let newValue = e.target.value;\n\n if (props.prefixText) {\n // If newValue is shorter than prefixText, set newValue to prefixText\n if (newValue.length < props.prefixText.length) {\n newValue = props.prefixText;\n } else {\n // Check if newValue starts with a substring of prefixText\n const isSubstring = props.prefixText.startsWith(newValue);\n\n if (!isSubstring && !newValue.startsWith(props.prefixText)) {\n newValue = `${props.prefixText}${newValue}`;\n }\n }\n }\n\n if (props.onChange) {\n const newEvent = { ...e, target: { ...e.target, value: newValue } };\n props.onChange(newEvent as React.ChangeEvent<HTMLInputElement>);\n }\n };\n\n return (\n <div\n className={cn(\n defaultStyle,\n marginStyles[margin],\n widthStyles[width],\n props.containerClassName,\n \"hawa-w-full hawa-gap-2\",\n )}\n >\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n <div className=\"hawa-flex hawa-flex-row hawa-w-full hawa-items-center \">\n {props.outsidePrefix && (\n <span\n className={cn(\n \"hawa-me-2 hawa-opacity-90\",\n !forceHideHelperText && \"hawa-mb-2\",\n )}\n >\n {props.outsidePrefix}\n </span>\n )}\n {props.isLoading ? (\n <div className=\"hawa-pb-2\">\n <Skeleton className=\"hawa-h-[40px] hawa-w-full\" />\n </div>\n ) : (\n <>\n {!props.hideSeparator && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800\",\n preview ? \"hawa-opacity-100\" : \"hawa-opacity-0\",\n )}\n ></div>\n )}\n <div className=\"hawa-flex hawa-flex-col hawa-w-full hawa-gap-2\">\n <div className={\"hawa-relative\"}>\n {props.startIcon && (\n <div className=\"hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2\">\n {props.startIcon}\n </div>\n )}\n {props.endIcon && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2\",\n props.endIconProps?.className,\n )}\n >\n {props.endIcon}\n </div>\n )}\n <input\n required\n dir={props.dir}\n type={props.type}\n value={props.value}\n onChange={handleChange}\n autoComplete={props.autoComplete}\n defaultValue={props.defaultValue}\n placeholder={placeholder}\n disabled={props.disabled || preview}\n style={{ height: 40 }}\n {...inputProps}\n className={cn(\n defaultInputStyle,\n \" focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 dark:hawa-text-white\",\n {\n \"hawa-pe-9\": props.endIcon,\n \"hawa-ps-9\": props.startIcon,\n \"hawa-pe-[60px]\": countPosition === \"center\",\n },\n preview &&\n \"hawa-border-transparent hawa-bg-transparent hawa-px-0\",\n inputProps?.className,\n )}\n />\n </div>\n\n {/* Regular helper text */}\n {!forceHideHelperText && (\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 {/* Popover helper text */}\n {!props.disabled && forceHideHelperText && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-0 hawa-top-[47px] hawa-z-20 hawa-translate-y-1/2 hawa-rounded hawa-bg-background hawa-text-start hawa-text-xs hawa-text-helper-color hawa-drop-shadow-md hawa-transition-all\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\",\n )}\n >\n {props.helperText}\n </div>\n )}\n {/* Character Counter */}\n {showCount && (\n <div\n className={cn(\n \"hawa-absolute hawa-translate-y-1/2 hawa-text-start hawa-text-xs hawa-transition-all\",\n {\n \"hawa-end-0 hawa-top-[62px]\":\n countPosition === \"bottom\",\n \"hawa-bottom-[62px] hawa-end-0\":\n countPosition === \"top\",\n \"hawa-end-2\": countPosition === \"center\",\n },\n )}\n >\n {props.value ? String(props.value).length : 0}/\n {props.maxLength}\n </div>\n )}\n\n {/* Popover helper text */}\n {/* {props.popup && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[47px] hawa-min-h-fit hawa-w-full hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start hawa-rounded hawa-end-0 hawa-z-20 hawa-drop-shadow-md hawa-bg-background hawa-translate-y-1/2\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.popupContent}\n </div>\n )} */}\n </div>\n </>\n )}\n </div>\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\";\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n size?: \"default\" | \"small\" | \"large\";\n }\n>(({ className, sideOffset = 4, size = \"default\", ...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 {\n \"hawa-text-xs\": size === \"small\",\n \"hawa-text-xl\": size === \"large\"\n },\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 /** Size of the tooltip. */\n size?: \"default\" | \"small\" | \"large\";\n /** Disables the tooltip. */\n disabled?: boolean;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n size,\n open,\n content,\n children,\n disabled,\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={!disabled && open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent\n size={size}\n side={side}\n align=\"center\"\n {...contentProps}\n style={{\n ...contentProps?.style,\n maxWidth: \"var(--radix-tooltip-content-available-width)\",\n maxHeight: \"var(--radix-tooltip-content-available-height)\"\n }}\n >\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 fade?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n fade,\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 const fadeStyle = {\n bottom: \"hawa-mask-fade-bottom\",\n top: \"hawa-mask-fade-top\",\n right: \"hawa-mask-fade-right\",\n left: \"hawa-mask-fade-left \"\n };\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 fade && fadeStyle[fade],\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","React","React","import_react","React","React"]}
|
package/dist/input/index.mjs.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../elements/input/Input.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx","../../elements/skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { Label, LabelProps } from \"../label/Label\";\nimport { Skeleton } from \"../skeleton/Skeleton\";\n\nexport type TextFieldTypes = React.InputHTMLAttributes<HTMLInputElement> & {\n isLoading?: boolean;\n containerClassName?: string;\n margin?: \"none\" | \"normal\" | \"large\";\n width?: \"small\" | \"normal\" | \"full\" | \"auto\";\n /** The label of the input field */\n label?: any;\n labelProps?: LabelProps;\n hideSeparator?: boolean;\n /** The small red text under the input field to show validation. */\n helperText?: any;\n forceHideHelperText?: boolean;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** The icon inside the input field */\n icon?: any;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n // maxLength?: any;\n iconInside?: React.ReactNode;\n endIcon?: React.ReactNode;\n endIconProps?: { className?: string };\n startIcon?: React.ReactNode;\n placeholder?: React.ReactNode;\n /** Show the count of characters left in the input field. Works along with maxLength prop. */\n showCount?: boolean;\n countPosition?: \"top\" | \"bottom\" | \"center\";\n popup?: boolean;\n popupContent?: React.ReactNode;\n outsidePrefix?: any;\n prefixText?: any;\n};\nexport const Input = forwardRef<HTMLInputElement, TextFieldTypes>(\n (\n {\n margin = \"none\",\n width = \"full\",\n preview = false,\n forceHideHelperText = false,\n labelProps,\n placeholder,\n showCount,\n inputProps,\n countPosition = \"bottom\",\n ...props\n },\n ref\n ) => {\n let marginStyles = {\n none: \"hawa-mb-0\",\n normal: \"hawa-mb-3\",\n large: \"hawa-mb-5\"\n };\n let widthStyles = {\n small: \"hawa-w-full hawa-max-w-2xs\",\n normal: \"hawa-w-1/2\",\n full: \"hawa-w-full\",\n auto: \"\"\n };\n\n let defaultStyle =\n \"hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0\";\n let defaultInputStyle =\n \"hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm \";\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n let newValue = e.target.value;\n\n if (props.prefixText) {\n // If newValue is shorter than prefixText, set newValue to prefixText\n if (newValue.length < props.prefixText.length) {\n newValue = props.prefixText;\n } else {\n // Check if newValue starts with a substring of prefixText\n const isSubstring = props.prefixText.startsWith(newValue);\n\n if (!isSubstring && !newValue.startsWith(props.prefixText)) {\n newValue = `${props.prefixText}${newValue}`;\n }\n }\n }\n\n if (props.onChange) {\n const newEvent = { ...e, target: { ...e.target, value: newValue } };\n props.onChange(newEvent as React.ChangeEvent<HTMLInputElement>);\n }\n };\n\n return (\n <div\n className={cn(\n defaultStyle,\n marginStyles[margin],\n widthStyles[width],\n props.containerClassName,\n \"hawa-w-full hawa-gap-2\"\n )}\n >\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n <div className=\"hawa-flex hawa-flex-row hawa-w-full hawa-items-center \">\n {props.outsidePrefix && (\n <span\n className={cn(\n \"hawa-me-2 hawa-opacity-90\",\n !forceHideHelperText && \"hawa-mb-2\"\n )}\n >\n {props.outsidePrefix}\n </span>\n )}\n {props.isLoading ? (\n <div className=\"hawa-pb-2\">\n <Skeleton className=\"hawa-h-[40px] hawa-w-full\" />\n </div>\n ) : (\n <>\n {!props.hideSeparator && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800\",\n preview ? \"hawa-opacity-100\" : \"hawa-opacity-0\"\n )}\n ></div>\n )}\n <div className=\"hawa-flex hawa-flex-col hawa-w-full hawa-gap-2\">\n <div className={\"hawa-relative\"}>\n {props.startIcon && (\n <div className=\"hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2\">\n {props.startIcon}\n </div>\n )}\n {props.endIcon && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2\",\n props.endIconProps?.className\n )}\n >\n {props.endIcon}\n </div>\n )}\n <input\n required\n dir={props.dir}\n type={props.type}\n value={props.value}\n onChange={handleChange}\n autoComplete={props.autoComplete}\n defaultValue={props.defaultValue}\n placeholder={placeholder}\n disabled={props.disabled || preview}\n style={{ height: 40 }}\n {...inputProps}\n className={cn(\n defaultInputStyle,\n \" focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 dark:hawa-text-white\",\n {\n \"hawa-pe-9\": props.endIcon,\n \"hawa-ps-9\": props.startIcon,\n \"hawa-pe-[60px]\": countPosition === \"center\"\n },\n preview &&\n \"hawa-border-transparent hawa-bg-transparent hawa-px-0\",\n inputProps?.className\n )}\n />\n </div>\n\n {/* Regular helper text */}\n {!forceHideHelperText && (\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 {/* Popover helper text */}\n {!props.disabled && forceHideHelperText && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-0 hawa-top-[47px] hawa-z-20 hawa-translate-y-1/2 hawa-rounded hawa-bg-background hawa-text-start hawa-text-xs hawa-text-helper-color hawa-drop-shadow-md hawa-transition-all\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.helperText}\n </div>\n )}\n {/* Character Counter */}\n {showCount && (\n <div\n className={cn(\n \"hawa-absolute hawa-translate-y-1/2 hawa-text-start hawa-text-xs hawa-transition-all\",\n {\n \"hawa-end-0 hawa-top-[62px]\":\n countPosition === \"bottom\",\n \"hawa-bottom-[62px] hawa-end-0\":\n countPosition === \"top\",\n \"hawa-end-2\": countPosition === \"center\"\n }\n )}\n >\n {props.value ? String(props.value).length : 0}/\n {props.maxLength}\n </div>\n )}\n\n {/* Popover helper text */}\n {/* {props.popup && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[47px] hawa-min-h-fit hawa-w-full hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start hawa-rounded hawa-end-0 hawa-z-20 hawa-drop-shadow-md hawa-bg-background hawa-translate-y-1/2\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.popupContent}\n </div>\n )} */}\n </div>\n </>\n )}\n </div>\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\";\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n size?: \"default\" | \"small\" | \"large\";\n }\n>(({ className, sideOffset = 4, size = \"default\", ...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 {\n \"hawa-text-xs\": size === \"small\",\n \"hawa-text-xl\": size === \"large\"\n },\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 /** Size of the tooltip. */\n size?: \"default\" | \"small\" | \"large\";\n /** Disables the tooltip. */\n disabled?: boolean;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n size,\n open,\n content,\n children,\n disabled,\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={!disabled && open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent\n size={size}\n side={side}\n align=\"center\"\n {...contentProps}\n style={{\n ...contentProps?.style,\n maxWidth: \"var(--radix-tooltip-content-available-width)\",\n maxHeight: \"var(--radix-tooltip-content-available-height)\"\n }}\n >\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 fade?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n fade,\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 const fadeStyle = {\n bottom: \"hawa-mask-fade-bottom\",\n top: \"hawa-mask-fade-top\",\n right: \"hawa-mask-fade-right\",\n left: \"hawa-mask-fade-left \"\n };\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 fade && fadeStyle[fade],\n className\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\n"],"mappings":"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","names":["React","forwardRef","React","React","React","forwardRef","React"]}
|
1
|
+
{"version":3,"sources":["../../elements/input/Input.tsx","../../util/index.ts","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx","../../elements/skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { Label, LabelProps } from \"../label/Label\";\nimport { Skeleton } from \"../skeleton/Skeleton\";\n\nexport type TextFieldTypes = React.InputHTMLAttributes<HTMLInputElement> & {\n isLoading?: boolean;\n containerClassName?: string;\n margin?: \"none\" | \"normal\" | \"large\";\n width?: \"small\" | \"normal\" | \"full\" | \"auto\";\n /** The label of the input field */\n label?: any;\n labelProps?: LabelProps;\n hideSeparator?: boolean;\n /** The small red text under the input field to show validation. */\n helperText?: any;\n forceHideHelperText?: boolean;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /** The icon inside the input field */\n icon?: any;\n /** Boolean to enable/disable editing the input field and using it as a text field */\n preview?: boolean;\n // maxLength?: any;\n iconInside?: React.ReactNode;\n endIcon?: React.ReactNode;\n endIconProps?: { className?: string };\n startIcon?: React.ReactNode;\n placeholder?: React.ReactNode;\n /** Show the count of characters left in the input field. Works along with maxLength prop. */\n showCount?: boolean;\n countPosition?: \"top\" | \"bottom\" | \"center\";\n popup?: boolean;\n popupContent?: React.ReactNode;\n outsidePrefix?: any;\n prefixText?: any;\n};\nexport const Input = forwardRef<HTMLInputElement, TextFieldTypes>(\n (\n {\n margin = \"none\",\n width = \"full\",\n preview = false,\n forceHideHelperText = false,\n labelProps,\n placeholder,\n showCount,\n inputProps,\n countPosition = \"bottom\",\n ...props\n },\n ref,\n ) => {\n let marginStyles = {\n none: \"hawa-mb-0\",\n normal: \"hawa-mb-3\",\n large: \"hawa-mb-5\",\n };\n let widthStyles = {\n small: \"hawa-w-full hawa-max-w-2xs\",\n normal: \"hawa-w-1/2\",\n full: \"hawa-w-full\",\n auto: \"\",\n };\n\n let defaultStyle =\n \"hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0\";\n let defaultInputStyle =\n \"hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm \";\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n let newValue = e.target.value;\n\n if (props.prefixText) {\n // If newValue is shorter than prefixText, set newValue to prefixText\n if (newValue.length < props.prefixText.length) {\n newValue = props.prefixText;\n } else {\n // Check if newValue starts with a substring of prefixText\n const isSubstring = props.prefixText.startsWith(newValue);\n\n if (!isSubstring && !newValue.startsWith(props.prefixText)) {\n newValue = `${props.prefixText}${newValue}`;\n }\n }\n }\n\n if (props.onChange) {\n const newEvent = { ...e, target: { ...e.target, value: newValue } };\n props.onChange(newEvent as React.ChangeEvent<HTMLInputElement>);\n }\n };\n\n return (\n <div\n className={cn(\n defaultStyle,\n marginStyles[margin],\n widthStyles[width],\n props.containerClassName,\n \"hawa-w-full hawa-gap-2\",\n )}\n >\n {props.label && <Label {...labelProps}>{props.label}</Label>}\n <div className=\"hawa-flex hawa-flex-row hawa-w-full hawa-items-center \">\n {props.outsidePrefix && (\n <span\n className={cn(\n \"hawa-me-2 hawa-opacity-90\",\n !forceHideHelperText && \"hawa-mb-2\",\n )}\n >\n {props.outsidePrefix}\n </span>\n )}\n {props.isLoading ? (\n <div className=\"hawa-pb-2\">\n <Skeleton className=\"hawa-h-[40px] hawa-w-full\" />\n </div>\n ) : (\n <>\n {!props.hideSeparator && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800\",\n preview ? \"hawa-opacity-100\" : \"hawa-opacity-0\",\n )}\n ></div>\n )}\n <div className=\"hawa-flex hawa-flex-col hawa-w-full hawa-gap-2\">\n <div className={\"hawa-relative\"}>\n {props.startIcon && (\n <div className=\"hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2\">\n {props.startIcon}\n </div>\n )}\n {props.endIcon && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2\",\n props.endIconProps?.className,\n )}\n >\n {props.endIcon}\n </div>\n )}\n <input\n required\n dir={props.dir}\n type={props.type}\n value={props.value}\n onChange={handleChange}\n autoComplete={props.autoComplete}\n defaultValue={props.defaultValue}\n placeholder={placeholder}\n disabled={props.disabled || preview}\n style={{ height: 40 }}\n {...inputProps}\n className={cn(\n defaultInputStyle,\n \" focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 dark:hawa-text-white\",\n {\n \"hawa-pe-9\": props.endIcon,\n \"hawa-ps-9\": props.startIcon,\n \"hawa-pe-[60px]\": countPosition === \"center\",\n },\n preview &&\n \"hawa-border-transparent hawa-bg-transparent hawa-px-0\",\n inputProps?.className,\n )}\n />\n </div>\n\n {/* Regular helper text */}\n {!forceHideHelperText && (\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 {/* Popover helper text */}\n {!props.disabled && forceHideHelperText && (\n <div\n className={cn(\n \"hawa-absolute hawa-end-0 hawa-top-[47px] hawa-z-20 hawa-translate-y-1/2 hawa-rounded hawa-bg-background hawa-text-start hawa-text-xs hawa-text-helper-color hawa-drop-shadow-md hawa-transition-all\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\",\n )}\n >\n {props.helperText}\n </div>\n )}\n {/* Character Counter */}\n {showCount && (\n <div\n className={cn(\n \"hawa-absolute hawa-translate-y-1/2 hawa-text-start hawa-text-xs hawa-transition-all\",\n {\n \"hawa-end-0 hawa-top-[62px]\":\n countPosition === \"bottom\",\n \"hawa-bottom-[62px] hawa-end-0\":\n countPosition === \"top\",\n \"hawa-end-2\": countPosition === \"center\",\n },\n )}\n >\n {props.value ? String(props.value).length : 0}/\n {props.maxLength}\n </div>\n )}\n\n {/* Popover helper text */}\n {/* {props.popup && (\n <div\n className={cn(\n \"hawa-absolute hawa-top-[47px] hawa-min-h-fit hawa-w-full hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start hawa-rounded hawa-end-0 hawa-z-20 hawa-drop-shadow-md hawa-bg-background hawa-translate-y-1/2\",\n props.helperText\n ? \"hawa-border hawa-p-1\"\n : \"hawa-border-none hawa-p-0\"\n )}\n >\n {props.popupContent}\n </div>\n )} */}\n </div>\n </>\n )}\n </div>\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\";\nimport { cn } from \"@util/index\";\n\nimport { PositionType } from \"@_types/commonTypes\";\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef<typeof TooltipPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n size?: \"default\" | \"small\" | \"large\";\n }\n>(({ className, sideOffset = 4, size = \"default\", ...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 {\n \"hawa-text-xs\": size === \"small\",\n \"hawa-text-xl\": size === \"large\"\n },\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 /** Size of the tooltip. */\n size?: \"default\" | \"small\" | \"large\";\n /** Disables the tooltip. */\n disabled?: boolean;\n triggerProps?: TooltipPrimitive.TooltipTriggerProps;\n contentProps?: TooltipPrimitive.TooltipContentProps;\n providerProps?: TooltipPrimitive.TooltipProviderProps;\n};\n\nconst Tooltip: React.FunctionComponent<TooltipTypes> = ({\n side,\n size,\n open,\n content,\n children,\n disabled,\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={!disabled && open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n {...props}\n >\n <TooltipPrimitive.Trigger {...triggerProps}>\n {children}\n </TooltipPrimitive.Trigger>\n <TooltipContent\n size={size}\n side={side}\n align=\"center\"\n {...contentProps}\n style={{\n ...contentProps?.style,\n maxWidth: \"var(--radix-tooltip-content-available-width)\",\n maxHeight: \"var(--radix-tooltip-content-available-height)\"\n }}\n >\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 fade?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nfunction Skeleton({\n className,\n content,\n animation = \"pulse\",\n fade,\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 const fadeStyle = {\n bottom: \"hawa-mask-fade-bottom\",\n top: \"hawa-mask-fade-top\",\n right: \"hawa-mask-fade-right\",\n left: \"hawa-mask-fade-left \"\n };\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 fade && fadeStyle[fade],\n className\n )}\n {...props}\n >\n {content && content}\n </div>\n );\n}\n\nexport { Skeleton };\n"],"mappings":"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","names":["React","forwardRef","React","React","React","forwardRef","React"]}
|