@plumile/ui 0.1.55 → 0.1.56

package/lib/esm/components/data-table/TableCell.js

@@ -0,0 +1,74 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as d } from "react";
+import { Badge as a } from "../../atomic/atoms/badge/Badge.js";
+import { FormattedDate as f } from "../../atomic/atoms/formatted-date/FormattedDate.js";
+import { muted as N, date as g, number as h, text as p } from "./TableCell.css.js";
+import { TableCellBase as o } from "./TableCellBase.js";
+import { cx as C } from "../../theme/tools.js";
+const c = "—", u = c, D = {
+  maximumFractionDigits: 2
+}, F = {
+  dateStyle: "medium",
+  timeStyle: "short"
+}, b = ({
+  value: t,
+  fallback: e = u,
+  children: n,
+  ellipsis: s = !1,
+  className: i
+}) => {
+  let m = n ?? t;
+  if (m == null)
+    m = e;
+  else if (typeof m == "string") {
+    const l = m.trim();
+    l.length === 0 ? m = e : m = l;
+  }
+  return /* @__PURE__ */ r(o, { ellipsis: s, className: C(p, i), children: m });
+}, B = ({
+  value: t,
+  fallback: e = u,
+  locale: n,
+  formatOptions: s = D
+}) => {
+  const i = d(() => {
+    if (t == null || Number.isNaN(Number(t)))
+      return e;
+    try {
+      return new Intl.NumberFormat(n, s).format(t);
+    } catch {
+      return String(t);
+    }
+  }, [t, e, n, s]);
+  return /* @__PURE__ */ r(o, { align: "end", className: h, children: i });
+}, x = ({
+  label: t,
+  tone: e,
+  isLoading: n = !1
+}) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(a, { tone: e, loading: n, children: t }) }), A = ({
+  value: t,
+  fallback: e = c,
+  locale: n,
+  options: s = F
+}) => /* @__PURE__ */ r(o, { className: g, children: /* @__PURE__ */ r(
+  f,
+  {
+    value: t,
+    fallback: e,
+    locale: n,
+    options: s
+  }
+) }), E = ({ label: t, tone: e }) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(a, { tone: e, children: t }) }), T = ({ children: t, className: e }) => /* @__PURE__ */ r(o, { align: "end", className: e, children: t }), L = ({ children: t }) => /* @__PURE__ */ r("span", { className: N, children: t }), w = {
+  Base: o,
+  Text: b,
+  Number: B,
+  Status: x,
+  Date: A,
+  Badge: E,
+  Actions: T,
+  Muted: L
+};
+export {
+  w as TableCell
+};
+//# sourceMappingURL=TableCell.js.map

