se-design 1.0.59 → 1.0.61-dev

package/dist/index58.js

@@ -1,122 +1,89 @@
-import e, { useState as p, useRef as g, useEffect as I } from "react";
-import { Button as x } from "./index3.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 = ""
+import e, { useRef as S, useState as f } from "react";
+import { CustomModal as T } from "./index12.js";
+import { Icon as v } from "./index5.js";
+/* empty css         */
+const C = ({
+  children: c = null,
+  title: n = "",
+  onClose: s = () => {
+  },
+  showCloseIcon: l = !1,
+  showBackButton: a = !1,
+  onBack: m = () => {
+  },
+  className: i = "",
+  automationId: r = "",
+  minHeight: u = "auto"
 }) => {
-  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"
-    });
+  const t = S(null), [g, p] = f(0), [E, h] = f(0), [b, Y] = f(!1), k = (o) => {
+    p(o.touches[0].clientY), h(o.touches[0].clientY), Y(!0);
+  }, N = (o) => {
+    if (!b) return;
+    const d = o.touches[0].clientY, x = d - g;
+    x > 0 && (h(d), t.current && (t.current.style.transform = `translateY(${x}px)`));
+  }, y = () => {
+    if (!b) return;
+    E - g > 60 ? s() : t.current && (t.current.style.transform = "translateY(0)"), Y(!1), p(0), h(0);
   };
   return /* @__PURE__ */ e.createElement("div", {
-    className: "w-14"
-  }, /* @__PURE__ */ e.createElement("div", {
-    ref: l,
-    className: "overflow-y-auto [&::-webkit-scrollbar]:hidden",
-    onScroll: a,
+    ref: t,
+    className: `se-design-bottom-sheet relative h-max max-h-[98vh] rounded-t-2xl flex flex-col pt-5 ${i}`,
+    onClick: (o) => o.stopPropagation(),
+    onTouchStart: k,
+    onTouchMove: N,
+    onTouchEnd: y,
+    "data-automation-id": r,
     style: {
-      height: f * n,
-      paddingTop: y * n,
-      paddingBottom: y * n,
-      scrollSnapType: "y mandatory",
-      scrollbarWidth: "none"
+      minHeight: u
     }
-  }, 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`
+  }, (n || a) && /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-bottom-sheet-header flex items-center justify-left gap-3 mr-6 px-4"
+  }, a && /* @__PURE__ */ e.createElement(v, {
+    name: "back",
+    stroke: "var(--color-gray-700)",
+    onClick: m,
+    className: "se-design-bottom-sheet-back-icon cursor-pointer",
+    automationId: `${r}-back-icon`
+  }), n && /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-bottom-sheet-title text-lg font-semibold"
+  }, n)), l && /* @__PURE__ */ e.createElement(v, {
+    name: "close",
+    onClick: s,
+    className: "se-design-bottom-sheet-close-icon absolute top-6 right-4 cursor-pointer z-10",
+    automationId: `${r}-close-icon`
   }), /* @__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`
-  })));
-};
+    className: "se-design-bottom-sheet-content px-4 pb-5 flex-1 min-h-0 overflow-y-auto"
+  }, c));
+}, I = ({
+  isOpen: c = !1,
+  title: n = "",
+  onClose: s = () => {
+  },
+  children: l = null,
+  showCloseIcon: a = !0,
+  showBackButton: m = !1,
+  onBack: i = () => {
+  },
+  className: r = "",
+  automationId: u = "bottomsheet",
+  minHeight: t = ""
+}) => /* @__PURE__ */ e.createElement(T, {
+  isOpen: c,
+  onClose: s,
+  onModalClick: s,
+  className: "custom-bottom-sheet",
+  renderModalContent: () => /* @__PURE__ */ e.createElement(C, {
+    title: n,
+    onClose: s,
+    showCloseIcon: a,
+    showBackButton: m,
+    onBack: i,
+    className: r,
+    automationId: u,
+    minHeight: t
+  }, l)
+});
 export {
-  $ as TimePicker
+  I as BottomSheet
 };
 //# sourceMappingURL=index58.js.map

package/dist/index58.js.map

