@namroodinc/liquid-editorial 0.1.5 → 0.1.7

package/dist/components/NumberField/style.css

@@ -31,47 +31,7 @@
   }
 
 
-  .ds-number__step {
-    display: grid;
-    place-items: center;
-    flex: none;
-    inline-size: var(--field-height-md);
-    block-size: var(--field-height-md);
-    border: var(--control-border-width) solid var(--control-border-color);
-    border-radius: var(--field-radius);
-    background: var(--field-rest);
-    color: var(--color-text);
-    cursor: pointer;
-    transition: background-color var(--duration-fast) var(--ease-standard);
-  }
-
-  .ds-number[data-size="sm"] .ds-number__step {
-    inline-size: var(--field-height-sm);
-    block-size: var(--field-height-sm);
-  }
-
-  .ds-number[data-size="lg"] .ds-number__step {
-    inline-size: var(--field-height-lg);
-    block-size: var(--field-height-lg);
-  }
-
-  .ds-number__step:hover:not(:disabled) {
-    background: var(--field-hover);
-  }
-
-  .ds-number__step:active:not(:disabled) {
-    background: var(--field-pressed);
-  }
-
-  .ds-number__step:focus-visible {
-    outline: var(--control-border-width) solid var(--color-focus);
-    outline-offset: 2px;
-  }
-
-  .ds-number__step:disabled {
-    opacity: 45%;
-    cursor: not-allowed;
-  }
+  .ds-number__step { flex: none; }
 
   .ds-number-range {
     display: flex;

package/dist/components/Pagination/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs"),t=require("../Select/index.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)(function({totalResults:i,page:a,pageSize:o,onChange:s,pageSizeOptions:c=[10,25,50,100],size:l=`sm`,isDisabled:u=!1,showLabels:d=!0,menuPlacement:f=`bottom`,className:p,...m},h){let g=(0,n.useId)(),_=Math.max(1,Math.ceil(i/o)),v=Math.min(Math.max(1,a),_),y=u||i===0,b=y||v===1,x=y||v===_,S=(v-1)*o+1,C=Math.min(v*o,i),w=e=>{let t=Math.min(Math.max(1,e),_);t!==v&&s({page:t,pageSize:o})};return(0,r.jsxs)(`nav`,{ref:h,"aria-label":`Pagination`,"data-size":l,className:[`ds-pagination`,p].filter(Boolean).join(` `),...m,children:[(0,r.jsx)(`div`,{className:`ds-pagination__actions`,children:(0,r.jsx)(e.Button,{variant:`neutral`,size:l,iconStart:`chevron-left`,isIconOnly:!d,"aria-label":`Previous page`,isDisabled:b,onClick:()=>w(v-1),children:`Previous`})}),(0,r.jsxs)(`div`,{className:`ds-pagination__centre`,children:[(0,r.jsxs)(`div`,{className:`ds-pagination__per-page`,children:[(0,r.jsx)(`span`,{id:g,children:`Per page`}),(0,r.jsx)(`div`,{className:`ds-pagination__select`,children:(0,r.jsx)(t.Select,{"aria-labelledby":g,value:String(o),options:c.map(e=>({value:String(e),label:String(e)})),size:l,menuPlacement:f,isDisabled:y||i<=Math.min(...c),onValueChange:e=>{let t=Number(e);if(t===o)return;let n=Math.floor((v-1)*o/t)+1,r=Math.max(1,Math.ceil(i/t));s({page:Math.min(n,r),pageSize:t})}})})]}),(0,r.jsx)(`span`,{className:`ds-pagination__range`,"aria-live":`polite`,"aria-atomic":`true`,children:i===0?`No results`:`${S.toLocaleString(`en-US`)}–${C.toLocaleString(`en-US`)} of ${i.toLocaleString(`en-US`)}`})]}),(0,r.jsx)(`div`,{className:`ds-pagination__actions ds-pagination__actions--next`,children:(0,r.jsx)(e.Button,{variant:`neutral`,size:l,iconStart:d?void 0:`chevron-right`,iconEnd:d?`chevron-right`:void 0,isIconOnly:!d,"aria-label":`Next page`,isDisabled:x,onClick:()=>w(v+1),children:`Next`})})]})});exports.Pagination=i;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Pagination/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useId","Button","Select","require_components_Button_index","require_components_Select_index","react","react_jsx_runtime","Pagination","rest","labelId","pageCount","totalResults","pageSize","currentPage","page","disabled","isDisabled","atStart","atEnd","start","end","go","next","nextPage","onChange","size","className","showLabels","pageSizeOptions","value","nextSize","nextPageCount"],"sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes } from \"react\";\nimport { Button } from \"../Button\";\nimport { Select } from \"../Select\";\nimport type { PopoverPlacement } from \"../Popover\";\nimport \"./style.css\";\n\nexport type PaginationSize = \"sm\" | \"md\";\n\nexport interface PaginationState {\n  /** One-based page number. */\n  page: number;\n  /** Positive integer results per page. */\n  pageSize: number;\n}\n\nexport interface PaginationProps\n  extends\n    Omit<HTMLAttributes<HTMLElement>, \"children\" | \"onChange\">,\n    PaginationState {\n  /** Total number of matching results, before pagination. */\n  totalResults: number;\n  /** Emitted once per user change, with both values ready to apply together. */\n  onChange: (next: PaginationState) => void;\n  /** Nonempty list of positive integers containing the current pageSize. */\n  pageSizeOptions?: number[];\n  size?: PaginationSize;\n  isDisabled?: boolean;\n  showLabels?: boolean;\n  menuPlacement?: PopoverPlacement;\n}\n\n/** Controlled navigation for a result set. Data loading and slicing belong to the application. */\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  function Pagination(\n    {\n      totalResults,\n      page,\n      pageSize,\n      onChange,\n      pageSizeOptions = [10, 25, 50, 100],\n      size = \"sm\",\n      isDisabled = false,\n      showLabels = true,\n      menuPlacement = \"bottom\",\n      className,\n      ...rest\n    },\n    ref,\n  ) {\n    const labelId = useId();\n    const pageCount = Math.max(1, Math.ceil(totalResults / pageSize));\n    const currentPage = Math.min(Math.max(1, page), pageCount);\n    const disabled = isDisabled || totalResults === 0;\n    const atStart = disabled || currentPage === 1;\n    const atEnd = disabled || currentPage === pageCount;\n    const start = (currentPage - 1) * pageSize + 1;\n    const end = Math.min(currentPage * pageSize, totalResults);\n\n    const go = (nextPage: number) => {\n      const next = Math.min(Math.max(1, nextPage), pageCount);\n      if (next !== currentPage) onChange({ page: next, pageSize });\n    };\n\n    return (\n      <nav\n        ref={ref}\n        aria-label=\"Pagination\"\n        data-size={size}\n        className={[\"ds-pagination\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        <div className=\"ds-pagination__actions\">\n          <Button\n            variant=\"neutral\"\n            size={size}\n            iconStart=\"chevron-left\"\n            isIconOnly={!showLabels}\n            aria-label=\"Previous page\"\n            isDisabled={atStart}\n            onClick={() => go(currentPage - 1)}\n          >\n            Previous\n          </Button>\n        </div>\n\n        <div className=\"ds-pagination__centre\">\n          <div className=\"ds-pagination__per-page\">\n            <span id={labelId}>Per page</span>\n            <div className=\"ds-pagination__select\">\n              <Select\n                aria-labelledby={labelId}\n                value={String(pageSize)}\n                options={pageSizeOptions.map((value) => ({\n                  value: String(value),\n                  label: String(value),\n                }))}\n                size={size}\n                menuPlacement={menuPlacement}\n                isDisabled={\n                  disabled || totalResults <= Math.min(...pageSizeOptions)\n                }\n                onValueChange={(value) => {\n                  const nextSize = Number(value);\n                  if (nextSize === pageSize) return;\n                  const nextPage =\n                    Math.floor(((currentPage - 1) * pageSize) / nextSize) + 1;\n                  const nextPageCount = Math.max(\n                    1,\n                    Math.ceil(totalResults / nextSize),\n                  );\n                  onChange({\n                    page: Math.min(nextPage, nextPageCount),\n                    pageSize: nextSize,\n                  });\n                }}\n              />\n            </div>\n          </div>\n          <span\n            className=\"ds-pagination__range\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            {totalResults === 0\n              ? \"No results\"\n              : `${start.toLocaleString(\"en-US\")}–${end.toLocaleString(\"en-US\")} of ${totalResults.toLocaleString(\"en-US\")}`}\n          </span>\n        </div>\n\n        <div className=\"ds-pagination__actions ds-pagination__actions--next\">\n          <Button\n            variant=\"neutral\"\n            size={size}\n            iconStart={showLabels ? undefined : \"chevron-right\"}\n            iconEnd={showLabels ? \"chevron-right\" : undefined}\n            isIconOnly={!showLabels}\n            aria-label=\"Next page\"\n            isDisabled={atEnd}\n            onClick={() => go(currentPage + 1)}\n          >\n            Next\n          </Button>\n        </div>\n      </nav>\n    );\n  },\n);\n"],"mappings":"A,iMAgCA,IAAaQ,GAAA,EAAaR,EAAAA,WAAAA,CACxB,SACE,CACE,eACA,OACA,WACA,WACA,kBAAkB,CAAC,GAAI,GAAI,GAAI,GAAG,EAClC,OAAO,KACP,aAAa,GACb,aAAa,GACb,gBAAgB,SAChB,YACA,GAAGS,GAEL,EACA,CACA,IAAMC,GAAA,EAAUT,EAAAA,MAAAA,CAAM,EAChBU,EAAY,KAAK,IAAI,EAAG,KAAK,KAAKC,EAAeC,CAAQ,CAAC,EAC1DC,EAAc,KAAK,IAAI,KAAK,IAAI,EAAGC,CAAI,EAAGJ,CAAS,EACnDK,EAAWC,GAAcL,IAAiB,EAC1CM,EAAUF,GAAYF,IAAgB,EACtCK,EAAQH,GAAYF,IAAgBH,EACpCS,GAASN,EAAc,GAAKD,EAAW,EACvCQ,EAAM,KAAK,IAAIP,EAAcD,EAAUD,CAAY,EAEnDU,EAAM,GAAqB,CAC/B,IAAMC,EAAO,KAAK,IAAI,KAAK,IAAI,EAAGC,CAAQ,EAAGb,CAAS,EAClDY,IAAST,GAAaW,EAAS,CAAE,KAAMF,EAAM,UAAS,CAAC,CAC7D,EAEA,OACE,EAAAhB,EAAA,KAAA,CAAC,MAAD,CACO,MACL,aAAW,aACX,YAAWmB,EACX,UAAW,CAAC,gBAAiBC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAChE,GAAIlB,EALN,SAAA,EAOE,EAAAF,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,yBACb,UAAA,EAAAA,EAAA,IAAA,CAACL,EAAAA,OAAD,CACE,QAAQ,UACF,OACN,UAAU,eACV,WAAY,CAAC0B,EACb,aAAW,gBACX,WAAYV,EACZ,YAAeI,EAAGR,EAAc,CAAC,EAClC,SAAA,UAEO,CAAA,CACL,CAAA,GAEL,EAAAP,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,EACE,EAAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,GAAIG,EAAS,SAAA,UAAc,CAAA,GACjC,EAAAH,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wBACb,UAAA,EAAAA,EAAA,IAAA,CAACJ,EAAAA,OAAD,CACE,kBAAiBO,EACjB,MAAO,OAAOG,CAAQ,EACtB,QAASgB,EAAgB,IAAK,IAAW,CACvC,MAAO,OAAOC,CAAK,EACnB,MAAO,OAAOA,CAAK,CACrB,EAAE,EACI,OACS,gBACf,WACEd,GAAYJ,GAAgB,KAAK,IAAI,GAAGiB,CAAe,EAEzD,cAAgB,GAAU,CACxB,IAAME,EAAW,OAAOD,CAAK,EAC7B,GAAIC,IAAalB,EAAU,OAC3B,IAAMW,EACJ,KAAK,OAAQV,EAAc,GAAKD,EAAYkB,CAAQ,EAAI,EACpDC,EAAgB,KAAK,IACzB,EACA,KAAK,KAAKpB,EAAemB,CAAQ,CACnC,EACAN,EAAS,CACP,KAAM,KAAK,IAAID,EAAUQ,CAAa,EACtC,SAAUD,CACZ,CAAC,CACH,CACD,CAAA,CACE,CAAA,CACF,CACL,CAAA,GAAA,EAAAxB,EAAA,IAAA,CAAC,OAAD,CACE,UAAU,uBACV,YAAU,SACV,cAAY,OAEX,SAAAK,IAAiB,EACd,aACA,GAAGQ,EAAM,eAAe,OAAO,EAAE,GAAGC,EAAI,eAAe,OAAO,EAAE,MAAMT,EAAa,eAAe,OAAO,GACzG,CAAA,CACH,C,IAEL,EAAAL,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sDACb,UAAA,EAAAA,EAAA,IAAA,CAACL,EAAAA,OAAD,CACE,QAAQ,UACF,OACN,UAAW0B,EAAa,IAAA,GAAY,gBACpC,QAASA,EAAa,gBAAkB,IAAA,GACxC,WAAY,CAACA,EACb,aAAW,YACX,WAAYT,EACZ,YAAeG,EAAGR,EAAc,CAAC,EAClC,SAAA,MAEO,CAAA,CACL,CAAA,CACF,C,EAET,CACF,E"}