package/lib/esm/components/data-table/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","sources":["../../../../src/components/data-table/TableCell.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useMemo } from 'react';\n\nimport { Badge } from '../../atomic/atoms/badge/Badge.js';\nimport { FormattedDate } from '../../atomic/atoms/formatted-date/FormattedDate.js';\n\nimport * as styles from './TableCell.css.js';\nimport { TableCellBase, type TableCellBaseProps } from './TableCellBase.js';\nimport { cx } from '../../theme/tools.js';\n\ntype BadgeTone =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'accent';\n\ntype TextCellProps = {\n  value?: string | null | undefined;\n  fallback?: string;\n  children?: ReactNode;\n  ellipsis?: boolean;\n  className?: string;\n};\n\ntype NumberCellProps = {\n  value: number | null | undefined;\n  fallback?: string;\n  locale?: string;\n  formatOptions?: Intl.NumberFormatOptions;\n};\n\ntype StatusCellProps = {\n  label: string;\n  tone: BadgeTone;\n  isLoading?: boolean;\n};\n\ntype DateCellProps = {\n  value: string | null | undefined;\n  fallback?: string;\n  locale?: string;\n  options?: Intl.DateTimeFormatOptions;\n};\n\ntype BadgeCellProps = {\n  label: string;\n  tone: BadgeTone;\n};\n\ntype ActionsCellProps = TableCellBaseProps;\n\nconst FALLBACK_REFERENCE = '—';\nconst DEFAULT_TEXT_FALLBACK = FALLBACK_REFERENCE;\n\nconst DefaultNumberFormat: Intl.NumberFormatOptions = {\n  maximumFractionDigits: 2,\n};\n\nconst DefaultDateOptions: Intl.DateTimeFormatOptions = {\n  dateStyle: 'medium',\n  timeStyle: 'short',\n};\n\nconst Text = ({\n  value,\n  fallback = DEFAULT_TEXT_FALLBACK,\n  children,\n  ellipsis = false,\n  className,\n}: TextCellProps): JSX.Element => {\n  let content: ReactNode = children ?? value;\n\n  if (content == null) {\n    content = fallback;\n  } else if (typeof content === 'string') {\n    const trimmed = content.trim();\n    if (trimmed.length === 0) {\n      content = fallback;\n    } else {\n      content = trimmed;\n    }\n  }\n\n  return (\n    <TableCellBase ellipsis={ellipsis} className={cx(styles.text, className)}>\n      {content}\n    </TableCellBase>\n  );\n};\n\nconst NumberCell = ({\n  value,\n  fallback = DEFAULT_TEXT_FALLBACK,\n  locale,\n  formatOptions = DefaultNumberFormat,\n}: NumberCellProps): JSX.Element => {\n  const formatted = useMemo(() => {\n    if (value == null || Number.isNaN(Number(value))) {\n      return fallback;\n    }\n\n    try {\n      return new Intl.NumberFormat(locale, formatOptions).format(value);\n    } catch {\n      return String(value);\n    }\n  }, [value, fallback, locale, formatOptions]);\n\n  return (\n    <TableCellBase align=\"end\" className={styles.number}>\n      {formatted}\n    </TableCellBase>\n  );\n};\n\nconst Status = ({\n  label,\n  tone,\n  isLoading = false,\n}: StatusCellProps): JSX.Element => {\n  return (\n    <TableCellBase>\n      <Badge tone={tone} loading={isLoading}>\n        {label}\n      </Badge>\n    </TableCellBase>\n  );\n};\n\nconst DateCell = ({\n  value,\n  fallback = FALLBACK_REFERENCE,\n  locale,\n  options = DefaultDateOptions,\n}: DateCellProps): JSX.Element => {\n  return (\n    <TableCellBase className={styles.date}>\n      <FormattedDate\n        value={value}\n        fallback={fallback}\n        locale={locale}\n        options={options}\n      />\n    </TableCellBase>\n  );\n};\n\nconst BadgeCell = ({ label, tone }: BadgeCellProps): JSX.Element => {\n  return (\n    <TableCellBase>\n      <Badge tone={tone}>{label}</Badge>\n    </TableCellBase>\n  );\n};\n\nconst Actions = ({ children, className }: ActionsCellProps): JSX.Element => {\n  return (\n    <TableCellBase align=\"end\" className={className}>\n      {children}\n    </TableCellBase>\n  );\n};\n\nconst Muted = ({ children }: { children: ReactNode }): JSX.Element => {\n  return <span className={styles.muted}>{children}</span>;\n};\n\nexport const TableCell = {\n  Base: TableCellBase,\n  Text,\n  Number: NumberCell,\n  Status,\n  Date: DateCell,\n  Badge: BadgeCell,\n  Actions,\n  Muted,\n};\n\nexport type { TextCellProps, NumberCellProps, StatusCellProps, DateCellProps };\n"],"names":["FALLBACK_REFERENCE","DEFAULT_TEXT_FALLBACK","DefaultNumberFormat","DefaultDateOptions","Text","value","fallback","children","ellipsis","className","content","trimmed","jsx","TableCellBase","cx","styles.text","NumberCell","locale","formatOptions","formatted","useMemo","styles.number","Status","label","tone","isLoading","Badge","DateCell","options","styles.date","FormattedDate","BadgeCell","Actions","Muted","styles.muted","TableCell"],"mappings":";;;;;;;AAoDA,MAAMA,IAAqB,KACrBC,IAAwBD,GAExBE,IAAgD;AAAA,EACpD,uBAAuB;AACzB,GAEMC,IAAiD;AAAA,EACrD,WAAW;AAAA,EACX,WAAW;AACb,GAEMC,IAAO,CAAC;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC,IAAWL;AAAA,EACX,UAAAM;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AACF,MAAkC;AAChC,MAAIC,IAAqBH,KAAYF;AAErC,MAAIK,KAAW;AACb,IAAAA,IAAUJ;AAAA,WACD,OAAOI,KAAY,UAAU;AACtC,UAAMC,IAAUD,EAAQ,KAAA;AACxB,IAAIC,EAAQ,WAAW,IACrBD,IAAUJ,IAEVI,IAAUC;AAAA,EAEd;AAEA,SACE,gBAAAC,EAACC,KAAc,UAAAL,GAAoB,WAAWM,EAAGC,GAAaN,CAAS,GACpE,UAAAC,EAAA,CACH;AAEJ,GAEMM,IAAa,CAAC;AAAA,EAClB,OAAAX;AAAA,EACA,UAAAC,IAAWL;AAAA,EACX,QAAAgB;AAAA,EACA,eAAAC,IAAgBhB;AAClB,MAAoC;AAClC,QAAMiB,IAAYC,EAAQ,MAAM;AAC9B,QAAIf,KAAS,QAAQ,OAAO,MAAM,OAAOA,CAAK,CAAC;AAC7C,aAAOC;AAGT,QAAI;AACF,aAAO,IAAI,KAAK,aAAaW,GAAQC,CAAa,EAAE,OAAOb,CAAK;AAAA,IAClE,QAAQ;AACN,aAAO,OAAOA,CAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAACA,GAAOC,GAAUW,GAAQC,CAAa,CAAC;AAE3C,2BACGL,GAAA,EAAc,OAAM,OAAM,WAAWQ,GACnC,UAAAF,GACH;AAEJ,GAEMG,IAAS,CAAC;AAAA,EACd,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAEI,gBAAAb,EAACC,KACC,UAAA,gBAAAD,EAACc,GAAA,EAAM,MAAAF,GAAY,SAASC,GACzB,aACH,EAAA,CACF,GAIEE,IAAW,CAAC;AAAA,EAChB,OAAAtB;AAAA,EACA,UAAAC,IAAWN;AAAA,EACX,QAAAiB;AAAA,EACA,SAAAW,IAAUzB;AACZ,MAEI,gBAAAS,EAACC,GAAA,EAAc,WAAWgB,GACxB,UAAA,gBAAAjB;AAAA,EAACkB;AAAA,EAAA;AAAA,IACC,OAAAzB;AAAA,IACA,UAAAC;AAAA,IACA,QAAAW;AAAA,IACA,SAAAW;AAAA,EAAA;AAAA,GAEJ,GAIEG,IAAY,CAAC,EAAE,OAAAR,GAAO,MAAAC,0BAEvBX,GAAA,EACC,UAAA,gBAAAD,EAACc,GAAA,EAAM,MAAAF,GAAa,aAAM,EAAA,CAC5B,GAIEQ,IAAU,CAAC,EAAE,UAAAzB,GAAU,WAAAE,QAEzB,gBAAAG,EAACC,GAAA,EAAc,OAAM,OAAM,WAAAJ,GACxB,UAAAF,GACH,GAIE0B,IAAQ,CAAC,EAAE,UAAA1B,QACR,gBAAAK,EAAC,QAAA,EAAK,WAAWsB,GAAe,UAAA3B,EAAA,CAAS,GAGrC4B,IAAY;AAAA,EACvB,MAAMtB;AAAA,EACN,MAAAT;AAAA,EACA,QAAQY;AAAA,EACR,QAAAM;AAAA,EACA,MAAMK;AAAA,EACN,OAAOI;AAAA,EACP,SAAAC;AAAA,EACA,OAAAC;AACF;"}

package/lib/esm/components/data-table/TableCellBase.js

@@ -0,0 +1,16 @@
+import { jsx as r } from "react/jsx-runtime";
+import { base as o, alignRecipe as t, ellipsis as m } from "./TableCell.css.js";
+import { cx as p } from "../../theme/tools.js";
+const x = ({
+  children: e,
+  className: i,
+  align: l = "start",
+  ellipsis: a = !1
+}) => {
+  const s = [o, t({ align: l }), i];
+  return a && s.push(m), /* @__PURE__ */ r("div", { className: p(...s), children: e });
+};
+export {
+  x as TableCellBase
+};
+//# sourceMappingURL=TableCellBase.js.map

