@sikka/hawa/dist/switch/index.mjs.map

Modern UI Kit made with Tailwind

{"version":3,"sources":["../../elements/switch/Switch.tsx","../../util/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\nimport { cn } from \"@util/index\";\n\nimport { RadiusType } from \"@_types/commonTypes\";\n\ninterface SwitchProps\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {\n  size?: \"default\" | \"sm\" | \"lg\";\n  label?: string;\n  roundedness?: RadiusType;\n}\n\nexport const Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  SwitchProps\n>(\n  (\n    { className, size = \"default\", roundedness = \"inherit\", label, ...props },\n    ref,\n  ) => {\n    const [parentDirection, setParentDirection] = React.useState<string | null>(\n      null,\n    );\n    const parentRef = React.useRef<HTMLDivElement>(null);\n\n    React.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 rootSize = {\n      default: \"hawa-h-[25px] hawa-w-[42px]\",\n      sm: \"hawa-h-[20px] hawa-w-[37px]\",\n      lg: \"hawa-h-[30px] hawa-w-[47px]\",\n    };\n    const thumbSize = {\n      default: \"hawa-h-[21px] hawa-w-[21px]\",\n      sm: \"hawa-h-[16px] hawa-w-[16px]\",\n      lg: \"hawa-h-[26px] hawa-w-[26px]\",\n    };\n    const rootRoundednessStyles = {\n      none: \"hawa-rounded-none\",\n      full: \"hawa-rounded-full\",\n      inherit: \"hawa-rounded\",\n    };\n    const thumbRoundednessStyles = {\n      none: \"hawa-rounded-none\",\n      full: \"hawa-rounded-full\",\n      inherit: \"hawa-rounded-inner\",\n    };\n\n    return (\n      <div\n        className=\"hawa-flex hawa-flex-row hawa-items-center\"\n        ref={parentRef}\n      >\n        <SwitchPrimitives.Root\n          className={cn(\n            \"data-[state=unchecked]:hawa-bg-primary/20\",\n            \"data-[state=checked]:hawa-bg-primary\",\n            \"hawa-relative hawa-cursor-pointer hawa-rounded hawa-outline-none\",\n            rootRoundednessStyles[roundedness],\n            className,\n            rootSize[size],\n          )}\n          {...props}\n          ref={ref}\n        >\n          <SwitchPrimitives.Thumb\n            className={cn(\n              thumbSize[size],\n              \"hawa-block hawa-rounded hawa-transition-transform hawa-duration-100 hawa-will-change-transform\",\n              \"data-[state=checked]:hawa-bg-primary-foreground\",\n              \"hawa-bg-white dark:hawa-bg-background\",\n              thumbRoundednessStyles[roundedness],\n              parentDirection === \"rtl\"\n                ? \"hawa--translate-x-0.5 data-[state=checked]:hawa--translate-x-[19px]\"\n                : \"hawa-translate-x-0.5 data-[state=checked]:hawa-translate-x-[19px]\",\n            )}\n          />\n        </SwitchPrimitives.Root>\n        {label && (\n          <span className=\"hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300\">\n            {label}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\nSwitch.displayName = SwitchPrimitives.Root.displayName;\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;AAAA,YAAY,WAAW;AAEvB,YAAY,sBAAsB;;;ACFlC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADSO,IAAM,SAAe;AAAA,EAI1B,CACE,EAAE,WAAW,OAAO,WAAW,cAAc,WAAW,OAAO,GAAG,MAAM,GACxE,QACG;AACH,UAAM,CAAC,iBAAiB,kBAAkB,IAAU;AAAA,MAClD;AAAA,IACF;AACA,UAAM,YAAkB,aAAuB,IAAI;AAEnD,IAAM,gBAAU,MAAM;AA3B1B;AA4BM,YAAM,cAAa,eAAU,YAAV,mBAAmB;AACtC,UAAI,YAAY;AACd,cAAM,MAAM,OAAO,iBAAiB,UAAU,EAAE;AAChD,2BAAmB,GAAG;AAAA,MACxB;AAAA,IACF,CAAC;AAED,UAAM,WAAW;AAAA,MACf,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AACA,UAAM,YAAY;AAAA,MAChB,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AACA,UAAM,wBAAwB;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AACA,UAAM,yBAAyB;AAAA,MAC7B,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,KAAK;AAAA;AAAA,MAEL;AAAA,QAAkB;AAAA,QAAjB;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA,sBAAsB,WAAW;AAAA,YACjC;AAAA,YACA,SAAS,IAAI;AAAA,UACf;AAAA,UACC,GAAG;AAAA,UACJ;AAAA;AAAA,QAEA;AAAA,UAAkB;AAAA,UAAjB;AAAA,YACC,WAAW;AAAA,cACT,UAAU,IAAI;AAAA,cACd;AAAA,cACA;AAAA,cACA;AAAA,cACA,uBAAuB,WAAW;AAAA,cAClC,oBAAoB,QAChB,wEACA;AAAA,YACN;AAAA;AAAA,QACF;AAAA,MACF;AAAA,MACC,SACC,oCAAC,UAAK,WAAU,wFACb,KACH;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,OAAO,cAA+B,sBAAK;","names":[]}