package/dist/components/Pagination/index.d.cts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from "react";
+import type { PopoverPlacement } from "../Popover/index.cjs";
+export type PaginationSize = "sm" | "md";
+export interface PaginationState {
+    /** One-based page number. */
+    page: number;
+    /** Positive integer results per page. */
+    pageSize: number;
+}
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "children" | "onChange">, PaginationState {
+    /** Total number of matching results, before pagination. */
+    totalResults: number;
+    /** Emitted once per user change, with both values ready to apply together. */
+    onChange: (next: PaginationState) => void;
+    /** Nonempty list of positive integers containing the current pageSize. */
+    pageSizeOptions?: number[];
+    size?: PaginationSize;
+    isDisabled?: boolean;
+    showLabels?: boolean;
+    menuPlacement?: PopoverPlacement;
+}
+/** Controlled navigation for a result set. Data loading and slicing belong to the application. */
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Pagination/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eAAe;IAC9B,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eACf,SACE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,EAC1D,eAAe;IACjB,2DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1C,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAClC;AAED,kGAAkG;AAClG,eAAO,MAAM,UAAU,yGAkHtB,CAAC"}

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from "react";
+import type { PopoverPlacement } from "../Popover/index.js";
+export type PaginationSize = "sm" | "md";
+export interface PaginationState {
+    /** One-based page number. */
+    page: number;
+    /** Positive integer results per page. */
+    pageSize: number;
+}
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "children" | "onChange">, PaginationState {
+    /** Total number of matching results, before pagination. */
+    totalResults: number;
+    /** Emitted once per user change, with both values ready to apply together. */
+    onChange: (next: PaginationState) => void;
+    /** Nonempty list of positive integers containing the current pageSize. */
+    pageSizeOptions?: number[];
+    size?: PaginationSize;
+    isDisabled?: boolean;
+    showLabels?: boolean;
+    menuPlacement?: PopoverPlacement;
+}
+/** Controlled navigation for a result set. Data loading and slicing belong to the application. */
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,eAAe;IAC9B,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eACf,SACE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,EAC1D,eAAe;IACjB,2DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1C,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAClC;AAED,kGAAkG;AAClG,eAAO,MAAM,UAAU,yGAkHtB,CAAC"}

package/dist/components/Pagination/index.js

