@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/dist/components/layout/Flex.mjs

@@ -0,0 +1,54 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { hasWarned as t, isDev as n, warnOnce as r } from "../../lib/dev.mjs";
+import { getTabbableElements as i } from "../../lib/focus.mjs";
+import { useMergedRefs as a } from "../../hooks/useMergedRefs.mjs";
+import * as o from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/layout/Flex.tsx
+var c = {
+	row: "flex-row",
+	"row-reverse": "flex-row-reverse",
+	column: "flex-col",
+	"column-reverse": "flex-col-reverse"
+}, l = {
+	nowrap: "flex-nowrap",
+	wrap: "flex-wrap",
+	"wrap-reverse": "flex-wrap-reverse"
+}, u = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end",
+	stretch: "items-stretch",
+	baseline: "items-baseline"
+}, d = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between",
+	around: "justify-around",
+	evenly: "justify-evenly"
+}, f = "Flex:reverse-focus-order", p = {
+	none: "gap-0",
+	xs: "gap-1",
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4",
+	xl: "gap-6"
+}, m = (m) => {
+	let { as: h, direction: g = "row", wrap: _, align: v, justify: y, gap: b, inline: x, grow: S, shrink: C, className: w, children: T, ref: E, ...D } = m, O = h ?? "div", k = g === "row-reverse" || g === "column-reverse" || _ === "wrap-reverse", A = o.useRef(null), j = a(E, A);
+	return o.useEffect(() => {
+		let e = A.current;
+		n && k && e && !t(f) && i(e).length > 0 && r(f, "Flex: a reversed direction or wrap (`row-reverse`, `column-reverse`, `wrap-reverse`) changes the visual order only, so keyboard and screen-reader order run opposite to what users see. Reorder the DOM for focusable content instead.");
+	}), /* @__PURE__ */ s(O, {
+		ref: j,
+		className: e(x ? "inline-flex" : "flex", c[g], _ && l[_], v && u[v], y && d[y], b && p[b], S && "grow", C === !0 && "shrink", C === !1 && "shrink-0", w),
+		...D,
+		children: T
+	});
+};
+m.displayName = "Flex";
+//#endregion
+export { m as Flex };
+
+//# sourceMappingURL=Flex.mjs.map

package/dist/components/layout/Flex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.mjs","names":["React","directionMap","wrapMap","alignMap","justifyMap","REVERSE_WARNING","gapMap","Flex","rest","props","Component","as","reversed","direction","wrap","rootRef","mergedRef","useMergedRefs","ref","root","isDev","getTabbableElements","warnOnce","cn","inline","align","justify","gap","grow","shrink","className"],"sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\n\nconst directionMap = {\n  row: 'flex-row',\n  'row-reverse': 'flex-row-reverse',\n  column: 'flex-col',\n  'column-reverse': 'flex-col-reverse',\n} as const;\n\nconst wrapMap = {\n  nowrap: 'flex-nowrap',\n  wrap: 'flex-wrap',\n  'wrap-reverse': 'flex-wrap-reverse',\n} as const;\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n  baseline: 'items-baseline',\n} as const;\n\nconst justifyMap = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const;\n\n/** Warn-once key of the \"reversed order with focusable content\" diagnostic. */\nconst REVERSE_WARNING = 'Flex:reverse-focus-order';\n\nconst gapMap = {\n  none: 'gap-0',\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-3',\n  lg: 'gap-4',\n  xl: 'gap-6',\n} as const;\n\n/**\n * The Flex's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`).\n */\nexport interface FlexOwnProps {\n  /**\n   * Flex direction.\n   *\n   * **Accessibility:** `row-reverse` and `column-reverse` reverse the *visual* order only. Tab order\n   * and screen-reader reading order still follow the DOM, so they run opposite to what sighted\n   * users see (WCAG 1.3.2, 2.4.3). For focusable or meaningful content, reorder the DOM instead; a\n   * development warning fires when a reversed Flex contains focusable elements.\n   * @default 'row'\n   */\n  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  /**\n   * Flex wrap behavior. `wrap-reverse` reverses the visual line order only (see `direction`).\n   */\n  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';\n  /** Cross-axis alignment of items. */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** Main-axis justification of items. */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n  /** Gap size between flex items. */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Whether to use inline-flex instead of flex. */\n  inline?: boolean;\n  /** Whether the flex container should grow to fill available space in its own flex parent. */\n  grow?: boolean;\n  /**\n   * How the container shrinks in its own flex parent: `false` prevents shrinking (`shrink-0`),\n   * `true` sets `shrink` explicitly (the CSS default, useful to undo an inherited `shrink-0`).\n   * Unset emits no class.\n   */\n  shrink?: boolean;\n}\n\n/**\n * Props of {@link Flex} rendered as `C` (default `'div'`). `FlexProps` without a type argument is\n * the 0.4 name: the props of a Flex rendered as a `<div>`, including `ref`.\n */\nexport type FlexProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, FlexOwnProps>;\n\ntype FlexImplProps = FlexOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * A flexbox layout container with token-based gaps.\n *\n * Reversed directions (`row-reverse`, `column-reverse`, `wrap=\"wrap-reverse\"`) change the visual\n * order only: keep them for decorative or static content and reorder the DOM for anything\n * focusable (a development warning fires otherwise).\n *\n * @example\n * <Flex gap=\"md\" align=\"center\" justify=\"between\">\n *   <Text>Title</Text>\n *   <Button>Action</Button>\n * </Flex>\n */\nexport const Flex: PolymorphicComponent<'div', FlexOwnProps> = (props) => {\n  const {\n    as,\n    direction = 'row',\n    wrap,\n    align,\n    justify,\n    gap,\n    inline,\n    grow,\n    shrink,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props as FlexImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  const reversed =\n    direction === 'row-reverse' || direction === 'column-reverse' || wrap === 'wrap-reverse';\n\n  const rootRef = React.useRef<HTMLElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLElement>(ref, rootRef);\n\n  // Development diagnostic (C-DEV): children change without prop changes, so check every commit\n  // until the warning has fired once; after that the DOM scan is skipped.\n  React.useEffect(() => {\n    const root = rootRef.current;\n    if (!isDev || !reversed || !root || hasWarned(REVERSE_WARNING)) return;\n    if (getTabbableElements(root).length > 0) {\n      warnOnce(\n        REVERSE_WARNING,\n        'Flex: a reversed direction or wrap (`row-reverse`, `column-reverse`, `wrap-reverse`) changes the visual order only, so keyboard and screen-reader order run opposite to what users see. Reorder the DOM for focusable content instead.',\n      );\n    }\n  });\n\n  return (\n    <Component\n      ref={mergedRef}\n      className={cn(\n        inline ? 'inline-flex' : 'flex',\n        directionMap[direction],\n        wrap && wrapMap[wrap],\n        align && alignMap[align],\n        justify && justifyMap[justify],\n        gap && gapMap[gap],\n        grow && 'grow',\n        shrink === true && 'shrink',\n        shrink === false && 'shrink-0',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\nFlex.displayName = 'Flex';\n"],"mappings":";;;;;;;;AAOA,IAAMC,IAAe;CACnB,KAAK;CACL,eAAe;CACf,QAAQ;CACR,kBAAkB;AACpB,GAEMC,IAAU;CACd,QAAQ;CACR,MAAM;CACN,gBAAgB;AAClB,GAEMC,IAAW;CACf,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,UAAU;AACZ,GAEMC,IAAa;CACjB,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,QAAQ;CACR,QAAQ;AACV,GAGMC,IAAkB,4BAElBC,IAAS;CACb,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAgEaC,KAAmD,MAAU;CACxE,IAAM,EACJ,OACA,eAAY,OACZ,SACA,UACA,YACA,QACA,WACA,SACA,WACA,cACA,aACA,QACA,GAAGC,MACDC,GACEC,IAA+BC,KAAM,OACrCC,IACJC,MAAc,iBAAiBA,MAAc,oBAAoBC,MAAS,gBAEtEC,IAAUf,EAAM,OAA2B,IAAI,GAC/CgB,IAAYC,EAA2BC,GAAKH,CAAO;CAezD,OAXAf,EAAM,gBAAgB;EACpB,IAAMmB,IAAOJ,EAAQ;EACrB,AAAKK,KAAUR,KAAaO,KAAQ,GAAUd,CAAe,KACzDgB,EAAoBF,CAAI,CAAC,CAAC,SAAS,KACrCG,EACEjB,GACA,wOACF;CAEJ,CAAC,GAGC,kBAACK,GAAD;EACE,KAAKM;EACL,WAAWO,EACTC,IAAS,gBAAgB,QACzBvB,EAAaY,IACbC,KAAQZ,EAAQY,IAChBW,KAAStB,EAASsB,IAClBC,KAAWtB,EAAWsB,IACtBC,KAAOrB,EAAOqB,IACdC,KAAQ,QACRC,MAAW,MAAQ,UACnBA,MAAW,MAAS,YACpBC,CACF;EACA,GAAItB;EAEH;CACQ,CAAA;AAEf;AACA,EAAK,cAAc"}

