se-design 1.0.2 → 1.0.8-5.dev.0

package/dist/index6.js.map

@@ -1 +1 @@
-{"version":3,"file":"index6.js","sources":["../src/components/SplitButton/index.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { MenuItemProps } from 'src/components/MenuItem';\nimport { MenuList } from 'src/components/MenuList';\n\nexport interface SplitButtonProps {\n  /**\n   * Button contents\n   */\n  label: string;\n  /**\n   * Optional click handler\n   */\n  onClick?: () => void;\n  /**\n   * Optional click handler for dropdown\n   */\n  onDropdownClick?: () => void;\n  menuItems?: MenuItemProps[];\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n}\n\nexport const SplitButton: FC<SplitButtonProps> = (props) => {\n  const { label, onDropdownClick = () => {}, menuItems = [], automationId = '', ...remainingProps } = props;\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleDropdownClick = () => {\n    setIsOpen(!isOpen);\n    onDropdownClick();\n  };\n\n  return (\n    <div className={'se-design-split-button flex items-center relative'} data-automation-id={automationId}>\n      <button\n        type=\"button\"\n        className=\"px-8 py-2.5 rounded-l text-sm bg-[var(--color-blue-500)] text-[var(--color-white)] border-r border-[var(--color-white)]\"\n        {...remainingProps}\n      >\n        {label}\n      </button>\n      <button type=\"button\" className=\"bg-[var(--color-blue-500)] rounded-r\" onClick={handleDropdownClick} data-automation-id=\"split-button-dropdown-button\">\n        <svg\n          className={`${isOpen ? 'rotate-180' : ''} transition-all`}\n          width=\"35\"\n          height=\"40\"\n          viewBox=\"0 0 35 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M0 0H32C33.6569 0 35 1.34315 35 3V37C35 38.6569 33.6569 40 32 40H0V0Z\" fill=\"transparent\" />\n          <path d=\"M18 23.5L14 19.5L22 19.5L18 23.5Z\" fill=\"white\" />\n        </svg>\n      </button>\n      {isOpen && (\n        <div className=\"absolute top-full mt-1 w-max\">\n          <MenuList items={menuItems} />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["SplitButton","props","label","onDropdownClick","menuItems","automationId","remainingProps","isOpen","setIsOpen","useState","handleDropdownClick","React","createElement","className","_extends","type","onClick","width","height","viewBox","fill","xmlns","d","MenuList","items"],"mappings":";;;;;;;;;;;AAwBO,MAAMA,IAAqCC,CAAUA,MAAA;AACpD,QAAA;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,iBAAAA,IAAkBA,MAAM;AAAA,IAAC;AAAA,IAAGC,WAAAA,IAAY,CAAE;AAAA,IAAEC,cAAAA,IAAe;AAAA,IAAI,GAAGC;AAAAA,EAAmBL,IAAAA,GAC9F,CAACM,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAsBA,MAAM;AAChCF,IAAAA,EAAU,CAACD,CAAM,GACDJ;EAAA;AAIhBQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW;AAAA,IAAqD,sBAAoBR;AAAAA,EACvFM,GAAAA,gBAAAA,EAAAC,cAAA,UAAAE,EAAA;AAAA,IACEC,MAAK;AAAA,IACLF,WAAU;AAAA,EAAA,GACNP,CAAc,GAEjBJ,CACK,GACRS,gBAAAA,EAAAC,cAAA,UAAA;AAAA,IAAQG,MAAK;AAAA,IAASF,WAAU;AAAA,IAAuCG,SAASN;AAAAA,IAAqB,sBAAmB;AAAA,EAAA,GACtHE,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEC,WAAW,GAAGN,IAAS,eAAe,EAAE;AAAA,IACxCU,OAAM;AAAA,IACNC,QAAO;AAAA,IACPC,SAAQ;AAAA,IACRC,MAAK;AAAA,IACLC,OAAM;AAAA,EAAA,GAENT,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMU,GAAE;AAAA,IAAwEF,MAAK;AAAA,EAAA,CAAe,GACpGR,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMU,GAAE;AAAA,IAAoCF,MAAK;AAAA,EAAS,CAAA,CACvD,CACC,GACPb,KACCI,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAACW,GAAQ;AAAA,IAACC,OAAOpB;AAAAA,EAAY,CAAA,CAC1B,CAEJ;AAET;"}
+{"version":3,"file":"index6.js","sources":["../src/components/Icon/index.tsx"],"sourcesContent":["// TODO: `applyAttributesToElement` recursion drops `size` for nested elements (pre-existing).\nimport React from 'react';\nimport { ReactSVG } from 'react-svg';\nimport { getA11yNameAttributes, useAccessiblePress } from '../../utils/a11y';\n\n// Dynamically import icons using Vite's asset handling\nconst ICON_MAP: Record<string, string> = (import.meta as any).glob('/src/assets/icons/*.svg', {\n  eager: true,\n  query: '?url',\n  import: 'default'\n});\n\nexport type RotationTypes = '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n\nexport type IconProps = {\n  name: string;\n  id?: string;\n  className?: string;\n  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;\n  /**\n   * Accessible name when Icon is interactive (onClick is provided).\n   * If omitted, we fall back to `name` and warn in development.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of visible element(s) that label this Icon when interactive.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this Icon when interactive (additional context).\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Toggle state when Icon is used as a button (e.g., show/hide sidebar).\n   * Only applies when `onClick` is provided (interactive icon).\n   */\n  ariaPressed?: boolean;\n  /**\n   * Expansion state when Icon controls a collapsible region/panel.\n   * Only applies when `onClick` is provided (interactive icon).\n   */\n  ariaExpanded?: boolean;\n  /**\n   * ID of the element controlled by this Icon (for aria-controls).\n   * Only applies when `onClick` is provided (interactive icon).\n   */\n  ariaControls?: string;\n  fill?: string;\n  stroke?: string;\n  rotation?: RotationTypes;\n  size?: number;\n  shouldStopPropagation?: boolean;\n  automationId?: string;\n  /**\n   * Disables the icon interaction while keeping it visible to AT with aria-disabled=\"true\".\n   * Only applies when `onClick` is provided (interactive icon).\n   */\n  disabled?: boolean;\n  /**\n   * Native HTML title attribute — renders as a browser tooltip on hover.\n   * For mouse users only; does not replace ariaLabel for screen readers.\n   */\n  htmlTitle?: string;\n};\n\nconst applyAttributesToElement = (element: Element, fill?: string, stroke?: string, size?: number) => {\n  // Only modify existing attributes\n  if (fill && element.hasAttribute('fill')) {\n    const currentFill = element.getAttribute('fill');\n    // Only update if the current fill is not \"none\"\n    if (currentFill !== 'none') {\n      element.setAttribute('fill', fill);\n    }\n  }\n\n  if (stroke && element.hasAttribute('stroke')) {\n    element.setAttribute('stroke', stroke);\n  }\n\n  if (size && element.hasAttribute('width')) {\n    element.setAttribute('width', size.toString());\n  }\n\n  if (size && element.hasAttribute('height')) {\n    element.setAttribute('height', size.toString());\n  }\n\n  // Recursively apply to all child elements\n  Array.from(element.children).forEach((child) => {\n    applyAttributesToElement(child, fill, stroke);\n  });\n};\n\nexport const Icon = React.forwardRef<HTMLDivElement, IconProps>((props, ref) => {\n  const {\n    name = '',\n    id,\n    className = '',\n    onClick,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ariaPressed,\n    ariaExpanded,\n    ariaControls,\n    fill,\n    stroke,\n    rotation = '0',\n    size,\n    shouldStopPropagation = false,\n    disabled = false,\n    htmlTitle\n  } = props;\n  const iconRotationClasses = {\n    '0': 'rotate-0',\n    '45': 'rotate-45',\n    '90': 'rotate-90',\n    '135': 'rotate-[135deg]',\n    '180': 'rotate-180',\n    '225': 'rotate-[225deg]',\n    '270': '-rotate-90',\n    '315': '-rotate-45'\n  };\n  const src = ICON_MAP[`/src/assets/icons/${name}.svg`];\n\n  if (!src) {\n    console.error(`Icon \"${name}\" not found in ICON_MAP.`);\n    return null;\n  }\n\n  const isInteractive = typeof onClick === 'function';\n  const computedAriaLabel = ariaLabel || name;\n\n  if (isInteractive && !ariaLabel && (import.meta as { env?: { DEV?: boolean } }).env?.DEV) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `[se-design/Icon] Missing ariaLabel for clickable icon \"${name}\". ` +\n        `Falling back to aria-label=\"${computedAriaLabel}\".`\n    );\n  }\n\n  const { pressProps, role, tabIndex, isDisabled } = useAccessiblePress({\n    isNative: false,\n    onClick: isInteractive ? (e: React.MouseEvent<HTMLElement>) => onClick?.(e) : undefined,\n    disabled: isInteractive ? disabled : false,\n    stopPropagation: shouldStopPropagation\n  });\n\n  // Compute accessible name/description props with correct precedence (aligns with Button/Link).\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel: computedAriaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  });\n\n  const interactiveProps = isInteractive\n    ? {\n        ...pressProps,\n        role,\n        tabIndex,\n        ...accessibleNameProps,\n        'aria-pressed': ariaPressed,\n        'aria-expanded': ariaExpanded,\n        'aria-controls': ariaControls || undefined\n      }\n    : undefined;\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={`se-design-svg-wrapper transition-transform duration-250 ease-linear rounded-[3px] ${\n        isInteractive ? `${isDisabled ? 'opacity-50 cursor-default' : 'cursor-pointer focus-outline'}` : ''\n      } ${className} ${iconRotationClasses[rotation]}`}\n      aria-hidden={!isInteractive ? 'true' : undefined}\n      title={htmlTitle}\n      {...interactiveProps}\n      data-automation-id={props?.automationId}\n    >\n      <ReactSVG\n        src={src}\n        wrapper=\"span\"\n        beforeInjection={(svg) => {\n          svg.setAttribute('aria-hidden', 'true');\n          svg.setAttribute('role', 'none');\n          applyAttributesToElement(svg, fill, stroke, size);\n        }}\n      />\n    </div>\n  );\n});\n\nIcon.displayName = 'Icon';\n"],"names":["ICON_MAP","import","applyAttributesToElement","element","fill","stroke","size","hasAttribute","getAttribute","setAttribute","toString","Array","from","children","forEach","child","Icon","React","forwardRef","props","ref","name","id","className","onClick","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaPressed","ariaExpanded","ariaControls","rotation","shouldStopPropagation","disabled","htmlTitle","iconRotationClasses","src","console","error","isInteractive","computedAriaLabel","pressProps","role","tabIndex","isDisabled","useAccessiblePress","isNative","e","undefined","stopPropagation","accessibleNameProps","getA11yNameAttributes","interactiveProps","createElement","_extends","title","automationId","ReactSVG","wrapper","beforeInjection","svg","displayName"],"mappings":"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"}

package/dist/index60.js

@@ -1,5 +1,122 @@
-const e = "data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_5121_25308)'%3e%3cpath%20d='M6.77349%2010.3359H1.71958C1.3912%2010.3359%201.125%2010.6021%201.125%2010.9305V15.9844C1.125%2016.3128%201.3912%2016.579%201.71958%2016.579H6.77349C7.10186%2016.579%207.36806%2016.3128%207.36806%2015.9844V10.9305C7.36806%2010.6021%207.10186%2010.3359%206.77349%2010.3359Z'%20stroke='black'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M15.9888%2010.3359H10.9349C10.6065%2010.3359%2010.3403%2010.6021%2010.3403%2010.9305V15.9844C10.3403%2016.3128%2010.6065%2016.579%2010.9349%2016.579H15.9888C16.3171%2016.579%2016.5834%2016.3128%2016.5834%2015.9844V10.9305C16.5834%2010.6021%2016.3171%2010.3359%2015.9888%2010.3359Z'%20stroke='black'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.3921%201.125H6.33823C6.00986%201.125%205.74365%201.3912%205.74365%201.71958V6.77349C5.74365%207.10186%206.00986%207.36806%206.33823%207.36806H11.3921C11.7205%207.36806%2011.9867%207.10186%2011.9867%206.77349V1.71958C11.9867%201.3912%2011.7205%201.125%2011.3921%201.125Z'%20stroke='black'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_5121_25308'%3e%3crect%20width='18'%20height='18'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+import e, { useState as p, useRef as g, useEffect as I } from "react";
+import { Button as x } from "./index4.js";
+const n = 40, f = 7, y = 3, T = Array.from({
+  length: 12
+}, (r, o) => String(o + 1).padStart(2, "0")), w = Array.from({
+  length: 60
+}, (r, o) => String(o).padStart(2, "0")), M = ["AM", "PM"], h = ({
+  items: r,
+  selectedIndex: o,
+  onSelect: d,
+  automationId: u = ""
+}) => {
+  const l = g(null), s = g(null);
+  I(() => {
+    l.current && l.current.scrollTo({
+      top: o * n,
+      behavior: "smooth"
+    });
+  }, [o]);
+  const a = () => {
+    l.current && (s.current && clearTimeout(s.current), s.current = setTimeout(() => {
+      const t = l.current;
+      if (!t) return;
+      const c = Math.round(t.scrollTop / n), m = Math.max(0, Math.min(r.length - 1, c));
+      t.scrollTo({
+        top: m * n,
+        behavior: "smooth"
+      }), m !== o && d(m);
+    }, 100));
+  }, i = (t) => {
+    d(t), l.current?.scrollTo({
+      top: t * n,
+      behavior: "smooth"
+    });
+  };
+  return /* @__PURE__ */ e.createElement("div", {
+    className: "w-14"
+  }, /* @__PURE__ */ e.createElement("div", {
+    ref: l,
+    className: "overflow-y-auto [&::-webkit-scrollbar]:hidden",
+    onScroll: a,
+    style: {
+      height: f * n,
+      paddingTop: y * n,
+      paddingBottom: y * n,
+      scrollSnapType: "y mandatory",
+      scrollbarWidth: "none"
+    }
+  }, r.map((t, c) => /* @__PURE__ */ e.createElement("div", {
+    key: t,
+    className: `flex items-center justify-center cursor-pointer select-none transition-colors h-10 ${c === o ? "text-[var(--color-blue-500)] font-semibold" : "text-[var(--color-gray-700)] hover:text-[var(--color-blue-500)]"}`,
+    onClick: () => i(c),
+    style: {
+      scrollSnapAlign: "center"
+    },
+    "data-automation-id": `${u}-item-${c}`
+  }, t))));
+}, $ = ({
+  initialHour: r = 12,
+  initialMinute: o = 0,
+  onApply: d,
+  ctaLabel: u = "Apply",
+  onClose: l,
+  className: s = "",
+  automationId: a = "timepicker"
+}) => {
+  const [i, t] = p(() => r === 0 ? 11 : r > 12 ? r - 12 - 1 : r - 1), [c, m] = p(Math.max(0, Math.min(59, o ?? 0))), [v, E] = p(
+    () => r >= 12 ? 1 : 0
+    // 0-11 = AM, 12-23 = PM
+  ), b = () => {
+    const S = v === 1 ? i + 12 : i;
+    d?.({
+      hour: S + 1,
+      minute: c
+    }), l?.();
+  };
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-timepicker-container w-full min-w-[216px] bg-[var(--color-white)] rounded-xl shadow-md border border-[var(--color-gray-400)] overflow-hidden ${s}`
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-timepicker-content w-full relative p-4"
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "absolute left-4 right-4 top-1/2 -translate-y-1/2 h-10 bg-[var(--color-blue-50)] rounded-lg pointer-events-none z-0"
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: "flex justify-between gap-2 relative z-10"
+  }, /* @__PURE__ */ e.createElement(h, {
+    items: T,
+    selectedIndex: i,
+    onSelect: t,
+    automationId: `${a}-hours`
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: "w-px bg-[var(--color-gray-200)]",
+    style: {
+      height: f * n
+    }
+  }), /* @__PURE__ */ e.createElement(h, {
+    items: w,
+    selectedIndex: c,
+    onSelect: m,
+    automationId: `${a}-minutes`
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: "w-px bg-[var(--color-gray-200)]",
+    style: {
+      height: f * n
+    }
+  }), /* @__PURE__ */ e.createElement(h, {
+    items: M,
+    selectedIndex: v,
+    onSelect: E,
+    automationId: `${a}-periods`
+  }))), /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-timepicker-footer flex justify-end p-3 border-t border-[var(--color-gray-200)]"
+  }, /* @__PURE__ */ e.createElement(x, {
+    label: u,
+    type: "primary",
+    onClick: b,
+    automationId: `${a}-apply-button`
+  })));
+};
 export {
-  e as default
+  $ as TimePicker
 };
 //# sourceMappingURL=index60.js.map

package/dist/index60.js.map

@@ -1 +1 @@
-{"version":3,"file":"index60.js","sources":["../src/assets/icons/all-space.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_5121_25308)'%3e%3cpath%20d='M6.77349%2010.3359H1.71958C1.3912%2010.3359%201.125%2010.6021%201.125%2010.9305V15.9844C1.125%2016.3128%201.3912%2016.579%201.71958%2016.579H6.77349C7.10186%2016.579%207.36806%2016.3128%207.36806%2015.9844V10.9305C7.36806%2010.6021%207.10186%2010.3359%206.77349%2010.3359Z'%20stroke='black'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M15.9888%2010.3359H10.9349C10.6065%2010.3359%2010.3403%2010.6021%2010.3403%2010.9305V15.9844C10.3403%2016.3128%2010.6065%2016.579%2010.9349%2016.579H15.9888C16.3171%2016.579%2016.5834%2016.3128%2016.5834%2015.9844V10.9305C16.5834%2010.6021%2016.3171%2010.3359%2015.9888%2010.3359Z'%20stroke='black'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.3921%201.125H6.33823C6.00986%201.125%205.74365%201.3912%205.74365%201.71958V6.77349C5.74365%207.10186%206.00986%207.36806%206.33823%207.36806H11.3921C11.7205%207.36806%2011.9867%207.10186%2011.9867%206.77349V1.71958C11.9867%201.3912%2011.7205%201.125%2011.3921%201.125Z'%20stroke='black'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_5121_25308'%3e%3crect%20width='18'%20height='18'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e\""],"names":["__vite_glob_0_3"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index60.js","sources":["../src/components/TimePicker/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { Button } from '../Button';\n\nexport interface TimePickerProps {\n  initialHour?: number;\n  initialMinute?: number;\n  onApply?: (time: { hour: number; minute: number }) => void;\n  ctaLabel?: string;\n  onClose?: () => void;\n  className?: string;\n  automationId?: string;\n}\n\nconst ITEM_HEIGHT = 40;\nconst VISIBLE_ITEMS = 7;\nconst BUFFER_ITEMS = 3;\n\nconst HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0'));\nconst MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));\nconst PERIODS: ('AM' | 'PM')[] = ['AM', 'PM'];\n\ninterface ScrollColumnProps {\n  items: readonly string[];\n  selectedIndex: number;\n  onSelect: (index: number) => void;\n  automationId?: string;\n}\n\nconst ScrollColumn: React.FC<ScrollColumnProps> = ({ items, selectedIndex, onSelect, automationId = '' }) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current.scrollTo({ top: selectedIndex * ITEM_HEIGHT, behavior: 'smooth' });\n    }\n  }, [selectedIndex]);\n\n  const handleScroll = () => {\n    if (!containerRef.current) return;\n\n    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);\n\n    scrollTimeout.current = setTimeout(() => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const newIndex = Math.round(container.scrollTop / ITEM_HEIGHT);\n      const clampedIndex = Math.max(0, Math.min(items.length - 1, newIndex));\n\n      container.scrollTo({ top: clampedIndex * ITEM_HEIGHT, behavior: 'smooth' });\n\n      if (clampedIndex !== selectedIndex) onSelect(clampedIndex);\n    }, 100);\n  };\n\n  const handleItemClick = (index: number) => {\n    onSelect(index);\n    containerRef.current?.scrollTo({ top: index * ITEM_HEIGHT, behavior: 'smooth' });\n  };\n\n  return (\n    <div className=\"w-14\">\n      <div\n        ref={containerRef}\n        className=\"overflow-y-auto [&::-webkit-scrollbar]:hidden\"\n        onScroll={handleScroll}\n        style={{\n          height: VISIBLE_ITEMS * ITEM_HEIGHT,\n          paddingTop: BUFFER_ITEMS * ITEM_HEIGHT,\n          paddingBottom: BUFFER_ITEMS * ITEM_HEIGHT,\n          scrollSnapType: 'y mandatory',\n          scrollbarWidth: 'none'\n        }}\n      >\n        {items.map((item, index) => (\n          <div\n            key={item}\n            className={`flex items-center justify-center cursor-pointer select-none transition-colors h-10 ${\n              index === selectedIndex\n                ? 'text-[var(--color-blue-500)] font-semibold'\n                : 'text-[var(--color-gray-700)] hover:text-[var(--color-blue-500)]'\n            }`}\n            onClick={() => handleItemClick(index)}\n            style={{ scrollSnapAlign: 'center' }}\n            data-automation-id={`${automationId}-item-${index}`}\n          >\n            {item}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport const TimePicker: React.FC<TimePickerProps> = ({\n  initialHour = 12,\n  initialMinute = 0,\n  onApply,\n  ctaLabel = 'Apply',\n  onClose,\n  className = '',\n  automationId = 'timepicker'\n}) => {\n  const [selectedHourIndex, setSelectedHourIndex] = useState(() => {\n    if (initialHour === 0) return 11; // 0 = 12 AM\n    if (initialHour > 12) return initialHour - 12 - 1; // 13-23 → 1-11 (PM hours)\n    return initialHour - 1; // 1-12 → 0-11\n  });\n  const [selectedMinuteIndex, setSelectedMinuteIndex] = useState(Math.max(0, Math.min(59, initialMinute ?? 0)));\n  const [selectedPeriodIndex, setSelectedPeriodIndex] = useState(\n    () => (initialHour >= 12 ? 1 : 0) // 0-11 = AM, 12-23 = PM\n  );\n\n  const handleApply = () => {\n    const hourIn24Format = selectedPeriodIndex === 1 ? selectedHourIndex + 12 : selectedHourIndex;\n    onApply?.({\n      hour: hourIn24Format + 1,\n      minute: selectedMinuteIndex\n    });\n    onClose?.();\n  };\n\n  return (\n    <div\n      className={`se-design-timepicker-container w-full min-w-[216px] bg-[var(--color-white)] rounded-xl shadow-md border border-[var(--color-gray-400)] overflow-hidden ${className}`}\n    >\n      <div className=\"se-design-timepicker-content w-full relative p-4\">\n        <div className=\"absolute left-4 right-4 top-1/2 -translate-y-1/2 h-10 bg-[var(--color-blue-50)] rounded-lg pointer-events-none z-0\" />\n        <div className=\"flex justify-between gap-2 relative z-10\">\n          <ScrollColumn\n            items={HOURS}\n            selectedIndex={selectedHourIndex}\n            onSelect={setSelectedHourIndex}\n            automationId={`${automationId}-hours`}\n          />\n          <div className=\"w-px bg-[var(--color-gray-200)]\" style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }} />\n          <ScrollColumn\n            items={MINUTES}\n            selectedIndex={selectedMinuteIndex}\n            onSelect={setSelectedMinuteIndex}\n            automationId={`${automationId}-minutes`}\n          />\n          <div className=\"w-px bg-[var(--color-gray-200)]\" style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }} />\n          <ScrollColumn\n            items={PERIODS}\n            selectedIndex={selectedPeriodIndex}\n            onSelect={setSelectedPeriodIndex}\n            automationId={`${automationId}-periods`}\n          />\n        </div>\n      </div>\n      <div className=\"se-design-timepicker-footer flex justify-end p-3 border-t border-[var(--color-gray-200)]\">\n        <Button label={ctaLabel} type=\"primary\" onClick={handleApply} automationId={`${automationId}-apply-button`} />\n      </div>\n    </div>\n  );\n};\n"],"names":["ITEM_HEIGHT","VISIBLE_ITEMS","BUFFER_ITEMS","HOURS","Array","from","length","_","i","String","padStart","MINUTES","PERIODS","ScrollColumn","items","selectedIndex","onSelect","automationId","containerRef","useRef","scrollTimeout","useEffect","current","scrollTo","top","behavior","handleScroll","clearTimeout","setTimeout","container","newIndex","Math","round","scrollTop","clampedIndex","max","min","handleItemClick","index","React","createElement","className","ref","onScroll","style","height","paddingTop","paddingBottom","scrollSnapType","scrollbarWidth","map","item","key","onClick","scrollSnapAlign","TimePicker","initialHour","initialMinute","onApply","ctaLabel","onClose","selectedHourIndex","setSelectedHourIndex","useState","selectedMinuteIndex","setSelectedMinuteIndex","selectedPeriodIndex","setSelectedPeriodIndex","handleApply","hourIn24Format","hour","minute","Button","label","type"],"mappings":"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"}

package/dist/index61.js

@@ -1,5 +1,81 @@
-const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='11'%20viewBox='0%200%208%2011'%20fill='none'%3e%3cpath%20d='M5.2%207.9359L5.2%203.32051C5.2%202.75407%204.66274%202.29487%204%202.29487C3.33726%202.29487%202.8%202.75407%202.8%203.32051L2.8%208.70513C2.8%209.69641%203.7402%2010.5%204.9%2010.5C6.0598%2010.5%207%209.69641%207%208.70513L7%203.0641C7%201.64799%205.65685%200.5%204%200.5C2.34315%200.5%201%201.64799%201%203.0641L1%207.9359'%20stroke='%23415575'%20stroke-width='0.8'%20stroke-linecap='round'/%3e%3c/svg%3e";
+import n, { useState as u, useCallback as y, useEffect as P } from "react";
+import { Popover as I } from "./index19.js";
+import { useStableId as k } from "./index205.js";
+/* empty css         */
+function p() {
+  return p = Object.assign ? Object.assign.bind() : function(r) {
+    for (var o = 1; o < arguments.length; o++) {
+      var s = arguments[o];
+      for (var t in s) ({}).hasOwnProperty.call(s, t) && (r[t] = s[t]);
+    }
+    return r;
+  }, p.apply(null, arguments);
+}
+const N = ({
+  label: r,
+  children: o,
+  iconColor: s = "",
+  hoverBackgroundColor: t,
+  isDisabled: i = !1,
+  noPadding: m = !1,
+  noDescribedBy: g = !1
+}) => {
+  const c = k(void 0, "info-tooltip"), [v, a] = u(!1), [E, l] = u(!1), d = v || E, f = y((e) => {
+    e.key === "Escape" && (a(!1), l(!1), e.stopImmediatePropagation());
+  }, []);
+  P(() => {
+    if (d)
+      return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
+  }, [d, f]);
+  const b = {
+    onMouseEnter: () => a(!0),
+    onMouseLeave: () => a(!1),
+    onFocus: (e) => {
+      e.target.matches(":focus-visible") && l(!0);
+    },
+    onBlur: () => l(!1)
+  };
+  return /* @__PURE__ */ n.createElement("div", p({
+    className: `se-design-info-tooltip-outer ${i ? "se-design-info-tooltip-wrapper-disabled" : ""}`
+  }, i ? {} : b), /* @__PURE__ */ n.createElement(I, {
+    className: "inline-flex items-center",
+    position: "bottom-center",
+    isPopoverOpen: d,
+    onPopoverToggle: (e) => {
+      e || (a(!1), l(!1));
+    },
+    renderPopoverSrcElement: () => {
+      const e = !g && /* @__PURE__ */ n.isValidElement(o) ? /* @__PURE__ */ n.cloneElement(o, {
+        "aria-describedby": c,
+        ariaDescribedBy: c
+      }) : o;
+      return /* @__PURE__ */ n.createElement("div", {
+        className: `se-design-info-tooltip-src ${m ? "no-padding" : ""} ${i ? "se-design-info-tooltip-disabled" : ""}`,
+        style: {
+          "--info-tooltip-icon-color": s,
+          ...t ? {
+            "--info-tooltip-hover-bg": t
+          } : {},
+          cursor: i ? "not-allowed" : "pointer"
+        }
+      }, e);
+    },
+    renderPopoverContents: () => /* @__PURE__ */ n.createElement("div", {
+      id: c,
+      role: "tooltip",
+      className: "se-design-info-tooltip-content",
+      "data-automation-id": "se-design-info-tooltip-content"
+    }, r),
+    isWithPortal: !0,
+    noBorder: !0,
+    disableClickToggle: !0,
+    popoverContentStyleProperty: {
+      zIndex: 2e3,
+      backgroundColor: ""
+    }
+  }));
+};
 export {
-  e as default
+  N as InfoTooltip
 };
 //# sourceMappingURL=index61.js.map

package/dist/index61.js.map

@@ -1 +1 @@
-{"version":3,"file":"index61.js","sources":["../src/assets/icons/attachment.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='11'%20viewBox='0%200%208%2011'%20fill='none'%3e%3cpath%20d='M5.2%207.9359L5.2%203.32051C5.2%202.75407%204.66274%202.29487%204%202.29487C3.33726%202.29487%202.8%202.75407%202.8%203.32051L2.8%208.70513C2.8%209.69641%203.7402%2010.5%204.9%2010.5C6.0598%2010.5%207%209.69641%207%208.70513L7%203.0641C7%201.64799%205.65685%200.5%204%200.5C2.34315%200.5%201%201.64799%201%203.0641L1%207.9359'%20stroke='%23415575'%20stroke-width='0.8'%20stroke-linecap='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_4"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index61.js","sources":["../src/components/InfoTooltip/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Popover } from '../Popover';\nimport { useStableId } from '../../utils/useStableId';\nimport './styles.scss';\n\nexport interface InfoTooltipProps {\n  label: string;\n  children: React.ReactNode;\n  iconColor?: string;\n  /**\n   * Background color shown on hover. Defaults to var(--color-blue-200).\n   */\n  hoverBackgroundColor?: string;\n  isDisabled?: boolean;\n  /**\n   * Remove padding from tooltip wrapper (useful for precise alignment)\n   */\n  noPadding?: boolean;\n  /**\n   * When true, skips wiring aria-describedby between the trigger and tooltip content.\n   * Use when the tooltip label duplicates the trigger's accessible name — avoids redundant announcements.\n   */\n  noDescribedBy?: boolean;\n}\n\nexport const InfoTooltip = ({\n  label,\n  children,\n  iconColor = '',\n  hoverBackgroundColor,\n  isDisabled = false,\n  noPadding = false,\n  noDescribedBy = false\n}: InfoTooltipProps) => {\n  const tooltipContentId = useStableId(undefined, 'info-tooltip');\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Show tooltip on hover OR focus (for keyboard accessibility)\n  const isOpen = isHovered || isFocused;\n\n  // Global Escape key handler (W3C WAI-ARIA tooltip pattern requirement)\n  const handleEscapeKey = useCallback((event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      setIsHovered(false);\n      setIsFocused(false);\n      // Prevent other handlers (e.g., modal) from also closing - \"innermost first\" pattern\n      event.stopImmediatePropagation();\n    }\n  }, []);\n\n  useEffect(() => {\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscapeKey);\n      return () => document.removeEventListener('keydown', handleEscapeKey);\n    }\n  }, [isOpen, handleEscapeKey]);\n\n  const interactionHandlers = {\n    onMouseEnter: () => setIsHovered(true),\n    onMouseLeave: () => setIsHovered(false),\n    onFocus: (event: React.FocusEvent<HTMLDivElement>) => {\n      const focusTarget = event.target as HTMLElement;\n      if (focusTarget.matches(':focus-visible')) {\n        setIsFocused(true);\n      }\n    },\n    onBlur: () => setIsFocused(false)\n  };\n\n  return (\n    <div\n      className={`se-design-info-tooltip-outer ${isDisabled ? 'se-design-info-tooltip-wrapper-disabled' : ''}`}\n      {...(isDisabled ? {} : interactionHandlers)}\n    >\n      <Popover\n        className=\"inline-flex items-center\"\n        position={'bottom-center'}\n        isPopoverOpen={isOpen}\n        onPopoverToggle={(open) => {\n          // Sync popover state changes (e.g., Escape key) back to component state\n          if (!open) {\n            setIsHovered(false);\n            setIsFocused(false);\n          }\n        }}\n        renderPopoverSrcElement={() => {\n          const trigger =\n            !noDescribedBy && React.isValidElement(children)\n              ? React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {\n                  'aria-describedby': tooltipContentId,\n                  ariaDescribedBy: tooltipContentId\n                })\n              : children;\n          return (\n            <div\n              className={`se-design-info-tooltip-src ${noPadding ? 'no-padding' : ''} ${\n                isDisabled ? 'se-design-info-tooltip-disabled' : ''\n              }`}\n              style={\n                {\n                  '--info-tooltip-icon-color': iconColor,\n                  ...(hoverBackgroundColor ? { '--info-tooltip-hover-bg': hoverBackgroundColor } : {}),\n                  cursor: isDisabled ? 'not-allowed' : 'pointer'\n                } as React.CSSProperties\n              }\n            >\n              {trigger}\n            </div>\n          );\n        }}\n        renderPopoverContents={() => (\n          <div\n            id={tooltipContentId}\n            role=\"tooltip\"\n            className=\"se-design-info-tooltip-content\"\n            data-automation-id=\"se-design-info-tooltip-content\"\n          >\n            {label}\n          </div>\n        )}\n        isWithPortal\n        noBorder\n        disableClickToggle\n        popoverContentStyleProperty={{\n          zIndex: 2000,\n          backgroundColor: ''\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["InfoTooltip","label","children","iconColor","hoverBackgroundColor","isDisabled","noPadding","noDescribedBy","tooltipContentId","useStableId","undefined","isHovered","setIsHovered","useState","isFocused","setIsFocused","isOpen","handleEscapeKey","useCallback","event","key","stopImmediatePropagation","useEffect","document","addEventListener","removeEventListener","interactionHandlers","onMouseEnter","onMouseLeave","onFocus","target","matches","onBlur","React","createElement","_extends","className","Popover","position","isPopoverOpen","onPopoverToggle","open","renderPopoverSrcElement","trigger","isValidElement","cloneElement","ariaDescribedBy","style","cursor","renderPopoverContents","id","role","isWithPortal","noBorder","disableClickToggle","popoverContentStyleProperty","zIndex","backgroundColor"],"mappings":";;;;;;;;;;;;;AAyBO,MAAMA,IAAcA,CAAC;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,sBAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,WAAAA,IAAY;AAAA,EACZC,eAAAA,IAAgB;AACA,MAAM;AACtB,QAAMC,IAAmBC,EAAYC,QAAW,cAAc,GACxD,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAG1CG,IAASL,KAAaG,GAGtBG,IAAkBC,EAAY,CAACC,MAAyB;AAC5D,IAAIA,EAAMC,QAAQ,aAChBR,EAAa,EAAK,GAClBG,EAAa,EAAK,GAElBI,EAAME,yBAAAA;AAAAA,EAEV,GAAG,CAAA,CAAE;AAELC,EAAAA,EAAU,MAAM;AACd,QAAIN;AACFO,sBAASC,iBAAiB,WAAWP,CAAe,GAC7C,MAAMM,SAASE,oBAAoB,WAAWR,CAAe;AAAA,EAExE,GAAG,CAACD,GAAQC,CAAe,CAAC;AAE5B,QAAMS,IAAsB;AAAA,IAC1BC,cAAcA,MAAMf,EAAa,EAAI;AAAA,IACrCgB,cAAcA,MAAMhB,EAAa,EAAK;AAAA,IACtCiB,SAASA,CAACV,MAA4C;AAEpD,MADoBA,EAAMW,OACVC,QAAQ,gBAAgB,KACtChB,EAAa,EAAI;AAAA,IAErB;AAAA,IACAiB,QAAQA,MAAMjB,EAAa,EAAK;AAAA,EAAA;AAGlC,SACEkB,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEC,WAAW,gCAAgC/B,IAAa,4CAA4C,EAAE;AAAA,EAAA,GACjGA,IAAa,CAAA,IAAKqB,CAAmB,GAE1CO,gBAAAA,EAAAC,cAACG,GAAO;AAAA,IACND,WAAU;AAAA,IACVE,UAAU;AAAA,IACVC,eAAevB;AAAAA,IACfwB,iBAAkBC,CAAAA,MAAS;AAEzB,MAAKA,MACH7B,EAAa,EAAK,GAClBG,EAAa,EAAK;AAAA,IAEtB;AAAA,IACA2B,yBAAyBA,MAAM;AAC7B,YAAMC,IACJ,CAACpC,KAAiB0B,gBAAAA,EAAMW,eAAe1C,CAAQ,IAC3C+B,gBAAAA,EAAMY,aAAa3C,GAAyD;AAAA,QAC1E,oBAAoBM;AAAAA,QACpBsC,iBAAiBtC;AAAAA,MAAAA,CAClB,IACDN;AACN,aACE+B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,QACEE,WAAW,8BAA8B9B,IAAY,eAAe,EAAE,IACpED,IAAa,oCAAoC,EAAE;AAAA,QAErD0C,OACE;AAAA,UACE,6BAA6B5C;AAAAA,UAC7B,GAAIC,IAAuB;AAAA,YAAE,2BAA2BA;AAAAA,UAAAA,IAAyB,CAAA;AAAA,UACjF4C,QAAQ3C,IAAa,gBAAgB;AAAA,QAAA;AAAA,MACvC,GAGDsC,CACE;AAAA,IAET;AAAA,IACAM,uBAAuBA,MACrBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEgB,IAAI1C;AAAAA,MACJ2C,MAAK;AAAA,MACLf,WAAU;AAAA,MACV,sBAAmB;AAAA,IAAA,GAElBnC,CACE;AAAA,IAEPmD,cAAY;AAAA,IACZC,UAAQ;AAAA,IACRC,oBAAkB;AAAA,IAClBC,6BAA6B;AAAA,MAC3BC,QAAQ;AAAA,MACRC,iBAAiB;AAAA,IAAA;AAAA,EACnB,CACD,CACE;AAET;"}

package/dist/index62.js

@@ -1,5 +1,155 @@
-const e = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.2727%2010.0535H2'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M6.49198%2014.5454L2%2010.0535L6.49198%205.56149'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+import o, { useState as B, useRef as C, useCallback as m, useEffect as w } from "react";
+import { Button as L } from "./index4.js";
+import { Tooltip as D } from "./index16.js";
+/* empty css         */
+const u = {
+  gotIt: "got_it",
+  finish: "finish",
+  next: "next",
+  back: "back"
+}, Q = ({
+  steps: e = [],
+  screenBaseElementSelector: T = "",
+  handleCloseProductTour: d,
+  tourType: g = "",
+  automationId: f = "onboarding-tour",
+  highlightBorderRadius: E = 6,
+  labels: A
+}) => {
+  const [t, k] = B(0), c = C(null), l = C(null), {
+    next: H = "Next",
+    gotIt: P = "Got It",
+    finish: M = "Finish",
+    skip: W = "Skip tour",
+    stepInfo: O = "Step {step} of {total}"
+  } = A || {}, s = document.querySelector(T), y = m(() => {
+    let n;
+    if (t >= e.length)
+      return n;
+    const i = document.querySelector(e[t]?.targetElementContainerSelector ? e[t].targetElementContainerSelector : e[t]?.targetElementSelector);
+    if (!i)
+      return n;
+    const r = i.getBoundingClientRect();
+    return r.top >= 0 && r.left >= 0 && r.bottom <= window.innerHeight && r.right <= window.innerWidth || (r.top < 0 ? i.scrollIntoView({
+      behavior: "auto",
+      block: "start"
+    }) : r.bottom > window.innerHeight && i.scrollIntoView({
+      behavior: "auto",
+      block: "end"
+    })), n = setTimeout(() => {
+      const x = document.querySelector(e[t]?.targetElementSelector);
+      if (!x || !c.current || !l.current)
+        return;
+      const a = x.getBoundingClientRect(), p = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+      c.current.style.height = `${p}px`;
+      const h = e[t]?.targetElementGap || {
+        horizontal: 0,
+        vertical: 0
+      }, S = E * 2, I = a.left - h.horizontal, N = a.top + window.scrollY - h.vertical, z = a.right + h.horizontal, F = a.bottom + window.scrollY + h.vertical, G = z - I, q = F - N, R = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), _ = encodeURIComponent(`
+      <svg width="${R}" height="${p}" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <mask id="highlight-mask-${t}">
+            <rect x="0" y="0" width="${R}" height="${p}" fill="white"/>
+            <rect x="${I}" y="${N}" width="${G}" height="${q}" rx="${S}" ry="${S}" fill="black"/>
+          </mask>
+        </defs>
+      </svg>
+    `);
+      c.current.style.maskImage = `url("data:image/svg+xml,${_}#highlight-mask-${t}")`, c.current.style.webkitMaskImage = `url("data:image/svg+xml,${_}#highlight-mask-${t}")`, l.current.style.top = `${a.top}px`, l.current.style.left = `${a.left}px`, l.current.style.width = `${a.width}px`, l.current.style.height = `${a.height}px`, l.current.style.borderRadius = `${E}px`;
+    }, 50), n;
+  }, [t, e]), V = m(() => {
+    d(), s && s.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  }, [d, s]), v = m((n) => {
+    n?.preventDefault(), n?.stopPropagation(), t < e.length - 1 ? k((i) => i + 1) : (d(n), s && s.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    })), e[t]?.tourMixPanelHandler?.({
+      user_path: g,
+      action_type: `clicked_${t === e.length - 1 ? e.length === 1 ? u.gotIt : u.finish : u.next}`
+    });
+  }, [t, e, d, g, s]), $ = m(() => {
+    t > 0 && k((n) => n - 1), e[t]?.tourMixPanelHandler?.({
+      user_path: g,
+      action_type: `clicked_${u.back}`
+    });
+  }, [t, e, g]), b = m((n) => {
+    (n.keyCode === 37 || n.key === "ArrowLeft") && t > 0 && $(), (n.keyCode === 39 || n.key === "ArrowRight") && v();
+  }, [t, v, $]);
+  return w(() => (window.addEventListener("keydown", b), () => {
+    window.removeEventListener("keydown", b);
+  }), [b]), w(() => {
+    let n;
+    return t < e.length && (n = y()), () => {
+      n && clearTimeout(n);
+    };
+  }, [t, e, y]), w(() => {
+    if (t < e.length && c.current) {
+      const n = c.current, i = (r) => {
+        r.preventDefault(), r.stopPropagation();
+      };
+      return n.addEventListener("wheel", i, {
+        passive: !1
+      }), n.addEventListener("touchmove", i, {
+        passive: !1
+      }), n.addEventListener("scroll", i, {
+        passive: !1
+      }), () => {
+        n.removeEventListener("wheel", i), n.removeEventListener("touchmove", i), n.removeEventListener("scroll", i);
+      };
+    }
+  }, [t]), !e || e.length === 0 ? null : /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", {
+    className: "se-design-onboarding-tour-overlay",
+    ref: c,
+    "data-automation-id": `${f}-overlay`
+  }), /* @__PURE__ */ o.createElement(D, {
+    content: /* @__PURE__ */ o.createElement("div", {
+      className: "se-design-onboarding-tour-tooltip-content"
+    }, e[t]?.content?.illustration && /* @__PURE__ */ o.createElement("img", {
+      src: e[t].content.illustration,
+      className: "se-design-onboarding-tour-illustration",
+      alt: "illustration"
+    }), /* @__PURE__ */ o.createElement("div", {
+      className: "se-design-onboarding-tour-content"
+    }, e[t]?.content?.title && /* @__PURE__ */ o.createElement("p", {
+      className: "se-design-onboarding-tour-title"
+    }, e[t].content.title), e[t]?.content?.description && /* @__PURE__ */ o.createElement("p", {
+      className: "se-design-onboarding-tour-description"
+    }, e[t].content.description)), /* @__PURE__ */ o.createElement("div", {
+      className: "se-design-onboarding-tour-actions"
+    }, e.length > 1 && /* @__PURE__ */ o.createElement("span", {
+      className: "steps"
+    }, O.replace("{step}", `${t + 1}`).replace("{total}", `${e.length}`)), /* @__PURE__ */ o.createElement("div", {
+      className: "btns-container"
+    }, t !== e.length - 1 && /* @__PURE__ */ o.createElement(L, {
+      theme: "white",
+      type: "link",
+      label: W,
+      automationId: `${f}-skip-button`,
+      onClick: V
+    }), /* @__PURE__ */ o.createElement(L, {
+      theme: "white",
+      type: "primary",
+      size: "sm",
+      label: t === e.length - 1 ? e.length === 1 ? P : M : H,
+      automationId: `${f}-next-button`,
+      onClick: v
+    })))),
+    tooltipSrc: /* @__PURE__ */ o.createElement("div", {
+      className: "blocker",
+      ref: l
+    }),
+    tooltipSrcRef: l,
+    position: e[t]?.tooltipPosition || "bottom-center",
+    tooltipOffset: 16,
+    displayOn: "always-on",
+    isWithPortal: !0,
+    maxWidth: 384
+  }));
+};
 export {
-  e as default
+  Q as OnboardingTour
 };
 //# sourceMappingURL=index62.js.map

package/dist/index62.js.map

@@ -1 +1 @@
-{"version":3,"file":"index62.js","sources":["../src/assets/icons/back.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.2727%2010.0535H2'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M6.49198%2014.5454L2%2010.0535L6.49198%205.56149'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_5"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index62.js","sources":["../src/components/OnboardingTour/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef, useState, useCallback } from 'react';\n\nimport { Button } from 'components/Button';\nimport { Tooltip } from 'components/Tooltip';\n\nimport './style.scss';\n\nconst TOUR_NAVIGATION_STEPS = {\n  gotIt: 'got_it',\n  finish: 'finish',\n  next: 'next',\n  back: 'back'\n};\n\nexport interface TourStep {\n  targetElementSelector: string;\n  targetElementContainerSelector?: string;\n  targetElementGap?: {\n    horizontal: number;\n    vertical: number;\n  };\n  tooltipPosition?:\n    | 'top-left'\n    | 'top-center'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-center'\n    | 'bottom-right'\n    | 'left-top'\n    | 'left-center'\n    | 'left-bottom'\n    | 'right-top'\n    | 'right-center'\n    | 'right-bottom';\n  content: {\n    title?: string;\n    description?: string;\n    illustration?: any;\n  };\n  tourMixPanelHandler?: (data: { user_path: string; action_type: string }) => void;\n}\n\nexport interface OnboardingTourProps {\n  steps: TourStep[];\n  screenBaseElementSelector: string;\n  handleCloseProductTour: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n  tourType?: string;\n  highlightBorderRadius?: number;\n  automationId?: string;\n  labels?: {\n    next: string;\n    gotIt: string;\n    finish: string;\n    skip: string;\n    stepInfo: string;\n  };\n}\n\nexport const OnboardingTour: FC<OnboardingTourProps> = ({\n  steps = [],\n  screenBaseElementSelector = '',\n  handleCloseProductTour,\n  tourType = '',\n  automationId = 'onboarding-tour',\n  highlightBorderRadius = 6,\n  labels\n}) => {\n  const [currentStep, setCurrentStep] = useState(0);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const blockerRef = useRef<HTMLDivElement>(null);\n\n  const {\n    next = 'Next',\n    gotIt = 'Got It',\n    finish = 'Finish',\n    skip = 'Skip tour',\n    stepInfo = 'Step {step} of {total}'\n  } = labels || {};\n\n  const parentScreenElement = document.querySelector(screenBaseElementSelector) as HTMLElement | null;\n\n  const clipTargetElementAndPositionTooltip = useCallback(() => {\n    let timerId: any;\n\n    if (currentStep >= steps.length) {\n      return timerId;\n    }\n\n    // get the target element\n    const initialTargetElement = document.querySelector(\n      steps[currentStep]?.targetElementContainerSelector\n        ? steps[currentStep].targetElementContainerSelector\n        : steps[currentStep]?.targetElementSelector\n    ) as HTMLElement | null;\n\n    if (!initialTargetElement) {\n      return timerId;\n    }\n\n    const initialTargetArea = initialTargetElement.getBoundingClientRect();\n\n    // check whether target element is fully visible in viewport\n    const isFullyVisible =\n      initialTargetArea.top >= 0 &&\n      initialTargetArea.left >= 0 &&\n      initialTargetArea.bottom <= window.innerHeight &&\n      initialTargetArea.right <= window.innerWidth;\n\n    if (!isFullyVisible) {\n      if (initialTargetArea.top < 0) {\n        initialTargetElement.scrollIntoView({ behavior: 'auto', block: 'start' });\n      } else if (initialTargetArea.bottom > window.innerHeight) {\n        initialTargetElement.scrollIntoView({ behavior: 'auto', block: 'end' });\n      }\n    }\n\n    // if the target element is visible, then clip the target element and position the tooltip\n    timerId = setTimeout(() => {\n      const targetElement = document.querySelector(steps[currentStep]?.targetElementSelector) as HTMLElement | null;\n\n      if (!targetElement || !overlayRef.current || !blockerRef.current) {\n        return;\n      }\n\n      const targetArea = targetElement.getBoundingClientRect();\n\n      const documentHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);\n\n      // Update overlay dimensions and calculate target element area to focus\n      overlayRef.current.style.height = `${documentHeight}px`;\n\n      // Providing gap around target element\n      const targetElementGap = steps[currentStep]?.targetElementGap || { horizontal: 0, vertical: 0 };\n\n      // clip the target element with rounded corners\n      const borderRadius = highlightBorderRadius * 2;\n      const left = targetArea.left - targetElementGap.horizontal;\n      const top = targetArea.top + window.scrollY - targetElementGap.vertical;\n      const right = targetArea.right + targetElementGap.horizontal;\n      const bottom = targetArea.bottom + window.scrollY + targetElementGap.vertical;\n      const width = right - left;\n      const height = bottom - top;\n      const documentWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);\n\n      // Create SVG mask with rounded rectangle hole\n      const svgMask = encodeURIComponent(`\n      <svg width=\"${documentWidth}\" height=\"${documentHeight}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <defs>\n          <mask id=\"highlight-mask-${currentStep}\">\n            <rect x=\"0\" y=\"0\" width=\"${documentWidth}\" height=\"${documentHeight}\" fill=\"white\"/>\n            <rect x=\"${left}\" y=\"${top}\" width=\"${width}\" height=\"${height}\" rx=\"${borderRadius}\" ry=\"${borderRadius}\" fill=\"black\"/>\n          </mask>\n        </defs>\n      </svg>\n    `);\n\n      // Apply created mask to the overlay\n      overlayRef.current.style.maskImage = `url(\"data:image/svg+xml,${svgMask}#highlight-mask-${currentStep}\")`;\n      overlayRef.current.style.webkitMaskImage = `url(\"data:image/svg+xml,${svgMask}#highlight-mask-${currentStep}\")`;\n\n      // Position blocker over clipped area to avoid clicks on the target element\n      blockerRef.current.style.top = `${targetArea.top}px`;\n      blockerRef.current.style.left = `${targetArea.left}px`;\n      blockerRef.current.style.width = `${targetArea.width}px`;\n      blockerRef.current.style.height = `${targetArea.height}px`;\n      blockerRef.current.style.borderRadius = `${highlightBorderRadius}px`;\n    }, 50);\n\n    return timerId;\n  }, [currentStep, steps]);\n\n  const handleSkipTour = useCallback(() => {\n    handleCloseProductTour();\n    if (parentScreenElement) {\n      parentScreenElement.scrollTo({ top: 0, behavior: 'smooth' });\n    }\n  }, [handleCloseProductTour, parentScreenElement]);\n\n  const handleNextClick = useCallback(\n    (e?: React.MouseEvent<HTMLButtonElement>) => {\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      if (currentStep < steps.length - 1) {\n        setCurrentStep((prev) => prev + 1);\n      } else {\n        handleCloseProductTour(e);\n        if (parentScreenElement) {\n          parentScreenElement.scrollTo({ top: 0, behavior: 'smooth' });\n        }\n      }\n      steps[currentStep]?.tourMixPanelHandler?.({\n        user_path: tourType,\n        action_type: `clicked_${\n          currentStep === steps.length - 1\n            ? steps.length === 1\n              ? TOUR_NAVIGATION_STEPS.gotIt\n              : TOUR_NAVIGATION_STEPS.finish\n            : TOUR_NAVIGATION_STEPS.next\n        }`\n      });\n    },\n    [currentStep, steps, handleCloseProductTour, tourType, parentScreenElement]\n  );\n\n  const handlePrevClick = useCallback(() => {\n    if (currentStep > 0) {\n      setCurrentStep((prev) => prev - 1);\n    }\n    steps[currentStep]?.tourMixPanelHandler?.({\n      user_path: tourType,\n      action_type: `clicked_${TOUR_NAVIGATION_STEPS.back}`\n    });\n  }, [currentStep, steps, tourType]);\n\n  const handleKeyPress = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.keyCode === 37 || e.key === 'ArrowLeft') {\n        // for previous navigation\n        if (currentStep > 0) {\n          handlePrevClick();\n        }\n      }\n      if (e.keyCode === 39 || e.key === 'ArrowRight') {\n        // for next navigation\n        handleNextClick();\n      }\n    },\n    [currentStep, handleNextClick, handlePrevClick]\n  );\n\n  useEffect(() => {\n    // Adding event listener for keydown\n    window.addEventListener('keydown', handleKeyPress);\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyPress);\n    };\n  }, [handleKeyPress]);\n\n  useEffect(() => {\n    let timerId: any;\n    if (currentStep < steps.length) {\n      timerId = clipTargetElementAndPositionTooltip();\n    }\n\n    return () => {\n      if (timerId) {\n        clearTimeout(timerId);\n      }\n    };\n  }, [currentStep, steps, clipTargetElementAndPositionTooltip]);\n\n  // To prevent scroll when tour is active\n  useEffect(() => {\n    if (currentStep < steps.length && overlayRef.current) {\n      const overlay = overlayRef.current;\n\n      const preventScroll = (e: Event) => {\n        e.preventDefault();\n        e.stopPropagation();\n      };\n\n      overlay.addEventListener('wheel', preventScroll, { passive: false });\n      overlay.addEventListener('touchmove', preventScroll, { passive: false });\n      overlay.addEventListener('scroll', preventScroll, { passive: false });\n\n      return () => {\n        overlay.removeEventListener('wheel', preventScroll);\n        overlay.removeEventListener('touchmove', preventScroll);\n        overlay.removeEventListener('scroll', preventScroll);\n      };\n    }\n  }, [currentStep]);\n\n  if (!steps || steps.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <div\n        className=\"se-design-onboarding-tour-overlay\"\n        ref={overlayRef}\n        data-automation-id={`${automationId}-overlay`}\n      />\n\n      <Tooltip\n        content={\n          <div className=\"se-design-onboarding-tour-tooltip-content\">\n            {steps[currentStep]?.content?.illustration && (\n              <img\n                src={steps[currentStep].content.illustration}\n                className=\"se-design-onboarding-tour-illustration\"\n                alt=\"illustration\"\n              />\n            )}\n            <div className=\"se-design-onboarding-tour-content\">\n              {steps[currentStep]?.content?.title && (\n                <p className=\"se-design-onboarding-tour-title\">{steps[currentStep].content.title}</p>\n              )}\n              {steps[currentStep]?.content?.description && (\n                <p className=\"se-design-onboarding-tour-description\">{steps[currentStep].content.description}</p>\n              )}\n            </div>\n\n            <div className=\"se-design-onboarding-tour-actions\">\n              {steps.length > 1 && (\n                <span className=\"steps\">\n                  {stepInfo.replace('{step}', `${currentStep + 1}`).replace('{total}', `${steps.length}`)}\n                </span>\n              )}\n              <div className=\"btns-container\">\n                {currentStep !== steps.length - 1 && (\n                  <Button\n                    theme=\"white\"\n                    type=\"link\"\n                    label={skip}\n                    automationId={`${automationId}-skip-button`}\n                    onClick={handleSkipTour}\n                  />\n                )}\n                <Button\n                  theme=\"white\"\n                  type=\"primary\"\n                  size=\"sm\"\n                  label={currentStep === steps.length - 1 ? (steps.length === 1 ? gotIt : finish) : next}\n                  automationId={`${automationId}-next-button`}\n                  onClick={handleNextClick}\n                />\n              </div>\n            </div>\n          </div>\n        }\n        tooltipSrc={<div className=\"blocker\" ref={blockerRef} />}\n        tooltipSrcRef={blockerRef as React.RefObject<HTMLDivElement>}\n        position={steps[currentStep]?.tooltipPosition || 'bottom-center'}\n        tooltipOffset={16}\n        displayOn=\"always-on\"\n        isWithPortal={true}\n        maxWidth={384}\n      />\n    </>\n  );\n};\n"],"names":["React__default","useState","useRef","useCallback","useEffect","Button","Tooltip","TOUR_NAVIGATION_STEPS","gotIt","finish","next","back","OnboardingTour","steps","screenBaseElementSelector","handleCloseProductTour","tourType","automationId","highlightBorderRadius","labels","currentStep","setCurrentStep","overlayRef","blockerRef","skip","stepInfo","parentScreenElement","document","querySelector","clipTargetElementAndPositionTooltip","timerId","length","initialTargetElement","targetElementContainerSelector","targetElementSelector","initialTargetArea","getBoundingClientRect","top","left","bottom","window","innerHeight","right","innerWidth","scrollIntoView","behavior","block","setTimeout","targetElement","current","targetArea","documentHeight","Math","max","documentElement","scrollHeight","body","style","height","targetElementGap","horizontal","vertical","borderRadius","scrollY","width","documentWidth","scrollWidth","svgMask","encodeURIComponent","maskImage","webkitMaskImage","handleSkipTour","scrollTo","handleNextClick","e","preventDefault","stopPropagation","prev","tourMixPanelHandler","user_path","action_type","handlePrevClick","handleKeyPress","keyCode","key","addEventListener","removeEventListener","clearTimeout","overlay","preventScroll","passive","createElement","React","Fragment","className","ref","content","illustration","src","alt","title","description","replace","theme","type","label","onClick","size","tooltipSrc","tooltipSrcRef","position","tooltipPosition","tooltipOffset","displayOn","isWithPortal","maxWidth"],"mappings":"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"}