@@ -0,0 +1,96 @@
+import { Button as e } from "../Button/index.js";
+import { Select as t } from "../Select/index.js";
+import { forwardRef as n, useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/Pagination/index.tsx
+var o = n(function({ totalResults: n, page: o, pageSize: s, onChange: c, pageSizeOptions: l = [
+	10,
+	25,
+	50,
+	100
+], size: u = "sm", isDisabled: d = !1, showLabels: f = !0, menuPlacement: p = "bottom", className: m, ...h }, g) {
+	let _ = r(), v = Math.max(1, Math.ceil(n / s)), y = Math.min(Math.max(1, o), v), b = d || n === 0, x = b || y === 1, S = b || y === v, C = (y - 1) * s + 1, w = Math.min(y * s, n), T = (e) => {
+		let t = Math.min(Math.max(1, e), v);
+		t !== y && c({
+			page: t,
+			pageSize: s
+		});
+	};
+	return /* @__PURE__ */ a("nav", {
+		ref: g,
+		"aria-label": "Pagination",
+		"data-size": u,
+		className: ["ds-pagination", m].filter(Boolean).join(" "),
+		...h,
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "ds-pagination__actions",
+				children: /* @__PURE__ */ i(e, {
+					variant: "neutral",
+					size: u,
+					iconStart: "chevron-left",
+					isIconOnly: !f,
+					"aria-label": "Previous page",
+					isDisabled: x,
+					onClick: () => T(y - 1),
+					children: "Previous"
+				})
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "ds-pagination__centre",
+				children: [/* @__PURE__ */ a("div", {
+					className: "ds-pagination__per-page",
+					children: [/* @__PURE__ */ i("span", {
+						id: _,
+						children: "Per page"
+					}), /* @__PURE__ */ i("div", {
+						className: "ds-pagination__select",
+						children: /* @__PURE__ */ i(t, {
+							"aria-labelledby": _,
+							value: String(s),
+							options: l.map((e) => ({
+								value: String(e),
+								label: String(e)
+							})),
+							size: u,
+							menuPlacement: p,
+							isDisabled: b || n <= Math.min(...l),
+							onValueChange: (e) => {
+								let t = Number(e);
+								if (t === s) return;
+								let r = Math.floor((y - 1) * s / t) + 1, i = Math.max(1, Math.ceil(n / t));
+								c({
+									page: Math.min(r, i),
+									pageSize: t
+								});
+							}
+						})
+					})]
+				}), /* @__PURE__ */ i("span", {
+					className: "ds-pagination__range",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					children: n === 0 ? "No results" : `${C.toLocaleString("en-US")}–${w.toLocaleString("en-US")} of ${n.toLocaleString("en-US")}`
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "ds-pagination__actions ds-pagination__actions--next",
+				children: /* @__PURE__ */ i(e, {
+					variant: "neutral",
+					size: u,
+					iconStart: f ? void 0 : "chevron-right",
+					iconEnd: f ? "chevron-right" : void 0,
+					isIconOnly: !f,
+					"aria-label": "Next page",
+					isDisabled: S,
+					onClick: () => T(y + 1),
+					children: "Next"
+				})
+			})
+		]
+	});
+});
+//#endregion
+export { o as Pagination };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Pagination","forwardRef","rest","labelId","useId","pageCount","totalResults","pageSize","currentPage","page","disabled","isDisabled","atStart","atEnd","start","end","go","next","nextPage","onChange","size","className","Button","showLabels","Select","pageSizeOptions","value","nextSize","nextPageCount"],"sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes } from \"react\";\nimport { Button } from \"../Button\";\nimport { Select } from \"../Select\";\nimport type { PopoverPlacement } from \"../Popover\";\nimport \"./style.css\";\n\nexport type PaginationSize = \"sm\" | \"md\";\n\nexport interface PaginationState {\n  /** One-based page number. */\n  page: number;\n  /** Positive integer results per page. */\n  pageSize: number;\n}\n\nexport interface PaginationProps\n  extends\n    Omit<HTMLAttributes<HTMLElement>, \"children\" | \"onChange\">,\n    PaginationState {\n  /** Total number of matching results, before pagination. */\n  totalResults: number;\n  /** Emitted once per user change, with both values ready to apply together. */\n  onChange: (next: PaginationState) => void;\n  /** Nonempty list of positive integers containing the current pageSize. */\n  pageSizeOptions?: number[];\n  size?: PaginationSize;\n  isDisabled?: boolean;\n  showLabels?: boolean;\n  menuPlacement?: PopoverPlacement;\n}\n\n/** Controlled navigation for a result set. Data loading and slicing belong to the application. */\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  function Pagination(\n    {\n      totalResults,\n      page,\n      pageSize,\n      onChange,\n      pageSizeOptions = [10, 25, 50, 100],\n      size = \"sm\",\n      isDisabled = false,\n      showLabels = true,\n      menuPlacement = \"bottom\",\n      className,\n      ...rest\n    },\n    ref,\n  ) {\n    const labelId = useId();\n    const pageCount = Math.max(1, Math.ceil(totalResults / pageSize));\n    const currentPage = Math.min(Math.max(1, page), pageCount);\n    const disabled = isDisabled || totalResults === 0;\n    const atStart = disabled || currentPage === 1;\n    const atEnd = disabled || currentPage === pageCount;\n    const start = (currentPage - 1) * pageSize + 1;\n    const end = Math.min(currentPage * pageSize, totalResults);\n\n    const go = (nextPage: number) => {\n      const next = Math.min(Math.max(1, nextPage), pageCount);\n      if (next !== currentPage) onChange({ page: next, pageSize });\n    };\n\n    return (\n      <nav\n        ref={ref}\n        aria-label=\"Pagination\"\n        data-size={size}\n        className={[\"ds-pagination\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        <div className=\"ds-pagination__actions\">\n          <Button\n            variant=\"neutral\"\n            size={size}\n            iconStart=\"chevron-left\"\n            isIconOnly={!showLabels}\n            aria-label=\"Previous page\"\n            isDisabled={atStart}\n            onClick={() => go(currentPage - 1)}\n          >\n            Previous\n          </Button>\n        </div>\n\n        <div className=\"ds-pagination__centre\">\n          <div className=\"ds-pagination__per-page\">\n            <span id={labelId}>Per page</span>\n            <div className=\"ds-pagination__select\">\n              <Select\n                aria-labelledby={labelId}\n                value={String(pageSize)}\n                options={pageSizeOptions.map((value) => ({\n                  value: String(value),\n                  label: String(value),\n                }))}\n                size={size}\n                menuPlacement={menuPlacement}\n                isDisabled={\n                  disabled || totalResults <= Math.min(...pageSizeOptions)\n                }\n                onValueChange={(value) => {\n                  const nextSize = Number(value);\n                  if (nextSize === pageSize) return;\n                  const nextPage =\n                    Math.floor(((currentPage - 1) * pageSize) / nextSize) + 1;\n                  const nextPageCount = Math.max(\n                    1,\n                    Math.ceil(totalResults / nextSize),\n                  );\n                  onChange({\n                    page: Math.min(nextPage, nextPageCount),\n                    pageSize: nextSize,\n                  });\n                }}\n              />\n            </div>\n          </div>\n          <span\n            className=\"ds-pagination__range\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            {totalResults === 0\n              ? \"No results\"\n              : `${start.toLocaleString(\"en-US\")}–${end.toLocaleString(\"en-US\")} of ${totalResults.toLocaleString(\"en-US\")}`}\n          </span>\n        </div>\n\n        <div className=\"ds-pagination__actions ds-pagination__actions--next\">\n          <Button\n            variant=\"neutral\"\n            size={size}\n            iconStart={showLabels ? undefined : \"chevron-right\"}\n            iconEnd={showLabels ? \"chevron-right\" : undefined}\n            isIconOnly={!showLabels}\n            aria-label=\"Next page\"\n            isDisabled={atEnd}\n            onClick={() => go(currentPage + 1)}\n          >\n            Next\n          </Button>\n        </div>\n      </nav>\n    );\n  },\n);\n"],"mappings":";;;;;AAgCA,IAAaA,IAAaC,EACxB,SACE,EACE,iBACA,SACA,aACA,aACA,qBAAkB;CAAC;CAAI;CAAI;CAAI;AAAG,GAClC,UAAO,MACP,gBAAa,IACb,gBAAa,IACb,mBAAgB,UAChB,cACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAM,GAChBC,IAAY,KAAK,IAAI,GAAG,KAAK,KAAKC,IAAeC,CAAQ,CAAC,GAC1DC,IAAc,KAAK,IAAI,KAAK,IAAI,GAAGC,CAAI,GAAGJ,CAAS,GACnDK,IAAWC,KAAcL,MAAiB,GAC1CM,IAAUF,KAAYF,MAAgB,GACtCK,IAAQH,KAAYF,MAAgBH,GACpCS,KAASN,IAAc,KAAKD,IAAW,GACvCQ,IAAM,KAAK,IAAIP,IAAcD,GAAUD,CAAY,GAEnDU,KAAM,MAAqB;EAC/B,IAAMC,IAAO,KAAK,IAAI,KAAK,IAAI,GAAGC,CAAQ,GAAGb,CAAS;EACtD,AAAIY,MAAST,KAAaW,EAAS;GAAE,MAAMF;GAAM;EAAS,CAAC;CAC7D;CAEA,OACE,kBAAC,OAAD;EACO;EACL,cAAW;EACX,aAAWG;EACX,WAAW,CAAC,iBAAiBC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAChE,GAAInB;EALN,UAAA;GAOE,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAACoB,GAAD;KACE,SAAQ;KACF;KACN,WAAU;KACV,YAAY,CAACC;KACb,cAAW;KACX,YAAYX;KACZ,eAAeI,EAAGR,IAAc,CAAC;KAClC,UAAA;IAEO,CAAA;GACL,CAAA;GAEL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,QAAD;MAAM,IAAIL;MAAS,UAAA;KAAc,CAAA,GACjC,kBAAC,OAAD;MAAK,WAAU;MACb,UAAA,kBAACqB,GAAD;OACE,mBAAiBrB;OACjB,OAAO,OAAOI,CAAQ;OACtB,SAASkB,EAAgB,KAAK,OAAW;QACvC,OAAO,OAAOC,CAAK;QACnB,OAAO,OAAOA,CAAK;OACrB,EAAE;OACI;OACS;OACf,YACEhB,KAAYJ,KAAgB,KAAK,IAAI,GAAGmB,CAAe;OAEzD,gBAAgB,MAAU;QACxB,IAAME,IAAW,OAAOD,CAAK;QAC7B,IAAIC,MAAapB,GAAU;QAC3B,IAAMW,IACJ,KAAK,OAAQV,IAAc,KAAKD,IAAYoB,CAAQ,IAAI,GACpDC,IAAgB,KAAK,IACzB,GACA,KAAK,KAAKtB,IAAeqB,CAAQ,CACnC;QACA,EAAS;SACP,MAAM,KAAK,IAAIT,GAAUU,CAAa;SACtC,UAAUD;QACZ,CAAC;OACH;MACD,CAAA;KACE,CAAA,CACF;IACL,CAAA,GAAA,kBAAC,QAAD;KACE,WAAU;KACV,aAAU;KACV,eAAY;KAEX,UAAArB,MAAiB,IACd,eACA,GAAGQ,EAAM,eAAe,OAAO,EAAE,GAAGC,EAAI,eAAe,OAAO,EAAE,MAAMT,EAAa,eAAe,OAAO;IACzG,CAAA,CACH;;GAEL,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAACgB,GAAD;KACE,SAAQ;KACF;KACN,WAAWC,IAAa,KAAA,IAAY;KACpC,SAASA,IAAa,kBAAkB,KAAA;KACxC,YAAY,CAACA;KACb,cAAW;KACX,YAAYV;KACZ,eAAeG,EAAGR,IAAc,CAAC;KAClC,UAAA;IAEO,CAAA;GACL,CAAA;EACF;;AAET,CACF"}

package/dist/components/Pagination/style.css

@@ -0,0 +1,52 @@
+@layer components {
+  .ds-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    padding: var(--space-3) var(--space-5);
+    font-family: var(--font-sans);
+    color: var(--color-text);
+  }
+
+  .ds-pagination__actions {
+    flex: none;
+    align-self: center;
+  }
+
+  .ds-pagination__actions--next {
+    margin-inline-start: auto;
+  }
+
+  .ds-pagination__centre {
+    display: flex;
+    flex: 1 1 15rem;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 0;
+    gap: var(--space-2) var(--space-6);
+  }
+
+  .ds-pagination__per-page {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    white-space: nowrap;
+  }
+
+  .ds-pagination__select {
+    inline-size: 5rem;
+    flex: none;
+  }
+
+  .ds-pagination__range {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+}

