@mortenbrudvik/waveui 0.4.0 → 0.8.0

package/dist/components/navigation/Pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.mjs","names":["React","defaultGetItemAriaLabel","type","page","toCount","value","fallback","clampPage","pageCount","getPaginationRange","total","totalPages","current","currentPage","siblings","siblingCount","boundaries","boundaryCount","i","pages","sorted","a","b","range","fillGap","gap","after","before","previous","pageNumber","itemBaseClasses","cn","focusRing","disabledStyles","idleItemClasses","currentItemClasses","forcedColors","chevronClasses","Pagination","controlledPage","rest","rawPage","setPage","isControlled","useControllable","defaultCurrentPage","emitPageChange","useEventCallback","onPageChange","uncontrolled","storedClamp","setStoredClamp","basePage","warnOnce","notifiedClampRef","clamp","sizeClasses","size","atStart","atEnd","goTo","disabled","target","renderNavButton","paginationClassNames","getItemAriaLabel","focusableDisabledProps","unavailable","preventIfDisabled","partClassName","icon","className","showFirstLast","ChevronDoubleLeftIcon","showPreviousNext","ChevronLeftIcon","item","index","ChevronRightIcon","ChevronDoubleRightIcon"],"sources":["../../../src/components/navigation/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { paginationClassNames } from '../../lib/classNames';\nimport { focusableDisabledProps, preventIfDisabled } from '../../lib/aria';\nimport { warnOnce } from '../../lib/dev';\nimport {\n  ChevronDoubleLeftIcon,\n  ChevronDoubleRightIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '../../lib/icons';\nimport { disabledStyles, focusRing, forcedColors } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\n\n/** The kinds of Pagination buttons, as passed to `getItemAriaLabel`. */\nexport type PaginationItemType = 'first' | 'previous' | 'page' | 'next' | 'last';\n\n/** Properties for the Pagination component. */\nexport interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {\n  /**\n   * Controlled current page number (1-based). A value outside `1…totalPages` is shown clamped, and\n   * `onPageChange` is called once with the clamped page so the parent can resync. The prop stays\n   * authoritative: if the parent keeps the old value, it is shown again once it is back in range.\n   */\n  currentPage?: number;\n  /**\n   * Default current page for uncontrolled usage. When the current page falls outside\n   * `1…totalPages` (for example because `totalPages` shrinks), the clamped page is kept and\n   * reported once through `onPageChange`; it does not jump back when `totalPages` grows again.\n   * @default 1\n   */\n  defaultCurrentPage?: number;\n  /**\n   * Total number of pages. A fractional value is rounded down; `0`, a negative value or `NaN`\n   * renders nothing (non-integer values log a development warning).\n   */\n  totalPages: number;\n  /**\n   * Called with the target page whenever a page, First, Previous, Next or Last button is activated\n   * — also when the current page is activated again (0.4 semantics) — and once when the current\n   * page is clamped into `1…totalPages`.\n   */\n  onPageChange?: (page: number) => void;\n  /** Number of page buttons to show on each side of the current page.\n   * @default 1\n   */\n  siblingCount?: number;\n  /**\n   * Number of page buttons to always show at the start and end. With `0` no page is pinned there,\n   * and an ellipsis marks the pages before or after the shown range.\n   * @default 1\n   */\n  boundaryCount?: number;\n  /** Whether to show previous/next navigation buttons.\n   * @default true\n   */\n  showPreviousNext?: boolean;\n  /** Whether to show first/last page navigation buttons.\n   * @default false\n   */\n  showFirstLast?: boolean;\n  /**\n   * Whether the entire pagination control is disabled (every button gets the native `disabled`\n   * attribute). Boundary buttons that point at the current page are not natively disabled: they use\n   * `aria-disabled=\"true\"` and stay focusable.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Size of the pagination buttons.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * Accessible name of each button, for localization. `page` is the page the button navigates to\n   * (for `'page'` items, the page it shows); `selected` is `true` for the current page. Defaults:\n   * `'First page'`, `'Previous page'`, `` `Page ${page}` ``, `'Next page'`, `'Last page'`. The\n   * landmark itself is named with `aria-label` (default `'Pagination'`) or `aria-labelledby`.\n   */\n  getItemAriaLabel?: (type: PaginationItemType, page: number, selected: boolean) => string;\n  /** Ref to the root `<nav>` element. */\n  ref?: React.Ref<HTMLElement>;\n}\n\nfunction defaultGetItemAriaLabel(type: PaginationItemType, page: number): string {\n  switch (type) {\n    case 'first':\n      return 'First page';\n    case 'previous':\n      return 'Previous page';\n    case 'next':\n      return 'Next page';\n    case 'last':\n      return 'Last page';\n    default:\n      return `Page ${page}`;\n  }\n}\n\n/** A non-negative integer count, or `fallback` for `NaN`/`±Infinity`. */\nfunction toCount(value: number, fallback: number): number {\n  return Number.isFinite(value) ? Math.max(0, Math.floor(value)) : fallback;\n}\n\n/** `page` rounded down and clamped into `1…pageCount` (`NaN` → 1). */\nfunction clampPage(page: number, pageCount: number): number {\n  if (Number.isNaN(page)) return 1;\n  return Math.min(Math.max(1, Math.floor(page)), pageCount);\n}\n\n/**\n * The page items Pagination renders: page numbers and `'ellipsis'` markers, in order.\n *\n * Always shows `boundaryCount` pages at each end and `siblingCount` pages on each side of the\n * current page; a gap of exactly one page is filled with that page instead of an ellipsis. With\n * `boundaryCount` 0 no page is pinned at the ends, so a gap before the first or after the last\n * shown page gets an ellipsis too. When `totalPages` fits into those slots\n * (`2 × boundaryCount + 2 × siblingCount + 3`), every page is listed. `currentPage` is clamped\n * into `1…totalPages`; `totalPages < 1` returns `[]`.\n *\n * Exported from this module for tests and custom pagers; not part of the package barrel.\n *\n * @example getPaginationRange(20, 10) // [1, 'ellipsis', 9, 10, 11, 'ellipsis', 20]\n * @example getPaginationRange(20, 10, 1, 0) // ['ellipsis', 9, 10, 11, 'ellipsis']\n */\nexport function getPaginationRange(\n  totalPages: number,\n  currentPage: number,\n  siblingCount = 1,\n  boundaryCount = 1,\n): Array<number | 'ellipsis'> {\n  const total = toCount(totalPages, 0);\n  if (total < 1) return [];\n  const current = clampPage(currentPage, total);\n  const siblings = toCount(siblingCount, 1);\n  const boundaries = toCount(boundaryCount, 1);\n\n  // boundaries + siblings + current + 2 ellipsis slots\n  const totalSlots = boundaries * 2 + siblings * 2 + 3;\n  if (total <= totalSlots) {\n    return Array.from({ length: total }, (_, i) => i + 1);\n  }\n\n  const pages = new Set<number>();\n  for (let i = 1; i <= Math.min(boundaries, total); i++) pages.add(i);\n  for (let i = Math.max(1, total - boundaries + 1); i <= total; i++) pages.add(i);\n  for (let i = Math.max(1, current - siblings); i <= Math.min(total, current + siblings); i++) {\n    pages.add(i);\n  }\n  pages.add(current);\n\n  const sorted = Array.from(pages).sort((a, b) => a - b);\n  const range: Array<number | 'ellipsis'> = [];\n  /** Marks the pages between `before` and `after` (both exclusive). */\n  const fillGap = (before: number, after: number) => {\n    const gap = after - before;\n    if (gap === 2) {\n      // A single missing page: show it instead of an ellipsis.\n      range.push(before + 1);\n    } else if (gap > 2) {\n      range.push('ellipsis');\n    }\n  };\n  // The ends are virtual neighbours 0 and total + 1, so with `boundaryCount` 0 (no page pinned at\n  // an end) a gap before the first or after the last shown page is marked as well.\n  let previous = 0;\n  for (const pageNumber of sorted) {\n    fillGap(previous, pageNumber);\n    range.push(pageNumber);\n    previous = pageNumber;\n  }\n  fillGap(previous, total + 1);\n  return range;\n}\n\nconst itemBaseClasses = cn(\n  'inline-flex items-center justify-center rounded border cursor-pointer transition-colors motion-reduce:transition-none',\n  focusRing,\n  disabledStyles,\n);\n\nconst idleItemClasses =\n  'border-border bg-transparent text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:active:bg-subtle-pressed';\n\nconst currentItemClasses = cn(\n  'border-primary bg-primary text-primary-foreground',\n  forcedColors.selectedLeaf,\n);\n\n/**\n * Directional glyphs point the other way in right-to-left layouts (C-LOGICAL), by the glyph's own\n * direction: Tailwind's bare variant would also match inside an LTR subtree of an RTL page.\n */\nconst chevronClasses = 'wave-rtl:-scale-x-100';\n\n/**\n * Page navigation for paged content: page buttons with ellipses, optional Previous/Next and\n * First/Last buttons, inside a `<nav>` landmark named \"Pagination\" (override with `aria-label`).\n *\n * `onPageChange` is an event callback: it fires on every activation, including the current page.\n * Boundary buttons that point at the current page use `aria-disabled` and keep focus; the whole\n * control is disabled with `disabled`. Button names are localized with `getItemAriaLabel`.\n */\nconst Pagination = ({\n  currentPage: controlledPage,\n  defaultCurrentPage = 1,\n  totalPages,\n  onPageChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  showPreviousNext = true,\n  showFirstLast = false,\n  disabled = false,\n  size = 'medium',\n  getItemAriaLabel = defaultGetItemAriaLabel,\n  className,\n  ref,\n  ...rest\n}: PaginationProps) => {\n  // `isControlled` is useControllable's sticky mode: a pager that was ever controlled stays\n  // controlled, also when `currentPage` later becomes `undefined` (misuse; the hook warns and\n  // reports `defaultCurrentPage`, which is then clamped like a controlled value).\n  const [rawPage, setPage, isControlled] = useControllable(controlledPage, defaultCurrentPage);\n  const emitPageChange = useEventCallback(onPageChange);\n\n  const pageCount = toCount(totalPages, 0);\n  const uncontrolled = !isControlled;\n  // Uncontrolled: a clamp is stored, so the page does not jump back to the out-of-range value — and\n  // out of sync with the last `onPageChange` — when `totalPages` grows again. Navigation clears it.\n  // Controlled: the prop always wins.\n  const [storedClamp, setStoredClamp] = React.useState<number | null>(null);\n  const basePage = uncontrolled && storedClamp !== null ? storedClamp : rawPage;\n  const page = clampPage(basePage, Math.max(1, pageCount));\n  if (uncontrolled && pageCount >= 1 && !Object.is(page, basePage)) {\n    setStoredClamp(page);\n  }\n\n  React.useEffect(() => {\n    if (!Number.isInteger(totalPages)) {\n      warnOnce(\n        'Pagination:totalPages',\n        `Pagination: \\`totalPages\\` must be an integer, received ${String(totalPages)}. ` +\n          'Fractional values are rounded down; NaN and infinite values render nothing.',\n      );\n    }\n  }, [totalPages]);\n\n  // Tell the parent about a clamped page once per clamp (also under StrictMode's double effects). A\n  // stored uncontrolled clamp keeps `page !== rawPage`, so growing `totalPages` does not re-notify;\n  // neither does a pass through `totalPages={0}` (nothing rendered, the last clamp is kept).\n  const notifiedClampRef = React.useRef<string | null>(null);\n  React.useEffect(() => {\n    if (pageCount < 1) return;\n    if (Object.is(page, rawPage)) {\n      notifiedClampRef.current = null;\n      return;\n    }\n    const clamp = `${String(rawPage)}->${page}`;\n    if (notifiedClampRef.current === clamp) return;\n    notifiedClampRef.current = clamp;\n    emitPageChange(page);\n  }, [page, rawPage, pageCount, emitPageChange]);\n\n  if (pageCount < 1) return null;\n\n  const range = getPaginationRange(pageCount, page, siblingCount, boundaryCount);\n  const sizeClasses = size === 'small' ? 'h-7 w-7 text-caption-1' : 'h-8 w-8 text-body-1';\n  const atStart = page <= 1;\n  const atEnd = page >= pageCount;\n\n  /** Event callback semantics: every activation of an available button emits (C-NAMING). */\n  const goTo = (target: number) => {\n    if (disabled || target < 1 || target > pageCount) return;\n    setStoredClamp(null);\n    setPage(target);\n    emitPageChange(target);\n  };\n\n  const renderNavButton = (\n    type: Exclude<PaginationItemType, 'page'>,\n    target: number,\n    unavailable: boolean,\n    icon: React.ReactNode,\n    partClassName: string,\n  ) => (\n    <li className={paginationClassNames.listItem}>\n      <button\n        type=\"button\"\n        aria-label={getItemAriaLabel(type, target, false)}\n        disabled={disabled}\n        {...(disabled ? {} : focusableDisabledProps(unavailable))}\n        onClick={preventIfDisabled(unavailable, () => goTo(target))}\n        className={cn(partClassName, itemBaseClasses, sizeClasses, idleItemClasses)}\n      >\n        {icon}\n      </button>\n    </li>\n  );\n\n  return (\n    <nav\n      ref={ref}\n      aria-label=\"Pagination\"\n      {...rest}\n      className={cn(paginationClassNames.root, className)}\n    >\n      <ol className={cn(paginationClassNames.list, 'm-0 flex list-none items-center gap-1 p-0')}>\n        {showFirstLast &&\n          renderNavButton(\n            'first',\n            1,\n            atStart,\n            <ChevronDoubleLeftIcon className={chevronClasses} />,\n            paginationClassNames.firstButton,\n          )}\n        {showPreviousNext &&\n          renderNavButton(\n            'previous',\n            Math.max(1, page - 1),\n            atStart,\n            <ChevronLeftIcon className={chevronClasses} />,\n            paginationClassNames.previousButton,\n          )}\n\n        {range.map((item, index) =>\n          item === 'ellipsis' ? (\n            <li\n              key={index < range.length / 2 ? 'start-ellipsis' : 'end-ellipsis'}\n              aria-hidden=\"true\"\n              className={paginationClassNames.listItem}\n            >\n              <span\n                className={cn(\n                  paginationClassNames.ellipsis,\n                  'inline-flex items-center justify-center text-muted-foreground',\n                  sizeClasses,\n                )}\n              >\n                …\n              </span>\n            </li>\n          ) : (\n            <li key={item} className={paginationClassNames.listItem}>\n              <button\n                type=\"button\"\n                aria-label={getItemAriaLabel('page', item, item === page)}\n                aria-current={item === page ? 'page' : undefined}\n                disabled={disabled}\n                onClick={() => goTo(item)}\n                className={cn(\n                  paginationClassNames.pageButton,\n                  itemBaseClasses,\n                  sizeClasses,\n                  item === page ? currentItemClasses : idleItemClasses,\n                )}\n              >\n                {item}\n              </button>\n            </li>\n          ),\n        )}\n\n        {showPreviousNext &&\n          renderNavButton(\n            'next',\n            Math.min(pageCount, page + 1),\n            atEnd,\n            <ChevronRightIcon className={chevronClasses} />,\n            paginationClassNames.nextButton,\n          )}\n        {showFirstLast &&\n          renderNavButton(\n            'last',\n            pageCount,\n            atEnd,\n            <ChevronDoubleRightIcon className={chevronClasses} />,\n            paginationClassNames.lastButton,\n          )}\n      </ol>\n    </nav>\n  );\n};\nPagination.displayName = 'Pagination';\n\nexport { Pagination };\n"],"mappings":"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"}

package/dist/components/navigation/Stepper.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useEventCallback.cjs"),s=require("../../hooks/useControllable.cjs"),c=require("../../hooks/useId.cjs"),l=require("../../lib/styles.cjs"),u=require("../../lib/icons.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=`Completed:`,m=`Error:`,h=[],g=()=>h;function _(){let e=new Map,t=new Set,n=h,r=()=>{if(n.length!==e.size)return!1;let t;for(let r of n){let n=e.get(r);if(!n||t&&!(t.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_FOLLOWING))return!1;t=n}return!0},i=()=>{if(r())return;let i=Array.from(e.entries()).sort(([,e],[,t])=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1).map(([e])=>e);i.length===n.length&&i.every((e,t)=>e===n[t])||(n=i,t.forEach(e=>e()))};return{register(t,n){return e.set(t,n),i(),()=>{e.get(t)===n&&e.delete(t),i()}},subscribe(e){return t.add(e),()=>{t.delete(e)}},getOrder:()=>n,sync:i}}var v=d.createContext(null),y=d.createContext(null),b=()=>{},x={activeStep:0,select:b,orientation:`horizontal`,linear:!1,order:h,childCount:0,completedLabel:p,errorLabel:m,register:()=>b,sync:b};function S(e){return d.useContext(v)||(r.reportMissingContext(e,`Stepper`),x)}function C(e){let t=0;return n.flattenChildren(e).map(({key:e,node:n})=>({key:e,node:n,slot:d.isValidElement(n)?t++:null}))}var w=`inline-flex items-center justify-center`,T=t.cn(`bg-success`,l.forcedColors.fill),E=`bg-border forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none`,D=({label:e,description:n,icon:r,disabled:o=!1,completed:s,error:p=!1,index:m,className:h,onClick:g,ref:_,...v})=>{let{activeStep:b,select:x,orientation:C,linear:D,order:O,childCount:k,completedLabel:A,errorLabel:j,register:M,sync:N}=S(`Stepper.Step`),P=d.useContext(y),F=c.useId(`wave-step`),I=`${F}-label`,L=`${F}-description`,R=d.useCallback(e=>e?M(F,e):void 0,[M,F]);d.useLayoutEffect(()=>{N()});let z=O.indexOf(F),B=m??(z===-1?P??0:z),V=B>=(z===-1?k:O.length)-1,H=B===b,U=s??B<b,W=!o&&(!D||B<=b+1),G=C===`horizontal`,K=e=>{if(!W){e.preventDefault();return}g?.(e),!e.defaultPrevented&&x(B)},q=e=>{e.target===e.currentTarget&&(e.key===`Enter`?(e.preventDefault(),e.currentTarget.click()):e.key===` `&&e.preventDefault())},J=e=>{e.target===e.currentTarget&&e.key===` `&&(e.preventDefault(),e.currentTarget.click())},Y=p?j:U?A:``,X=Y?`${Y} ${B+1}.`:`${B+1}.`,Z=!!r&&i.slotRendersContent(r),Q;Q=p?(0,f.jsx)(u.DismissIcon,{}):U&&!Z?(0,f.jsx)(u.CheckIcon,{}):Z?i.renderSlot(r,`span`,t.cn(a.stepperStepClassNames.icon,w),{"aria-hidden":!0}):(0,f.jsx)(`span`,{className:`text-caption-1 font-semibold`,children:B+1});let $=p?`text-error`:H?`text-primary`:U?`text-success`:`text-foreground`;return(0,f.jsx)(`li`,{ref:R,className:t.cn(a.stepperStepClassNames.listItem,`flex min-w-0`,G&&!V&&`flex-1`),children:(0,f.jsxs)(`div`,{ref:_,"data-active":H?``:void 0,"data-completed":U?``:void 0,"data-error":p?``:void 0,"data-disabled":o?``:void 0,...v,className:t.cn(a.stepperStepClassNames.root,G?`flex flex-1 items-center`:`flex flex-1 flex-col`,h),children:[(0,f.jsxs)(`div`,{role:`button`,tabIndex:W?0:-1,"aria-current":H?`step`:void 0,"aria-disabled":!W||void 0,"aria-labelledby":I,"aria-describedby":n?L:void 0,onClick:K,onKeyDown:q,onKeyUp:J,className:t.cn(a.stepperStepClassNames.button,`relative flex rounded`,G?`flex-col items-center gap-1`:`items-center gap-3`,l.focusRing,W?`cursor-pointer`:`cursor-default`,o&&`opacity-50`),children:[(0,f.jsx)(`span`,{"aria-hidden":`true`,className:t.cn(a.stepperStepClassNames.indicator,`flex size-8 shrink-0 items-center justify-center rounded-full border-2 transition-colors motion-reduce:transition-none`,p?`border-error bg-error-tint text-error-tint-foreground`:H?t.cn(`border-primary bg-primary text-primary-foreground`,l.forcedColors.selectedLeaf):U?`border-success bg-success-tint text-success-tint-foreground`:`border-border bg-background text-muted-foreground`),children:Q}),(0,f.jsxs)(`span`,{className:t.cn(`flex flex-col`,G&&`items-center text-center`),children:[(0,f.jsxs)(`span`,{id:I,className:t.cn(a.stepperStepClassNames.label,`font-semibold`,G?`text-caption-1 whitespace-nowrap`:`text-body-1`,$),children:[(0,f.jsx)(`span`,{className:`sr-only`,children:X}),` `,e]}),n&&(0,f.jsx)(`span`,{id:L,className:t.cn(a.stepperStepClassNames.description,`text-muted-foreground`,G?`text-caption-2 whitespace-nowrap`:`text-caption-1`),children:n})]})]}),!V&&(0,f.jsx)(`div`,{"data-wave-stepper-connector":``,"aria-hidden":`true`,className:t.cn(a.stepperStepClassNames.connector,`transition-colors motion-reduce:transition-none`,G?`mx-2 h-0.5 flex-1`:`my-1 ms-3.75 min-h-6 w-0.5`,U?T:E)})]})})};D.displayName=`Step`;var O=({activeStep:e,defaultActiveStep:n=0,onStepChange:r,orientation:i=`horizontal`,linear:c=!1,statusLabels:l,className:u,children:h,ref:b,...x})=>{let S=l?.completed??p,w=l?.error??m,[T,E]=s.useControllable(e,n),D=o.useEventCallback(r),O=d.useCallback(e=>{E(e),D(e)},[E,D]),[k]=d.useState(_),A=d.useSyncExternalStore(k.subscribe,k.getOrder,g),j=d.useRef(null);d.useEffect(()=>{let e=j.current;if(!e)return;let t=new MutationObserver(k.sync);return t.observe(e,{childList:!0,subtree:!0}),()=>t.disconnect()},[k]);let M=d.useMemo(()=>C(h),[h]),N=M.filter(e=>e.slot!==null).length,P=d.useMemo(()=>({activeStep:T,select:O,orientation:i,linear:c,order:A,childCount:N,completedLabel:S,errorLabel:w,register:k.register,sync:k.sync}),[T,O,i,c,A,N,S,w,k]),F=i===`horizontal`;return(0,f.jsx)(v.Provider,{value:P,children:(0,f.jsx)(`div`,{ref:b,role:`group`,"aria-label":`Progress`,"data-orientation":i,...x,className:t.cn(a.stepperClassNames.root,`flex`,F?`flex-row items-start`:`flex-col`,u),children:(0,f.jsx)(`ol`,{ref:j,role:`list`,className:t.cn(a.stepperClassNames.list,`m-0 flex list-none p-0`,F?`flex-1 flex-row items-start`:`flex-col`),children:M.map(e=>e.slot===null?e.node:(0,f.jsx)(y.Provider,{value:e.slot,children:e.node},e.key))})})})};O.displayName=`Stepper`;var k=Object.assign(O,{Step:D});exports.Stepper=k,exports.StepperStep=D;
+//# sourceMappingURL=Stepper.cjs.map

package/dist/components/navigation/Stepper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.cjs","names":["React","flattenChildren","cn","forcedColors","useId","slotRendersContent","DismissIcon","CheckIcon","renderSlot","stepperStepClassNames","focusRing","useControllable","useEventCallback","stepperClassNames","require_runtime","require_cn","require_children","require_dev","require_slot","require_classNames","require_useEventCallback","require_useControllable","require_useId","require_styles","require_icons","react","react_jsx_runtime","DEFAULT_COMPLETED_LABEL","DEFAULT_ERROR_LABEL","EMPTY_ORDER","getServerOrder","createStepRegistry","elements","listeners","order","isCurrent","previous","key","element","sync","next","a","b","i","listener","StepperContext","StepSlotContext","noop","INERT_CONTEXT","useStepperContext","componentName","numberChildren","slot","children","node","indicatorSlotClasses","connectorCompletedClasses","connectorPendingClasses","StepperStep","indexProp","rest","slotIndex","labelId","descriptionId","registerItem","register","position","index","isLast","childCount","isActive","activeStep","isCompleted","completed","isClickable","disabled","linear","horizontal","orientation","activate","event","onClick","select","handleKeyDown","handleKeyUp","status","error","errorLabel","completedLabel","statusText","hasIcon","icon","indicator","toneClass","className","description","label","StepperRoot","controlledStep","statusLabels","setActiveStep","defaultActiveStep","emitStepChange","onStepChange","step","registry","listRef","list","observer","items","item","context","Stepper"],"sources":["../../../src/components/navigation/Stepper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { stepperClassNames, stepperStepClassNames } from '../../lib/classNames';\nimport { reportMissingContext } from '../../lib/dev';\nimport { CheckIcon, DismissIcon } from '../../lib/icons';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Slot } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { Orientation } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\n\n/** Properties for the Stepper component. */\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Controlled index (0-based) of the currently active step. */\n  activeStep?: number;\n  /** Default active step index for uncontrolled usage.\n   * @default 0\n   */\n  defaultActiveStep?: number;\n  /**\n   * Called with the step index whenever a step is activated (click, Enter or Space) — also when the\n   * active step is activated again (0.4 semantics). Not called for disabled or unreachable steps.\n   */\n  onStepChange?: (step: number) => void;\n  /** Layout orientation of the stepper.\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n  /**\n   * Whether navigation is restricted to sequential steps: only steps up to the one after the active\n   * step can be activated; later steps are `aria-disabled` and leave the tab order.\n   * @default false\n   */\n  linear?: boolean;\n  /**\n   * Visually hidden status text read before the number of a completed or error step (\"Completed:\n   * 2. Profile\"), for localization: `{ completed: 'Fullført:', error: 'Feil:' }`. A label that is\n   * not given keeps its English default; `''` leaves that status out of the step names.\n   * @default { completed: 'Completed:', error: 'Error:' }\n   */\n  statusLabels?: { completed?: string; error?: string };\n  /** Ref to the root `<div>` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DEFAULT_COMPLETED_LABEL = 'Completed:';\nconst DEFAULT_ERROR_LABEL = 'Error:';\n\n/** Properties for the Step sub-component. */\nexport interface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Label text for the step. */\n  label: string;\n  /** Optional description text displayed below the label (the step button's description). */\n  description?: string;\n  /**\n   * Custom icon to display in the step indicator (`Slot<'span'>`: a node, or a slot object for full\n   * control). Decorative: rendered with `aria-hidden=\"true\"`; the step number stays in the name. A\n   * falsy icon (`''`, `0`) or a list of nothing is no icon: the step shows its number (or its check\n   * mark when completed).\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Whether the step is disabled and non-interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Whether the step is marked as completed. Defaults to `true` for steps before the active step. */\n  completed?: boolean;\n  /**\n   * Whether the step is in an error state.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Zero-based position of the step. Normally derived from the step's position in the Stepper\n   * (Fragments, conditional steps and wrapper components included); set it only to override that.\n   * In server HTML (and the first client render, before the steps register) each Stepper child\n   * counts as one step, so steps inside a wrapper component that renders more or fewer than one\n   * step are numbered correctly only after hydration; set `index` on them to pin the server HTML.\n   */\n  index?: number;\n  /** Ref to the step's root `<div>` (rendered inside the step's `<li>`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Step registry: a useId-keyed descendant list in DOM order\n// ---------------------------------------------------------------------------\n\nconst EMPTY_ORDER: readonly string[] = [];\nconst getServerOrder = () => EMPTY_ORDER;\n\ninterface StepRegistry {\n  /** Registers a step's list item under its key; returns the cleanup that unregisters it. */\n  register: (key: string, element: HTMLElement) => () => void;\n  subscribe: (listener: () => void) => () => void;\n  /** Keys of the registered steps in DOM order (a new array only when the order changed). */\n  getOrder: () => readonly string[];\n  /**\n   * Re-reads the DOM order and notifies subscribers when it changed. Cheap when nothing moved (one\n   * pass over adjacent pairs), so every Step calls it after each of its commits. A commit that\n   * re-renders all n steps (an `activeStep` change) therefore costs n passes, O(n²) position\n   * checks, and the root's observer adds one pass per list mutation (indicator swaps included):\n   * negligible for step counts a stepper can show. If that ever matters, coalesce the per-step calls\n   * into one pass per commit (a dirty flag set by the steps, flushed once) — keeping this per-step\n   * call or the observer as the path for commits in which the root does not re-render.\n   */\n  sync: () => void;\n}\n\nfunction createStepRegistry(): StepRegistry {\n  const elements = new Map<string, HTMLElement>();\n  const listeners = new Set<() => void>();\n  let order = EMPTY_ORDER;\n\n  /** Whether `order` still lists exactly the registered elements, in DOM order. */\n  const isCurrent = () => {\n    if (order.length !== elements.size) return false;\n    let previous: HTMLElement | undefined;\n    for (const key of order) {\n      const element = elements.get(key);\n      if (!element) return false;\n      if (\n        previous &&\n        !(previous.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING)\n      ) {\n        return false;\n      }\n      previous = element;\n    }\n    return true;\n  };\n\n  const sync = () => {\n    if (isCurrent()) return;\n    const next = Array.from(elements.entries())\n      .sort(([, a], [, b]) =>\n        a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1,\n      )\n      .map(([key]) => key);\n    if (next.length === order.length && next.every((key, i) => key === order[i])) return;\n    order = next;\n    listeners.forEach((listener) => listener());\n  };\n\n  return {\n    register(key, element) {\n      elements.set(key, element);\n      sync();\n      return () => {\n        if (elements.get(key) === element) elements.delete(key);\n        sync();\n      };\n    },\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n    getOrder: () => order,\n    sync,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Contexts\n// ---------------------------------------------------------------------------\n\ninterface StepperContextValue {\n  activeStep: number;\n  /** Activates a step: updates the (uncontrolled) state and calls `onStepChange`. */\n  select: (step: number) => void;\n  orientation: Orientation;\n  linear: boolean;\n  /** Registered step keys in DOM order (empty on the server and before the first commit). */\n  order: readonly string[];\n  /** Number of element children after flattening Fragments (the pre-registration step count). */\n  childCount: number;\n  /** Resolved `statusLabels.completed`. */\n  completedLabel: string;\n  /** Resolved `statusLabels.error`. */\n  errorLabel: string;\n  register: StepRegistry['register'];\n  sync: StepRegistry['sync'];\n}\n\nconst StepperContext = React.createContext<StepperContextValue | null>(null);\n\n/**\n * Position of a Stepper child among the element children (Fragments flattened), set by the root\n * around each child. It numbers the steps on the server and in the first render; after mount the\n * registry's DOM order takes over (it also covers wrappers that render several steps or none, which\n * the slot numbering gets wrong — documented on `Stepper` and `StepProps.index`).\n */\nconst StepSlotContext = React.createContext<number | null>(null);\n\nconst noop = () => {};\nconst INERT_CONTEXT: StepperContextValue = {\n  activeStep: 0,\n  select: noop,\n  orientation: 'horizontal',\n  linear: false,\n  order: EMPTY_ORDER,\n  childCount: 0,\n  completedLabel: DEFAULT_COMPLETED_LABEL,\n  errorLabel: DEFAULT_ERROR_LABEL,\n  register: () => noop,\n  sync: noop,\n};\n\n/**\n * Reads the Stepper context; a Step outside a Stepper throws in development and logs once in\n * production, where it renders inert (C-CONTEXT).\n */\nfunction useStepperContext(componentName: string): StepperContextValue {\n  const context = React.useContext(StepperContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'Stepper');\n  return INERT_CONTEXT;\n}\n\n/** A Stepper child after flattening; an element carries its position among the elements. */\ninterface StepperChild {\n  key: string;\n  node: React.ReactNode;\n  slot: number | null;\n}\n\n/**\n * The Stepper's children with Fragments flattened at any depth (`flattenChildren`: keys unique,\n * `null`/booleans dropped) and every element numbered in order.\n */\nfunction numberChildren(children: React.ReactNode): StepperChild[] {\n  let slot = 0;\n  return flattenChildren(children).map(({ key, node }) => ({\n    key,\n    node,\n    slot: React.isValidElement(node) ? slot++ : null,\n  }));\n}\n\n// ---------------------------------------------------------------------------\n// Step\n// ---------------------------------------------------------------------------\n\nconst indicatorSlotClasses = 'inline-flex items-center justify-center';\n\n/**\n * Connector colors. A connector is drawn by its background only, which forced colors replace with\n * Canvas, so it opts out there: a completed one is painted `Highlight` (`forcedColors.fill`), the\n * others `CanvasText`, like a Slider rail.\n */\nconst connectorCompletedClasses = cn('bg-success', forcedColors.fill);\nconst connectorPendingClasses =\n  'bg-border forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none';\n\n/**\n * One step of a {@link Stepper}: a `role=\"button\"` step (indicator, label, optional description)\n * inside its own `<li>`, followed by a connector unless it is the last step. `ref`, `className` and\n * rest props land on the step's root `<div>`; `onClick` runs on activation by mouse, Enter or Space\n * (not for disabled or unreachable steps). Must be rendered inside a `Stepper` (throws in\n * development otherwise). Flat name `StepperStep`, importable from React Server Components.\n */\nconst StepperStep = ({\n  label,\n  description,\n  icon,\n  disabled = false,\n  completed,\n  error = false,\n  index: indexProp,\n  className,\n  onClick,\n  ref,\n  ...rest\n}: StepProps) => {\n  const {\n    activeStep,\n    select,\n    orientation,\n    linear,\n    order,\n    childCount,\n    completedLabel,\n    errorLabel,\n    register,\n    sync,\n  } = useStepperContext('Stepper.Step');\n  const slotIndex = React.useContext(StepSlotContext);\n  const key = useId('wave-step');\n  const labelId = `${key}-label`;\n  const descriptionId = `${key}-description`;\n\n  // The list item registers itself under this step's id; the registry sorts by DOM position.\n  const registerItem = React.useCallback(\n    (element: HTMLLIElement | null) => (element ? register(key, element) : undefined),\n    [register, key],\n  );\n  // A keyed reorder moves list items without re-running their ref callbacks, and a wrapper component\n  // can reorder its own steps without re-rendering the root: re-read the DOM order after every commit\n  // of this step (a changed order re-renders before paint). Moves that re-render no step at all\n  // (reused elements) are caught by the root's MutationObserver.\n  React.useLayoutEffect(() => {\n    sync();\n  });\n\n  const position = order.indexOf(key);\n  const index = indexProp ?? (position !== -1 ? position : (slotIndex ?? 0));\n  const stepCount = position !== -1 ? order.length : childCount;\n  const isLast = index >= stepCount - 1;\n  const isActive = index === activeStep;\n  const isCompleted = completed ?? index < activeStep;\n  const isClickable = !disabled && (!linear || index <= activeStep + 1);\n  const horizontal = orientation === 'horizontal';\n\n  /**\n   * The single activation path for mouse and keyboard (Enter/Space dispatch a click): an\n   * unavailable step does nothing — neither the consumer `onClick` nor `onStepChange` runs; a\n   * consumer `onClick` that calls `preventDefault()` suppresses the step change (C-COMPOSE).\n   */\n  const activate = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!isClickable) {\n      event.preventDefault();\n      return;\n    }\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    select(index);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      event.currentTarget.click();\n    } else if (event.key === ' ') {\n      // Space activates on keyup, like a native button; stop the page from scrolling.\n      event.preventDefault();\n    }\n  };\n\n  const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget || event.key !== ' ') return;\n    event.preventDefault();\n    event.currentTarget.click();\n  };\n\n  const status = error ? errorLabel : isCompleted ? completedLabel : '';\n  const statusText = status ? `${status} ${index + 1}.` : `${index + 1}.`;\n\n  // A falsy icon (`icon={name && <Icon />}` with `name` '' or a count of 0) is no icon, as in Menu,\n  // Nav, Tree and Avatar, and so is a collection whose items render nothing: the step keeps its\n  // number or check mark. The check does not consume a generator: renderSlot still renders it.\n  const hasIcon = !!icon && slotRendersContent(icon);\n  let indicator: React.ReactNode;\n  if (error) {\n    indicator = <DismissIcon />;\n  } else if (isCompleted && !hasIcon) {\n    indicator = <CheckIcon />;\n  } else if (hasIcon) {\n    indicator = renderSlot(icon, 'span', cn(stepperStepClassNames.icon, indicatorSlotClasses), {\n      'aria-hidden': true,\n    });\n  } else {\n    indicator = <span className=\"text-caption-1 font-semibold\">{index + 1}</span>;\n  }\n\n  const toneClass = error\n    ? 'text-error'\n    : isActive\n      ? 'text-primary'\n      : isCompleted\n        ? 'text-success'\n        : 'text-foreground';\n\n  return (\n    <li\n      ref={registerItem}\n      className={cn(\n        stepperStepClassNames.listItem,\n        'flex min-w-0',\n        horizontal && !isLast && 'flex-1',\n      )}\n    >\n      <div\n        ref={ref}\n        data-active={isActive ? '' : undefined}\n        data-completed={isCompleted ? '' : undefined}\n        data-error={error ? '' : undefined}\n        data-disabled={disabled ? '' : undefined}\n        {...rest}\n        className={cn(\n          stepperStepClassNames.root,\n          horizontal ? 'flex flex-1 items-center' : 'flex flex-1 flex-col',\n          className,\n        )}\n      >\n        <div\n          role=\"button\"\n          tabIndex={isClickable ? 0 : -1}\n          aria-current={isActive ? 'step' : undefined}\n          aria-disabled={isClickable ? undefined : true}\n          aria-labelledby={labelId}\n          aria-describedby={description ? descriptionId : undefined}\n          onClick={activate}\n          onKeyDown={handleKeyDown}\n          onKeyUp={handleKeyUp}\n          className={cn(\n            stepperStepClassNames.button,\n            'relative flex rounded',\n            horizontal ? 'flex-col items-center gap-1' : 'items-center gap-3',\n            focusRing,\n            isClickable ? 'cursor-pointer' : 'cursor-default',\n            disabled && 'opacity-50',\n          )}\n        >\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              stepperStepClassNames.indicator,\n              'flex size-8 shrink-0 items-center justify-center rounded-full border-2 transition-colors motion-reduce:transition-none',\n              error\n                ? 'border-error bg-error-tint text-error-tint-foreground'\n                : isActive\n                  ? cn(\n                      'border-primary bg-primary text-primary-foreground',\n                      forcedColors.selectedLeaf,\n                    )\n                  : isCompleted\n                    ? 'border-success bg-success-tint text-success-tint-foreground'\n                    : 'border-border bg-background text-muted-foreground',\n            )}\n          >\n            {indicator}\n          </span>\n          <span className={cn('flex flex-col', horizontal && 'items-center text-center')}>\n            <span\n              id={labelId}\n              className={cn(\n                stepperStepClassNames.label,\n                'font-semibold',\n                horizontal ? 'text-caption-1 whitespace-nowrap' : 'text-body-1',\n                toneClass,\n              )}\n            >\n              <span className=\"sr-only\">{statusText}</span> {label}\n            </span>\n            {description && (\n              <span\n                id={descriptionId}\n                className={cn(\n                  stepperStepClassNames.description,\n                  'text-muted-foreground',\n                  horizontal ? 'text-caption-2 whitespace-nowrap' : 'text-caption-1',\n                )}\n              >\n                {description}\n              </span>\n            )}\n          </span>\n        </div>\n        {!isLast && (\n          <div\n            data-wave-stepper-connector=\"\"\n            aria-hidden=\"true\"\n            className={cn(\n              stepperStepClassNames.connector,\n              'transition-colors motion-reduce:transition-none',\n              // Vertical: centred under the size-8 circle, (8 - 0.5) / 2 spacing units in, so the\n              // offset scales with the circle at any root font size.\n              horizontal ? 'mx-2 h-0.5 flex-1' : 'my-1 ms-3.75 min-h-6 w-0.5',\n              isCompleted ? connectorCompletedClasses : connectorPendingClasses,\n            )}\n          />\n        )}\n      </div>\n    </li>\n  );\n};\nStepperStep.displayName = 'Step';\n\n// ---------------------------------------------------------------------------\n// Root\n// ---------------------------------------------------------------------------\n\nconst StepperRoot = ({\n  activeStep: controlledStep,\n  defaultActiveStep = 0,\n  onStepChange,\n  orientation = 'horizontal',\n  linear = false,\n  statusLabels,\n  className,\n  children,\n  ref,\n  ...rest\n}: StepperProps) => {\n  // Resolved to strings, so an inline `statusLabels` object does not change the context each render.\n  const completedLabel = statusLabels?.completed ?? DEFAULT_COMPLETED_LABEL;\n  const errorLabel = statusLabels?.error ?? DEFAULT_ERROR_LABEL;\n  const [activeStep, setActiveStep] = useControllable(controlledStep, defaultActiveStep);\n  const emitStepChange = useEventCallback(onStepChange);\n  // Event callback semantics (C-NAMING): every activation emits, also of the active step.\n  const select = React.useCallback(\n    (step: number) => {\n      setActiveStep(step);\n      emitStepChange(step);\n    },\n    [setActiveStep, emitStepChange],\n  );\n\n  const [registry] = React.useState(createStepRegistry);\n  const order = React.useSyncExternalStore(registry.subscribe, registry.getOrder, getServerOrder);\n  // Steps re-sync after each of their commits. A move that re-renders no step (a wrapper reordering\n  // reused step elements) only shows up in the DOM: observe the list for it (C-HOOKS DOM-derived\n  // collection; the callback runs in a microtask, before paint).\n  const listRef = React.useRef<HTMLOListElement>(null);\n  React.useEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n    const observer = new MutationObserver(registry.sync);\n    observer.observe(list, { childList: true, subtree: true });\n    return () => observer.disconnect();\n  }, [registry]);\n\n  const items = React.useMemo(() => numberChildren(children), [children]);\n  const childCount = items.filter((item) => item.slot !== null).length;\n\n  const context = React.useMemo<StepperContextValue>(\n    () => ({\n      activeStep,\n      select,\n      orientation,\n      linear,\n      order,\n      childCount,\n      completedLabel,\n      errorLabel,\n      register: registry.register,\n      sync: registry.sync,\n    }),\n    [\n      activeStep,\n      select,\n      orientation,\n      linear,\n      order,\n      childCount,\n      completedLabel,\n      errorLabel,\n      registry,\n    ],\n  );\n\n  const horizontal = orientation === 'horizontal';\n\n  return (\n    <StepperContext.Provider value={context}>\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"Progress\"\n        data-orientation={orientation}\n        {...rest}\n        className={cn(\n          stepperClassNames.root,\n          'flex',\n          horizontal ? 'flex-row items-start' : 'flex-col',\n          className,\n        )}\n      >\n        {/* role=\"list\" is not redundant: WebKit/VoiceOver drops list semantics from a\n            `list-style: none` list outside a <nav> unless the role is explicit. */}\n        <ol\n          ref={listRef}\n          role=\"list\"\n          className={cn(\n            stepperClassNames.list,\n            'm-0 flex list-none p-0',\n            horizontal ? 'flex-1 flex-row items-start' : 'flex-col',\n          )}\n        >\n          {items.map((item) =>\n            item.slot === null ? (\n              item.node\n            ) : (\n              <StepSlotContext.Provider key={item.key} value={item.slot}>\n                {item.node}\n              </StepSlotContext.Provider>\n            ),\n          )}\n        </ol>\n      </div>\n    </StepperContext.Provider>\n  );\n};\nStepperRoot.displayName = 'Stepper';\n\n/**\n * A multi-step progress indicator. Steps are `Stepper.Step` children (Fragments, conditional steps\n * and wrapper components are numbered in DOM order) rendered as an ordered list inside a\n * `role=\"group\"` root named \"Progress\" (override with `aria-label`). The active step's button\n * carries `aria-current=\"step\"`; completed and error steps announce their status (\"Completed:\",\n * \"Error:\"; localized with `statusLabels`).\n *\n * Server rendering: before hydration, steps are numbered by their position among the Stepper's\n * children (Fragments flattened), so a wrapper component that renders more or fewer than one step\n * is numbered correctly only after hydration. Pin such steps with `index` if the server HTML must\n * already be exact.\n *\n * Compound access (`Stepper.Step`) needs a client module; React Server Components import the flat\n * name `StepperStep` instead.\n */\nexport const Stepper = /* @__PURE__ */ Object.assign(StepperRoot, { Step: StepperStep });\n\n// Flat name of `Stepper.Step` (C-COMPOUND).\nexport { StepperStep };\n"],"mappings":"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"}

package/dist/components/navigation/Stepper.mjs

@@ -0,0 +1,205 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { flattenChildren as t } from "../../lib/children.mjs";
+import { reportMissingContext as n } from "../../lib/dev.mjs";
+import { renderSlot as r, slotRendersContent as i } from "../../lib/slot.mjs";
+import { stepperClassNames as a, stepperStepClassNames as o } from "../../lib/classNames.mjs";
+import { useEventCallback as s } from "../../hooks/useEventCallback.mjs";
+import { useControllable as c } from "../../hooks/useControllable.mjs";
+import { useId as l } from "../../hooks/useId.mjs";
+import { focusRing as u, forcedColors as d } from "../../lib/styles.mjs";
+import { CheckIcon as f, DismissIcon as p } from "../../lib/icons.mjs";
+import * as m from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/navigation/Stepper.tsx
+var _ = "Completed:", v = "Error:", y = [], b = () => y;
+function x() {
+	let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Set(), n = y, r = () => {
+		if (n.length !== e.size) return !1;
+		let t;
+		for (let r of n) {
+			let n = e.get(r);
+			if (!n || t && !(t.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING)) return !1;
+			t = n;
+		}
+		return !0;
+	}, i = () => {
+		if (r()) return;
+		let i = Array.from(e.entries()).sort(([, e], [, t]) => e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).map(([e]) => e);
+		i.length === n.length && i.every((e, t) => e === n[t]) || (n = i, t.forEach((e) => e()));
+	};
+	return {
+		register(t, n) {
+			return e.set(t, n), i(), () => {
+				e.get(t) === n && e.delete(t), i();
+			};
+		},
+		subscribe(e) {
+			return t.add(e), () => {
+				t.delete(e);
+			};
+		},
+		getOrder: () => n,
+		sync: i
+	};
+}
+var S = m.createContext(null), C = m.createContext(null), w = () => {}, T = {
+	activeStep: 0,
+	select: w,
+	orientation: "horizontal",
+	linear: !1,
+	order: y,
+	childCount: 0,
+	completedLabel: _,
+	errorLabel: v,
+	register: () => w,
+	sync: w
+};
+function E(e) {
+	return m.useContext(S) || (n(e, "Stepper"), T);
+}
+function D(e) {
+	let n = 0;
+	return t(e).map(({ key: e, node: t }) => ({
+		key: e,
+		node: t,
+		slot: m.isValidElement(t) ? n++ : null
+	}));
+}
+var O = "inline-flex items-center justify-center", k = e("bg-success", d.fill), A = "bg-border forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none", j = ({ label: t, description: n, icon: a, disabled: s = !1, completed: c, error: _ = !1, index: v, className: y, onClick: b, ref: x, ...S }) => {
+	let { activeStep: w, select: T, orientation: D, linear: j, order: M, childCount: N, completedLabel: P, errorLabel: F, register: I, sync: L } = E("Stepper.Step"), R = m.useContext(C), z = l("wave-step"), B = `${z}-label`, V = `${z}-description`, H = m.useCallback((e) => e ? I(z, e) : void 0, [I, z]);
+	m.useLayoutEffect(() => {
+		L();
+	});
+	let U = M.indexOf(z), W = v ?? (U === -1 ? R ?? 0 : U), G = W >= (U === -1 ? N : M.length) - 1, K = W === w, q = c ?? W < w, J = !s && (!j || W <= w + 1), Y = D === "horizontal", X = (e) => {
+		if (!J) {
+			e.preventDefault();
+			return;
+		}
+		b?.(e), !e.defaultPrevented && T(W);
+	}, ee = (e) => {
+		e.target === e.currentTarget && (e.key === "Enter" ? (e.preventDefault(), e.currentTarget.click()) : e.key === " " && e.preventDefault());
+	}, te = (e) => {
+		e.target === e.currentTarget && e.key === " " && (e.preventDefault(), e.currentTarget.click());
+	}, Z = _ ? F : q ? P : "", ne = Z ? `${Z} ${W + 1}.` : `${W + 1}.`, Q = !!a && i(a), $;
+	$ = _ ? /* @__PURE__ */ h(p, {}) : q && !Q ? /* @__PURE__ */ h(f, {}) : Q ? r(a, "span", e(o.icon, O), { "aria-hidden": !0 }) : /* @__PURE__ */ h("span", {
+		className: "text-caption-1 font-semibold",
+		children: W + 1
+	});
+	let re = _ ? "text-error" : K ? "text-primary" : q ? "text-success" : "text-foreground";
+	return /* @__PURE__ */ h("li", {
+		ref: H,
+		className: e(o.listItem, "flex min-w-0", Y && !G && "flex-1"),
+		children: /* @__PURE__ */ g("div", {
+			ref: x,
+			"data-active": K ? "" : void 0,
+			"data-completed": q ? "" : void 0,
+			"data-error": _ ? "" : void 0,
+			"data-disabled": s ? "" : void 0,
+			...S,
+			className: e(o.root, Y ? "flex flex-1 items-center" : "flex flex-1 flex-col", y),
+			children: [/* @__PURE__ */ g("div", {
+				role: "button",
+				tabIndex: J ? 0 : -1,
+				"aria-current": K ? "step" : void 0,
+				"aria-disabled": !J || void 0,
+				"aria-labelledby": B,
+				"aria-describedby": n ? V : void 0,
+				onClick: X,
+				onKeyDown: ee,
+				onKeyUp: te,
+				className: e(o.button, "relative flex rounded", Y ? "flex-col items-center gap-1" : "items-center gap-3", u, J ? "cursor-pointer" : "cursor-default", s && "opacity-50"),
+				children: [/* @__PURE__ */ h("span", {
+					"aria-hidden": "true",
+					className: e(o.indicator, "flex size-8 shrink-0 items-center justify-center rounded-full border-2 transition-colors motion-reduce:transition-none", _ ? "border-error bg-error-tint text-error-tint-foreground" : K ? e("border-primary bg-primary text-primary-foreground", d.selectedLeaf) : q ? "border-success bg-success-tint text-success-tint-foreground" : "border-border bg-background text-muted-foreground"),
+					children: $
+				}), /* @__PURE__ */ g("span", {
+					className: e("flex flex-col", Y && "items-center text-center"),
+					children: [/* @__PURE__ */ g("span", {
+						id: B,
+						className: e(o.label, "font-semibold", Y ? "text-caption-1 whitespace-nowrap" : "text-body-1", re),
+						children: [
+							/* @__PURE__ */ h("span", {
+								className: "sr-only",
+								children: ne
+							}),
+							" ",
+							t
+						]
+					}), n && /* @__PURE__ */ h("span", {
+						id: V,
+						className: e(o.description, "text-muted-foreground", Y ? "text-caption-2 whitespace-nowrap" : "text-caption-1"),
+						children: n
+					})]
+				})]
+			}), !G && /* @__PURE__ */ h("div", {
+				"data-wave-stepper-connector": "",
+				"aria-hidden": "true",
+				className: e(o.connector, "transition-colors motion-reduce:transition-none", Y ? "mx-2 h-0.5 flex-1" : "my-1 ms-3.75 min-h-6 w-0.5", q ? k : A)
+			})]
+		})
+	});
+};
+j.displayName = "Step";
+var M = ({ activeStep: t, defaultActiveStep: n = 0, onStepChange: r, orientation: i = "horizontal", linear: o = !1, statusLabels: l, className: u, children: d, ref: f, ...p }) => {
+	let g = l?.completed ?? _, y = l?.error ?? v, [w, T] = c(t, n), E = s(r), O = m.useCallback((e) => {
+		T(e), E(e);
+	}, [T, E]), [k] = m.useState(x), A = m.useSyncExternalStore(k.subscribe, k.getOrder, b), j = m.useRef(null);
+	m.useEffect(() => {
+		let e = j.current;
+		if (!e) return;
+		let t = new MutationObserver(k.sync);
+		return t.observe(e, {
+			childList: !0,
+			subtree: !0
+		}), () => t.disconnect();
+	}, [k]);
+	let M = m.useMemo(() => D(d), [d]), N = M.filter((e) => e.slot !== null).length, P = m.useMemo(() => ({
+		activeStep: w,
+		select: O,
+		orientation: i,
+		linear: o,
+		order: A,
+		childCount: N,
+		completedLabel: g,
+		errorLabel: y,
+		register: k.register,
+		sync: k.sync
+	}), [
+		w,
+		O,
+		i,
+		o,
+		A,
+		N,
+		g,
+		y,
+		k
+	]), F = i === "horizontal";
+	return /* @__PURE__ */ h(S.Provider, {
+		value: P,
+		children: /* @__PURE__ */ h("div", {
+			ref: f,
+			role: "group",
+			"aria-label": "Progress",
+			"data-orientation": i,
+			...p,
+			className: e(a.root, "flex", F ? "flex-row items-start" : "flex-col", u),
+			children: /* @__PURE__ */ h("ol", {
+				ref: j,
+				role: "list",
+				className: e(a.list, "m-0 flex list-none p-0", F ? "flex-1 flex-row items-start" : "flex-col"),
+				children: M.map((e) => e.slot === null ? e.node : /* @__PURE__ */ h(C.Provider, {
+					value: e.slot,
+					children: e.node
+				}, e.key))
+			})
+		})
+	});
+};
+M.displayName = "Stepper";
+var N = /* @__PURE__ */ Object.assign(M, { Step: j });
+//#endregion
+export { N as Stepper, j as StepperStep };
+
+//# sourceMappingURL=Stepper.mjs.map

package/dist/components/navigation/Stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.mjs","names":["useId","useId$1","React","DEFAULT_COMPLETED_LABEL","DEFAULT_ERROR_LABEL","EMPTY_ORDER","getServerOrder","createStepRegistry","elements","listeners","order","isCurrent","previous","key","element","sync","next","a","b","i","listener","StepperContext","StepSlotContext","noop","INERT_CONTEXT","useStepperContext","reportMissingContext","componentName","numberChildren","slot","flattenChildren","children","node","indicatorSlotClasses","connectorCompletedClasses","cn","forcedColors","connectorPendingClasses","StepperStep","indexProp","rest","slotIndex","labelId","descriptionId","registerItem","register","position","index","isLast","childCount","isActive","activeStep","isCompleted","completed","isClickable","disabled","linear","horizontal","orientation","activate","onClick","event","select","handleKeyDown","handleKeyUp","status","error","errorLabel","completedLabel","statusText","hasIcon","icon","slotRendersContent","indicator","DismissIcon","CheckIcon","renderSlot","stepperStepClassNames","toneClass","className","description","focusRing","label","StepperRoot","controlledStep","statusLabels","setActiveStep","useControllable","defaultActiveStep","emitStepChange","useEventCallback","onStepChange","step","registry","listRef","list","observer","items","item","context","stepperClassNames","Stepper"],"sources":["../../../src/components/navigation/Stepper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { stepperClassNames, stepperStepClassNames } from '../../lib/classNames';\nimport { reportMissingContext } from '../../lib/dev';\nimport { CheckIcon, DismissIcon } from '../../lib/icons';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Slot } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { Orientation } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\n\n/** Properties for the Stepper component. */\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Controlled index (0-based) of the currently active step. */\n  activeStep?: number;\n  /** Default active step index for uncontrolled usage.\n   * @default 0\n   */\n  defaultActiveStep?: number;\n  /**\n   * Called with the step index whenever a step is activated (click, Enter or Space) — also when the\n   * active step is activated again (0.4 semantics). Not called for disabled or unreachable steps.\n   */\n  onStepChange?: (step: number) => void;\n  /** Layout orientation of the stepper.\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n  /**\n   * Whether navigation is restricted to sequential steps: only steps up to the one after the active\n   * step can be activated; later steps are `aria-disabled` and leave the tab order.\n   * @default false\n   */\n  linear?: boolean;\n  /**\n   * Visually hidden status text read before the number of a completed or error step (\"Completed:\n   * 2. Profile\"), for localization: `{ completed: 'Fullført:', error: 'Feil:' }`. A label that is\n   * not given keeps its English default; `''` leaves that status out of the step names.\n   * @default { completed: 'Completed:', error: 'Error:' }\n   */\n  statusLabels?: { completed?: string; error?: string };\n  /** Ref to the root `<div>` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DEFAULT_COMPLETED_LABEL = 'Completed:';\nconst DEFAULT_ERROR_LABEL = 'Error:';\n\n/** Properties for the Step sub-component. */\nexport interface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Label text for the step. */\n  label: string;\n  /** Optional description text displayed below the label (the step button's description). */\n  description?: string;\n  /**\n   * Custom icon to display in the step indicator (`Slot<'span'>`: a node, or a slot object for full\n   * control). Decorative: rendered with `aria-hidden=\"true\"`; the step number stays in the name. A\n   * falsy icon (`''`, `0`) or a list of nothing is no icon: the step shows its number (or its check\n   * mark when completed).\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Whether the step is disabled and non-interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Whether the step is marked as completed. Defaults to `true` for steps before the active step. */\n  completed?: boolean;\n  /**\n   * Whether the step is in an error state.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Zero-based position of the step. Normally derived from the step's position in the Stepper\n   * (Fragments, conditional steps and wrapper components included); set it only to override that.\n   * In server HTML (and the first client render, before the steps register) each Stepper child\n   * counts as one step, so steps inside a wrapper component that renders more or fewer than one\n   * step are numbered correctly only after hydration; set `index` on them to pin the server HTML.\n   */\n  index?: number;\n  /** Ref to the step's root `<div>` (rendered inside the step's `<li>`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Step registry: a useId-keyed descendant list in DOM order\n// ---------------------------------------------------------------------------\n\nconst EMPTY_ORDER: readonly string[] = [];\nconst getServerOrder = () => EMPTY_ORDER;\n\ninterface StepRegistry {\n  /** Registers a step's list item under its key; returns the cleanup that unregisters it. */\n  register: (key: string, element: HTMLElement) => () => void;\n  subscribe: (listener: () => void) => () => void;\n  /** Keys of the registered steps in DOM order (a new array only when the order changed). */\n  getOrder: () => readonly string[];\n  /**\n   * Re-reads the DOM order and notifies subscribers when it changed. Cheap when nothing moved (one\n   * pass over adjacent pairs), so every Step calls it after each of its commits. A commit that\n   * re-renders all n steps (an `activeStep` change) therefore costs n passes, O(n²) position\n   * checks, and the root's observer adds one pass per list mutation (indicator swaps included):\n   * negligible for step counts a stepper can show. If that ever matters, coalesce the per-step calls\n   * into one pass per commit (a dirty flag set by the steps, flushed once) — keeping this per-step\n   * call or the observer as the path for commits in which the root does not re-render.\n   */\n  sync: () => void;\n}\n\nfunction createStepRegistry(): StepRegistry {\n  const elements = new Map<string, HTMLElement>();\n  const listeners = new Set<() => void>();\n  let order = EMPTY_ORDER;\n\n  /** Whether `order` still lists exactly the registered elements, in DOM order. */\n  const isCurrent = () => {\n    if (order.length !== elements.size) return false;\n    let previous: HTMLElement | undefined;\n    for (const key of order) {\n      const element = elements.get(key);\n      if (!element) return false;\n      if (\n        previous &&\n        !(previous.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING)\n      ) {\n        return false;\n      }\n      previous = element;\n    }\n    return true;\n  };\n\n  const sync = () => {\n    if (isCurrent()) return;\n    const next = Array.from(elements.entries())\n      .sort(([, a], [, b]) =>\n        a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1,\n      )\n      .map(([key]) => key);\n    if (next.length === order.length && next.every((key, i) => key === order[i])) return;\n    order = next;\n    listeners.forEach((listener) => listener());\n  };\n\n  return {\n    register(key, element) {\n      elements.set(key, element);\n      sync();\n      return () => {\n        if (elements.get(key) === element) elements.delete(key);\n        sync();\n      };\n    },\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n    getOrder: () => order,\n    sync,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Contexts\n// ---------------------------------------------------------------------------\n\ninterface StepperContextValue {\n  activeStep: number;\n  /** Activates a step: updates the (uncontrolled) state and calls `onStepChange`. */\n  select: (step: number) => void;\n  orientation: Orientation;\n  linear: boolean;\n  /** Registered step keys in DOM order (empty on the server and before the first commit). */\n  order: readonly string[];\n  /** Number of element children after flattening Fragments (the pre-registration step count). */\n  childCount: number;\n  /** Resolved `statusLabels.completed`. */\n  completedLabel: string;\n  /** Resolved `statusLabels.error`. */\n  errorLabel: string;\n  register: StepRegistry['register'];\n  sync: StepRegistry['sync'];\n}\n\nconst StepperContext = React.createContext<StepperContextValue | null>(null);\n\n/**\n * Position of a Stepper child among the element children (Fragments flattened), set by the root\n * around each child. It numbers the steps on the server and in the first render; after mount the\n * registry's DOM order takes over (it also covers wrappers that render several steps or none, which\n * the slot numbering gets wrong — documented on `Stepper` and `StepProps.index`).\n */\nconst StepSlotContext = React.createContext<number | null>(null);\n\nconst noop = () => {};\nconst INERT_CONTEXT: StepperContextValue = {\n  activeStep: 0,\n  select: noop,\n  orientation: 'horizontal',\n  linear: false,\n  order: EMPTY_ORDER,\n  childCount: 0,\n  completedLabel: DEFAULT_COMPLETED_LABEL,\n  errorLabel: DEFAULT_ERROR_LABEL,\n  register: () => noop,\n  sync: noop,\n};\n\n/**\n * Reads the Stepper context; a Step outside a Stepper throws in development and logs once in\n * production, where it renders inert (C-CONTEXT).\n */\nfunction useStepperContext(componentName: string): StepperContextValue {\n  const context = React.useContext(StepperContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'Stepper');\n  return INERT_CONTEXT;\n}\n\n/** A Stepper child after flattening; an element carries its position among the elements. */\ninterface StepperChild {\n  key: string;\n  node: React.ReactNode;\n  slot: number | null;\n}\n\n/**\n * The Stepper's children with Fragments flattened at any depth (`flattenChildren`: keys unique,\n * `null`/booleans dropped) and every element numbered in order.\n */\nfunction numberChildren(children: React.ReactNode): StepperChild[] {\n  let slot = 0;\n  return flattenChildren(children).map(({ key, node }) => ({\n    key,\n    node,\n    slot: React.isValidElement(node) ? slot++ : null,\n  }));\n}\n\n// ---------------------------------------------------------------------------\n// Step\n// ---------------------------------------------------------------------------\n\nconst indicatorSlotClasses = 'inline-flex items-center justify-center';\n\n/**\n * Connector colors. A connector is drawn by its background only, which forced colors replace with\n * Canvas, so it opts out there: a completed one is painted `Highlight` (`forcedColors.fill`), the\n * others `CanvasText`, like a Slider rail.\n */\nconst connectorCompletedClasses = cn('bg-success', forcedColors.fill);\nconst connectorPendingClasses =\n  'bg-border forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none';\n\n/**\n * One step of a {@link Stepper}: a `role=\"button\"` step (indicator, label, optional description)\n * inside its own `<li>`, followed by a connector unless it is the last step. `ref`, `className` and\n * rest props land on the step's root `<div>`; `onClick` runs on activation by mouse, Enter or Space\n * (not for disabled or unreachable steps). Must be rendered inside a `Stepper` (throws in\n * development otherwise). Flat name `StepperStep`, importable from React Server Components.\n */\nconst StepperStep = ({\n  label,\n  description,\n  icon,\n  disabled = false,\n  completed,\n  error = false,\n  index: indexProp,\n  className,\n  onClick,\n  ref,\n  ...rest\n}: StepProps) => {\n  const {\n    activeStep,\n    select,\n    orientation,\n    linear,\n    order,\n    childCount,\n    completedLabel,\n    errorLabel,\n    register,\n    sync,\n  } = useStepperContext('Stepper.Step');\n  const slotIndex = React.useContext(StepSlotContext);\n  const key = useId('wave-step');\n  const labelId = `${key}-label`;\n  const descriptionId = `${key}-description`;\n\n  // The list item registers itself under this step's id; the registry sorts by DOM position.\n  const registerItem = React.useCallback(\n    (element: HTMLLIElement | null) => (element ? register(key, element) : undefined),\n    [register, key],\n  );\n  // A keyed reorder moves list items without re-running their ref callbacks, and a wrapper component\n  // can reorder its own steps without re-rendering the root: re-read the DOM order after every commit\n  // of this step (a changed order re-renders before paint). Moves that re-render no step at all\n  // (reused elements) are caught by the root's MutationObserver.\n  React.useLayoutEffect(() => {\n    sync();\n  });\n\n  const position = order.indexOf(key);\n  const index = indexProp ?? (position !== -1 ? position : (slotIndex ?? 0));\n  const stepCount = position !== -1 ? order.length : childCount;\n  const isLast = index >= stepCount - 1;\n  const isActive = index === activeStep;\n  const isCompleted = completed ?? index < activeStep;\n  const isClickable = !disabled && (!linear || index <= activeStep + 1);\n  const horizontal = orientation === 'horizontal';\n\n  /**\n   * The single activation path for mouse and keyboard (Enter/Space dispatch a click): an\n   * unavailable step does nothing — neither the consumer `onClick` nor `onStepChange` runs; a\n   * consumer `onClick` that calls `preventDefault()` suppresses the step change (C-COMPOSE).\n   */\n  const activate = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!isClickable) {\n      event.preventDefault();\n      return;\n    }\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    select(index);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      event.currentTarget.click();\n    } else if (event.key === ' ') {\n      // Space activates on keyup, like a native button; stop the page from scrolling.\n      event.preventDefault();\n    }\n  };\n\n  const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget || event.key !== ' ') return;\n    event.preventDefault();\n    event.currentTarget.click();\n  };\n\n  const status = error ? errorLabel : isCompleted ? completedLabel : '';\n  const statusText = status ? `${status} ${index + 1}.` : `${index + 1}.`;\n\n  // A falsy icon (`icon={name && <Icon />}` with `name` '' or a count of 0) is no icon, as in Menu,\n  // Nav, Tree and Avatar, and so is a collection whose items render nothing: the step keeps its\n  // number or check mark. The check does not consume a generator: renderSlot still renders it.\n  const hasIcon = !!icon && slotRendersContent(icon);\n  let indicator: React.ReactNode;\n  if (error) {\n    indicator = <DismissIcon />;\n  } else if (isCompleted && !hasIcon) {\n    indicator = <CheckIcon />;\n  } else if (hasIcon) {\n    indicator = renderSlot(icon, 'span', cn(stepperStepClassNames.icon, indicatorSlotClasses), {\n      'aria-hidden': true,\n    });\n  } else {\n    indicator = <span className=\"text-caption-1 font-semibold\">{index + 1}</span>;\n  }\n\n  const toneClass = error\n    ? 'text-error'\n    : isActive\n      ? 'text-primary'\n      : isCompleted\n        ? 'text-success'\n        : 'text-foreground';\n\n  return (\n    <li\n      ref={registerItem}\n      className={cn(\n        stepperStepClassNames.listItem,\n        'flex min-w-0',\n        horizontal && !isLast && 'flex-1',\n      )}\n    >\n      <div\n        ref={ref}\n        data-active={isActive ? '' : undefined}\n        data-completed={isCompleted ? '' : undefined}\n        data-error={error ? '' : undefined}\n        data-disabled={disabled ? '' : undefined}\n        {...rest}\n        className={cn(\n          stepperStepClassNames.root,\n          horizontal ? 'flex flex-1 items-center' : 'flex flex-1 flex-col',\n          className,\n        )}\n      >\n        <div\n          role=\"button\"\n          tabIndex={isClickable ? 0 : -1}\n          aria-current={isActive ? 'step' : undefined}\n          aria-disabled={isClickable ? undefined : true}\n          aria-labelledby={labelId}\n          aria-describedby={description ? descriptionId : undefined}\n          onClick={activate}\n          onKeyDown={handleKeyDown}\n          onKeyUp={handleKeyUp}\n          className={cn(\n            stepperStepClassNames.button,\n            'relative flex rounded',\n            horizontal ? 'flex-col items-center gap-1' : 'items-center gap-3',\n            focusRing,\n            isClickable ? 'cursor-pointer' : 'cursor-default',\n            disabled && 'opacity-50',\n          )}\n        >\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              stepperStepClassNames.indicator,\n              'flex size-8 shrink-0 items-center justify-center rounded-full border-2 transition-colors motion-reduce:transition-none',\n              error\n                ? 'border-error bg-error-tint text-error-tint-foreground'\n                : isActive\n                  ? cn(\n                      'border-primary bg-primary text-primary-foreground',\n                      forcedColors.selectedLeaf,\n                    )\n                  : isCompleted\n                    ? 'border-success bg-success-tint text-success-tint-foreground'\n                    : 'border-border bg-background text-muted-foreground',\n            )}\n          >\n            {indicator}\n          </span>\n          <span className={cn('flex flex-col', horizontal && 'items-center text-center')}>\n            <span\n              id={labelId}\n              className={cn(\n                stepperStepClassNames.label,\n                'font-semibold',\n                horizontal ? 'text-caption-1 whitespace-nowrap' : 'text-body-1',\n                toneClass,\n              )}\n            >\n              <span className=\"sr-only\">{statusText}</span> {label}\n            </span>\n            {description && (\n              <span\n                id={descriptionId}\n                className={cn(\n                  stepperStepClassNames.description,\n                  'text-muted-foreground',\n                  horizontal ? 'text-caption-2 whitespace-nowrap' : 'text-caption-1',\n                )}\n              >\n                {description}\n              </span>\n            )}\n          </span>\n        </div>\n        {!isLast && (\n          <div\n            data-wave-stepper-connector=\"\"\n            aria-hidden=\"true\"\n            className={cn(\n              stepperStepClassNames.connector,\n              'transition-colors motion-reduce:transition-none',\n              // Vertical: centred under the size-8 circle, (8 - 0.5) / 2 spacing units in, so the\n              // offset scales with the circle at any root font size.\n              horizontal ? 'mx-2 h-0.5 flex-1' : 'my-1 ms-3.75 min-h-6 w-0.5',\n              isCompleted ? connectorCompletedClasses : connectorPendingClasses,\n            )}\n          />\n        )}\n      </div>\n    </li>\n  );\n};\nStepperStep.displayName = 'Step';\n\n// ---------------------------------------------------------------------------\n// Root\n// ---------------------------------------------------------------------------\n\nconst StepperRoot = ({\n  activeStep: controlledStep,\n  defaultActiveStep = 0,\n  onStepChange,\n  orientation = 'horizontal',\n  linear = false,\n  statusLabels,\n  className,\n  children,\n  ref,\n  ...rest\n}: StepperProps) => {\n  // Resolved to strings, so an inline `statusLabels` object does not change the context each render.\n  const completedLabel = statusLabels?.completed ?? DEFAULT_COMPLETED_LABEL;\n  const errorLabel = statusLabels?.error ?? DEFAULT_ERROR_LABEL;\n  const [activeStep, setActiveStep] = useControllable(controlledStep, defaultActiveStep);\n  const emitStepChange = useEventCallback(onStepChange);\n  // Event callback semantics (C-NAMING): every activation emits, also of the active step.\n  const select = React.useCallback(\n    (step: number) => {\n      setActiveStep(step);\n      emitStepChange(step);\n    },\n    [setActiveStep, emitStepChange],\n  );\n\n  const [registry] = React.useState(createStepRegistry);\n  const order = React.useSyncExternalStore(registry.subscribe, registry.getOrder, getServerOrder);\n  // Steps re-sync after each of their commits. A move that re-renders no step (a wrapper reordering\n  // reused step elements) only shows up in the DOM: observe the list for it (C-HOOKS DOM-derived\n  // collection; the callback runs in a microtask, before paint).\n  const listRef = React.useRef<HTMLOListElement>(null);\n  React.useEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n    const observer = new MutationObserver(registry.sync);\n    observer.observe(list, { childList: true, subtree: true });\n    return () => observer.disconnect();\n  }, [registry]);\n\n  const items = React.useMemo(() => numberChildren(children), [children]);\n  const childCount = items.filter((item) => item.slot !== null).length;\n\n  const context = React.useMemo<StepperContextValue>(\n    () => ({\n      activeStep,\n      select,\n      orientation,\n      linear,\n      order,\n      childCount,\n      completedLabel,\n      errorLabel,\n      register: registry.register,\n      sync: registry.sync,\n    }),\n    [\n      activeStep,\n      select,\n      orientation,\n      linear,\n      order,\n      childCount,\n      completedLabel,\n      errorLabel,\n      registry,\n    ],\n  );\n\n  const horizontal = orientation === 'horizontal';\n\n  return (\n    <StepperContext.Provider value={context}>\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"Progress\"\n        data-orientation={orientation}\n        {...rest}\n        className={cn(\n          stepperClassNames.root,\n          'flex',\n          horizontal ? 'flex-row items-start' : 'flex-col',\n          className,\n        )}\n      >\n        {/* role=\"list\" is not redundant: WebKit/VoiceOver drops list semantics from a\n            `list-style: none` list outside a <nav> unless the role is explicit. */}\n        <ol\n          ref={listRef}\n          role=\"list\"\n          className={cn(\n            stepperClassNames.list,\n            'm-0 flex list-none p-0',\n            horizontal ? 'flex-1 flex-row items-start' : 'flex-col',\n          )}\n        >\n          {items.map((item) =>\n            item.slot === null ? (\n              item.node\n            ) : (\n              <StepSlotContext.Provider key={item.key} value={item.slot}>\n                {item.node}\n              </StepSlotContext.Provider>\n            ),\n          )}\n        </ol>\n      </div>\n    </StepperContext.Provider>\n  );\n};\nStepperRoot.displayName = 'Stepper';\n\n/**\n * A multi-step progress indicator. Steps are `Stepper.Step` children (Fragments, conditional steps\n * and wrapper components are numbered in DOM order) rendered as an ordered list inside a\n * `role=\"group\"` root named \"Progress\" (override with `aria-label`). The active step's button\n * carries `aria-current=\"step\"`; completed and error steps announce their status (\"Completed:\",\n * \"Error:\"; localized with `statusLabels`).\n *\n * Server rendering: before hydration, steps are numbered by their position among the Stepper's\n * children (Fragments flattened), so a wrapper component that renders more or fewer than one step\n * is numbered correctly only after hydration. Pin such steps with `index` if the server HTML must\n * already be exact.\n *\n * Compound access (`Stepper.Step`) needs a client module; React Server Components import the flat\n * name `StepperStep` instead.\n */\nexport const Stepper = /* @__PURE__ */ Object.assign(StepperRoot, { Step: StepperStep });\n\n// Flat name of `Stepper.Step` (C-COMPOUND).\nexport { StepperStep };\n"],"mappings":"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"}

package/dist/components/overlays/Dialog.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../hooks/useMergedRefs.cjs"),s=require("../../hooks/useIsClient.cjs"),c=require("../portal/Portal.cjs"),l=require("../button/Button.cjs"),u=require("../../lib/icons.cjs"),d=require("../../hooks/useModalLayer.cjs"),f=require("./Dialog.shared.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=p.createContext(null);h.displayName=`DialogContext`;var g={open:!1,requestOpen:()=>{},modalType:`modal`,trigger:f.inertModalTrigger,finalFocusRef:void 0,contentId:void 0,registerContentId:()=>()=>{}};function _(e){return f.useRequiredContext(h,e,`Dialog`,()=>g)}var v=({open:e,defaultOpen:t,onOpenChange:n,modalType:r=`modal`,finalFocusRef:i,children:a})=>{let[o,c]=f.useModalOpenState(e,t,n),l=s.useIsClient(),u=o&&l,d=f.useModalTrigger();f.useModalTriggerSession(d,u);let[g,_]=p.useState(void 0),v=p.useCallback(e=>(_(e),()=>_(t=>t===e?void 0:t)),[]),y=p.useMemo(()=>({open:u,requestOpen:c,modalType:r,trigger:d,finalFocusRef:i,contentId:g,registerContentId:v}),[u,c,r,d,i,g,v]);return(0,m.jsx)(h.Provider,{value:y,children:a})};v.displayName=`Dialog`;var y=e=>{let{open:t,requestOpen:n,trigger:r,contentId:i}=_(`Dialog.Trigger`);return f.useModalTriggerPart({open:t,requestOpen:n,trigger:r,controlsId:i},e,`Dialog.Trigger`)};y.displayName=`DialogTrigger`;var b=e=>{let{requestOpen:t}=_(`Dialog.Close`);return f.useModalClosePart(t,e,`Dialog.Close`)};b.displayName=`DialogClose`;var x={small:`max-w-[400px]`,medium:`max-w-[600px]`},S=({title:e,size:n=`medium`,closeLabel:s=`Close`,children:h,className:g,id:v,ref:y,...b})=>{let{open:S,requestOpen:C,modalType:w,trigger:T,finalFocusRef:E,registerContentId:D}=_(`Dialog.Content`),O=a.useId(`wave-dialog`),k=v??O,A=a.useId(`wave-dialog-title`),j=f.useTitleRegistry(),[M,N]=p.useState(null),P=p.useRef(null),F=p.useCallback(e=>{P.current=e,N(e)},[]),I=p.useCallback(e=>e?D(k):void 0,[D,k]),L=o.useMergedRefs(y,F,I),R=w!==`alert`,z=f.useBackdropPress(P,R),B=f.useModalDismiss(C,`Dialog`,z.afterOutsidePress),V=d.useModalLayer({open:S,onDismiss:B,refs:[P],outsidePress:R,container:M,triggerRef:T.focusRef,finalFocusRef:E});f.useUnnamedModalWarning(S?M:null,j.hasTitle,`Dialog.Content`,`Dialog.Title`);let[H,U]=p.useState(null),W=p.useMemo(()=>({...j.context,setFooterHeight:U}),[j.context]);if(!S)return null;let G=r.slotRendersContent(e);return(0,m.jsx)(c.Portal,{layerId:V.layerId,children:(0,m.jsx)(`div`,{className:t.cn(i.dialogContentClassNames.backdrop,`fixed inset-0 flex items-center justify-center bg-backdrop`),onMouseDown:z.onMouseDown,children:(0,m.jsx)(`div`,{ref:L,role:w===`alert`?`alertdialog`:`dialog`,id:k,"aria-labelledby":G?A:j.titleId,tabIndex:-1,"data-modal-type":w,...b,className:t.cn(i.dialogContentClassNames.root,`relative m-4 flex min-w-0 max-h-[calc(100dvh-2rem)] w-full flex-col rounded-lg border border-border bg-background p-6 text-foreground shadow-64`,x[n],g),children:(0,m.jsxs)(f.ModalSurfaceContext.Provider,{value:W,children:[G&&(0,m.jsx)(`h2`,{id:A,className:t.cn(i.dialogTitleClassNames.root,`pe-8 text-subtitle-1 font-semibold`),children:e}),(0,m.jsx)(l.Button,{appearance:`subtle`,size:`small`,icon:(0,m.jsx)(u.DismissIcon,{}),"aria-label":s,onClick:e=>C(!1,{reason:`close-button`,event:e.nativeEvent}),className:t.cn(i.dialogContentClassNames.closeButton,`absolute end-4 top-4 text-muted-foreground`)}),(0,m.jsx)(`div`,{className:t.cn(i.dialogContentClassNames.body,`-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1`),style:H===null?void 0:{"--wave-dialog-footer-height":`${H}px`},children:h})]})})})})};S.displayName=`DialogContent`;var C=({id:e,className:n,children:r,ref:a,...o})=>{let{id:s,ref:c}=f.useModalTitle(`Dialog.Title`,`Dialog.Content`,e,a);return(0,m.jsx)(`h2`,{...o,id:s,ref:c,className:t.cn(i.dialogTitleClassNames.root,`pe-8 text-subtitle-1 font-semibold text-foreground`,n),children:r})};C.displayName=`DialogTitle`;var w=`sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3`,T=`mt-6 flex justify-end gap-2`,E=({children:e,className:r,ref:a,...s})=>{let c=p.useContext(f.ModalSurfaceContext),l=c===null,u=c?.setFooterHeight,[d,h]=p.useState(null),g=o.useMergedRefs(a,h);return p.useEffect(()=>{l&&n.warnOnce(`Dialog.Footer:outside-content`,`Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.`)},[l]),p.useLayoutEffect(()=>{if(!d||!u||typeof ResizeObserver>`u`)return;let e=new ResizeObserver(e=>{let t=e[e.length-1];t&&u(t.borderBoxSize?.[0]?.blockSize??d.offsetHeight)});return e.observe(d,{box:`border-box`}),()=>{e.disconnect(),u(null)}},[d,u]),(0,m.jsx)(`div`,{ref:g,...s,className:t.cn(i.dialogFooterClassNames.root,u?w:T,r),children:e})};E.displayName=`DialogFooter`;var D=Object.assign(v,{Trigger:y,Content:S,Footer:E,Title:C,Close:b});exports.Dialog=D,exports.DialogClose=b,exports.DialogContent=S,exports.DialogFooter=E,exports.DialogTitle=C,exports.DialogTrigger=y;
+//# sourceMappingURL=Dialog.cjs.map

package/dist/components/overlays/Dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.cjs","names":["React","inertModalTrigger","useRequiredContext","useModalOpenState","useIsClient","useModalTrigger","useModalTriggerPart","useModalClosePart","useId","useTitleRegistry","useMergedRefs","useBackdropPress","useModalDismiss","useModalLayer","slotRendersContent","Portal","cn","dialogContentClassNames","ModalSurfaceContext","dialogTitleClassNames","Button","DismissIcon","useModalTitle","dialogFooterClassNames","require_runtime","require_cn","require_dev","require_slot","require_classNames","require_useId","require_useMergedRefs","require_useIsClient","require_Portal","require_Button","require_icons","require_useModalLayer","require_Dialog_shared","react","react_jsx_runtime","DialogContext","inertDialogContext","useDialogContext","componentName","DialogRoot","openState","requestOpen","open","defaultOpen","onOpenChange","isClient","isOpen","trigger","contentId","setContentId","registerContentId","id","current","context","modalType","finalFocusRef","DialogTrigger","props","DialogClose","sizeClasses","DialogContent","rest","generatedId","propTitleId","titles","surface","setSurface","surfaceRef","attachSurface","node","registerId","mergedRef","ref","closesOnBackdropPress","backdropPress","onDismiss","layer","footerHeight","setFooterHeight","surfaceContext","hasTitle","title","size","className","closeLabel","event","DialogTitle","titleId","titleRef","stickyFooterClasses","footerRowClasses","DialogFooter","outsideContent","footer","setFooter","observer","entry","entries","Dialog"],"sources":["../../../src/components/overlays/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  dialogContentClassNames,\n  dialogFooterClassNames,\n  dialogTitleClassNames,\n} from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport { DismissIcon } from '../../lib/icons';\nimport { slotRendersContent } from '../../lib/slot';\nimport type { ModalOpenChangeReason, ModalType, OpenChangeDetails } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useModalLayer } from '../../hooks/useModalLayer';\nimport { Button } from '../button/Button';\nimport { Portal } from '../portal/Portal';\nimport {\n  inertModalTrigger,\n  ModalSurfaceContext,\n  useBackdropPress,\n  useModalClosePart,\n  useModalDismiss,\n  useModalOpenState,\n  useModalTitle,\n  useModalTrigger,\n  useModalTriggerPart,\n  useModalTriggerSession,\n  useRequiredContext,\n  useTitleRegistry,\n  useUnnamedModalWarning,\n  type ModalRequestOpen,\n  type ModalSurfaceContextValue,\n  type ModalTrigger,\n} from './Dialog.shared';\n\n/**\n * Why a {@link Dialog} asks to open or close: `trigger` (`Dialog.Trigger`), `close`\n * (`Dialog.Close`), `close-button` (the built-in Close button), `escape`, `outside-press` (the\n * backdrop). The shared `ModalOpenChangeReason`.\n */\nexport type DialogOpenChangeReason = ModalOpenChangeReason;\n\n/** The second argument of a {@link Dialog}'s `onOpenChange`: the reason and the DOM event. */\nexport type DialogOpenChangeDetails = OpenChangeDetails<DialogOpenChangeReason>;\n\n/**\n * How a {@link Dialog} blocks the page (the shared `ModalType`; Drawer reuses it when it gains\n * `modalType`).\n */\nexport type DialogModalType = ModalType;\n\n/** Properties for the Dialog component. */\nexport interface DialogProps {\n  /**\n   * Controlled open state of the dialog. The surface renders only in the browser: an open dialog\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Default open state for uncontrolled usage. The surface renders only in the browser: a dialog\n   * open by default is closed in the server HTML and opens once it has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the new open state when it changes. `details.reason` tells how — `trigger`,\n   * `close` (a `.Close` part), `close-button` (the built-in Close button), `escape` or\n   * `outside-press` (the backdrop) — so a controlled dialog can refuse only some ways of closing\n   * (for example keep a form with unsaved changes open on `outside-press`); `details.event` is the\n   * DOM event behind the request. WaveUI always passes `details`; it is typed optional until 1.0\n   * so that code which calls this prop itself keeps compiling.\n   *\n   * Fires only when the value changes; a controlled dialog stays as it is until the parent updates\n   * `open`.\n   */\n  onOpenChange?: (open: boolean, details?: DialogOpenChangeDetails) => void;\n  /**\n   * `modal`: a backdrop press, Escape, the Close button and `Dialog.Close` close it. `alert`: a\n   * confirmation that needs an answer — `role=\"alertdialog\"`, and a backdrop press does not close\n   * it (Escape still does). Initial focus goes to the first focusable element, the built-in Close\n   * button; give the least destructive action `autoFocus` to focus it instead. (`'non-modal'` is\n   * planned.)\n   * @default 'modal'\n   */\n  modalType?: DialogModalType;\n  /**\n   * Where focus goes when the dialog closes, if it can take focus. Otherwise focus returns to the\n   * element that had focus when the dialog opened, then to the trigger, then to an element next to\n   * where that opener was (the next row's action after a confirm dialog deleted the row). Use it to\n   * send focus somewhere else.\n   */\n  finalFocusRef?: React.RefObject<HTMLElement | null>;\n  /** `Dialog.Trigger` and `Dialog.Content`. */\n  children: React.ReactNode;\n}\n\n/** Properties for the DialogContent sub-component. */\nexport interface DialogContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /**\n   * Title rendered as the dialog's heading; it names the dialog (`aria-labelledby`). Without it,\n   * render a `Dialog.Title` or pass `aria-label`/`aria-labelledby`. A title that renders nothing\n   * (`''`, `[]`, `true`) counts as none.\n   */\n  title?: React.ReactNode;\n  /** Maximum width of the dialog: 400px (`small`) or 600px (`medium`); it never exceeds the viewport.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * Accessible name of the built-in Close button (an icon-only button). Localize it with the\n   * page's language.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /** Content rendered inside the dialog body (put `Dialog.Footer` here as well). */\n  children: React.ReactNode;\n  /** Ref to the dialog surface (`role=\"dialog\"`, or `alertdialog` with `modalType=\"alert\"`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the DialogFooter sub-component. */\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Footer content, typically action buttons (wrap closing buttons in `Dialog.Close`). */\n  children: React.ReactNode;\n  /** Ref to the footer element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the DialogTitle sub-component. */\nexport interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /** The title; any content. */\n  children: React.ReactNode;\n  /** Ref to the heading element. */\n  ref?: React.Ref<HTMLHeadingElement>;\n}\n\n/** Props a `Dialog.Trigger` puts on its element (and passes to a render-prop child). */\nexport interface DialogTriggerRenderProps extends React.HTMLAttributes<HTMLElement> {\n  'aria-haspopup': 'dialog';\n  'aria-expanded': boolean;\n  /** The dialog surface's id, while the dialog is open. */\n  'aria-controls'?: string;\n  onClick: React.MouseEventHandler<HTMLElement>;\n  /** A callback ref, so the props spread onto any element type. */\n  ref: React.RefCallback<HTMLElement>;\n}\n\n/** Properties for the DialogTrigger sub-component. */\nexport interface DialogTriggerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  /**\n   * The element that opens the dialog. A single element receives the trigger props (merged with\n   * its own: handlers composed, classes joined, its own `id` kept); a function receives them.\n   */\n  children: React.ReactNode | ((props: DialogTriggerRenderProps) => React.ReactNode);\n  /**\n   * `false` renders the 0.4 wrapper `<span>` around the children instead of merging the trigger\n   * props onto the child. The span carries the click handler; `aria-haspopup`, `aria-expanded`\n   * and `aria-controls` go to the first element in the tab order inside it.\n   * @default true\n   */\n  asChild?: boolean;\n  /** Ref to the trigger element (the child, or the wrapper span). */\n  ref?: React.Ref<HTMLElement>;\n}\n\n/** Props a `Dialog.Close` puts on its element (and passes to a render-prop child). */\nexport interface DialogCloseRenderProps extends React.HTMLAttributes<HTMLElement> {\n  onClick: React.MouseEventHandler<HTMLElement>;\n  /** A callback ref, so the props spread onto any element type. */\n  ref: React.RefCallback<HTMLElement>;\n}\n\n/** Properties for the DialogClose sub-component. */\nexport interface DialogCloseProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  /**\n   * The element that closes the dialog, typically a footer button. A single element receives an\n   * `onClick` composed with its own (its handler runs first; `preventDefault()` keeps the dialog\n   * open); a function receives the props.\n   */\n  children: React.ReactNode | ((props: DialogCloseRenderProps) => React.ReactNode);\n  /** `false` renders a wrapper `<span>` that closes the dialog on click. @default true */\n  asChild?: boolean;\n  /** Ref to the close element (the child, or the wrapper span). */\n  ref?: React.Ref<HTMLElement>;\n}\n\ninterface DialogContextValue {\n  open: boolean;\n  /** Asks the root to open or close, with the reason and event for `onOpenChange`. */\n  requestOpen: ModalRequestOpen;\n  /** The resolved `modalType`. */\n  modalType: DialogModalType;\n  /** The trigger element (`attach`) and the focus-restore target resolved from it (`focusRef`). */\n  trigger: ModalTrigger;\n  finalFocusRef: React.RefObject<HTMLElement | null> | undefined;\n  /** The id of the open dialog surface (for the trigger's `aria-controls`), or `undefined`. */\n  contentId: string | undefined;\n  /** Registers the surface's id while it is mounted; returns the unregister function. */\n  registerContentId: (id: string) => () => void;\n}\n\nconst DialogContext = React.createContext<DialogContextValue | null>(null);\nDialogContext.displayName = 'DialogContext';\n\nconst inertDialogContext: DialogContextValue = {\n  open: false,\n  requestOpen: () => {},\n  modalType: 'modal',\n  trigger: inertModalTrigger,\n  finalFocusRef: undefined,\n  contentId: undefined,\n  registerContentId: () => () => {},\n};\n\nfunction useDialogContext(componentName: string): DialogContextValue {\n  return useRequiredContext(DialogContext, componentName, 'Dialog', () => inertDialogContext);\n}\n\n// The root of `Dialog` (documented on the export below). A const arrow (like DrawerRoot): its type\n// can be named in consumers' declaration files, e.g. a story's `satisfies Meta<typeof Dialog>` (a\n// function declaration's `typeof` cannot, TS4023).\nconst DialogRoot = ({\n  open,\n  defaultOpen,\n  onOpenChange,\n  modalType = 'modal',\n  finalFocusRef,\n  children,\n}: DialogProps) => {\n  const [openState, requestOpen] = useModalOpenState(open, defaultOpen, onOpenChange);\n  // The surface lives in a portal, which renders only in the browser: until then (the server\n  // HTML, hydration) the dialog reports itself closed, so the trigger's aria-expanded never\n  // describes a dialog that is not there.\n  const isClient = useIsClient();\n  const isOpen = openState && isClient;\n  const trigger = useModalTrigger();\n  // After Dialog.Content's focus restore (a child's layout effects run first), start the trigger\n  // session, or end it and forget the trigger that opened it.\n  useModalTriggerSession(trigger, isOpen);\n  const [contentId, setContentId] = React.useState<string | undefined>(undefined);\n  const registerContentId = React.useCallback((id: string) => {\n    setContentId(id);\n    return () => setContentId((current) => (current === id ? undefined : current));\n  }, []);\n\n  const context = React.useMemo<DialogContextValue>(\n    () => ({\n      open: isOpen,\n      requestOpen,\n      modalType,\n      trigger,\n      finalFocusRef,\n      contentId,\n      registerContentId,\n    }),\n    [isOpen, requestOpen, modalType, trigger, finalFocusRef, contentId, registerContentId],\n  );\n\n  return <DialogContext.Provider value={context}>{children}</DialogContext.Provider>;\n};\nDialogRoot.displayName = 'Dialog';\n\n/**\n * Opens the dialog. Puts `aria-haspopup=\"dialog\"`, `aria-expanded`, `aria-controls` (while open), a\n * click handler and a ref on its single child (no wrapper element), or passes them to a\n * render-prop child. A custom child component must forward `ref` and spread its props; one that\n * does not is wrapped in a `<span>` automatically (with a development warning), the span that\n * `asChild={false}` renders. Focus returns to the trigger when the dialog closes (with several\n * triggers, to the one that opened it). On the span, the state ARIA goes to the first element in\n * the tab order inside it, and focus returns to that element (to the span when you made it the\n * trigger with a `role` such as `button` and `tabIndex={0}`, or when nothing inside it can take\n * focus).\n */\nexport const DialogTrigger = (props: DialogTriggerProps) => {\n  const { open, requestOpen, trigger, contentId } = useDialogContext('Dialog.Trigger');\n  return useModalTriggerPart<DialogTriggerRenderProps>(\n    { open, requestOpen, trigger, controlsId: contentId },\n    props,\n    'Dialog.Trigger',\n  );\n};\nDialogTrigger.displayName = 'DialogTrigger';\n\n/**\n * Closes the dialog: composes a click handler onto its single child (its own `onClick` runs first;\n * calling `preventDefault()` there keeps the dialog open), or passes it to a render-prop child.\n *\n * @example\n * <Dialog.Close><Button appearance=\"subtle\">Cancel</Button></Dialog.Close>\n */\nexport const DialogClose = (props: DialogCloseProps) => {\n  const { requestOpen } = useDialogContext('Dialog.Close');\n  return useModalClosePart<DialogCloseRenderProps>(requestOpen, props, 'Dialog.Close');\n};\nDialogClose.displayName = 'DialogClose';\n\nconst sizeClasses: Record<'small' | 'medium', string> = {\n  small: 'max-w-[400px]',\n  medium: 'max-w-[600px]',\n};\n\n/**\n * The dialog surface, rendered in a portal (inheriting the WaveProvider theme) while the dialog is\n * open: backdrop, title, Close button and a scrolling body. It takes the full width up to its\n * `size` and never exceeds the viewport (the body scrolls, also sideways for content wider than\n * the dialog). Its 1rem gap to the viewport edges is its own margin, so a margin in `className`\n * replaces the gap: with the width and height caps lifted as well and its height set to the\n * viewport's, it fills the viewport (a full-screen dialog). It is `role=\"dialog\"`, or\n * `role=\"alertdialog\"` when the Dialog has `modalType=\"alert\"` (a `role` you pass wins), and\n * carries `data-modal-type` with the resolved type.\n */\nexport const DialogContent = ({\n  title,\n  size = 'medium',\n  closeLabel = 'Close',\n  children,\n  className,\n  id,\n  ref,\n  ...rest\n}: DialogContentProps) => {\n  const { open, requestOpen, modalType, trigger, finalFocusRef, registerContentId } =\n    useDialogContext('Dialog.Content');\n  const generatedId = useId('wave-dialog');\n  const contentId = id ?? generatedId;\n  const propTitleId = useId('wave-dialog-title');\n  const titles = useTitleRegistry();\n\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const attachSurface = React.useCallback((node: HTMLDivElement | null) => {\n    surfaceRef.current = node;\n    setSurface(node);\n  }, []);\n  // Reports the surface's id to the root (the trigger's `aria-controls`) while it is mounted. A new\n  // `id` makes a new callback, which useMergedRefs re-attaches after the commit (re-registering).\n  const registerId = React.useCallback(\n    (node: HTMLDivElement | null) => (node ? registerContentId(contentId) : undefined),\n    [registerContentId, contentId],\n  );\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, attachSurface, registerId);\n\n  // An alert dialog needs an answer: a backdrop press does not close it (Escape still does).\n  const closesOnBackdropPress = modalType !== 'alert';\n  const backdropPress = useBackdropPress(surfaceRef, closesOnBackdropPress);\n  const onDismiss = useModalDismiss(requestOpen, 'Dialog', backdropPress.afterOutsidePress);\n  const layer = useModalLayer({\n    open,\n    onDismiss,\n    refs: [surfaceRef],\n    outsidePress: closesOnBackdropPress,\n    container: surface,\n    triggerRef: trigger.focusRef,\n    finalFocusRef,\n  });\n  useUnnamedModalWarning(open ? surface : null, titles.hasTitle, 'Dialog.Content', 'Dialog.Title');\n\n  // The height of the sticky Dialog.Footer, reserved as the body's scroll padding.\n  const [footerHeight, setFooterHeight] = React.useState<number | null>(null);\n  const surfaceContext = React.useMemo<ModalSurfaceContextValue>(\n    () => ({ ...titles.context, setFooterHeight }),\n    [titles.context],\n  );\n\n  if (!open) return null;\n\n  const hasTitle = slotRendersContent(title);\n\n  return (\n    <Portal layerId={layer.layerId}>\n      <div\n        className={cn(\n          dialogContentClassNames.backdrop,\n          'fixed inset-0 flex items-center justify-center bg-backdrop',\n        )}\n        onMouseDown={backdropPress.onMouseDown}\n      >\n        <div\n          ref={mergedRef}\n          role={modalType === 'alert' ? 'alertdialog' : 'dialog'}\n          id={contentId}\n          aria-labelledby={hasTitle ? propTitleId : titles.titleId}\n          tabIndex={-1}\n          data-modal-type={modalType}\n          {...rest}\n          className={cn(\n            dialogContentClassNames.root,\n            // The border marks the surface where the shadow cannot: in high contrast the page,\n            // the backdrop and the surface are black, and forced colors drop shadows. The 1rem gap\n            // to the viewport edges is the surface's own margin, not the backdrop's padding, so a\n            // margin in `className` replaces it and a full-screen dialog can reach the edges. Its\n            // minimum width is zero, so content wider than the room inside the gap scrolls in the\n            // body instead of pushing the surface over the gap.\n            'relative m-4 flex min-w-0 max-h-[calc(100dvh-2rem)] w-full flex-col rounded-lg border border-border bg-background p-6 text-foreground shadow-64',\n            sizeClasses[size],\n            className,\n          )}\n        >\n          <ModalSurfaceContext.Provider value={surfaceContext}>\n            {hasTitle && (\n              <h2\n                id={propTitleId}\n                className={cn(dialogTitleClassNames.root, 'pe-8 text-subtitle-1 font-semibold')}\n              >\n                {title}\n              </h2>\n            )}\n            <Button\n              appearance=\"subtle\"\n              size=\"small\"\n              icon={<DismissIcon />}\n              aria-label={closeLabel}\n              onClick={(event) =>\n                requestOpen(false, { reason: 'close-button', event: event.nativeEvent })\n              }\n              className={cn(\n                dialogContentClassNames.closeButton,\n                'absolute end-4 top-4 text-muted-foreground',\n              )}\n            />\n            <div\n              // The scroll padding keeps a focused field above the sticky footer (WCAG 2.4.11).\n              className={cn(\n                dialogContentClassNames.body,\n                '-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1',\n              )}\n              style={\n                footerHeight === null\n                  ? undefined\n                  : ({ '--wave-dialog-footer-height': `${footerHeight}px` } as React.CSSProperties)\n              }\n            >\n              {children}\n            </div>\n          </ModalSurfaceContext.Provider>\n        </div>\n      </div>\n    </Portal>\n  );\n};\nDialogContent.displayName = 'DialogContent';\n\n/**\n * A heading that names the dialog (`aria-labelledby`), for rich titles or custom layouts. Render it\n * inside `Dialog.Content` (instead of the `title` prop). Like the `title` heading it reserves end\n * padding (`pe-8`) so a long first line stays clear of the Close button; a `className` padding wins.\n */\nexport const DialogTitle = ({ id, className, children, ref, ...rest }: DialogTitleProps) => {\n  const { id: titleId, ref: titleRef } = useModalTitle('Dialog.Title', 'Dialog.Content', id, ref);\n  return (\n    <h2\n      {...rest}\n      id={titleId}\n      ref={titleRef}\n      className={cn(\n        dialogTitleClassNames.root,\n        'pe-8 text-subtitle-1 font-semibold text-foreground',\n        className,\n      )}\n    >\n      {children}\n    </h2>\n  );\n};\nDialogTitle.displayName = 'DialogTitle';\n\n/**\n * `Dialog.Footer` inside `Dialog.Content`. The body is `p-1`, and sticky positioning stops at its\n * padding edge: `-bottom-1` with `-mb-1 pb-2` covers the body's bottom padding, `-mx-1 px-1` its\n * focus-ring inset, and `pt-3` separates the actions from the content scrolling under them.\n */\nconst stickyFooterClasses =\n  'sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3';\n\n/**\n * `Dialog.Footer` where no body reserves its height as scroll padding (a Drawer's body): a plain\n * action row, which never covers a focused field.\n */\nconst footerRowClasses = 'mt-6 flex justify-end gap-2';\n\n/**\n * Action row at the end of the dialog body. It stays where you render it in the DOM and sticks to\n * the bottom of the body while long content scrolls under it (with an opaque background); the body\n * reserves its height as scroll padding, so a focused field is never hidden behind it. Inside a\n * `<form>` that wraps the fields and the footer it sticks too: make it the form's last child.\n * Render it inside `Dialog.Content`: outside it, it would stay on the page while the dialog is\n * closed (a development warning says so). Inside a `Drawer`, whose body reserves no footer height,\n * it does not stick: it is an action row at the end of the content. Render one `Dialog.Footer` per\n * `Dialog.Content`: with two at once, the body reserves the height of the one measured last, and\n * unmounting either clears it until the other resizes (swapping one footer for another is fine).\n */\nexport const DialogFooter = ({ children, className, ref, ...rest }: DialogFooterProps) => {\n  const surfaceContext = React.useContext(ModalSurfaceContext);\n  const outsideContent = surfaceContext === null;\n  const setFooterHeight = surfaceContext?.setFooterHeight;\n  const [footer, setFooter] = React.useState<HTMLDivElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, setFooter);\n\n  React.useEffect(() => {\n    if (!outsideContent) return;\n    warnOnce(\n      'Dialog.Footer:outside-content',\n      'Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.',\n    );\n  }, [outsideContent]);\n\n  // Reports the footer's border-box height to Dialog.Content. The observer's first callback,\n  // delivered before the next paint, supplies the first value; without ResizeObserver the body\n  // keeps its default scroll padding.\n  React.useLayoutEffect(() => {\n    if (!footer || !setFooterHeight || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[entries.length - 1];\n      if (!entry) return;\n      setFooterHeight(entry.borderBoxSize?.[0]?.blockSize ?? footer.offsetHeight);\n    });\n    observer.observe(footer, { box: 'border-box' });\n    return () => {\n      observer.disconnect();\n      setFooterHeight(null);\n    };\n  }, [footer, setFooterHeight]);\n\n  return (\n    <div\n      ref={mergedRef}\n      {...rest}\n      // Sticky only where the surface reserves the footer's height (Dialog.Content).\n      className={cn(\n        dialogFooterClassNames.root,\n        setFooterHeight ? stickyFooterClasses : footerRowClasses,\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\nDialogFooter.displayName = 'DialogFooter';\n\n/**\n * A modal dialog (Fluent UI v2 style): `Dialog` holds the open state; `Dialog.Trigger` opens it and\n * `Dialog.Content` renders the surface in a portal while open.\n *\n * - **Modal**: focus moves into the dialog and Tab stays inside it (toasts included), the rest of\n *   the page is `inert` (instead of `aria-modal`, so toasts and live regions stay announced), and\n *   the page does not scroll.\n * - **Closing**: Escape (only the topmost layer: a popup opened inside closes first), a click on\n *   the backdrop (a drag that starts inside does not close it), the Close button and `Dialog.Close`.\n *   `onOpenChange` gets the reason as its second argument (`details.reason`), so a controlled\n *   dialog can refuse some of them. A backdrop press blurs the focused field before the dialog\n *   closes, so a typed value is committed as with the Close button; when a controlled dialog\n *   refuses the press, the field gets focus back (an alert dialog's press leaves focus where it\n *   was). Focus returns to the first of these that can take focus: `finalFocusRef`, the element\n *   that had focus when the dialog opened, the trigger, an element next to where that opener was.\n * - **Alert dialogs**: `modalType=\"alert\"` renders `role=\"alertdialog\"` for a confirmation that\n *   needs an answer; a backdrop press does not close it.\n * - **Footer**: `Dialog.Footer` sticks to the bottom of the scrolling body, and the body keeps a\n *   focused field above it.\n * - **Naming**: give `Dialog.Content` a `title`, a `Dialog.Title`, or `aria-label`.\n *\n * The sub-components are also exported under flat names (`DialogTrigger`, `DialogContent`,\n * `DialogFooter`, `DialogTitle`, `DialogClose`) for React Server Components, which cannot use the\n * dotted form; dotted access (`Dialog.Content`) needs a client file.\n *\n * @example\n * <Dialog>\n *   <Dialog.Trigger><Button>Delete</Button></Dialog.Trigger>\n *   <Dialog.Content title=\"Delete file?\">\n *     This cannot be undone.\n *     <Dialog.Footer>\n *       <Dialog.Close><Button appearance=\"subtle\">Cancel</Button></Dialog.Close>\n *       <Button appearance=\"primary\" onClick={remove}>Delete</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog>\n */\nexport const Dialog = /* @__PURE__ */ Object.assign(DialogRoot, {\n  Trigger: DialogTrigger,\n  Content: DialogContent,\n  Footer: DialogFooter,\n  Title: DialogTitle,\n  Close: DialogClose,\n});\n"],"mappings":"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"}