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

Modern UI Kit made with Tailwind

{"version":3,"sources":["../../layout/docsSidebar/DocsSidebar.tsx","../../util/index.ts"],"sourcesContent":["import React from \"react\";\n\nimport { cn } from \"@util/index\";\n\nimport { DirectionType } from \"@_types/commonTypes\";\n\ntype DocsSidebarType = {\n  pages: any[];\n  currentPage?: string;\n  direction?: DirectionType;\n};\n\nexport const DocsSidebar: React.FC<DocsSidebarType> = ({\n  currentPage: propCurrentPage,\n\n  pages,\n  direction,\n}) => {\n  const [activePage, setActivePage] = React.useState(pages[0]);\n\n  const handlePageClick = (page: any, event: React.MouseEvent) => {\n    event.preventDefault();\n    setTimeout(() => {\n      setActivePage(page);\n    }, 50);\n    const element = document.getElementById(page);\n    element?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n  };\n\n  const getCurrentSection = () => {\n    for (let i = pages.length - 1; i >= 0; i--) {\n      const page = pages[i];\n      const element = document.getElementById(page);\n      const rect = element?.getBoundingClientRect();\n      if (rect) {\n        if (rect.top < window.innerHeight && rect.bottom >= 0) {\n          return page;\n        }\n      }\n    }\n    return pages[0];\n  };\n\n  React.useEffect(() => {\n    const handleScroll = () => {\n      setActivePage(getCurrentSection());\n    };\n    window.addEventListener(\"scroll\", handleScroll);\n    return () => {\n      window.removeEventListener(\"scroll\", handleScroll);\n    };\n  }, []);\n\n  let selectedStyles = {\n    rtl: \"hawa-border-r-4  hawa-border-primary hawa-border-collapse hawa-bg-gray-200\",\n    ltr: \"hawa-border-l-4  hawa-border-primary hawa-border-collapse hawa-bg-gray-200\",\n  };\n  return (\n    <div\n      className=\"hawa-flex hawa-flex-col hawa-overflow-x-clip\"\n      dir={direction}\n    >\n      {pages.map((page, index) => (\n        <div\n          key={index}\n          className={cn(\n            \"hawa-cursor-pointer hawa-whitespace-nowrap hawa-px-3 hawa-py-1 hawa-text-xs hawa-transition-all hover:hawa-bg-gray-100\",\n            (propCurrentPage || activePage) === page\n              ? selectedStyles[direction || \"rtl\"]\n              : \"\",\n          )}\n          onClick={(event) => handlePageClick(page, event)}\n        >\n          {page}\n        </div>\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"],"mappings":";;;AAAA,OAAO,WAAW;;;ACAlB,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADOO,IAAM,cAAyC,CAAC;AAAA,EACrD,aAAa;AAAA,EAEb;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,MAAM,CAAC,CAAC;AAE3D,QAAM,kBAAkB,CAAC,MAAW,UAA4B;AAC9D,UAAM,eAAe;AACrB,eAAW,MAAM;AACf,oBAAc,IAAI;AAAA,IACpB,GAAG,EAAE;AACL,UAAM,UAAU,SAAS,eAAe,IAAI;AAC5C,uCAAS,eAAe,EAAE,UAAU,UAAU,OAAO,QAAQ;AAAA,EAC/D;AAEA,QAAM,oBAAoB,MAAM;AAC9B,aAAS,IAAI,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK;AAC1C,YAAM,OAAO,MAAM,CAAC;AACpB,YAAM,UAAU,SAAS,eAAe,IAAI;AAC5C,YAAM,OAAO,mCAAS;AACtB,UAAI,MAAM;AACR,YAAI,KAAK,MAAM,OAAO,eAAe,KAAK,UAAU,GAAG;AACrD,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AACA,WAAO,MAAM,CAAC;AAAA,EAChB;AAEA,QAAM,UAAU,MAAM;AACpB,UAAM,eAAe,MAAM;AACzB,oBAAc,kBAAkB,CAAC;AAAA,IACnC;AACA,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,iBAAiB;AAAA,IACnB,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK;AAAA;AAAA,IAEJ,MAAM,IAAI,CAAC,MAAM,UAChB;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,WACC,mBAAmB,gBAAgB,OAChC,eAAe,aAAa,KAAK,IACjC;AAAA,QACN;AAAA,QACA,SAAS,CAAC,UAAU,gBAAgB,MAAM,KAAK;AAAA;AAAA,MAE9C;AAAA,IACH,CACD;AAAA,EACH;AAEJ;","names":[]}