package/dist/components/Popover/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime"),n=require("react-dom");function r(...e){return e.filter(Boolean).join(` `)}var i=8;function a({anchorRef:a,anchorId:o,isOpen:s,align:c=`start`,matchAnchorWidth:l=!1,offset:u=4,className:d,children:f,role:p,id:m,panelRef:h,...g}){let _=(0,e.useRef)(null),v=(0,e.useId)(),y=m??v,b=(0,e.useCallback)(()=>{let e=a.current??(o?document.getElementById(o):null),t=_.current;if(!e||!t)return;let n=e.getBoundingClientRect();l&&(t.style.width=`${n.width}px`);let r=t.getBoundingClientRect(),s=document.documentElement.clientWidth,d=document.documentElement.clientHeight,f=d-n.bottom-u-i,p=n.top-u-i,m=f<r.height&&p>f,h=Math.max(120,m?p:f),g=m?Math.max(i,n.top-u-Math.min(r.height,h)):Math.min(n.bottom+u,d-i),v=c===`end`?n.right-r.width:n.left,y=Math.max(i,Math.min(v,s-r.width-i));t.style.left=`${Math.round(y)}px`,t.style.top=`${Math.round(g)}px`,t.style.setProperty(`--popover-max-block-size`,`${Math.round(h)}px`),t.style.visibility=`visible`},[c,o,a,l,u]);if((0,e.useEffect)(()=>{if(!s)return;let e=document.querySelector(`[data-popover-instance="${CSS.escape(v)}"]`);_.current=e,h&&(h.current=e),b();let t=()=>b();return window.addEventListener(`resize`,t),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,t),window.removeEventListener(`scroll`,t,!0),_.current=null,h&&(h.current=null)}},[v,s,y,h,b]),!s||typeof document>`u`)return null;let x=(0,t.jsx)(`div`,{id:y,"data-popover-instance":v,role:p,className:r(`ds-popover`,d),...g,children:f});return(0,n.createPortal)(x,document.body)}exports.Popover=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react-dom"),n=require("react/jsx-runtime");function r(...e){return e.filter(Boolean).join(` `)}var i=8;function a({anchorRef:a,anchorId:o,isOpen:s,align:c=`start`,placement:l=`bottom`,matchAnchorWidth:u=!1,offset:d=4,className:f,children:p,role:m,id:h,panelRef:g,..._}){let v=(0,e.useRef)(null),y=(0,e.useId)(),b=h??y,x=(0,e.useCallback)(()=>{let e=a.current??(o?document.getElementById(o):null),t=v.current;if(!e||!t)return;let n=e.getBoundingClientRect();u&&(t.style.width=`${n.width}px`);let r=t.getBoundingClientRect(),s=document.documentElement.clientWidth,f=document.documentElement.clientHeight,p=f-n.bottom-d-i,m=n.top-d-i,h=l===`top`?m>=r.height||m>p:p<r.height&&m>p,g=Math.max(120,h?m:p),_=h?Math.max(i,n.top-d-Math.min(r.height,g)):Math.min(n.bottom+d,f-i),y=c===`end`?n.right-r.width:n.left,b=Math.max(i,Math.min(y,s-r.width-i));t.style.left=`${Math.round(b)}px`,t.style.top=`${Math.round(_)}px`,t.style.setProperty(`--popover-max-block-size`,`${Math.round(g)}px`),t.style.visibility=`visible`},[c,o,a,u,d,l]);if((0,e.useEffect)(()=>{if(!s)return;let e=document.querySelector(`[data-popover-instance="${CSS.escape(y)}"]`);v.current=e,g&&(g.current=e),x();let t=()=>x();return window.addEventListener(`resize`,t),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,t),window.removeEventListener(`scroll`,t,!0),v.current=null,g&&(g.current=null)}},[y,s,b,g,x]),!s||typeof document>`u`)return null;let S=(0,n.jsx)(`div`,{id:b,"data-popover-instance":y,role:m,className:r(`ds-popover`,f),..._,children:p});return(0,t.createPortal)(S,document.body)}exports.Popover=a;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Popover/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["useRef","useId","useCallback","createPortal","react","react_jsx_runtime","react_dom","cx","parts","VIEWPORT_MARGIN","Popover","rest","floatingRef","generatedId","panelId","id","place","reference","anchorRef","anchorId","floating","anchor","matchAnchorWidth","panel","viewportWidth","viewportHeight","roomBelow","offset","roomAbove","placeAbove","availableHeight","top","preferredLeft","align","left","isOpen","panelRef","update","className"],"sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nconst VIEWPORT_MARGIN = 8;\n\nexport type PopoverAlign = \"start\" | \"end\";\n\nexport interface PopoverProps {\n  /** The control the panel hangs off. */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** Optional DOM id fallback for composed controls whose refs are consumed by a field wrapper. */\n  anchorId?: string;\n  isOpen: boolean;\n  /** Which edge of the anchor the panel lines up with. Flips when it must. */\n  align?: PopoverAlign;\n  /** Match the anchor's width — for listboxes that read as one field. */\n  matchAnchorWidth?: boolean;\n  /** Gap between anchor and panel. */\n  offset?: number;\n  className?: string;\n  children: ReactNode;\n  role?: string;\n  id?: string;\n  \"aria-label\"?: string;\n  panelRef?: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * A panel anchored to a control. It is positioned against the viewport, so it\n * flips above the anchor when the space below runs out and slides inward\n * rather than being cut off at any edge.\n */\nexport function Popover({\n  anchorRef,\n  anchorId,\n  isOpen,\n  align = \"start\",\n  matchAnchorWidth = false,\n  offset = 4,\n  className,\n  children,\n  role,\n  id,\n  panelRef,\n  ...rest\n}: PopoverProps) {\n  const floatingRef = useRef<HTMLDivElement | null>(null);\n  const generatedId = useId();\n  const panelId = id ?? generatedId;\n\n  const place = useCallback(() => {\n    const reference = anchorRef.current ?? (anchorId ? document.getElementById(anchorId) : null);\n    const floating = floatingRef.current;\n    if (!reference || !floating) return;\n\n    const anchor = reference.getBoundingClientRect();\n    if (matchAnchorWidth) floating.style.width = `${anchor.width}px`;\n    const panel = floating.getBoundingClientRect();\n    const viewportWidth = document.documentElement.clientWidth;\n    const viewportHeight = document.documentElement.clientHeight;\n    const roomBelow = viewportHeight - anchor.bottom - offset - VIEWPORT_MARGIN;\n    const roomAbove = anchor.top - offset - VIEWPORT_MARGIN;\n    const placeAbove = roomBelow < panel.height && roomAbove > roomBelow;\n    const availableHeight = Math.max(120, placeAbove ? roomAbove : roomBelow);\n    const top = placeAbove\n      ? Math.max(VIEWPORT_MARGIN, anchor.top - offset - Math.min(panel.height, availableHeight))\n      : Math.min(anchor.bottom + offset, viewportHeight - VIEWPORT_MARGIN);\n    const preferredLeft = align === \"end\" ? anchor.right - panel.width : anchor.left;\n    const left = Math.max(\n      VIEWPORT_MARGIN,\n      Math.min(preferredLeft, viewportWidth - panel.width - VIEWPORT_MARGIN),\n    );\n\n    floating.style.left = `${Math.round(left)}px`;\n    floating.style.top = `${Math.round(top)}px`;\n    floating.style.setProperty(\"--popover-max-block-size\", `${Math.round(availableHeight)}px`);\n    floating.style.visibility = \"visible\";\n  }, [align, anchorId, anchorRef, matchAnchorWidth, offset]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const floating = document.querySelector<HTMLDivElement>(\n      `[data-popover-instance=\"${CSS.escape(generatedId)}\"]`,\n    );\n    floatingRef.current = floating;\n    if (panelRef) panelRef.current = floating;\n    place();\n    const update = () => place();\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    return () => {\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n      floatingRef.current = null;\n      if (panelRef) panelRef.current = null;\n    };\n  }, [generatedId, isOpen, panelId, panelRef, place]);\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const panel = (\n    <div\n      id={panelId}\n      data-popover-instance={generatedId}\n      role={role}\n      className={cx(\"ds-popover\", className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n\n  return createPortal(panel, document.body);\n}\n"],"mappings":"A,gJAIA,SAASO,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAEA,IAAMC,EAAkB,EA6BxB,SAAgBC,EAAQ,CACtB,YACA,WACA,SACA,QAAQ,QACR,mBAAmB,GACnB,SAAS,EACT,YACA,WACA,OACA,KACA,WACA,GAAGC,GACY,CACf,IAAMC,GAAA,EAAcZ,EAAAA,OAAAA,CAA8B,IAAI,EAChDa,GAAA,EAAcZ,EAAAA,MAAAA,CAAM,EACpBa,EAAUC,GAAMF,EAEhBG,GAAA,EAAQd,EAAAA,YAAAA,KAAkB,CAC9B,IAAMe,EAAYC,EAAU,UAAYC,EAAW,SAAS,eAAeA,CAAQ,EAAI,MACjFC,EAAWR,EAAY,QAC7B,GAAI,CAACK,GAAa,CAACG,EAAU,OAE7B,IAAMC,EAASJ,EAAU,sBAAsB,EAC3CK,IAAkB,EAAS,MAAM,MAAQ,GAAGD,EAAO,MAAM,KAC7D,IAAME,EAAQH,EAAS,sBAAsB,EACvCI,EAAgB,SAAS,gBAAgB,YACzCC,EAAiB,SAAS,gBAAgB,aAC1CC,EAAYD,EAAiBJ,EAAO,OAASM,EAASlB,EACtDmB,EAAYP,EAAO,IAAMM,EAASlB,EAClCoB,EAAaH,EAAYH,EAAM,QAAUK,EAAYF,EACrDI,EAAkB,KAAK,IAAI,IAAKD,EAAaD,EAAYF,CAAS,EAClEK,EAAMF,EACR,KAAK,IAAIpB,EAAiBY,EAAO,IAAMM,EAAS,KAAK,IAAIJ,EAAM,OAAQO,CAAe,CAAC,EACvF,KAAK,IAAIT,EAAO,OAASM,EAAQF,EAAiBhB,CAAe,EAC/DuB,EAAgBC,IAAU,MAAQZ,EAAO,MAAQE,EAAM,MAAQF,EAAO,KACtEa,EAAO,KAAK,IAChBzB,EACA,KAAK,IAAIuB,EAAeR,EAAgBD,EAAM,MAAQd,CAAe,CACvE,EAEA,EAAS,MAAM,KAAO,GAAG,KAAK,MAAMyB,CAAI,EAAE,IAC1C,EAAS,MAAM,IAAM,GAAG,KAAK,MAAMH,CAAG,EAAE,IACxCX,EAAS,MAAM,YAAY,2BAA4B,GAAG,KAAK,MAAMU,CAAe,EAAE,GAAG,EACzF,EAAS,MAAM,WAAa,SAC9B,EAAG,CAACG,EAAOd,EAAUD,EAAWI,EAAkBK,CAAM,CAAC,EAqBzD,IAnBA,EAAAvB,EAAA,UAAA,KAAgB,CACd,GAAI,CAAC+B,EAAQ,OACb,IAAMf,EAAW,SAAS,cACxB,2BAA2B,IAAI,OAAOP,CAAW,EAAE,GACrD,EACA,EAAY,QAAUO,EAClBgB,IAAU,EAAS,QAAUhB,GACjCJ,EAAM,EACN,IAAMqB,MAAerB,EAAM,EAG3B,OAFA,OAAO,iBAAiB,SAAUqB,CAAM,EACxC,OAAO,iBAAiB,SAAUA,EAAQ,EAAI,MACjC,CACX,OAAO,oBAAoB,SAAUA,CAAM,EAC3C,OAAO,oBAAoB,SAAUA,EAAQ,EAAI,EACjD,EAAY,QAAU,KAClBD,IAAU,EAAS,QAAU,KACnC,CACF,EAAG,CAACvB,EAAasB,EAAQrB,EAASsB,EAAUpB,CAAK,CAAC,EAE9C,CAACmB,GAAU,OAAO,SAAa,IAAa,OAAO,KAEvD,IAAMZ,GACJ,EAAAlB,EAAA,IAAA,CAAC,MAAD,CACE,GAAIS,EACJ,wBAAuBD,EACjB,OACN,UAAWN,EAAG,aAAc+B,CAAS,EACrC,GAAI3B,EAEH,UACE,CAAA,EAGP,OAAA,EAAOR,EAAAA,aAAAA,CAAaoB,EAAO,SAAS,IAAI,CAC1C,C"}
+{"version":3,"file":"index.cjs","names":["useRef","useId","useCallback","createPortal","react","react_dom","react_jsx_runtime","cx","parts","VIEWPORT_MARGIN","Popover","rest","floatingRef","generatedId","panelId","id","place","reference","anchorRef","anchorId","floating","anchor","matchAnchorWidth","panel","viewportWidth","viewportHeight","roomBelow","offset","roomAbove","placeAbove","placement","availableHeight","top","preferredLeft","align","left","isOpen","panelRef","update","className"],"sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nconst VIEWPORT_MARGIN = 8;\n\nexport type PopoverAlign = \"start\" | \"end\";\nexport type PopoverPlacement = \"top\" | \"bottom\";\n\nexport interface PopoverProps {\n  /** The control the panel hangs off. */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** Optional DOM id fallback for composed controls whose refs are consumed by a field wrapper. */\n  anchorId?: string;\n  isOpen: boolean;\n  /** Which edge of the anchor the panel lines up with. Flips when it must. */\n  align?: PopoverAlign;\n  /** Preferred side of the anchor. Flips when the other side has more room. */\n  placement?: PopoverPlacement;\n  /** Match the anchor's width — for listboxes that read as one field. */\n  matchAnchorWidth?: boolean;\n  /** Gap between anchor and panel. */\n  offset?: number;\n  className?: string;\n  children: ReactNode;\n  role?: string;\n  id?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  panelRef?: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * A panel anchored to a control. It is positioned against the viewport, so it\n * flips above the anchor when the space below runs out and slides inward\n * rather than being cut off at any edge.\n */\nexport function Popover({\n  anchorRef,\n  anchorId,\n  isOpen,\n  align = \"start\",\n  placement = \"bottom\",\n  matchAnchorWidth = false,\n  offset = 4,\n  className,\n  children,\n  role,\n  id,\n  panelRef,\n  ...rest\n}: PopoverProps) {\n  const floatingRef = useRef<HTMLDivElement | null>(null);\n  const generatedId = useId();\n  const panelId = id ?? generatedId;\n\n  const place = useCallback(() => {\n    const reference = anchorRef.current ?? (anchorId ? document.getElementById(anchorId) : null);\n    const floating = floatingRef.current;\n    if (!reference || !floating) return;\n\n    const anchor = reference.getBoundingClientRect();\n    if (matchAnchorWidth) floating.style.width = `${anchor.width}px`;\n    const panel = floating.getBoundingClientRect();\n    const viewportWidth = document.documentElement.clientWidth;\n    const viewportHeight = document.documentElement.clientHeight;\n    const roomBelow = viewportHeight - anchor.bottom - offset - VIEWPORT_MARGIN;\n    const roomAbove = anchor.top - offset - VIEWPORT_MARGIN;\n    const placeAbove = placement === \"top\"\n      ? roomAbove >= panel.height || roomAbove > roomBelow\n      : roomBelow < panel.height && roomAbove > roomBelow;\n    const availableHeight = Math.max(120, placeAbove ? roomAbove : roomBelow);\n    const top = placeAbove\n      ? Math.max(VIEWPORT_MARGIN, anchor.top - offset - Math.min(panel.height, availableHeight))\n      : Math.min(anchor.bottom + offset, viewportHeight - VIEWPORT_MARGIN);\n    const preferredLeft = align === \"end\" ? anchor.right - panel.width : anchor.left;\n    const left = Math.max(\n      VIEWPORT_MARGIN,\n      Math.min(preferredLeft, viewportWidth - panel.width - VIEWPORT_MARGIN),\n    );\n\n    floating.style.left = `${Math.round(left)}px`;\n    floating.style.top = `${Math.round(top)}px`;\n    floating.style.setProperty(\"--popover-max-block-size\", `${Math.round(availableHeight)}px`);\n    floating.style.visibility = \"visible\";\n  }, [align, anchorId, anchorRef, matchAnchorWidth, offset, placement]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const floating = document.querySelector<HTMLDivElement>(\n      `[data-popover-instance=\"${CSS.escape(generatedId)}\"]`,\n    );\n    floatingRef.current = floating;\n    if (panelRef) panelRef.current = floating;\n    place();\n    const update = () => place();\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    return () => {\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n      floatingRef.current = null;\n      if (panelRef) panelRef.current = null;\n    };\n  }, [generatedId, isOpen, panelId, panelRef, place]);\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const panel = (\n    <div\n      id={panelId}\n      data-popover-instance={generatedId}\n      role={role}\n      className={cx(\"ds-popover\", className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n\n  return createPortal(panel, document.body);\n}\n"],"mappings":"A,gJAIA,SAASO,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAEA,IAAMC,EAAkB,EAiCxB,SAAgBC,EAAQ,CACtB,YACA,WACA,SACA,QAAQ,QACR,YAAY,SACZ,mBAAmB,GACnB,SAAS,EACT,YACA,WACA,OACA,KACA,WACA,GAAGC,GACY,CACf,IAAMC,GAAA,EAAcZ,EAAAA,OAAAA,CAA8B,IAAI,EAChDa,GAAA,EAAcZ,EAAAA,MAAAA,CAAM,EACpBa,EAAUC,GAAMF,EAEhBG,GAAA,EAAQd,EAAAA,YAAAA,KAAkB,CAC9B,IAAMe,EAAYC,EAAU,UAAYC,EAAW,SAAS,eAAeA,CAAQ,EAAI,MACjFC,EAAWR,EAAY,QAC7B,GAAI,CAACK,GAAa,CAACG,EAAU,OAE7B,IAAMC,EAASJ,EAAU,sBAAsB,EAC3CK,IAAkB,EAAS,MAAM,MAAQ,GAAGD,EAAO,MAAM,KAC7D,IAAME,EAAQH,EAAS,sBAAsB,EACvCI,EAAgB,SAAS,gBAAgB,YACzCC,EAAiB,SAAS,gBAAgB,aAC1CC,EAAYD,EAAiBJ,EAAO,OAASM,EAASlB,EACtDmB,EAAYP,EAAO,IAAMM,EAASlB,EAClCoB,EAAaC,IAAc,MAC7BF,GAAaL,EAAM,QAAUK,EAAYF,EACzCA,EAAYH,EAAM,QAAUK,EAAYF,EACtCK,EAAkB,KAAK,IAAI,IAAKF,EAAaD,EAAYF,CAAS,EAClEM,EAAMH,EACR,KAAK,IAAIpB,EAAiBY,EAAO,IAAMM,EAAS,KAAK,IAAIJ,EAAM,OAAQQ,CAAe,CAAC,EACvF,KAAK,IAAIV,EAAO,OAASM,EAAQF,EAAiBhB,CAAe,EAC/DwB,EAAgBC,IAAU,MAAQb,EAAO,MAAQE,EAAM,MAAQF,EAAO,KACtEc,EAAO,KAAK,IAChB1B,EACA,KAAK,IAAIwB,EAAeT,EAAgBD,EAAM,MAAQd,CAAe,CACvE,EAEA,EAAS,MAAM,KAAO,GAAG,KAAK,MAAM0B,CAAI,EAAE,IAC1C,EAAS,MAAM,IAAM,GAAG,KAAK,MAAMH,CAAG,EAAE,IACxCZ,EAAS,MAAM,YAAY,2BAA4B,GAAG,KAAK,MAAMW,CAAe,EAAE,GAAG,EACzF,EAAS,MAAM,WAAa,SAC9B,EAAG,CAACG,EAAOf,EAAUD,EAAWI,EAAkBK,EAAQG,CAAS,CAAC,EAqBpE,IAnBA,EAAA1B,EAAA,UAAA,KAAgB,CACd,GAAI,CAACgC,EAAQ,OACb,IAAMhB,EAAW,SAAS,cACxB,2BAA2B,IAAI,OAAOP,CAAW,EAAE,GACrD,EACA,EAAY,QAAUO,EAClBiB,IAAU,EAAS,QAAUjB,GACjCJ,EAAM,EACN,IAAMsB,MAAetB,EAAM,EAG3B,OAFA,OAAO,iBAAiB,SAAUsB,CAAM,EACxC,OAAO,iBAAiB,SAAUA,EAAQ,EAAI,MACjC,CACX,OAAO,oBAAoB,SAAUA,CAAM,EAC3C,OAAO,oBAAoB,SAAUA,EAAQ,EAAI,EACjD,EAAY,QAAU,KAClBD,IAAU,EAAS,QAAU,KACnC,CACF,EAAG,CAACxB,EAAauB,EAAQtB,EAASuB,EAAUrB,CAAK,CAAC,EAE9C,CAACoB,GAAU,OAAO,SAAa,IAAa,OAAO,KAEvD,IAAMb,GACJ,EAAAjB,EAAA,IAAA,CAAC,MAAD,CACE,GAAIQ,EACJ,wBAAuBD,EACjB,OACN,UAAWN,EAAG,aAAcgC,CAAS,EACrC,GAAI5B,EAEH,UACE,CAAA,EAGP,OAAA,EAAOR,EAAAA,aAAAA,CAAaoB,EAAO,SAAS,IAAI,CAC1C,C"}

