jcicl 1.0.76 → 1.0.78

package/LabeledFormattedInput/LabeledFormattedInput.d.ts

@@ -0,0 +1,23 @@
+import { InputProps } from '../Input';
+import { FormatterFunction, MaskerFunction } from '../utils';
+import { FormInputType } from '../inputTypes';
+export type FormattedInputValue = string | undefined;
+export interface StyleProps {
+    grid?: boolean;
+    displayMode?: boolean;
+}
+export type LabeledFormattedInputProps = InputProps & StyleProps & {
+    label?: string;
+    noLabel?: boolean;
+    limit?: number;
+    type?: FormInputType;
+    value?: FormattedInputValue;
+    defaultValue?: FormattedInputValue;
+    masked?: boolean;
+    /** Pass a custom formatter, or rely on default formattersByType */
+    formatFunction?: FormatterFunction;
+    /** Pass a custom masker, or rely on default maskersByType and masked=true */
+    maskFunction?: MaskerFunction;
+};
+export declare const LabeledFormattedInput: React.FC<LabeledFormattedInputProps>;
+export default LabeledFormattedInput;

package/LabeledFormattedInput/LabeledFormattedInput.js

@@ -0,0 +1,95 @@
+import { jsxs as M, jsx as l } from "react/jsx-runtime";
+import { useRef as R, useState as g, useLayoutEffect as G } from "react";
+import { cn as v } from "../cn.js";
+import { Input as H } from "../Input/Input.js";
+import J from "../theme.js";
+import "../utils.js";
+import { findCursorFromDigitIndex as K } from "../cursorPositioning.js";
+import { Button as Q } from "../Button/Button.js";
+import { formattersByType as W } from "../formatters.js";
+import { maskersByType as X, defaultMasker as Y } from "../maskers.js";
+import { E as Z, a as $ } from "../.chunks/eye.js";
+const ee = "flex flex-nowrap gap-[9px] font-['Roboto',sans-serif]", te = "[&_span]:whitespace-nowrap [&_span]:font-bold", se = "[&_.required]:mx-[2px] [&_.required]:text-[var(--required-color)]", oe = "[&_.MuiTextField-root]:flex-grow", re = "[&_.MuiInputBase-root]:width-[var(--input-base-width)]", ae = "[&_.Mui-disabled]:!cursor-default [&_.Mui-disabled]:!color-inherit [&_.Mui-disabled]:!-webkit-text-fill-color-inherit [&_.Mui-disabled]:!background-transparent [&_.Mui-disabled]:!opacity-100", le = v(
+  ee,
+  te,
+  se,
+  oe,
+  re
+), ge = ({
+  label: q,
+  grid: B = !0,
+  displayMode: S = !1,
+  noLabel: k = !1,
+  limit: V,
+  type: t,
+  value: n,
+  defaultValue: C,
+  masked: i,
+  formatFunction: E,
+  maskFunction: _,
+  ...w
+}) => {
+  const N = {
+    "--required-color": J.colors.gray,
+    "--input-base-width": B ? "100%" : "auto"
+  }, o = E ?? (t ? W[t] : void 0);
+  let s;
+  _ ? s = _ : i && (s = t && X[t] || Y);
+  const u = !!(i && s), { onChange: c, onFocus: d, onBlur: p, ...m } = w, f = R(null), h = R(null), [x, y] = g(null), [T, F] = g(!1), [j, D] = g(!1), r = !u || T || j, b = x ?? n ?? C, a = o ? o(b)[0] : String(b ?? ""), L = s ? s(b) : a, P = r ? a : L, z = (e) => {
+    const A = e.target.selectionStart ?? 0;
+    h.current = e.target.value.slice(0, A).replace(/\D/g, "").length, y(e.target.value), c == null || c(e);
+  }, O = (e) => {
+    F(!0), d == null || d(e);
+  }, U = (e) => {
+    F(!1), n !== void 0 && y(null), p == null || p(e);
+  };
+  G(() => {
+    if (!f.current || h.current == null || !r || !o)
+      return;
+    const e = K(a, h.current);
+    f.current.setSelectionRange(e, e);
+  }, [C, a, o, r, x, n]);
+  const I = u ? r ? Z : $ : null;
+  return /* @__PURE__ */ M(
+    "div",
+    {
+      className: v("jcLabeledFormattedInput", le, S && ae),
+      style: N,
+      children: [
+        !k && /* @__PURE__ */ M("span", { children: [
+          q,
+          w.required && /* @__PURE__ */ l("span", { className: "required", children: "*" }),
+          ":"
+        ] }),
+        /* @__PURE__ */ l(
+          H,
+          {
+            ...m,
+            type: t,
+            inputRef: f,
+            value: P,
+            onChange: z,
+            onFocus: O,
+            onBlur: U,
+            autoComplete: i ? "off" : void 0,
+            className: v(m.className, u && "[&_input]:pr-[20px]"),
+            slotProps: { htmlInput: { limit: V }, ...m.slotProps }
+          }
+        ),
+        I && /* @__PURE__ */ l(
+          Q,
+          {
+            variant: "unstyled",
+            onClick: () => D((e) => !e),
+            className: "!min-w-0 !max-h-[18px] !p-0 opacity-70 !ml-[-27px]",
+            children: /* @__PURE__ */ l(I, { size: 18 })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ge as LabeledFormattedInput,
+  ge as default
+};

package/LabeledFormattedInput/index.d.ts

@@ -0,0 +1 @@
+export { default, type LabeledFormattedInputProps } from './LabeledFormattedInput';

package/LabeledFormattedInput/index.js

@@ -0,0 +1,4 @@
+import { LabeledFormattedInput as a } from "./LabeledFormattedInput.js";
+export {
+  a as default
+};

package/LabeledInput/LabeledInput.js

@@ -1,54 +1,42 @@
-import { jsxs as r, jsx as s } from "react/jsx-runtime";
-import { n as l } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as e } from "../.chunks/emotion-react.browser.esm.js";
-import { Input as d } from "../Input/Input.js";
-const c = ["noLabel", "displayMode", "grid"], u = l("div", {
-  shouldForwardProp: (o) => !c.includes(o)
-})(({ grid: o, displayMode: t }) => ({
-  ...e`
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 9px;
-    font-family: 'Roboto', sans-serif;
-
-    span {
-      white-space: nowrap;
-      font-weight: bold;
-    }
-
-    .MuiTextField-root {
-      flex-grow: 1;
-    }
-
-    .MuiInputBase-root {
-      width: ${o && "100%"};
-    }
-
-    ${t && e`
-      .Mui-disabled {
-        color: inherit !important;
-        -webkit-text-fill-color: inherit !important;
-        background-color: transparent !important;
-        opacity: 1 !important;
-        cursor: default !important;
-      }
-    `}
-  `
-})), b = ({
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { cn as r } from "../cn.js";
+import { Input as u } from "../Input/Input.js";
+import p from "../theme.js";
+const c = "flex flex-nowrap gap-[9px] font-['Roboto',sans-serif]", b = "[&_span]:whitespace-nowrap [&_span]:font-bold", m = "[&_.required]:mx-[2px] [&_.required]:text-[var(--required-color)]", f = "[&_.MuiTextField-root]:flex-grow", x = "[&_.MuiInputBase-root]:width-[var(--input-base-width)]", h = "[&_.Mui-disabled]:!cursor-default [&_.Mui-disabled]:!color-inherit [&_.Mui-disabled]:!-webkit-text-fill-color-inherit [&_.Mui-disabled]:!background-transparent [&_.Mui-disabled]:!opacity-100", _ = r(
+  c,
+  b,
+  m,
+  f,
+  x
+), M = ({
   label: o,
-  grid: t = !0,
-  displayMode: a = !1,
-  noLabel: i = !1,
-  limit: p,
-  ...n
-}) => /* @__PURE__ */ r(u, { grid: t, displayMode: a, className: "jcLabeledInput", children: [
-  !i && /* @__PURE__ */ r("span", { children: [
-    o,
-    ":"
-  ] }),
-  /* @__PURE__ */ s(d, { ...n, slotProps: { htmlInput: { limit: p } } })
-] });
+  grid: a = !0,
+  displayMode: i = !1,
+  noLabel: l = !1,
+  limit: n,
+  ...e
+}) => {
+  const d = {
+    "--required-color": p.colors.gray,
+    "--input-base-width": a ? "100%" : "auto"
+  };
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: r("jcLabeledInput", _, i && h),
+      style: d,
+      children: [
+        !l && /* @__PURE__ */ s("span", { children: [
+          o,
+          e.required && /* @__PURE__ */ t("span", { className: "required", children: "*" }),
+          ":"
+        ] }),
+        /* @__PURE__ */ t(u, { ...e, slotProps: { htmlInput: { limit: n } } })
+      ]
+    }
+  );
+};
 export {
-  b as LabeledInput,
-  b as default
+  M as LabeledInput,
+  M as default
 };

package/LabeledRadio/LabeledRadio.js

@@ -3,7 +3,8 @@ import { n as G } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as S } from "../.chunks/emotion-react.browser.esm.js";
 import { useThemeColors as _ } from "../ThemeContext.js";
 import * as l from "react";
-import { s as m, r as I, P as e, a as q, g as A, b as f, e as w, u as W, c as Z, d as H } from "../.chunks/DefaultPropsProvider.js";
+import { s as m, r as I, P as e, a as q, g as A, c as f, d as w, u as W, b as Z } from "../.chunks/DefaultPropsProvider.js";
+import { c as H } from "../.chunks/clsx.js";
 import { S as J } from "../.chunks/SwitchBase.js";
 import { c as B } from "../.chunks/createSvgIcon.js";
 import { m as P } from "../.chunks/memoTheme.js";
@@ -102,7 +103,7 @@ const x = q("MuiRadio", ["root", "checked", "disabled", "colorPrimary", "colorSe
   };
   return {
     ...a,
-    ...H(r, no, a)
+    ...Z(r, no, a)
   };
 }, io = m(J, {
   shouldForwardProp: (o) => I(o) || o === "classes",
@@ -217,7 +218,7 @@ const O = /* @__PURE__ */ n(R, {
     checked: h,
     onChange: V,
     ref: t,
-    className: Z(k.root, M),
+    className: H(k.root, M),
     ...L
   });
 });
@@ -342,7 +343,7 @@ const j = G("div", { shouldForwardProp: (o) => !["customTheme"].includes(o) })((
       }
     `}
   `
-})), ko = ({
+})), So = ({
   label: o,
   colon: a = !0,
   displayMode: t = !1,
@@ -363,6 +364,6 @@ const j = G("div", { shouldForwardProp: (o) => !["customTheme"].includes(o) })((
   ] });
 };
 export {
-  ko as LabeledRadio,
-  ko as default
+  So as LabeledRadio,
+  So as default
 };