@@ -1 +1 @@
-{"version":3,"file":"index58.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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"}
+{"version":3,"file":"index58.js","sources":["../src/components/BottomSheet/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from 'react';\nimport { CustomModal } from '../CustomModal';\nimport { Icon } from '../Icon';\n\nimport './style.scss';\n\nexport interface BottomSheetProps {\n  isOpen: boolean;\n  title?: string;\n  onClose: () => void;\n  showCloseIcon?: boolean;\n  showBackButton?: boolean;\n  onBack?: () => void;\n  children: React.ReactNode;\n  className?: string;\n  automationId?: string;\n  minHeight?: string;\n}\n\ninterface BottomSheetContentProps {\n  title?: string;\n  onClose: () => void;\n  showCloseIcon?: boolean;\n  showBackButton?: boolean;\n  onBack?: () => void;\n  children: React.ReactNode;\n  className?: string;\n  automationId?: string;\n  minHeight?: string;\n}\n\nconst BottomSheetContent: FC<BottomSheetContentProps> = ({\n  children = null,\n  title = '',\n  onClose = () => {},\n  showCloseIcon = false,\n  showBackButton = false,\n  onBack = () => {},\n  className = '',\n  automationId = '',\n  minHeight = 'auto'\n}) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [startY, setStartY] = useState<number>(0);\n  const [currentY, setCurrentY] = useState<number>(0);\n  const [isDragging, setIsDragging] = useState<boolean>(false);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    setStartY(e.touches[0].clientY);\n    setCurrentY(e.touches[0].clientY);\n    setIsDragging(true);\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isDragging) return;\n\n    const touchY = e.touches[0].clientY;\n    const deltaY = touchY - startY;\n\n    // Only allow dragging down\n    if (deltaY > 0) {\n      setCurrentY(touchY);\n      if (contentRef.current) {\n        contentRef.current.style.transform = `translateY(${deltaY}px)`;\n      }\n    }\n  };\n\n  const handleTouchEnd = () => {\n    if (!isDragging) return;\n\n    const deltaY = currentY - startY;\n    const threshold = 60; // pixels to swipe down to trigger close\n\n    if (deltaY > threshold) {\n      // Trigger close\n      onClose();\n    } else {\n      // Reset position\n      if (contentRef.current) {\n        contentRef.current.style.transform = 'translateY(0)';\n      }\n    }\n\n    setIsDragging(false);\n    setStartY(0);\n    setCurrentY(0);\n  };\n\n  return (\n    <div\n      ref={contentRef}\n      className={`se-design-bottom-sheet relative h-max max-h-[98vh] rounded-t-2xl flex flex-col pt-5 ${className}`}\n      onClick={(e) => e.stopPropagation()}\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n      data-automation-id={automationId}\n      style={{ minHeight }}\n    >\n      {(title || showBackButton) && (\n        <div className=\"se-design-bottom-sheet-header flex items-center justify-left gap-3 mr-6 px-4\">\n          {showBackButton && (\n            <Icon\n              name=\"back\"\n              stroke=\"var(--color-gray-700)\"\n              onClick={onBack}\n              className=\"se-design-bottom-sheet-back-icon cursor-pointer\"\n              automationId={`${automationId}-back-icon`}\n            />\n          )}\n          {title && <div className=\"se-design-bottom-sheet-title text-lg font-semibold\">{title}</div>}\n        </div>\n      )}\n      {showCloseIcon && (\n        <Icon\n          name=\"close\"\n          onClick={onClose}\n          className=\"se-design-bottom-sheet-close-icon absolute top-6 right-4 cursor-pointer z-10\"\n          automationId={`${automationId}-close-icon`}\n        />\n      )}\n      <div className=\"se-design-bottom-sheet-content px-4 pb-5 flex-1 min-h-0 overflow-y-auto\">{children}</div>\n    </div>\n  );\n};\n\nexport const BottomSheet: FC<BottomSheetProps> = ({\n  isOpen = false,\n  title = '',\n  onClose = () => {},\n  children = null,\n  showCloseIcon = true,\n  showBackButton = false,\n  onBack = () => {},\n  className = '',\n  automationId = 'bottomsheet',\n  minHeight = ''\n}) => {\n  return (\n    <CustomModal\n      isOpen={isOpen}\n      onClose={onClose}\n      onModalClick={onClose}\n      className=\"custom-bottom-sheet\"\n      renderModalContent={() => (\n        <BottomSheetContent\n          title={title}\n          onClose={onClose}\n          showCloseIcon={showCloseIcon}\n          showBackButton={showBackButton}\n          onBack={onBack}\n          className={className}\n          automationId={automationId}\n          minHeight={minHeight}\n        >\n          {children}\n        </BottomSheetContent>\n      )}\n    />\n  );\n};\n"],"names":["BottomSheetContent","children","title","onClose","showCloseIcon","showBackButton","onBack","className","automationId","minHeight","contentRef","useRef","startY","setStartY","useState","currentY","setCurrentY","isDragging","setIsDragging","handleTouchStart","e","touches","clientY","handleTouchMove","touchY","deltaY","current","style","transform","handleTouchEnd","React","createElement","ref","onClick","stopPropagation","onTouchStart","onTouchMove","onTouchEnd","Icon","name","stroke","BottomSheet","isOpen","CustomModal","onModalClick","renderModalContent"],"mappings":";;;;AA+BA,MAAMA,IAAkDA,CAAC;AAAA,EACvDC,UAAAA,IAAW;AAAA,EACXC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,eAAAA,IAAgB;AAAA,EAChBC,gBAAAA,IAAiB;AAAA,EACjBC,QAAAA,IAASA,MAAM;AAAA,EAAC;AAAA,EAChBC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,WAAAA,IAAY;AACd,MAAM;AACJ,QAAMC,IAAaC,EAAuB,IAAI,GACxC,CAACC,GAAQC,CAAS,IAAIC,EAAiB,CAAC,GACxC,CAACC,GAAUC,CAAW,IAAIF,EAAiB,CAAC,GAC5C,CAACG,GAAYC,CAAa,IAAIJ,EAAkB,EAAK,GAErDK,IAAmBA,CAACC,MAAwB;AAChDP,IAAAA,EAAUO,EAAEC,QAAQ,CAAC,EAAEC,OAAO,GAC9BN,EAAYI,EAAEC,QAAQ,CAAC,EAAEC,OAAO,GAChCJ,EAAc,EAAI;AAAA,EACpB,GAEMK,IAAkBA,CAACH,MAAwB;AAC/C,QAAI,CAACH,EAAY;AAEjB,UAAMO,IAASJ,EAAEC,QAAQ,CAAC,EAAEC,SACtBG,IAASD,IAASZ;AAGxB,IAAIa,IAAS,MACXT,EAAYQ,CAAM,GACdd,EAAWgB,YACbhB,EAAWgB,QAAQC,MAAMC,YAAY,cAAcH,CAAM;AAAA,EAG/D,GAEMI,IAAiBA,MAAM;AAC3B,QAAI,CAACZ,EAAY;AAKjB,IAHeF,IAAWH,IACR,KAIhBT,EAAAA,IAGIO,EAAWgB,YACbhB,EAAWgB,QAAQC,MAAMC,YAAY,kBAIzCV,EAAc,EAAK,GACnBL,EAAU,CAAC,GACXG,EAAY,CAAC;AAAA,EACf;AAEA,SACEc,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,KAAKtB;AAAAA,IACLH,WAAW,uFAAuFA,CAAS;AAAA,IAC3G0B,SAAUb,CAAAA,MAAMA,EAAEc,gBAAAA;AAAAA,IAClBC,cAAchB;AAAAA,IACdiB,aAAab;AAAAA,IACbc,YAAYR;AAAAA,IACZ,sBAAoBrB;AAAAA,IACpBmB,OAAO;AAAA,MAAElB,WAAAA;AAAAA,IAAAA;AAAAA,EAAU,IAEjBP,KAASG,MACTyB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKxB,WAAU;AAAA,EAAA,GACZF,KACCyB,gBAAAA,EAAAC,cAACO,GAAI;AAAA,IACHC,MAAK;AAAA,IACLC,QAAO;AAAA,IACPP,SAAS3B;AAAAA,IACTC,WAAU;AAAA,IACVC,cAAc,GAAGA,CAAY;AAAA,EAAA,CAC9B,GAEFN,KAAS4B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKxB,WAAU;AAAA,EAAA,GAAsDL,CAAW,CACvF,GAENE,KACC0B,gBAAAA,EAAAC,cAACO,GAAI;AAAA,IACHC,MAAK;AAAA,IACLN,SAAS9B;AAAAA,IACTI,WAAU;AAAA,IACVC,cAAc,GAAGA,CAAY;AAAA,EAAA,CAC9B,GAEHsB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKxB,WAAU;AAAA,EAAA,GAA2EN,CAAc,CACrG;AAET,GAEawC,IAAoCA,CAAC;AAAA,EAChDC,QAAAA,IAAS;AAAA,EACTxC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBF,UAAAA,IAAW;AAAA,EACXG,eAAAA,IAAgB;AAAA,EAChBC,gBAAAA,IAAiB;AAAA,EACjBC,QAAAA,IAASA,MAAM;AAAA,EAAC;AAAA,EAChBC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,WAAAA,IAAY;AACd,MAEIqB,gBAAAA,EAAAC,cAACY,GAAW;AAAA,EACVD,QAAAA;AAAAA,EACAvC,SAAAA;AAAAA,EACAyC,cAAczC;AAAAA,EACdI,WAAU;AAAA,EACVsC,oBAAoBA,MAClBf,gBAAAA,EAAAC,cAAC/B,GAAkB;AAAA,IACjBE,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,QAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,WAAAA;AAAAA,EAAAA,GAECR,CACiB;AAAA,CAEvB;"}

