@techzyapp/ui-library 1.0.41 → 1.0.42

package/dist/Modal--5EbLfMz.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal--5EbLfMz.cjs","sources":["../src/components/Overlay/Overlay.tsx","../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport { useLockBodyScroll } from '../../hooks/useLockBodyScroll'\nimport styles from './Overlay.module.css'\n\nexport interface OverlayProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether the overlay is mounted + shown — gates the portal and drives the fade-in. */\n  open: boolean\n  /** Requested dismiss — fired on a backdrop click (`closeOnBackdrop`) or Escape (`closeOnEscape`). */\n  onClose?: () => void\n  /** Close when the scrim itself (outside the content) is clicked. Defaults to `true`. */\n  closeOnBackdrop?: boolean\n  /** Close when Escape is pressed while focus is within the overlay. Defaults to `true`. */\n  closeOnEscape?: boolean\n  /** Lock page scroll while open. Defaults to `true`. */\n  lockScroll?: boolean\n  /** Scrim darkness — the black backdrop's alpha (0–1). Defaults to `0.45`. */\n  dim?: number\n  /** Overlay content — typically a centered dialog / box / media. */\n  children?: ReactNode\n}\n\n/**\n * The shared backdrop primitive behind every dimmed, page-blocking surface (`Modal`, the FileUploader\n * lightbox). Portals a fixed full-viewport scrim to `<body>`, locks page scroll, fades in (opacity keyed\n * off a rAF `visible` flag → `data-open`), and dismisses on **backdrop-click** (gated on the pointer-down\n * AND click both landing on the scrim, so a text-selection drag ending on it doesn't close) / **Escape**\n * (swallowed via `stopPropagation` so it can't reach a React-tree ancestor overlay). Centers its children\n * by default; consumers layer their own padding / scroll / placement via `className` + `data-*` and read\n * the shared `data-open` on the scrim for their own box's enter transform. A consumer `onKeyDown` still\n * fires (after the Escape handling) so it can add e.g. a Tab focus-trap. Internal — no `index.ts`, so it's\n * never exposed as a package subpath; import it via `../Overlay/Overlay`. The ref points at the scrim div.\n */\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(function Overlay(\n  {\n    open,\n    onClose,\n    closeOnBackdrop = true,\n    closeOnEscape = true,\n    lockScroll = true,\n    dim,\n    className,\n    style,\n    children,\n    onKeyDown,\n    onMouseDown,\n    onClick,\n    ...props\n  },\n  ref,\n) {\n  const mouseDownTarget = useRef<EventTarget | null>(null)\n  const [visible, setVisible] = useState(false)\n\n  useLockBodyScroll(open && lockScroll)\n\n  // enter animation: flip `visible` on the frame after mount so the opacity transition runs\n  useEffect(() => {\n    if (!open) {\n      setVisible(false)\n      return\n    }\n    const raf = requestAnimationFrame(() => setVisible(true))\n    return () => cancelAnimationFrame(raf)\n  }, [open])\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape') {\n      // the overlay owns the page — swallow Escape so it can't reach a React-tree ancestor overlay (e.g.\n      // an outer Modal) even when this one isn't Escape-dismissible\n      event.stopPropagation()\n      if (closeOnEscape) onClose?.()\n    }\n    onKeyDown?.(event)\n  }\n  // remember where the pointer went down so the click handler can tell a scrim click from a drag that\n  // started inside the content and ended on the scrim (a text-selection drag)\n  const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n    mouseDownTarget.current = event.target\n    onMouseDown?.(event)\n  }\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (\n      closeOnBackdrop &&\n      event.target === event.currentTarget &&\n      mouseDownTarget.current === event.currentTarget\n    ) {\n      onClose?.()\n    }\n    onClick?.(event)\n  }\n\n  if (!open || typeof document === 'undefined') return null\n\n  return createPortal(\n    <div\n      ref={ref}\n      className={clsx(styles.overlay, className)}\n      data-open={visible ? 'true' : 'false'}\n      style={dim != null ? ({ '--tz-overlay-dim': dim, ...style } as CSSProperties) : style}\n      onKeyDown={handleKeyDown}\n      onMouseDown={handleMouseDown}\n      onClick={handleClick}\n      {...props}\n    >\n      {children}\n    </div>,\n    document.body,\n  )\n})\n","import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Overlay } from '../Overlay/Overlay'\nimport styles from './Modal.module.css'\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'fullScreen'\nexport type ModalScrollBehavior = 'inside' | 'outside'\nexport type ModalPlacement = 'center' | 'left' | 'right'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\n/** Focusable descendants used by the focus trap + initial focus. */\n// every clause excludes tabindex=\"-1\" so decorative/programmatic-only nodes (e.g. the header's\n// `nonClickable aria-hidden` IconButton) don't count as trap boundaries or initial-focus targets\nconst FOCUSABLE =\n  'a[href]:not([tabindex=\"-1\"]), button:not(:disabled):not([tabindex=\"-1\"]), textarea:not(:disabled):not([tabindex=\"-1\"]), input:not(:disabled):not([tabindex=\"-1\"]), select:not(:disabled):not([tabindex=\"-1\"]), [tabindex]:not([tabindex=\"-1\"])'\n\n/** Body FIELDS — where a form modal's initial focus lands (buttons / links in content don't count). */\nconst FIELD =\n  'input:not([type=\"hidden\"]):not(:disabled):not([tabindex=\"-1\"]), textarea:not(:disabled):not([tabindex=\"-1\"]), select:not(:disabled):not([tabindex=\"-1\"]), [contenteditable]:not([contenteditable=\"false\"]):not([tabindex=\"-1\"])'\n\n/**\n * Focus the first candidate that actually takes focus (a field inside a hidden tab panel won't). A radio\n * lands on its group's checked option, as Tab would.\n */\nfunction focusFirst(candidates: ArrayLike<HTMLElement>): boolean {\n  const list = Array.from(candidates)\n  for (const candidate of list) {\n    const el =\n      candidate instanceof HTMLInputElement && candidate.type === 'radio' && !candidate.checked\n        ? (list.find(\n            (other) =>\n              other instanceof HTMLInputElement &&\n              other.type === 'radio' &&\n              other.name === candidate.name &&\n              other.checked,\n          ) ?? candidate)\n        : candidate\n    el.focus({ preventScroll: true })\n    if (document.activeElement === el) return true\n  }\n  return false\n}\n\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {\n  /** Whether the modal is open — gates the portal and drives the enter animation. */\n  open: boolean\n  /** Called when a dismiss is requested (close button, backdrop click, or Escape). */\n  onClose: () => void\n  /** Preset width: `sm` 360 · `md` 620 · `lg` 900 px, or `fullScreen` (fills the viewport). Defaults to `md`. */\n  size?: ModalSize\n  /**\n   * Where overflow scrolls when the content is taller than the viewport: `outside` (default — the\n   * whole dialog grows and the overlay/page scrolls) or `inside` (the body scrolls while the header +\n   * footer stay pinned). Ignored for side-drawer placements (`left`/`right`), which always scroll inside.\n   */\n  scrollBehavior?: ModalScrollBehavior\n  /**\n   * Where the dialog sits: `center` (default — the standard centered modal), or `left` / `right` to\n   * make it a **full-height side drawer** (sheet) that slides in from that edge. A drawer takes its\n   * width from `size`, fills the viewport height, and always scrolls its body inside (header + footer\n   * stay pinned).\n   */\n  placement?: ModalPlacement\n  /** Header title. When set, labels the dialog (`aria-labelledby`). */\n  title?: ReactNode\n  /** Muted description line under the title (e.g. a confirm prompt). */\n  description?: ReactNode\n  /** Leading header icon shown in a tinted box (like `Card`) — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Theme color that tints the leading icon box. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Footer slot — right-aligned actions over a top divider (e.g. Cancel / Confirm buttons). */\n  footer?: ReactNode\n  /** Extra class on the scrollable body element — to tune its padding / layout (e.g. a compact confirm). */\n  bodyClassName?: string\n  /** Show the header × close button. Defaults to `true`. */\n  showCloseButton?: boolean\n  /** Close when the backdrop (outside the dialog) is clicked. Defaults to `true`. */\n  closeOnBackdrop?: boolean\n  /** Close when Escape is pressed. Defaults to `true`. */\n  closeOnEscape?: boolean\n  /** Accessible label — used when there's no `title`. */\n  ariaLabel?: string\n  /** Dialog body. */\n  children?: ReactNode\n}\n\n/**\n * A centered, backdrop-dimmed overlay dialog. Portaled to `<body>`, it locks page scroll while open,\n * traps Tab focus inside, restores focus to the previously-focused element on close, and dismisses on\n * close button / backdrop click / Escape (each toggleable). Sizes are `sm`/`md`/`lg` (max-width caps)\n * or `fullScreen`; `scrollBehavior` picks inside-body vs. whole-dialog scrolling. `placement` turns it\n * into a full-height side drawer (`left`/`right`) that slides in from the edge. The header mirrors\n * `Card` — an optional tinted `icon` box + `title` + `description`. Controlled by `open` + `onClose`.\n * The forwarded ref points at the dialog element.\n *\n * @example\n * const { isOpen, open, close } = useDisclosure()\n * <Modal open={isOpen} onClose={close} title=\"Edit\" footer={<Button onClick={close}>Done</Button>}>\n *   …\n * </Modal>\n */\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\n  {\n    open,\n    onClose,\n    size = 'md',\n    scrollBehavior = 'outside',\n    placement = 'center',\n    title,\n    description,\n    icon,\n    color = 'accent',\n    footer,\n    bodyClassName,\n    showCloseButton = true,\n    closeOnBackdrop = true,\n    closeOnEscape = true,\n    ariaLabel,\n    className,\n    style,\n    children,\n    ...props\n  },\n  forwardedRef,\n) {\n  const t = useT()\n  const panelRef = useRef<HTMLDivElement | null>(null)\n  const bodyRef = useRef<HTMLDivElement | null>(null)\n  const footerRef = useRef<HTMLDivElement | null>(null)\n  const titleId = useId()\n  const descId = useId()\n\n  // portal + scrim + scroll-lock + fade-in + backdrop-dismiss are handled by the shared `<Overlay>`\n\n  // the element focused before opening — read during the render that opens the modal, because an\n  // `autoFocus` element inside moves focus on mount, before any effect could see the opener\n  const openerRef = useRef<HTMLElement | null>(null)\n  const wasOpenRef = useRef(false)\n  if (open !== wasOpenRef.current) {\n    wasOpenRef.current = open\n    if (open && typeof document !== 'undefined') {\n      openerRef.current = document.activeElement as HTMLElement | null\n    }\n  }\n\n  // focus management on open — an explicit `autoFocus` inside wins; else the first body FIELD (form\n  // modals land on their first input), else the first footer action (a confirm dialog lands on\n  // Cancel/Confirm, a sheet on its Close), else the dialog panel itself. Never \"any control in the\n  // body\": a copy / icon / link button deep in content isn't where focus should start (it would also\n  // pop that button's tooltip). The Tab trap still reaches every control. Restore on close.\n  useEffect(() => {\n    if (!open) return\n    const panel = panelRef.current\n    const opener = openerRef.current\n    if (!panel?.contains(document.activeElement)) {\n      // preventScroll so opening an `outside`-scroll modal doesn't jump the overlay to a below-fold control\n      const placed =\n        focusFirst(bodyRef.current?.querySelectorAll<HTMLElement>(FIELD) ?? []) ||\n        focusFirst(footerRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [])\n      if (!placed) panel?.focus({ preventScroll: true })\n    }\n    // only restore if the element is still mounted (it may have unmounted while the modal was open)\n    return () => {\n      if (opener?.isConnected) opener.focus?.()\n    }\n  }, [open])\n\n  // merge the panel ref (positioning/focus) with the forwarded ref (consumer access)\n  const setPanelRef = (node: HTMLDivElement | null) => {\n    panelRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  // trap Tab within the dialog so focus can't strand on the locked page behind it (Escape + backdrop\n  // dismissal live in `<Overlay>`; this fires after the overlay's own handler)\n  const handleTabTrap = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Tab') return\n    const panel = panelRef.current\n    if (!panel) return\n    const focusables = [...panel.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(\n      (el) => el.offsetParent !== null || el === document.activeElement,\n    )\n    if (focusables.length === 0) {\n      event.preventDefault()\n      panel.focus()\n      return\n    }\n    const first = focusables[0]\n    const last = focusables[focusables.length - 1]\n    const active = document.activeElement\n    if (event.shiftKey && (active === first || active === panel)) {\n      event.preventDefault()\n      last.focus()\n    } else if (!event.shiftKey && active === last) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n\n  if (!open) return null\n\n  // a side drawer (left/right) is always full-height with the body scrolling inside (header/footer pinned)\n  const isDrawer = placement !== 'center'\n\n  const renderedIcon =\n    icon == null ? null : typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} />\n    ) : (\n      icon\n    )\n\n  const hasHeader = title != null || description != null || renderedIcon != null || showCloseButton\n  // a divider sets the header apart from the body/footer, like Card\n  const headerDivided = children != null || footer != null\n\n  return (\n    <Overlay\n      open={open}\n      onClose={onClose}\n      closeOnBackdrop={closeOnBackdrop}\n      closeOnEscape={closeOnEscape}\n      onKeyDown={handleTabTrap}\n      className={styles.overlay}\n      data-size={size}\n      data-placement={placement}\n      data-scroll={isDrawer ? 'inside' : scrollBehavior}\n    >\n      <div\n        ref={setPanelRef}\n        className={clsx(styles.modal, styles[size], className)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title != null ? titleId : undefined}\n        aria-label={title == null ? ariaLabel : undefined}\n        aria-describedby={description != null ? descId : undefined}\n        tabIndex={-1}\n        style={style as CSSProperties}\n        {...props}\n      >\n        {hasHeader && (\n          <div className={clsx(styles.header, headerDivided && styles.headerDivided)}>\n            <div className={styles.headerMain}>\n              {renderedIcon != null && (\n                <IconButton\n                  variant=\"filled\"\n                  size=\"sm\"\n                  color={color}\n                  nonClickable\n                  aria-hidden\n                  className={styles.icon}\n                >\n                  {renderedIcon}\n                </IconButton>\n              )}\n              {(title != null || description != null) && (\n                <div className={styles.headerText}>\n                  {title != null && (\n                    <div id={titleId} className={styles.title}>\n                      {title}\n                    </div>\n                  )}\n                  {description != null && (\n                    <div id={descId} className={styles.subtitle}>\n                      {description}\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n            {showCloseButton && (\n              <IconButton\n                variant=\"filled\"\n                color=\"primary\"\n                size=\"sm\"\n                className={styles.close}\n                aria-label={t('common.close')}\n                onClick={onClose}\n              >\n                <Icon name=\"Close\" />\n              </IconButton>\n            )}\n          </div>\n        )}\n        {children != null && (\n          <div ref={bodyRef} className={clsx(styles.body, bodyClassName)}>\n            {children}\n          </div>\n        )}\n        {footer != null && (\n          <div ref={footerRef} className={styles.footer}>\n            {footer}\n          </div>\n        )}\n      </div>\n    </Overlay>\n  )\n})\n"],"names":["Overlay","forwardRef","open","onClose","closeOnBackdrop","closeOnEscape","lockScroll","dim","className","style","children","onKeyDown","onMouseDown","onClick","props","ref","mouseDownTarget","useRef","visible","setVisible","useState","useLockBodyScroll","useEffect","raf","handleKeyDown","event","handleMouseDown","handleClick","createPortal","jsx","clsx","styles","ICON_NAME_SET","ICON_NAMES","FOCUSABLE","FIELD","focusFirst","candidates","list","candidate","el","other","Modal","size","scrollBehavior","placement","title","description","icon","color","footer","bodyClassName","showCloseButton","ariaLabel","forwardedRef","t","useT","panelRef","bodyRef","footerRef","titleId","useId","descId","openerRef","wasOpenRef","panel","opener","_a","_b","setPanelRef","node","handleTabTrap","focusables","first","last","active","isDrawer","renderedIcon","Icon","hasHeader","headerDivided","jsxs","IconButton"],"mappings":"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"}

package/dist/Modal-Dfwc9eIq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal-Dfwc9eIq.js","sources":["../src/components/Overlay/Overlay.tsx","../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport { useLockBodyScroll } from '../../hooks/useLockBodyScroll'\nimport styles from './Overlay.module.css'\n\nexport interface OverlayProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether the overlay is mounted + shown — gates the portal and drives the fade-in. */\n  open: boolean\n  /** Requested dismiss — fired on a backdrop click (`closeOnBackdrop`) or Escape (`closeOnEscape`). */\n  onClose?: () => void\n  /** Close when the scrim itself (outside the content) is clicked. Defaults to `true`. */\n  closeOnBackdrop?: boolean\n  /** Close when Escape is pressed while focus is within the overlay. Defaults to `true`. */\n  closeOnEscape?: boolean\n  /** Lock page scroll while open. Defaults to `true`. */\n  lockScroll?: boolean\n  /** Scrim darkness — the black backdrop's alpha (0–1). Defaults to `0.45`. */\n  dim?: number\n  /** Overlay content — typically a centered dialog / box / media. */\n  children?: ReactNode\n}\n\n/**\n * The shared backdrop primitive behind every dimmed, page-blocking surface (`Modal`, the FileUploader\n * lightbox). Portals a fixed full-viewport scrim to `<body>`, locks page scroll, fades in (opacity keyed\n * off a rAF `visible` flag → `data-open`), and dismisses on **backdrop-click** (gated on the pointer-down\n * AND click both landing on the scrim, so a text-selection drag ending on it doesn't close) / **Escape**\n * (swallowed via `stopPropagation` so it can't reach a React-tree ancestor overlay). Centers its children\n * by default; consumers layer their own padding / scroll / placement via `className` + `data-*` and read\n * the shared `data-open` on the scrim for their own box's enter transform. A consumer `onKeyDown` still\n * fires (after the Escape handling) so it can add e.g. a Tab focus-trap. Internal — no `index.ts`, so it's\n * never exposed as a package subpath; import it via `../Overlay/Overlay`. The ref points at the scrim div.\n */\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(function Overlay(\n  {\n    open,\n    onClose,\n    closeOnBackdrop = true,\n    closeOnEscape = true,\n    lockScroll = true,\n    dim,\n    className,\n    style,\n    children,\n    onKeyDown,\n    onMouseDown,\n    onClick,\n    ...props\n  },\n  ref,\n) {\n  const mouseDownTarget = useRef<EventTarget | null>(null)\n  const [visible, setVisible] = useState(false)\n\n  useLockBodyScroll(open && lockScroll)\n\n  // enter animation: flip `visible` on the frame after mount so the opacity transition runs\n  useEffect(() => {\n    if (!open) {\n      setVisible(false)\n      return\n    }\n    const raf = requestAnimationFrame(() => setVisible(true))\n    return () => cancelAnimationFrame(raf)\n  }, [open])\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape') {\n      // the overlay owns the page — swallow Escape so it can't reach a React-tree ancestor overlay (e.g.\n      // an outer Modal) even when this one isn't Escape-dismissible\n      event.stopPropagation()\n      if (closeOnEscape) onClose?.()\n    }\n    onKeyDown?.(event)\n  }\n  // remember where the pointer went down so the click handler can tell a scrim click from a drag that\n  // started inside the content and ended on the scrim (a text-selection drag)\n  const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n    mouseDownTarget.current = event.target\n    onMouseDown?.(event)\n  }\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (\n      closeOnBackdrop &&\n      event.target === event.currentTarget &&\n      mouseDownTarget.current === event.currentTarget\n    ) {\n      onClose?.()\n    }\n    onClick?.(event)\n  }\n\n  if (!open || typeof document === 'undefined') return null\n\n  return createPortal(\n    <div\n      ref={ref}\n      className={clsx(styles.overlay, className)}\n      data-open={visible ? 'true' : 'false'}\n      style={dim != null ? ({ '--tz-overlay-dim': dim, ...style } as CSSProperties) : style}\n      onKeyDown={handleKeyDown}\n      onMouseDown={handleMouseDown}\n      onClick={handleClick}\n      {...props}\n    >\n      {children}\n    </div>,\n    document.body,\n  )\n})\n","import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { ICON_NAMES, type IconName } from '../../icons/names'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Overlay } from '../Overlay/Overlay'\nimport styles from './Modal.module.css'\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'fullScreen'\nexport type ModalScrollBehavior = 'inside' | 'outside'\nexport type ModalPlacement = 'center' | 'left' | 'right'\n\nconst ICON_NAME_SET = new Set<string>(ICON_NAMES)\n\n/** Focusable descendants used by the focus trap + initial focus. */\n// every clause excludes tabindex=\"-1\" so decorative/programmatic-only nodes (e.g. the header's\n// `nonClickable aria-hidden` IconButton) don't count as trap boundaries or initial-focus targets\nconst FOCUSABLE =\n  'a[href]:not([tabindex=\"-1\"]), button:not(:disabled):not([tabindex=\"-1\"]), textarea:not(:disabled):not([tabindex=\"-1\"]), input:not(:disabled):not([tabindex=\"-1\"]), select:not(:disabled):not([tabindex=\"-1\"]), [tabindex]:not([tabindex=\"-1\"])'\n\n/** Body FIELDS — where a form modal's initial focus lands (buttons / links in content don't count). */\nconst FIELD =\n  'input:not([type=\"hidden\"]):not(:disabled):not([tabindex=\"-1\"]), textarea:not(:disabled):not([tabindex=\"-1\"]), select:not(:disabled):not([tabindex=\"-1\"]), [contenteditable]:not([contenteditable=\"false\"]):not([tabindex=\"-1\"])'\n\n/**\n * Focus the first candidate that actually takes focus (a field inside a hidden tab panel won't). A radio\n * lands on its group's checked option, as Tab would.\n */\nfunction focusFirst(candidates: ArrayLike<HTMLElement>): boolean {\n  const list = Array.from(candidates)\n  for (const candidate of list) {\n    const el =\n      candidate instanceof HTMLInputElement && candidate.type === 'radio' && !candidate.checked\n        ? (list.find(\n            (other) =>\n              other instanceof HTMLInputElement &&\n              other.type === 'radio' &&\n              other.name === candidate.name &&\n              other.checked,\n          ) ?? candidate)\n        : candidate\n    el.focus({ preventScroll: true })\n    if (document.activeElement === el) return true\n  }\n  return false\n}\n\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {\n  /** Whether the modal is open — gates the portal and drives the enter animation. */\n  open: boolean\n  /** Called when a dismiss is requested (close button, backdrop click, or Escape). */\n  onClose: () => void\n  /** Preset width: `sm` 360 · `md` 620 · `lg` 900 px, or `fullScreen` (fills the viewport). Defaults to `md`. */\n  size?: ModalSize\n  /**\n   * Where overflow scrolls when the content is taller than the viewport: `outside` (default — the\n   * whole dialog grows and the overlay/page scrolls) or `inside` (the body scrolls while the header +\n   * footer stay pinned). Ignored for side-drawer placements (`left`/`right`), which always scroll inside.\n   */\n  scrollBehavior?: ModalScrollBehavior\n  /**\n   * Where the dialog sits: `center` (default — the standard centered modal), or `left` / `right` to\n   * make it a **full-height side drawer** (sheet) that slides in from that edge. A drawer takes its\n   * width from `size`, fills the viewport height, and always scrolls its body inside (header + footer\n   * stay pinned).\n   */\n  placement?: ModalPlacement\n  /** Header title. When set, labels the dialog (`aria-labelledby`). */\n  title?: ReactNode\n  /** Muted description line under the title (e.g. a confirm prompt). */\n  description?: ReactNode\n  /** Leading header icon shown in a tinted box (like `Card`) — a known `IconName` or any node. */\n  icon?: IconName | ReactNode\n  /** Theme color that tints the leading icon box. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Footer slot — right-aligned actions over a top divider (e.g. Cancel / Confirm buttons). */\n  footer?: ReactNode\n  /** Extra class on the scrollable body element — to tune its padding / layout (e.g. a compact confirm). */\n  bodyClassName?: string\n  /** Show the header × close button. Defaults to `true`. */\n  showCloseButton?: boolean\n  /** Close when the backdrop (outside the dialog) is clicked. Defaults to `true`. */\n  closeOnBackdrop?: boolean\n  /** Close when Escape is pressed. Defaults to `true`. */\n  closeOnEscape?: boolean\n  /** Accessible label — used when there's no `title`. */\n  ariaLabel?: string\n  /** Dialog body. */\n  children?: ReactNode\n}\n\n/**\n * A centered, backdrop-dimmed overlay dialog. Portaled to `<body>`, it locks page scroll while open,\n * traps Tab focus inside, restores focus to the previously-focused element on close, and dismisses on\n * close button / backdrop click / Escape (each toggleable). Sizes are `sm`/`md`/`lg` (max-width caps)\n * or `fullScreen`; `scrollBehavior` picks inside-body vs. whole-dialog scrolling. `placement` turns it\n * into a full-height side drawer (`left`/`right`) that slides in from the edge. The header mirrors\n * `Card` — an optional tinted `icon` box + `title` + `description`. Controlled by `open` + `onClose`.\n * The forwarded ref points at the dialog element.\n *\n * @example\n * const { isOpen, open, close } = useDisclosure()\n * <Modal open={isOpen} onClose={close} title=\"Edit\" footer={<Button onClick={close}>Done</Button>}>\n *   …\n * </Modal>\n */\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\n  {\n    open,\n    onClose,\n    size = 'md',\n    scrollBehavior = 'outside',\n    placement = 'center',\n    title,\n    description,\n    icon,\n    color = 'accent',\n    footer,\n    bodyClassName,\n    showCloseButton = true,\n    closeOnBackdrop = true,\n    closeOnEscape = true,\n    ariaLabel,\n    className,\n    style,\n    children,\n    ...props\n  },\n  forwardedRef,\n) {\n  const t = useT()\n  const panelRef = useRef<HTMLDivElement | null>(null)\n  const bodyRef = useRef<HTMLDivElement | null>(null)\n  const footerRef = useRef<HTMLDivElement | null>(null)\n  const titleId = useId()\n  const descId = useId()\n\n  // portal + scrim + scroll-lock + fade-in + backdrop-dismiss are handled by the shared `<Overlay>`\n\n  // the element focused before opening — read during the render that opens the modal, because an\n  // `autoFocus` element inside moves focus on mount, before any effect could see the opener\n  const openerRef = useRef<HTMLElement | null>(null)\n  const wasOpenRef = useRef(false)\n  if (open !== wasOpenRef.current) {\n    wasOpenRef.current = open\n    if (open && typeof document !== 'undefined') {\n      openerRef.current = document.activeElement as HTMLElement | null\n    }\n  }\n\n  // focus management on open — an explicit `autoFocus` inside wins; else the first body FIELD (form\n  // modals land on their first input), else the first footer action (a confirm dialog lands on\n  // Cancel/Confirm, a sheet on its Close), else the dialog panel itself. Never \"any control in the\n  // body\": a copy / icon / link button deep in content isn't where focus should start (it would also\n  // pop that button's tooltip). The Tab trap still reaches every control. Restore on close.\n  useEffect(() => {\n    if (!open) return\n    const panel = panelRef.current\n    const opener = openerRef.current\n    if (!panel?.contains(document.activeElement)) {\n      // preventScroll so opening an `outside`-scroll modal doesn't jump the overlay to a below-fold control\n      const placed =\n        focusFirst(bodyRef.current?.querySelectorAll<HTMLElement>(FIELD) ?? []) ||\n        focusFirst(footerRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [])\n      if (!placed) panel?.focus({ preventScroll: true })\n    }\n    // only restore if the element is still mounted (it may have unmounted while the modal was open)\n    return () => {\n      if (opener?.isConnected) opener.focus?.()\n    }\n  }, [open])\n\n  // merge the panel ref (positioning/focus) with the forwarded ref (consumer access)\n  const setPanelRef = (node: HTMLDivElement | null) => {\n    panelRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  // trap Tab within the dialog so focus can't strand on the locked page behind it (Escape + backdrop\n  // dismissal live in `<Overlay>`; this fires after the overlay's own handler)\n  const handleTabTrap = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Tab') return\n    const panel = panelRef.current\n    if (!panel) return\n    const focusables = [...panel.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(\n      (el) => el.offsetParent !== null || el === document.activeElement,\n    )\n    if (focusables.length === 0) {\n      event.preventDefault()\n      panel.focus()\n      return\n    }\n    const first = focusables[0]\n    const last = focusables[focusables.length - 1]\n    const active = document.activeElement\n    if (event.shiftKey && (active === first || active === panel)) {\n      event.preventDefault()\n      last.focus()\n    } else if (!event.shiftKey && active === last) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n\n  if (!open) return null\n\n  // a side drawer (left/right) is always full-height with the body scrolling inside (header/footer pinned)\n  const isDrawer = placement !== 'center'\n\n  const renderedIcon =\n    icon == null ? null : typeof icon === 'string' && ICON_NAME_SET.has(icon) ? (\n      <Icon name={icon as IconName} />\n    ) : (\n      icon\n    )\n\n  const hasHeader = title != null || description != null || renderedIcon != null || showCloseButton\n  // a divider sets the header apart from the body/footer, like Card\n  const headerDivided = children != null || footer != null\n\n  return (\n    <Overlay\n      open={open}\n      onClose={onClose}\n      closeOnBackdrop={closeOnBackdrop}\n      closeOnEscape={closeOnEscape}\n      onKeyDown={handleTabTrap}\n      className={styles.overlay}\n      data-size={size}\n      data-placement={placement}\n      data-scroll={isDrawer ? 'inside' : scrollBehavior}\n    >\n      <div\n        ref={setPanelRef}\n        className={clsx(styles.modal, styles[size], className)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title != null ? titleId : undefined}\n        aria-label={title == null ? ariaLabel : undefined}\n        aria-describedby={description != null ? descId : undefined}\n        tabIndex={-1}\n        style={style as CSSProperties}\n        {...props}\n      >\n        {hasHeader && (\n          <div className={clsx(styles.header, headerDivided && styles.headerDivided)}>\n            <div className={styles.headerMain}>\n              {renderedIcon != null && (\n                <IconButton\n                  variant=\"filled\"\n                  size=\"sm\"\n                  color={color}\n                  nonClickable\n                  aria-hidden\n                  className={styles.icon}\n                >\n                  {renderedIcon}\n                </IconButton>\n              )}\n              {(title != null || description != null) && (\n                <div className={styles.headerText}>\n                  {title != null && (\n                    <div id={titleId} className={styles.title}>\n                      {title}\n                    </div>\n                  )}\n                  {description != null && (\n                    <div id={descId} className={styles.subtitle}>\n                      {description}\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n            {showCloseButton && (\n              <IconButton\n                variant=\"filled\"\n                color=\"primary\"\n                size=\"sm\"\n                className={styles.close}\n                aria-label={t('common.close')}\n                onClick={onClose}\n              >\n                <Icon name=\"Close\" />\n              </IconButton>\n            )}\n          </div>\n        )}\n        {children != null && (\n          <div ref={bodyRef} className={clsx(styles.body, bodyClassName)}>\n            {children}\n          </div>\n        )}\n        {footer != null && (\n          <div ref={footerRef} className={styles.footer}>\n            {footer}\n          </div>\n        )}\n      </div>\n    </Overlay>\n  )\n})\n"],"names":["Overlay","forwardRef","open","onClose","closeOnBackdrop","closeOnEscape","lockScroll","dim","className","style","children","onKeyDown","onMouseDown","onClick","props","ref","mouseDownTarget","useRef","visible","setVisible","useState","useLockBodyScroll","useEffect","raf","handleKeyDown","event","handleMouseDown","handleClick","createPortal","jsx","clsx","styles","ICON_NAME_SET","ICON_NAMES","FOCUSABLE","FIELD","focusFirst","candidates","list","candidate","el","other","Modal","size","scrollBehavior","placement","title","description","icon","color","footer","bodyClassName","showCloseButton","ariaLabel","forwardedRef","t","useT","panelRef","bodyRef","footerRef","titleId","useId","descId","openerRef","wasOpenRef","panel","opener","_a","_b","setPanelRef","node","handleTabTrap","focusables","first","last","active","isDrawer","renderedIcon","Icon","hasHeader","headerDivided","jsxs","IconButton"],"mappings":"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"}

package/dist/OtpField-Dy-LKTi9.js

@@ -1,174 +0,0 @@
-import { jsxs as R, jsx as _ } from "react/jsx-runtime";
-import { forwardRef as ee, useId as te, useState as re, useRef as se, useEffect as oe } from "react";
-import { clsx as T } from "clsx";
-import { u as ae } from "./formContext-B7ln1Miy.js";
-import { T as z } from "./Typography-ChSuxgkc.js";
-import { f as d } from "./TextField.module-6gYcR9TL.js";
-import { a as le } from "./ConfigProvider-Bgu85MsI.js";
-const ce = "_row_1bbms_2", ne = "_center_1bbms_14", ie = "_end_1bbms_15", fe = "_sm_1bbms_27", de = "_md_1bbms_31", me = "_lg_1bbms_35", ue = "_box_1bbms_41", pe = "_filled_1bbms_65", be = "_invalid_1bbms_82", m = {
-  row: ce,
-  center: ne,
-  end: ie,
-  sm: fe,
-  md: de,
-  lg: me,
-  box: ue,
-  filled: pe,
-  invalid: be
-}, _e = {
-  numeric: /[0-9]/,
-  alphabetic: /[A-Za-z]/,
-  alphanumeric: /[A-Za-z0-9]/
-};
-function he(B, a) {
-  const c = [...B].slice(0, a);
-  for (; c.length < a; ) c.push("");
-  return c;
-}
-const Be = ee(function({
-  length: a = 4,
-  type: c = "numeric",
-  value: v,
-  defaultValue: O,
-  onChange: x,
-  onComplete: g,
-  name: n,
-  label: h,
-  helperText: S,
-  error: j,
-  required: E = !1,
-  disabled: N = !1,
-  autoFocus: M = !1,
-  placeholder: P,
-  size: V = "md",
-  align: K = "start",
-  color: Z = "primary",
-  className: $,
-  style: q
-}, C) {
-  const H = le(), F = `${te()}-helper`, A = _e[c], u = ae(), w = !!(u && n), o = u && n ? u.field(n) : void 0, L = v !== void 0 ? v : w ? u.values[n] : void 0, I = v !== void 0 || w, [G, J] = re(O ?? ""), Q = I ? L ?? "" : G, y = j ?? (o == null ? void 0 : o.error) ?? !1, D = S ?? (o == null ? void 0 : o.helperText), i = he(Q, a), k = se([]);
-  oe(() => {
-    var t;
-    M && ((t = k.current[0]) == null || t.focus());
-  }, []);
-  const f = (t) => {
-    const e = k.current[Math.max(0, Math.min(t, a - 1))];
-    e == null || e.focus(), e == null || e.select();
-  }, p = (t) => {
-    const e = t.join("");
-    I || J(e), w && u.setValue(n, e), x == null || x(e), t.every((r) => r !== "") && (g == null || g(e));
-  }, U = (t, e) => {
-    const r = [...e].filter((s) => A.test(s));
-    if (e !== "" && r.length === 0) return;
-    const l = [...i];
-    if (r.length <= 1)
-      l[t] = r[0] ?? "", p(l), r[0] && f(t + 1);
-    else {
-      let s = t;
-      for (const b of r) {
-        if (s >= a) break;
-        l[s] = b, s++;
-      }
-      p(l), f(s);
-    }
-  }, W = (t, e) => {
-    if (e.key === "Backspace") {
-      if (i[t] === "" && t > 0) {
-        e.preventDefault();
-        const r = [...i];
-        r[t - 1] = "", p(r), f(t - 1);
-      }
-    } else if (e.key === "ArrowLeft")
-      e.preventDefault(), f(t - 1);
-    else if (e.key === "ArrowRight")
-      e.preventDefault(), f(t + 1);
-    else if (e.key === "Delete") {
-      e.preventDefault();
-      const r = [...i];
-      r[t] = "", p(r);
-    }
-  }, X = (t, e) => {
-    e.preventDefault();
-    const r = [...e.clipboardData.getData("text")].filter((b) => A.test(b));
-    if (r.length === 0) return;
-    const l = [...i];
-    let s = t;
-    for (const b of r) {
-      if (s >= a) break;
-      l[s] = b, s++;
-    }
-    p(l), f(s);
-  }, Y = (t) => {
-    t.currentTarget.contains(t.relatedTarget) || o == null || o.onBlur(t);
-  };
-  return /* @__PURE__ */ R(
-    "div",
-    {
-      ref: C,
-      className: T(
-        d.field,
-        y && d.error,
-        N && d.disabled,
-        $
-      ),
-      style: {
-        "--tz-btn-rgb": `var(--tz-color-${Z}-rgb)`,
-        ...q
-      },
-      children: [
-        h != null && /* @__PURE__ */ R("span", { className: d.label, children: [
-          /* @__PURE__ */ _(z, { as: "span", variant: "bodySmall", color: "muted", children: h }),
-          E && /* @__PURE__ */ _("span", { className: d.required, "aria-hidden": "true", children: "*" })
-        ] }),
-        /* @__PURE__ */ _(
-          "div",
-          {
-            role: "group",
-            "aria-label": typeof h == "string" ? h : "One-time code",
-            "aria-invalid": y || void 0,
-            "aria-describedby": D != null ? F : void 0,
-            className: T(m.row, m[V], m[K], y && m.invalid),
-            onBlur: Y,
-            children: i.map((t, e) => /* @__PURE__ */ _(
-              "input",
-              {
-                ref: (r) => {
-                  k.current[e] = r;
-                },
-                name: e === 0 ? n : void 0,
-                type: "text",
-                inputMode: c === "numeric" ? "numeric" : "text",
-                autoComplete: e === 0 ? "one-time-code" : "off",
-                "aria-label": H("otpField.digit", { index: e + 1, total: a }),
-                className: T(m.box, t !== "" && m.filled),
-                value: t,
-                placeholder: P,
-                disabled: N,
-                onChange: (r) => U(e, r.target.value),
-                onKeyDown: (r) => W(e, r),
-                onPaste: (r) => X(e, r),
-                onFocus: (r) => r.target.select()
-              },
-              e
-            ))
-          }
-        ),
-        D != null && /* @__PURE__ */ _(
-          z,
-          {
-            as: "span",
-            id: F,
-            variant: "bodySmall",
-            color: y ? "error" : "muted",
-            className: d.helper,
-            children: D
-          }
-        )
-      ]
-    }
-  );
-});
-export {
-  Be as O
-};
-//# sourceMappingURL=OtpField-Dy-LKTi9.js.map

package/dist/OtpField-Dy-LKTi9.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OtpField-Dy-LKTi9.js","sources":["../src/components/OtpField/OtpField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ClipboardEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Typography } from '../Typography'\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './OtpField.module.css'\n\nexport type OtpFieldSize = 'sm' | 'md' | 'lg'\n/** Which characters the code accepts. */\nexport type OtpFieldType = 'numeric' | 'alphabetic' | 'alphanumeric'\n\nexport type OtpFieldAlign = 'start' | 'center' | 'end'\n\n/** Allowed-character matcher per `type`. */\nconst PATTERN: Record<OtpFieldType, RegExp> = {\n  numeric: /[0-9]/,\n  alphabetic: /[A-Za-z]/,\n  alphanumeric: /[A-Za-z0-9]/,\n}\n\n/** Split a code string into exactly `length` single-char slots, padded with empties. */\nfunction toChars(value: string, length: number): string[] {\n  const out = [...value].slice(0, length)\n  while (out.length < length) out.push('')\n  return out\n}\n\nexport interface OtpFieldProps {\n  /** Number of input boxes (the code length). Defaults to `4`. */\n  length?: number\n  /** Which characters are accepted (also drives the mobile keyboard). Defaults to `'numeric'`. */\n  type?: OtpFieldType\n  /** Controlled value — the concatenated code string. */\n  value?: string\n  /** Initial value for uncontrolled use. */\n  defaultValue?: string\n  /** Fires with the full code string on every change. */\n  onChange?: (value: string) => void\n  /** Fires with the code once every box is filled. */\n  onComplete?: (value: string) => void\n  /** Field name — the `<Form>` binding key (form value is the code `string`). */\n  name?: string\n  /** Label rendered above the boxes. */\n  label?: ReactNode\n  /** Helper / error text under the boxes (shown in the error color while `error`). */\n  helperText?: ReactNode\n  /** Marks the field invalid — reddens the boxes + helper. */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Disables every box. */\n  disabled?: boolean\n  /** Focus the first box on mount. */\n  autoFocus?: boolean\n  /** Placeholder character shown in empty boxes (e.g. `'•'`). */\n  placeholder?: string\n  /** Preset size. Defaults to `'md'`. */\n  size?: OtpFieldSize\n  /** Horizontal alignment of the boxes within the field. Defaults to `'start'` (left). */\n  align?: OtpFieldAlign\n  /** Theme palette token for the focus ring / active box. Defaults to `'primary'`. */\n  color?: ThemeColor\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A one-time-passcode input — a row of single-character boxes for verification codes. **`length`**\n * (default `4`) sets the box count; **`type`** (`'numeric'` default · `'alphabetic'` · `'alphanumeric'`)\n * restricts the accepted characters and the mobile keyboard. Typing advances to the next box, Backspace\n * clears + steps back, Arrows navigate, and **paste / SMS autofill** (`autocomplete=\"one-time-code\"`)\n * distributes the whole code across the boxes. The value is the concatenated string — controlled\n * (`value` + `onChange`) or uncontrolled (`defaultValue`); **`onComplete`** fires when all boxes are\n * filled. Shares the field-family chrome (`label` · `error` + `helperText` · `required` · `disabled` ·\n * `size`) and binds to a surrounding `<Form>` by **`name`** (form value = the code string; validate with\n * e.g. `z.string().length(4)` or a `type`-matching regex). Tinted by `color` via the shared\n * `--tz-btn-rgb` pattern; `role=\"group\"` with per-box `aria-label`s. Own CSS module (+ TextField's for\n * the label/helper chrome).\n */\nexport const OtpField = forwardRef<HTMLDivElement, OtpFieldProps>(function OtpField(\n  {\n    length = 4,\n    type = 'numeric',\n    value,\n    defaultValue,\n    onChange,\n    onComplete,\n    name,\n    label,\n    helperText,\n    error,\n    required = false,\n    disabled = false,\n    autoFocus = false,\n    placeholder,\n    size = 'md',\n    align = 'start',\n    color = 'primary',\n    className,\n    style,\n  },\n  ref,\n) {\n  const t = useT()\n  const reactId = useId()\n  const helperId = `${reactId}-helper`\n  const allowed = PATTERN[type]\n\n  // bind to a surrounding <Form> by `name` — form value is the code string; error/touched via field()\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue =\n    value !== undefined ? value : isFormBound ? (form!.values[name!] as string) : undefined\n  const isControlled = value !== undefined || isFormBound\n  const [internal, setInternal] = useState<string>(defaultValue ?? '')\n  const currentValue = isControlled ? (externalValue ?? '') : internal\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  // the code split into exactly `length` single-char slots (padded with empties)\n  const chars = toChars(currentValue, length)\n\n  const inputsRef = useRef<(HTMLInputElement | null)[]>([])\n\n  useEffect(() => {\n    if (autoFocus) inputsRef.current[0]?.focus()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const focusBox = (i: number) => {\n    const el = inputsRef.current[Math.max(0, Math.min(i, length - 1))]\n    el?.focus()\n    el?.select()\n  }\n\n  const commit = (nextChars: string[]) => {\n    const next = nextChars.join('')\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n    if (nextChars.every((c) => c !== '')) onComplete?.(next)\n  }\n\n  const handleChange = (index: number, raw: string) => {\n    const filtered = [...raw].filter((c) => allowed.test(c))\n    // a disallowed keystroke (raw non-empty but nothing survives the filter) is ignored\n    if (raw !== '' && filtered.length === 0) return\n    const nextChars = [...chars]\n    if (filtered.length <= 1) {\n      // a single typed char (boxes select-on-focus, so this replaces) — or a clear ('')\n      nextChars[index] = filtered[0] ?? ''\n      commit(nextChars)\n      if (filtered[0]) focusBox(index + 1)\n    } else {\n      // multiple chars (SMS autofill dumps the whole code into one box) → distribute from here\n      let k = index\n      for (const ch of filtered) {\n        if (k >= length) break\n        nextChars[k] = ch\n        k++\n      }\n      commit(nextChars)\n      focusBox(k)\n    }\n  }\n\n  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Backspace') {\n      if (chars[index] === '' && index > 0) {\n        // empty box → step back and clear the previous one\n        event.preventDefault()\n        const nextChars = [...chars]\n        nextChars[index - 1] = ''\n        commit(nextChars)\n        focusBox(index - 1)\n      }\n      // a non-empty box lets the native delete run → onChange fires with '' (stays put)\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault()\n      focusBox(index - 1)\n    } else if (event.key === 'ArrowRight') {\n      event.preventDefault()\n      focusBox(index + 1)\n    } else if (event.key === 'Delete') {\n      event.preventDefault()\n      const nextChars = [...chars]\n      nextChars[index] = ''\n      commit(nextChars)\n    }\n  }\n\n  const handlePaste = (index: number, event: ClipboardEvent<HTMLInputElement>) => {\n    event.preventDefault()\n    const filtered = [...event.clipboardData.getData('text')].filter((c) => allowed.test(c))\n    if (filtered.length === 0) return\n    const nextChars = [...chars]\n    let k = index\n    for (const ch of filtered) {\n      if (k >= length) break\n      nextChars[k] = ch\n      k++\n    }\n    commit(nextChars)\n    focusBox(k)\n  }\n\n  // mark the field touched when focus leaves the whole widget (not when it hops between boxes)\n  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n      bound?.onBlur(event as unknown as FocusEvent<HTMLInputElement>)\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        resolvedError && fieldStyles.error,\n        disabled && fieldStyles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      {label != null && (\n        <span className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </span>\n      )}\n\n      <div\n        role=\"group\"\n        aria-label={typeof label === 'string' ? label : 'One-time code'}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.row, styles[size], styles[align], resolvedError && styles.invalid)}\n        onBlur={handleBlur}\n      >\n        {chars.map((char, i) => (\n          <input\n            key={i}\n            ref={(el) => {\n              inputsRef.current[i] = el\n            }}\n            // the name goes on the first box only, so the form's scroll-to-error can target it\n            name={i === 0 ? name : undefined}\n            type=\"text\"\n            inputMode={type === 'numeric' ? 'numeric' : 'text'}\n            autoComplete={i === 0 ? 'one-time-code' : 'off'}\n            aria-label={t('otpField.digit', { index: i + 1, total: length })}\n            className={clsx(styles.box, char !== '' && styles.filled)}\n            value={char}\n            placeholder={placeholder}\n            disabled={disabled}\n            onChange={(e) => handleChange(i, e.target.value)}\n            onKeyDown={(e) => handleKeyDown(i, e)}\n            onPaste={(e) => handlePaste(i, e)}\n            onFocus={(e) => e.target.select()}\n          />\n        ))}\n      </div>\n\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["PATTERN","toChars","value","length","out","OtpField","forwardRef","type","defaultValue","onChange","onComplete","name","label","helperText","error","required","disabled","autoFocus","placeholder","size","align","color","className","style","ref","t","useT","helperId","useId","allowed","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","currentValue","resolvedError","resolvedHelperText","chars","inputsRef","useRef","useEffect","_a","focusBox","i","el","commit","nextChars","next","c","handleChange","index","raw","filtered","k","ch","handleKeyDown","event","handlePaste","handleBlur","jsxs","clsx","fieldStyles","jsx","Typography","styles","char","e"],"mappings":"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"}

package/dist/OtpField-KHwdaajC.cjs

@@ -1,2 +0,0 @@
-"use strict";const n=require("react/jsx-runtime"),_=require("react"),k=require("clsx"),ee=require("./formContext-bTWrqdEV.cjs"),R=require("./Typography-d97DdbNd.cjs"),u=require("./TextField.module-DsNCo8vN.cjs"),te=require("./ConfigProvider-DELhJlqo.cjs"),se="_row_1bbms_2",re="_center_1bbms_14",oe="_end_1bbms_15",le="_sm_1bbms_27",ce="_md_1bbms_31",ne="_lg_1bbms_35",ae="_box_1bbms_41",ie="_filled_1bbms_65",de="_invalid_1bbms_82",m={row:se,center:re,end:oe,sm:le,md:ce,lg:ne,box:ae,filled:ie,invalid:de},fe={numeric:/[0-9]/,alphabetic:/[A-Za-z]/,alphanumeric:/[A-Za-z0-9]/};function ue(S,l){const a=[...S].slice(0,l);for(;a.length<l;)a.push("");return a}const me=_.forwardRef(function({length:l=4,type:a="numeric",value:v,defaultValue:A,onChange:g,onComplete:T,name:i,label:y,helperText:I,error:z,required:O=!1,disabled:q=!1,autoFocus:P=!1,placeholder:C,size:E="md",align:M="start",color:V="primary",className:K,style:Z},$){const H=te.useT(),F=`${_.useId()}-helper`,B=fe[a],p=ee.useFormContext(),w=!!(p&&i),o=p&&i?p.field(i):void 0,L=v!==void 0?v:w?p.values[i]:void 0,N=v!==void 0||w,[G,J]=_.useState(A??""),Q=N?L??"":G,x=z??(o==null?void 0:o.error)??!1,D=I??(o==null?void 0:o.helperText),d=ue(Q,l),j=_.useRef([]);_.useEffect(()=>{var t;P&&((t=j.current[0])==null||t.focus())},[]);const f=t=>{const e=j.current[Math.max(0,Math.min(t,l-1))];e==null||e.focus(),e==null||e.select()},b=t=>{const e=t.join("");N||J(e),w&&p.setValue(i,e),g==null||g(e),t.every(s=>s!=="")&&(T==null||T(e))},U=(t,e)=>{const s=[...e].filter(r=>B.test(r));if(e!==""&&s.length===0)return;const c=[...d];if(s.length<=1)c[t]=s[0]??"",b(c),s[0]&&f(t+1);else{let r=t;for(const h of s){if(r>=l)break;c[r]=h,r++}b(c),f(r)}},W=(t,e)=>{if(e.key==="Backspace"){if(d[t]===""&&t>0){e.preventDefault();const s=[...d];s[t-1]="",b(s),f(t-1)}}else if(e.key==="ArrowLeft")e.preventDefault(),f(t-1);else if(e.key==="ArrowRight")e.preventDefault(),f(t+1);else if(e.key==="Delete"){e.preventDefault();const s=[...d];s[t]="",b(s)}},X=(t,e)=>{e.preventDefault();const s=[...e.clipboardData.getData("text")].filter(h=>B.test(h));if(s.length===0)return;const c=[...d];let r=t;for(const h of s){if(r>=l)break;c[r]=h,r++}b(c),f(r)},Y=t=>{t.currentTarget.contains(t.relatedTarget)||o==null||o.onBlur(t)};return n.jsxs("div",{ref:$,className:k.clsx(u.fieldStyles.field,x&&u.fieldStyles.error,q&&u.fieldStyles.disabled,K),style:{"--tz-btn-rgb":`var(--tz-color-${V}-rgb)`,...Z},children:[y!=null&&n.jsxs("span",{className:u.fieldStyles.label,children:[n.jsx(R.Typography,{as:"span",variant:"bodySmall",color:"muted",children:y}),O&&n.jsx("span",{className:u.fieldStyles.required,"aria-hidden":"true",children:"*"})]}),n.jsx("div",{role:"group","aria-label":typeof y=="string"?y:"One-time code","aria-invalid":x||void 0,"aria-describedby":D!=null?F:void 0,className:k.clsx(m.row,m[E],m[M],x&&m.invalid),onBlur:Y,children:d.map((t,e)=>n.jsx("input",{ref:s=>{j.current[e]=s},name:e===0?i:void 0,type:"text",inputMode:a==="numeric"?"numeric":"text",autoComplete:e===0?"one-time-code":"off","aria-label":H("otpField.digit",{index:e+1,total:l}),className:k.clsx(m.box,t!==""&&m.filled),value:t,placeholder:C,disabled:q,onChange:s=>U(e,s.target.value),onKeyDown:s=>W(e,s),onPaste:s=>X(e,s),onFocus:s=>s.target.select()},e))}),D!=null&&n.jsx(R.Typography,{as:"span",id:F,variant:"bodySmall",color:x?"error":"muted",className:u.fieldStyles.helper,children:D})]})});exports.OtpField=me;
-//# sourceMappingURL=OtpField-KHwdaajC.cjs.map

package/dist/OtpField-KHwdaajC.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"OtpField-KHwdaajC.cjs","sources":["../src/components/OtpField/OtpField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ClipboardEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { useT, type ThemeColor } from '../../theme'\nimport { Typography } from '../Typography'\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './OtpField.module.css'\n\nexport type OtpFieldSize = 'sm' | 'md' | 'lg'\n/** Which characters the code accepts. */\nexport type OtpFieldType = 'numeric' | 'alphabetic' | 'alphanumeric'\n\nexport type OtpFieldAlign = 'start' | 'center' | 'end'\n\n/** Allowed-character matcher per `type`. */\nconst PATTERN: Record<OtpFieldType, RegExp> = {\n  numeric: /[0-9]/,\n  alphabetic: /[A-Za-z]/,\n  alphanumeric: /[A-Za-z0-9]/,\n}\n\n/** Split a code string into exactly `length` single-char slots, padded with empties. */\nfunction toChars(value: string, length: number): string[] {\n  const out = [...value].slice(0, length)\n  while (out.length < length) out.push('')\n  return out\n}\n\nexport interface OtpFieldProps {\n  /** Number of input boxes (the code length). Defaults to `4`. */\n  length?: number\n  /** Which characters are accepted (also drives the mobile keyboard). Defaults to `'numeric'`. */\n  type?: OtpFieldType\n  /** Controlled value — the concatenated code string. */\n  value?: string\n  /** Initial value for uncontrolled use. */\n  defaultValue?: string\n  /** Fires with the full code string on every change. */\n  onChange?: (value: string) => void\n  /** Fires with the code once every box is filled. */\n  onComplete?: (value: string) => void\n  /** Field name — the `<Form>` binding key (form value is the code `string`). */\n  name?: string\n  /** Label rendered above the boxes. */\n  label?: ReactNode\n  /** Helper / error text under the boxes (shown in the error color while `error`). */\n  helperText?: ReactNode\n  /** Marks the field invalid — reddens the boxes + helper. */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Disables every box. */\n  disabled?: boolean\n  /** Focus the first box on mount. */\n  autoFocus?: boolean\n  /** Placeholder character shown in empty boxes (e.g. `'•'`). */\n  placeholder?: string\n  /** Preset size. Defaults to `'md'`. */\n  size?: OtpFieldSize\n  /** Horizontal alignment of the boxes within the field. Defaults to `'start'` (left). */\n  align?: OtpFieldAlign\n  /** Theme palette token for the focus ring / active box. Defaults to `'primary'`. */\n  color?: ThemeColor\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A one-time-passcode input — a row of single-character boxes for verification codes. **`length`**\n * (default `4`) sets the box count; **`type`** (`'numeric'` default · `'alphabetic'` · `'alphanumeric'`)\n * restricts the accepted characters and the mobile keyboard. Typing advances to the next box, Backspace\n * clears + steps back, Arrows navigate, and **paste / SMS autofill** (`autocomplete=\"one-time-code\"`)\n * distributes the whole code across the boxes. The value is the concatenated string — controlled\n * (`value` + `onChange`) or uncontrolled (`defaultValue`); **`onComplete`** fires when all boxes are\n * filled. Shares the field-family chrome (`label` · `error` + `helperText` · `required` · `disabled` ·\n * `size`) and binds to a surrounding `<Form>` by **`name`** (form value = the code string; validate with\n * e.g. `z.string().length(4)` or a `type`-matching regex). Tinted by `color` via the shared\n * `--tz-btn-rgb` pattern; `role=\"group\"` with per-box `aria-label`s. Own CSS module (+ TextField's for\n * the label/helper chrome).\n */\nexport const OtpField = forwardRef<HTMLDivElement, OtpFieldProps>(function OtpField(\n  {\n    length = 4,\n    type = 'numeric',\n    value,\n    defaultValue,\n    onChange,\n    onComplete,\n    name,\n    label,\n    helperText,\n    error,\n    required = false,\n    disabled = false,\n    autoFocus = false,\n    placeholder,\n    size = 'md',\n    align = 'start',\n    color = 'primary',\n    className,\n    style,\n  },\n  ref,\n) {\n  const t = useT()\n  const reactId = useId()\n  const helperId = `${reactId}-helper`\n  const allowed = PATTERN[type]\n\n  // bind to a surrounding <Form> by `name` — form value is the code string; error/touched via field()\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue =\n    value !== undefined ? value : isFormBound ? (form!.values[name!] as string) : undefined\n  const isControlled = value !== undefined || isFormBound\n  const [internal, setInternal] = useState<string>(defaultValue ?? '')\n  const currentValue = isControlled ? (externalValue ?? '') : internal\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  // the code split into exactly `length` single-char slots (padded with empties)\n  const chars = toChars(currentValue, length)\n\n  const inputsRef = useRef<(HTMLInputElement | null)[]>([])\n\n  useEffect(() => {\n    if (autoFocus) inputsRef.current[0]?.focus()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const focusBox = (i: number) => {\n    const el = inputsRef.current[Math.max(0, Math.min(i, length - 1))]\n    el?.focus()\n    el?.select()\n  }\n\n  const commit = (nextChars: string[]) => {\n    const next = nextChars.join('')\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n    if (nextChars.every((c) => c !== '')) onComplete?.(next)\n  }\n\n  const handleChange = (index: number, raw: string) => {\n    const filtered = [...raw].filter((c) => allowed.test(c))\n    // a disallowed keystroke (raw non-empty but nothing survives the filter) is ignored\n    if (raw !== '' && filtered.length === 0) return\n    const nextChars = [...chars]\n    if (filtered.length <= 1) {\n      // a single typed char (boxes select-on-focus, so this replaces) — or a clear ('')\n      nextChars[index] = filtered[0] ?? ''\n      commit(nextChars)\n      if (filtered[0]) focusBox(index + 1)\n    } else {\n      // multiple chars (SMS autofill dumps the whole code into one box) → distribute from here\n      let k = index\n      for (const ch of filtered) {\n        if (k >= length) break\n        nextChars[k] = ch\n        k++\n      }\n      commit(nextChars)\n      focusBox(k)\n    }\n  }\n\n  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Backspace') {\n      if (chars[index] === '' && index > 0) {\n        // empty box → step back and clear the previous one\n        event.preventDefault()\n        const nextChars = [...chars]\n        nextChars[index - 1] = ''\n        commit(nextChars)\n        focusBox(index - 1)\n      }\n      // a non-empty box lets the native delete run → onChange fires with '' (stays put)\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault()\n      focusBox(index - 1)\n    } else if (event.key === 'ArrowRight') {\n      event.preventDefault()\n      focusBox(index + 1)\n    } else if (event.key === 'Delete') {\n      event.preventDefault()\n      const nextChars = [...chars]\n      nextChars[index] = ''\n      commit(nextChars)\n    }\n  }\n\n  const handlePaste = (index: number, event: ClipboardEvent<HTMLInputElement>) => {\n    event.preventDefault()\n    const filtered = [...event.clipboardData.getData('text')].filter((c) => allowed.test(c))\n    if (filtered.length === 0) return\n    const nextChars = [...chars]\n    let k = index\n    for (const ch of filtered) {\n      if (k >= length) break\n      nextChars[k] = ch\n      k++\n    }\n    commit(nextChars)\n    focusBox(k)\n  }\n\n  // mark the field touched when focus leaves the whole widget (not when it hops between boxes)\n  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n      bound?.onBlur(event as unknown as FocusEvent<HTMLInputElement>)\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        resolvedError && fieldStyles.error,\n        disabled && fieldStyles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      {label != null && (\n        <span className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </span>\n      )}\n\n      <div\n        role=\"group\"\n        aria-label={typeof label === 'string' ? label : 'One-time code'}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.row, styles[size], styles[align], resolvedError && styles.invalid)}\n        onBlur={handleBlur}\n      >\n        {chars.map((char, i) => (\n          <input\n            key={i}\n            ref={(el) => {\n              inputsRef.current[i] = el\n            }}\n            // the name goes on the first box only, so the form's scroll-to-error can target it\n            name={i === 0 ? name : undefined}\n            type=\"text\"\n            inputMode={type === 'numeric' ? 'numeric' : 'text'}\n            autoComplete={i === 0 ? 'one-time-code' : 'off'}\n            aria-label={t('otpField.digit', { index: i + 1, total: length })}\n            className={clsx(styles.box, char !== '' && styles.filled)}\n            value={char}\n            placeholder={placeholder}\n            disabled={disabled}\n            onChange={(e) => handleChange(i, e.target.value)}\n            onKeyDown={(e) => handleKeyDown(i, e)}\n            onPaste={(e) => handlePaste(i, e)}\n            onFocus={(e) => e.target.select()}\n          />\n        ))}\n      </div>\n\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["PATTERN","toChars","value","length","out","OtpField","forwardRef","type","defaultValue","onChange","onComplete","name","label","helperText","error","required","disabled","autoFocus","placeholder","size","align","color","className","style","ref","t","useT","helperId","useId","allowed","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","currentValue","resolvedError","resolvedHelperText","chars","inputsRef","useRef","useEffect","_a","focusBox","i","el","commit","nextChars","next","c","handleChange","index","raw","filtered","k","ch","handleKeyDown","event","handlePaste","handleBlur","jsxs","clsx","fieldStyles","jsx","Typography","styles","char","e"],"mappings":"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"}

package/dist/PageLayout-Bt6U_80d.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageLayout-Bt6U_80d.cjs","sources":["../src/components/PageLayout/PageLayout.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from 'react'\nimport { useRouter, type LinkProps } from '@tanstack/react-router'\nimport { useT } from '../../theme'\nimport { Card, type CardProps } from '../Card'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Typography } from '../Typography'\nimport styles from './PageLayout.module.css'\n\n/** Something React would actually render — `null` / `undefined` / booleans / `''` render nothing (e.g. the\n * `pageActions={isDirty && <Button…/>}` pattern), so they mustn't produce an empty heading row. */\nconst renders = (node: ReactNode): boolean =>\n  node != null && typeof node !== 'boolean' && node !== ''\n\n/** PageLayout is a flat `Card`, so it gains all of Card's slots minus the `flat` toggle (always flat). */\nexport interface PageLayoutProps extends Omit<CardProps, 'flat'> {\n  /**\n   * The page heading — an `h2` in the row **above** the card (the card's own header — `icon` / `title` /\n   * `subtitle` / `actions` — is separate and unchanged). Shown only when given.\n   */\n  pageTitle?: ReactNode\n  /**\n   * Anything for the right end of the heading row — usually a few `size=\"sm\"` `Button`s, built in the page with\n   * its own state. Rendered as given (no automatic phone collapse); on a narrow screen the row wraps, so they\n   * drop below the title.\n   */\n  pageActions?: ReactNode\n  /**\n   * A back button left of the heading. `true` → the browser history back; a **path** string → navigates there\n   * (deterministic on a deep link / refresh, e.g. `back={`/users/${id}`}`). Omitted / `false` → none.\n   */\n  back?: boolean | string\n}\n\n/**\n * The container a page's body sits in — a **flat `Card`** (no shadow, the page `background` color), so it\n * blends with the shell while the Cards/inputs placed inside it read as elevated. Being a Card, it has the full\n * Card anatomy: an optional card header (`icon` + `title` + `subtitle` + `actions`), the body (`children`), a\n * `footer` / `footerStart` (`stickyFooter`), and `collapsible`. Above the card, an optional **page heading row**\n * — `back` (button) + `pageTitle` (`h2`) + `pageActions` (right) — shown only when one of them is given; the\n * shell itself renders no page title. Rendered by the consumer inside each route, below the shell's breadcrumbs:\n * `<PageLayout pageTitle=\"Users\" pageActions={<Button size=\"sm\">Add New</Button>}>…</PageLayout>`. The ref\n * points at the card. Styling uses `--tz-*` tokens only.\n */\nexport const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(function PageLayout(\n  { pageTitle, pageActions, back, ...props },\n  ref,\n) {\n  const t = useT()\n  // lenient: outside a RouterProvider the back button falls back to the browser's own history / location\n  const router = useRouter({ warn: false })\n  const goBack =\n    back === true\n      ? () => (router ? router.history.back() : window.history.back())\n      : typeof back === 'string' && back\n        ? () =>\n            router\n              ? void router.navigate({ to: back as LinkProps['to'] })\n              : window.location.assign(back)\n        : undefined\n  const showTitle = renders(pageTitle)\n  const showActions = renders(pageActions)\n  const hasHeading = showTitle || showActions || goBack != null\n\n  return (\n    <>\n      {hasHeading ? (\n        <div className={styles.heading}>\n          {goBack ? (\n            <IconButton\n              aria-label={t('pageTitle.back')}\n              variant=\"filled\"\n              color=\"accent\"\n              size=\"sm\"\n              onClick={goBack}\n            >\n              <Icon name=\"ArrowLeft\" />\n            </IconButton>\n          ) : null}\n          {showTitle ? (\n            <Typography variant=\"h2\" className={styles.title}>\n              {pageTitle}\n            </Typography>\n          ) : null}\n          {showActions ? <div className={styles.actions}>{pageActions}</div> : null}\n        </div>\n      ) : null}\n      <Card ref={ref} flat {...props} />\n    </>\n  )\n})\n"],"names":["renders","node","PageLayout","forwardRef","pageTitle","pageActions","back","props","ref","t","useT","router","useRouter","goBack","showTitle","showActions","hasHeading","jsxs","Fragment","styles","jsx","IconButton","Icon","Typography","Card"],"mappings":"mYAWMA,EAAWC,GACfA,GAAQ,MAAQ,OAAOA,GAAS,WAAaA,IAAS,GAgC3CC,EAAaC,EAAAA,WAA4C,SACpE,CAAE,UAAAC,EAAW,YAAAC,EAAa,KAAAC,EAAM,GAAGC,CAAA,EACnCC,EACA,CACA,MAAMC,EAAIC,EAAAA,KAAA,EAEJC,EAASC,EAAAA,UAAU,CAAE,KAAM,GAAO,EAClCC,EACJP,IAAS,GACL,IAAOK,EAASA,EAAO,QAAQ,KAAA,EAAS,OAAO,QAAQ,KAAA,EACvD,OAAOL,GAAS,UAAYA,EAC1B,IACEK,EACI,KAAKA,EAAO,SAAS,CAAE,GAAIL,CAAA,CAAyB,EACpD,OAAO,SAAS,OAAOA,CAAI,EACjC,OACFQ,EAAYd,EAAQI,CAAS,EAC7BW,EAAcf,EAAQK,CAAW,EACjCW,EAAaF,GAAaC,GAAeF,GAAU,KAEzD,OACEI,EAAAA,KAAAC,WAAA,CACG,SAAA,CAAAF,EACCC,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAO,QACpB,SAAA,CAAAN,EACCO,EAAAA,IAACC,EAAAA,WAAA,CACC,aAAYZ,EAAE,gBAAgB,EAC9B,QAAQ,SACR,MAAM,SACN,KAAK,KACL,QAASI,EAET,SAAAO,EAAAA,IAACE,EAAAA,KAAA,CAAK,KAAK,WAAA,CAAY,CAAA,CAAA,EAEvB,KACHR,QACES,aAAA,CAAW,QAAQ,KAAK,UAAWJ,EAAO,MACxC,SAAAf,CAAA,CACH,EACE,KACHW,EAAcK,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAO,QAAU,WAAY,EAAS,IAAA,CAAA,CACvE,EACE,WACHK,EAAAA,KAAA,CAAK,IAAAhB,EAAU,KAAI,GAAE,GAAGD,CAAA,CAAO,CAAA,EAClC,CAEJ,CAAC"}

package/dist/PageLayout-Df1SOlr7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageLayout-Df1SOlr7.js","sources":["../src/components/PageLayout/PageLayout.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from 'react'\nimport { useRouter, type LinkProps } from '@tanstack/react-router'\nimport { useT } from '../../theme'\nimport { Card, type CardProps } from '../Card'\nimport { Icon } from '../Icon'\nimport { IconButton } from '../IconButton'\nimport { Typography } from '../Typography'\nimport styles from './PageLayout.module.css'\n\n/** Something React would actually render — `null` / `undefined` / booleans / `''` render nothing (e.g. the\n * `pageActions={isDirty && <Button…/>}` pattern), so they mustn't produce an empty heading row. */\nconst renders = (node: ReactNode): boolean =>\n  node != null && typeof node !== 'boolean' && node !== ''\n\n/** PageLayout is a flat `Card`, so it gains all of Card's slots minus the `flat` toggle (always flat). */\nexport interface PageLayoutProps extends Omit<CardProps, 'flat'> {\n  /**\n   * The page heading — an `h2` in the row **above** the card (the card's own header — `icon` / `title` /\n   * `subtitle` / `actions` — is separate and unchanged). Shown only when given.\n   */\n  pageTitle?: ReactNode\n  /**\n   * Anything for the right end of the heading row — usually a few `size=\"sm\"` `Button`s, built in the page with\n   * its own state. Rendered as given (no automatic phone collapse); on a narrow screen the row wraps, so they\n   * drop below the title.\n   */\n  pageActions?: ReactNode\n  /**\n   * A back button left of the heading. `true` → the browser history back; a **path** string → navigates there\n   * (deterministic on a deep link / refresh, e.g. `back={`/users/${id}`}`). Omitted / `false` → none.\n   */\n  back?: boolean | string\n}\n\n/**\n * The container a page's body sits in — a **flat `Card`** (no shadow, the page `background` color), so it\n * blends with the shell while the Cards/inputs placed inside it read as elevated. Being a Card, it has the full\n * Card anatomy: an optional card header (`icon` + `title` + `subtitle` + `actions`), the body (`children`), a\n * `footer` / `footerStart` (`stickyFooter`), and `collapsible`. Above the card, an optional **page heading row**\n * — `back` (button) + `pageTitle` (`h2`) + `pageActions` (right) — shown only when one of them is given; the\n * shell itself renders no page title. Rendered by the consumer inside each route, below the shell's breadcrumbs:\n * `<PageLayout pageTitle=\"Users\" pageActions={<Button size=\"sm\">Add New</Button>}>…</PageLayout>`. The ref\n * points at the card. Styling uses `--tz-*` tokens only.\n */\nexport const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(function PageLayout(\n  { pageTitle, pageActions, back, ...props },\n  ref,\n) {\n  const t = useT()\n  // lenient: outside a RouterProvider the back button falls back to the browser's own history / location\n  const router = useRouter({ warn: false })\n  const goBack =\n    back === true\n      ? () => (router ? router.history.back() : window.history.back())\n      : typeof back === 'string' && back\n        ? () =>\n            router\n              ? void router.navigate({ to: back as LinkProps['to'] })\n              : window.location.assign(back)\n        : undefined\n  const showTitle = renders(pageTitle)\n  const showActions = renders(pageActions)\n  const hasHeading = showTitle || showActions || goBack != null\n\n  return (\n    <>\n      {hasHeading ? (\n        <div className={styles.heading}>\n          {goBack ? (\n            <IconButton\n              aria-label={t('pageTitle.back')}\n              variant=\"filled\"\n              color=\"accent\"\n              size=\"sm\"\n              onClick={goBack}\n            >\n              <Icon name=\"ArrowLeft\" />\n            </IconButton>\n          ) : null}\n          {showTitle ? (\n            <Typography variant=\"h2\" className={styles.title}>\n              {pageTitle}\n            </Typography>\n          ) : null}\n          {showActions ? <div className={styles.actions}>{pageActions}</div> : null}\n        </div>\n      ) : null}\n      <Card ref={ref} flat {...props} />\n    </>\n  )\n})\n"],"names":["renders","node","PageLayout","forwardRef","pageTitle","pageActions","back","props","ref","t","useT","router","useRouter","goBack","showTitle","showActions","hasHeading","jsxs","Fragment","styles","jsx","IconButton","Icon","Typography","Card"],"mappings":";;;;;;;;;;;;GAWMA,IAAU,CAACC,MACfA,KAAQ,QAAQ,OAAOA,KAAS,aAAaA,MAAS,IAgC3CC,IAAaC,EAA4C,SACpE,EAAE,WAAAC,GAAW,aAAAC,GAAa,MAAAC,GAAM,GAAGC,EAAA,GACnCC,GACA;AACA,QAAMC,IAAIC,EAAA,GAEJC,IAASC,EAAU,EAAE,MAAM,IAAO,GAClCC,IACJP,MAAS,KACL,MAAOK,IAASA,EAAO,QAAQ,KAAA,IAAS,OAAO,QAAQ,KAAA,IACvD,OAAOL,KAAS,YAAYA,IAC1B,MACEK,IACI,KAAKA,EAAO,SAAS,EAAE,IAAIL,EAAA,CAAyB,IACpD,OAAO,SAAS,OAAOA,CAAI,IACjC,QACFQ,IAAYd,EAAQI,CAAS,GAC7BW,IAAcf,EAAQK,CAAW,GACjCW,IAAaF,KAAaC,KAAeF,KAAU;AAEzD,SACE,gBAAAI,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAF,IACC,gBAAAC,EAAC,OAAA,EAAI,WAAWE,EAAO,SACpB,UAAA;AAAA,MAAAN,IACC,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,cAAYZ,EAAE,gBAAgB;AAAA,UAC9B,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,MAAK;AAAA,UACL,SAASI;AAAA,UAET,UAAA,gBAAAO,EAACE,GAAA,EAAK,MAAK,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA,IAEvB;AAAA,MACHR,sBACES,GAAA,EAAW,SAAQ,MAAK,WAAWJ,EAAO,OACxC,UAAAf,EAAA,CACH,IACE;AAAA,MACHW,IAAc,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,SAAU,aAAY,IAAS;AAAA,IAAA,EAAA,CACvE,IACE;AAAA,sBACHK,GAAA,EAAK,KAAAhB,GAAU,MAAI,IAAE,GAAGD,EAAA,CAAO;AAAA,EAAA,GAClC;AAEJ,CAAC;"}

package/dist/Pagination-DDMq_7OZ.js

@@ -1,139 +0,0 @@
-import { jsx as r, jsxs as O } from "react/jsx-runtime";
-import { forwardRef as Q, useState as U } from "react";
-import { clsx as d } from "clsx";
-import { b as V } from "./Icon-D5TxgfCc.js";
-import { a as W } from "./ConfigProvider-Bgu85MsI.js";
-const v = (s, i) => Array.from({ length: Math.max(i - s + 1, 0) }, (l, a) => s + a);
-function X({
-  count: s,
-  page: i,
-  siblingCount: l = 1,
-  boundaryCount: a = 1
-}) {
-  if (s <= 0) return [];
-  const o = v(1, Math.min(a, s)), g = v(Math.max(s - a + 1, a + 1), s), p = Math.max(
-    Math.min(i - l, s - a - l * 2 - 1),
-    a + 2
-  ), _ = Math.min(
-    Math.max(i + l, a + l * 2 + 2),
-    g.length > 0 ? g[0] - 2 : s - 1
-  );
-  return [
-    ...o,
-    // A start ellipsis, OR the single page that sits between the start boundary and the siblings.
-    ...p > a + 2 ? ["start-ellipsis"] : a + 1 < s - a ? [a + 1] : [],
-    ...v(p, _),
-    // An end ellipsis, OR the single page between the siblings and the end boundary.
-    ..._ < s - a - 1 ? ["end-ellipsis"] : s - a > a ? [s - a] : [],
-    ...g
-  ];
-}
-const Y = "_pagination_5gbvi_3", Z = "_list_5gbvi_8", y = "_item_5gbvi_18", u = "_sm_5gbvi_28", C = "_md_5gbvi_33", aa = "_lg_5gbvi_38", sa = "_page_5gbvi_45", ea = "_selected_5gbvi_64", ia = "_outlined_5gbvi_80", ta = "_rounded_5gbvi_96", la = "_arrow_5gbvi_26", na = "_flip_5gbvi_107", ra = "_ellipsis_5gbvi_112", e = {
-  pagination: Y,
-  list: Z,
-  item: y,
-  sm: u,
-  md: C,
-  lg: aa,
-  page: sa,
-  selected: ea,
-  outlined: ia,
-  rounded: ta,
-  arrow: la,
-  flip: na,
-  ellipsis: ra
-}, w = (s, i, l) => Math.min(Math.max(s, i), l), _a = Q(function({
-  count: i,
-  page: l,
-  defaultPage: a = 1,
-  onChange: o,
-  siblingCount: g = 1,
-  boundaryCount: p = 1,
-  showFirstButton: _ = !1,
-  showLastButton: $ = !1,
-  hidePrevButton: z = !1,
-  hideNextButton: A = !1,
-  variant: S = "outlined",
-  size: h = "md",
-  color: b = "accent",
-  rounded: j = !1,
-  disabled: x = !1,
-  className: k,
-  style: I,
-  "aria-label": L = "Pagination",
-  ...R
-}, E) {
-  const M = l !== void 0, [T, q] = U(a), N = Math.max(i, 1), n = w(M ? l : T, 1, N), P = (t) => {
-    const c = w(t, 1, N);
-    c !== n && (M || q(c), o == null || o(c));
-  }, m = W(), B = X({ count: i, page: n, siblingCount: g, boundaryCount: p }), D = {
-    "--tz-btn-rgb": `var(--tz-color-${b}-rgb)`,
-    "--tz-btn-on": `var(--tz-color-${b}-contrast, #fff)`,
-    ...I
-  }, f = (t, c, F, G, H, J, K = !1) => H ? null : /* @__PURE__ */ r("li", { className: e.item, children: /* @__PURE__ */ r(
-    "button",
-    {
-      type: "button",
-      className: d(e.page, e.arrow),
-      "aria-label": F,
-      disabled: x || J,
-      onClick: () => P(G),
-      children: /* @__PURE__ */ r(V, { name: c, size: h, className: K ? e.flip : void 0 })
-    }
-  ) }, t);
-  return /* @__PURE__ */ r(
-    "nav",
-    {
-      ref: E,
-      "aria-label": L,
-      className: d(
-        e.pagination,
-        e[S],
-        e[h],
-        j && e.rounded,
-        k
-      ),
-      style: D,
-      ...R,
-      children: /* @__PURE__ */ O("ul", { className: e.list, children: [
-        _ && f("first", "Previous", m("pagination.first"), 1, !1, n <= 1),
-        f(
-          "prev",
-          "ArrowLeft",
-          m("pagination.previous"),
-          n - 1,
-          z,
-          n <= 1
-        ),
-        B.map(
-          (t, c) => typeof t == "number" ? /* @__PURE__ */ r("li", { className: e.item, children: /* @__PURE__ */ r(
-            "button",
-            {
-              type: "button",
-              className: d(e.page, t === n && e.selected),
-              "aria-label": m("pagination.page", { page: t }),
-              "aria-current": t === n ? "page" : void 0,
-              disabled: x,
-              onClick: () => P(t),
-              children: t
-            }
-          ) }, t) : /* @__PURE__ */ r("li", { className: e.item, "aria-hidden": !0, children: /* @__PURE__ */ r("span", { className: e.ellipsis, children: "…" }) }, `${t}-${c}`)
-        ),
-        f(
-          "next",
-          "ArrowLeft",
-          m("pagination.next"),
-          n + 1,
-          A,
-          n >= i,
-          !0
-        ),
-        $ && f("last", "Next", m("pagination.last"), i, !1, n >= i)
-      ] })
-    }
-  );
-});
-export {
-  _a as P
-};
-//# sourceMappingURL=Pagination-DDMq_7OZ.js.map

package/dist/Pagination-DDMq_7OZ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pagination-DDMq_7OZ.js","sources":["../src/components/Pagination/paginationRange.ts","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/** A gap placeholder rendered as `…` — at the start (`1 … 4`) or end (`6 … 10`) of the range. */\nexport type PaginationEllipsis = 'start-ellipsis' | 'end-ellipsis'\n\n/** One item in a pagination range: a 1-based page number, or an ellipsis placeholder. */\nexport type PaginationItem = number | PaginationEllipsis\n\n/** Inputs for {@link paginationRange}. */\nexport interface PaginationRangeOptions {\n  /** Total number of pages. */\n  count: number\n  /** Current page (1-based). */\n  page: number\n  /** Pages shown on each side of the current page. Defaults to `1`. */\n  siblingCount?: number\n  /** Pages always shown at the start and end. Defaults to `1`. */\n  boundaryCount?: number\n}\n\n/** Inclusive integer range `[start, end]` (empty when `end < start`). */\nconst range = (start: number, end: number): number[] =>\n  Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i)\n\n/**\n * Build the page-item sequence for a pager — the boundary pages, the current page with its siblings,\n * and `start`/`end` ellipses where pages are skipped (the classic `1 … 4 5 6 … 10`). Pure and\n * framework-free so it can be unit-tested in isolation and reused. Assumes `1 <= page <= count`.\n */\nexport function paginationRange({\n  count,\n  page,\n  siblingCount = 1,\n  boundaryCount = 1,\n}: PaginationRangeOptions): PaginationItem[] {\n  if (count <= 0) return []\n\n  // Pages pinned at each edge.\n  const startPages = range(1, Math.min(boundaryCount, count))\n  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count)\n\n  // The window of pages around the current one, clamped so it never overlaps the boundaries.\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  )\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0] - 2 : count - 1,\n  )\n\n  return [\n    ...startPages,\n    // A start ellipsis, OR the single page that sits between the start boundary and the siblings.\n    ...(siblingsStart > boundaryCount + 2\n      ? (['start-ellipsis'] as PaginationItem[])\n      : boundaryCount + 1 < count - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n    ...range(siblingsStart, siblingsEnd),\n    // An end ellipsis, OR the single page between the siblings and the end boundary.\n    ...(siblingsEnd < count - boundaryCount - 1\n      ? (['end-ellipsis'] as PaginationItem[])\n      : count - boundaryCount > boundaryCount\n        ? [count - boundaryCount]\n        : []),\n    ...endPages,\n  ]\n}\n","import {\n  forwardRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { Icon, type IconName } from '../Icon'\nimport { useT, type ThemeColor } from '../../theme'\nimport { paginationRange } from './paginationRange'\nimport styles from './Pagination.module.css'\n\nexport type PaginationVariant = 'outlined' | 'text'\nexport type PaginationSize = 'sm' | 'md' | 'lg'\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'onChange'> {\n  /** Total number of pages (required). From a row count, pass `Math.ceil(total / pageSize)`. */\n  count: number\n  /** Controlled current page (1-based). */\n  page?: number\n  /** Initial page for uncontrolled use (1-based). Defaults to `1`. */\n  defaultPage?: number\n  /** Fires with the next page (1-based) when a page or arrow is activated. */\n  onChange?: (page: number) => void\n  /** Pages shown on each side of the current page. Defaults to `1`. */\n  siblingCount?: number\n  /** Pages always shown at the start and end. Defaults to `1`. */\n  boundaryCount?: number\n  /** Show a jump-to-first-page button before the previous arrow. Defaults to `false`. */\n  showFirstButton?: boolean\n  /** Show a jump-to-last-page button after the next arrow. Defaults to `false`. */\n  showLastButton?: boolean\n  /** Hide the previous-page arrow. Defaults to `false`. */\n  hidePrevButton?: boolean\n  /** Hide the next-page arrow. Defaults to `false`. */\n  hideNextButton?: boolean\n  /** Item style: `outlined` (bordered boxes, default) or `text` (borderless). */\n  variant?: PaginationVariant\n  /** Control size — sets the box, font, and icon sizes. Defaults to `md`. */\n  size?: PaginationSize\n  /** Theme palette token that tints the selected page. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Render circular page buttons instead of rounded rectangles. Defaults to `false`. */\n  rounded?: boolean\n  /** Disable the whole control. Defaults to `false`. */\n  disabled?: boolean\n}\n\nconst clamp = (n: number, lo: number, hi: number) => Math.min(Math.max(n, lo), hi)\n\n/**\n * A page navigator — previous/next arrows around a numbered range with `…` gaps (`1 … 4 5 6 … 10`),\n * the classic pager. Reusable across tables, lists, and galleries: drive it with `count` (total\n * pages) + `page`/`onChange`, computing `count` as `Math.ceil(total / pageSize)`. The selected page\n * is tinted via the shared `--tz-btn-rgb` pattern; unselected items are bordered (`outlined`) or\n * borderless (`text`). Controlled (`page` + `onChange`) or uncontrolled (`defaultPage`).\n */\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(\n  {\n    count,\n    page,\n    defaultPage = 1,\n    onChange,\n    siblingCount = 1,\n    boundaryCount = 1,\n    showFirstButton = false,\n    showLastButton = false,\n    hidePrevButton = false,\n    hideNextButton = false,\n    variant = 'outlined',\n    size = 'md',\n    color = 'accent',\n    rounded = false,\n    disabled = false,\n    className,\n    style,\n    'aria-label': ariaLabel = 'Pagination',\n    ...props\n  },\n  ref,\n) {\n  const isControlled = page !== undefined\n  const [internal, setInternal] = useState(defaultPage)\n  const lastPage = Math.max(count, 1)\n  const current = clamp(isControlled ? page! : internal, 1, lastPage)\n\n  const go = (next: number) => {\n    const target = clamp(next, 1, lastPage)\n    if (target === current) return\n    if (!isControlled) setInternal(target)\n    onChange?.(target)\n  }\n\n  const t = useT()\n  const items = paginationRange({ count, page: current, siblingCount, boundaryCount })\n\n  // The selected fill + its readable text color, derived once via the shared button-tint vars.\n  const rootStyle = {\n    '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n    '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n    ...style,\n  } as CSSProperties\n\n  // An arrow / jump control. `flip` mirrors the (left-pointing) icon to face right — the icon set has\n  // no matching plain right arrow, so the next/last glyphs are the left ones flipped for symmetry.\n  const control = (\n    key: string,\n    icon: IconName,\n    label: string,\n    target: number,\n    hidden: boolean,\n    atBound: boolean,\n    flip = false,\n  ): ReactNode =>\n    hidden ? null : (\n      <li key={key} className={styles.item}>\n        <button\n          type=\"button\"\n          className={clsx(styles.page, styles.arrow)}\n          aria-label={label}\n          disabled={disabled || atBound}\n          onClick={() => go(target)}\n        >\n          <Icon name={icon} size={size} className={flip ? styles.flip : undefined} />\n        </button>\n      </li>\n    )\n\n  return (\n    <nav\n      ref={ref}\n      aria-label={ariaLabel}\n      className={clsx(\n        styles.pagination,\n        styles[variant],\n        styles[size],\n        rounded && styles.rounded,\n        className,\n      )}\n      style={rootStyle}\n      {...props}\n    >\n      <ul className={styles.list}>\n        {showFirstButton &&\n          control('first', 'Previous', t('pagination.first'), 1, false, current <= 1)}\n        {control(\n          'prev',\n          'ArrowLeft',\n          t('pagination.previous'),\n          current - 1,\n          hidePrevButton,\n          current <= 1,\n        )}\n        {items.map((item, i) =>\n          typeof item === 'number' ? (\n            <li key={item} className={styles.item}>\n              <button\n                type=\"button\"\n                className={clsx(styles.page, item === current && styles.selected)}\n                aria-label={t('pagination.page', { page: item })}\n                aria-current={item === current ? 'page' : undefined}\n                disabled={disabled}\n                onClick={() => go(item)}\n              >\n                {item}\n              </button>\n            </li>\n          ) : (\n            <li key={`${item}-${i}`} className={styles.item} aria-hidden>\n              <span className={styles.ellipsis}>…</span>\n            </li>\n          ),\n        )}\n        {control(\n          'next',\n          'ArrowLeft',\n          t('pagination.next'),\n          current + 1,\n          hideNextButton,\n          current >= count,\n          true,\n        )}\n        {showLastButton &&\n          control('last', 'Next', t('pagination.last'), count, false, current >= count)}\n      </ul>\n    </nav>\n  )\n})\n"],"names":["range","start","end","_","i","paginationRange","count","page","siblingCount","boundaryCount","startPages","endPages","siblingsStart","siblingsEnd","clamp","n","lo","hi","Pagination","forwardRef","defaultPage","onChange","showFirstButton","showLastButton","hidePrevButton","hideNextButton","variant","size","color","rounded","disabled","className","style","ariaLabel","props","ref","isControlled","internal","setInternal","useState","lastPage","current","go","next","target","t","useT","items","rootStyle","control","key","icon","label","hidden","atBound","flip","jsx","styles","clsx","Icon","jsxs","item"],"mappings":"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"}

package/dist/Pagination-UMeckhmY.cjs

@@ -1,2 +0,0 @@
-"use strict";const r=require("react/jsx-runtime"),P=require("react"),d=require("clsx"),Q=require("./Icon-B6lz-V0A.cjs"),U=require("./ConfigProvider-DELhJlqo.cjs"),v=(e,a)=>Array.from({length:Math.max(a-e+1,0)},(l,s)=>e+s);function V({count:e,page:a,siblingCount:l=1,boundaryCount:s=1}){if(e<=0)return[];const o=v(1,Math.min(s,e)),g=v(Math.max(e-s+1,s+1),e),p=Math.max(Math.min(a-l,e-s-l*2-1),s+2),m=Math.min(Math.max(a+l,s+l*2+2),g.length>0?g[0]-2:e-1);return[...o,...p>s+2?["start-ellipsis"]:s+1<e-s?[s+1]:[],...v(p,m),...m<e-s-1?["end-ellipsis"]:e-s>s?[e-s]:[],...g]}const W="_pagination_5gbvi_3",X="_list_5gbvi_8",Y="_item_5gbvi_18",Z="_sm_5gbvi_28",u="_md_5gbvi_33",y="_lg_5gbvi_38",C="_page_5gbvi_45",ss="_selected_5gbvi_64",es="_outlined_5gbvi_80",is="_rounded_5gbvi_96",as="_arrow_5gbvi_26",ts="_flip_5gbvi_107",ls="_ellipsis_5gbvi_112",i={pagination:W,list:X,item:Y,sm:Z,md:u,lg:y,page:C,selected:ss,outlined:es,rounded:is,arrow:as,flip:ts,ellipsis:ls},w=(e,a,l)=>Math.min(Math.max(e,a),l),ns=P.forwardRef(function({count:a,page:l,defaultPage:s=1,onChange:o,siblingCount:g=1,boundaryCount:p=1,showFirstButton:m=!1,showLastButton:q=!1,hidePrevButton:$=!1,hideNextButton:z=!1,variant:A="outlined",size:x="md",color:h="accent",rounded:I=!1,disabled:b=!1,className:R,style:S,"aria-label":k="Pagination",...L},E){const j=l!==void 0,[T,B]=P.useState(s),M=Math.max(a,1),n=w(j?l:T,1,M),N=t=>{const c=w(t,1,M);c!==n&&(j||B(c),o==null||o(c))},_=U.useT(),D=V({count:a,page:n,siblingCount:g,boundaryCount:p}),F={"--tz-btn-rgb":`var(--tz-color-${h}-rgb)`,"--tz-btn-on":`var(--tz-color-${h}-contrast, #fff)`,...S},f=(t,c,G,H,J,K,O=!1)=>J?null:r.jsx("li",{className:i.item,children:r.jsx("button",{type:"button",className:d.clsx(i.page,i.arrow),"aria-label":G,disabled:b||K,onClick:()=>N(H),children:r.jsx(Q.Icon,{name:c,size:x,className:O?i.flip:void 0})})},t);return r.jsx("nav",{ref:E,"aria-label":k,className:d.clsx(i.pagination,i[A],i[x],I&&i.rounded,R),style:F,...L,children:r.jsxs("ul",{className:i.list,children:[m&&f("first","Previous",_("pagination.first"),1,!1,n<=1),f("prev","ArrowLeft",_("pagination.previous"),n-1,$,n<=1),D.map((t,c)=>typeof t=="number"?r.jsx("li",{className:i.item,children:r.jsx("button",{type:"button",className:d.clsx(i.page,t===n&&i.selected),"aria-label":_("pagination.page",{page:t}),"aria-current":t===n?"page":void 0,disabled:b,onClick:()=>N(t),children:t})},t):r.jsx("li",{className:i.item,"aria-hidden":!0,children:r.jsx("span",{className:i.ellipsis,children:"…"})},`${t}-${c}`)),f("next","ArrowLeft",_("pagination.next"),n+1,z,n>=a,!0),q&&f("last","Next",_("pagination.last"),a,!1,n>=a)]})})});exports.Pagination=ns;
-//# sourceMappingURL=Pagination-UMeckhmY.cjs.map