package/dist/components/layout/Grid.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i={1:`grid-cols-1`,2:`grid-cols-2`,3:`grid-cols-3`,4:`grid-cols-4`,5:`grid-cols-5`,6:`grid-cols-6`,12:`grid-cols-12`},a={none:`gap-0`,xs:`gap-1`,sm:`gap-2`,md:`gap-3`,lg:`gap-4`,xl:`gap-6`},o={none:`gap-x-0`,xs:`gap-x-1`,sm:`gap-x-2`,md:`gap-x-3`,lg:`gap-x-4`,xl:`gap-x-6`},s={none:`gap-y-0`,xs:`gap-y-1`,sm:`gap-y-2`,md:`gap-y-3`,lg:`gap-y-4`,xl:`gap-y-6`},c={start:`items-start`,center:`items-center`,end:`items-end`,stretch:`items-stretch`},l={start:`justify-items-start`,center:`justify-items-center`,end:`justify-items-end`,stretch:`justify-items-stretch`},u=e=>{let{as:n,columns:u,rows:d,gap:f,columnGap:p,rowGap:m,align:h,justify:g,className:_,style:v,children:y,ref:b,...x}=e,S=n??`div`,C=d?{gridTemplateRows:`repeat(${d}, minmax(0, 1fr))`}:void 0;return(0,r.jsx)(S,{ref:b,className:t.cn(`grid`,u&&i[u],f&&a[f],p&&o[p],m&&s[m],h&&c[h],g&&l[g],_),style:{...C,...v},...x,children:y})};u.displayName=`Grid`,exports.Grid=u;
+//# sourceMappingURL=Grid.cjs.map

package/dist/components/layout/Grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.cjs","names":["cn","require_runtime","require_cn","react","react_jsx_runtime","columnsMap","gapMap","columnGapMap","rowGapMap","alignMap","justifyMap","Grid","rest","props","Component","as","rowStyle","rows","columns","gap","columnGap","rowGap","align","justify","className","style"],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\n\nconst columnsMap = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-2',\n  3: 'grid-cols-3',\n  4: 'grid-cols-4',\n  5: 'grid-cols-5',\n  6: 'grid-cols-6',\n  12: 'grid-cols-12',\n} as const;\n\nconst gapMap = {\n  none: 'gap-0',\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-3',\n  lg: 'gap-4',\n  xl: 'gap-6',\n} as const;\n\nconst columnGapMap = {\n  none: 'gap-x-0',\n  xs: 'gap-x-1',\n  sm: 'gap-x-2',\n  md: 'gap-x-3',\n  lg: 'gap-x-4',\n  xl: 'gap-x-6',\n} as const;\n\nconst rowGapMap = {\n  none: 'gap-y-0',\n  xs: 'gap-y-1',\n  sm: 'gap-y-2',\n  md: 'gap-y-3',\n  lg: 'gap-y-4',\n  xl: 'gap-y-6',\n} as const;\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n} as const;\n\nconst justifyMap = {\n  start: 'justify-items-start',\n  center: 'justify-items-center',\n  end: 'justify-items-end',\n  stretch: 'justify-items-stretch',\n} as const;\n\n/**\n * The Grid's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`).\n */\nexport interface GridOwnProps {\n  /** Number of grid columns. */\n  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 12;\n  /** Number of equal-height grid rows (`grid-template-rows`, merged with `style`). */\n  rows?: number;\n  /** Uniform gap size between grid items. */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Horizontal gap size between grid columns. */\n  columnGap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Vertical gap size between grid rows. */\n  rowGap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Vertical alignment of items within the grid. */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Horizontal alignment of items within the grid. */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n}\n\n/**\n * Props of {@link Grid} rendered as `C` (default `'div'`). `GridProps` without a type argument is\n * the 0.4 name: the props of a Grid rendered as a `<div>`, including `ref`.\n */\nexport type GridProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, GridOwnProps>;\n\ntype GridImplProps = GridOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * A CSS grid layout with a fixed column count and token gaps.\n *\n * @example\n * <Grid columns={3} gap=\"md\">\n *   <Card>…</Card>\n *   <Card>…</Card>\n *   <Card>…</Card>\n * </Grid>\n */\nexport const Grid: PolymorphicComponent<'div', GridOwnProps> = (props) => {\n  const {\n    as,\n    columns,\n    rows,\n    gap,\n    columnGap,\n    rowGap,\n    align,\n    justify,\n    className,\n    style,\n    children,\n    ref,\n    ...rest\n  } = props as GridImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  const rowStyle = rows ? { gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))` } : undefined;\n\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        'grid',\n        columns && columnsMap[columns],\n        gap && gapMap[gap],\n        columnGap && columnGapMap[columnGap],\n        rowGap && rowGapMap[rowGap],\n        align && alignMap[align],\n        justify && justifyMap[justify],\n        className,\n      )}\n      style={{ ...rowStyle, ...style }}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\nGrid.displayName = 'Grid';\n"],"mappings":"8KAIA,IAAMK,EAAa,CACjB,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,GAAI,cACN,EAEMC,EAAS,CACb,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,OACN,EAEMC,EAAe,CACnB,KAAM,UACN,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,SACN,EAEMC,EAAY,CAChB,KAAM,UACN,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,UACJ,GAAI,SACN,EAEMC,EAAW,CACf,MAAO,cACP,OAAQ,eACR,IAAK,YACL,QAAS,eACX,EAEMC,EAAa,CACjB,MAAO,sBACP,OAAQ,uBACR,IAAK,oBACL,QAAS,uBACX,EA6CaC,EAAmD,GAAU,CACxE,GAAM,CACJ,KACA,UACA,OACA,MACA,YACA,SACA,QACA,UACA,YACA,QACA,WACA,MACA,GAAGC,GACDC,EACEC,EAA+BC,GAAM,MACrCC,EAAWC,EAAO,CAAE,iBAAkB,UAAUA,EAAK,kBAAmB,EAAI,IAAA,GAElF,OACE,EAAAb,EAAA,IAAA,CAACU,EAAD,CACO,MACL,UAAWd,EAAAA,GACT,OACAkB,GAAWb,EAAWa,GACtBC,GAAOb,EAAOa,GACdC,GAAab,EAAaa,GAC1BC,GAAUb,EAAUa,GACpBC,GAASb,EAASa,GAClBC,GAAWb,EAAWa,GACtBC,CACF,EACA,MAAO,CAAE,GAAGR,EAAU,GAAGS,CAAM,EAC/B,GAAIb,EAEH,UACQ,CAAA,CAEf,EACA,EAAK,YAAc"}

package/dist/components/layout/Grid.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/layout/Grid.tsx
+var n = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-3",
+	4: "grid-cols-4",
+	5: "grid-cols-5",
+	6: "grid-cols-6",
+	12: "grid-cols-12"
+}, r = {
+	none: "gap-0",
+	xs: "gap-1",
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4",
+	xl: "gap-6"
+}, i = {
+	none: "gap-x-0",
+	xs: "gap-x-1",
+	sm: "gap-x-2",
+	md: "gap-x-3",
+	lg: "gap-x-4",
+	xl: "gap-x-6"
+}, a = {
+	none: "gap-y-0",
+	xs: "gap-y-1",
+	sm: "gap-y-2",
+	md: "gap-y-3",
+	lg: "gap-y-4",
+	xl: "gap-y-6"
+}, o = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end",
+	stretch: "items-stretch"
+}, s = {
+	start: "justify-items-start",
+	center: "justify-items-center",
+	end: "justify-items-end",
+	stretch: "justify-items-stretch"
+}, c = (c) => {
+	let { as: l, columns: u, rows: d, gap: f, columnGap: p, rowGap: m, align: h, justify: g, className: _, style: v, children: y, ref: b, ...x } = c, S = l ?? "div", C = d ? { gridTemplateRows: `repeat(${d}, minmax(0, 1fr))` } : void 0;
+	return /* @__PURE__ */ t(S, {
+		ref: b,
+		className: e("grid", u && n[u], f && r[f], p && i[p], m && a[m], h && o[h], g && s[g], _),
+		style: {
+			...C,
+			...v
+		},
+		...x,
+		children: y
+	});
+};
+c.displayName = "Grid";
+//#endregion
+export { c as Grid };
+
+//# sourceMappingURL=Grid.mjs.map