package/dist/index59.js

@@ -1,64 +1,122 @@
-import i, { useState as p, useCallback as v, useEffect as E } from "react";
-import { Popover as y } from "./index17.js";
-/* empty css         */
-function d() {
-  return d = Object.assign ? Object.assign.bind() : function(n) {
-    for (var o = 1; o < arguments.length; o++) {
-      var t = arguments[o];
-      for (var e in t) ({}).hasOwnProperty.call(t, e) && (n[e] = t[e]);
-    }
-    return n;
-  }, d.apply(null, arguments);
-}
-const w = ({
-  label: n,
-  children: o,
-  iconColor: t = "var(--color-blue-500)",
-  isDisabled: e = !1,
-  noPadding: u = !1
+import e, { useState as p, useRef as g, useEffect as I } from "react";
+import { Button as x } from "./index3.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 [f, r] = p(!1), [m, s] = p(!1), l = f || m, c = v((a) => {
-    a.key === "Escape" && (r(!1), s(!1), a.stopImmediatePropagation());
-  }, []);
-  E(() => {
-    if (l)
-      return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
-  }, [l, c]);
-  const g = {
-    onMouseEnter: () => r(!0),
-    onMouseLeave: () => r(!1),
-    onFocus: () => s(!0),
-    onBlur: () => s(!1)
+  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__ */ i.createElement("div", d({
-    className: e ? "se-design-info-tooltip-wrapper-disabled" : ""
-  }, e ? {} : g), /* @__PURE__ */ i.createElement(y, {
-    position: "bottom-center",
-    isPopoverOpen: l,
-    onPopoverToggle: (a) => {
-      a || (r(!1), s(!1));
+  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"
     },
-    renderPopoverSrcElement: () => /* @__PURE__ */ i.createElement("div", {
-      className: `se-design-info-tooltip-src ${u ? "no-padding" : ""} ${e ? "se-design-info-tooltip-disabled" : ""}`,
-      style: {
-        "--info-tooltip-icon-color": t,
-        cursor: e ? "not-allowed" : "pointer"
-      }
-    }, o),
-    renderPopoverContents: () => /* @__PURE__ */ i.createElement("div", {
-      className: "se-design-info-tooltip-content",
-      "data-automation-id": "se-design-info-tooltip-content"
-    }, n),
-    isWithPortal: !0,
-    noBorder: !0,
-    disableClickToggle: !0,
-    popoverContentStyleProperty: {
-      zIndex: 2e3,
-      backgroundColor: ""
+    "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 {
-  w as InfoTooltip
+  $ as TimePicker
 };
 //# sourceMappingURL=index59.js.map

package/dist/index59.js.map

@@ -1 +1 @@
-{"version":3,"file":"index59.js","sources":["../src/components/InfoTooltip/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Popover } from '../Popover';\nimport './styles.scss';\n\nexport interface InfoTooltipProps {\n  label: string;\n  children: React.ReactNode;\n  iconColor?: string;\n  isDisabled?: boolean;\n  /**\n   * Remove padding from tooltip wrapper (useful for precise alignment)\n   */\n  noPadding?: boolean;\n}\n\nexport const InfoTooltip = ({\n  label,\n  children,\n  iconColor = 'var(--color-blue-500)',\n  isDisabled = false,\n  noPadding = false\n}: InfoTooltipProps) => {\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: () => setIsFocused(true),\n    onBlur: () => setIsFocused(false)\n  };\n\n  return (\n    <div\n      className={isDisabled ? 'se-design-info-tooltip-wrapper-disabled' : ''}\n      {...(isDisabled ? {} : interactionHandlers)}\n    >\n      <Popover\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          <div\n            className={`se-design-info-tooltip-src ${noPadding ? 'no-padding' : ''} ${isDisabled ? 'se-design-info-tooltip-disabled' : ''}`}\n            style={\n              {\n                '--info-tooltip-icon-color': iconColor,\n                cursor: isDisabled ? 'not-allowed' : 'pointer'\n              } as React.CSSProperties\n            }\n          >\n            {children}\n          </div>\n        )}\n        renderPopoverContents={() => (\n          <div className=\"se-design-info-tooltip-content\" data-automation-id=\"se-design-info-tooltip-content\">\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","isDisabled","noPadding","isHovered","setIsHovered","useState","isFocused","setIsFocused","isOpen","handleEscapeKey","useCallback","event","key","stopImmediatePropagation","useEffect","document","addEventListener","removeEventListener","interactionHandlers","onMouseEnter","onMouseLeave","onFocus","onBlur","React","createElement","_extends","className","Popover","position","isPopoverOpen","onPopoverToggle","open","renderPopoverSrcElement","style","cursor","renderPopoverContents","isWithPortal","noBorder","disableClickToggle","popoverContentStyleProperty","zIndex","backgroundColor"],"mappings":";;;;;;;;;;;;AAeO,MAAMA,IAAcA,CAAC;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,YAAAA,IAAa;AAAA,EACbC,WAAAA,IAAY;AACI,MAAM;AACtB,QAAM,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,MAAMd,EAAa,EAAI;AAAA,IAChCe,QAAQA,MAAMf,EAAa,EAAK;AAAA,EAAA;AAGlC,SACEgB,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEC,WAAWzB,IAAa,4CAA4C;AAAA,EAAA,GAC/DA,IAAa,CAAA,IAAKiB,CAAmB,GAE1CK,gBAAAA,EAAAC,cAACG,GAAO;AAAA,IACNC,UAAU;AAAA,IACVC,eAAerB;AAAAA,IACfsB,iBAAkBC,CAAAA,MAAS;AAEzB,MAAKA,MACH3B,EAAa,EAAK,GAClBG,EAAa,EAAK;AAAA,IAEtB;AAAA,IACAyB,yBAAyBA,MACvBT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEE,WAAW,8BAA8BxB,IAAY,eAAe,EAAE,IAAID,IAAa,oCAAoC,EAAE;AAAA,MAC7HgC,OACE;AAAA,QACE,6BAA6BjC;AAAAA,QAC7BkC,QAAQjC,IAAa,gBAAgB;AAAA,MAAA;AAAA,IACvC,GAGDF,CACE;AAAA,IAEPoC,uBAAuBA,MACrBZ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKE,WAAU;AAAA,MAAiC,sBAAmB;AAAA,IAAA,GAChE5B,CACE;AAAA,IAEPsC,cAAY;AAAA,IACZC,UAAQ;AAAA,IACRC,oBAAkB;AAAA,IAClBC,6BAA6B;AAAA,MAC3BC,QAAQ;AAAA,MACRC,iBAAiB;AAAA,IAAA;AAAA,EACnB,CACD,CACE;AAET;"}
+{"version":3,"file":"index59.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/index6.js

@@ -1,56 +1,37 @@
-import t, { useState as u } from "react";
-import { MenuList as d } from "./index16.js";
-function l() {
-  return l = Object.assign ? Object.assign.bind() : function(o) {
-    for (var e = 1; e < arguments.length; e++) {
-      var n = arguments[e];
-      for (var a in n) ({}).hasOwnProperty.call(n, a) && (o[a] = n[a]);
+import l, { useState as d, useCallback as o } from "react";
+import { isElementVisible as m } from "./index183.js";
+const g = ({
+  skipLinks: n,
+  className: s = ""
+}) => {
+  const [r, c] = d(n), i = o(() => {
+    const e = n.filter((t) => {
+      const f = document.getElementById(t.id);
+      return m(f);
+    });
+    c(e);
+  }, [n]), a = o(() => {
+    i();
+  }, [i]), u = o((e) => {
+    const t = document.getElementById(e);
+    t && t.focus({
+      preventScroll: !1
+    });
+  }, []);
+  return n.length === 0 ? null : /* @__PURE__ */ l.createElement("div", {
+    className: `se-design-skip-links-bar fixed left-0 right-0 -top-24 z-[10000] flex items-center justify-center py-1 px-4 bg-[var(--color-gray-500)] transition-[top] duration-300 ease-out focus-within:top-0 ${s}`,
+    onFocus: a
+  }, r.map((e) => /* @__PURE__ */ l.createElement("a", {
+    key: e.id,
+    href: `#${e.id}`,
+    className: "absolute -left-[9999px] [clip:rect(0,0,0,0)] no-underline text-[var(--color-white)] text-sm py-1 px-2.5 rounded focus:static focus:[clip:auto] focus:outline-none focus-visible:!outline-none hover:bg-[var(--color-gray-600)]",
+    onClick: (t) => {
+      t.preventDefault(), u(e.id);
     }
-    return o;
-  }, l.apply(null, arguments);
-}
-const g = (o) => {
-  const {
-    label: e,
-    onDropdownClick: n = () => {
-    },
-    menuItems: a = [],
-    automationId: s = "",
-    ...i
-  } = o, [r, m] = u(!1), c = () => {
-    m(!r), n();
-  };
-  return /* @__PURE__ */ t.createElement("div", {
-    className: "se-design-split-button flex items-center relative",
-    "data-automation-id": s
-  }, /* @__PURE__ */ t.createElement("button", l({
-    type: "button",
-    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)]"
-  }, i), e), /* @__PURE__ */ t.createElement("button", {
-    type: "button",
-    className: "bg-[var(--color-blue-500)] rounded-r",
-    onClick: c,
-    "data-automation-id": "split-button-dropdown-button"
-  }, /* @__PURE__ */ t.createElement("svg", {
-    className: `${r ? "rotate-180" : ""} transition-all`,
-    width: "35",
-    height: "40",
-    viewBox: "0 0 35 40",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ t.createElement("path", {
-    d: "M0 0H32C33.6569 0 35 1.34315 35 3V37C35 38.6569 33.6569 40 32 40H0V0Z",
-    fill: "transparent"
-  }), /* @__PURE__ */ t.createElement("path", {
-    d: "M18 23.5L14 19.5L22 19.5L18 23.5Z",
-    fill: "white"
-  }))), r && /* @__PURE__ */ t.createElement("div", {
-    className: "absolute top-full mt-1 w-max"
-  }, /* @__PURE__ */ t.createElement(d, {
-    items: a
-  })));
+  }, e.label)));
 };
 export {
-  g as SplitButton
+  g as SkipLinksBar,
+  g as default
 };
 //# sourceMappingURL=index6.js.map

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,CAAAA,MAAU;AAC1D,QAAM;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,iBAAAA,IAAkBA,MAAM;AAAA,IAAC;AAAA,IAAGC,WAAAA,IAAY,CAAA;AAAA,IAAIC,cAAAA,IAAe;AAAA,IAAI,GAAGC;AAAAA,EAAAA,IAAmBL,GAC9F,CAACM,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAsBA,MAAM;AAChCF,IAAAA,EAAU,CAACD,CAAM,GACjBJ,EAAAA;AAAAA,EACF;AAEA,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW;AAAA,IAAqD,sBAAoBR;AAAAA,EAAAA,GACvFM,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,GACtHC,gBAAAA,EAAAC,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,GAENV,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMU,GAAE;AAAA,IAAwEF,MAAK;AAAA,EAAA,CAAe,GACpGT,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMU,GAAE;AAAA,IAAoCF,MAAK;AAAA,EAAA,CAAS,CACvD,CACC,GACPb,KACCI,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbF,gBAAAA,EAAAC,cAACW,GAAQ;AAAA,IAACC,OAAOpB;AAAAA,EAAAA,CAAY,CAC1B,CAEJ;AAET;"}
+{"version":3,"file":"index6.js","sources":["../src/components/SkipLinksBar/index.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { isElementVisible } from '../../utils/a11y';\n\nexport interface SkipLink {\n  id: string;              \n  label: string;\n}\n\nexport interface SkipLinksBarProps {\n  skipLinks: SkipLink[];   // Required: array of skip targets\n  className?: string;        \n}\n\nexport const SkipLinksBar: React.FC<SkipLinksBarProps> = ({\n  skipLinks,\n  className = '',\n}) => {\n  const [visibleLinks, setVisibleLinks] = useState<SkipLink[]>(skipLinks);\n\n  // Check which target elements exist in DOM AND are visible\n  const checkVisibleLinks = useCallback(() => {\n    const existing = skipLinks.filter(link => {\n      const element = document.getElementById(link.id);\n      return isElementVisible(element);\n    });\n    setVisibleLinks(existing);\n  }, [skipLinks]);\n\n  // Only check on focus — by the time user tabs in, all child routes have rendered\n  const handleContainerFocus = useCallback(() => {\n    checkVisibleLinks();\n  }, [checkVisibleLinks]);\n\n  const handleSkipLinkClick = useCallback((targetId: string) => {\n    const targetElement = document.getElementById(targetId);\n    if (targetElement) {\n      targetElement.focus({ preventScroll: false });\n    }\n  }, []);\n\n  if (skipLinks.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`se-design-skip-links-bar fixed left-0 right-0 -top-24 z-[10000] flex items-center justify-center py-1 px-4 bg-[var(--color-gray-500)] transition-[top] duration-300 ease-out focus-within:top-0 ${className}`}\n      onFocus={handleContainerFocus}\n    >\n      {visibleLinks.map((link) => (\n        <a\n          key={link.id}\n          href={`#${link.id}`}\n          className=\"absolute -left-[9999px] [clip:rect(0,0,0,0)] no-underline text-[var(--color-white)] text-sm py-1 px-2.5 rounded focus:static focus:[clip:auto] focus:outline-none focus-visible:!outline-none hover:bg-[var(--color-gray-600)]\"\n          onClick={(e) => {\n            e.preventDefault();\n            handleSkipLinkClick(link.id);\n          }}\n        >\n          {link.label}\n        </a>\n      ))}\n    </div>\n  );\n};\n\nexport default SkipLinksBar;\n"],"names":["SkipLinksBar","skipLinks","className","visibleLinks","setVisibleLinks","useState","checkVisibleLinks","useCallback","existing","filter","link","element","document","getElementById","id","isElementVisible","handleContainerFocus","handleSkipLinkClick","targetId","targetElement","focus","preventScroll","length","React","createElement","onFocus","map","key","href","onClick","e","preventDefault","label"],"mappings":";;AAaO,MAAMA,IAA4CA,CAAC;AAAA,EACxDC,WAAAA;AAAAA,EACAC,WAAAA,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAqBJ,CAAS,GAGhEK,IAAoBC,EAAY,MAAM;AAC1C,UAAMC,IAAWP,EAAUQ,OAAOC,CAAAA,MAAQ;AACxC,YAAMC,IAAUC,SAASC,eAAeH,EAAKI,EAAE;AAC/C,aAAOC,EAAiBJ,CAAO;AAAA,IACjC,CAAC;AACDP,IAAAA,EAAgBI,CAAQ;AAAA,EAC1B,GAAG,CAACP,CAAS,CAAC,GAGRe,IAAuBT,EAAY,MAAM;AAC7CD,IAAAA,EAAAA;AAAAA,EACF,GAAG,CAACA,CAAiB,CAAC,GAEhBW,IAAsBV,EAAY,CAACW,MAAqB;AAC5D,UAAMC,IAAgBP,SAASC,eAAeK,CAAQ;AACtD,IAAIC,KACFA,EAAcC,MAAM;AAAA,MAAEC,eAAe;AAAA,IAAA,CAAO;AAAA,EAEhD,GAAG,CAAA,CAAE;AAEL,SAAIpB,EAAUqB,WAAW,IAChB,OAIPC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEtB,WAAW,mMAAmMA,CAAS;AAAA,IACvNuB,SAAST;AAAAA,EAAAA,GAERb,EAAauB,IAAKhB,CAAAA,MACjBa,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IACEG,KAAKjB,EAAKI;AAAAA,IACVc,MAAM,IAAIlB,EAAKI,EAAE;AAAA,IACjBZ,WAAU;AAAA,IACV2B,SAAUC,CAAAA,MAAM;AACdA,MAAAA,EAAEC,eAAAA,GACFd,EAAoBP,EAAKI,EAAE;AAAA,IAC7B;AAAA,EAAA,GAECJ,EAAKsB,KACL,CACJ,CACE;AAET;"}