package/dist/components/Popover/index.d.cts

@@ -1,5 +1,6 @@
 import { type ReactNode, type RefObject } from "react";
 export type PopoverAlign = "start" | "end";
+export type PopoverPlacement = "top" | "bottom";
 export interface PopoverProps {
     /** The control the panel hangs off. */
     anchorRef: RefObject<HTMLElement | null>;
@@ -8,6 +9,8 @@ export interface PopoverProps {
     isOpen: boolean;
     /** Which edge of the anchor the panel lines up with. Flips when it must. */
     align?: PopoverAlign;
+    /** Preferred side of the anchor. Flips when the other side has more room. */
+    placement?: PopoverPlacement;
     /** Match the anchor's width — for listboxes that read as one field. */
     matchAnchorWidth?: boolean;
     /** Gap between anchor and panel. */
@@ -17,6 +20,7 @@ export interface PopoverProps {
     role?: string;
     id?: string;
     "aria-label"?: string;
+    "aria-labelledby"?: string;
     panelRef?: RefObject<HTMLDivElement | null>;
 }
 /**
@@ -24,5 +28,5 @@ export interface PopoverProps {
  * flips above the anchor when the space below runs out and slides inward
  * rather than being cut off at any edge.
  */
-export declare function Popover({ anchorRef, anchorId, isOpen, align, matchAnchorWidth, offset, className, children, role, id, panelRef, ...rest }: PopoverProps): import("react").ReactPortal | null;
+export declare function Popover({ anchorRef, anchorId, isOpen, align, placement, matchAnchorWidth, offset, className, children, role, id, panelRef, ...rest }: PopoverProps): import("react").ReactPortal | null;
 //# sourceMappingURL=index.d.cts.map

package/dist/components/Popover/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9F,OAAO,aAAa,CAAC;AAQrB,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAE3C,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC7C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAe,EACf,gBAAwB,EACxB,MAAU,EACV,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,YAAY,sCAoEd"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9F,OAAO,aAAa,CAAC;AAQrB,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAC3C,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC7C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAe,EACf,SAAoB,EACpB,gBAAwB,EACxB,MAAU,EACV,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,YAAY,sCAsEd"}

package/dist/components/Popover/index.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode, type RefObject } from "react";
 export type PopoverAlign = "start" | "end";