package/dist/components/layout/Grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.mjs","names":["columnsMap","gapMap","columnGapMap","rowGapMap","alignMap","justifyMap","Grid","rest","props","Component","as","rowStyle","rows","cn","columns","gap","columnGap","rowGap","align","justify","className","style"],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\n\nconst columnsMap = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-2',\n  3: 'grid-cols-3',\n  4: 'grid-cols-4',\n  5: 'grid-cols-5',\n  6: 'grid-cols-6',\n  12: 'grid-cols-12',\n} as const;\n\nconst gapMap = {\n  none: 'gap-0',\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-3',\n  lg: 'gap-4',\n  xl: 'gap-6',\n} as const;\n\nconst columnGapMap = {\n  none: 'gap-x-0',\n  xs: 'gap-x-1',\n  sm: 'gap-x-2',\n  md: 'gap-x-3',\n  lg: 'gap-x-4',\n  xl: 'gap-x-6',\n} as const;\n\nconst rowGapMap = {\n  none: 'gap-y-0',\n  xs: 'gap-y-1',\n  sm: 'gap-y-2',\n  md: 'gap-y-3',\n  lg: 'gap-y-4',\n  xl: 'gap-y-6',\n} as const;\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n} as const;\n\nconst justifyMap = {\n  start: 'justify-items-start',\n  center: 'justify-items-center',\n  end: 'justify-items-end',\n  stretch: 'justify-items-stretch',\n} as const;\n\n/**\n * The Grid's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`).\n */\nexport interface GridOwnProps {\n  /** Number of grid columns. */\n  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 12;\n  /** Number of equal-height grid rows (`grid-template-rows`, merged with `style`). */\n  rows?: number;\n  /** Uniform gap size between grid items. */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Horizontal gap size between grid columns. */\n  columnGap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Vertical gap size between grid rows. */\n  rowGap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Vertical alignment of items within the grid. */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Horizontal alignment of items within the grid. */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n}\n\n/**\n * Props of {@link Grid} rendered as `C` (default `'div'`). `GridProps` without a type argument is\n * the 0.4 name: the props of a Grid rendered as a `<div>`, including `ref`.\n */\nexport type GridProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, GridOwnProps>;\n\ntype GridImplProps = GridOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * A CSS grid layout with a fixed column count and token gaps.\n *\n * @example\n * <Grid columns={3} gap=\"md\">\n *   <Card>…</Card>\n *   <Card>…</Card>\n *   <Card>…</Card>\n * </Grid>\n */\nexport const Grid: PolymorphicComponent<'div', GridOwnProps> = (props) => {\n  const {\n    as,\n    columns,\n    rows,\n    gap,\n    columnGap,\n    rowGap,\n    align,\n    justify,\n    className,\n    style,\n    children,\n    ref,\n    ...rest\n  } = props as GridImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  const rowStyle = rows ? { gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))` } : undefined;\n\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        'grid',\n        columns && columnsMap[columns],\n        gap && gapMap[gap],\n        columnGap && columnGapMap[columnGap],\n        rowGap && rowGapMap[rowGap],\n        align && alignMap[align],\n        justify && justifyMap[justify],\n        className,\n      )}\n      style={{ ...rowStyle, ...style }}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\nGrid.displayName = 'Grid';\n"],"mappings":";;;;;AAIA,IAAMA,IAAa;CACjB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,IAAI;AACN,GAEMC,IAAS;CACb,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEMC,IAAe;CACnB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEMC,IAAY;CAChB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEMC,IAAW;CACf,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;AACX,GAEMC,IAAa;CACjB,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;AACX,GA6CaC,KAAmD,MAAU;CACxE,IAAM,EACJ,OACA,YACA,SACA,QACA,cACA,WACA,UACA,YACA,cACA,UACA,aACA,QACA,GAAGC,MACDC,GACEC,IAA+BC,KAAM,OACrCC,IAAWC,IAAO,EAAE,kBAAkB,UAAUA,EAAK,mBAAmB,IAAI,KAAA;CAElF,OACE,kBAACH,GAAD;EACO;EACL,WAAWI,EACT,QACAC,KAAWd,EAAWc,IACtBC,KAAOd,EAAOc,IACdC,KAAad,EAAac,IAC1BC,KAAUd,EAAUc,IACpBC,KAASd,EAASc,IAClBC,KAAWd,EAAWc,IACtBC,CACF;EACA,OAAO;GAAE,GAAGT;GAAU,GAAGU;EAAM;EAC/B,GAAId;EAEH;CACQ,CAAA;AAEf;AACA,EAAK,cAAc"}

