se-design 1.0.86 → 1.0.87-dev.2

package/dist/index6.js.map

@@ -1 +1 @@
-{"version":3,"file":"index6.js","sources":["../src/components/Icon/index.tsx"],"sourcesContent":["// TODO: `applyAttributesToElement` recursion drops `size` for nested elements (pre-existing).\nimport React from 'react';\nimport { ReactSVG } from 'react-svg';\nimport { getA11yNameAttributes, useAccessiblePress } from '../../utils/a11y';\n\n// Dynamically import icons using Vite's asset handling\nconst ICON_MAP: Record<string, string> = (import.meta as any).glob('/src/assets/icons/*.svg', {\n  eager: true,\n  query: '?url',\n  import: 'default'\n});\n\nexport type RotationTypes = '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n\nexport type IconProps = {\n  name: string;\n  id?: string;\n  className?: string;\n  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;\n  /**\n   * Accessible name when Icon is interactive (onClick is provided).\n   * If omitted, we fall back to `name` and warn in development.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of visible element(s) that label this Icon when interactive.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this Icon when interactive (additional context).\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Toggle state when Icon is used as a button (e.g., show/hide sidebar).\n   * Only applies when `onClick` is provided (interactive icon).\n   */\n  ariaPressed?: boolean;\n  /**\n   * Expansion state when Icon controls a collapsible region/panel.\n   * Only applies when `onClick` is provided (interactive icon).\n   */\n  ariaExpanded?: boolean;\n  /**\n   * ID of the element controlled by this Icon (for aria-controls).\n   * Only applies when `onClick` is provided (interactive icon).\n   */\n  ariaControls?: string;\n  fill?: string;\n  stroke?: string;\n  rotation?: RotationTypes;\n  size?: number;\n  shouldStopPropagation?: boolean;\n  automationId?: string;\n  /**\n   * Disables the icon interaction while keeping it visible to AT with aria-disabled=\"true\".\n   * Only applies when `onClick` is provided (interactive icon).\n   */\n  disabled?: boolean;\n  /**\n   * Native HTML title attribute — renders as a browser tooltip on hover.\n   * For mouse users only; does not replace ariaLabel for screen readers.\n   */\n  htmlTitle?: string;\n};\n\nconst applyAttributesToElement = (element: Element, fill?: string, stroke?: string, size?: number) => {\n  // Only modify existing attributes\n  if (fill && element.hasAttribute('fill')) {\n    const currentFill = element.getAttribute('fill');\n    // Only update if the current fill is not \"none\"\n    if (currentFill !== 'none') {\n      element.setAttribute('fill', fill);\n    }\n  }\n\n  if (stroke && element.hasAttribute('stroke')) {\n    element.setAttribute('stroke', stroke);\n  }\n\n  if (size && element.hasAttribute('width')) {\n    element.setAttribute('width', size.toString());\n  }\n\n  if (size && element.hasAttribute('height')) {\n    element.setAttribute('height', size.toString());\n  }\n\n  // Recursively apply to all child elements\n  Array.from(element.children).forEach((child) => {\n    applyAttributesToElement(child, fill, stroke);\n  });\n};\n\nexport const Icon = React.forwardRef<HTMLDivElement, IconProps>((props, ref) => {\n  const {\n    name = '',\n    id,\n    className = '',\n    onClick,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ariaPressed,\n    ariaExpanded,\n    ariaControls,\n    fill,\n    stroke,\n    rotation = '0',\n    size,\n    shouldStopPropagation = false,\n    disabled = false,\n    htmlTitle\n  } = props;\n  const iconRotationClasses = {\n    '0': 'rotate-0',\n    '45': 'rotate-45',\n    '90': 'rotate-90',\n    '135': 'rotate-[135deg]',\n    '180': 'rotate-180',\n    '225': 'rotate-[225deg]',\n    '270': '-rotate-90',\n    '315': '-rotate-45'\n  };\n  const src = ICON_MAP[`/src/assets/icons/${name}.svg`];\n\n  if (!src) {\n    console.error(`Icon \"${name}\" not found in ICON_MAP.`);\n    return null;\n  }\n\n  const isInteractive = typeof onClick === 'function';\n  const computedAriaLabel = ariaLabel || name;\n\n  if (isInteractive && !ariaLabel && (import.meta as { env?: { DEV?: boolean } }).env?.DEV) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `[se-design/Icon] Missing ariaLabel for clickable icon \"${name}\". ` +\n        `Falling back to aria-label=\"${computedAriaLabel}\".`\n    );\n  }\n\n  const { pressProps, role, tabIndex, isDisabled } = useAccessiblePress({\n    isNative: false,\n    onClick: isInteractive ? (e: React.MouseEvent<HTMLElement>) => onClick?.(e) : undefined,\n    disabled: isInteractive ? disabled : false,\n    stopPropagation: shouldStopPropagation\n  });\n\n  // Compute accessible name/description props with correct precedence (aligns with Button/Link).\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel: computedAriaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  });\n\n  const interactiveProps = isInteractive\n    ? {\n        ...pressProps,\n        role,\n        tabIndex,\n        ...accessibleNameProps,\n        'aria-pressed': ariaPressed,\n        'aria-expanded': ariaExpanded,\n        'aria-controls': ariaControls || undefined\n      }\n    : undefined;\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={`se-design-svg-wrapper transition-transform duration-250 ease-linear rounded-[3px] ${\n        isInteractive ? `${isDisabled ? 'opacity-50 cursor-default' : 'cursor-pointer focus-outline'}` : ''\n      } ${className} ${iconRotationClasses[rotation]}`}\n      aria-hidden={!isInteractive ? 'true' : undefined}\n      title={htmlTitle}\n      {...interactiveProps}\n      data-automation-id={props?.automationId}\n    >\n      <ReactSVG\n        src={src}\n        wrapper=\"span\"\n        beforeInjection={(svg) => {\n          svg.setAttribute('aria-hidden', 'true');\n          svg.setAttribute('role', 'none');\n          applyAttributesToElement(svg, fill, stroke, size);\n        }}\n      />\n    </div>\n  );\n});\n\nIcon.displayName = 'Icon';\n"],"names":["ICON_MAP","import","applyAttributesToElement","element","fill","stroke","size","hasAttribute","getAttribute","setAttribute","toString","Array","from","children","forEach","child","Icon","React","forwardRef","props","ref","name","id","className","onClick","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaPressed","ariaExpanded","ariaControls","rotation","shouldStopPropagation","disabled","htmlTitle","iconRotationClasses","src","console","error","isInteractive","computedAriaLabel","pressProps","role","tabIndex","isDisabled","useAccessiblePress","isNative","e","undefined","stopPropagation","accessibleNameProps","getA11yNameAttributes","interactiveProps","createElement","_extends","title","automationId","ReactSVG","wrapper","beforeInjection","svg","displayName"],"mappings":"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"}
+{"version":3,"file":"index6.js","sources":["../src/components/Icon/index.tsx"],"sourcesContent":["// TODO: `applyAttributesToElement` recursion drops `size` for nested elements (pre-existing).\nimport React from 'react';\nimport { ReactSVG } from 'react-svg';\nimport { getA11yNameAttributes, useAccessiblePress } from '../../utils/a11y';\n\n// Dynamically import icons using Vite's asset handling\nconst ICON_MAP: Record<string, string> = (import.meta as any).glob('/src/assets/icons/*.svg', {\n  eager: true,\n  query: '?url',\n  import: 'default'\n});\n\nexport type RotationTypes = '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n\nexport type IconProps = {\n  name: string;\n  id?: string;\n  className?: string;\n  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;\n  /**\n   * Accessible name when Icon is interactive (onClick is provided).\n   * If omitted, we fall back to `name` and warn in development.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of visible element(s) that label this Icon when interactive.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this Icon when interactive (additional context).\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Toggle state when Icon is used as a button (e.g., show/hide sidebar).\n   * Only applies when `onClick` is provided (interactive icon).\n   */\n  ariaPressed?: boolean;\n  /**\n   * Expansion state when Icon controls a collapsible region/panel.\n   * Only applies when `onClick` is provided (interactive icon).\n   */\n  ariaExpanded?: boolean;\n  /**\n   * ID of the element controlled by this Icon (for aria-controls).\n   * Only applies when `onClick` is provided (interactive icon).\n   */\n  ariaControls?: string;\n  fill?: string;\n  stroke?: string;\n  rotation?: RotationTypes;\n  size?: number;\n  shouldStopPropagation?: boolean;\n  automationId?: string;\n  /**\n   * Disables the icon interaction while keeping it visible to AT with aria-disabled=\"true\".\n   * Only applies when `onClick` is provided (interactive icon).\n   */\n  disabled?: boolean;\n  /**\n   * Native HTML title attribute — renders as a browser tooltip on hover.\n   * For mouse users only; does not replace ariaLabel for screen readers.\n   */\n  htmlTitle?: string;\n  /**\n   * Override tab order. Pass tabIndex={0} to make a non-interactive or disabled icon\n   * focusable (e.g. for tooltip access). Overrides the hook's default when provided.\n   */\n  tabIndex?: number;\n};\n\nconst applyAttributesToElement = (element: Element, fill?: string, stroke?: string, size?: number) => {\n  // Only modify existing attributes\n  if (fill && element.hasAttribute('fill')) {\n    const currentFill = element.getAttribute('fill');\n    // Only update if the current fill is not \"none\"\n    if (currentFill !== 'none') {\n      element.setAttribute('fill', fill);\n    }\n  }\n\n  if (stroke && element.hasAttribute('stroke')) {\n    element.setAttribute('stroke', stroke);\n  }\n\n  if (size && element.hasAttribute('width')) {\n    element.setAttribute('width', size.toString());\n  }\n\n  if (size && element.hasAttribute('height')) {\n    element.setAttribute('height', size.toString());\n  }\n\n  // Recursively apply to all child elements\n  Array.from(element.children).forEach((child) => {\n    applyAttributesToElement(child, fill, stroke);\n  });\n};\n\nexport const Icon = React.forwardRef<HTMLDivElement, IconProps>((props, ref) => {\n  const {\n    name = '',\n    id,\n    className = '',\n    onClick,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ariaPressed,\n    ariaExpanded,\n    ariaControls,\n    fill,\n    stroke,\n    rotation = '0',\n    size,\n    shouldStopPropagation = false,\n    disabled = false,\n    htmlTitle\n  } = props;\n  const iconRotationClasses = {\n    '0': 'rotate-0',\n    '45': 'rotate-45',\n    '90': 'rotate-90',\n    '135': 'rotate-[135deg]',\n    '180': 'rotate-180',\n    '225': 'rotate-[225deg]',\n    '270': '-rotate-90',\n    '315': '-rotate-45'\n  };\n  const src = ICON_MAP[`/src/assets/icons/${name}.svg`];\n\n  if (!src) {\n    console.error(`Icon \"${name}\" not found in ICON_MAP.`);\n    return null;\n  }\n\n  const isInteractive = typeof onClick === 'function';\n  const computedAriaLabel = ariaLabel || name;\n\n  if (isInteractive && !ariaLabel && (import.meta as { env?: { DEV?: boolean } }).env?.DEV) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `[se-design/Icon] Missing ariaLabel for clickable icon \"${name}\". ` +\n        `Falling back to aria-label=\"${computedAriaLabel}\".`\n    );\n  }\n\n  const hasTabIndex = props.tabIndex !== undefined;\n  const { pressProps, role, tabIndex: hookTabIndex, isDisabled } = useAccessiblePress({\n    isNative: false,\n    onClick: isInteractive ? (e: React.MouseEvent<HTMLElement>) => onClick?.(e) : undefined,\n    disabled: isInteractive ? disabled : false,\n    tabIndex: props.tabIndex ?? 0,\n    stopPropagation: shouldStopPropagation\n  });\n\n  // Compute accessible name/description props with correct precedence (aligns with Button/Link).\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel: computedAriaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  });\n\n  const finalTabIndex = hasTabIndex ? props.tabIndex : hookTabIndex;\n  const interactiveProps = isInteractive\n    ? {\n        ...pressProps,\n        role,\n        tabIndex: finalTabIndex,\n        ...accessibleNameProps,\n        'aria-pressed': ariaPressed,\n        'aria-expanded': ariaExpanded,\n        'aria-controls': ariaControls || undefined\n      }\n    : undefined;\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={`se-design-svg-wrapper transition-transform duration-250 ease-linear rounded-[3px] ${\n        isInteractive ? `${isDisabled ? 'opacity-50 cursor-default' : 'cursor-pointer focus-outline'}` : ''\n      } ${className} ${iconRotationClasses[rotation]}`}\n      aria-hidden={!isInteractive && !hasTabIndex ? 'true' : undefined}\n      title={htmlTitle}\n      {...interactiveProps}\n      {...(!isInteractive && hasTabIndex && { tabIndex: props.tabIndex, ...accessibleNameProps })}\n      data-automation-id={props?.automationId}\n    >\n      <ReactSVG\n        src={src}\n        wrapper=\"span\"\n        beforeInjection={(svg) => {\n          svg.setAttribute('aria-hidden', 'true');\n          svg.setAttribute('role', 'none');\n          applyAttributesToElement(svg, fill, stroke, size);\n        }}\n      />\n    </div>\n  );\n});\n\nIcon.displayName = 'Icon';\n"],"names":["ICON_MAP","import","applyAttributesToElement","element","fill","stroke","size","hasAttribute","getAttribute","setAttribute","toString","Array","from","children","forEach","child","Icon","React","forwardRef","props","ref","name","id","className","onClick","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaPressed","ariaExpanded","ariaControls","rotation","shouldStopPropagation","disabled","htmlTitle","iconRotationClasses","src","console","error","isInteractive","computedAriaLabel","hasTabIndex","tabIndex","undefined","pressProps","role","hookTabIndex","isDisabled","useAccessiblePress","isNative","e","stopPropagation","accessibleNameProps","getA11yNameAttributes","finalTabIndex","interactiveProps","createElement","_extends","title","automationId","ReactSVG","wrapper","beforeInjection","svg","displayName"],"mappings":"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"}