package/lib/esm/components/data-table/TableCellBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellBase.js","sources":["../../../../src/components/data-table/TableCellBase.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport * as styles from './TableCell.css.js';\nimport { cx } from '../../theme/tools.js';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\ntype Alignment = NonNullable<\n  NonNullable<RecipeVariants<typeof styles.alignRecipe>>['align']\n>;\n\nexport type TableCellBaseProps = {\n  children: ReactNode;\n  className?: string;\n  align?: Alignment;\n  ellipsis?: boolean;\n};\n\nexport const TableCellBase = ({\n  children,\n  className,\n  align = 'start',\n  ellipsis = false,\n}: TableCellBaseProps): JSX.Element => {\n  const classNames = [styles.base, styles.alignRecipe({ align }), className];\n\n  if (ellipsis) {\n    classNames.push(styles.ellipsis);\n  }\n\n  return <div className={cx(...classNames)}>{children}</div>;\n};\n"],"names":["TableCellBase","children","className","align","ellipsis","classNames","styles.base","styles.alignRecipe","styles.ellipsis","cx"],"mappings":";;;AAiBO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EAAA,UACRC,IAAW;AACb,MAAuC;AACrC,QAAMC,IAAa,CAACC,GAAaC,EAAmB,EAAE,OAAAJ,EAAA,CAAO,GAAGD,CAAS;AAEzE,SAAIE,KACFC,EAAW,KAAKG,CAAe,qBAGzB,OAAA,EAAI,WAAWC,EAAG,GAAGJ,CAAU,GAAI,UAAAJ,GAAS;AACtD;"}

package/lib/esm/components/data-table/VirtualizedConnectionTable.css.js

@@ -0,0 +1,10 @@
+/* empty css                                       */
+/* empty css                                              */
+var e = "_1ifyzte0 txvbqbuw6 txvbqbl6f txvbqbt6f txvbqbk4x", v = "_1ifyzte1 txvbqbpsf", x = "_1ifyzte2 txvbqbu6f", i = "_1ifyzte3 txvbqbu6f txvbqbc4x";
+export {
+  v as bodyViewport,
+  i as sentinel,
+  e as singleLineCell,
+  x as spacer
+};
+//# sourceMappingURL=VirtualizedConnectionTable.css.js.map

package/lib/esm/components/data-table/VirtualizedConnectionTable.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedConnectionTable.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/lib/esm/components/data-table/VirtualizedConnectionTable.js