package/dist/components/layout/Overflow.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("../../hooks/useMergedRefs.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=[];function s(){return i.useReducer(e=>e+1,0)[1]}function c(){return typeof ResizeObserver<`u`}function l(e,t){return e===t?0:e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1}var u={childList:!0,subtree:!0};function d(e,t){return e.length===t.length&&e.every((e,n)=>e===t[n])}function f(e){n.warnOnce(`Overflow:duplicate:${e}`,`Overflow: several items share the itemId "${e}". Item ids must be unique within an Overflow; items with the same itemId are hidden and shown together.`)}var p=()=>{};function m(e){let t=0,n=0,r=e.ownerDocument.defaultView;if(r){let i=r.getComputedStyle(e);t=(parseFloat(i.paddingLeft)||0)+(parseFloat(i.paddingRight)||0),n=parseFloat(i.columnGap)||0}return{available:e.clientWidth-t,gap:n}}var h=class{container=null;button=null;buttonWidth=0;items=new Map;itemIdCounts=new Map;widths=new WeakMap;listeners=new Set;hidden=o;pinned=!1;order=[];connected=!1;observer=null;reorderObserver=null;removeResizeListener=null;subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});getSnapshot=()=>this.hidden;getServerSnapshot=()=>o;getPinned=()=>this.pinned;getServerPinned=()=>!1;connect=()=>{if(this.connected=!0,c()){this.observer=new ResizeObserver(()=>this.measure());for(let e of this.observedElements())this.observer.observe(e)}else if(typeof window<`u`){let e=()=>this.measure();window.addEventListener(`resize`,e),this.removeResizeListener=()=>window.removeEventListener(`resize`,e)}return typeof MutationObserver<`u`&&(this.reorderObserver=new MutationObserver(()=>this.checkOrder()),this.container&&this.reorderObserver.observe(this.container,u)),this.measure(),()=>{this.connected=!1,this.observer?.disconnect(),this.observer=null,this.reorderObserver?.disconnect(),this.reorderObserver=null,this.removeResizeListener?.(),this.removeResizeListener=null}};setContainer=e=>{e!==this.container&&(this.container&&this.observer?.unobserve(this.container),this.container=e,e&&this.observer?.observe(e),this.reorderObserver&&(this.reorderObserver.disconnect(),e&&this.reorderObserver.observe(e,u)),this.measure())};checkOrder=()=>{let e=this.order;for(let t=1;t<e.length;t++)if(l(e[t-1],e[t])>0){this.measure();return}};setButton=e=>{e!==this.button&&(this.button&&this.observer?.unobserve(this.button),this.button=e,e&&this.observer?.observe(e),this.measure())};registerItem(e,t){return this.items.set(e,t),this.observer?.observe(e),this.measure(),()=>{this.items.get(e)===t&&(this.items.delete(e),this.observer?.unobserve(e),this.measure())}}registerItemId=e=>{if(!n.isDev)return p;let t=this.itemIdCounts,r=(t.get(e)??0)+1;return t.set(e,r),r>1&&f(e),()=>{let n=(t.get(e)??1)-1;n>0?t.set(e,n):t.delete(e)}};observedElements(){let e=Array.from(this.items.keys());return this.container&&e.push(this.container),this.button&&e.push(this.button),e}measure(){let e=this.container;if(!this.connected||!e)return;let t=Array.from(this.items).filter(([t])=>t.isConnected&&e.contains(t)).sort(([e],[t])=>l(e,t));this.order=t.map(([e])=>e);for(let[e]of t)e.hasAttribute(`data-overflow-hidden`)||this.widths.set(e,e.offsetWidth);this.button?.isConnected&&(this.buttonWidth=this.button.offsetWidth);let{available:n,gap:r}=m(e),i=t.map(([e])=>this.widths.get(e)??0),a=i.reduce((e,t,n)=>e+t+(n>0?r:0),0),s=o,c=!1;if(a>n){let e=n-(this.buttonWidth>0?this.buttonWidth+r:0),a=0,o=t.length;for(let n=0;n<t.length;n++){let t=a+i[n]+(n>0?r:0);if(n>0&&t>e){o=n;break}a=t}s=t.slice(o).map(([,e])=>e),c=s.length>0&&i[0]+this.buttonWidth>n}let u=!d(s,this.hidden);if(u||c!==this.pinned){u&&(this.hidden=s.length>0?s:o),this.pinned=c;for(let e of Array.from(this.listeners))e()}}},g=i.createContext(null),_={store:new h,hiddenIds:o,hiddenSet:new Set};function v(e){return i.useContext(g)||(n.reportMissingContext(e,`Overflow`),_)}function y(){let{hiddenIds:e}=v(`useOverflowMenu`);return i.useMemo(()=>({hiddenIds:[...e],count:e.length}),[e])}function b(e){let{hiddenSet:t}=v(`useIsOverflowItemVisible`);return!t.has(e)}function x(e){return e.nodeType===Node.ELEMENT_NODE}function S(e,t,n){for(let r of n)r.type===`childList`&&r.target===t&&(r.removedNodes.forEach(t=>{x(t)&&e.unobserve(t)}),r.addedNodes.forEach(n=>{x(n)&&n.parentNode===t&&e.observe(n)}))}var C=class{element=null;value=!1;listeners=new Set;teardown=null;subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});getSnapshot=()=>this.value;getServerSnapshot=()=>!1;setElement(e){e!==this.element&&(this.disconnect(),this.element=e,e&&(this.teardown=this.observe(e)),this.check())}disconnect(){this.teardown?.(),this.teardown=null,this.element=null}observe(e){let t=()=>this.check(),n=[],r=c()?new ResizeObserver(t):null;if(r){r.observe(e);for(let t of Array.from(e.children))r.observe(t);n.push(()=>r.disconnect())}else typeof window<`u`&&(window.addEventListener(`resize`,t),n.push(()=>window.removeEventListener(`resize`,t)));if(typeof MutationObserver<`u`){let i=new MutationObserver(n=>{r&&S(r,e,n),t()});i.observe(e,{childList:!0,subtree:!0,characterData:!0}),n.push(()=>i.disconnect())}return()=>n.forEach(e=>e())}check(){let e=this.element,t=e!==null&&e.scrollWidth>e.clientWidth;if(t!==this.value){this.value=t;for(let e of Array.from(this.listeners))e()}}};function w(e){return typeof e==`object`&&!!e&&`current`in e}function T(e){let[t]=i.useState(()=>new C),n=i.useSyncExternalStore(t.subscribe,t.getSnapshot,t.getServerSnapshot),r=s();return i.useLayoutEffect(()=>{let n=t.subscribe(r);t.setElement(w(e)?e.current:e),n()}),i.useLayoutEffect(()=>()=>t.disconnect(),[t]),n}var E=({overflowButton:e,children:n,className:o,ref:c,...l})=>{let[u]=i.useState(()=>new h),d=i.useSyncExternalStore(u.subscribe,u.getSnapshot,u.getServerSnapshot),f=i.useSyncExternalStore(u.subscribe,u.getPinned,u.getServerPinned),p=i.useCallback(e=>u.setContainer(e),[u]),m=i.useCallback(e=>u.setButton(e),[u]),_=r.useMergedRefs(c,p),v=s();i.useLayoutEffect(()=>{let e=u.subscribe(v),t=u.connect();return e(),t},[u,v]),i.useLayoutEffect(()=>{u.checkOrder()});let y=i.useMemo(()=>new Set(d),[d]),b=i.useMemo(()=>[...d],[d]),x=i.useMemo(()=>({store:u,hiddenIds:d,hiddenSet:y}),[u,d,y]),S=d.length;return(0,a.jsx)(g.Provider,{value:x,children:(0,a.jsxs)(`div`,{ref:_,className:t.cn(`flex items-center overflow-hidden p-1`,o),...l,children:[n,S>0&&e&&(0,a.jsx)(`div`,{ref:m,"data-overflow-button":``,"data-overflow-pinned":f?``:void 0,className:`sticky -end-1 flex shrink-0 items-center self-stretch ps-1 data-[overflow-pinned]:bg-background data-[overflow-pinned]:pe-1`,children:e(S,b)})]})})};E.displayName=`Overflow`;var D=({itemId:e,children:n,className:o,style:s,ref:c,"aria-hidden":l,inert:u,...d})=>{let{store:f,hiddenSet:p}=v(`OverflowItem`),m=p.has(e);i.useEffect(()=>f.registerItemId(e),[f,e]);let h=i.useCallback(t=>t?f.registerItem(t,e):void 0,[f,e]),g=r.useMergedRefs(c,h);return(0,a.jsx)(`div`,{ref:g,className:t.cn(`shrink-0`,o),...d,style:m?{...s,display:`none`}:s,"aria-hidden":m?!0:l,inert:m?!0:u,"data-overflow-hidden":m?``:void 0,children:n})};D.displayName=`OverflowItem`;var O=Object.assign(E,{Item:D});exports.Overflow=O,exports.OverflowItem=D,exports.useIsOverflowItemVisible=b,exports.useIsOverflowing=T,exports.useOverflowMenu=y;
+//# sourceMappingURL=Overflow.cjs.map

package/dist/components/layout/Overflow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.cjs","names":["React","isDev","useMergedRefs","cn","require_runtime","require_cn","require_dev","require_useMergedRefs","react","react_jsx_runtime","NO_IDS","useForceRender","n","hasResizeObserver","documentOrder","a","b","REORDER_OBSERVER_OPTIONS","sameIds","id","i","warnDuplicateItemId","itemId","noop","readContainer","paddingInline","gap","view","container","style","OverflowStore","listener","el","onResize","node","order","counts","count","remaining","elements","entries","widths","total","sum","width","next","pinned","available","limit","used","cut","end","hiddenChanged","OverflowContext","INERT_CONTEXT","useOverflowContext","componentName","useOverflowMenu","hiddenIds","useIsOverflowItemVisible","hiddenSet","isElement","followDirectChildren","record","records","parent","observer","OverflowingStore","element","check","cleanups","resizeObserver","child","mutationObserver","cleanup","isRefObject","target","useIsOverflowing","store","isOverflowing","forceRender","unsubscribe","OverflowRoot","rest","setContainer","setButton","containerRef","ref","disconnect","buttonIds","ctx","hiddenCount","className","children","overflowButton","OverflowItem","ariaHidden","isHidden","registerRef","mergedRef","inert","Overflow"],"sources":["../../../src/components/layout/Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { isDev, reportMissingContext, warnOnce } from '../../lib/dev';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\n\n/** Properties for the Overflow component. */\nexport interface OverflowProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Renders the overflow button (for example a \"+3\" menu trigger) while at least one item is\n   * hidden. Receives the number of hidden items and their `itemId`s in DOM order, so the button\n   * can open a menu of the hidden items. `hiddenIds` is the button's own array (sorting it in\n   * place affects nobody else). Its width is measured and reserved when items overflow.\n   * Components rendered by it can also read the hidden items with {@link useOverflowMenu}.\n   */\n  overflowButton?: (count: number, hiddenIds: string[]) => React.ReactNode;\n  /**\n   * The {@link OverflowItem}s to lay out in one row. Only items and the overflow button are\n   * measured: the container's whole content box is the room for them, so other content placed in\n   * the row is not accounted for and could clip items that still count as visible. Keep fixed\n   * content outside the Overflow (for example in a surrounding flex row), or wrap it in an\n   * `OverflowItem` (the first item is never hidden).\n   */\n  children: React.ReactNode;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the OverflowItem sub-component. */\nexport interface OverflowItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Identifier for tracking this item's overflow visibility, unique within the Overflow (a\n   * duplicate warns in development: items that share one are hidden and shown together).\n   */\n  itemId: string;\n  /** Content of the overflow item. */\n  children: React.ReactNode;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Result of {@link useOverflowMenu}. */\nexport interface UseOverflowMenuResult {\n  /** `itemId`s of the hidden items, in DOM order (the caller's own array). */\n  hiddenIds: string[];\n  /** Number of hidden items. */\n  count: number;\n}\n\n// ---------------------------------------------------------------------------\n// Measurement store\n// ---------------------------------------------------------------------------\n\n/**\n * The empty snapshot. Snapshots are internal: they are compared by identity and never handed to\n * consumers, who receive their own copies (see `useOverflowMenu` and `overflowButton`).\n */\nconst NO_IDS: string[] = [];\n\n/** A stable function that re-renders the calling component. */\nfunction useForceRender(): () => void {\n  return React.useReducer((n: number) => n + 1, 0)[1];\n}\n\nfunction hasResizeObserver(): boolean {\n  return typeof ResizeObserver !== 'undefined';\n}\n\nfunction documentOrder(a: Element, b: Element): number {\n  if (a === b) return 0;\n  return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;\n}\n\n/** Moves anywhere in the row: items reordered directly or inside wrappers. */\nconst REORDER_OBSERVER_OPTIONS: MutationObserverInit = { childList: true, subtree: true };\n\nfunction sameIds(a: readonly string[], b: readonly string[]): boolean {\n  return a.length === b.length && a.every((id, i) => id === b[i]);\n}\n\nfunction warnDuplicateItemId(itemId: string): void {\n  warnOnce(\n    `Overflow:duplicate:${itemId}`,\n    `Overflow: several items share the itemId \"${itemId}\". Item ids must be unique within an ` +\n      'Overflow; items with the same itemId are hidden and shown together.',\n  );\n}\n\nconst noop = () => {};\n\n/** Width available to items: the content box of the container, and the flex gap between items. */\nfunction readContainer(container: HTMLElement): { available: number; gap: number } {\n  let paddingInline = 0;\n  let gap = 0;\n  const view = container.ownerDocument.defaultView;\n  if (view) {\n    const style = view.getComputedStyle(container);\n    paddingInline = (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0);\n    gap = parseFloat(style.columnGap) || 0;\n  }\n  return { available: container.clientWidth - paddingInline, gap };\n}\n\n/**\n * Tracks the container, the items and the overflow button of one `Overflow` and publishes the ids\n * of the hidden items (DOM order), and whether the button covers the first item, to\n * `useSyncExternalStore`.\n *\n * - **Measurement never writes styles.** An item's width is read (`offsetWidth`) only while it is\n *   visible and cached; a hidden item (`data-overflow-hidden` and an inline `display: none`, both\n *   rendered by React) keeps its last visible width. All reads happen before React applies the\n *   result.\n * - **Membership-only updates.** A new snapshot is published only when the hidden set (or whether\n *   the button covers the first item) changes, so a resize that hides the same items renders\n *   nothing.\n * - **One observer.** A single `ResizeObserver` (created when the root mounts) watches the\n *   container, every item and the overflow button. Without `ResizeObserver` the store measures\n *   whenever something registers and on window `resize`.\n * - **Reorders.** A keyed reorder moves item elements without registering them again or changing\n *   a size. The order of the last measurement is re-checked (n − 1 `compareDocumentPosition`\n *   calls, no layout reads) after every commit of the root and, through a `MutationObserver`\n *   (`childList`, `subtree`) on the container, after moves that do not render the root (a list\n *   component inside the row that owns its order); only an inversion re-measures.\n */\nclass OverflowStore {\n  private container: HTMLElement | null = null;\n  private button: HTMLElement | null = null;\n  private buttonWidth = 0;\n  private readonly items = new Map<HTMLElement, string>();\n  /** How many mounted items use each `itemId` (development only: a repeated one warns). */\n  private readonly itemIdCounts = new Map<string, number>();\n  private readonly widths = new WeakMap<HTMLElement, number>();\n  private readonly listeners = new Set<() => void>();\n  private hidden: string[] = NO_IDS;\n  /** The first item is wider than the room beside the button, so the button covers its end. */\n  private pinned = false;\n  /** The item elements of the last measurement, in the DOM order they had then. */\n  private order: HTMLElement[] = [];\n  private connected = false;\n  private observer: ResizeObserver | null = null;\n  private reorderObserver: MutationObserver | null = null;\n  private removeResizeListener: (() => void) | null = null;\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = (): string[] => this.hidden;\n\n  getServerSnapshot = (): string[] => NO_IDS;\n\n  getPinned = (): boolean => this.pinned;\n\n  getServerPinned = (): boolean => false;\n\n  /** Starts observing (root layout effect); returns the teardown. */\n  connect = (): (() => void) => {\n    this.connected = true;\n    if (hasResizeObserver()) {\n      this.observer = new ResizeObserver(() => this.measure());\n      for (const el of this.observedElements()) this.observer.observe(el);\n    } else if (typeof window !== 'undefined') {\n      const onResize = () => this.measure();\n      window.addEventListener('resize', onResize);\n      this.removeResizeListener = () => window.removeEventListener('resize', onResize);\n    }\n    if (typeof MutationObserver !== 'undefined') {\n      this.reorderObserver = new MutationObserver(() => this.checkOrder());\n      if (this.container) this.reorderObserver.observe(this.container, REORDER_OBSERVER_OPTIONS);\n    }\n    this.measure();\n    return () => {\n      this.connected = false;\n      this.observer?.disconnect();\n      this.observer = null;\n      this.reorderObserver?.disconnect();\n      this.reorderObserver = null;\n      this.removeResizeListener?.();\n      this.removeResizeListener = null;\n    };\n  };\n\n  /** Ref callback of the container. */\n  setContainer = (node: HTMLDivElement | null): void => {\n    if (node === this.container) return;\n    if (this.container) this.observer?.unobserve(this.container);\n    this.container = node;\n    if (node) this.observer?.observe(node);\n    if (this.reorderObserver) {\n      this.reorderObserver.disconnect();\n      if (node) this.reorderObserver.observe(node, REORDER_OBSERVER_OPTIONS);\n    }\n    this.measure();\n  };\n\n  /**\n   * Re-measures when the items of the last measurement are no longer in DOM order (a keyed\n   * reorder). Cheap: neighbour comparisons only, no layout reads.\n   */\n  checkOrder = (): void => {\n    const order = this.order;\n    for (let i = 1; i < order.length; i++) {\n      if (documentOrder(order[i - 1], order[i]) > 0) {\n        this.measure();\n        return;\n      }\n    }\n  };\n\n  /** Ref callback of the overflow button wrapper. The last measured width outlives it. */\n  setButton = (node: HTMLDivElement | null): void => {\n    if (node === this.button) return;\n    if (this.button) this.observer?.unobserve(this.button);\n    this.button = node;\n    if (node) this.observer?.observe(node);\n    this.measure();\n  };\n\n  /** Registers an item element; returns its unregistration. */\n  registerItem(el: HTMLElement, id: string): () => void {\n    this.items.set(el, id);\n    this.observer?.observe(el);\n    this.measure();\n    return () => {\n      if (this.items.get(el) !== id) return;\n      this.items.delete(el);\n      this.observer?.unobserve(el);\n      this.measure();\n    };\n  }\n\n  /**\n   * Counts the `itemId` of a mounted item (called from the item's effect, C-DEV); a second item\n   * with an id already in use warns once per id. Returns the cleanup.\n   */\n  registerItemId = (itemId: string): (() => void) => {\n    if (!isDev) return noop;\n    const counts = this.itemIdCounts;\n    const count = (counts.get(itemId) ?? 0) + 1;\n    counts.set(itemId, count);\n    if (count > 1) warnDuplicateItemId(itemId);\n    return () => {\n      const remaining = (counts.get(itemId) ?? 1) - 1;\n      if (remaining > 0) counts.set(itemId, remaining);\n      else counts.delete(itemId);\n    };\n  };\n\n  private observedElements(): HTMLElement[] {\n    const elements = Array.from(this.items.keys());\n    if (this.container) elements.push(this.container);\n    if (this.button) elements.push(this.button);\n    return elements;\n  }\n\n  private measure(): void {\n    const container = this.container;\n    if (!this.connected || !container) return;\n\n    // Reads first: widths of the visible items, the button and the container.\n    const entries = Array.from(this.items)\n      .filter(([el]) => el.isConnected && container.contains(el))\n      .sort(([a], [b]) => documentOrder(a, b));\n    this.order = entries.map(([el]) => el);\n    for (const [el] of entries) {\n      if (!el.hasAttribute('data-overflow-hidden')) this.widths.set(el, el.offsetWidth);\n    }\n    if (this.button?.isConnected) this.buttonWidth = this.button.offsetWidth;\n    const { available, gap } = readContainer(container);\n\n    const widths = entries.map(([el]) => this.widths.get(el) ?? 0);\n    const total = widths.reduce((sum, width, i) => sum + width + (i > 0 ? gap : 0), 0);\n\n    let next: string[] = NO_IDS;\n    let pinned = false;\n    if (total > available) {\n      // Items that fit next to the overflow button stay; the first item always stays.\n      const limit = available - (this.buttonWidth > 0 ? this.buttonWidth + gap : 0);\n      let used = 0;\n      let cut = entries.length;\n      for (let i = 0; i < entries.length; i++) {\n        const end = used + widths[i] + (i > 0 ? gap : 0);\n        if (i > 0 && end > limit) {\n          cut = i;\n          break;\n        }\n        used = end;\n      }\n      next = entries.slice(cut).map(([, id]) => id);\n      // The sticky button eats the gap before it first; it covers the first item only when the\n      // two do not fit side by side.\n      pinned = next.length > 0 && widths[0] + this.buttonWidth > available;\n    }\n\n    const hiddenChanged = !sameIds(next, this.hidden);\n    if (!hiddenChanged && pinned === this.pinned) return;\n    // The same hidden set keeps its array, so the items and useOverflowMenu() do not update.\n    if (hiddenChanged) this.hidden = next.length > 0 ? next : NO_IDS;\n    this.pinned = pinned;\n    for (const listener of Array.from(this.listeners)) listener();\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Context (C-CONTEXT)\n// ---------------------------------------------------------------------------\n\ninterface OverflowContextValue {\n  store: OverflowStore;\n  hiddenIds: string[];\n  hiddenSet: ReadonlySet<string>;\n}\n\nconst OverflowContext = React.createContext<OverflowContextValue | null>(null);\n\n/** Production fallback for a misplaced sub-component: a store that is never connected. */\nconst INERT_CONTEXT: OverflowContextValue = {\n  store: /* @__PURE__ */ new OverflowStore(),\n  hiddenIds: NO_IDS,\n  hiddenSet: /* @__PURE__ */ new Set<string>(),\n};\n\n/**\n * The enclosing Overflow's context. Outside an Overflow it throws in development and, in\n * production, logs an error once and returns an inert value (C-CONTEXT).\n */\nfunction useOverflowContext(componentName: string): OverflowContextValue {\n  const ctx = React.useContext(OverflowContext);\n  if (ctx) return ctx;\n  reportMissingContext(componentName, 'Overflow');\n  return INERT_CONTEXT;\n}\n\n// ---------------------------------------------------------------------------\n// Hooks\n// ---------------------------------------------------------------------------\n\n/**\n * The items an {@link Overflow} currently hides: their `itemId`s in DOM order and their count. Use\n * it in the component that `overflowButton` renders to list the hidden items in a menu. Must be\n * called inside `Overflow`.\n */\nexport function useOverflowMenu(): UseOverflowMenuResult {\n  const { hiddenIds } = useOverflowContext('useOverflowMenu');\n  // A copy per caller and snapshot: sorting or reversing it cannot affect other consumers.\n  return React.useMemo(() => ({ hiddenIds: [...hiddenIds], count: hiddenIds.length }), [hiddenIds]);\n}\n\n/**\n * Whether the {@link OverflowItem} with `itemId` is currently shown (`false` while it overflows).\n * Must be called inside `Overflow`.\n */\nexport function useIsOverflowItemVisible(itemId: string): boolean {\n  const { hiddenSet } = useOverflowContext('useIsOverflowItemVisible');\n  return !hiddenSet.has(itemId);\n}\n\nfunction isElement(node: Node): node is Element {\n  return node.nodeType === Node.ELEMENT_NODE;\n}\n\n/**\n * Keeps `observer` on the element children of `parent`: unobserves the removed ones and observes\n * the added ones that are still attached to `parent` (records are replayed in order, so a child\n * moved or re-added within one batch ends up observed exactly when it is present).\n */\nfunction followDirectChildren(\n  observer: ResizeObserver,\n  parent: Element,\n  records: readonly MutationRecord[],\n): void {\n  for (const record of records) {\n    if (record.type !== 'childList' || record.target !== parent) continue;\n    record.removedNodes.forEach((node) => {\n      if (isElement(node)) observer.unobserve(node);\n    });\n    record.addedNodes.forEach((node) => {\n      if (isElement(node) && node.parentNode === parent) observer.observe(node);\n    });\n  }\n}\n\n/** Tracks `scrollWidth > clientWidth` of one element. */\nclass OverflowingStore {\n  private element: HTMLElement | null = null;\n  private value = false;\n  private readonly listeners = new Set<() => void>();\n  private teardown: (() => void) | null = null;\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = (): boolean => this.value;\n\n  getServerSnapshot = (): boolean => false;\n\n  /** Follows `element` (layout effect of every render); re-subscribes when it changes. */\n  setElement(element: HTMLElement | null): void {\n    if (element === this.element) return;\n    this.disconnect();\n    this.element = element;\n    if (element) this.teardown = this.observe(element);\n    this.check();\n  }\n\n  disconnect(): void {\n    this.teardown?.();\n    this.teardown = null;\n    this.element = null;\n  }\n\n  private observe(element: HTMLElement): () => void {\n    const check = () => this.check();\n    const cleanups: Array<() => void> = [];\n\n    // Resizes of the element and of its direct children (content that grows or shrinks).\n    const resizeObserver = hasResizeObserver() ? new ResizeObserver(check) : null;\n    if (resizeObserver) {\n      resizeObserver.observe(element);\n      for (const child of Array.from(element.children)) resizeObserver.observe(child);\n      cleanups.push(() => resizeObserver.disconnect());\n    } else if (typeof window !== 'undefined') {\n      window.addEventListener('resize', check);\n      cleanups.push(() => window.removeEventListener('resize', check));\n    }\n\n    // Content added, removed or edited. Only a change of the direct children changes what the\n    // ResizeObserver watches, and only those children are (un)observed; text edits and deeper\n    // changes just re-check.\n    if (typeof MutationObserver !== 'undefined') {\n      const mutationObserver = new MutationObserver((records) => {\n        if (resizeObserver) followDirectChildren(resizeObserver, element, records);\n        check();\n      });\n      mutationObserver.observe(element, { childList: true, subtree: true, characterData: true });\n      cleanups.push(() => mutationObserver.disconnect());\n    }\n\n    return () => cleanups.forEach((cleanup) => cleanup());\n  }\n\n  private check(): void {\n    const el = this.element;\n    const next = el !== null && el.scrollWidth > el.clientWidth;\n    if (next === this.value) return;\n    this.value = next;\n    for (const listener of Array.from(this.listeners)) listener();\n  }\n}\n\nfunction isRefObject(\n  target: React.RefObject<HTMLElement | null> | HTMLElement | null | undefined,\n): target is React.RefObject<HTMLElement | null> {\n  return target != null && typeof target === 'object' && 'current' in target;\n}\n\n/**\n * Whether `target`'s content is wider than the element (`scrollWidth > clientWidth`).\n *\n * `target` is a ref object or the element itself (for example from callback-ref state:\n * `const [el, setEl] = useState(null)` + `ref={setEl}`). The hook re-checks when the element\n * resizes, when its direct children resize, and when content is added, removed or edited; an\n * element that mounts later (a ref attached conditionally) is picked up after the render that\n * mounts it. Without `ResizeObserver` it re-checks on window `resize` and content changes. Returns\n * `false` on the server.\n */\nexport function useIsOverflowing(\n  target: React.RefObject<HTMLElement | null> | HTMLElement | null,\n): boolean {\n  const [store] = React.useState(() => new OverflowingStore());\n  const isOverflowing = React.useSyncExternalStore(\n    store.subscribe,\n    store.getSnapshot,\n    store.getServerSnapshot,\n  );\n  const forceRender = useForceRender();\n\n  // Every render: follow the element the ref points to now (cheap identity check). A change found\n  // here re-renders from the layout phase, before paint: useSyncExternalStore only subscribes in a\n  // passive effect, so on mount it would pick the first value up after the browser painted.\n  React.useLayoutEffect(() => {\n    const unsubscribe = store.subscribe(forceRender);\n    store.setElement(isRefObject(target) ? target.current : target);\n    unsubscribe();\n  });\n\n  React.useLayoutEffect(() => () => store.disconnect(), [store]);\n\n  return isOverflowing;\n}\n\n// ---------------------------------------------------------------------------\n// Components\n// ---------------------------------------------------------------------------\n\nconst OverflowRoot = ({ overflowButton, children, className, ref, ...rest }: OverflowProps) => {\n  const [store] = React.useState(() => new OverflowStore());\n  const hiddenIds = React.useSyncExternalStore(\n    store.subscribe,\n    store.getSnapshot,\n    store.getServerSnapshot,\n  );\n  const pinned = React.useSyncExternalStore(\n    store.subscribe,\n    store.getPinned,\n    store.getServerPinned,\n  );\n  const setContainer = React.useCallback(\n    (node: HTMLDivElement | null) => store.setContainer(node),\n    [store],\n  );\n  const setButton = React.useCallback(\n    (node: HTMLDivElement | null) => store.setButton(node),\n    [store],\n  );\n  const containerRef = useMergedRefs<HTMLDivElement>(ref, setContainer);\n  const forceRender = useForceRender();\n\n  // Observers are created once per instance (not per render or per children change). The first\n  // measurement (in connect) re-renders from this layout effect, before paint: useSyncExternalStore\n  // only subscribes in a passive effect, which can run after the browser painted every item.\n  React.useLayoutEffect(() => {\n    const unsubscribe = store.subscribe(forceRender);\n    const disconnect = store.connect();\n    unsubscribe();\n    return disconnect;\n  }, [store, forceRender]);\n\n  // After every commit of the root (new children, a keyed reorder): items moved without any size\n  // change or registration are re-measured before paint. Cheap when nothing moved.\n  React.useLayoutEffect(() => {\n    store.checkOrder();\n  });\n\n  const hiddenSet = React.useMemo(() => new Set(hiddenIds), [hiddenIds]);\n  // The overflowButton's own copy (consumers may sort it in place).\n  const buttonIds = React.useMemo(() => [...hiddenIds], [hiddenIds]);\n  const ctx = React.useMemo<OverflowContextValue>(\n    () => ({ store, hiddenIds, hiddenSet }),\n    [store, hiddenIds, hiddenSet],\n  );\n\n  const hiddenCount = hiddenIds.length;\n\n  return (\n    <OverflowContext.Provider value={ctx}>\n      <div\n        ref={containerRef}\n        // The row clips its content at its padding edge: the 4px padding leaves room for the focus\n        // indicator a focused item draws 4px around itself. No negative margin offsets it: the\n        // row's box would then reach past its container, which a scroll container around an\n        // edge-to-edge row (or the page) counts as overflow. The store measures the room without\n        // the padding.\n        className={cn('flex items-center overflow-hidden p-1', className)}\n        {...rest}\n      >\n        {children}\n        {hiddenCount > 0 && overflowButton && (\n          // In the row's flow (it adds to the row height and follows justify-*), sticking to the\n          // inline end when the first item is wider than the room beside it. Browsers stop a\n          // sticky element at the scroll container's padding, so -end-1 lets it reach the\n          // clipping edge, and while pinned it keeps 4px inside for its own focus indicator.\n          // (WebKit stops a sticky element short of the inline end of a right-to-left row; it\n          // stays in the row.)\n          <div\n            ref={setButton}\n            data-overflow-button=\"\"\n            data-overflow-pinned={pinned ? '' : undefined}\n            className=\"sticky -end-1 flex shrink-0 items-center self-stretch ps-1 data-[overflow-pinned]:bg-background data-[overflow-pinned]:pe-1\"\n          >\n            {overflowButton(hiddenCount, buttonIds)}\n          </div>\n        )}\n      </div>\n    </OverflowContext.Provider>\n  );\n};\nOverflowRoot.displayName = 'Overflow';\n\n/**\n * One entry of an {@link Overflow}. While it does not fit it stays mounted but is hidden\n * (`data-overflow-hidden` and an inline `display: none` placed after the consumer's own `style`),\n * `aria-hidden` and `inert`. The inline style wins over the consumer's `style.display` and over\n * display utilities in any cascade layer (a prefixed Tailwind app's `tw:flex` included), so a\n * hidden item is never shown while it is counted in \"+N\". Must be rendered inside `Overflow`.\n */\nexport const OverflowItem = ({\n  itemId,\n  children,\n  className,\n  style,\n  ref,\n  'aria-hidden': ariaHidden,\n  inert,\n  ...rest\n}: OverflowItemProps) => {\n  const { store, hiddenSet } = useOverflowContext('OverflowItem');\n  const isHidden = hiddenSet.has(itemId);\n  React.useEffect(() => store.registerItemId(itemId), [store, itemId]);\n\n  const registerRef = React.useCallback(\n    (node: HTMLDivElement | null) => (node ? store.registerItem(node, itemId) : undefined),\n    [store, itemId],\n  );\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, registerRef);\n\n  return (\n    <div\n      ref={mergedRef}\n      className={cn('shrink-0', className)}\n      {...rest}\n      style={isHidden ? { ...style, display: 'none' } : style}\n      aria-hidden={isHidden ? true : ariaHidden}\n      inert={isHidden ? true : inert}\n      data-overflow-hidden={isHidden ? '' : undefined}\n    >\n      {children}\n    </div>\n  );\n};\nOverflowItem.displayName = 'OverflowItem';\n\n/**\n * A single row that hides the items which do not fit and shows an overflow button instead.\n *\n * Wrap each entry in {@link OverflowItem} with a unique `itemId`; the row holds only items (other\n * content is not measured, see `children`). Items are measured while visible, hidden from the end\n * (in DOM order; the first item always stays) and hidden items get `data-overflow-hidden`, an\n * inline `display: none`, `aria-hidden` and `inert`. Reordered items (for example a keyed sort) are\n * re-measured in their new order. `overflowButton(count, hiddenIds)` renders the button after the\n * visible items (its measured width is reserved); components inside it can use\n * {@link useOverflowMenu} to list the hidden items (e.g. in a Menu), and\n * {@link useIsOverflowItemVisible} reports a single item. The button sticks to the inline end of\n * the row, so a first item wider than the room beside it cannot push it out of view: it then covers\n * the end of that item and gets `data-overflow-pinned`, with the `background` token behind it. (In\n * a right-to-left row, WebKit stops the pinned button short of the end, still inside the row.)\n *\n * The row clips what does not fit. So that the focus indicators of its items are not cut off, it\n * has a 4px padding: the items sit 4px in from its edges, and the row is 8px taller than they are.\n * An explicit width (such as `w-full` or a style width) includes that padding. The row never\n * reaches past its own box, so an edge-to-edge row adds no scrollbar to the page or to a scroll\n * container around it. A negative margin of 4px lines the items up with the content around the\n * row; add it only where nothing within 4px of the row scrolls (the row's box then reaches 4px past\n * its container on every side). `p-0` removes the room (focus indicators at the row's edges are\n * then clipped).\n *\n * Works without `ResizeObserver` (jsdom, old browsers): it then re-measures on window resize and\n * when items mount, unmount or move.\n *\n * The item is also `Overflow.Item`. The same component is exported as `OverflowItem`; React Server\n * Components import that flat name (dotted access needs a client file).\n */\nexport const Overflow = /* @__PURE__ */ Object.assign(OverflowRoot, {\n  Item: OverflowItem,\n});\n"],"mappings":"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"}