package/dist/index61.js

@@ -1,6 +1,6 @@
 import n, { useState as u, useCallback as y, useEffect as P } from "react";
 import { Popover as I } from "./index19.js";
-import { useStableId as k } from "./index205.js";
+import { useStableId as k } from "./index206.js";
 /* empty css         */
 function p() {
   return p = Object.assign ? Object.assign.bind() : function(r) {

package/dist/index63.js

@@ -2,7 +2,7 @@ import F, { useState as ot, useRef as X, useEffect as $ } from "react";
 import { createPortal as nt } from "react-dom";
 import { Icon as it } from "./index6.js";
 import { Button as rt } from "./index4.js";
-import { debounce as lt } from "./index224.js";
+import { debounce as lt } from "./index225.js";
 const q = 500, S = 50, U = 150, st = {
   "top-left": {
     rotate: "315",

package/dist/index65.js

@@ -4,7 +4,7 @@ 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";
+import { useStableId as J } from "./index206.js";
 /* empty css         */
 const K = {
   lg: {

package/dist/index7.js

@@ -1,6 +1,6 @@
 import s, { useState as h, useCallback as i } from "react";
 import "./index72.js";
-import { isElementVisible as p } from "./index204.js";
+import { isElementVisible as p } from "./index205.js";
 const x = ({
   skipLinks: n,
   className: c = ""

package/dist/index79.js

@@ -1,5 +1,5 @@
 import { useState as m, useEffect as E, useCallback as w } from "react";
-import { useScrollActiveIntoView as I } from "./index247.js";
+import { useScrollActiveIntoView as I } from "./index248.js";
 function A({
   items: u,
   isOpen: t,

package/dist/index81.js

@@ -1,12 +1,14 @@
-function f({
-  ariaLabel: e,
-  ariaLabelledBy: i,
-  ariaDescribedBy: r
+import { mergeIds as i } from "./index223.js";
+function n({
+  ariaLabel: t,
+  ariaLabelledBy: o,
+  ariaDescribedBy: r,
+  internalLabelId: f
 }) {
-  const t = {};
-  return i ? t["aria-labelledby"] = i : e && (t["aria-label"] = e), r && (t["aria-describedby"] = r), t;
+  const e = {}, s = t ? o : i(f, o);
+  return s ? e["aria-labelledby"] = s : t && (e["aria-label"] = t), r && (e["aria-describedby"] = r), e;
 }
 export {
-  f as getA11yNameAttributes
+  n as getA11yNameAttributes
 };
 //# sourceMappingURL=index81.js.map

package/dist/index81.js.map

@@ -1 +1 @@
-{"version":3,"file":"index81.js","sources":["../src/utils/a11y/accessibleName.ts"],"sourcesContent":["/**\n * Accessible name/description utilities following WCAG precedence rules.\n * \n * **When to use:**\n * - `ariaLabelledBy`: visible label exists (preferred - keeps SR and visual text in sync)\n * - `ariaLabel`: no visible label (e.g., icon-only buttons)\n * - `ariaDescribedBy`: additional context needed (warnings, hints, constraints)\n * \n * **Precedence:** ariaLabelledBy > ariaLabel > visible text content\n * \n * @example Icon-only button\n * ```tsx\n * <Button iconProps={{ name: 'close' }} ariaLabel=\"Close dialog\" />\n * ```\n * \n * @example Disambiguate generic labels\n * ```tsx\n * <Button label=\"Edit\" ariaLabel=\"Edit name\" />\n * <Button label=\"Edit\" ariaLabel=\"Edit email\" />\n * ```\n */\n\nexport type AccessibleNameInput = {\n  /** Accessible name when no visible label exists (icon-only buttons). */\n  ariaLabel?: string;\n  /** ID(s) of visible element(s) that label this control. Preferred over ariaLabel. */\n  ariaLabelledBy?: string;\n  /** ID(s) of element(s) providing additional description (additive). */\n  ariaDescribedBy?: string;\n};\n\n/**\n * Returns ARIA attributes with correct precedence.\n * Prefer ariaLabelledBy > ariaLabel. ariaDescribedBy is always additive.\n */\nexport function getA11yNameAttributes({\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy\n}: AccessibleNameInput): Record<string, string> {\n  const props: Record<string, string> = {};\n\n  if (ariaLabelledBy) props['aria-labelledby'] = ariaLabelledBy;\n  else if (ariaLabel) props['aria-label'] = ariaLabel;\n\n  if (ariaDescribedBy) props['aria-describedby'] = ariaDescribedBy;\n\n  return props;\n}\n"],"names":["getA11yNameAttributes","ariaLabel","ariaLabelledBy","ariaDescribedBy","props"],"mappings":"AAmCO,SAASA,EAAsB;AAAA,EACpCC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AACmB,GAA2B;AAC9C,QAAMC,IAAgC,CAAA;AAEtC,SAAIF,IAAgBE,EAAM,iBAAiB,IAAIF,IACtCD,MAAWG,EAAM,YAAY,IAAIH,IAEtCE,MAAiBC,EAAM,kBAAkB,IAAID,IAE1CC;AACT;"}
+{"version":3,"file":"index81.js","sources":["../src/utils/a11y/accessibleName.ts"],"sourcesContent":["/**\n * Accessible name/description utilities following WCAG precedence rules.\n *\n * **When to use:**\n * - `ariaLabelledBy`: external visible element labels this control (preferred - keeps SR and visual text in sync)\n * - `ariaLabel`: no visible label (e.g., icon-only buttons)\n * - `internalLabelId`: the component renders its OWN visible label and wants it combined with any external suffix\n * - `ariaDescribedBy`: additional context needed (warnings, hints, constraints)\n *\n * **Precedence:** ariaLabelledBy > ariaLabel > visible text content\n *\n * @example Icon-only button\n * ```tsx\n * <Button iconProps={{ name: 'close' }} ariaLabel=\"Close dialog\" />\n * ```\n *\n * @example Disambiguate generic labels\n * ```tsx\n * <Button label=\"Edit\" ariaLabel=\"Edit name\" />\n * <Button label=\"Edit\" ariaLabel=\"Edit email\" />\n * ```\n *\n * @example Combine the component's own label with an external suffix\n * ```tsx\n * // visible label id + caller-provided element are both announced\n * getA11yNameAttributes({ internalLabelId: labelId, ariaLabelledBy: externalId })\n * // -> aria-labelledby=\"labelId externalId\"\n * ```\n */\n\nimport { mergeIds } from '../mergeIds';\n\nexport type AccessibleNameInput = {\n  /** Accessible name when no visible label exists (icon-only buttons). */\n  ariaLabel?: string;\n  /** ID(s) of external element(s) that label this control. Space-separated for multiple. */\n  ariaLabelledBy?: string;\n  /** ID(s) of element(s) providing additional description (additive). */\n  ariaDescribedBy?: string;\n  /**\n   * ID of the component's OWN rendered visible label element, if any.\n   * Folded into `aria-labelledby` BEFORE external ids so the visible label and a\n   * caller-provided suffix are combined (via `mergeIds`). Ignored when `ariaLabel`\n   * is provided, since `ariaLabel` intentionally overrides the component's own label.\n   */\n  internalLabelId?: string;\n};\n\n/**\n * Returns ARIA attributes with correct precedence.\n *\n * - `internalLabelId` is combined with external `ariaLabelledBy` (internal id first) unless\n *   `ariaLabel` is set, in which case the component's own label is overridden by `ariaLabel`.\n * - External `ariaLabelledBy` is always honored and wins over `ariaLabel` by ARIA precedence.\n * - `ariaDescribedBy` is always additive.\n */\nexport function getA11yNameAttributes({\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  internalLabelId\n}: AccessibleNameInput): Record<string, string> {\n  const props: Record<string, string> = {};\n\n  const labelledBy = ariaLabel ? ariaLabelledBy : mergeIds(internalLabelId, ariaLabelledBy);\n  if (labelledBy) props['aria-labelledby'] = labelledBy;\n  else if (ariaLabel) props['aria-label'] = ariaLabel;\n\n  if (ariaDescribedBy) props['aria-describedby'] = ariaDescribedBy;\n\n  return props;\n}\n"],"names":["mergeIds","getA11yNameAttributes","ariaLabel","ariaLabelledBy","ariaDescribedBy","internalLabelId","props","labelledBy"],"mappings":"AAwDO,SAAA,YAAAA,SAAA;AAAA,SAASC,EAAsB;AAAA,EACpCC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,iBAAAA;AACmB,GAA2B;AAC9C,QAAMC,IAAgC,CAAA,GAEhCC,IAAaL,IAAYC,IAAiBH,EAASK,GAAiBF,CAAc;AACxF,SAAII,IAAYD,EAAM,iBAAiB,IAAIC,IAClCL,MAAWI,EAAM,YAAY,IAAIJ,IAEtCE,MAAiBE,EAAM,kBAAkB,IAAIF,IAE1CE;AACT;"}

package/dist/index9.js

@@ -1,9 +1,8 @@
 import o from "react";
-import { useStableId as A } from "./index205.js";
+import { useStableId as A } from "./index206.js";
 import { getA11yNameAttributes as O } from "./index81.js";
 import { useAccessiblePress as C } from "./index67.js";
 import "./index72.js";
-import { mergeIds as P } from "./index206.js";
 function l() {
   return l = Object.assign ? Object.assign.bind() : function(t) {
     for (var a = 1; a < arguments.length; a++) {
@@ -13,7 +12,7 @@ function l() {
     return t;
   }, l.apply(null, arguments);
 }
-const T = /* @__PURE__ */ o.forwardRef(({
+const L = /* @__PURE__ */ o.forwardRef(({
   checked: t = !1,
   onToggle: a = () => {
   },
@@ -22,13 +21,13 @@ const T = /* @__PURE__ */ o.forwardRef(({
   labelPosition: c = "left",
   labelClickable: n = !0,
   automationId: s = "toggle",
-  ariaLabelledBy: i,
+  ariaLabelledBy: f,
   ariaDescribedBy: b,
-  ariaLabel: g,
+  ariaLabel: p,
   tabIndex: v = 0,
   ariaControls: h
 }, y) => {
-  const u = A(void 0, "toggle-label"), d = () => {
+  const i = A(void 0, "toggle-label"), g = () => {
     e || a(!t);
   }, {
     pressProps: x,
@@ -36,26 +35,27 @@ const T = /* @__PURE__ */ o.forwardRef(({
     role: w
   } = C({
     disabled: e,
-    onClick: d,
+    onClick: g,
     stopPropagation: n,
     isNative: !1,
     role: "switch",
     tabIndex: v
   }), N = O({
-    ariaLabelledBy: r && !g ? P(u, i) : i,
-    ariaLabel: g,
+    ariaLabelledBy: f,
+    internalLabelId: r ? i : void 0,
+    ariaLabel: p,
     ariaDescribedBy: b
-  }), m = (p, k = !1) => p ? /* @__PURE__ */ o.createElement("label", {
-    id: u,
+  }), d = (m, k = !1) => m ? /* @__PURE__ */ o.createElement("label", {
+    id: i,
     className: `select-none ${I[k ? "disabled" : "enabled"]}`,
     "data-automation-id": `${s}-label`
-  }, p) : null, E = {
+  }, m) : null, E = {
     enabled: "cursor-pointer",
     disabled: "cursor-not-allowed"
   }, I = {
     enabled: `text-[var(--color-gray-700)] ${n ? "cursor-pointer" : ""}`,
     disabled: "text-[var(--color-gray-600)] cursor-not-allowed"
-  }, f = {
+  }, u = {
     checked: ` ${e ? "bg-[var(--color-green-100)]" : "bg-[var(--color-green-400)] hover:bg-[var(--color-green-500)]"}`,
     unchecked: ` ${e ? "bg-[var(--color-gray-400)]" : "bg-[var(--color-gray-600)] hover:bg-[var(--color-gray-650)]"}`,
     enabled: " cursor-pointer",
@@ -63,9 +63,9 @@ const T = /* @__PURE__ */ o.forwardRef(({
   };
   return /* @__PURE__ */ o.createElement("div", {
     className: `se-design-toggle flex items-center gap-1 ${E[e ? "disabled" : "enabled"]}`,
-    onClick: n ? d : void 0,
+    onClick: n ? g : void 0,
     "data-automation-id": `${s}-container`
-  }, r && c === "left" && m(r, e), /* @__PURE__ */ o.createElement("div", l({
+  }, r && c === "left" && d(r, e), /* @__PURE__ */ o.createElement("div", l({
     ref: y,
     role: w,
     tabIndex: $,
@@ -73,8 +73,8 @@ const T = /* @__PURE__ */ o.forwardRef(({
     "aria-controls": h
   }, N, x, {
     className: `toggle-btn focus-outline block w-8 h-4 p-0.5 rounded-full transition ease-in-out
-        ${f[t ? "checked" : "unchecked"]}
-        ${f[e ? "disabled" : "enabled"]}
+        ${u[t ? "checked" : "unchecked"]}
+        ${u[e ? "disabled" : "enabled"]}
       `,
     "data-automation-id": `${s}-button`
   }), /* @__PURE__ */ o.createElement("input", {
@@ -87,10 +87,10 @@ const T = /* @__PURE__ */ o.forwardRef(({
   }), /* @__PURE__ */ o.createElement("span", {
     className: `block w-3 h-3 rounded-full bg-[var(--color-white)]
             transform transition-transform ${t ? "translate-x-4" : ""}`
-  })), r && c === "right" && m(r, e));
+  })), r && c === "right" && d(r, e));
 });
-T.displayName = "Toggle";
+L.displayName = "Toggle";
 export {
-  T as Toggle
+  L as Toggle
 };
 //# sourceMappingURL=index9.js.map

package/dist/index9.js.map

@@ -1 +1 @@
-{"version":3,"file":"index9.js","sources":["../src/components/Toggle/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { mergeIds } from '../../utils/mergeIds';\n\nexport interface ToggleProps {\n  /**\n   * Callback when the toggle is toggled. The parent is responsible for updating the checked state.\n   */\n  onToggle?: (checked: boolean) => void;\n  /**\n   * The controlled state of the toggle.\n   */\n  checked: boolean;\n  /**\n   * Optional disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Optional label\n   */\n  label?: string;\n  /**\n   * Position of the label\n   */\n  labelPosition?: 'left' | 'right';\n  /**\n   * Optional className\n   */\n  labelClickable?: boolean;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n  /**\n   * ID(s) of element(s) that label this toggle (for screen reader association).\n   * Typically used when toggle is part of a larger labelled context.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this toggle (provides additional context).\n   * Often used for help text or instructions.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Explicit accessible name for the toggle.\n   * Used as fallback when ariaLabelledBy is not provided and no internal label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * Custom tab index for the toggle.\n   * Use -1 to remove from tab order, 0 (default) for natural tab order.\n   */\n  tabIndex?: number;\n  /**\n   * ID of the element controlled by this toggle (e.g. an expandable region).\n   */\n  ariaControls?: string;\n}\n\nexport const Toggle = React.forwardRef<HTMLDivElement, ToggleProps>(({\n  checked = false,\n  onToggle = () => {},\n  disabled = false,\n  label,\n  labelPosition = 'left',\n  labelClickable = true,\n  automationId = 'toggle',\n  ariaLabelledBy,\n  ariaDescribedBy,\n  ariaLabel,\n  tabIndex: tabIndexProp = 0,\n  ariaControls\n}, ref) => {\n  const internalLabelId = useStableId(undefined, 'toggle-label');\n\n  const handleToggle = () => {\n    if (disabled) return;\n    onToggle(!checked);\n  };\n\n  // pressProps contains: onPointerDown, onMouseDown, onTouchStart, onClick, onKeyDown, aria-disabled, aria-busy\n  // When labelClickable=true, container has onClick handler, so we need stopPropagation to prevent\n  // container's onClick from firing when button is clicked (avoiding double-toggle).\n  // When labelClickable=false, container has no onClick, so stopPropagation isn't needed but harmless.\n  const { pressProps, tabIndex, role } = useAccessiblePress({\n    disabled,\n    onClick: handleToggle,\n    stopPropagation: labelClickable,\n    isNative: false,\n    role: 'switch',\n    tabIndex: tabIndexProp\n  });\n\n  // a11yNameAttributes contains: aria-labelledby (if provided), aria-label (fallback), aria-describedby (if provided)\n  // When ariaLabel is provided, it takes precedence over label (matches AutoCompleteInput/PhoneInput pattern)\n  const a11yNameAttributes = getA11yNameAttributes({\n    ariaLabelledBy: label && !ariaLabel ? mergeIds(internalLabelId, ariaLabelledBy) : ariaLabelledBy,\n    ariaLabel,\n    ariaDescribedBy\n  });\n\n  const renderLabel = (label: string, disabled: boolean = false) => {\n    if (label) {\n      return (\n        <label\n          id={internalLabelId}\n          className={`select-none ${labelClass[disabled ? 'disabled' : 'enabled']}`}\n          data-automation-id={`${automationId}-label`}\n        >\n          {label}\n        </label>\n      );\n    }\n    return null;\n  };\n\n  const containerClass = {\n    enabled: 'cursor-pointer',\n    disabled: 'cursor-not-allowed'\n  };\n  const labelClass = {\n    enabled: `text-[var(--color-gray-700)] ${labelClickable ? 'cursor-pointer' : ''}`,\n    disabled: 'text-[var(--color-gray-600)] cursor-not-allowed'\n  };\n  const toggleClass = {\n    checked: ` ${\n      disabled ? 'bg-[var(--color-green-100)]' : 'bg-[var(--color-green-400)] hover:bg-[var(--color-green-500)]'\n    }`,\n    unchecked: ` ${\n      disabled ? 'bg-[var(--color-gray-400)]' : 'bg-[var(--color-gray-600)] hover:bg-[var(--color-gray-650)]'\n    }`,\n    enabled: ' cursor-pointer',\n    disabled: ' cursor-not-allowed'\n  };\n\n  return (\n    <div\n      className={`se-design-toggle flex items-center gap-1 ${containerClass[disabled ? 'disabled' : 'enabled']}`}\n      onClick={labelClickable ? handleToggle : undefined}\n      data-automation-id={`${automationId}-container`}\n    >\n      {label && labelPosition === 'left' && renderLabel(label, disabled)}\n      <div\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        aria-checked={checked}\n        aria-controls={ariaControls}\n        {...a11yNameAttributes}\n        {...pressProps}\n        className={`toggle-btn focus-outline block w-8 h-4 p-0.5 rounded-full transition ease-in-out\n        ${toggleClass[checked ? 'checked' : 'unchecked']}\n        ${toggleClass[disabled ? 'disabled' : 'enabled']}\n      `}\n        data-automation-id={`${automationId}-button`}\n      >\n        <input className=\"opacity-0 hidden\" type=\"checkbox\" checked={checked} readOnly disabled={disabled} tabIndex={-1} />\n        <span\n          className={`block w-3 h-3 rounded-full bg-[var(--color-white)]\n            transform transition-transform ${checked ? 'translate-x-4' : ''}`}\n        ></span>\n      </div>\n      {label && labelPosition === 'right' && renderLabel(label, disabled)}\n    </div>\n  );\n});\n\nToggle.displayName = 'Toggle';\n"],"names":["Toggle","React","forwardRef","checked","onToggle","disabled","label","labelPosition","labelClickable","automationId","ariaLabelledBy","ariaDescribedBy","ariaLabel","tabIndex","tabIndexProp","ariaControls","ref","internalLabelId","useStableId","undefined","handleToggle","pressProps","role","useAccessiblePress","onClick","stopPropagation","isNative","a11yNameAttributes","getA11yNameAttributes","mergeIds","renderLabel","createElement","id","className","labelClass","containerClass","enabled","toggleClass","unchecked","_extends","type","readOnly","displayName"],"mappings":"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"}
+{"version":3,"file":"index9.js","sources":["../src/components/Toggle/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\n\nexport interface ToggleProps {\n  /**\n   * Callback when the toggle is toggled. The parent is responsible for updating the checked state.\n   */\n  onToggle?: (checked: boolean) => void;\n  /**\n   * The controlled state of the toggle.\n   */\n  checked: boolean;\n  /**\n   * Optional disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Optional label\n   */\n  label?: string;\n  /**\n   * Position of the label\n   */\n  labelPosition?: 'left' | 'right';\n  /**\n   * Optional className\n   */\n  labelClickable?: boolean;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n  /**\n   * ID(s) of element(s) that label this toggle (for screen reader association).\n   * Typically used when toggle is part of a larger labelled context.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this toggle (provides additional context).\n   * Often used for help text or instructions.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Explicit accessible name for the toggle.\n   * Used as fallback when ariaLabelledBy is not provided and no internal label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * Custom tab index for the toggle.\n   * Use -1 to remove from tab order, 0 (default) for natural tab order.\n   */\n  tabIndex?: number;\n  /**\n   * ID of the element controlled by this toggle (e.g. an expandable region).\n   */\n  ariaControls?: string;\n}\n\nexport const Toggle = React.forwardRef<HTMLDivElement, ToggleProps>(({\n  checked = false,\n  onToggle = () => {},\n  disabled = false,\n  label,\n  labelPosition = 'left',\n  labelClickable = true,\n  automationId = 'toggle',\n  ariaLabelledBy,\n  ariaDescribedBy,\n  ariaLabel,\n  tabIndex: tabIndexProp = 0,\n  ariaControls\n}, ref) => {\n  const internalLabelId = useStableId(undefined, 'toggle-label');\n\n  const handleToggle = () => {\n    if (disabled) return;\n    onToggle(!checked);\n  };\n\n  // pressProps contains: onPointerDown, onMouseDown, onTouchStart, onClick, onKeyDown, aria-disabled, aria-busy\n  // When labelClickable=true, container has onClick handler, so we need stopPropagation to prevent\n  // container's onClick from firing when button is clicked (avoiding double-toggle).\n  // When labelClickable=false, container has no onClick, so stopPropagation isn't needed but harmless.\n  const { pressProps, tabIndex, role } = useAccessiblePress({\n    disabled,\n    onClick: handleToggle,\n    stopPropagation: labelClickable,\n    isNative: false,\n    role: 'switch',\n    tabIndex: tabIndexProp\n  });\n\n  // a11yNameAttributes contains: aria-labelledby (if provided), aria-label (fallback), aria-describedby (if provided)\n  // When ariaLabel is provided, it takes precedence over the visible label (handled inside getA11yNameAttributes)\n  const a11yNameAttributes = getA11yNameAttributes({\n    ariaLabelledBy,\n    internalLabelId: label ? internalLabelId : undefined,\n    ariaLabel,\n    ariaDescribedBy\n  });\n\n  const renderLabel = (label: string, disabled: boolean = false) => {\n    if (label) {\n      return (\n        <label\n          id={internalLabelId}\n          className={`select-none ${labelClass[disabled ? 'disabled' : 'enabled']}`}\n          data-automation-id={`${automationId}-label`}\n        >\n          {label}\n        </label>\n      );\n    }\n    return null;\n  };\n\n  const containerClass = {\n    enabled: 'cursor-pointer',\n    disabled: 'cursor-not-allowed'\n  };\n  const labelClass = {\n    enabled: `text-[var(--color-gray-700)] ${labelClickable ? 'cursor-pointer' : ''}`,\n    disabled: 'text-[var(--color-gray-600)] cursor-not-allowed'\n  };\n  const toggleClass = {\n    checked: ` ${\n      disabled ? 'bg-[var(--color-green-100)]' : 'bg-[var(--color-green-400)] hover:bg-[var(--color-green-500)]'\n    }`,\n    unchecked: ` ${\n      disabled ? 'bg-[var(--color-gray-400)]' : 'bg-[var(--color-gray-600)] hover:bg-[var(--color-gray-650)]'\n    }`,\n    enabled: ' cursor-pointer',\n    disabled: ' cursor-not-allowed'\n  };\n\n  return (\n    <div\n      className={`se-design-toggle flex items-center gap-1 ${containerClass[disabled ? 'disabled' : 'enabled']}`}\n      onClick={labelClickable ? handleToggle : undefined}\n      data-automation-id={`${automationId}-container`}\n    >\n      {label && labelPosition === 'left' && renderLabel(label, disabled)}\n      <div\n        ref={ref}\n        role={role}\n        tabIndex={tabIndex}\n        aria-checked={checked}\n        aria-controls={ariaControls}\n        {...a11yNameAttributes}\n        {...pressProps}\n        className={`toggle-btn focus-outline block w-8 h-4 p-0.5 rounded-full transition ease-in-out\n        ${toggleClass[checked ? 'checked' : 'unchecked']}\n        ${toggleClass[disabled ? 'disabled' : 'enabled']}\n      `}\n        data-automation-id={`${automationId}-button`}\n      >\n        <input className=\"opacity-0 hidden\" type=\"checkbox\" checked={checked} readOnly disabled={disabled} tabIndex={-1} />\n        <span\n          className={`block w-3 h-3 rounded-full bg-[var(--color-white)]\n            transform transition-transform ${checked ? 'translate-x-4' : ''}`}\n        ></span>\n      </div>\n      {label && labelPosition === 'right' && renderLabel(label, disabled)}\n    </div>\n  );\n});\n\nToggle.displayName = 'Toggle';\n"],"names":["Toggle","React","forwardRef","checked","onToggle","disabled","label","labelPosition","labelClickable","automationId","ariaLabelledBy","ariaDescribedBy","ariaLabel","tabIndex","tabIndexProp","ariaControls","ref","internalLabelId","useStableId","undefined","handleToggle","pressProps","role","useAccessiblePress","onClick","stopPropagation","isNative","a11yNameAttributes","getA11yNameAttributes","renderLabel","createElement","id","className","labelClass","containerClass","enabled","toggleClass","unchecked","_extends","type","readOnly","displayName"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "se-design",
-  "version": "1.0.86",
+  "version": "1.0.87-dev.2",
   "type": "module",
   "module": "dist/index.js",
   "exports": {

package/dist/index244.js

@@ -1,173 +0,0 @@
-import { useState as W, useMemo as F, useEffect as N, useCallback as S } from "react";
-import { useRovingFocus as C } from "./index70.js";
-const z = (e, n, s, g, m, D = !1) => {
-  const i = e.toLocaleDateString("en-US", {
-    weekday: "long",
-    month: "long",
-    day: "numeric",
-    year: "numeric"
-  });
-  return m ? i : g ? `${i}, start and end of range` : n ? `${i}, start of range` : s ? `${i}, end of range` : D ? `${i}, in range` : i;
-}, y = (e) => {
-  const n = e.getFullYear(), s = String(e.getMonth() + 1).padStart(2, "0"), g = String(e.getDate()).padStart(2, "0");
-  return `date-${n}-${s}-${g}`;
-}, k = (e, n) => new Date(e, n + 1, 0).getDate(), L = (e) => {
-  const n = e.getFullYear(), s = e.getMonth();
-  return Array.from({
-    length: k(n, s)
-  }, (g, m) => y(new Date(n, s, m + 1)));
-}, x = (e, n, s) => {
-  const g = e.getFullYear(), m = e.getMonth(), D = (a) => a.getFullYear() === g && a.getMonth() === m;
-  if (s.startDate && D(s.startDate)) {
-    const a = new Date(s.startDate);
-    a.setHours(0, 0, 0, 0);
-    const l = y(a);
-    if (n.includes(l)) return l;
-  }
-  if (s.endDate && D(s.endDate)) {
-    const a = new Date(s.endDate);
-    a.setHours(0, 0, 0, 0);
-    const l = y(a);
-    if (n.includes(l)) return l;
-  }
-  const i = /* @__PURE__ */ new Date();
-  if (D(i)) {
-    const a = y(i);
-    if (n.includes(a)) return a;
-  }
-  return n[0] || "";
-};
-function B({
-  leftMonth: e,
-  rightMonth: n,
-  showSingleMonth: s,
-  selectedRange: g,
-  onMonthChange: m
-}) {
-  const [D, i] = W(null), a = F(() => L(e), [e]), l = F(() => L(n), [n]), E = F(() => x(e, a, g), [e, a, g]), H = F(() => x(n, l, g), [n, l, g]), {
-    getRovingItemProps: Y,
-    focusItem: I,
-    getContainerProps: U
-  } = C({
-    itemIds: a,
-    defaultFocusedId: E,
-    orientation: "grid",
-    cols: 7,
-    loop: !1,
-    role: "grid"
-  }), {
-    getRovingItemProps: M,
-    focusItem: h,
-    getContainerProps: G
-  } = C({
-    itemIds: l,
-    defaultFocusedId: H,
-    orientation: "grid",
-    cols: 7,
-    loop: !1,
-    role: "grid"
-  });
-  N(() => {
-    if (!D) return;
-    const f = y(D);
-    a.includes(f) ? (I(f), i(null)) : l.includes(f) && (h(f), i(null));
-  }, [D, a, l, I, h]);
-  const b = S((f, K) => {
-    const v = s || K === "left";
-    m(new Date(f.getFullYear(), f.getMonth(), 1), v), i(new Date(f));
-  }, [s, m]);
-  return {
-    getGridCellProps: S(({
-      isLeftCalendar: f,
-      isDateDisabled: K,
-      handleDateClick: v
-    }) => {
-      const A = f ? "left" : "right", $ = f ? I : h, O = f ? Y : M, R = (t, p) => {
-        const c = p.getFullYear(), o = p.getMonth(), d = p.getDate(), w = (r) => {
-          if (r.getFullYear() !== c || r.getMonth() !== o) {
-            b(r, A);
-            return;
-          }
-          $(y(r));
-        };
-        switch (t.key) {
-          case "ArrowLeft":
-            t.preventDefault(), t.stopPropagation(), w(new Date(c, o, d - 1));
-            break;
-          case "ArrowRight":
-            t.preventDefault(), t.stopPropagation(), w(new Date(c, o, d + 1));
-            break;
-          case "ArrowUp":
-            t.preventDefault(), t.stopPropagation(), w(new Date(c, o, d - 7));
-            break;
-          case "ArrowDown":
-            t.preventDefault(), t.stopPropagation(), w(new Date(c, o, d + 7));
-            break;
-          case "Home": {
-            t.preventDefault(), t.stopPropagation();
-            const r = p.getDay(), u = new Date(c, o, d - r), P = u.getMonth() !== o ? new Date(c, o, 1) : u;
-            $(y(P));
-            break;
-          }
-          case "End": {
-            t.preventDefault(), t.stopPropagation();
-            const r = p.getDay(), u = new Date(c, o, d + (6 - r)), P = k(c, o), T = u.getMonth() !== o ? new Date(c, o, P) : u;
-            $(y(T));
-            break;
-          }
-          case "PageUp": {
-            t.preventDefault(), t.stopPropagation();
-            const r = t.shiftKey ? c - 1 : c, u = t.shiftKey ? o : o - 1, P = Math.min(d, k(r, u));
-            b(new Date(r, u, P), A);
-            break;
-          }
-          case "PageDown": {
-            t.preventDefault(), t.stopPropagation();
-            const r = t.shiftKey ? c + 1 : c, u = t.shiftKey ? o : o + 1, P = Math.min(d, k(r, u));
-            b(new Date(r, u, P), A);
-            break;
-          }
-          case "Enter":
-          case " ":
-            t.preventDefault(), K(p) || v(p);
-            break;
-        }
-      };
-      return ({
-        cellId: t,
-        cellDate: p,
-        disabled: c,
-        ariaLabel: o,
-        ariaCurrent: d,
-        ariaDisabled: w
-      }) => {
-        const r = O(t);
-        return {
-          id: t,
-          ref: r.ref,
-          tabIndex: r.tabIndex,
-          onFocus: r.onFocus,
-          "aria-label": o,
-          "aria-current": d,
-          "aria-disabled": w,
-          onKeyDown: (u) => R(u, p),
-          onClick: () => {
-            c || v(p);
-          }
-        };
-      };
-    }, [b, I, h, Y, M]),
-    getLeftRovingItemProps: Y,
-    getRightRovingItemProps: M,
-    getLeftContainerProps: U,
-    getRightContainerProps: G,
-    focusLeftItem: I,
-    focusRightItem: h
-  };
-}
-export {
-  y as formatDateId,
-  z as getCellAriaLabel,
-  B as useDatePickerA11y
-};
-//# sourceMappingURL=index244.js.map

package/dist/index244.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index244.js","sources":["../src/components/DatePicker/useDatePickerA11y.ts"],"sourcesContent":["import React, { useState, useCallback, useEffect, useMemo } from 'react';\n\nimport { useRovingFocus, RovingItemProps, RovingContainerProps, AccessibleNameInput } from '../../utils/a11y/useRovingFocus';\nimport type { DateRange } from './index';\n\nexport const getCellAriaLabel = (\n  date: Date,\n  isStart: boolean,\n  isEnd: boolean,\n  isSameStartEnd: boolean,\n  singleDateSelection: boolean,\n  inRange: boolean = false\n): string => {\n  const base = date.toLocaleDateString('en-US', {\n    weekday: 'long',\n    month: 'long',\n    day: 'numeric',\n    year: 'numeric'\n  });\n  if (singleDateSelection) return base;\n  if (isSameStartEnd) return `${base}, start and end of range`;\n  if (isStart) return `${base}, start of range`;\n  if (isEnd) return `${base}, end of range`;\n  if (inRange) return `${base}, in range`;\n  return base;\n};\n\nexport const formatDateId = (d: Date) => {\n  const y = d.getFullYear();\n  const m = String(d.getMonth() + 1).padStart(2, '0');\n  const dd = String(d.getDate()).padStart(2, '0');\n  return `date-${y}-${m}-${dd}`;\n};\n\nconst getDaysInMonth = (year: number, month: number) => new Date(year, month + 1, 0).getDate();\n\nconst getPanelItemIds = (panelDate: Date): string[] => {\n  const year = panelDate.getFullYear();\n  const month = panelDate.getMonth();\n  return Array.from({ length: getDaysInMonth(year, month) }, (_, i) =>\n    formatDateId(new Date(year, month, i + 1))\n  );\n};\n\nconst getPanelDefaultFocusId = (panelDate: Date, itemIds: string[], selectedRange: DateRange): string => {\n  const year = panelDate.getFullYear();\n  const month = panelDate.getMonth();\n  const isInPanel = (d: Date) => d.getFullYear() === year && d.getMonth() === month;\n\n  // Prefer startDate if it falls in this panel\n  if (selectedRange.startDate && isInPanel(selectedRange.startDate)) {\n    const d = new Date(selectedRange.startDate);\n    d.setHours(0, 0, 0, 0);\n    const id = formatDateId(d);\n    if (itemIds.includes(id)) return id;\n  }\n  // Fall back to endDate if it falls in this panel (e.g. right panel when start is in left panel)\n  if (selectedRange.endDate && isInPanel(selectedRange.endDate)) {\n    const d = new Date(selectedRange.endDate);\n    d.setHours(0, 0, 0, 0);\n    const id = formatDateId(d);\n    if (itemIds.includes(id)) return id;\n  }\n  const today = new Date();\n  if (isInPanel(today)) {\n    const id = formatDateId(today);\n    if (itemIds.includes(id)) return id;\n  }\n  return itemIds[0] || '';\n};\n\ninterface UseDatePickerA11yOptions {\n  leftMonth: Date;\n  rightMonth: Date;\n  showSingleMonth: boolean;\n  selectedRange: DateRange;\n  onMonthChange: (date: Date, isLeft: boolean) => void;\n}\n\ninterface CellKeyDownOptions {\n  isLeftCalendar: boolean;\n  isDateDisabled: (date: Date) => boolean;\n  handleDateClick: (date: Date) => void;\n}\n\ninterface GridCellItemInput {\n  cellId: string;\n  cellDate: Date;\n  disabled: boolean;\n  ariaLabel: string;\n  ariaCurrent: 'date' | undefined;\n  ariaDisabled: true | undefined;\n}\n\nexport interface GridCellElementProps {\n  id: string;\n  ref: (el: HTMLElement | null) => void;\n  tabIndex: number;\n  onFocus: () => void;\n  'aria-label': string;\n  'aria-current': 'date' | undefined;\n  'aria-disabled': true | undefined;\n  onKeyDown: (e: React.KeyboardEvent) => void;\n  onClick: () => void;\n}\n\ninterface UseDatePickerA11yReturn {\n  getGridCellProps: (options: CellKeyDownOptions) => (item: GridCellItemInput) => GridCellElementProps;\n  getLeftRovingItemProps: (id: string) => RovingItemProps;\n  getRightRovingItemProps: (id: string) => RovingItemProps;\n  getLeftContainerProps: (nameInput?: AccessibleNameInput) => RovingContainerProps;\n  getRightContainerProps: (nameInput?: AccessibleNameInput) => RovingContainerProps;\n  focusLeftItem: (id: string) => void;\n  focusRightItem: (id: string) => void;\n}\n\nexport function useDatePickerA11y({\n  leftMonth,\n  rightMonth,\n  showSingleMonth,\n  selectedRange,\n  onMonthChange\n}: UseDatePickerA11yOptions): UseDatePickerA11yReturn {\n  const [keyboardFocusDate, setKeyboardFocusDate] = useState<Date | null>(null);\n\n  const leftItemIds = useMemo(() => getPanelItemIds(leftMonth), [leftMonth]);\n  const rightItemIds = useMemo(() => getPanelItemIds(rightMonth), [rightMonth]);\n\n  const leftDefaultFocusId = useMemo(\n    () => getPanelDefaultFocusId(leftMonth, leftItemIds, selectedRange),\n    [leftMonth, leftItemIds, selectedRange]\n  );\n  const rightDefaultFocusId = useMemo(\n    () => getPanelDefaultFocusId(rightMonth, rightItemIds, selectedRange),\n    [rightMonth, rightItemIds, selectedRange]\n  );\n\n  const { getRovingItemProps: getLeftRovingItemProps, focusItem: focusLeftItem, getContainerProps: getLeftContainerProps } = useRovingFocus({\n    itemIds: leftItemIds,\n    defaultFocusedId: leftDefaultFocusId,\n    orientation: 'grid',\n    cols: 7,\n    loop: false,\n    role: 'grid'\n  });\n\n  const { getRovingItemProps: getRightRovingItemProps, focusItem: focusRightItem, getContainerProps: getRightContainerProps } = useRovingFocus({\n    itemIds: rightItemIds,\n    defaultFocusedId: rightDefaultFocusId,\n    orientation: 'grid',\n    cols: 7,\n    loop: false,\n    role: 'grid'\n  });\n\n  // After keyboard navigation shifts a panel to a new month, focus the target cell via roving focus refs\n  useEffect(() => {\n    if (!keyboardFocusDate) return;\n    const id = formatDateId(keyboardFocusDate);\n    if (leftItemIds.includes(id)) {\n      focusLeftItem(id);\n      setKeyboardFocusDate(null);\n    } else if (rightItemIds.includes(id)) {\n      focusRightItem(id);\n      setKeyboardFocusDate(null);\n    }\n  }, [keyboardFocusDate, leftItemIds, rightItemIds, focusLeftItem, focusRightItem]);\n\n  // Navigate the keyboard focus to a date that may be in a different month.\n  // Each panel advances completely independently — never touches the other panel.\n  const handleKeyboardNavigate = useCallback(\n    (targetDate: Date, sourcePanel: 'left' | 'right') => {\n      const isLeft = showSingleMonth || sourcePanel === 'left';\n      onMonthChange(new Date(targetDate.getFullYear(), targetDate.getMonth(), 1), isLeft);\n      setKeyboardFocusDate(new Date(targetDate));\n    },\n    [showSingleMonth, onMonthChange]\n  );\n\n  const getGridCellProps = useCallback(\n    ({ isLeftCalendar, isDateDisabled, handleDateClick }: CellKeyDownOptions) => {\n      const panel: 'left' | 'right' = isLeftCalendar ? 'left' : 'right';\n      const focusPanelItem = isLeftCalendar ? focusLeftItem : focusRightItem;\n      const getRovingItemProps = isLeftCalendar ? getLeftRovingItemProps : getRightRovingItemProps;\n\n      const handleKeyDown = (e: React.KeyboardEvent, cellDate: Date) => {\n        const cellYear = cellDate.getFullYear();\n        const cellMonth = cellDate.getMonth();\n        const cellDay = cellDate.getDate();\n\n        const navigateTo = (targetDate: Date) => {\n          if (targetDate.getFullYear() !== cellYear || targetDate.getMonth() !== cellMonth) {\n            handleKeyboardNavigate(targetDate, panel);\n            return;\n          }\n          focusPanelItem(formatDateId(targetDate));\n        };\n\n        switch (e.key) {\n          case 'ArrowLeft':\n            e.preventDefault(); e.stopPropagation();\n            navigateTo(new Date(cellYear, cellMonth, cellDay - 1));\n            break;\n          case 'ArrowRight':\n            e.preventDefault(); e.stopPropagation();\n            navigateTo(new Date(cellYear, cellMonth, cellDay + 1));\n            break;\n          case 'ArrowUp':\n            e.preventDefault(); e.stopPropagation();\n            navigateTo(new Date(cellYear, cellMonth, cellDay - 7));\n            break;\n          case 'ArrowDown':\n            e.preventDefault(); e.stopPropagation();\n            navigateTo(new Date(cellYear, cellMonth, cellDay + 7));\n            break;\n          case 'Home': {\n            // First day of the current week row (Sunday), clamped to month start\n            e.preventDefault(); e.stopPropagation();\n            const dayOfWeek = cellDate.getDay();\n            const homeDate = new Date(cellYear, cellMonth, cellDay - dayOfWeek);\n            const clamped = homeDate.getMonth() !== cellMonth ? new Date(cellYear, cellMonth, 1) : homeDate;\n            focusPanelItem(formatDateId(clamped));\n            break;\n          }\n          case 'End': {\n            // Last day of the current week row (Saturday), clamped to month end\n            e.preventDefault(); e.stopPropagation();\n            const dayOfWeek = cellDate.getDay();\n            const endDate = new Date(cellYear, cellMonth, cellDay + (6 - dayOfWeek));\n            const daysInThisMonth = getDaysInMonth(cellYear, cellMonth);\n            const clamped =\n              endDate.getMonth() !== cellMonth ? new Date(cellYear, cellMonth, daysInThisMonth) : endDate;\n            focusPanelItem(formatDateId(clamped));\n            break;\n          }\n          case 'PageUp': {\n            // Shift+PageUp = previous year, PageUp = previous month\n            e.preventDefault(); e.stopPropagation();\n            const tYear = e.shiftKey ? cellYear - 1 : cellYear;\n            const tMonth = e.shiftKey ? cellMonth : cellMonth - 1;\n            const tDay = Math.min(cellDay, getDaysInMonth(tYear, tMonth));\n            handleKeyboardNavigate(new Date(tYear, tMonth, tDay), panel);\n            break;\n          }\n          case 'PageDown': {\n            // Shift+PageDown = next year, PageDown = next month\n            e.preventDefault(); e.stopPropagation();\n            const tYear = e.shiftKey ? cellYear + 1 : cellYear;\n            const tMonth = e.shiftKey ? cellMonth : cellMonth + 1;\n            const tDay = Math.min(cellDay, getDaysInMonth(tYear, tMonth));\n            handleKeyboardNavigate(new Date(tYear, tMonth, tDay), panel);\n            break;\n          }\n          case 'Enter':\n          case ' ':\n            e.preventDefault();\n            if (!isDateDisabled(cellDate)) {\n              handleDateClick(cellDate);\n            }\n            break;\n        }\n      };\n\n      return ({ cellId, cellDate, disabled, ariaLabel, ariaCurrent, ariaDisabled }: GridCellItemInput): GridCellElementProps => {\n        const rovingProps = getRovingItemProps(cellId);\n        return {\n          id: cellId,\n          ref: rovingProps.ref,\n          tabIndex: rovingProps.tabIndex,\n          onFocus: rovingProps.onFocus,\n          'aria-label': ariaLabel,\n          'aria-current': ariaCurrent,\n          'aria-disabled': ariaDisabled,\n          onKeyDown: (e: React.KeyboardEvent) => handleKeyDown(e, cellDate),\n          onClick: () => { if (!disabled) handleDateClick(cellDate); }\n        };\n      };\n    },\n    [handleKeyboardNavigate, focusLeftItem, focusRightItem, getLeftRovingItemProps, getRightRovingItemProps]\n  );\n\n  return {\n    getGridCellProps,\n    getLeftRovingItemProps,\n    getRightRovingItemProps,\n    getLeftContainerProps,\n    getRightContainerProps,\n    focusLeftItem,\n    focusRightItem\n  };\n}\n"],"names":["useState","useMemo","useEffect","useCallback","useRovingFocus","getCellAriaLabel","date","isStart","isEnd","isSameStartEnd","singleDateSelection","inRange","base","toLocaleDateString","weekday","month","day","year","formatDateId","d","y","getFullYear","m","String","getMonth","padStart","dd","getDate","getDaysInMonth","Date","getPanelItemIds","panelDate","Array","from","length","_","i","getPanelDefaultFocusId","itemIds","selectedRange","isInPanel","startDate","setHours","id","includes","endDate","today","useDatePickerA11y","leftMonth","rightMonth","showSingleMonth","onMonthChange","keyboardFocusDate","setKeyboardFocusDate","leftItemIds","rightItemIds","leftDefaultFocusId","rightDefaultFocusId","getRovingItemProps","getLeftRovingItemProps","focusItem","focusLeftItem","getContainerProps","getLeftContainerProps","defaultFocusedId","orientation","cols","loop","role","getRightRovingItemProps","focusRightItem","getRightContainerProps","handleKeyboardNavigate","targetDate","sourcePanel","isLeft","getGridCellProps","isLeftCalendar","isDateDisabled","handleDateClick","panel","focusPanelItem","handleKeyDown","e","cellDate","cellYear","cellMonth","cellDay","navigateTo","key","preventDefault","stopPropagation","dayOfWeek","getDay","homeDate","clamped","daysInThisMonth","tYear","shiftKey","tMonth","tDay","Math","min","cellId","disabled","ariaLabel","ariaCurrent","ariaDisabled","rovingProps","ref","tabIndex","onFocus","onKeyDown","onClick"],"mappings":"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"}

package/dist/index247.js

@@ -1,22 +0,0 @@
-import { useEffect as s } from "react";
-const u = {
-  block: "nearest"
-};
-function m({
-  containerRef: t,
-  activeIndex: o,
-  itemSelector: r = '[role="option"]',
-  enabled: c = !0,
-  scrollOptions: e = u
-}) {
-  s(() => {
-    if (!c || o < 0 || !t?.current)
-      return;
-    const n = t.current.querySelectorAll(r)[o];
-    n && n.scrollIntoView(e);
-  }, [o, t, r, c, e]);
-}
-export {
-  m as useScrollActiveIntoView
-};
-//# sourceMappingURL=index247.js.map

package/dist/index247.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index247.js","sources":["../src/utils/a11y/useScrollActiveIntoView.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nconst DEFAULT_SCROLL_OPTIONS: ScrollIntoViewOptions = { block: 'nearest' };\n\nexport interface UseScrollActiveIntoViewOptions {\n  /**\n   * Ref to the container element\n   */\n  containerRef?: RefObject<HTMLElement | null>;\n  \n  /**\n   * Index of the currently active/highlighted item (-1 if none)\n   */\n  activeIndex: number;\n  \n  /**\n   * CSS selector for item elements\n   * Default: '[role=\"option\"]'\n   */\n  itemSelector?: string;\n  \n  /**\n   * Whether scrolling is enabled\n   * Default: true\n   */\n  enabled?: boolean;\n  \n  /**\n   * ScrollIntoView options\n   * Default: { block: 'nearest' }\n   */\n  scrollOptions?: ScrollIntoViewOptions;\n}\n\n/**\n * Hook to automatically scroll the active item into view.\n * \n * Useful for aria-activedescendant patterns where DOM focus stays\n * on the container (e.g., input field) but we need to visually show\n * which descendant option is logically active.\n * \n * Common use cases:\n * - Combobox dropdown options\n * - Menu items with virtual focus\n * - Grid cells with keyboard navigation\n * - Tree view items\n * - Listbox options\n * \n * @example\n * ```tsx\n * const [highlightedIndex, setHighlightedIndex] = useState(-1);\n * const listboxRef = useRef<HTMLDivElement>(null);\n * \n * useScrollActiveIntoView({\n *   containerRef: listboxRef,\n *   activeIndex: highlightedIndex,\n *   itemSelector: '[role=\"option\"]'\n * });\n * \n * // Now when highlightedIndex changes, the item scrolls into view\n * ```\n * \n * @example Custom scroll behavior\n * ```tsx\n * useScrollActiveIntoView({\n *   containerRef: menuRef,\n *   activeIndex: activeMenuIndex,\n *   itemSelector: '[role=\"menuitem\"]',\n *   scrollOptions: { block: 'center', behavior: 'smooth' }\n * });\n * ```\n */\nexport function useScrollActiveIntoView({\n  containerRef,\n  activeIndex,\n  itemSelector = '[role=\"option\"]',\n  enabled = true,\n  scrollOptions = DEFAULT_SCROLL_OPTIONS\n}: UseScrollActiveIntoViewOptions): void {\n  useEffect(() => {\n    // Early returns for disabled states\n    if (!enabled || activeIndex < 0 || !containerRef?.current) {\n      return;\n    }\n    \n    const container = containerRef.current;\n    const items = container.querySelectorAll(itemSelector);\n    const activeItem = items[activeIndex] as HTMLElement;\n    \n    if (activeItem) {\n      activeItem.scrollIntoView(scrollOptions);\n    }\n  }, [activeIndex, containerRef, itemSelector, enabled, scrollOptions]);\n}\n"],"names":["useEffect","DEFAULT_SCROLL_OPTIONS","block","useScrollActiveIntoView","containerRef","activeIndex","itemSelector","enabled","scrollOptions","current","activeItem","querySelectorAll","scrollIntoView"],"mappings":"AAGA,SAAA,aAAAA,SAAA;AAAA,MAAMC,IAAgD;AAAA,EAAEC,OAAO;AAAU;AAsElE,SAASC,EAAwB;AAAA,EACtCC,cAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,SAAAA,IAAU;AAAA,EACVC,eAAAA,IAAgBP;AACc,GAAS;AACvCD,EAAAA,EAAU,MAAM;AAEd,QAAI,CAACO,KAAWF,IAAc,KAAK,CAACD,GAAcK;AAChD;AAKF,UAAMC,IAFYN,EAAaK,QACPE,iBAAiBL,CAAY,EAC5BD,CAAW;AAEpC,IAAIK,KACFA,EAAWE,eAAeJ,CAAa;AAAA,EAE3C,GAAG,CAACH,GAAaD,GAAcE,GAAcC,GAASC,CAAa,CAAC;AACtE;"}