package/Memo/Memo.js

@@ -2,8 +2,9 @@ import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import { n as e } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as o } from "../.chunks/emotion-react.browser.esm.js";
 import i from "../theme.js";
-import { DetailItemContainer as a } from "../DetailPageComponents/DetailPageComponents.js";
-import { formatTimestamp as p } from "../utils.js";
+import { DetailItemContainer as p } from "../DetailPageComponents/DetailPageComponents.js";
+import "../utils.js";
+import { formatTimestamp as a } from "../formatters.js";
 const c = e("div")(() => ({
   ...o`
     display: flex;
@@ -33,13 +34,13 @@ const c = e("div")(() => ({
     font-size: 18px;
     margin: 0px;
   `
-})), j = ({ username: n, createDateTime: m, note: s }) => /* @__PURE__ */ r(a, { children: [
+})), w = ({ username: n, createDateTime: m, note: s }) => /* @__PURE__ */ r(p, { children: [
   /* @__PURE__ */ r(c, { children: [
     /* @__PURE__ */ t(l, { children: n }),
-    /* @__PURE__ */ t(f, { children: p(m) })
+    /* @__PURE__ */ t(f, { children: a(m) })
   ] }),
   /* @__PURE__ */ t(d, { children: s })
 ] });
 export {
-  j as default
+  w as default
 };