+export type PopoverPlacement = "top" | "bottom";
 export interface PopoverProps {
     /** The control the panel hangs off. */
     anchorRef: RefObject<HTMLElement | null>;
@@ -8,6 +9,8 @@ export interface PopoverProps {
     isOpen: boolean;
     /** Which edge of the anchor the panel lines up with. Flips when it must. */
     align?: PopoverAlign;
+    /** Preferred side of the anchor. Flips when the other side has more room. */
+    placement?: PopoverPlacement;
     /** Match the anchor's width — for listboxes that read as one field. */
     matchAnchorWidth?: boolean;
     /** Gap between anchor and panel. */
@@ -17,6 +20,7 @@ export interface PopoverProps {
     role?: string;
     id?: string;
     "aria-label"?: string;
+    "aria-labelledby"?: string;
     panelRef?: RefObject<HTMLDivElement | null>;
 }
 /**
@@ -24,5 +28,5 @@ export interface PopoverProps {
  * flips above the anchor when the space below runs out and slides inward
  * rather than being cut off at any edge.
  */
-export declare function Popover({ anchorRef, anchorId, isOpen, align, matchAnchorWidth, offset, className, children, role, id, panelRef, ...rest }: PopoverProps): import("react").ReactPortal | null;
+export declare function Popover({ anchorRef, anchorId, isOpen, align, placement, matchAnchorWidth, offset, className, children, role, id, panelRef, ...rest }: PopoverProps): import("react").ReactPortal | null;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9F,OAAO,aAAa,CAAC;AAQrB,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAE3C,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC7C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAe,EACf,gBAAwB,EACxB,MAAU,EACV,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,YAAY,sCAoEd"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9F,OAAO,aAAa,CAAC;AAQrB,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,KAAK,CAAC;AAC3C,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC7C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAe,EACf,SAAoB,EACpB,gBAAwB,EACxB,MAAU,EACV,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,YAAY,sCAsEd"}

package/dist/components/Popover/index.js

@@ -1,50 +1,51 @@
 import { useCallback as e, useEffect as t, useId as n, useRef as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
-import { createPortal as a } from "react-dom";
+import { createPortal as i } from "react-dom";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/Popover/index.tsx
 function o(...e) {
 	return e.filter(Boolean).join(" ");
 }
 var s = 8;
-function c({ anchorRef: c, anchorId: l, isOpen: u, align: d = "start", matchAnchorWidth: f = !1, offset: p = 4, className: m, children: h, role: g, id: _, panelRef: v, ...y }) {
-	let b = r(null), x = n(), S = _ ?? x, C = e(() => {
-		let e = c.current ?? (l ? document.getElementById(l) : null), t = b.current;
+function c({ anchorRef: c, anchorId: l, isOpen: u, align: d = "start", placement: f = "bottom", matchAnchorWidth: p = !1, offset: m = 4, className: h, children: g, role: _, id: v, panelRef: y, ...b }) {
+	let x = r(null), S = n(), C = v ?? S, w = e(() => {
+		let e = c.current ?? (l ? document.getElementById(l) : null), t = x.current;
 		if (!e || !t) return;
 		let n = e.getBoundingClientRect();
-		f && (t.style.width = `${n.width}px`);
-		let r = t.getBoundingClientRect(), i = document.documentElement.clientWidth, a = document.documentElement.clientHeight, o = a - n.bottom - p - s, u = n.top - p - s, m = o < r.height && u > o, h = Math.max(120, m ? u : o), g = m ? Math.max(s, n.top - p - Math.min(r.height, h)) : Math.min(n.bottom + p, a - s), _ = d === "end" ? n.right - r.width : n.left, v = Math.max(s, Math.min(_, i - r.width - s));
-		t.style.left = `${Math.round(v)}px`, t.style.top = `${Math.round(g)}px`, t.style.setProperty("--popover-max-block-size", `${Math.round(h)}px`), t.style.visibility = "visible";
+		p && (t.style.width = `${n.width}px`);
+		let r = t.getBoundingClientRect(), i = document.documentElement.clientWidth, a = document.documentElement.clientHeight, o = a - n.bottom - m - s, u = n.top - m - s, h = f === "top" ? u >= r.height || u > o : o < r.height && u > o, g = Math.max(120, h ? u : o), _ = h ? Math.max(s, n.top - m - Math.min(r.height, g)) : Math.min(n.bottom + m, a - s), v = d === "end" ? n.right - r.width : n.left, y = Math.max(s, Math.min(v, i - r.width - s));
+		t.style.left = `${Math.round(y)}px`, t.style.top = `${Math.round(_)}px`, t.style.setProperty("--popover-max-block-size", `${Math.round(g)}px`), t.style.visibility = "visible";
 	}, [
 		d,
 		l,
 		c,
-		f,
-		p
+		p,
+		m,
+		f
 	]);
 	if (t(() => {
 		if (!u) return;
-		let e = document.querySelector(`[data-popover-instance="${CSS.escape(x)}"]`);
-		b.current = e, v && (v.current = e), C();
-		let t = () => C();
+		let e = document.querySelector(`[data-popover-instance="${CSS.escape(S)}"]`);
+		x.current = e, y && (y.current = e), w();
+		let t = () => w();
 		return window.addEventListener("resize", t), window.addEventListener("scroll", t, !0), () => {
-			window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0), b.current = null, v && (v.current = null);
+			window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0), x.current = null, y && (y.current = null);
 		};
 	}, [
-		x,
-		u,
 		S,
-		v,
-		C
+		u,
+		C,
+		y,
+		w
 	]), !u || typeof document > "u") return null;
-	let w = /* @__PURE__ */ i("div", {
-		id: S,
-		"data-popover-instance": x,
-		role: g,
-		className: o("ds-popover", m),
-		...y,
-		children: h
+	let T = /* @__PURE__ */ a("div", {
+		id: C,
+		"data-popover-instance": S,
+		role: _,
+		className: o("ds-popover", h),
+		...b,
+		children: g
 	});
-	return a(w, document.body);
+	return i(T, document.body);
 }
 //#endregion
 export { c as Popover };

package/dist/components/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["cx","parts","VIEWPORT_MARGIN","Popover","rest","floatingRef","useRef","generatedId","useId","panelId","id","place","useCallback","reference","anchorRef","anchorId","floating","anchor","matchAnchorWidth","panel","viewportWidth","viewportHeight","roomBelow","offset","roomAbove","placeAbove","availableHeight","top","preferredLeft","align","left","useEffect","isOpen","panelRef","update","className","createPortal"],"sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nconst VIEWPORT_MARGIN = 8;\n\nexport type PopoverAlign = \"start\" | \"end\";\n\nexport interface PopoverProps {\n  /** The control the panel hangs off. */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** Optional DOM id fallback for composed controls whose refs are consumed by a field wrapper. */\n  anchorId?: string;\n  isOpen: boolean;\n  /** Which edge of the anchor the panel lines up with. Flips when it must. */\n  align?: PopoverAlign;\n  /** Match the anchor's width — for listboxes that read as one field. */\n  matchAnchorWidth?: boolean;\n  /** Gap between anchor and panel. */\n  offset?: number;\n  className?: string;\n  children: ReactNode;\n  role?: string;\n  id?: string;\n  \"aria-label\"?: string;\n  panelRef?: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * A panel anchored to a control. It is positioned against the viewport, so it\n * flips above the anchor when the space below runs out and slides inward\n * rather than being cut off at any edge.\n */\nexport function Popover({\n  anchorRef,\n  anchorId,\n  isOpen,\n  align = \"start\",\n  matchAnchorWidth = false,\n  offset = 4,\n  className,\n  children,\n  role,\n  id,\n  panelRef,\n  ...rest\n}: PopoverProps) {\n  const floatingRef = useRef<HTMLDivElement | null>(null);\n  const generatedId = useId();\n  const panelId = id ?? generatedId;\n\n  const place = useCallback(() => {\n    const reference = anchorRef.current ?? (anchorId ? document.getElementById(anchorId) : null);\n    const floating = floatingRef.current;\n    if (!reference || !floating) return;\n\n    const anchor = reference.getBoundingClientRect();\n    if (matchAnchorWidth) floating.style.width = `${anchor.width}px`;\n    const panel = floating.getBoundingClientRect();\n    const viewportWidth = document.documentElement.clientWidth;\n    const viewportHeight = document.documentElement.clientHeight;\n    const roomBelow = viewportHeight - anchor.bottom - offset - VIEWPORT_MARGIN;\n    const roomAbove = anchor.top - offset - VIEWPORT_MARGIN;\n    const placeAbove = roomBelow < panel.height && roomAbove > roomBelow;\n    const availableHeight = Math.max(120, placeAbove ? roomAbove : roomBelow);\n    const top = placeAbove\n      ? Math.max(VIEWPORT_MARGIN, anchor.top - offset - Math.min(panel.height, availableHeight))\n      : Math.min(anchor.bottom + offset, viewportHeight - VIEWPORT_MARGIN);\n    const preferredLeft = align === \"end\" ? anchor.right - panel.width : anchor.left;\n    const left = Math.max(\n      VIEWPORT_MARGIN,\n      Math.min(preferredLeft, viewportWidth - panel.width - VIEWPORT_MARGIN),\n    );\n\n    floating.style.left = `${Math.round(left)}px`;\n    floating.style.top = `${Math.round(top)}px`;\n    floating.style.setProperty(\"--popover-max-block-size\", `${Math.round(availableHeight)}px`);\n    floating.style.visibility = \"visible\";\n  }, [align, anchorId, anchorRef, matchAnchorWidth, offset]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const floating = document.querySelector<HTMLDivElement>(\n      `[data-popover-instance=\"${CSS.escape(generatedId)}\"]`,\n    );\n    floatingRef.current = floating;\n    if (panelRef) panelRef.current = floating;\n    place();\n    const update = () => place();\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    return () => {\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n      floatingRef.current = null;\n      if (panelRef) panelRef.current = null;\n    };\n  }, [generatedId, isOpen, panelId, panelRef, place]);\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const panel = (\n    <div\n      id={panelId}\n      data-popover-instance={generatedId}\n      role={role}\n      className={cx(\"ds-popover\", className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n\n  return createPortal(panel, document.body);\n}\n"],"mappings":";;;;AAIA,SAASA,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAEA,IAAMC,IAAkB;AA6BxB,SAAgBC,EAAQ,EACtB,cACA,aACA,WACA,WAAQ,SACR,sBAAmB,IACnB,YAAS,GACT,cACA,aACA,SACA,OACA,aACA,GAAGC,KACY;CACf,IAAMC,IAAcC,EAA8B,IAAI,GAChDC,IAAcC,EAAM,GACpBC,IAAUC,KAAMH,GAEhBI,IAAQC,QAAkB;EAC9B,IAAMC,IAAYC,EAAU,YAAYC,IAAW,SAAS,eAAeA,CAAQ,IAAI,OACjFC,IAAWX,EAAY;EAC7B,IAAI,CAACQ,KAAa,CAACG,GAAU;EAE7B,IAAMC,IAASJ,EAAU,sBAAsB;EAC/C,AAAIK,MAAkB,EAAS,MAAM,QAAQ,GAAGD,EAAO,MAAM;EAC7D,IAAME,IAAQH,EAAS,sBAAsB,GACvCI,IAAgB,SAAS,gBAAgB,aACzCC,IAAiB,SAAS,gBAAgB,cAC1CC,IAAYD,IAAiBJ,EAAO,SAASM,IAASrB,GACtDsB,IAAYP,EAAO,MAAMM,IAASrB,GAClCuB,IAAaH,IAAYH,EAAM,UAAUK,IAAYF,GACrDI,IAAkB,KAAK,IAAI,KAAKD,IAAaD,IAAYF,CAAS,GAClEK,IAAMF,IACR,KAAK,IAAIvB,GAAiBe,EAAO,MAAMM,IAAS,KAAK,IAAIJ,EAAM,QAAQO,CAAe,CAAC,IACvF,KAAK,IAAIT,EAAO,SAASM,GAAQF,IAAiBnB,CAAe,GAC/D0B,IAAgBC,MAAU,QAAQZ,EAAO,QAAQE,EAAM,QAAQF,EAAO,MACtEa,IAAO,KAAK,IAChB5B,GACA,KAAK,IAAI0B,GAAeR,IAAgBD,EAAM,QAAQjB,CAAe,CACvE;EAKA,AAHA,EAAS,MAAM,OAAO,GAAG,KAAK,MAAM4B,CAAI,EAAE,KAC1C,EAAS,MAAM,MAAM,GAAG,KAAK,MAAMH,CAAG,EAAE,KACxCX,EAAS,MAAM,YAAY,4BAA4B,GAAG,KAAK,MAAMU,CAAe,EAAE,GAAG,GACzF,EAAS,MAAM,aAAa;CAC9B,GAAG;EAACG;EAAOd;EAAUD;EAAWI;EAAkBK;CAAM,CAAC;CAqBzD,IAnBAQ,QAAgB;EACd,IAAI,CAACC,GAAQ;EACb,IAAMhB,IAAW,SAAS,cACxB,2BAA2B,IAAI,OAAOT,CAAW,EAAE,GACrD;EAGA,AAFA,EAAY,UAAUS,GAClBiB,MAAU,EAAS,UAAUjB,IACjCL,EAAM;EACN,IAAMuB,UAAevB,EAAM;EAG3B,OAFA,OAAO,iBAAiB,UAAUuB,CAAM,GACxC,OAAO,iBAAiB,UAAUA,GAAQ,EAAI,SACjC;GAIX,AAHA,OAAO,oBAAoB,UAAUA,CAAM,GAC3C,OAAO,oBAAoB,UAAUA,GAAQ,EAAI,GACjD,EAAY,UAAU,MAClBD,MAAU,EAAS,UAAU;EACnC;CACF,GAAG;EAAC1B;EAAayB;EAAQvB;EAASwB;EAAUtB;CAAK,CAAC,GAE9C,CAACqB,KAAU,OAAO,WAAa,KAAa,OAAO;CAEvD,IAAMb,IACJ,kBAAC,OAAD;EACE,IAAIV;EACJ,yBAAuBF;EACjB;EACN,WAAWP,EAAG,cAAcmC,CAAS;EACrC,GAAI/B;EAEH;CACE,CAAA;CAGP,OAAOgC,EAAajB,GAAO,SAAS,IAAI;AAC1C"}
+{"version":3,"file":"index.js","names":["cx","parts","VIEWPORT_MARGIN","Popover","rest","floatingRef","useRef","generatedId","useId","panelId","id","place","useCallback","reference","anchorRef","anchorId","floating","anchor","matchAnchorWidth","panel","viewportWidth","viewportHeight","roomBelow","offset","roomAbove","placeAbove","placement","availableHeight","top","preferredLeft","align","left","useEffect","isOpen","panelRef","update","className","createPortal"],"sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nconst VIEWPORT_MARGIN = 8;\n\nexport type PopoverAlign = \"start\" | \"end\";\nexport type PopoverPlacement = \"top\" | \"bottom\";\n\nexport interface PopoverProps {\n  /** The control the panel hangs off. */\n  anchorRef: RefObject<HTMLElement | null>;\n  /** Optional DOM id fallback for composed controls whose refs are consumed by a field wrapper. */\n  anchorId?: string;\n  isOpen: boolean;\n  /** Which edge of the anchor the panel lines up with. Flips when it must. */\n  align?: PopoverAlign;\n  /** Preferred side of the anchor. Flips when the other side has more room. */\n  placement?: PopoverPlacement;\n  /** Match the anchor's width — for listboxes that read as one field. */\n  matchAnchorWidth?: boolean;\n  /** Gap between anchor and panel. */\n  offset?: number;\n  className?: string;\n  children: ReactNode;\n  role?: string;\n  id?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  panelRef?: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * A panel anchored to a control. It is positioned against the viewport, so it\n * flips above the anchor when the space below runs out and slides inward\n * rather than being cut off at any edge.\n */\nexport function Popover({\n  anchorRef,\n  anchorId,\n  isOpen,\n  align = \"start\",\n  placement = \"bottom\",\n  matchAnchorWidth = false,\n  offset = 4,\n  className,\n  children,\n  role,\n  id,\n  panelRef,\n  ...rest\n}: PopoverProps) {\n  const floatingRef = useRef<HTMLDivElement | null>(null);\n  const generatedId = useId();\n  const panelId = id ?? generatedId;\n\n  const place = useCallback(() => {\n    const reference = anchorRef.current ?? (anchorId ? document.getElementById(anchorId) : null);\n    const floating = floatingRef.current;\n    if (!reference || !floating) return;\n\n    const anchor = reference.getBoundingClientRect();\n    if (matchAnchorWidth) floating.style.width = `${anchor.width}px`;\n    const panel = floating.getBoundingClientRect();\n    const viewportWidth = document.documentElement.clientWidth;\n    const viewportHeight = document.documentElement.clientHeight;\n    const roomBelow = viewportHeight - anchor.bottom - offset - VIEWPORT_MARGIN;\n    const roomAbove = anchor.top - offset - VIEWPORT_MARGIN;\n    const placeAbove = placement === \"top\"\n      ? roomAbove >= panel.height || roomAbove > roomBelow\n      : roomBelow < panel.height && roomAbove > roomBelow;\n    const availableHeight = Math.max(120, placeAbove ? roomAbove : roomBelow);\n    const top = placeAbove\n      ? Math.max(VIEWPORT_MARGIN, anchor.top - offset - Math.min(panel.height, availableHeight))\n      : Math.min(anchor.bottom + offset, viewportHeight - VIEWPORT_MARGIN);\n    const preferredLeft = align === \"end\" ? anchor.right - panel.width : anchor.left;\n    const left = Math.max(\n      VIEWPORT_MARGIN,\n      Math.min(preferredLeft, viewportWidth - panel.width - VIEWPORT_MARGIN),\n    );\n\n    floating.style.left = `${Math.round(left)}px`;\n    floating.style.top = `${Math.round(top)}px`;\n    floating.style.setProperty(\"--popover-max-block-size\", `${Math.round(availableHeight)}px`);\n    floating.style.visibility = \"visible\";\n  }, [align, anchorId, anchorRef, matchAnchorWidth, offset, placement]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const floating = document.querySelector<HTMLDivElement>(\n      `[data-popover-instance=\"${CSS.escape(generatedId)}\"]`,\n    );\n    floatingRef.current = floating;\n    if (panelRef) panelRef.current = floating;\n    place();\n    const update = () => place();\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    return () => {\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n      floatingRef.current = null;\n      if (panelRef) panelRef.current = null;\n    };\n  }, [generatedId, isOpen, panelId, panelRef, place]);\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const panel = (\n    <div\n      id={panelId}\n      data-popover-instance={generatedId}\n      role={role}\n      className={cx(\"ds-popover\", className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n\n  return createPortal(panel, document.body);\n}\n"],"mappings":";;;;AAIA,SAASA,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAEA,IAAMC,IAAkB;AAiCxB,SAAgBC,EAAQ,EACtB,cACA,aACA,WACA,WAAQ,SACR,eAAY,UACZ,sBAAmB,IACnB,YAAS,GACT,cACA,aACA,SACA,OACA,aACA,GAAGC,KACY;CACf,IAAMC,IAAcC,EAA8B,IAAI,GAChDC,IAAcC,EAAM,GACpBC,IAAUC,KAAMH,GAEhBI,IAAQC,QAAkB;EAC9B,IAAMC,IAAYC,EAAU,YAAYC,IAAW,SAAS,eAAeA,CAAQ,IAAI,OACjFC,IAAWX,EAAY;EAC7B,IAAI,CAACQ,KAAa,CAACG,GAAU;EAE7B,IAAMC,IAASJ,EAAU,sBAAsB;EAC/C,AAAIK,MAAkB,EAAS,MAAM,QAAQ,GAAGD,EAAO,MAAM;EAC7D,IAAME,IAAQH,EAAS,sBAAsB,GACvCI,IAAgB,SAAS,gBAAgB,aACzCC,IAAiB,SAAS,gBAAgB,cAC1CC,IAAYD,IAAiBJ,EAAO,SAASM,IAASrB,GACtDsB,IAAYP,EAAO,MAAMM,IAASrB,GAClCuB,IAAaC,MAAc,QAC7BF,KAAaL,EAAM,UAAUK,IAAYF,IACzCA,IAAYH,EAAM,UAAUK,IAAYF,GACtCK,IAAkB,KAAK,IAAI,KAAKF,IAAaD,IAAYF,CAAS,GAClEM,IAAMH,IACR,KAAK,IAAIvB,GAAiBe,EAAO,MAAMM,IAAS,KAAK,IAAIJ,EAAM,QAAQQ,CAAe,CAAC,IACvF,KAAK,IAAIV,EAAO,SAASM,GAAQF,IAAiBnB,CAAe,GAC/D2B,IAAgBC,MAAU,QAAQb,EAAO,QAAQE,EAAM,QAAQF,EAAO,MACtEc,IAAO,KAAK,IAChB7B,GACA,KAAK,IAAI2B,GAAeT,IAAgBD,EAAM,QAAQjB,CAAe,CACvE;EAKA,AAHA,EAAS,MAAM,OAAO,GAAG,KAAK,MAAM6B,CAAI,EAAE,KAC1C,EAAS,MAAM,MAAM,GAAG,KAAK,MAAMH,CAAG,EAAE,KACxCZ,EAAS,MAAM,YAAY,4BAA4B,GAAG,KAAK,MAAMW,CAAe,EAAE,GAAG,GACzF,EAAS,MAAM,aAAa;CAC9B,GAAG;EAACG;EAAOf;EAAUD;EAAWI;EAAkBK;EAAQG;CAAS,CAAC;CAqBpE,IAnBAM,QAAgB;EACd,IAAI,CAACC,GAAQ;EACb,IAAMjB,IAAW,SAAS,cACxB,2BAA2B,IAAI,OAAOT,CAAW,EAAE,GACrD;EAGA,AAFA,EAAY,UAAUS,GAClBkB,MAAU,EAAS,UAAUlB,IACjCL,EAAM;EACN,IAAMwB,UAAexB,EAAM;EAG3B,OAFA,OAAO,iBAAiB,UAAUwB,CAAM,GACxC,OAAO,iBAAiB,UAAUA,GAAQ,EAAI,SACjC;GAIX,AAHA,OAAO,oBAAoB,UAAUA,CAAM,GAC3C,OAAO,oBAAoB,UAAUA,GAAQ,EAAI,GACjD,EAAY,UAAU,MAClBD,MAAU,EAAS,UAAU;EACnC;CACF,GAAG;EAAC3B;EAAa0B;EAAQxB;EAASyB;EAAUvB;CAAK,CAAC,GAE9C,CAACsB,KAAU,OAAO,WAAa,KAAa,OAAO;CAEvD,IAAMd,IACJ,kBAAC,OAAD;EACE,IAAIV;EACJ,yBAAuBF;EACjB;EACN,WAAWP,EAAG,cAAcoC,CAAS;EACrC,GAAIhC;EAEH;CACE,CAAA;CAGP,OAAOiC,EAAalB,GAAO,SAAS,IAAI;AAC1C"}

package/dist/components/SearchField/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");;/* empty css                            */const t=require("../FieldAffix/index.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)(function({size:i=`md`,isDisabled:a=!1,onClear:o,className:s,placeholder:c=`Search`,value:l,disabled:u,onKeyDown:d,...f},p){let m=(0,n.useRef)(null),h=l!==void 0&&String(l).length>0;return(0,r.jsx)(t.FieldAffix,{className:s,lead:(0,r.jsx)(e.t,{name:`search`,size:16}),isTrailInteractive:!0,trail:h&&o?(0,r.jsx)(`button`,{type:`button`,className:`ds-search__clear`,"aria-label":`Clear search`,disabled:a||u,onClick:()=>{o(),m.current?.focus()},children:(0,r.jsx)(e.t,{name:`x`,size:16})}):void 0,children:(0,r.jsx)(`input`,{ref:e=>{m.current=e,typeof p==`function`?p(e):p&&(p.current=e)},type:`search`,value:l,placeholder:c,disabled:a||u,"data-size":i,className:`ds-field-skin ds-search__input`,onKeyDown:e=>{e.key===`Escape`&&o&&o(),d?.(e)},...f})})});exports.SearchField=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs");;/* empty css                            */const n=require("../FieldAffix/index.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(function({size:a=`md`,isDisabled:o=!1,onClear:s,className:c,placeholder:l=`Search`,value:u,disabled:d,onKeyDown:f,...p},m){let h=(0,r.useRef)(null),g=u!==void 0&&String(u).length>0;return(0,i.jsx)(n.FieldAffix,{className:c,lead:(0,i.jsx)(e.t,{name:`search`,size:16}),isTrailInteractive:!0,trail:g&&s?(0,i.jsx)(t.Button,{variant:`simple`,size:`xs`,isIconOnly:!0,iconStart:`x`,"aria-label":`Clear search`,isDisabled:o||d,onClick:()=>{s(),h.current?.focus()}}):void 0,children:(0,i.jsx)(`input`,{ref:e=>{h.current=e,typeof m==`function`?m(e):m&&(m.current=e)},type:`search`,value:u,placeholder:l,disabled:o||d,"data-size":a,className:`ds-field-skin ds-search__input`,onKeyDown:e=>{e.key===`Escape`&&s&&s(),f?.(e)},...p})})});exports.SearchField=a;
 //# sourceMappingURL=index.cjs.map

package/dist/components/SearchField/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","useRef","FieldAffix","Icon","require_Icon","require_components_FieldAffix_index","react","react_jsx_runtime","SearchField","rest","inner","hasValue","value","onClear","isDisabled","disabled","node","ref","size","event","onKeyDown"],"sources":["../../../src/components/SearchField/index.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\"> {\n  size?: FieldSize;\n  isDisabled?: boolean;\n  /** Fired by the clear button and by Escape. */\n  onClear?: () => void;\n}\n\n/** A filter over a collection. Carries the glyph, and clears without a Save. */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  {\n    size = \"md\",\n    isDisabled = false,\n    onClear,\n    className,\n    placeholder = \"Search\",\n    value,\n    disabled,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const inner = useRef<HTMLInputElement | null>(null);\n  const hasValue = value !== undefined ? String(value).length > 0 : false;\n\n  return (\n    <FieldAffix\n      className={className}\n      lead={<Icon name=\"search\" size={16} />}\n      isTrailInteractive\n      trail={\n        hasValue && onClear ? (\n          <button\n            type=\"button\"\n            className=\"ds-search__clear\"\n            aria-label=\"Clear search\"\n            disabled={isDisabled || disabled}\n            onClick={() => {\n              onClear();\n              inner.current?.focus();\n            }}\n          >\n            <Icon name=\"x\" size={16} />\n          </button>\n        ) : undefined\n      }\n    >\n      <input\n        ref={(node) => {\n          inner.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        placeholder={placeholder}\n        disabled={isDisabled || disabled}\n        data-size={size}\n        className=\"ds-field-skin ds-search__input\"\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\" && onClear) onClear();\n          onKeyDown?.(event);\n        }}\n        {...rest}\n      />\n    </FieldAffix>\n  );\n});\n"],"mappings":"A,iQAgBA,IAAaQ,GAAA,EAAcR,EAAAA,WAAAA,CAA+C,SACxE,CACE,OAAO,KACP,aAAa,GACb,UACA,YACA,cAAc,SACd,QACA,WACA,YACA,GAAGS,GAEL,EACA,CACA,IAAMC,GAAA,EAAQT,EAAAA,OAAAA,CAAgC,IAAI,EAC5CU,EAAWC,IAAU,IAAA,IAAY,OAAOA,CAAK,CAAC,CAAC,OAAS,EAE9D,OACE,EAAAL,EAAA,IAAA,CAACL,EAAAA,WAAD,CACa,YACX,MAAM,EAAAK,EAAA,IAAA,CAACJ,EAAAA,EAAD,CAAM,KAAK,SAAS,KAAM,EAAK,CAAA,EACrC,mBAAA,GACA,MACEQ,GAAYE,GACV,EAAAN,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,UAAU,mBACV,aAAW,eACX,SAAUO,GAAcC,EACxB,YAAe,CACbF,EAAQ,EACRH,EAAM,SAAS,MAAM,CACvB,EAEA,UAAA,EAAAH,EAAA,IAAA,CAACJ,EAAAA,EAAD,CAAM,KAAK,IAAI,KAAM,EAAK,CAAA,CACpB,CAAA,EACN,IAAA,GAGN,UAAA,EAAAI,EAAA,IAAA,CAAC,QAAD,CACE,IAAM,GAAS,CACb,EAAM,QAAUS,EACZ,OAAOC,GAAQ,WAAYA,EAAID,CAAI,EAC9BC,IAAK,EAAI,QAAUD,EAC9B,EACA,KAAK,SACE,QACM,cACb,SAAUF,GAAcC,EACxB,YAAWG,EACX,UAAU,iCACV,UAAY,GAAU,CAChBC,EAAM,MAAQ,UAAYN,GAASA,EAAQ,EAC/CO,IAAYD,CAAK,CACnB,EACA,GAAIV,CACL,CAAA,CACS,CAAA,CAEhB,CAAC,E"}
+{"version":3,"file":"index.cjs","names":["forwardRef","useRef","FieldAffix","Icon","Button","require_Icon","require_components_Button_index","require_components_FieldAffix_index","react","react_jsx_runtime","SearchField","rest","inner","hasValue","value","onClear","isDisabled","disabled","node","ref","size","event","onKeyDown"],"sources":["../../../src/components/SearchField/index.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport { FieldAffix } from \"../FieldAffix\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"type\"> {\n  size?: FieldSize;\n  isDisabled?: boolean;\n  /** Fired by the clear button and by Escape. */\n  onClear?: () => void;\n}\n\n/** A filter over a collection. Carries the glyph, and clears without a Save. */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  {\n    size = \"md\",\n    isDisabled = false,\n    onClear,\n    className,\n    placeholder = \"Search\",\n    value,\n    disabled,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const inner = useRef<HTMLInputElement | null>(null);\n  const hasValue = value !== undefined ? String(value).length > 0 : false;\n\n  return (\n    <FieldAffix\n      className={className}\n      lead={<Icon name=\"search\" size={16} />}\n      isTrailInteractive\n      trail={\n        hasValue && onClear ? (\n          <Button\n            variant=\"simple\"\n            size=\"xs\"\n            isIconOnly\n            iconStart=\"x\"\n            aria-label=\"Clear search\"\n            isDisabled={isDisabled || disabled}\n            onClick={() => {\n              onClear();\n              inner.current?.focus();\n            }}\n          />\n        ) : undefined\n      }\n    >\n      <input\n        ref={(node) => {\n          inner.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        placeholder={placeholder}\n        disabled={isDisabled || disabled}\n        data-size={size}\n        className=\"ds-field-skin ds-search__input\"\n        onKeyDown={(event) => {\n          if (event.key === \"Escape\" && onClear) onClear();\n          onKeyDown?.(event);\n        }}\n        {...rest}\n      />\n    </FieldAffix>\n  );\n});\n"],"mappings":"A,kSAiBA,IAAaU,GAAA,EAAcV,EAAAA,WAAAA,CAA+C,SACxE,CACE,OAAO,KACP,aAAa,GACb,UACA,YACA,cAAc,SACd,QACA,WACA,YACA,GAAGW,GAEL,EACA,CACA,IAAMC,GAAA,EAAQX,EAAAA,OAAAA,CAAgC,IAAI,EAC5CY,EAAWC,IAAU,IAAA,IAAY,OAAOA,CAAK,CAAC,CAAC,OAAS,EAE9D,OACE,EAAAL,EAAA,IAAA,CAACP,EAAAA,WAAD,CACa,YACX,MAAM,EAAAO,EAAA,IAAA,CAACN,EAAAA,EAAD,CAAM,KAAK,SAAS,KAAM,EAAK,CAAA,EACrC,mBAAA,GACA,MACEU,GAAYE,GACV,EAAAN,EAAA,IAAA,CAACL,EAAAA,OAAD,CACE,QAAQ,SACR,KAAK,KACL,WAAA,GACA,UAAU,IACV,aAAW,eACX,WAAYY,GAAcC,EAC1B,YAAe,CACbF,EAAQ,EACRH,EAAM,SAAS,MAAM,CACvB,CACD,CAAA,EACC,IAAA,GAGN,UAAA,EAAAH,EAAA,IAAA,CAAC,QAAD,CACE,IAAM,GAAS,CACb,EAAM,QAAUS,EACZ,OAAOC,GAAQ,WAAYA,EAAID,CAAI,EAC9BC,IAAK,EAAI,QAAUD,EAC9B,EACA,KAAK,SACE,QACM,cACb,SAAUF,GAAcC,EACxB,YAAWG,EACX,UAAU,iCACV,UAAY,GAAU,CAChBC,EAAM,MAAQ,UAAYN,GAASA,EAAQ,EAC/CO,IAAYD,CAAK,CACnB,EACA,GAAIV,CACL,CAAA,CACS,CAAA,CAEhB,CAAC,E"}

package/dist/components/SearchField/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SearchField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,+GA2DtB,CAAC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/SearchField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,+GA2DtB,CAAC"}

package/dist/components/SearchField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,+GA2DtB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,+GA2DtB,CAAC"}