@@ -0,0 +1,249 @@
+import { jsx as s, jsxs as W } from "react/jsx-runtime";
+import { useRef as v, useMemo as _, useCallback as M, useState as he, useLayoutEffect as Q, useEffect as X } from "react";
+import { row as me, rowEven as pe, rowOdd as we, cell as ve, primaryCell as ye, headerCell as ge, primaryHeaderCell as be, headerRow as xe, header as Ce, emptyCell as Ne, emptyRow as Re, body as Ee, container as Te, hideBelowRecipe as Ie } from "./DataTable.css.js";
+import { singleLineCell as Pe, bodyViewport as He, spacer as Z, sentinel as Le } from "./VirtualizedConnectionTable.css.js";
+import { cx as f } from "../../theme/tools.js";
+import { useUiTranslation as Me } from "../../i18n/useUiTranslation.js";
+const ke = "minmax(0, 1fr)", Se = (o, n) => typeof n == "string" && n !== "" ? { gridTemplateColumns: n } : {
+  gridTemplateColumns: `repeat(${o}, ${ke})`
+}, ee = (o) => o == null ? null : Ie({ minVisibleAt: o }), te = (o) => {
+  let n = o;
+  for (; n != null; ) {
+    const m = window.getComputedStyle(n), { overflowY: y } = m;
+    if (y === "auto" || y === "scroll" || y === "overlay")
+      return n;
+    n = n.parentElement;
+  }
+  return null;
+}, k = (o, n, m) => Math.min(m, Math.max(n, o)), je = ({
+  columns: o,
+  rows: n,
+  getRowId: m,
+  emptyState: y,
+  className: ne,
+  gridTemplateColumns: q,
+  kind: re,
+  classes: i,
+  virtualization: g,
+  infiniteScroll: S,
+  hasNextPage: le = !1,
+  isLoadingMore: oe = !1,
+  onLoadMore: N
+}) => {
+  const { t: ie } = Me(), d = re ?? "default", V = v(null), B = v(null), D = v(null), b = v(null), O = v(null), p = v(!1), l = g?.enabled === !0, w = _(() => {
+    if (!l)
+      return null;
+    const e = g.rowHeightPx;
+    return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : 56;
+  }, [l, g]), A = _(() => {
+    if (!l)
+      return 0;
+    let e = 10;
+    const t = g.overscan;
+    return typeof t == "number" && Number.isFinite(t) && (e = t), Math.max(0, e);
+  }, [l, g]), R = S?.thresholdPx ?? 800, x = S?.autoLoad ?? !0, E = S?.enabled === !0, T = E && le && !oe && N != null, I = M(() => {
+    N?.();
+  }, [N]), [se, ce] = he(() => ({ startIndex: 0, endIndex: Math.min(n.length, 50) })), F = _(() => Se(o.length, q), [o.length, q]), K = M(
+    (e, t, r) => {
+      const h = m(e, t), c = [
+        me({ kind: d }),
+        i?.row
+      ];
+      t % 2 === 0 ? c.push(
+        pe({ kind: d }),
+        i?.rowEven
+      ) : c.push(
+        we({ kind: d }),
+        i?.rowOdd
+      );
+      const C = { ...F };
+      return typeof r == "number" && (C.height = r), /* @__PURE__ */ s(
+        "div",
+        {
+          role: "row",
+          className: f(...c),
+          style: C,
+          children: o.map((a) => {
+            const u = [
+              ve({ kind: d }),
+              Pe,
+              i?.cell
+            ], L = ee(a.minVisibleAt);
+            return L != null && u.push(L), a.className != null && u.push(a.className), a.isPrimary && u.push(
+              ye,
+              i?.primaryCell
+            ), /* @__PURE__ */ s("div", { role: "cell", className: f(...u), children: a.cell(e) }, a.id);
+          })
+        },
+        h
+      );
+    },
+    [i, o, m, F, d]
+  ), Y = M(() => {
+    if (!l)
+      return;
+    const e = w;
+    if (e == null)
+      return;
+    const t = B.current;
+    if (t == null)
+      return;
+    const r = b.current, h = r?.clientHeight ?? window.innerHeight, c = r?.getBoundingClientRect().top ?? 0, a = t.getBoundingClientRect().top - c, u = Math.max(0, -a), L = u + h, $ = n.length * e, G = k(L, 0, $), de = k(u, 0, $), ue = Math.floor(de / e) - A, fe = Math.ceil(G / e) + A, j = k(ue, 0, n.length), J = k(fe, j, n.length);
+    ce((U) => U.startIndex === j && U.endIndex === J ? U : { startIndex: j, endIndex: J }), x && T && $ - G <= R && !p.current && (p.current = !0, I(), window.setTimeout(() => {
+      p.current = !1;
+    }, 250));
+  }, [
+    x,
+    T,
+    l,
+    A,
+    w,
+    n.length,
+    R,
+    I
+  ]), P = M(() => {
+    O.current == null && (O.current = window.requestAnimationFrame(() => {
+      O.current = null, Y();
+    }));
+  }, [Y]);
+  Q(() => {
+    if (!l)
+      return;
+    const e = V.current;
+    e != null && (b.current = te(e), P());
+  }, [l, P]), X(() => {
+    if (!l)
+      return;
+    const t = b.current ?? window, r = () => {
+      P();
+    };
+    return t.addEventListener("scroll", r, { passive: !0 }), window.addEventListener("resize", r), () => {
+      t.removeEventListener("scroll", r), window.removeEventListener("resize", r);
+    };
+  }, [l, P]), X(() => {
+    if (l || !E || !x || !T)
+      return;
+    const e = D.current;
+    if (e == null)
+      return;
+    const t = b.current, r = new IntersectionObserver(
+      (h) => {
+        const [c] = h;
+        c != null && c.isIntersecting && !p.current && (p.current = !0, I(), window.setTimeout(() => {
+          p.current = !1;
+        }, 250));
+      },
+      {
+        root: t,
+        rootMargin: `0px 0px ${R}px 0px`
+      }
+    );
+    return r.observe(e), () => {
+      r.disconnect();
+    };
+  }, [
+    x,
+    T,
+    E,
+    l,
+    R,
+    I
+  ]), Q(() => {
+    if (l)
+      return;
+    const e = V.current;
+    e != null && (b.current = te(e));
+  }, [l]);
+  const ae = /* @__PURE__ */ s(
+    "div",
+    {
+      className: f(
+        Ce({ kind: d }),
+        i?.header
+      ),
+      role: "rowgroup",
+      children: /* @__PURE__ */ s(
+        "div",
+        {
+          className: f(xe, i?.headerRow),
+          role: "row",
+          style: F,
+          children: o.map((e) => {
+            const t = [
+              ge({ kind: d }),
+              i?.headerCell
+            ], r = ee(e.minVisibleAt);
+            return r != null && t.push(r), e.className != null && t.push(e.className), e.isPrimary && t.push(
+              be,
+              i?.primaryHeaderCell
+            ), /* @__PURE__ */ s(
+              "div",
+              {
+                role: "columnheader",
+                className: f(...t),
+                children: e.header
+              },
+              e.id
+            );
+          })
+        }
+      )
+    }
+  );
+  let H;
+  if (n.length === 0)
+    H = /* @__PURE__ */ s(
+      "div",
+      {
+        className: f(Re, i?.emptyRow),
+        role: "row",
+        children: /* @__PURE__ */ s("div", { role: "cell", children: y ?? /* @__PURE__ */ s("div", { className: f(Ne, i?.emptyCell), children: ie("common.table.empty") }) })
+      }
+    );
+  else if (l && w != null) {
+    const { startIndex: e, endIndex: t } = se, r = e * w, h = (n.length - t) * w, c = n.slice(e, t);
+    H = /* @__PURE__ */ W("div", { className: He, ref: B, children: [
+      /* @__PURE__ */ s("div", { className: Z, style: { height: r } }),
+      c.map((C, a) => {
+        const u = e + a;
+        return K(C, u, w);
+      }),
+      /* @__PURE__ */ s("div", { className: Z, style: { height: h } })
+    ] });
+  } else
+    H = /* @__PURE__ */ s("div", { ref: B, children: n.map((e, t) => K(e, t, null)) });
+  let z = null;
+  return !l && E && x && (z = /* @__PURE__ */ s("div", { ref: D, className: Le })), /* @__PURE__ */ W(
+    "div",
+    {
+      ref: V,
+      className: f(
+        Te({ kind: d }),
+        i?.container,
+        ne
+      ),
+      role: "table",
+      children: [
+        ae,
+        /* @__PURE__ */ W(
+          "div",
+          {
+            className: f(
+              Ee({ kind: d }),
+              i?.body
+            ),
+            role: "rowgroup",
+            children: [
+              H,
+              z
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  je as VirtualizedConnectionTable
+};
+//# sourceMappingURL=VirtualizedConnectionTable.js.map

package/lib/esm/components/data-table/VirtualizedConnectionTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedConnectionTable.js","sources":["../../../../src/components/data-table/VirtualizedConnectionTable.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type JSX,\n} from 'react';\n\nimport type { DataTableBreakpoint } from './tableBreakpoints.js';\nimport type { DataTableColumn, DataTableKind, GetRowId } from './DataTable.js';\nimport * as dataTableStyles from './DataTable.css.js';\nimport * as styles from './VirtualizedConnectionTable.css.js';\n\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\nimport type { SlotClasses } from '../../styles/slots.js';\n\nexport type VirtualizationConfig = {\n  enabled: boolean;\n  rowHeightPx: number;\n  overscan: number;\n};\n\nexport type InfiniteScrollConfig = {\n  enabled: boolean;\n  thresholdPx?: number;\n  autoLoad?: boolean;\n};\n\ntype DataTableSlot =\n  | 'container'\n  | 'header'\n  | 'headerRow'\n  | 'headerCell'\n  | 'primaryHeaderCell'\n  | 'body'\n  | 'row'\n  | 'rowEven'\n  | 'rowOdd'\n  | 'cell'\n  | 'primaryCell'\n  | 'emptyRow'\n  | 'emptyCell';\n\nexport type VirtualizedConnectionTableProps<Row> = {\n  columns: readonly DataTableColumn<Row>[];\n  rows: readonly Row[];\n  getRowId: GetRowId<Row>;\n  emptyState?: JSX.Element;\n  className?: string;\n  gridTemplateColumns?: string;\n  kind?: DataTableKind;\n  classes?: SlotClasses<DataTableSlot>;\n\n  virtualization?: VirtualizationConfig;\n\n  infiniteScroll?: InfiniteScrollConfig;\n  hasNextPage?: boolean;\n  isLoadingMore?: boolean;\n  onLoadMore?: () => void;\n};\n\nconst DEFAULT_TEMPLATE_CELL = 'minmax(0, 1fr)';\n\nconst buildInlineTemplate = (\n  columnCount: number,\n  gridTemplateColumns?: string,\n): CSSProperties => {\n  if (typeof gridTemplateColumns === 'string' && gridTemplateColumns !== '') {\n    return { gridTemplateColumns };\n  }\n  return {\n    gridTemplateColumns: `repeat(${columnCount}, ${DEFAULT_TEMPLATE_CELL})`,\n  };\n};\n\nconst getVisibilityClass = (minVisibleAt?: DataTableBreakpoint) => {\n  if (minVisibleAt == null) {\n    return null;\n  }\n  return dataTableStyles.hideBelowRecipe({ minVisibleAt });\n};\n\nconst findScrollParent = (el: HTMLElement | null): HTMLElement | null => {\n  let current: HTMLElement | null = el;\n  while (current != null) {\n    const style = window.getComputedStyle(current);\n    const { overflowY } = style;\n    if (\n      overflowY === 'auto' ||\n      overflowY === 'scroll' ||\n      overflowY === 'overlay'\n    ) {\n      return current;\n    }\n    current = current.parentElement;\n  }\n  return null;\n};\n\ntype VirtualWindow = {\n  startIndex: number;\n  endIndex: number;\n};\n\nconst clamp = (value: number, min: number, max: number): number => {\n  return Math.min(max, Math.max(min, value));\n};\n\nexport const VirtualizedConnectionTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  emptyState,\n  className,\n  gridTemplateColumns,\n  kind,\n  classes,\n  virtualization,\n  infiniteScroll,\n  hasNextPage = false,\n  isLoadingMore = false,\n  onLoadMore,\n}: VirtualizedConnectionTableProps<Row>): JSX.Element => {\n  const { t } = useUiTranslation();\n  const resolvedKind: DataTableKind = kind ?? 'default';\n  const containerRef = useRef<HTMLDivElement>(null);\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const scrollParentRef = useRef<HTMLElement | null>(null);\n  const rafRef = useRef<number | null>(null);\n  const loadMoreCooldownRef = useRef(false);\n\n  const isVirtualized = virtualization?.enabled === true;\n  const rowHeightPx = useMemo(() => {\n    if (!isVirtualized) {\n      return null;\n    }\n\n    const configuredRowHeight = virtualization.rowHeightPx;\n    if (\n      typeof configuredRowHeight === 'number' &&\n      Number.isFinite(configuredRowHeight) &&\n      configuredRowHeight > 0\n    ) {\n      return configuredRowHeight;\n    }\n\n    return 56;\n  }, [isVirtualized, virtualization]);\n\n  const overscan = useMemo(() => {\n    if (!isVirtualized) {\n      return 0;\n    }\n\n    let nextOverscan = 10;\n    const configuredOverscan = virtualization.overscan;\n    if (\n      typeof configuredOverscan === 'number' &&\n      Number.isFinite(configuredOverscan)\n    ) {\n      nextOverscan = configuredOverscan;\n    }\n    return Math.max(0, nextOverscan);\n  }, [isVirtualized, virtualization]);\n\n  const thresholdPx = infiniteScroll?.thresholdPx ?? 800;\n  const autoLoad = infiniteScroll?.autoLoad ?? true;\n  const infiniteEnabled = infiniteScroll?.enabled === true;\n\n  const canLoadMore =\n    infiniteEnabled && hasNextPage && !isLoadingMore && onLoadMore != null;\n\n  const triggerLoadMore = useCallback(() => {\n    if (onLoadMore == null) {\n      return;\n    }\n    onLoadMore();\n  }, [onLoadMore]);\n\n  const [windowState, setWindowState] = useState<VirtualWindow>(() => {\n    return { startIndex: 0, endIndex: Math.min(rows.length, 50) };\n  });\n\n  const inlineTemplateStyle = useMemo(() => {\n    return buildInlineTemplate(columns.length, gridTemplateColumns);\n  }, [columns.length, gridTemplateColumns]);\n\n  const renderRow = useCallback(\n    (row: Row, index: number, heightPx?: number | null): JSX.Element => {\n      const rowId = getRowId(row, index);\n      const rowClasses = [\n        dataTableStyles.row({ kind: resolvedKind }),\n        classes?.row,\n      ];\n      if (index % 2 === 0) {\n        rowClasses.push(\n          dataTableStyles.rowEven({ kind: resolvedKind }),\n          classes?.rowEven,\n        );\n      } else {\n        rowClasses.push(\n          dataTableStyles.rowOdd({ kind: resolvedKind }),\n          classes?.rowOdd,\n        );\n      }\n      const rowStyle: CSSProperties = { ...inlineTemplateStyle };\n      if (typeof heightPx === 'number') {\n        rowStyle.height = heightPx;\n      }\n      return (\n        <div\n          key={rowId}\n          role=\"row\"\n          className={cx(...rowClasses)}\n          style={rowStyle}\n        >\n          {columns.map((column) => {\n            const cellClasses = [\n              dataTableStyles.cell({ kind: resolvedKind }),\n              styles.singleLineCell,\n              classes?.cell,\n            ];\n            const visibilityClass = getVisibilityClass(column.minVisibleAt);\n            if (visibilityClass != null) {\n              cellClasses.push(visibilityClass);\n            }\n            if (column.className != null) {\n              cellClasses.push(column.className);\n            }\n            if (column.isPrimary) {\n              cellClasses.push(\n                dataTableStyles.primaryCell,\n                classes?.primaryCell,\n              );\n            }\n            return (\n              <div key={column.id} role=\"cell\" className={cx(...cellClasses)}>\n                {column.cell(row)}\n              </div>\n            );\n          })}\n        </div>\n      );\n    },\n    [classes, columns, getRowId, inlineTemplateStyle, resolvedKind],\n  );\n\n  const computeVirtualWindow = useCallback(() => {\n    if (!isVirtualized) {\n      return;\n    }\n    const height = rowHeightPx;\n    if (height == null) {\n      return;\n    }\n    const bodyEl = bodyRef.current;\n    if (bodyEl == null) {\n      return;\n    }\n\n    const scrollParent = scrollParentRef.current;\n    const viewportHeight = scrollParent?.clientHeight ?? window.innerHeight;\n    const parentRectTop = scrollParent?.getBoundingClientRect().top ?? 0;\n    const bodyRectTop = bodyEl.getBoundingClientRect().top;\n    const relativeTop = bodyRectTop - parentRectTop;\n    const visibleTop = Math.max(0, -relativeTop);\n    const visibleBottom = visibleTop + viewportHeight;\n\n    const totalHeight = rows.length * height;\n    const clampedBottom = clamp(visibleBottom, 0, totalHeight);\n    const clampedTop = clamp(visibleTop, 0, totalHeight);\n\n    const rawStart = Math.floor(clampedTop / height) - overscan;\n    const rawEnd = Math.ceil(clampedBottom / height) + overscan;\n\n    const startIndex = clamp(rawStart, 0, rows.length);\n    const endIndex = clamp(rawEnd, startIndex, rows.length);\n\n    setWindowState((prev) => {\n      if (prev.startIndex === startIndex && prev.endIndex === endIndex) {\n        return prev;\n      }\n      return { startIndex, endIndex };\n    });\n\n    if (\n      autoLoad &&\n      canLoadMore &&\n      totalHeight - clampedBottom <= thresholdPx &&\n      !loadMoreCooldownRef.current\n    ) {\n      loadMoreCooldownRef.current = true;\n      triggerLoadMore();\n      window.setTimeout(() => {\n        loadMoreCooldownRef.current = false;\n      }, 250);\n    }\n  }, [\n    autoLoad,\n    canLoadMore,\n    isVirtualized,\n    overscan,\n    rowHeightPx,\n    rows.length,\n    thresholdPx,\n    triggerLoadMore,\n  ]);\n\n  const scheduleCompute = useCallback(() => {\n    if (rafRef.current != null) {\n      return;\n    }\n    rafRef.current = window.requestAnimationFrame(() => {\n      rafRef.current = null;\n      computeVirtualWindow();\n    });\n  }, [computeVirtualWindow]);\n\n  useLayoutEffect(() => {\n    if (!isVirtualized) {\n      return;\n    }\n    const container = containerRef.current;\n    if (container == null) {\n      return;\n    }\n    scrollParentRef.current = findScrollParent(container);\n    scheduleCompute();\n  }, [isVirtualized, scheduleCompute]);\n\n  useEffect(() => {\n    if (!isVirtualized) {\n      return undefined;\n    }\n    const scrollParent = scrollParentRef.current;\n    const target: HTMLElement | Window = scrollParent ?? window;\n\n    const handler = () => {\n      scheduleCompute();\n    };\n\n    target.addEventListener('scroll', handler, { passive: true });\n    window.addEventListener('resize', handler);\n\n    return () => {\n      target.removeEventListener('scroll', handler);\n      window.removeEventListener('resize', handler);\n    };\n  }, [isVirtualized, scheduleCompute]);\n\n  useEffect(() => {\n    if (isVirtualized) {\n      return undefined;\n    }\n    if (!infiniteEnabled || !autoLoad || !canLoadMore) {\n      return undefined;\n    }\n    const sentinel = sentinelRef.current;\n    if (sentinel == null) {\n      return undefined;\n    }\n\n    const scrollParent = scrollParentRef.current;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const [entry] = entries;\n        if (entry == null) {\n          return;\n        }\n\n        if (entry.isIntersecting && !loadMoreCooldownRef.current) {\n          loadMoreCooldownRef.current = true;\n          triggerLoadMore();\n          window.setTimeout(() => {\n            loadMoreCooldownRef.current = false;\n          }, 250);\n        }\n      },\n      {\n        root: scrollParent,\n        rootMargin: `0px 0px ${thresholdPx}px 0px`,\n      },\n    );\n\n    observer.observe(sentinel);\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    autoLoad,\n    canLoadMore,\n    infiniteEnabled,\n    isVirtualized,\n    thresholdPx,\n    triggerLoadMore,\n  ]);\n\n  useLayoutEffect(() => {\n    if (isVirtualized) {\n      return;\n    }\n    const container = containerRef.current;\n    if (container == null) {\n      return;\n    }\n    scrollParentRef.current = findScrollParent(container);\n  }, [isVirtualized]);\n\n  const headerRow = (\n    <div\n      className={cx(\n        dataTableStyles.header({ kind: resolvedKind }),\n        classes?.header,\n      )}\n      role=\"rowgroup\"\n    >\n      <div\n        className={cx(dataTableStyles.headerRow, classes?.headerRow)}\n        role=\"row\"\n        style={inlineTemplateStyle}\n      >\n        {columns.map((column) => {\n          const headerClasses = [\n            dataTableStyles.headerCell({ kind: resolvedKind }),\n            classes?.headerCell,\n          ];\n          const visibilityClass = getVisibilityClass(column.minVisibleAt);\n          if (visibilityClass != null) {\n            headerClasses.push(visibilityClass);\n          }\n          if (column.className != null) {\n            headerClasses.push(column.className);\n          }\n          if (column.isPrimary) {\n            headerClasses.push(\n              dataTableStyles.primaryHeaderCell,\n              classes?.primaryHeaderCell,\n            );\n          }\n          return (\n            <div\n              key={column.id}\n              role=\"columnheader\"\n              className={cx(...headerClasses)}\n            >\n              {column.header}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n\n  let bodyRows: JSX.Element;\n  if (rows.length === 0) {\n    bodyRows = (\n      <div\n        className={cx(dataTableStyles.emptyRow, classes?.emptyRow)}\n        role=\"row\"\n      >\n        <div role=\"cell\">\n          {emptyState ?? (\n            <div className={cx(dataTableStyles.emptyCell, classes?.emptyCell)}>\n              {t('common.table.empty')}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  } else if (isVirtualized && rowHeightPx != null) {\n    const { startIndex, endIndex } = windowState;\n    const topSpacerHeight = startIndex * rowHeightPx;\n    const bottomSpacerHeight = (rows.length - endIndex) * rowHeightPx;\n    const slice = rows.slice(startIndex, endIndex);\n    bodyRows = (\n      <div className={styles.bodyViewport} ref={bodyRef}>\n        <div className={styles.spacer} style={{ height: topSpacerHeight }} />\n        {slice.map((row, sliceIndex) => {\n          const absoluteIndex = startIndex + sliceIndex;\n          return renderRow(row, absoluteIndex, rowHeightPx);\n        })}\n        <div className={styles.spacer} style={{ height: bottomSpacerHeight }} />\n      </div>\n    );\n  } else {\n    bodyRows = (\n      <div ref={bodyRef}>\n        {rows.map((row, index) => {\n          return renderRow(row, index, null);\n        })}\n      </div>\n    );\n  }\n\n  let sentinelNode: JSX.Element | null = null;\n  if (!isVirtualized && infiniteEnabled && autoLoad) {\n    sentinelNode = <div ref={sentinelRef} className={styles.sentinel} />;\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={cx(\n        dataTableStyles.container({ kind: resolvedKind }),\n        classes?.container,\n        className,\n      )}\n      role=\"table\"\n    >\n      {headerRow}\n      <div\n        className={cx(\n          dataTableStyles.body({ kind: resolvedKind }),\n          classes?.body,\n        )}\n        role=\"rowgroup\"\n      >\n        {bodyRows}\n        {sentinelNode}\n      </div>\n    </div>\n  );\n};\n"],"names":["DEFAULT_TEMPLATE_CELL","buildInlineTemplate","columnCount","gridTemplateColumns","getVisibilityClass","minVisibleAt","dataTableStyles.hideBelowRecipe","findScrollParent","el","current","style","overflowY","clamp","value","min","max","VirtualizedConnectionTable","columns","rows","getRowId","emptyState","className","kind","classes","virtualization","infiniteScroll","hasNextPage","isLoadingMore","onLoadMore","t","useUiTranslation","resolvedKind","containerRef","useRef","bodyRef","sentinelRef","scrollParentRef","rafRef","loadMoreCooldownRef","isVirtualized","rowHeightPx","useMemo","configuredRowHeight","overscan","nextOverscan","configuredOverscan","thresholdPx","autoLoad","infiniteEnabled","canLoadMore","triggerLoadMore","useCallback","windowState","setWindowState","useState","inlineTemplateStyle","renderRow","row","index","heightPx","rowId","rowClasses","dataTableStyles.row","dataTableStyles.rowEven","dataTableStyles.rowOdd","rowStyle","jsx","cx","column","cellClasses","dataTableStyles.cell","styles.singleLineCell","visibilityClass","dataTableStyles.primaryCell","computeVirtualWindow","height","bodyEl","scrollParent","viewportHeight","parentRectTop","relativeTop","visibleTop","visibleBottom","totalHeight","clampedBottom","clampedTop","rawStart","rawEnd","startIndex","endIndex","prev","scheduleCompute","useLayoutEffect","container","useEffect","target","handler","sentinel","observer","entries","entry","headerRow","dataTableStyles.header","dataTableStyles.headerRow","headerClasses","dataTableStyles.headerCell","dataTableStyles.primaryHeaderCell","bodyRows","dataTableStyles.emptyRow","dataTableStyles.emptyCell","topSpacerHeight","bottomSpacerHeight","slice","styles.bodyViewport","styles.spacer","sliceIndex","absoluteIndex","sentinelNode","styles.sentinel","jsxs","dataTableStyles.container","dataTableStyles.body"],"mappings":"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"}

package/lib/esm/components/data-table/tableBreakpoints.js

@@ -0,0 +1,37 @@
+import { containerQueries as o } from "../../theme/containerQueries.js";
+const u = /\(min-width:\s*(\d+(?:\.\d+)?)px\)/i, i = ["sm", "md", "lg", "xl", "xxl"];
+function a(e, r) {
+  const t = u.exec(r);
+  if (t == null)
+    throw new Error(
+      `[DataTable] Format de media query inattendu pour le point de rupture « ${e} » : ${r}`
+    );
+  const [, n] = t;
+  if (n == null)
+    throw new Error(
+      `[DataTable] Impossible d'extraire la valeur numérique pour le point de rupture « ${e} » à partir de la media query : ${r}`
+    );
+  return Number.parseFloat(n);
+}
+function l(e) {
+  const r = o[e];
+  if (r == null)
+    throw new Error(
+      `[DataTable] Aucun container query défini pour le point de rupture « ${e} ».`
+    );
+  return r;
+}
+function c() {
+  const e = {};
+  for (const r of i) {
+    const t = l(r);
+    e[r] = a(r, t);
+  }
+  return e;
+}
+const s = Object.freeze(c()), d = Object.entries(s).map(([e, r]) => [e, r]);
+export {
+  s as DATA_TABLE_BREAKPOINTS,
+  d as DATA_TABLE_BREAKPOINT_ENTRIES
+};
+//# sourceMappingURL=tableBreakpoints.js.map

package/lib/esm/components/data-table/tableBreakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableBreakpoints.js","sources":["../../../../src/components/data-table/tableBreakpoints.ts"],"sourcesContent":["import { containerQueries } from '../../theme/containerQueries.js';\n\n/**\n * Les tableaux reposent sur les mêmes largeurs minimales que les container queries\n * globales. On dérive donc les valeurs dynamiquement afin d'éviter tout décalage\n * entre la visibilité des colonnes (minVisibleAt) et la grille CSS des composants\n * qui consomment DataTable.\n */\n\nconst MIN_WIDTH_REGEX = /\\(min-width:\\s*(\\d+(?:\\.\\d+)?)px\\)/i;\n\nconst DATA_TABLE_BREAKPOINT_KEYS = ['sm', 'md', 'lg', 'xl', 'xxl'] as const;\n\nexport type DataTableBreakpoint = (typeof DATA_TABLE_BREAKPOINT_KEYS)[number];\n\n/**\n * Extrait la valeur numérique d'une media query `(min-width: XXXpx)`.\n */\nfunction parseMinWidth(key: DataTableBreakpoint, query: string): number {\n  const match = MIN_WIDTH_REGEX.exec(query);\n  if (match == null) {\n    throw new Error(\n      `[DataTable] Format de media query inattendu pour le point de rupture « ${key} » : ${query}`,\n    );\n  }\n\n  const [, value] = match;\n  if (value == null) {\n    throw new Error(\n      `[DataTable] Impossible d'extraire la valeur numérique pour le point de rupture « ${key} » à partir de la media query : ${query}`,\n    );\n  }\n  return Number.parseFloat(value);\n}\n\n/**\n * Retourne la media query déclarée pour un point de rupture donné, avec\n * diagnostic explicite si elle est absente.\n */\nfunction requireContainerQuery(key: DataTableBreakpoint): string {\n  const query = containerQueries[key] as string | undefined;\n  if (query == null) {\n    throw new Error(\n      `[DataTable] Aucun container query défini pour le point de rupture « ${key} ».`,\n    );\n  }\n\n  return query;\n}\n\n/**\n * Construit le mapping des breakpoints DataTable en se synchronisant sur les\n * container queries globales.\n */\nfunction computeBreakpoints(): Record<DataTableBreakpoint, number> {\n  const result = {} as Record<DataTableBreakpoint, number>;\n\n  for (const key of DATA_TABLE_BREAKPOINT_KEYS) {\n    const query = requireContainerQuery(key);\n    result[key] = parseMinWidth(key, query);\n  }\n\n  return result;\n}\n\nexport const DATA_TABLE_BREAKPOINTS = Object.freeze(computeBreakpoints());\n\nexport const DATA_TABLE_BREAKPOINT_ENTRIES: readonly [\n  DataTableBreakpoint,\n  number,\n][] = Object.entries(DATA_TABLE_BREAKPOINTS).map(([key, value]) => {\n  return [key as DataTableBreakpoint, value];\n});\n"],"names":["MIN_WIDTH_REGEX","DATA_TABLE_BREAKPOINT_KEYS","parseMinWidth","key","query","match","value","requireContainerQuery","containerQueries","computeBreakpoints","result","DATA_TABLE_BREAKPOINTS","DATA_TABLE_BREAKPOINT_ENTRIES"],"mappings":";AASA,MAAMA,IAAkB,uCAElBC,IAA6B,CAAC,MAAM,MAAM,MAAM,MAAM,KAAK;AAOjE,SAASC,EAAcC,GAA0BC,GAAuB;AACtE,QAAMC,IAAQL,EAAgB,KAAKI,CAAK;AACxC,MAAIC,KAAS;AACX,UAAM,IAAI;AAAA,MACR,0EAA0EF,CAAG,QAAQC,CAAK;AAAA,IAAA;AAI9F,QAAM,CAAA,EAAGE,CAAK,IAAID;AAClB,MAAIC,KAAS;AACX,UAAM,IAAI;AAAA,MACR,oFAAoFH,CAAG,mCAAmCC,CAAK;AAAA,IAAA;AAGnI,SAAO,OAAO,WAAWE,CAAK;AAChC;AAMA,SAASC,EAAsBJ,GAAkC;AAC/D,QAAMC,IAAQI,EAAiBL,CAAG;AAClC,MAAIC,KAAS;AACX,UAAM,IAAI;AAAA,MACR,uEAAuED,CAAG;AAAA,IAAA;AAI9E,SAAOC;AACT;AAMA,SAASK,IAA0D;AACjE,QAAMC,IAAS,CAAA;AAEf,aAAWP,KAAOF,GAA4B;AAC5C,UAAMG,IAAQG,EAAsBJ,CAAG;AACvC,IAAAO,EAAOP,CAAG,IAAID,EAAcC,GAAKC,CAAK;AAAA,EACxC;AAEA,SAAOM;AACT;AAEO,MAAMC,IAAyB,OAAO,OAAOF,EAAA,CAAoB,GAE3DG,IAGP,OAAO,QAAQD,CAAsB,EAAE,IAAI,CAAC,CAACR,GAAKG,CAAK,MACpD,CAACH,GAA4BG,CAAK,CAC1C;"}

package/lib/esm/components/select/SimpleSelect.css.js

@@ -0,0 +1,22 @@
+/* empty css                                       */
+/* empty css                                */
+import { createRuntimeFn as b } from "@vanilla-extract/recipes/createRuntimeFn";
+var q = "_11ypmks0 txvbqbpsf txvbqbu6f", a = "_11ypmks1 txvbqb9i6 txvbqbfzf txvbqb8o txvbqbamo txvbqbedx txvbqb66 txvbqbv8t", o = b({ defaultClassName: "_11ypmks7 _11ypmks3 _11ypmks2 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqbu6f txvbqb9io txvbqbco txvbqbdoo txvbqbao6 txvbqb1rx txvbqb8x txvbqbamo txvbqbt5o txvbqbv txvbqb78 txvbqb6x txvbqb7k", variantClassNames: { variant: { default: "_11ypmks8 _11ypmks4 txvbqb1df txvbqb1qf txvbqbwf txvbqbuzn txvbqbv8p", brand: "_11ypmks9 _11ypmks6 _11ypmks5 txvbqbv9z txvbqb1co txvbqb1qf txvbqb106 txvbqbuy6" } }, defaultVariants: { variant: "default" }, compoundVariants: [] }), p = "_11ypmksa txvbqb7bo txvbqb78x", r = "_11ypmksb txvbqb9mx txvbqbk4x txvbqbuw6 txvbqbl6f txvbqbt6f", m = "_11ypmksc txvbqb9ix txvbqbco txvbqbdnx txvbqbtw6 txvbqbc5o txvbqbv8t txvbqb77 txvbqb6x txvbqb7k", n = "_11ypmksd txvbqb2w txvbqbv8p", i = "_11ypmkse txvbqbv9z", f = "_11ypmksf txvbqbps6 txvbqbthf txvbqbdpf txvbqbptf txvbqbuuf txvbqb9io txvbqbai6 txvbqbanx txvbqbl9o txvbqb1rx txvbqb1co txvbqb1qf txvbqbwf txvbqbuzn txvbqb8q6 txvbqbis6 txvbqbl7o", s = "_11ypmksg txvbqb766 txvbqb73f txvbqbi7o", e = "_11ypmksh txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbai6 txvbqbcf txvbqbanx txvbqbu6f txvbqb12f txvbqb1px txvbqb1ro txvbqbuzj txvbqb8x txvbqbamf txvbqbv8p txvbqbt5o txvbqbv txvbqb78 txvbqb6w txvbqb7k", k = "_11ypmksi txvbqbv8p", y = "_11ypmksj txvbqb8o txvbqbv8t", u = "_11ypmksk txvbqbgmo txvbqbh9x txvbqbhwx txvbqbfz6 txvbqbcfo txvbqbv3d", _ = "_11ypmksl txvbqbnux txvbqboi6 txvbqbp56 txvbqblwx";
+export {
+  _ as actionsContainer,
+  q as container,
+  a as label,
+  f as menu,
+  s as menuOpen,
+  u as menuSeparator,
+  e as optionButton,
+  y as optionDescription,
+  k as optionSelected,
+  o as trigger,
+  m as triggerIcon,
+  i as triggerIconBrand,
+  n as triggerIconOpen,
+  p as triggerOpen,
+  r as valueText
+};
+//# sourceMappingURL=SimpleSelect.css.js.map

package/lib/esm/components/select/SimpleSelect.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleSelect.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/esm/components/select/SimpleSelect.css.ts.vanilla-Bil1v8q6.css

@@ -0,0 +1 @@
+._11ypmks3:disabled{opacity:.6;cursor:not-allowed}._11ypmks6:hover{filter:brightness(.98)}._11ypmks6:focus-visible{outline:none;box-shadow:0 0 0 2px var(--kronex-colors-brandSecondaryOrange)}