package/Nav/Nav.d.ts

@@ -6,7 +6,7 @@ export interface NavItemProps {
     active?: boolean;
     url?: string;
     /** hue and onChange are defined for the Hue selector */
-    hue?: any;
+    hue?: number;
     onChange?: (newHue: {
         h: number;
     }) => void;

package/Pagination/Pagination.d.ts

@@ -1,6 +1,5 @@
 import { PaginationProps as MuiPaginationProps } from '@mui/material/Pagination';
 import { default as React } from 'react';
-export interface PaginationProps extends MuiPaginationProps {
-}
+export type PaginationProps = MuiPaginationProps;
 declare const Pagination: React.FC<PaginationProps>;
 export default Pagination;

package/Pagination/Pagination.js

@@ -2,7 +2,8 @@ import { jsx as d, jsxs as Z } from "react/jsx-runtime";
 import { n as tt } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as at } from "../.chunks/emotion-react.browser.esm.js";
 import * as G from "react";
-import { a as _, g as H, s as B, e as N, u as q, c as U, P as a, b as I, d as J } from "../.chunks/DefaultPropsProvider.js";
+import { a as _, g as H, s as B, d as N, u as q, P as a, c as I, b as J } from "../.chunks/DefaultPropsProvider.js";
+import { c as U } from "../.chunks/clsx.js";
 import { u as et } from "../.chunks/useControlled.js";
 import { i as w } from "../.chunks/integerPropType.js";
 import { u as ot } from "../.chunks/index.js";
