@sikka/hawa 0.27.5-next → 0.27.6-next

package/dist/index.mjs

@@ -119,7 +119,7 @@ Card.displayName = "Card";
 import React2 from "react";
 var Loading = ({
   design = "spinner",
-  size = "sm",
+  size = "normal",
   themeMode = "light",
   classNames,
   color,
@@ -404,6 +404,7 @@ function Skeleton({
   className,
   content,
   animation = "pulse",
+  fade,
   ...props
 }) {
   const animationStyles = {
@@ -411,12 +412,14 @@ function Skeleton({
     pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
     shimmer: "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"
   };
+  const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;
   return /* @__PURE__ */ React4.createElement(
     "div",
     {
       className: cn(
         animationStyles[animation],
         content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
+        fade && fadeStyle,
         className
       ),
       ...props
@@ -7519,6 +7522,7 @@ var InterfaceSettings = ({
   return /* @__PURE__ */ React60.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ React60.createElement(
     Radio,
     {
+      name: "language",
       width,
       defaultValue: language,
       onChange: (e) => {
@@ -7536,6 +7540,7 @@ var InterfaceSettings = ({
   ), /* @__PURE__ */ React60.createElement(
     Radio,
     {
+      name: "theme",
       width,
       defaultValue: color,
       onChange: (e) => {
@@ -10095,6 +10100,7 @@ var UserReferralSource = ({
                 return /* @__PURE__ */ React80.createElement(
                   Radio,
                   {
+                    name: "source",
                     direction: props.direction,
                     orientation: "vertical",
                     options: optionsWithOther,
@@ -11171,6 +11177,7 @@ var PricingPlans = ({
   return /* @__PURE__ */ React97.createElement("div", { ...mainContainerProps }, /* @__PURE__ */ React97.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React97.createElement(
     Radio,
     {
+      name: "cycle",
       design: "tabs",
       defaultValue: props.currentCycle.value,
       options: props.billingCycles,
@@ -11183,6 +11190,7 @@ var PricingPlans = ({
   ), /* @__PURE__ */ React97.createElement(
     Radio,
     {
+      name: "currency",
       design: "tabs",
       defaultValue: props.currentCurrency.value,
       options: props.currencies,
@@ -11242,6 +11250,7 @@ var ComparingPlans = (props) => {
   return /* @__PURE__ */ React98.createElement("div", { id: "detailed-pricing", className: "hawa-w-full" }, /* @__PURE__ */ React98.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-flex-col hawa-justify-between hawa-gap-2 sm:hawa-flex-row" }, /* @__PURE__ */ React98.createElement(
     Radio,
     {
+      name: "cycle",
       tabsContainerClassName: "hawa-w-full sm:hawa-max-w-fit",
       width: "none",
       design: "tabs",
@@ -11256,6 +11265,7 @@ var ComparingPlans = (props) => {
   ), /* @__PURE__ */ React98.createElement(
     Radio,
     {
+      name: "currency",
       tabsContainerClassName: "hawa-w-full sm:hawa-max-w-fit",
       width: "none",
       design: "tabs",
@@ -11407,6 +11417,7 @@ var HorizontalPricing = (props) => {
   return /* @__PURE__ */ React99.createElement("div", { className: "hawa-z-10 hawa-w-full hawa-max-w-screen-sm" }, /* @__PURE__ */ React99.createElement("div", { className: "hawa-max-w-2xl " }, /* @__PURE__ */ React99.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, /* @__PURE__ */ React99.createElement(
     Radio,
     {
+      name: "currency",
       design: "tabs",
       options: props.currencies,
       defaultValue: props.currentCurrency
@@ -11414,6 +11425,7 @@ var HorizontalPricing = (props) => {
   ), /* @__PURE__ */ React99.createElement(
     Radio,
     {
+      name: "cycle",
       design: "tabs",
       options: props.billingCycles,
       defaultValue: props.currentCycle

package/dist/input/index.js

@@ -160,6 +160,7 @@ function Skeleton({
   className,
   content,
   animation = "pulse",
+  fade,
   ...props
 }) {
   const animationStyles = {
@@ -167,12 +168,14 @@ function Skeleton({
     pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
     shimmer: "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"
   };
+  const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;
   return /* @__PURE__ */ import_react2.default.createElement(
     "div",
     {
       className: cn(
         animationStyles[animation],
         content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
+        fade && fadeStyle,
         className
       ),
       ...props

package/dist/input/index.js.map

@@ -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};\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    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        {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            <>\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={props.onChange}\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]\": countPosition === \"bottom\",\n                      \"hawa-bottom-[62px] hawa-end-0\": 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            </>\n          </>\n        )}\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  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  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\n          size={size}\n          side={side}\n          align=\"center\"\n          {...contentProps}\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}\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;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAkC;;;ACAlC,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ACLA,IAAAC,SAAuB;;;ACAvB,mBAAkB;AAElB,uBAAkC;AAKlC,IAAM,iBAAiB,aAAAC,QAAM,WAK3B,CAAC,EAAE,WAAW,aAAa,GAAG,OAAO,WAAW,GAAG,MAAM,GAAG,QAC5D,6BAAAA,QAAA;AAAA,EAAkB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,QACE,gBAAgB,SAAS;AAAA,QACzB,gBAAgB,SAAS;AAAA,MAC3B;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,eAAe,cAA+B,yBAAQ;AAEtD,IAAM,eAAe,aAAAA,QAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,6BAAAA,QAAA,cAAkB,wBAAjB,EAAuB,KAAU,WAAW,GAAG,SAAS,GAAI,GAAG,OAAO,CACxE;AACD,aAAa,cAA+B,uBAAM;AAwBlD,IAAM,UAAiD,CAAC;AAAA,EACtD;AAAA,EACA;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,6BAAAA,QAAA;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC;AAAA,MACC,GAAG;AAAA;AAAA,IAEJ,6BAAAA,QAAA;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,MAEJ,6BAAAA,QAAA,cAAkB,0BAAjB,EAA0B,GAAG,gBAC3B,QACH;AAAA,MACA,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAM;AAAA,UACL,GAAG;AAAA;AAAA,QAEH;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEJ;;;ADpFA,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,IAAAC,gBAAkB;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,8BAAAC,QAAA;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;;;AJCO,IAAM,YAAQ;AAAA,EACnB,CACE;AAAA,IACE,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,GACA,QACG;AAnDP;AAoDI,QAAI,eAAe;AAAA,MACjB,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AACA,QAAI,cAAc;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAEA,QAAI,eACF;AACF,QAAI,oBACF;AAEF,WACE,8BAAAC,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,aAAa,MAAM;AAAA,UACnB,YAAY,KAAK;AAAA,UACjB,MAAM;AAAA,UACN;AAAA,QACF;AAAA;AAAA,MAEC,MAAM,SAAS,8BAAAA,QAAA,cAAC,SAAO,GAAG,cAAa,MAAM,KAAM;AAAA,MACnD,MAAM,YACL,8BAAAA,QAAA,cAAC,SAAI,WAAU,eACb,8BAAAA,QAAA,cAAC,YAAS,WAAU,6BAA4B,CAClD,IAEA,8BAAAA,QAAA,4BAAAA,QAAA,gBACG,CAAC,MAAM,iBACN,8BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,UAAU,qBAAqB;AAAA,UACjC;AAAA;AAAA,MACD,GAEH,8BAAAA,QAAA,4BAAAA,QAAA,gBACE,8BAAAA,QAAA,cAAC,SAAI,WAAW,mBACb,MAAM,aACL,8BAAAA,QAAA,cAAC,SAAI,WAAU,mEACZ,MAAM,SACT,GAED,MAAM,WACL,8BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,aACA,WAAM,iBAAN,mBAAoB;AAAA,UACtB;AAAA;AAAA,QAEC,MAAM;AAAA,MACT,GAEF,8BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,UAAQ;AAAA,UACR,KAAK,MAAM;AAAA,UACX,MAAM,MAAM;AAAA,UACZ,OAAO,MAAM;AAAA,UACb,UAAU,MAAM;AAAA,UAChB,cAAc,MAAM;AAAA,UACpB,cAAc,MAAM;AAAA,UACpB;AAAA,UACA,UAAU,MAAM,YAAY;AAAA,UAC5B,OAAO,EAAE,QAAQ,GAAG;AAAA,UACnB,GAAG;AAAA,UACJ,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,cACE,aAAa,MAAM;AAAA,cACnB,aAAa,MAAM;AAAA,cACnB,kBAAkB,kBAAkB;AAAA,YACtC;AAAA,YACA,WACE;AAAA,YACF,yCAAY;AAAA,UACd;AAAA;AAAA,MACF,CACF,GAGC,CAAC,uBACA,8BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,MAAM,aACF,8BACA;AAAA,UACN;AAAA;AAAA,QAEC,MAAM;AAAA,MACT,GAGD,CAAC,MAAM,YAAY,uBAClB,8BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,MAAM,aACF,yBACA;AAAA,UACN;AAAA;AAAA,QAEC,MAAM;AAAA,MACT,GAGD,aACC,8BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,8BAA8B,kBAAkB;AAAA,cAChD,iCAAiC,kBAAkB;AAAA,cACnD,cAAc,kBAAkB;AAAA,YAClC;AAAA,UACF;AAAA;AAAA,QAEC,MAAM,QAAQ,OAAO,MAAM,KAAK,EAAE,SAAS;AAAA,QAAE;AAAA,QAC7C,MAAM;AAAA,MACT,CAgBJ,CACF;AAAA,IAEJ;AAAA,EAEJ;AACF;","names":["import_react","React","React","import_react","React","React"]}
+{"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};\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    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        {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            <>\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={props.onChange}\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]\": countPosition === \"bottom\",\n                      \"hawa-bottom-[62px] hawa-end-0\": 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            </>\n          </>\n        )}\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  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  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\n          size={size}\n          side={side}\n          align=\"center\"\n          {...contentProps}\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 = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;\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,\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

@@ -124,6 +124,7 @@ function Skeleton({
   className,
   content,
   animation = "pulse",
+  fade,
   ...props
 }) {
   const animationStyles = {
@@ -131,12 +132,14 @@ function Skeleton({
     pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
     shimmer: "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"
   };
+  const fadeStyle = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;
   return /* @__PURE__ */ React3.createElement(
     "div",
     {
       className: cn(
         animationStyles[animation],
         content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
+        fade && fadeStyle,
         className
       ),
       ...props

package/dist/input/index.mjs.map

@@ -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};\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    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        {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            <>\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={props.onChange}\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]\": countPosition === \"bottom\",\n                      \"hawa-bottom-[62px] hawa-end-0\": 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            </>\n          </>\n        )}\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  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  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\n          size={size}\n          side={side}\n          align=\"center\"\n          {...contentProps}\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}\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":["React","forwardRef","React","React","React","forwardRef","React"]}
+{"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};\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    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        {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            <>\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={props.onChange}\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]\": countPosition === \"bottom\",\n                      \"hawa-bottom-[62px] hawa-end-0\": 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            </>\n          </>\n        )}\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  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  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\n          size={size}\n          side={side}\n          align=\"center\"\n          {...contentProps}\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 = `[mask-image:linear-gradient(to_${fade},#D1D4DC_50%,transparent_100%)]`;\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,\n        className\n      )}\n      {...props}\n    >\n      {content && content}\n    </div>\n  );\n}\n\nexport { Skeleton };\n"],"mappings":";AAAA,OAAOA,UAAS,cAAAC,mBAAkB;;;ACAlC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACLA,YAAYC,YAAW;;;ACAvB,OAAO,WAAW;AAElB,YAAY,sBAAsB;AAKlC,IAAM,iBAAiB,MAAM,WAK3B,CAAC,EAAE,WAAW,aAAa,GAAG,OAAO,WAAW,GAAG,MAAM,GAAG,QAC5D;AAAA,EAAkB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,QACE,gBAAgB,SAAS;AAAA,QACzB,gBAAgB,SAAS;AAAA,MAC3B;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;AAwBlD,IAAM,UAAiD,CAAC;AAAA,EACtD;AAAA,EACA;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;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAM;AAAA,UACL,GAAG;AAAA;AAAA,QAEH;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEJ;;;ADpFA,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;AAWlB,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,kBAAkB;AAAA,IACtB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AACA,QAAM,YAAY,kCAAkC,IAAI;AAExD,SACE,gBAAAC,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,gBAAgB,SAAS;AAAA,QACzB,WACE;AAAA,QACF,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEH,WAAW;AAAA,EACd;AAEJ;;;AJJO,IAAM,QAAQC;AAAA,EACnB,CACE;AAAA,IACE,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,GACA,QACG;AAnDP;AAoDI,QAAI,eAAe;AAAA,MACjB,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AACA,QAAI,cAAc;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAEA,QAAI,eACF;AACF,QAAI,oBACF;AAEF,WACE,gBAAAC,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,aAAa,MAAM;AAAA,UACnB,YAAY,KAAK;AAAA,UACjB,MAAM;AAAA,UACN;AAAA,QACF;AAAA;AAAA,MAEC,MAAM,SAAS,gBAAAA,OAAA,cAAC,SAAO,GAAG,cAAa,MAAM,KAAM;AAAA,MACnD,MAAM,YACL,gBAAAA,OAAA,cAAC,SAAI,WAAU,eACb,gBAAAA,OAAA,cAAC,YAAS,WAAU,6BAA4B,CAClD,IAEA,gBAAAA,OAAA,cAAAA,OAAA,gBACG,CAAC,MAAM,iBACN,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,UAAU,qBAAqB;AAAA,UACjC;AAAA;AAAA,MACD,GAEH,gBAAAA,OAAA,cAAAA,OAAA,gBACE,gBAAAA,OAAA,cAAC,SAAI,WAAW,mBACb,MAAM,aACL,gBAAAA,OAAA,cAAC,SAAI,WAAU,mEACZ,MAAM,SACT,GAED,MAAM,WACL,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,aACA,WAAM,iBAAN,mBAAoB;AAAA,UACtB;AAAA;AAAA,QAEC,MAAM;AAAA,MACT,GAEF,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACC,UAAQ;AAAA,UACR,KAAK,MAAM;AAAA,UACX,MAAM,MAAM;AAAA,UACZ,OAAO,MAAM;AAAA,UACb,UAAU,MAAM;AAAA,UAChB,cAAc,MAAM;AAAA,UACpB,cAAc,MAAM;AAAA,UACpB;AAAA,UACA,UAAU,MAAM,YAAY;AAAA,UAC5B,OAAO,EAAE,QAAQ,GAAG;AAAA,UACnB,GAAG;AAAA,UACJ,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,cACE,aAAa,MAAM;AAAA,cACnB,aAAa,MAAM;AAAA,cACnB,kBAAkB,kBAAkB;AAAA,YACtC;AAAA,YACA,WACE;AAAA,YACF,yCAAY;AAAA,UACd;AAAA;AAAA,MACF,CACF,GAGC,CAAC,uBACA,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,MAAM,aACF,8BACA;AAAA,UACN;AAAA;AAAA,QAEC,MAAM;AAAA,MACT,GAGD,CAAC,MAAM,YAAY,uBAClB,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,MAAM,aACF,yBACA;AAAA,UACN;AAAA;AAAA,QAEC,MAAM;AAAA,MACT,GAGD,aACC,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,8BAA8B,kBAAkB;AAAA,cAChD,iCAAiC,kBAAkB;AAAA,cACnD,cAAc,kBAAkB;AAAA,YAClC;AAAA,UACF;AAAA;AAAA,QAEC,MAAM,QAAQ,OAAO,MAAM,KAAK,EAAE,SAAS;AAAA,QAAE;AAAA,QAC7C,MAAM;AAAA,MACT,CAgBJ,CACF;AAAA,IAEJ;AAAA,EAEJ;AACF;","names":["React","forwardRef","React","React","React","forwardRef","React"]}

package/dist/interfaceSettings/index.js

@@ -360,6 +360,7 @@ var InterfaceSettings = ({
   return /* @__PURE__ */ import_react3.default.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ import_react3.default.createElement(
     Radio,
     {
+      name: "language",
       width,
       defaultValue: language,
       onChange: (e) => {
@@ -377,6 +378,7 @@ var InterfaceSettings = ({
   ), /* @__PURE__ */ import_react3.default.createElement(
     Radio,
     {
+      name: "theme",
       width,
       defaultValue: color,
       onChange: (e) => {

package/dist/interfaceSettings/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/interfaceSettings/index.ts","../../elements/interfaceSettings/InterfaceSettings.tsx","../../util/index.ts","../../elements/radio/Radio.tsx","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["export * from \"./InterfaceSettings\";\n","import React, { FC, useState } from \"react\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { cn } from \"@util/index\";\nimport { Radio } from \"../radio/Radio\";\n\ntype TypographyTypes = {\n  /** Function to handle language change.   */\n  handleLanguage?: (e: any) => void;\n  /** Current selected language.   */\n  currentLanguage?: string;\n  /** Function to handle theme color mode change.   */\n  handleColorMode?: (e: any) => void;\n  /** Current selected theme color mode.   */\n  currentColorMode?: \"light\" | \"dark\";\n  orientation?: OrientationType;\n  width?: \"default\" | \"full\";\n};\nexport const InterfaceSettings: FC<TypographyTypes> = ({\n  orientation = \"horizontal\",\n  width = \"default\",\n  handleColorMode,\n  handleLanguage,\n  ...props\n}) => {\n  const [color, setColor] = useState(props.currentColorMode);\n  const [language, setLanguage] = useState(props.currentLanguage);\n  let orientationStyle = {\n    horizontal: \"hawa-flex hawa-flex-row hawa-justify-between\",\n    vertical: \"hawa-flex hawa-flex-col hawa-items-center hawa-gap-2\"\n  };\n  return (\n    <div className={cn(orientationStyle[orientation])}>\n      <Radio\n        width={width}\n        defaultValue={language}\n        onChange={(e: any) => {\n          if (handleLanguage) {\n            handleLanguage(e.value);\n          }\n          setLanguage(e);\n        }}\n        design=\"tabs\"\n        options={[\n          { value: \"ar\", label: \"عربي\" },\n          { value: \"en\", label: \"English\" }\n        ]}\n      />\n      <Radio\n        width={width}\n        defaultValue={color}\n        onChange={(e: any) => {\n          if (handleColorMode) {\n            handleColorMode(e.value);\n          }\n          setColor(e);\n        }}\n        design=\"tabs\"\n        options={[\n          {\n            value: \"light\",\n            label: (\n              <svg\n                width=\"15\"\n                height=\"15\"\n                viewBox=\"0 0 15 15\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"hawa-h-[1.2rem] hawa-w-[1.2rem] hawa-rotate-0 hawa-scale-100 hawa-transition-all dark:hawa--rotate-90\"\n              >\n                <path\n                  d=\"M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            )\n          },\n          {\n            value: \"dark\",\n            label: (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                className=\"hawa-h-[1.2rem] hawa-w-[1.2rem]  hawa-transition-all dark:hawa-rotate-0 dark:hawa-scale-100\"\n              >\n                <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"></path>\n              </svg>\n            )\n          }\n        ]}\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 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\";\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  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  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\n          size={size}\n          side={side}\n          align=\"center\"\n          {...contentProps}\n        >\n          {content}\n        </TooltipContent>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.TooltipProvider>\n  );\n};\n\nexport { Tooltip };\n"],"mappings":"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","names":["import_react","import_react","React","React","React","_a","React"]}
+{"version":3,"sources":["../../elements/interfaceSettings/index.ts","../../elements/interfaceSettings/InterfaceSettings.tsx","../../util/index.ts","../../elements/radio/Radio.tsx","../../elements/label/Label.tsx","../../elements/tooltip/Tooltip.tsx"],"sourcesContent":["export * from \"./InterfaceSettings\";\n","import React, { FC, useState } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { OrientationType } from \"@_types/commonTypes\";\n\nimport { Radio } from \"../radio/Radio\";\n\ntype TypographyTypes = {\n  /** Function to handle language change.   */\n  handleLanguage?: (e: any) => void;\n  /** Current selected language.   */\n  currentLanguage?: string;\n  /** Function to handle theme color mode change.   */\n  handleColorMode?: (e: any) => void;\n  /** Current selected theme color mode.   */\n  currentColorMode?: \"light\" | \"dark\";\n  orientation?: OrientationType;\n  width?: \"default\" | \"full\";\n};\nexport const InterfaceSettings: FC<TypographyTypes> = ({\n  orientation = \"horizontal\",\n  width = \"default\",\n  handleColorMode,\n  handleLanguage,\n  ...props\n}) => {\n  const [color, setColor] = useState(props.currentColorMode);\n  const [language, setLanguage] = useState(props.currentLanguage);\n  let orientationStyle = {\n    horizontal: \"hawa-flex hawa-flex-row hawa-justify-between\",\n    vertical: \"hawa-flex hawa-flex-col hawa-items-center hawa-gap-2\"\n  };\n  return (\n    <div className={cn(orientationStyle[orientation])}>\n      <Radio\n        name=\"language\"\n        width={width}\n        defaultValue={language}\n        onChange={(e: any) => {\n          if (handleLanguage) {\n            handleLanguage(e.value);\n          }\n          setLanguage(e);\n        }}\n        design=\"tabs\"\n        options={[\n          { value: \"ar\", label: \"عربي\" },\n          { value: \"en\", label: \"English\" }\n        ]}\n      />\n      <Radio\n        name=\"theme\"\n        width={width}\n        defaultValue={color}\n        onChange={(e: any) => {\n          if (handleColorMode) {\n            handleColorMode(e.value);\n          }\n          setColor(e);\n        }}\n        design=\"tabs\"\n        options={[\n          {\n            value: \"light\",\n            label: (\n              <svg\n                width=\"15\"\n                height=\"15\"\n                viewBox=\"0 0 15 15\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"hawa-h-[1.2rem] hawa-w-[1.2rem] hawa-rotate-0 hawa-scale-100 hawa-transition-all dark:hawa--rotate-90\"\n              >\n                <path\n                  d=\"M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n            )\n          },\n          {\n            value: \"dark\",\n            label: (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                className=\"hawa-h-[1.2rem] hawa-w-[1.2rem]  hawa-transition-all dark:hawa-rotate-0 dark:hawa-scale-100\"\n              >\n                <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"></path>\n              </svg>\n            )\n          }\n        ]}\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 React, { useState, FC, useRef, useEffect } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { DirectionType, OrientationType } from \"../../types/commonTypes\";\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  /** Required to enable selection and differentiate between different Radio instances. */\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\";\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  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  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\n          size={size}\n          side={side}\n          align=\"center\"\n          {...contentProps}\n        >\n          {content}\n        </TooltipContent>\n      </TooltipPrimitive.Root>\n    </TooltipPrimitive.TooltipProvider>\n  );\n};\n\nexport { Tooltip };\n"],"mappings":"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","names":["import_react","import_react","React","React","React","_a","React"]}

package/dist/interfaceSettings/index.mjs

@@ -324,6 +324,7 @@ var InterfaceSettings = ({
   return /* @__PURE__ */ React4.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ React4.createElement(
     Radio,
     {
+      name: "language",
       width,
       defaultValue: language,
       onChange: (e) => {
@@ -341,6 +342,7 @@ var InterfaceSettings = ({
   ), /* @__PURE__ */ React4.createElement(
     Radio,
     {
+      name: "theme",
       width,
       defaultValue: color,
       onChange: (e) => {