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

package/dist/index65.js

@@ -1,5 +1,148 @@
-const e = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.875%209.66284H22.125M15.8942%2015.1148H18.2307M20.5673%204.21094H3.43274C2.57245%204.21094%201.87505%204.94505%201.87505%205.85061V18.1482C1.87505%2019.0537%202.57245%2019.7878%203.43274%2019.7878H20.5673C21.4276%2019.7878%2022.125%2019.0537%2022.125%2018.1482V5.85061C22.125%204.94505%2021.4276%204.21094%2020.5673%204.21094Z'%20stroke='%23415575'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+import a from "react";
+import { Button as f } from "./index4.js";
+import { Badge as j } from "./index10.js";
+import { Icon as q } from "./index6.js";
+import { Link as N } from "./index64.js";
+import { CustomModal as G } from "./index13.js";
+import { useStableId as J } from "./index205.js";
+/* empty css         */
+const K = {
+  lg: {
+    width: "768px",
+    height: "500px"
+  },
+  sm: {
+    width: "656px",
+    height: "384px"
+  }
+}, ea = ({
+  isOpen: u,
+  onClose: n,
+  trigger: c,
+  modalWidth: b,
+  modalHeight: g,
+  variant: x,
+  size: t = "lg",
+  availabilityLabel: k = "Available on ",
+  availabilityBadgeText: r,
+  title: C,
+  description: v,
+  learnMoreLinkText: o,
+  learnMoreHref: l,
+  onLearnMoreClick: s,
+  featureListDesc: m,
+  featuresList: I = [],
+  featureItemIcon: L,
+  mediaContent: S,
+  laterButtonText: _,
+  purchaseButtonText: A,
+  onLaterClick: F,
+  onPurchaseClick: P,
+  className: $ = "",
+  modalContentClassName: D = "",
+  automationId: i = "",
+  id: z
+}) => {
+  const p = J(z, "paywall-title"), B = () => {
+    F?.(), n();
+  }, d = K[t], O = b ?? d.width, w = g ?? d.height, y = x === "with-points" && t === "lg", h = I.map((e) => typeof e == "string" ? {
+    text: e
+  } : {
+    text: e.text,
+    icon: e.icon,
+    href: e.href,
+    external: e.external,
+    onLinkClick: e.onLinkClick
+  }), R = y && h.length > 0, W = L ?? /* @__PURE__ */ a.createElement(q, {
+    name: "info",
+    rotation: "180"
+  }), Y = /* @__PURE__ */ a.createElement("section", {
+    className: `paywall paywall-ctn paywall-ctn--${t} ${$}`,
+    "data-automation-id": i
+  }, /* @__PURE__ */ a.createElement("div", {
+    className: "paywall-card"
+  }, /* @__PURE__ */ a.createElement("div", {
+    className: "paywall-card-content"
+  }, r && /* @__PURE__ */ a.createElement("span", {
+    className: "paywall-card-availability"
+  }, /* @__PURE__ */ a.createElement("span", {
+    className: "paywall-card-availability-label"
+  }, k), /* @__PURE__ */ a.createElement(j, {
+    label: r,
+    className: "paywall-card-badge",
+    bgColor: "var(--color-yellow-100)",
+    textColor: "var(--color-yellow-700)"
+  })), /* @__PURE__ */ a.createElement("h3", {
+    id: p,
+    className: "paywall-card-title"
+  }, C), /* @__PURE__ */ a.createElement("p", {
+    className: "paywall-card-description"
+  }, v, o && (l || s) && /* @__PURE__ */ a.createElement(N, {
+    href: l ?? "#",
+    label: o,
+    external: !!l,
+    className: "paywall-card-learn-more",
+    onClick: (e) => {
+      l || e.preventDefault(), s?.(e);
+    }
+  })), y && m && /* @__PURE__ */ a.createElement("p", {
+    className: "paywall-card-features-intro"
+  }, m), R && /* @__PURE__ */ a.createElement("ul", {
+    className: "paywall-card-features-list"
+  }, h.map((e) => /* @__PURE__ */ a.createElement("li", {
+    key: e.text,
+    className: "paywall-card-feature-item"
+  }, /* @__PURE__ */ a.createElement("span", {
+    className: "paywall-card-feature-icon",
+    "aria-hidden": !0
+  }, e.icon ?? W), /* @__PURE__ */ a.createElement("span", null, e.href || e.onLinkClick ? /* @__PURE__ */ a.createElement(N, {
+    href: e.href ?? "#",
+    label: e.text,
+    external: e.external,
+    onClick: (E) => {
+      e.href || E.preventDefault(), e.onLinkClick?.(E);
+    }
+  }) : e.text)))), /* @__PURE__ */ a.createElement("div", {
+    className: "paywall-card-actions"
+  }, /* @__PURE__ */ a.createElement(f, {
+    type: "ghost",
+    size: "md",
+    label: _,
+    onClick: B,
+    className: "paywall-card-btn-later"
+  }), /* @__PURE__ */ a.createElement(f, {
+    type: "primary",
+    size: "md",
+    label: A,
+    onClick: P,
+    className: "paywall-card-btn-purchase"
+  }))), /* @__PURE__ */ a.createElement("div", {
+    className: "paywall-card-media"
+  }, S))), Z = /* @__PURE__ */ a.createElement("div", {
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": p,
+    className: `paywall-modal-content ${D}`,
+    style: {
+      height: w,
+      minHeight: w
+    }
+  }, Y);
+  return /* @__PURE__ */ a.createElement(a.Fragment, null, c && /* @__PURE__ */ a.createElement("span", {
+    className: "paywall-trigger"
+  }, c), /* @__PURE__ */ a.createElement(G, {
+    isOpen: u,
+    onClose: n,
+    onModalClick: () => {
+    },
+    renderModalContent: () => Z,
+    width: O,
+    contentClassName: "paywall-modal-content-wrapper",
+    automationId: i
+  }));
+};
 export {
-  e as default
+  ea as Paywall,
+  ea as default
 };
 //# sourceMappingURL=index65.js.map

package/dist/index65.js.map