@@ -25,18 +26,18 @@ function it(t = {}) {
     hideNextButton: x = !1,
     hidePrevButton: u = !1,
     onChange: g,
-    page: P,
+    page: m,
     showFirstButton: T = !1,
     showLastButton: R = !1,
-    siblingCount: m = 1,
+    siblingCount: P = 1,
     ...O
   } = t, [l, p] = et({
-    controlled: P,
+    controlled: m,
     default: y,
     name: o,
     state: "page"
   }), C = (s, i) => {
-    P || p(i), g && g(s, i);
+    m || p(i), g && g(s, i);
   }, $ = (s, i) => {
     const M = i - s + 1;
     return Array.from({
@@ -45,18 +46,18 @@ function it(t = {}) {
   }, c = $(1, Math.min(e, n)), k = $(Math.max(n - e + 1, e + 1), n), v = Math.max(
     Math.min(
       // Natural start
-      l - m,
+      l - P,
       // Lower boundary when page is high
-      n - e - m * 2 - 1
+      n - e - P * 2 - 1
     ),
     // Greater than startPages
     e + 2
   ), f = Math.min(
     Math.max(
       // Natural end
-      l + m,
+      l + P,
       // Upper boundary when page is low
-      e + m * 2 + 2
+      e + P * 2 + 2
     ),
     // Less than endPages
     n - e - 1
@@ -137,7 +138,7 @@ const r = _("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
     shape: x,
     type: u,
     variant: g
-  } = t, P = {
+  } = t, m = {
     root: ["root", `size${I(b)}`, g, x, o !== "standard" && `color${I(o)}`, o !== "standard" && `${g}${I(o)}`, n && "disabled", y && "selected", {
       page: "page",
       first: "firstLast",
@@ -149,7 +150,7 @@ const r = _("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
     }[u]],
     icon: ["icon"]
   };
-  return J(P, rt, e);
+  return J(m, rt, e);
 }, gt = B("div", {
   name: "MuiPaginationItem",
   slot: "Root",
@@ -374,10 +375,10 @@ const r = _("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
     component: x,
     components: u = {},
     disabled: g = !1,
-    page: P,
+    page: m,
     selected: T = !1,
     shape: R = "circular",
-    size: m = "medium",
+    size: P = "medium",
     slots: O = {},
     slotProps: l = {},
     type: p = "page",
@@ -389,7 +390,7 @@ const r = _("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
     disabled: g,
     selected: T,
     shape: R,
-    size: m,
+    size: P,
     type: p,
     variant: C
   }, k = ot(), v = ut(c), f = {
@@ -444,7 +445,7 @@ const r = _("MuiPaginationItem", ["root", "page", "sizeSmall", "sizeLarge", "tex
     disabled: g,
     className: U(v.root, y),
     ...$,
-    children: [p === "page" && P, E ? /* @__PURE__ */ d(vt, {
+    children: [p === "page" && m, E ? /* @__PURE__ */ d(vt, {
       ...Y,
       className: v.icon,
       as: E
@@ -584,7 +585,7 @@ const yt = (t) => {
   margin: 0,
   listStyle: "none"
 });
-function Pt(t, e, o) {
+function mt(t, e, o) {
   return t === "page" ? `${o ? "" : "Go to "}page ${e}` : `Go to ${t} page`;
 }
 const X = /* @__PURE__ */ G.forwardRef(function(e, o) {
@@ -597,10 +598,10 @@ const X = /* @__PURE__ */ G.forwardRef(function(e, o) {
     color: x = "standard",
     count: u = 1,
     defaultPage: g = 1,
-    disabled: P = !1,
-    getItemAriaLabel: T = Pt,
+    disabled: m = !1,
+    getItemAriaLabel: T = mt,
     hideNextButton: R = !1,
-    hidePrevButton: m = !1,
+    hidePrevButton: P = !1,
     onChange: O,
     page: l,
     renderItem: p = (i) => /* @__PURE__ */ d(Q, {
@@ -624,10 +625,10 @@ const X = /* @__PURE__ */ G.forwardRef(function(e, o) {
     color: x,
     count: u,
     defaultPage: g,
-    disabled: P,
+    disabled: m,
     getItemAriaLabel: T,
     hideNextButton: R,
-    hidePrevButton: m,
+    hidePrevButton: P,
     renderItem: p,
     shape: C,
     showFirstButton: $,
@@ -772,9 +773,9 @@ process.env.NODE_ENV !== "production" && (X.propTypes = {
    */
   variant: a.oneOfType([a.oneOf(["outlined", "text"]), a.string])
 });
-const mt = tt(X)(() => ({
+const Pt = tt(X)(() => ({
   ...at``
-})), wt = (t) => /* @__PURE__ */ d(mt, { ...t });
+})), Bt = (t) => /* @__PURE__ */ d(Pt, { ...t });
 export {
-  wt as default
+  Bt as default
 };

package/README.md

@@ -169,9 +169,9 @@ if (variant === 2) return <ButtonBase className={button2Classes} {...props}>{chi
 **Why this pattern:**
 - **Readable** — each variant's full visual definition is in one place, not scattered across JSX
 - **Scannable** — you can compare two variants by looking at two adjacent constants
-- **Composable** — use `clsx()` to merge base classes with conditional classes:
+- **Composable** — use `cn()` (from `utils/cn`) to merge base classes with conditional classes:
   ```tsx
-  className={clsx(baseClasses, active ? activeClasses : inactiveClasses)}
+  className={cn(baseClasses, active ? activeClasses : inactiveClasses)}
   ```
 - **Static** — Tailwind's build can scan these constants for class names (unlike template literals with dynamic interpolation)
 
@@ -210,18 +210,20 @@ const cardClasses = 'rounded-lg p-4 bg-white shadow-md';
 
 The `display: contents` wrapper is invisible to layout but provides a CSS scope for the custom properties. This avoids Emotion entirely for dynamic values.
 
-**Conditional classes** — use `clsx`:
+**Conditional classes** — use `cn` from `utils/cn`:
 
 ```tsx
-import clsx from 'clsx';
+import { cn } from 'utils/cn';
 
-<button className={clsx(
+<button className={cn(
   baseClasses,
   active ? '!bg-black !text-white' : '!bg-white !text-black',
 )}>
 ```
 
-**MUI overrides** — use `!important` prefix (`!bg-*`, `!text-*`) when Tailwind classes need to override MUI's built-in styles during the transition period. Once a component is fully off MUI, the `!` prefixes can be removed.
+`cn` wraps `clsx` with [`tailwind-merge`](https://github.com/dcastil/tailwind-merge), which deduplicates conflicting Tailwind utilities — the later class in the composition wins. This is what makes consumer `className` overrides reliable: when an app passes `<Button className="h-[3rem]">`, twMerge strips any earlier `h-*` class from the lib's internal composition. **Always use `cn` for className composition in lib components. Don't import `clsx` directly — it lives inside `cn.ts` as an internal dep.**
+
+**MUI overrides** — use `!important` prefix (`!bg-*`, `!text-*`) **only** when a Tailwind class needs to defeat MUI's emitted stylesheet during the transition period. The `!` prefix is *not* needed for lib-vs-consumer arbitration — that layer is handled by `cn`/`tailwind-merge` (later classes in the composition win regardless of `!`). Once a component is fully off MUI, the `!` prefixes can be removed.
 
 ### Tailwind CSS output
 
@@ -246,6 +248,8 @@ With Tailwind, consuming apps can extend or override a library component's style
 
 This works because Tailwind classes are just CSS classes. The consuming app's Tailwind build scans its own source files, generates the utilities, and they merge naturally with the library's classes. The consumer has full control without the library needing to expose a `style` or `className` forwarding prop for every visual property.
 
+**How conflicts resolve:** Lib components compose their internal classes via `cn` (which wraps `clsx` with `tailwind-merge`). The convention is `cn(internalClasses, consumerClassName)` — consumer last, so it wins on Tailwind conflicts via twMerge and drops any conflicting lib class, even `!important`-prefixed ones. `<Button className="h-[3rem]">` reliably overrides the lib's internal height with no specificity-juggling required from the consumer. Individual components may invert this order intentionally when an internal class is structurally required to win — for example, `LabeledFormattedInput` places its masked-input right-padding *after* the caller's className so the reveal-eye icon always has room. Treat the consumer-last order as the convention, not a guarantee — check the component's source if you need to know for certain.
+
 **Why this replaces the `style` prop pattern:**
 
 The common pattern across our apps has been passing inline `style={{}}` objects to customize component appearance:
@@ -370,6 +374,7 @@ The library also auto-publishes on merges to master via the CI pipeline.
 1. Create the component folder: `src/components/base/MyComponent/`
 2. Create the component: `MyComponent.tsx`
 3. Create stories: `MyComponent.stories.tsx`
+   - For Tailwind-migrated components that accept caller `className` and/or `style`, expose both as Storybook arg controls so consumers can preview override behavior (e.g., `className="h-[13rem]"`, `style={{ outline: '2px solid red' }}`). `WelcomeCard.stories.tsx` is a known follow-up: its Playground does not yet expose these controls.
 4. Create barrel export: `index.ts` — `export { default, type MyComponentProps } from './MyComponent';`
 5. Add to the main barrel: `src/components/index.ts` — `export { default as MyComponent } from './base/MyComponent';`
 6. Build and test locally (see above)

package/Stepper/Stepper.js

@@ -7,7 +7,8 @@ import { k as A, c as P } from "../.chunks/emotion-react.browser.esm.js";
 import { Button as q } from "../Button/Button.js";
 import { SlideOut as J, SlideIn as Q, SlideInReverse as z, SlideOutReverse as W } from "../animation/Slide/Slide.js";
 import { useThemeColors as Z } from "../ThemeContext.js";
-import { g as V, a as _, s as g, b as f, u as F, c as O, P as o, d as K, l as rr, h as er, i as tr } from "../.chunks/DefaultPropsProvider.js";
+import { g as V, a as _, s as g, c as f, u as F, P as o, b as K, l as rr, f as er, h as tr } from "../.chunks/DefaultPropsProvider.js";
+import { c as O } from "../.chunks/clsx.js";
 import { m as w } from "../.chunks/memoTheme.js";
 import { P as or } from "../.chunks/Paper.js";
 import { u as ar } from "../.chunks/index.js";
@@ -672,7 +673,7 @@ const Cr = R("div", {
     width: 100%;
     height: 100%;
   `
-})), Ir = ({
+})), Tr = ({
   onNext: e,
   onBack: r,
   onFinish: t,
@@ -730,5 +731,5 @@ const Cr = R("div", {
   ] });
 };
 export {
-  Ir as default
+  Tr as default
 };

package/Table/Table.d.ts

@@ -28,12 +28,14 @@ export interface SortableCell {
     /** The numeric value used for sorting when the column header is clicked. Lower numbers sort first in ascending order. */
     sortPriority: number;
 }
-export interface TableProps {
-    data: Record<string, any>[];
+/** Shape that a Table row must satisfy: a string-keyed record of arbitrary cell values. */
+export type TableRow = Record<string, unknown>;
+export interface TableProps<T extends TableRow = TableRow> {
+    data: T[];
     columnTitles?: Record<string, string>;
     rowsPerPage?: number;
     title?: string;
-    onRowClick?: (row: Record<string, any>) => void;
+    onRowClick?: (row: T) => void;
     hiddenColumns?: string[];
     defaultSort?: {
         key: string;
@@ -52,7 +54,7 @@ export interface TableProps {
     persistKey?: string;
     /** Custom renderers for specific columns. Only applied to visible rows — not used for sorting, filtering, or export.
      *  Use this for React components (like live Timers) that should only mount on the current page. */
-    cellRenderers?: Record<string, (value: any, row: Record<string, any>) => React.ReactNode>;
+    cellRenderers?: Record<string, (value: unknown, row: T) => React.ReactNode>;
 }
-declare const DataTable: React.FC<TableProps>;
+declare function DataTable<T extends TableRow = TableRow>({ data, columnTitles, rowsPerPage, title, onRowClick, hiddenColumns, defaultSort, extraActions, notSearchableColumns, notSortableColumns, notExportableColumns, scrollable, scrollableMinWidth, stickyColumns, columnOrder, persistKey, cellRenderers, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
 export default DataTable;