package/dist/components/layout/Overflow.mjs

@@ -0,0 +1,269 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { isDev as t, reportMissingContext as n, warnOnce as r } from "../../lib/dev.mjs";
+import { useMergedRefs as i } from "../../hooks/useMergedRefs.mjs";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/layout/Overflow.tsx
+var c = [];
+function l() {
+	return a.useReducer((e) => e + 1, 0)[1];
+}
+function u() {
+	return typeof ResizeObserver < "u";
+}
+function d(e, t) {
+	return e === t ? 0 : e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+var f = {
+	childList: !0,
+	subtree: !0
+};
+function p(e, t) {
+	return e.length === t.length && e.every((e, n) => e === t[n]);
+}
+function m(e) {
+	r(`Overflow:duplicate:${e}`, `Overflow: several items share the itemId "${e}". Item ids must be unique within an Overflow; items with the same itemId are hidden and shown together.`);
+}
+var h = () => {};
+function g(e) {
+	let t = 0, n = 0, r = e.ownerDocument.defaultView;
+	if (r) {
+		let i = r.getComputedStyle(e);
+		t = (parseFloat(i.paddingLeft) || 0) + (parseFloat(i.paddingRight) || 0), n = parseFloat(i.columnGap) || 0;
+	}
+	return {
+		available: e.clientWidth - t,
+		gap: n
+	};
+}
+var _ = class {
+	container = null;
+	button = null;
+	buttonWidth = 0;
+	items = /* @__PURE__ */ new Map();
+	itemIdCounts = /* @__PURE__ */ new Map();
+	widths = /* @__PURE__ */ new WeakMap();
+	listeners = /* @__PURE__ */ new Set();
+	hidden = c;
+	pinned = !1;
+	order = [];
+	connected = !1;
+	observer = null;
+	reorderObserver = null;
+	removeResizeListener = null;
+	subscribe = (e) => (this.listeners.add(e), () => {
+		this.listeners.delete(e);
+	});
+	getSnapshot = () => this.hidden;
+	getServerSnapshot = () => c;
+	getPinned = () => this.pinned;
+	getServerPinned = () => !1;
+	connect = () => {
+		if (this.connected = !0, u()) {
+			this.observer = new ResizeObserver(() => this.measure());
+			for (let e of this.observedElements()) this.observer.observe(e);
+		} else if (typeof window < "u") {
+			let e = () => this.measure();
+			window.addEventListener("resize", e), this.removeResizeListener = () => window.removeEventListener("resize", e);
+		}
+		return typeof MutationObserver < "u" && (this.reorderObserver = new MutationObserver(() => this.checkOrder()), this.container && this.reorderObserver.observe(this.container, f)), this.measure(), () => {
+			this.connected = !1, this.observer?.disconnect(), this.observer = null, this.reorderObserver?.disconnect(), this.reorderObserver = null, this.removeResizeListener?.(), this.removeResizeListener = null;
+		};
+	};
+	setContainer = (e) => {
+		e !== this.container && (this.container && this.observer?.unobserve(this.container), this.container = e, e && this.observer?.observe(e), this.reorderObserver && (this.reorderObserver.disconnect(), e && this.reorderObserver.observe(e, f)), this.measure());
+	};
+	checkOrder = () => {
+		let e = this.order;
+		for (let t = 1; t < e.length; t++) if (d(e[t - 1], e[t]) > 0) {
+			this.measure();
+			return;
+		}
+	};
+	setButton = (e) => {
+		e !== this.button && (this.button && this.observer?.unobserve(this.button), this.button = e, e && this.observer?.observe(e), this.measure());
+	};
+	registerItem(e, t) {
+		return this.items.set(e, t), this.observer?.observe(e), this.measure(), () => {
+			this.items.get(e) === t && (this.items.delete(e), this.observer?.unobserve(e), this.measure());
+		};
+	}
+	registerItemId = (e) => {
+		if (!t) return h;
+		let n = this.itemIdCounts, r = (n.get(e) ?? 0) + 1;
+		return n.set(e, r), r > 1 && m(e), () => {
+			let t = (n.get(e) ?? 1) - 1;
+			t > 0 ? n.set(e, t) : n.delete(e);
+		};
+	};
+	observedElements() {
+		let e = Array.from(this.items.keys());
+		return this.container && e.push(this.container), this.button && e.push(this.button), e;
+	}
+	measure() {
+		let e = this.container;
+		if (!this.connected || !e) return;
+		let t = Array.from(this.items).filter(([t]) => t.isConnected && e.contains(t)).sort(([e], [t]) => d(e, t));
+		this.order = t.map(([e]) => e);
+		for (let [e] of t) e.hasAttribute("data-overflow-hidden") || this.widths.set(e, e.offsetWidth);
+		this.button?.isConnected && (this.buttonWidth = this.button.offsetWidth);
+		let { available: n, gap: r } = g(e), i = t.map(([e]) => this.widths.get(e) ?? 0), a = i.reduce((e, t, n) => e + t + (n > 0 ? r : 0), 0), o = c, s = !1;
+		if (a > n) {
+			let e = n - (this.buttonWidth > 0 ? this.buttonWidth + r : 0), a = 0, c = t.length;
+			for (let n = 0; n < t.length; n++) {
+				let t = a + i[n] + (n > 0 ? r : 0);
+				if (n > 0 && t > e) {
+					c = n;
+					break;
+				}
+				a = t;
+			}
+			o = t.slice(c).map(([, e]) => e), s = o.length > 0 && i[0] + this.buttonWidth > n;
+		}
+		let l = !p(o, this.hidden);
+		if (l || s !== this.pinned) {
+			l && (this.hidden = o.length > 0 ? o : c), this.pinned = s;
+			for (let e of Array.from(this.listeners)) e();
+		}
+	}
+}, v = a.createContext(null), y = {
+	store: /* @__PURE__ */ new _(),
+	hiddenIds: c,
+	hiddenSet: /* @__PURE__ */ new Set()
+};
+function b(e) {
+	return a.useContext(v) || (n(e, "Overflow"), y);
+}
+function x() {
+	let { hiddenIds: e } = b("useOverflowMenu");
+	return a.useMemo(() => ({
+		hiddenIds: [...e],
+		count: e.length
+	}), [e]);
+}
+function S(e) {
+	let { hiddenSet: t } = b("useIsOverflowItemVisible");
+	return !t.has(e);
+}
+function C(e) {
+	return e.nodeType === Node.ELEMENT_NODE;
+}
+function w(e, t, n) {
+	for (let r of n) r.type === "childList" && r.target === t && (r.removedNodes.forEach((t) => {
+		C(t) && e.unobserve(t);
+	}), r.addedNodes.forEach((n) => {
+		C(n) && n.parentNode === t && e.observe(n);
+	}));
+}
+var T = class {
+	element = null;
+	value = !1;
+	listeners = /* @__PURE__ */ new Set();
+	teardown = null;
+	subscribe = (e) => (this.listeners.add(e), () => {
+		this.listeners.delete(e);
+	});
+	getSnapshot = () => this.value;
+	getServerSnapshot = () => !1;
+	setElement(e) {
+		e !== this.element && (this.disconnect(), this.element = e, e && (this.teardown = this.observe(e)), this.check());
+	}
+	disconnect() {
+		this.teardown?.(), this.teardown = null, this.element = null;
+	}
+	observe(e) {
+		let t = () => this.check(), n = [], r = u() ? new ResizeObserver(t) : null;
+		if (r) {
+			r.observe(e);
+			for (let t of Array.from(e.children)) r.observe(t);
+			n.push(() => r.disconnect());
+		} else typeof window < "u" && (window.addEventListener("resize", t), n.push(() => window.removeEventListener("resize", t)));
+		if (typeof MutationObserver < "u") {
+			let i = new MutationObserver((n) => {
+				r && w(r, e, n), t();
+			});
+			i.observe(e, {
+				childList: !0,
+				subtree: !0,
+				characterData: !0
+			}), n.push(() => i.disconnect());
+		}
+		return () => n.forEach((e) => e());
+	}
+	check() {
+		let e = this.element, t = e !== null && e.scrollWidth > e.clientWidth;
+		if (t !== this.value) {
+			this.value = t;
+			for (let e of Array.from(this.listeners)) e();
+		}
+	}
+};
+function E(e) {
+	return typeof e == "object" && !!e && "current" in e;
+}
+function D(e) {
+	let [t] = a.useState(() => new T()), n = a.useSyncExternalStore(t.subscribe, t.getSnapshot, t.getServerSnapshot), r = l();
+	return a.useLayoutEffect(() => {
+		let n = t.subscribe(r);
+		t.setElement(E(e) ? e.current : e), n();
+	}), a.useLayoutEffect(() => () => t.disconnect(), [t]), n;
+}
+var O = ({ overflowButton: t, children: n, className: r, ref: c, ...u }) => {
+	let [d] = a.useState(() => new _()), f = a.useSyncExternalStore(d.subscribe, d.getSnapshot, d.getServerSnapshot), p = a.useSyncExternalStore(d.subscribe, d.getPinned, d.getServerPinned), m = a.useCallback((e) => d.setContainer(e), [d]), h = a.useCallback((e) => d.setButton(e), [d]), g = i(c, m), y = l();
+	a.useLayoutEffect(() => {
+		let e = d.subscribe(y), t = d.connect();
+		return e(), t;
+	}, [d, y]), a.useLayoutEffect(() => {
+		d.checkOrder();
+	});
+	let b = a.useMemo(() => new Set(f), [f]), x = a.useMemo(() => [...f], [f]), S = a.useMemo(() => ({
+		store: d,
+		hiddenIds: f,
+		hiddenSet: b
+	}), [
+		d,
+		f,
+		b
+	]), C = f.length;
+	return /* @__PURE__ */ o(v.Provider, {
+		value: S,
+		children: /* @__PURE__ */ s("div", {
+			ref: g,
+			className: e("flex items-center overflow-hidden p-1", r),
+			...u,
+			children: [n, C > 0 && t && /* @__PURE__ */ o("div", {
+				ref: h,
+				"data-overflow-button": "",
+				"data-overflow-pinned": p ? "" : void 0,
+				className: "sticky -end-1 flex shrink-0 items-center self-stretch ps-1 data-[overflow-pinned]:bg-background data-[overflow-pinned]:pe-1",
+				children: t(C, x)
+			})]
+		})
+	});
+};
+O.displayName = "Overflow";
+var k = ({ itemId: t, children: n, className: r, style: s, ref: c, "aria-hidden": l, inert: u, ...d }) => {
+	let { store: f, hiddenSet: p } = b("OverflowItem"), m = p.has(t);
+	a.useEffect(() => f.registerItemId(t), [f, t]);
+	let h = a.useCallback((e) => e ? f.registerItem(e, t) : void 0, [f, t]), g = i(c, h);
+	return /* @__PURE__ */ o("div", {
+		ref: g,
+		className: e("shrink-0", r),
+		...d,
+		style: m ? {
+			...s,
+			display: "none"
+		} : s,
+		"aria-hidden": m ? !0 : l,
+		inert: m ? !0 : u,
+		"data-overflow-hidden": m ? "" : void 0,
+		children: n
+	});
+};
+k.displayName = "OverflowItem";
+var A = /* @__PURE__ */ Object.assign(O, { Item: k });
+//#endregion
+export { A as Overflow, k as OverflowItem, S as useIsOverflowItemVisible, D as useIsOverflowing, x as useOverflowMenu };
+
+//# sourceMappingURL=Overflow.mjs.map