@@ -1 +1 @@
-{"version":3,"file":"index65.js","sources":["../src/assets/icons/card.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.875%209.66284H22.125M15.8942%2015.1148H18.2307M20.5673%204.21094H3.43274C2.57245%204.21094%201.87505%204.94505%201.87505%205.85061V18.1482C1.87505%2019.0537%202.57245%2019.7878%203.43274%2019.7878H20.5673C21.4276%2019.7878%2022.125%2019.0537%2022.125%2018.1482V5.85061C22.125%204.94505%2021.4276%204.21094%2020.5673%204.21094Z'%20stroke='%23415575'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_8"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index65.js","sources":["../src/components/Paywall/index.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { Button } from 'src/components/Button';\nimport { Badge } from 'src/components/Badge';\nimport { Icon } from 'src/components/Icon';\nimport { Link } from 'src/components/Link';\nimport { CustomModal } from 'src/components/CustomModal';\nimport { useStableId } from 'src/utils/useStableId';\nimport './style.scss';\n\n/** Variant: with bullet points list, or description only */\nexport type PaywallVariant = 'with-points' | 'description-only';\n\n/** Size: small (656×384) or large (768×500) – sets modal dimensions and media panel proportion */\nexport type PaywallSize = 'sm' | 'lg';\n\n/** Feature list item: plain string (uses default/list icon) or object with text, optional per-item icon, and optional link/action */\nexport type PaywallFeatureItem =\n  | string\n  | {\n      text: string;\n      icon?: ReactNode;\n      /** If provided, the feature text becomes a hyperlink navigating to this URL */\n      href?: string;\n      /** If true, opens the href in a new tab (only applicable when href is set) */\n      external?: boolean;\n      /** Click handler — use with href for analytics, or alone for SPA actions */\n      onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n    };\n\nconst PAYWALL_SIZE_DIMENSIONS: Record<PaywallSize, { width: string; height: string }> = {\n  lg: { width: '768px', height: '500px' },\n  sm: { width: '656px', height: '384px' },\n};\n\nexport interface PaywallProps {\n  isOpen: boolean;\n  onClose: () => void;\n  trigger?: ReactNode;\n  modalWidth?: string;\n  modalHeight?: string;\n  variant: PaywallVariant;\n  size?: PaywallSize;\n  availabilityLabel?: string;\n  availabilityBadgeText?: string;\n  title: string;\n  description: string;\n  learnMoreLinkText?: string;\n  learnMoreHref?: string;\n  onLearnMoreClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n  featureListDesc?: string;\n  featuresList?: PaywallFeatureItem[];\n  featureItemIcon?: ReactNode;\n  mediaContent?: ReactNode;\n  laterButtonText: string;\n  purchaseButtonText: string;\n  onLaterClick?: () => void;\n  onPurchaseClick?: () => void;\n  className?: string;\n  modalContentClassName?: string;\n  automationId?: string;\n  id?: string;\n}\n\n/** Paywall – always shown in a modal. Pass isOpen/onClose and optionally a trigger. */\nexport const Paywall: FC<PaywallProps> = ({\n  isOpen,\n  onClose,\n  trigger,\n  modalWidth,\n  modalHeight,\n  variant,\n  size = 'lg',\n  availabilityLabel = 'Available on ',\n  availabilityBadgeText,\n  title,\n  description,\n  learnMoreLinkText,\n  learnMoreHref,\n  onLearnMoreClick,\n  featureListDesc,\n  featuresList = [],\n  featureItemIcon,\n  mediaContent,\n  laterButtonText,\n  purchaseButtonText,\n  onLaterClick,\n  onPurchaseClick,\n  className = '',\n  modalContentClassName = '',\n  automationId = '',\n  id: providedId,\n}) => {\n  const titleId = useStableId(providedId, 'paywall-title');\n\n  const handleLaterClick = () => {\n    onLaterClick?.();\n    onClose();\n  };\n\n  const dimensions = PAYWALL_SIZE_DIMENSIONS[size];\n  const width = modalWidth ?? dimensions.width;\n  const height = modalHeight ?? dimensions.height;\n\n  const withPoints = variant === 'with-points' && size === 'lg';\n  const normalizedFeatures = featuresList.map((item): { text: string; icon?: ReactNode; href?: string; external?: boolean; onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void } =>\n    typeof item === 'string'\n      ? { text: item }\n      : { text: item.text, icon: item.icon, href: item.href, external: item.external, onLinkClick: item.onLinkClick }\n  );\n  const showFeatures = withPoints && normalizedFeatures.length > 0;\n  const defaultIcon = featureItemIcon ?? <Icon name=\"info\" rotation='180'/>;\n\n  const content = (\n    <section\n      className={`paywall paywall-ctn paywall-ctn--${size} ${className}`}\n      data-automation-id={automationId}\n    >\n      <div className=\"paywall-card\">\n        <div className=\"paywall-card-content\">\n          {availabilityBadgeText && (\n            <span className=\"paywall-card-availability\">\n              <span className=\"paywall-card-availability-label\">{availabilityLabel}</span>\n              <Badge\n                label={availabilityBadgeText}\n                className=\"paywall-card-badge\"\n                bgColor=\"var(--color-yellow-100)\"\n                textColor=\"var(--color-yellow-700)\"\n              />\n            </span>\n          )}\n          <h3 id={titleId} className=\"paywall-card-title\">{title}</h3>\n          <p className=\"paywall-card-description\">\n            {description}\n            {learnMoreLinkText && (learnMoreHref || onLearnMoreClick) && (\n              <Link\n                href={learnMoreHref ?? '#'}\n                label={learnMoreLinkText}\n                external={!!learnMoreHref}\n                className=\"paywall-card-learn-more\"\n                onClick={(e) => { if (!learnMoreHref) { e.preventDefault(); } onLearnMoreClick?.(e); }}\n              />\n            )}\n          </p>\n          {withPoints && featureListDesc && (\n            <p className=\"paywall-card-features-intro\">{featureListDesc}</p>\n          )}\n          {showFeatures && (\n            <ul className=\"paywall-card-features-list\">\n              {normalizedFeatures.map((item) => (\n                <li key={item.text} className=\"paywall-card-feature-item\">\n                  <span className=\"paywall-card-feature-icon\" aria-hidden>\n                    {item.icon ?? defaultIcon}\n                  </span>\n                  <span>\n                    {item.href || item.onLinkClick ? (\n                      <Link\n                        href={item.href ?? '#'}\n                        label={item.text}\n                        external={item.external}\n                        onClick={(e) => { if (!item.href) { e.preventDefault(); } item.onLinkClick?.(e); }}\n                      />\n                    ) : (\n                      item.text\n                    )}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          )}\n          <div className=\"paywall-card-actions\">\n            <Button\n              type=\"ghost\"\n              size=\"md\"\n              label={laterButtonText}\n              onClick={handleLaterClick}\n              className=\"paywall-card-btn-later\"\n            />\n            <Button\n              type=\"primary\"\n              size=\"md\"\n              label={purchaseButtonText}\n              onClick={onPurchaseClick}\n              className=\"paywall-card-btn-purchase\"\n            />\n          </div>\n        </div>\n        <div className=\"paywall-card-media\">\n          {mediaContent}\n        </div>\n      </div>\n    </section>\n  );\n\n  const modalContent = (\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n      className={`paywall-modal-content ${modalContentClassName}`}\n      style={{ height, minHeight: height }}\n    >\n      {content}\n    </div>\n  );\n\n  return (\n    <>\n      {trigger && <span className=\"paywall-trigger\">{trigger}</span>}\n      <CustomModal\n        isOpen={isOpen}\n        onClose={onClose}\n        onModalClick={() => {}}\n        renderModalContent={() => modalContent}\n        width={width}\n        contentClassName=\"paywall-modal-content-wrapper\"\n        automationId={automationId}\n      />\n    </>\n  );\n};\n\nexport default Paywall;\n"],"names":["React__default","Button","Badge","Icon","Link","CustomModal","useStableId","PAYWALL_SIZE_DIMENSIONS","lg","width","height","sm","Paywall","isOpen","onClose","trigger","modalWidth","modalHeight","variant","size","availabilityLabel","availabilityBadgeText","title","description","learnMoreLinkText","learnMoreHref","onLearnMoreClick","featureListDesc","featuresList","featureItemIcon","mediaContent","laterButtonText","purchaseButtonText","onLaterClick","onPurchaseClick","className","modalContentClassName","automationId","id","providedId","titleId","handleLaterClick","dimensions","withPoints","normalizedFeatures","map","item","text","icon","href","external","onLinkClick","showFeatures","length","defaultIcon","React","createElement","name","rotation","content","label","bgColor","textColor","onClick","e","preventDefault","key","type","modalContent","role","style","minHeight","Fragment","onModalClick","renderModalContent","contentClassName"],"mappings":"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"}

package/dist/index66.js

@@ -1,5 +1,15 @@
-const e = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%23E4E9F1'/%3e%3cpath%20d='M12%208H4'%20stroke='%2392A1B9'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+function i({
+  titleId: r,
+  descriptionId: t,
+  isFocusable: a = !1
+}) {
+  const e = {
+    role: "region",
+    "aria-labelledby": r
+  };
+  return t && (e["aria-describedby"] = t), a && (e.tabIndex = -1), e;
+}
 export {
-  e as default
+  i as getRegionAttributes
 };
 //# sourceMappingURL=index66.js.map

