impact-nova 2.1.0-alpha.4 → 2.1.0-alpha.5

package/dist/components/data/data-table/data-table.js

@@ -1,170 +1,188 @@
-import { jsx as n, jsxs as C } from "react/jsx-runtime";
-import { useState as a, useRef as E, useCallback as H, useMemo as v, useEffect as y, memo as N } from "react";
-import { AgGridWrapper as z } from "../ag-grid-react/index.js";
-import { cn as w } from "../../../lib/utils.js";
-import { DataTableContext as F, DataTableSheetPortalContext as M, useDataTable as j, useDataTableSheetPortal as P } from "./data-table-context.js";
-import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as A } from "./data-table-constants.js";
-const D = {
+import { jsx as n, jsxs as P } from "react/jsx-runtime";
+import { useState as f, useRef as _, useCallback as x, useMemo as y, useEffect as v, memo as S } from "react";
+import { AgGridWrapper as G } from "../ag-grid-react/index.js";
+import { cn as H } from "../../../lib/utils.js";
+import { DataTableContext as C, DataTableSheetPortalStoreContext as R, useDataTable as E, useDataTableSheetPortal as w } from "./data-table-context.js";
+import { createDataTableSheetPortalStore as O } from "./data-table-sheet-portal-store.js";
+import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as F } from "./data-table-constants.js";
+const A = {
   default: 46,
   compact: 30,
   comfort: 52
-}, Y = ({
-  children: i,
+}, V = ({
+  children: a,
   className: t
 }) => {
-  const [o, e] = a(null), [r, p] = a(null), [l, c] = a("medium"), [h, d] = a("full"), [m, f] = a("default"), [g, T] = a(!1), u = E(0), x = H((b) => {
-    u.current = Math.max(
-      0,
-      u.current + b
-    ), T(u.current > 0);
-  }, []), S = H((b) => {
-    e(b);
-  }, []), s = {
+  const [r, e] = f(null), [o, c] = f("medium"), [s, p] = f("full"), [l, h] = f("default"), d = _(O()), m = x((i) => {
+    d.current.registerScopedSheetDepth(i);
+  }, []), u = x((i) => {
+    e(i);
+  }, []), g = {
     small: "12px",
     medium: "14px",
     large: "16px"
-  }[l], O = `${D[m]}px`, R = v(
+  }[o], b = `${A[l]}px`, T = y(
     () => ({
-      gridApi: o,
-      registerApi: S,
-      registerScopedSheetDepth: x,
-      fontSize: l,
+      gridApi: r,
+      registerApi: u,
+      registerScopedSheetDepth: m,
+      fontSize: o,
       setFontSize: c,
-      numericFormat: h,
-      setNumericFormat: d,
-      rowHeight: m,
-      setRowHeight: f
+      numericFormat: s,
+      setNumericFormat: p,
+      rowHeight: l,
+      setRowHeight: h
     }),
     [
-      o,
-      S,
-      x,
-      l,
-      c,
-      h,
-      d,
+      r,
+      u,
       m,
-      f
+      o,
+      s,
+      l
     ]
-  ), G = v(
-    () => ({
-      sheetTarget: r,
-      setSheetTarget: p,
-      scopedSheetOpen: g
-    }),
-    [r, p, g]
   );
-  return /* @__PURE__ */ n(F.Provider, { value: R, children: /* @__PURE__ */ n(M.Provider, { value: G, children: /* @__PURE__ */ n(
-    "div",
+  return /* @__PURE__ */ n(C.Provider, { value: T, children: /* @__PURE__ */ n(
+    R.Provider,
     {
-      "data-component": "data-table",
-      className: w(
-        "flex flex-col w-full min-h-0 rounded-[inherit]",
-        t
-      ),
-      style: {
-        "--ag-font-size": s,
-        "--ag-row-height": O
-      },
-      children: i
+      value: d.current,
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          "data-component": "data-table",
+          className: H(
+            "flex flex-col w-full min-h-0 rounded-[inherit]",
+            t
+          ),
+          style: {
+            "--ag-font-size": g,
+            "--ag-row-height": b
+          },
+          children: a
+        }
+      )
     }
-  ) }) });
-}, _ = {
+  ) });
+}, D = {
   full: "full_no",
   k: "thou",
   m: "mil",
   b: "bil",
   full_precision: "full_precision"
-}, k = N(function() {
-  const { setSheetTarget: t, scopedSheetOpen: o } = P();
+}, N = S(function() {
+  const { setSheetTarget: t } = w();
   return /* @__PURE__ */ n(
     "div",
     {
       ref: t,
-      className: "absolute inset-0 pointer-events-none z-[39] flex overflow-x-hidden overflow-y-visible",
-      style: o ? { minHeight: A } : void 0
+      className: "absolute inset-0 pointer-events-none z-[39] flex overflow-x-hidden overflow-y-visible"
+    }
+  );
+}), z = S(function({
+  className: t,
+  children: r
+}) {
+  const { scopedSheetOpen: e } = w();
+  return /* @__PURE__ */ P(
+    "div",
+    {
+      className: H(
+        "relative flex-1 min-h-0 w-full bg-canvas-elevated rounded-b-[inherit] grid-rounded-bottom",
+        t
+      ),
+      style: e ? { minHeight: F } : void 0,
+      children: [
+        r,
+        /* @__PURE__ */ n(N, {})
+      ]
+    }
+  );
+}), B = S(function({
+  resolvedRowHeight: t,
+  mergedContext: r,
+  onGridReady: e,
+  columnDefs: o,
+  maintainColumnOrder: c = !0,
+  ...s
+}) {
+  return /* @__PURE__ */ n(
+    G,
+    {
+      ...s,
+      columnDefs: o,
+      rowHeight: t,
+      onGridReady: e,
+      context: r,
+      maintainColumnOrder: c
     }
   );
 });
-function $(i) {
+function Y(a) {
   const {
     registerApi: t,
-    rowHeight: o,
+    rowHeight: r,
     gridApi: e,
-    numericFormat: r
-  } = j(), { scopedSheetOpen: p } = P(), {
-    className: l,
-    onGridReady: c,
-    rowHeight: h,
-    context: d,
-    columnDefs: m,
-    maintainColumnOrder: f = !0,
-    ...g
-  } = i, T = D[o], u = h ?? T, x = v(
+    numericFormat: o
+  } = E(), {
+    className: c,
+    onGridReady: s,
+    rowHeight: p,
+    context: l,
+    columnDefs: h,
+    maintainColumnOrder: d = !0,
+    ...m
+  } = a, u = A[r], g = p ?? u, b = y(
     () => ({
-      ...d,
-      formatType: _[r]
+      ...l,
+      formatType: D[o]
     }),
-    [d, r]
+    [l, o]
   );
-  y(() => {
+  v(() => {
     e?.resetRowHeights();
-  }, [o, e]), y(() => {
+  }, [r, e]), v(() => {
     if (e) {
-      const s = e.getGridOption("context") || {};
+      const i = e.getGridOption("context") || {};
       e.setGridOption("context", {
-        ...s,
-        formatType: _[r]
+        ...i,
+        formatType: D[o]
       }), e.refreshCells({ force: !0 });
     }
-  }, [r, e]);
-  const S = H(
-    (s) => {
-      t(s.api), c?.(s);
+  }, [o, e]);
+  const T = x(
+    (i) => {
+      t(i.api), s?.(i);
     },
-    [t, c]
+    [t, s]
   );
-  return /* @__PURE__ */ C(
-    "div",
+  return /* @__PURE__ */ n(z, { className: c, children: /* @__PURE__ */ n(
+    B,
     {
-      className: w(
-        "relative flex-1 min-h-0 w-full bg-canvas-elevated rounded-b-[inherit] grid-rounded-bottom",
-        l
-      ),
-      style: p ? { minHeight: A } : void 0,
-      children: [
-        /* @__PURE__ */ n(
-          z,
-          {
-            ...g,
-            columnDefs: m,
-            rowHeight: u,
-            onGridReady: S,
-            context: x,
-            maintainColumnOrder: f
-          }
-        ),
-        /* @__PURE__ */ n(k, {})
-      ]
+      ...m,
+      columnDefs: h,
+      maintainColumnOrder: d,
+      resolvedRowHeight: g,
+      mergedContext: b,
+      onGridReady: T
     }
-  );
+  ) });
 }
-const q = ({
-  children: i,
+const $ = ({
+  children: a,
   className: t
 }) => /* @__PURE__ */ n(
   "div",
   {
     "data-component": "data-table-toolbar",
-    className: w(
+    className: H(
       "flex items-center justify-between px-4 py-3 shrink-0 bg-canvas-elevated rounded-t-[inherit]",
       t
     ),
-    children: i
+    children: a
   }
 );
 export {
-  Y as DataTable,
-  $ as DataTableContent,
-  q as DataTableToolbar
+  V as DataTable,
+  Y as DataTableContent,
+  $ as DataTableToolbar
 };

package/dist/components/data/data-table/data-table.types.d.ts

@@ -1,9 +1,44 @@
 import { AgGridWrapperProps } from '../ag-grid-react/ag-grid.types';
 import type * as React from "react";
+/**
+ * Root layout provider for data tables. Compose toolbar, sheet, and `DataTableContent` as children.
+ */
 export type DataTableProps = {
     children: React.ReactNode;
     className?: string;
 };
+/**
+ * AG Grid surface — forwards native `AgGridReact` props (rowData, columnDefs, rowModelType, treeData, …)
+ * with Impact Nova styling. See https://www.ag-grid.com/react-data-grid/grid-options/
+ */
 export type DataTableContentProps<TData = unknown> = AgGridWrapperProps<TData> & {
     className?: string;
 };
+/**
+ * Top bar above the grid. Optional — omit to remove the toolbar from the DOM.
+ *
+ * Layout is `justify-between`: place a title or context on the left, actions on the right
+ * (filter toggle, `DataTableSheet` / view menu, export, density, saved views).
+ */
+export type DataTableToolbarProps = {
+    /** Toolbar slots — typically title (left) and action buttons / `DataTableSheet` (right). */
+    children: React.ReactNode;
+    /** Extra classes on the toolbar root (`data-component="data-table-toolbar"`). */
+    className?: string;
+};
+/**
+ * Scoped settings panel state. Renders inside the `DataTable` container (not a viewport modal).
+ *
+ * Compose `DataTableSheetContent` for the slide-in panel, triggers from the toolbar or view menu,
+ * and optional `DataTableColumnList` / `DataTableSavedViews` inside the sheet body.
+ */
+export type DataTableSheetProps = {
+    /** Sheet subtree — typically `DataTableSheetContent`, triggers, and settings panels. */
+    children: React.ReactNode;
+    /** Initial open state when `open` is not provided (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Controlled open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Called when the user opens or closes the sheet. */
+    onOpenChange?: (open: boolean) => void;
+};

package/dist/components/data/data-table/index.js

@@ -1,40 +1,41 @@
 import { DataTable as t, DataTableContent as o, DataTableToolbar as r } from "./data-table.js";
 import { DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX as l, TABLE_VIEWPORT_SHELL_EXPANDED_CLASS as D } from "./data-table-constants.js";
-import { DataTableColumnList as b } from "./data-table-column-list.js";
-import { DataTableContext as S, DataTableSheetPortalContext as m, useDataTable as p, useDataTableSheetPortal as x } from "./data-table-context.js";
-import { DataTableFormatOptions as u } from "./data-table-format-options.js";
-import { DataTableSheet as _, DataTableSheetContent as h, DataTableSheetHeader as s, DataTableSheetTrigger as C } from "./data-table-sheet.js";
+import { DataTableColumnList as n } from "./data-table-column-list.js";
+import { DataTableContext as i, DataTableSheetPortalStoreContext as m, useDataTable as p, useDataTableSheetPortal as x, useDataTableSheetPortalStore as f } from "./data-table-context.js";
+import { DataTableFormatOptions as E } from "./data-table-format-options.js";
+import { DataTableSheet as h, DataTableSheetContent as s, DataTableSheetHeader as C, DataTableSheetTrigger as w } from "./data-table-sheet.js";
 import { useDataTableSheet as V, useDataTableSheetApi as A } from "./data-table-sheet-context.js";
-import { DataTableViewMenuContent as P, DataTableViewMenuDensity as d, DataTableViewMenuSettingsItem as g, DataTableViewMenuTrigger as H, DataTableViewMenuViewportExpand as I } from "./data-table-view-menu.js";
-import { DataTableSavedViews as O } from "./data-table-saved-views.js";
-import { PinSwitch as B } from "./pin-switch.js";
-import { ColumnIndicator as X } from "./column-indicator.js";
-import { IndicatorLegend as y } from "./indicator-legend.js";
+import { DataTableViewMenuContent as d, DataTableViewMenuDensity as g, DataTableViewMenuSettingsItem as H, DataTableViewMenuTrigger as I, DataTableViewMenuViewportExpand as M } from "./data-table-view-menu.js";
+import { DataTableSavedViews as c } from "./data-table-saved-views.js";
+import { PinSwitch as N } from "./pin-switch.js";
+import { ColumnIndicator as v } from "./column-indicator.js";
+import { IndicatorLegend as F } from "./indicator-legend.js";
 export {
-  X as ColumnIndicator,
+  v as ColumnIndicator,
   l as DATA_TABLE_SCOPED_SHEET_HOST_MIN_HEIGHT_PX,
   t as DataTable,
-  b as DataTableColumnList,
+  n as DataTableColumnList,
   o as DataTableContent,
-  S as DataTableContext,
-  u as DataTableFormatOptions,
-  O as DataTableSavedViews,
-  _ as DataTableSheet,
-  h as DataTableSheetContent,
-  s as DataTableSheetHeader,
-  m as DataTableSheetPortalContext,
-  C as DataTableSheetTrigger,
+  i as DataTableContext,
+  E as DataTableFormatOptions,
+  c as DataTableSavedViews,
+  h as DataTableSheet,
+  s as DataTableSheetContent,
+  C as DataTableSheetHeader,
+  m as DataTableSheetPortalStoreContext,
+  w as DataTableSheetTrigger,
   r as DataTableToolbar,
-  P as DataTableViewMenuContent,
-  d as DataTableViewMenuDensity,
-  g as DataTableViewMenuSettingsItem,
-  H as DataTableViewMenuTrigger,
-  I as DataTableViewMenuViewportExpand,
-  y as IndicatorLegend,
-  B as PinSwitch,
+  d as DataTableViewMenuContent,
+  g as DataTableViewMenuDensity,
+  H as DataTableViewMenuSettingsItem,
+  I as DataTableViewMenuTrigger,
+  M as DataTableViewMenuViewportExpand,
+  F as IndicatorLegend,
+  N as PinSwitch,
   D as TABLE_VIEWPORT_SHELL_EXPANDED_CLASS,
   p as useDataTable,
   V as useDataTableSheet,
   A as useDataTableSheetApi,
-  x as useDataTableSheetPortal
+  x as useDataTableSheetPortal,
+  f as useDataTableSheetPortalStore
 };

package/dist/components/data/data-table/indicator-legend.js

@@ -1,15 +1,15 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useImpactNovaI18n as r } from "../../../i18n/use-impact-nova-i18n.js";
-import { ColumnIndicator as n } from "./column-indicator.js";
+import { useImpactNovaI18n as n } from "../../../i18n/use-impact-nova-i18n.js";
+import { ColumnIndicator as r } from "./column-indicator.js";
 const i = () => {
-  const { t: a } = r();
-  return /* @__PURE__ */ t("div", { className: "flex items-center gap-3 text-[10px] text-content-muted", "data-component": "indicator-legend", children: [
+  const { t: a } = n();
+  return /* @__PURE__ */ t("div", { className: "flex items-center gap-3 text-[10px] text-secondary-foreground", "data-component": "indicator-legend", children: [
     /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ e(n, { type: "sort" }),
+      /* @__PURE__ */ e(r, { type: "sort" }),
       /* @__PURE__ */ e("span", { children: a("dataTable.indicatorSort") })
     ] }),
     /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ e(n, { type: "filter" }),
+      /* @__PURE__ */ e(r, { type: "filter" }),
       /* @__PURE__ */ e("span", { children: a("dataTable.indicatorSearch") })
     ] })
   ] });

package/dist/components/data/expandable-list-item/expandable-list-item-attributes.d.ts

@@ -0,0 +1,8 @@
+import { ExpandableListItemAttributesSection } from './expandable-list-item.types';
+export interface ExpandableListItemAttributesProps {
+    tags: ExpandableListItemAttributesSection["tags"];
+    title?: string;
+    maxVisibleTags?: number;
+    formatOverflow?: ExpandableListItemAttributesSection["formatOverflow"];
+}
+export declare function ExpandableListItemAttributes({ tags, title, maxVisibleTags, formatOverflow, }: ExpandableListItemAttributesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/expandable-list-item/expandable-list-item-attributes.js

@@ -0,0 +1,72 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Badge as p } from "../../data-display/badge/badge.js";
+import { FilterPopoverContent as h } from "../../flows/filter-strip/filter-tag-list.js";
+import { Popover as u, PopoverTrigger as f } from "../../feedback/popover/popover.js";
+import { Tag as x } from "../../primitives/tag/tag.js";
+import { Tooltip as b, TooltipTrigger as g, TooltipContent as v } from "../../feedback/tooltip/tooltip.js";
+function I({
+  tags: n,
+  title: i = "Attributes",
+  maxVisibleTags: a = 4,
+  formatOverflow: s
+}) {
+  const c = n.slice(0, a), t = n.slice(a), o = t.length, d = s?.(o) ?? (o > 0 ? `+${o}` : null);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "px-4 py-4 pt-0 sm:px-5",
+      "data-component": "expandable-list-item-attributes",
+      children: [
+        /* @__PURE__ */ e("p", { className: "text-xs font-semibold leading-5 text-content-heading", children: i }),
+        /* @__PURE__ */ r("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
+          c.map((l, m) => /* @__PURE__ */ e(
+            p,
+            {
+              variant: "subtle",
+              color: "neutral",
+              size: "sm",
+              shape: "circle",
+              className: "max-w-full",
+              children: l
+            },
+            `${m}-${l}`
+          )),
+          t.length > 0 ? /* @__PURE__ */ r(u, { children: [
+            /* @__PURE__ */ r(b, { children: [
+              /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
+                x,
+                {
+                  variant: "secondary",
+                  size: "md",
+                  shape: "rounded",
+                  className: "h-6 cursor-pointer whitespace-nowrap border-0 bg-accent px-2 font-['Manrope'] text-xs font-medium text-accent-foreground hover:bg-accent/80",
+                  tabIndex: 0,
+                  role: "button",
+                  "aria-label": `${t.length} more attributes for ${i}`,
+                  children: d
+                }
+              ) }) }),
+              /* @__PURE__ */ r(v, { variant: "tertiary", side: "top", children: [
+                t.length,
+                " more"
+              ] })
+            ] }),
+            /* @__PURE__ */ e(
+              h,
+              {
+                remainingValues: t,
+                onItemRemove: () => {
+                },
+                isRemovable: !1,
+                isCopyable: !0
+              }
+            )
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  I as ExpandableListItemAttributes
+};

package/dist/components/data/expandable-list-item/expandable-list-item-context.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface ExpandableListItemContextValue {
+    showSelectionChrome: boolean;
+    disabled?: boolean;
+    expandAriaLabel: string;
+    collapseAriaLabel: string;
+}
+export declare function ExpandableListItemProvider({ value, children, }: {
+    value: ExpandableListItemContextValue;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useExpandableListItemContext(): ExpandableListItemContextValue;
+export declare const EXPANDABLE_LIST_ITEM_ACCORDION_VALUE = "expandable-list-item-row-item";

package/dist/components/data/expandable-list-item/expandable-list-item-context.js

@@ -0,0 +1,25 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as e from "react";
+const n = e.createContext(
+  null
+);
+function a({
+  value: t,
+  children: o
+}) {
+  return /* @__PURE__ */ r(n.Provider, { value: t, children: o });
+}
+function s() {
+  const t = e.useContext(n);
+  if (!t)
+    throw new Error(
+      "ExpandableListItem compound parts must be used within ExpandableListItemRoot."
+    );
+  return t;
+}
+const m = "expandable-list-item-row-item";
+export {
+  m as EXPANDABLE_LIST_ITEM_ACCORDION_VALUE,
+  a as ExpandableListItemProvider,
+  s as useExpandableListItemContext
+};

package/dist/components/data/expandable-list-item/expandable-list-item-metrics.d.ts

@@ -0,0 +1,6 @@
+import { ExpandableListItemMetricsSection } from './expandable-list-item.types';
+export interface ExpandableListItemMetricsProps {
+    columns: ExpandableListItemMetricsSection["columns"];
+    sectionId?: string;
+}
+export declare function ExpandableListItemMetrics({ columns, sectionId, }: ExpandableListItemMetricsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/data/expandable-list-item/expandable-list-item-metrics.js

@@ -0,0 +1,41 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+function o({
+  columns: l,
+  sectionId: i = "metrics"
+}) {
+  return l.length === 0 ? null : /* @__PURE__ */ e(
+    "div",
+    {
+      className: "min-w-0 bg-transparent",
+      "data-component": "expandable-list-item-metrics",
+      children: /* @__PURE__ */ e("div", { className: "scrollbar-hide overflow-x-auto overscroll-x-contain [-webkit-overflow-scrolling:touch]", children: /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-nowrap divide-x divide-stroke-hairline px-4 py-4 sm:px-5", children: l.map((t, n) => /* @__PURE__ */ a(
+        "div",
+        {
+          className: "flex min-w-[7.5rem] flex-1 basis-0 flex-col gap-1 overflow-hidden px-3 first:pl-0 last:pr-0 sm:min-w-[8rem] sm:px-4",
+          children: [
+            /* @__PURE__ */ e(
+              "p",
+              {
+                className: "truncate text-xs font-semibold leading-5 text-content-heading",
+                title: t.label,
+                children: t.label
+              }
+            ),
+            /* @__PURE__ */ e(
+              "p",
+              {
+                className: "truncate text-sm font-semibold leading-5 text-content",
+                title: String(t.value),
+                children: t.value
+              }
+            )
+          ]
+        },
+        `${i}-metric-${n}`
+      )) }) })
+    }
+  );
+}
+export {
+  o as ExpandableListItemMetrics
+};

package/dist/components/data/expandable-list-item/expandable-list-item-parts.d.ts

@@ -0,0 +1,31 @@
+import { Checkbox } from '../../forms/checkbox';
+import * as React from "react";
+export interface ExpandableListItemRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
+    selected?: boolean;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (open: boolean) => void;
+    disabled?: boolean;
+    expandAriaLabel?: string;
+    collapseAriaLabel?: string;
+    children: React.ReactNode;
+}
+export declare const ExpandableListItemRoot: React.ForwardRefExoticComponent<ExpandableListItemRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ExpandableListItemRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface ExpandableListItemCheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Checkbox>, "onCheckedChange"> {
+    onCheckedChange?: (checked: boolean) => void;
+}
+export declare const ExpandableListItemCheckbox: React.ForwardRefExoticComponent<ExpandableListItemCheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ExpandableListItemTrigger: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-accordion').AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    badge?: React.ReactNode;
+    rightActions?: React.ReactNode;
+    headingLevel?: import('../../..').AccordionHeadingLevel;
+    variant?: "default" | "plain";
+    renderChevronTooltip?: import('../../..').InfoTooltipRender;
+} & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ExpandableListItemTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+export declare const ExpandableListItemDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ExpandableListItemMedia: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ExpandableListItemHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ExpandableListItemContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ExpandableListItemFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;