package/dist/index66.js.map

@@ -1 +1 @@
-{"version":3,"file":"index66.js","sources":["../src/assets/icons/checkbox-disabled-minus.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%23E4E9F1'/%3e%3cpath%20d='M12%208H4'%20stroke='%2392A1B9'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_9"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index66.js","sources":["../src/utils/a11y/regionAttributes.ts"],"sourcesContent":["/**\n * Returns ARIA attributes for a region container element.\n * Used for semantic containers that need role=\"region\" with proper labeling.\n * \n * @param options - Configuration options\n * @param options.titleId - Required. ID of the heading element that labels this region\n * @param options.descriptionId - Optional. ID of the description element\n * @param options.isFocusable - Optional. Whether to make the region focusable (adds tabIndex={-1})\n * @returns Object with region ARIA attributes\n */\nexport function getRegionAttributes({\n  titleId,\n  descriptionId,\n  isFocusable = false\n}: {\n  titleId: string;\n  descriptionId?: string;\n  isFocusable?: boolean;\n}): {\n  role: 'region';\n  'aria-labelledby': string;\n  'aria-describedby'?: string;\n  tabIndex?: number;\n} {\n  const attributes: {\n    role: 'region';\n    'aria-labelledby': string;\n    'aria-describedby'?: string;\n    tabIndex?: number;\n  } = {\n    role: 'region',\n    'aria-labelledby': titleId\n  };\n\n  if (descriptionId) {\n    attributes['aria-describedby'] = descriptionId;\n  }\n\n  if (isFocusable) {\n    attributes.tabIndex = -1;\n  }\n\n  return attributes;\n}\n"],"names":["getRegionAttributes","titleId","descriptionId","isFocusable","attributes","role","tabIndex"],"mappings":"AAUO,SAASA,EAAoB;AAAA,EAClCC,SAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,aAAAA,IAAc;AAKhB,GAKE;AACA,QAAMC,IAKF;AAAA,IACFC,MAAM;AAAA,IACN,mBAAmBJ;AAAAA,EAAAA;AAGrB,SAAIC,MACFE,EAAW,kBAAkB,IAAIF,IAG/BC,MACFC,EAAWE,WAAW,KAGjBF;AACT;"}

package/dist/index67.js

@@ -1,5 +1,49 @@
-const e = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%23E4E9F1'/%3e%3cpath%20d='M11.8082%205.5L6.89749%2010.5L4.66534%208.22727'%20stroke='%2392A1B9'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+import * as t from "react";
+import { isVirtualClick as w } from "./index78.js";
+function R({
+  disabled: p = !1,
+  loading: i = !1,
+  onClick: u,
+  onKeyboardActivate: s,
+  isNative: l = !0,
+  role: d = "button",
+  tabIndex: D = 0,
+  stopPropagation: c = !1,
+  preventDefault: f = !1,
+  pressed: P
+} = {}) {
+  const e = p || i, n = t.useRef(!1), o = t.useCallback(() => {
+    n.current = !0;
+  }, []), m = t.useCallback((r) => {
+    if (e) return;
+    c && r.stopPropagation(), f && r.preventDefault();
+    const y = w(r.nativeEvent), C = n.current;
+    n.current = !1;
+    const b = y ? "virtual" : C ? "pointer" : "keyboard";
+    if ((b === "keyboard" || b === "virtual") && s) {
+      s(r);
+      return;
+    }
+    u?.(r);
+  }, [e, u, s, c, f]), v = t.useCallback((r) => {
+    e || (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click());
+  }, [e]), k = {
+    onPointerDown: o,
+    onMouseDown: o,
+    onTouchStart: o,
+    onClick: m,
+    "aria-disabled": e ? "true" : void 0,
+    "aria-busy": i ? "true" : void 0,
+    "aria-pressed": P
+  };
+  l || (k.onKeyDown = v);
+  const a = {
+    pressProps: k,
+    isDisabled: e
+  };
+  return l || (a.role = d, a.tabIndex = e ? -1 : D), a;
+}
 export {
-  e as default
+  R as useAccessiblePress
 };
 //# sourceMappingURL=index67.js.map

package/dist/index67.js.map

@@ -1 +1 @@
-{"version":3,"file":"index67.js","sources":["../src/assets/icons/checkbox-disabled-tick.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%23E4E9F1'/%3e%3cpath%20d='M11.8082%205.5L6.89749%2010.5L4.66534%208.22727'%20stroke='%2392A1B9'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_10"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index67.js","sources":["../src/utils/a11y/useAccessiblePress.ts"],"sourcesContent":["import * as React from 'react';\nimport { isVirtualClick } from '../virtualClick';\n\n/**\n * Hook for accessible press interactions (pointer vs keyboard vs virtual click).\n *\n * Handles:\n * - Pointer intent tracking (mouse/touch)\n * - Virtual click detection (NVDA browse mode, etc.)\n * - Routing to appropriate handler (onClick vs onKeyboardActivate)\n * - For non-native elements: Enter/Space → activation\n * - Optional stopPropagation and preventDefault\n *\n * @example\n * // Native button (isNative=true, the default)\n * const { pressProps } = useAccessiblePress({ onClick, disabled });\n * <button {...pressProps}>Click me</button>\n *\n * @example\n * // Non-native element (div acting as button)\n * const { pressProps, role, tabIndex } = useAccessiblePress({ onClick, isNative: false });\n * <div role={role} tabIndex={tabIndex} {...pressProps}>Click me</div>\n *\n * @example\n * // Element nested inside clickable parent (prevent event bubbling)\n * const { pressProps, tabIndex } = useAccessiblePress({ \n *   onClick, \n *   isNative: false, \n *   stopPropagation: true \n * });\n * <div role=\"button\" tabIndex={tabIndex} {...pressProps}>Click me</div>\n */\n\ntype InputKind = 'pointer' | 'keyboard' | 'virtual';\n\nexport type UseAccessiblePressOptions = {\n  /**\n   * Whether the element is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the element is in a loading state (will also disable)\n   */\n  loading?: boolean;\n\n  /**\n   * Handler for pointer/touch activations (or all activations if onKeyboardActivate is not provided)\n   */\n  onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * Handler for keyboard + assistive tech virtual activation.\n   * If omitted, onClick is used for all activations.\n   */\n  onKeyboardActivate?: (e: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * If true, this is a native <button> (or other native pressable) and we MUST NOT add Enter/Space handling.\n   * Default: true\n   */\n  isNative?: boolean;\n\n  /**\n   * Only for non-native elements (div/span). Defaults to 'button'.\n   */\n  role?: string;\n\n  /**\n   * Only for non-native elements. Defaults to 0.\n   */\n  tabIndex?: number;\n\n  /**\n   * If true, calls e.stopPropagation() before invoking onClick handler.\n   * Useful when element is nested inside another clickable element.\n   * Default: false\n   */\n  stopPropagation?: boolean;\n\n  /**\n   * If true, calls e.preventDefault() before invoking onClick handler.\n   * Note: For non-native elements, preventDefault is already called on Space/Enter keys.\n   * Default: false\n   */\n  preventDefault?: boolean;\n\n  /**\n   * Toggle/pressed state. When true or false, sets aria-pressed on the element (e.g. selected color swatch).\n   * Omit for non-toggle buttons.\n   */\n  pressed?: boolean;\n};\n\nexport type UseAccessiblePressReturn = {\n  /**\n   * Props to spread onto the element. Includes event handlers and ARIA attributes.\n   * Does NOT include role/tabIndex — apply those separately.\n   */\n  pressProps: React.HTMLAttributes<HTMLElement> & {\n    'aria-disabled'?: 'true';\n    'aria-busy'?: 'true';\n    'aria-pressed'?: boolean;\n  };\n\n  /**\n   * Combined disabled state (disabled || loading)\n   */\n  isDisabled: boolean;\n\n  /**\n   * Role for non-native elements (e.g., 'button', 'menuitem').\n   * Only returned when isNative=false.\n   */\n  role?: string;\n\n  /**\n   * TabIndex for non-native elements.\n   * Returns -1 when disabled, otherwise the provided tabIndex (default 0).\n   * Only returned when isNative=false.\n   */\n  tabIndex?: number;\n};\n\nexport function useAccessiblePress({\n  disabled = false,\n  loading = false,\n  onClick,\n  onKeyboardActivate,\n  isNative = true,\n  role = 'button',\n  tabIndex = 0,\n  stopPropagation = false,\n  preventDefault = false,\n  pressed\n}: UseAccessiblePressOptions = {}): UseAccessiblePressReturn {\n  const isDisabled = disabled || loading;\n  const lastWasPointerRef = React.useRef(false);\n\n  const markPointer = React.useCallback(() => {\n    lastWasPointerRef.current = true;\n  }, []);\n\n  const handleClick = React.useCallback(\n    (e: React.MouseEvent<HTMLElement>) => {\n      if (isDisabled) return;\n\n      // Handle event control flags\n      if (stopPropagation) e.stopPropagation();\n      if (preventDefault) e.preventDefault();\n\n      const virtual = isVirtualClick(e.nativeEvent as any);\n      const isPointer = lastWasPointerRef.current;\n      lastWasPointerRef.current = false;\n\n      const input: InputKind = virtual ? 'virtual' : isPointer ? 'pointer' : 'keyboard';\n\n      // If we have a keyboard handler, route keyboard + virtual clicks there.\n      if ((input === 'keyboard' || input === 'virtual') && onKeyboardActivate) {\n        onKeyboardActivate(e);\n        return;\n      }\n\n      onClick?.(e);\n    },\n    [isDisabled, onClick, onKeyboardActivate, stopPropagation, preventDefault]\n  );\n\n  // Only used for non-native elements: Enter/Space should trigger click(), reusing the same click routing.\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (isDisabled) return;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        // Trigger native click event so all routing goes through handleClick\n        (e.currentTarget as HTMLElement).click();\n      }\n    },\n    [isDisabled]\n  );\n\n  const pressProps: UseAccessiblePressReturn['pressProps'] = {\n    onPointerDown: markPointer,\n    onMouseDown: markPointer,\n    onTouchStart: markPointer,\n    onClick: handleClick,\n    'aria-disabled': isDisabled ? 'true' : undefined,\n    'aria-busy': loading ? 'true' : undefined,\n    'aria-pressed': pressed\n  };\n\n  // For non-native elements, add Enter/Space handling\n  if (!isNative) {\n    pressProps.onKeyDown = handleKeyDown;\n  }\n\n  // Return role/tabIndex separately (only for non-native elements)\n  const result: UseAccessiblePressReturn = { pressProps, isDisabled };\n\n  if (!isNative) {\n    result.role = role;\n    result.tabIndex = isDisabled ? -1 : tabIndex;\n  }\n\n  return result;\n}\n\n"],"names":["React","isVirtualClick","useAccessiblePress","disabled","loading","onClick","onKeyboardActivate","isNative","role","tabIndex","stopPropagation","preventDefault","pressed","isDisabled","lastWasPointerRef","useRef","markPointer","useCallback","current","handleClick","e","virtual","nativeEvent","isPointer","input","handleKeyDown","key","currentTarget","click","pressProps","onPointerDown","onMouseDown","onTouchStart","undefined","onKeyDown","result"],"mappings":"AA4HO,YAAAA,OAAA;AAAA,SAAA,kBAAAC,SAAA;AAAA,SAASC,EAAmB;AAAA,EACjCC,UAAAA,IAAW;AAAA,EACXC,SAAAA,IAAU;AAAA,EACVC,SAAAA;AAAAA,EACAC,oBAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,MAAAA,IAAO;AAAA,EACPC,UAAAA,IAAW;AAAA,EACXC,iBAAAA,IAAkB;AAAA,EAClBC,gBAAAA,IAAiB;AAAA,EACjBC,SAAAA;AACyB,IAAI,IAA8B;AAC3D,QAAMC,IAAaV,KAAYC,GACzBU,IAAoBd,EAAMe,OAAO,EAAK,GAEtCC,IAAchB,EAAMiB,YAAY,MAAM;AAC1CH,IAAAA,EAAkBI,UAAU;AAAA,EAC9B,GAAG,CAAA,CAAE,GAECC,IAAcnB,EAAMiB,YACxB,CAACG,MAAqC;AACpC,QAAIP,EAAY;AAGhB,IAAIH,OAAmBA,gBAAAA,GACnBC,OAAkBA,eAAAA;AAEtB,UAAMU,IAAUpB,EAAemB,EAAEE,WAAkB,GAC7CC,IAAYT,EAAkBI;AACpCJ,IAAAA,EAAkBI,UAAU;AAE5B,UAAMM,IAAmBH,IAAU,YAAYE,IAAY,YAAY;AAGvE,SAAKC,MAAU,cAAcA,MAAU,cAAclB,GAAoB;AACvEA,MAAAA,EAAmBc,CAAC;AACpB;AAAA,IACF;AAEAf,IAAAA,IAAUe,CAAC;AAAA,EACb,GACA,CAACP,GAAYR,GAASC,GAAoBI,GAAiBC,CAAc,CAC3E,GAGMc,IAAgBzB,EAAMiB,YAC1B,CAACG,MAAwC;AACvC,IAAIP,MAEAO,EAAEM,QAAQ,WAAWN,EAAEM,QAAQ,SACjCN,EAAET,eAAAA,GAEDS,EAAEO,cAA8BC,MAAAA;AAAAA,EAErC,GACA,CAACf,CAAU,CACb,GAEMgB,IAAqD;AAAA,IACzDC,eAAed;AAAAA,IACfe,aAAaf;AAAAA,IACbgB,cAAchB;AAAAA,IACdX,SAASc;AAAAA,IACT,iBAAiBN,IAAa,SAASoB;AAAAA,IACvC,aAAa7B,IAAU,SAAS6B;AAAAA,IAChC,gBAAgBrB;AAAAA,EAAAA;AAIlB,EAAKL,MACHsB,EAAWK,YAAYT;AAIzB,QAAMU,IAAmC;AAAA,IAAEN,YAAAA;AAAAA,IAAYhB,YAAAA;AAAAA,EAAAA;AAEvD,SAAKN,MACH4B,EAAO3B,OAAOA,GACd2B,EAAO1B,WAAWI,IAAa,KAAKJ,IAG/B0B;AACT;"}

package/dist/index68.js

@@ -1,5 +1,106 @@
-const e = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%23E4E9F1'/%3e%3c/svg%3e";
+import { useRef as i, useState as R, useCallback as w, useEffect as A } from "react";
+import { useComboboxNavigation as M } from "./index79.js";
+import { useDismissOnFocusOut as U } from "./index80.js";
+function _({
+  items: d,
+  isOpen: t,
+  onOpenChange: l,
+  onSelect: b,
+  listboxId: n,
+  loop: x = !0,
+  disabled: y = !1,
+  optionSelector: D = '[role="option"]',
+  hasItems: p,
+  keepHighlightOnSelect: m = !1,
+  closeOnTab: C = !0
+}) {
+  const g = i(null), s = i(!1), c = i(!1), a = i(!1), [h, r] = R(!1), v = p !== void 0 ? p : d.length > 0, f = w(() => {
+    l(!1);
+  }, [l]);
+  A(() => {
+    t || (s.current = !1, a.current = !1);
+  }, [t]);
+  const o = M({
+    items: d,
+    isOpen: t,
+    onSelect: b,
+    onClose: f,
+    onOpen: () => l(!0),
+    loop: x,
+    disabled: y,
+    listboxRef: g,
+    optionSelector: D,
+    keepHighlightOnSelect: m,
+    closeOnTab: C
+  }), u = U({
+    onFocusOut: f,
+    onEscape: f,
+    disabled: !t
+  }), I = {
+    ...u,
+    onPointerMove: () => {
+      h && r(!1);
+    },
+    onPointerDown: () => {
+      a.current = !0, r(!1);
+    },
+    onPointerUp: () => {
+    },
+    onFocusCapture: (e) => {
+      u.onFocusCapture(e), a.current ? r(!1) : r(!0);
+    },
+    onKeyDownCapture: (e) => {
+      u.onKeyDownCapture(e), (e.key === "Tab" || e.key === "ArrowDown" || e.key === "ArrowUp") && (a.current = !1), (e.key === "ArrowDown" || e.key === "ArrowUp") && r(!0);
+    },
+    onBlurCapture: (e) => {
+      if (r(!1), !s.current) {
+        if (c.current) {
+          c.current = !1;
+          return;
+        }
+        u.onBlurCapture(e);
+      }
+    }
+  }, P = {
+    role: "combobox",
+    "aria-expanded": t && v,
+    "aria-haspopup": "listbox",
+    "aria-controls": t ? n : void 0,
+    "aria-autocomplete": "list",
+    "aria-activedescendant": o.highlightedIndex >= 0 ? o.getOptionId(n, o.highlightedIndex) : void 0,
+    onKeyDown: (e) => {
+      e.key === "Tab" && (c.current = !0), o.handleKeyDown(e);
+    }
+  }, k = {
+    id: n,
+    role: "listbox",
+    ref: g,
+    onMouseDownCapture: (e) => {
+      s.current = !0;
+    },
+    onMouseUpCapture: (e) => {
+      s.current = !1;
+    },
+    onMouseLeave: (e) => {
+      s.current = !1;
+    }
+  }, F = w((e, K = !1) => ({
+    id: o.getOptionId(n, e),
+    role: "option",
+    "aria-selected": K
+  }), [o.getOptionId, n]);
+  return {
+    containerProps: I,
+    inputProps: P,
+    listboxProps: k,
+    getOptionProps: F,
+    highlightedIndex: o.highlightedIndex,
+    setHighlightedIndex: o.setHighlightedIndex,
+    getOptionId: o.getOptionId,
+    isKeyboardFocused: h
+  };
+}
 export {
-  e as default
+  _ as useCombobox
 };
 //# sourceMappingURL=index68.js.map

package/dist/index68.js.map

@@ -1 +1 @@
-{"version":3,"file":"index68.js","sources":["../src/assets/icons/checkbox-disabled.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%204C0%201.79086%201.79086%200%204%200H12C14.2091%200%2016%201.79086%2016%204V12C16%2014.2091%2014.2091%2016%2012%2016H4C1.79086%2016%200%2014.2091%200%2012V4Z'%20fill='%23E4E9F1'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_11"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index68.js","sources":["../src/utils/a11y/useCombobox.ts"],"sourcesContent":["import { useRef, useCallback, useEffect, useState } from 'react';\nimport type { RefObject } from 'react';\nimport { useComboboxNavigation } from './useComboboxNavigation';\nimport { useDismissOnFocusOut } from './useDismissOnFocusOut';\nimport type { UseDismissOnFocusOutReturn } from './useDismissOnFocusOut';\n\nexport interface UseComboboxOptions<T = any> {\n  /**\n   * Array of items to navigate through\n   */\n  items: T[];\n  \n  /**\n   * Whether the dropdown is currently open\n   */\n  isOpen: boolean;\n  \n  /**\n   * Callback to change the open state\n   */\n  onOpenChange: (open: boolean) => void;\n  \n  /**\n   * Callback when an item is selected (Enter key)\n   */\n  onSelect: (item: T, index: number) => void;\n  \n  /**\n   * Stable ID for the listbox element\n   */\n  listboxId: string;\n  \n  /**\n   * Whether to wrap around at the ends of the list.\n   * Default: true\n   */\n  loop?: boolean;\n  \n  /**\n   * Whether keyboard navigation is disabled\n   * (e.g., for custom rendered content)\n   */\n  disabled?: boolean;\n  \n  /**\n   * CSS selector for option elements (default: '[role=\"option\"]')\n   */\n  optionSelector?: string;\n  \n  /**\n   * Whether the listbox has any items to show\n   * Used for aria-expanded logic\n   * Default: items.length > 0\n   */\n  hasItems?: boolean;\n\n  /**\n   * Whether to keep the highlighted index after selecting an item.\n   * Useful for multi-select where the dropdown stays open after selection.\n   * Default: false\n   */\n  keepHighlightOnSelect?: boolean;\n\n  /**\n   * Whether Tab should close the dropdown.\n   * Set to false when Tab should move focus to elements within the popup (e.g. CTAs).\n   * Default: true\n   */\n  closeOnTab?: boolean;\n}\n\nexport interface UseComboboxReturn {\n  /**\n   * Props to spread on the container element (handles dismiss on focus out + keyboard focus tracking)\n   */\n  containerProps: UseDismissOnFocusOutReturn<HTMLElement> & {\n    onPointerMove: () => void;\n    onPointerDown: () => void;\n    onPointerUp: () => void;\n  };\n  \n  /**\n   * Props to spread on the combobox input element\n   */\n  inputProps: {\n    role: 'combobox';\n    'aria-expanded': boolean;\n    'aria-haspopup': 'listbox';\n    'aria-controls': string | undefined;\n    'aria-autocomplete': 'list';\n    'aria-activedescendant': string | undefined;\n    onKeyDown: (e: React.KeyboardEvent) => void;\n  };\n  \n  /**\n   * Props to spread on the listbox element\n   */\n  listboxProps: {\n    id: string;\n    role: 'listbox';\n    ref: RefObject<HTMLDivElement | null>;\n    onMouseDownCapture: (e: React.MouseEvent) => void;\n    onMouseUpCapture: (e: React.MouseEvent) => void;\n    onMouseLeave: (e: React.MouseEvent) => void;\n  };\n  \n  /**\n   * Generate props for an option element at the given index\n   * @param selected - Whether this option is the currently selected/chosen value (not keyboard highlight)\n   */\n  getOptionProps: (index: number, selected?: boolean) => {\n    id: string;\n    role: 'option';\n    'aria-selected': boolean;\n  };\n  \n  /**\n   * Currently highlighted index (-1 if none)\n   */\n  highlightedIndex: number;\n  \n  /**\n   * Set the highlighted index manually\n   */\n  setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n  \n  /**\n   * Generate stable ID for an option\n   */\n  getOptionId: (listboxId: string, index: number) => string;\n\n  /**\n   * Whether the combobox input was focused via keyboard (Tab) rather than pointer.\n   * Use to conditionally show focus ring only on keyboard interaction.\n   */\n  isKeyboardFocused: boolean;\n}\n\n/**\n * Comprehensive hook for implementing WAI-ARIA combobox pattern.\n * \n * Combines:\n * - Keyboard navigation (Arrow Up/Down, Enter, Escape, Tab)\n * - Focus management and dismissal\n * - ARIA attributes for accessibility\n * - Auto-scroll highlighted item into view\n * \n * This hook provides a complete, batteries-included solution for building\n * accessible combobox components (autocomplete, select, search with suggestions, etc.)\n * \n * @example Basic usage\n * ```tsx\n * const MyCombobox = () => {\n *   const [isOpen, setIsOpen] = useState(false);\n *   const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);\n *   \n *   const {\n *     containerProps,\n *     inputProps,\n *     listboxProps,\n *     getOptionProps,\n *     highlightedIndex\n *   } = useCombobox({\n *     items,\n *     isOpen,\n *     onOpenChange: setIsOpen,\n *     onSelect: (item) => console.log('Selected:', item),\n *     listboxId: 'my-listbox'\n *   });\n *   \n *   return (\n *     <div {...containerProps}>\n *       <input {...inputProps} />\n *       {isOpen && (\n *         <div {...listboxProps}>\n *           {items.map((item, i) => (\n *             <div key={i} {...getOptionProps(i)}>\n *               {item}\n *             </div>\n *           ))}\n *         </div>\n *       )}\n *     </div>\n *   );\n * };\n * ```\n * \n * @example With custom ARIA labels and handlers\n * ```tsx\n * const MySearchBox = () => {\n *   const [query, setQuery] = useState('');\n *   const [suggestions, setSuggestions] = useState([]);\n *   const [isOpen, setIsOpen] = useState(false);\n *   \n *   const { containerProps, inputProps, listboxProps, getOptionProps } = useCombobox({\n *     items: suggestions,\n *     isOpen,\n *     onOpenChange: setIsOpen,\n *     onSelect: (suggestion) => {\n *       setQuery(suggestion);\n *       setIsOpen(false);\n *     },\n *     listboxId: 'search-suggestions'\n *   });\n *   \n *   return (\n *     <div {...containerProps}>\n *       <input\n *         {...inputProps}\n *         value={query}\n *         onChange={(e) => setQuery(e.target.value)}\n *         aria-label=\"Search\"\n *       />\n *       {isOpen && suggestions.length > 0 && (\n *         <div {...listboxProps} aria-label=\"Search suggestions\">\n *           {suggestions.map((suggestion, i) => (\n *             <div\n *               key={i}\n *               {...getOptionProps(i)}\n *               onClick={() => {\n *                 setQuery(suggestion);\n *                 setIsOpen(false);\n *               }}\n *             >\n *               {suggestion}\n *             </div>\n *           ))}\n *         </div>\n *       )}\n *     </div>\n *   );\n * };\n * ```\n */\nexport function useCombobox<T = any>({\n  items,\n  isOpen,\n  onOpenChange,\n  onSelect,\n  listboxId,\n  loop = true,\n  disabled = false,\n  optionSelector = '[role=\"option\"]',\n  hasItems,\n  keepHighlightOnSelect = false,\n  closeOnTab = true\n}: UseComboboxOptions<T>): UseComboboxReturn {\n  const listboxRef = useRef<HTMLDivElement | null>(null);\n  const pointerDownInListboxRef = useRef(false);\n  const tabKeyPressedRef = useRef(false);\n  const pointerFocusRef = useRef(false);\n  const [isKeyboardFocused, setIsKeyboardFocused] = useState(false);\n  \n  // Determine if we should show as expanded\n  const shouldShowExpanded = hasItems !== undefined ? hasItems : items.length > 0;\n  \n  // Close dropdown callback\n  const closeDropdown = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n\n  // Ensure pointer state doesn't get stuck when listbox unmounts\n  useEffect(() => {\n    if (!isOpen) {\n      pointerDownInListboxRef.current = false;\n      pointerFocusRef.current = false;\n    }\n  }, [isOpen]);\n  \n  // Keyboard navigation with aria-activedescendant\n  const navigation = useComboboxNavigation<T>({\n    items,\n    isOpen,\n    onSelect,\n    onClose: closeDropdown,\n    onOpen: () => onOpenChange(true),\n    loop,\n    disabled,\n    listboxRef,\n    optionSelector,\n    keepHighlightOnSelect,\n    closeOnTab\n  });\n  \n  // Focus out / Escape dismissal\n  const dismissHandlers = useDismissOnFocusOut({\n    onFocusOut: closeDropdown,\n    onEscape: closeDropdown,\n    disabled: !isOpen\n  });\n\n  const containerProps = {\n    ...dismissHandlers,\n    onPointerMove: () => {\n      if (isKeyboardFocused) {\n        setIsKeyboardFocused(false);\n      }\n    },\n    onPointerDown: () => {\n      pointerFocusRef.current = true;\n      setIsKeyboardFocused(false);\n    },\n    onPointerUp: () => {\n      // Don't reset pointerFocusRef here — timing races with programmatic focus\n      // (e.g. focus-on-open via double rAF) cause it to clear before onFocusCapture\n      // fires, incorrectly setting isKeyboardFocused=true.\n      // Instead, pointerFocusRef is reset only when keyboard navigation starts\n      // (Tab/Arrow in onKeyDownCapture), ensuring any programmatic focus after a\n      // click is always treated as pointer context.\n    },\n    onFocusCapture: (e: React.FocusEvent<HTMLElement>) => {\n      dismissHandlers.onFocusCapture(e);\n\n      if (pointerFocusRef.current) {\n        setIsKeyboardFocused(false);\n      } else {\n        setIsKeyboardFocused(true);\n      }\n    },\n    onKeyDownCapture: (e: React.KeyboardEvent<HTMLElement>) => {\n      dismissHandlers.onKeyDownCapture(e);\n\n      // Keyboard interaction starts — clear pointer context so subsequent\n      // focus events are correctly identified as keyboard-initiated.\n      if (e.key === 'Tab' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        pointerFocusRef.current = false;\n      }\n\n      // Arrow keys mean keyboard navigation — show focus outline even if\n      // the combobox was opened with mouse (activedescendant doesn't move\n      // DOM focus, so onFocusCapture alone can't detect the switch).\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        setIsKeyboardFocused(true);\n      }\n    },\n    onBlurCapture: (e: React.FocusEvent<HTMLElement>) => {\n      setIsKeyboardFocused(false);\n\n      // Clicking inside a listbox option can blur the input (relatedTarget is null),\n      // which would dismiss before the click handler runs. Prevent that.\n      if (pointerDownInListboxRef.current) return;\n\n      // Tab key pressed - let Tab handler close dropdown, skip blur detection\n      if (tabKeyPressedRef.current) {\n        tabKeyPressedRef.current = false;\n        return;\n      }\n\n      dismissHandlers.onBlurCapture(e);\n    }\n  };\n  \n  // Build input props\n  const inputProps = {\n    role: 'combobox' as const,\n    'aria-expanded': isOpen && shouldShowExpanded,\n    'aria-haspopup': 'listbox' as const,\n    'aria-controls': isOpen ? listboxId : undefined,\n    'aria-autocomplete': 'list' as const,\n    'aria-activedescendant': \n      navigation.highlightedIndex >= 0 \n        ? navigation.getOptionId(listboxId, navigation.highlightedIndex) \n        : undefined,\n    onKeyDown: (e: React.KeyboardEvent) => {\n      // Set flag when Tab is pressed (before blur fires)\n      if (e.key === 'Tab') {\n        tabKeyPressedRef.current = true;\n      }\n      navigation.handleKeyDown(e);\n    }\n  };\n  \n  // Build listbox props\n  const listboxProps = {\n    id: listboxId,\n    role: 'listbox' as const,\n    ref: listboxRef,\n    onMouseDownCapture: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = true;\n    },\n    onMouseUpCapture: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = false;\n    },\n    onMouseLeave: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = false;\n    }\n  };\n  \n  // Option props generator\n  const getOptionProps = useCallback(\n    (index: number, selected: boolean = false) => ({\n      id: navigation.getOptionId(listboxId, index),\n      role: 'option' as const,\n      'aria-selected': selected\n    }),\n    [navigation.getOptionId, listboxId]\n  );\n  \n  return {\n    containerProps,\n    inputProps,\n    listboxProps,\n    getOptionProps,\n    highlightedIndex: navigation.highlightedIndex,\n    setHighlightedIndex: navigation.setHighlightedIndex,\n    getOptionId: navigation.getOptionId,\n    isKeyboardFocused\n  };\n}\n"],"names":["useRef","useState","useCallback","useEffect","useComboboxNavigation","useDismissOnFocusOut","useCombobox","items","isOpen","onOpenChange","onSelect","listboxId","loop","disabled","optionSelector","hasItems","keepHighlightOnSelect","closeOnTab","listboxRef","pointerDownInListboxRef","tabKeyPressedRef","pointerFocusRef","isKeyboardFocused","setIsKeyboardFocused","shouldShowExpanded","undefined","length","closeDropdown","current","navigation","onClose","onOpen","dismissHandlers","onFocusOut","onEscape","containerProps","onPointerMove","onPointerDown","onPointerUp","onFocusCapture","e","onKeyDownCapture","key","onBlurCapture","inputProps","role","highlightedIndex","getOptionId","onKeyDown","handleKeyDown","listboxProps","id","ref","onMouseDownCapture","_e","onMouseUpCapture","onMouseLeave","getOptionProps","index","selected","setHighlightedIndex"],"mappings":"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"}

package/dist/index69.js

@@ -1,5 +1,22 @@
-const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3e%3cpath%20d='M11.0198%205.66834L6.87692%2010.8469L4.80549%209.29334M1.78467%202.82038V13.1775C1.78467%2013.7496%202.24838%2014.2132%202.82038%2014.2132H13.1775C13.7496%2014.2132%2014.2132%2013.7496%2014.2132%2013.1775V2.82038C14.2132%202.24837%2013.7496%201.78467%2013.1775%201.78467H2.82038C2.24838%201.78467%201.78467%202.24838%201.78467%202.82038Z'%20stroke='black'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'%20/%3e%3c/svg%3e";
+import { useRef as u, useEffect as i } from "react";
+function f(n, {
+  targetSelector: r = "#main-content h1",
+  fallbackId: c = "main-content"
+} = {}) {
+  const t = u(!0);
+  i(() => {
+    if (t.current) {
+      t.current = !1;
+      return;
+    }
+    const o = requestAnimationFrame(() => {
+      const e = document.querySelector(r) || document.getElementById(c);
+      e && (e.hasAttribute("tabindex") || e.setAttribute("tabindex", "-1"), e.focus());
+    });
+    return () => cancelAnimationFrame(o);
+  }, n);
+}
 export {
-  e as default
+  f as useFocusManagement
 };
 //# sourceMappingURL=index69.js.map

package/dist/index69.js.map

@@ -1 +1 @@
-{"version":3,"file":"index69.js","sources":["../src/assets/icons/checkbox-field.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3e%3cpath%20d='M11.0198%205.66834L6.87692%2010.8469L4.80549%209.29334M1.78467%202.82038V13.1775C1.78467%2013.7496%202.24838%2014.2132%202.82038%2014.2132H13.1775C13.7496%2014.2132%2014.2132%2013.7496%2014.2132%2013.1775V2.82038C14.2132%202.24837%2013.7496%201.78467%2013.1775%201.78467H2.82038C2.24838%201.78467%201.78467%202.24838%201.78467%202.82038Z'%20stroke='black'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'%20/%3e%3c/svg%3e\""],"names":["__vite_glob_0_12"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index69.js","sources":["../src/utils/a11y/useFocusManagement.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { DependencyList } from 'react';\n\nexport interface UseFocusManagementOptions {\n  /**\n   * CSS selector to query the primary focus target.\n   * Default: 'h1'\n   */\n  targetSelector?: string;\n  /**\n   * Fallback element id if selector target is not found.\n   * Default: 'main-content'\n   */\n  fallbackId?: string;\n}\n\n/**\n * Generic focus management hook for route/state driven UI transitions.\n * Useful for both route changes and in-page multi-step wizards.\n * \n * Always skips first render and uses animation frame for safe DOM timing.\n */\nexport function useFocusManagement(\n  dependencies: DependencyList,\n  {\n    targetSelector = '#main-content h1',\n    fallbackId = 'main-content'\n  }: UseFocusManagementOptions = {}\n): void {\n  const isFirstRender = useRef(true);\n\n  useEffect(() => {\n    // Always skip first render\n    if (isFirstRender.current) {\n      isFirstRender.current = false;\n      return;\n    }\n\n    const focusTarget = () => {\n      const el = (document.querySelector(targetSelector) || document.getElementById(fallbackId)) as HTMLElement;\n      if (el) {\n        if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '-1');\n        el.focus();\n      }\n    };\n\n    // Always use animation frame for safe DOM timing\n    const rafId = requestAnimationFrame(focusTarget);\n    return () => cancelAnimationFrame(rafId);\n  }, dependencies);\n}\n"],"names":["useFocusManagement","dependencies","targetSelector","fallbackId","isFirstRender","useRef","useEffect","current","rafId","requestAnimationFrame","focusTarget","el","document","querySelector","getElementById","hasAttribute","setAttribute","focus","cancelAnimationFrame"],"mappings":";AAsBO,SAASA,EACdC,GACA;AAAA,EACEC,gBAAAA,IAAiB;AAAA,EACjBC,YAAAA,IAAa;AACY,IAAI,IACzB;AACN,QAAMC,IAAgBC,EAAO,EAAI;AAEjCC,EAAAA,EAAU,MAAM;AAEd,QAAIF,EAAcG,SAAS;AACzBH,MAAAA,EAAcG,UAAU;AACxB;AAAA,IACF;AAWA,UAAMC,IAAQC,sBATMC,MAAM;AACxB,YAAMC,IAAMC,SAASC,cAAcX,CAAc,KAAKU,SAASE,eAAeX,CAAU;AACxF,MAAIQ,MACGA,EAAGI,aAAa,UAAU,KAAGJ,EAAGK,aAAa,YAAY,IAAI,GAClEL,EAAGM,MAAAA;AAAAA,IAEP,CAG+C;AAC/C,WAAO,MAAMC,qBAAqBV,CAAK;AAAA,EACzC,GAAGP,CAAY;AACjB;"}

package/dist/index7.js

@@ -1,56 +1,49 @@
-import r from "react";
-const v = ({
-  checked: o = !1,
-  onToggle: d = () => {
-  },
-  disabled: e = !1,
-  label: t,
-  labelPosition: n = "left",
-  labelClickable: l = !0,
-  automationId: i = ""
+import s, { useState as h, useCallback as i } from "react";
+import "./index72.js";
+import { isElementVisible as p } from "./index204.js";
+const x = ({
+  skipLinks: n,
+  className: c = ""
 }) => {
-  const c = () => {
-    e || d(!o);
-  }, s = (a, b = !1) => a ? /* @__PURE__ */ r.createElement("label", {
-    className: `select-none ${m[b ? "disabled" : "enabled"]}`,
-    "data-automation-id": "toggle-label"
-  }, a) : null, u = {
-    enabled: "cursor-pointer",
-    disabled: "cursor-not-allowed"
-  }, m = {
-    enabled: `text-[var(--color-gray-700)] ${l ? "cursor-pointer" : ""}`,
-    disabled: "text-[var(--color-gray-600)] cursor-not-allowed"
-  }, g = {
-    checked: ` ${e ? "bg-[var(--color-green-100)]" : "bg-[var(--color-green-300)] hover:bg-[var(--color-green-500)]"}`,
-    unchecked: ` ${e ? "bg-[var(--color-gray-400)]" : "bg-[var(--color-gray-500)] hover:bg-[var(--color-gray-600)]"}`,
-    enabled: " cursor-pointer",
-    disabled: " cursor-not-allowed"
-  };
-  return /* @__PURE__ */ r.createElement("div", {
-    className: `se-design-toggle flex items-center gap-1 ${u[e ? "disabled" : "enabled"]}`,
-    onClick: l ? c : void 0,
-    "data-automation-id": "toggle-container"
-  }, t && n === "left" && s(t, e), /* @__PURE__ */ r.createElement("div", {
-    className: `toggle-btn block w-8 h-4 p-0.5 rounded-full transition ease-in-out
-        ${g[o ? "checked" : "unchecked"]}
-        ${g[e ? "disabled" : "enabled"]}
-      `,
-    onClick: (a) => {
-      a.stopPropagation(), c();
-    },
-    "data-automation-id": i || "toggle-button"
-  }, /* @__PURE__ */ r.createElement("input", {
-    className: "opacity-0 hidden",
-    type: "checkbox",
-    checked: o,
-    readOnly: !0,
-    disabled: e
-  }), /* @__PURE__ */ r.createElement("span", {
-    className: `block w-3 h-3 rounded-full bg-[var(--color-white)]
-            transform transition-transform ${o ? "translate-x-4" : ""}`
-  })), t && n === "right" && s(t, e));
+  const [r, u] = h(n), l = i(() => {
+    const t = n.filter((e) => {
+      const o = document.getElementById(e.id);
+      return p(o);
+    });
+    u(t);
+  }, [n]), a = i(() => {
+    l();
+  }, [l]), d = i((t) => {
+    const e = document.getElementById(t);
+    if (e) {
+      const o = document.getElementById("main-header") || document.querySelector("header");
+      if (e === o) {
+        e.focus();
+        return;
+      }
+      const f = o ? o.offsetHeight : 0, m = e.getBoundingClientRect().top + window.scrollY - f - 16;
+      window.scrollTo({
+        top: m,
+        behavior: "smooth"
+      }), e.focus({
+        preventScroll: !0
+      });
+    }
+  }, []);
+  return n.length === 0 ? null : /* @__PURE__ */ s.createElement("div", {
+    className: `se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${c}`,
+    onFocus: a
+  }, r.map((t) => /* @__PURE__ */ s.createElement("a", {
+    key: t.id,
+    href: `#${t.id}`,
+    className: "absolute -left-[9999px] [clip:rect(0,0,0,0)] no-underline text-[var(--color-blue-500)] text-md py-1 px-2.5 rounded capitalize focus:static focus:left-auto focus:[clip:auto] focus:outline-none focus-visible:!outline-none hover:text-[var(--color-blue-600)] hover:bg-[var(--color-blue-200)]",
+    onClick: (e) => {
+      e.preventDefault(), d(t.id);
+    }
+  }, t.label)));
 };
 export {
-  v as Toggle
+  x as SkipLinksBar,
+  x as default
 };
 //# sourceMappingURL=index7.js.map