@serendie/ui 1.0.0 → 2.0.0-dev.202507172231

package/dist/components/ChoiceBox/ChoiceBox.js

@@ -2,22 +2,23 @@ import { jsxs as d, jsx as o } from "react/jsx-runtime";
 import "../../styled-system/css/css.js";
 import { cx as n } from "../../styled-system/css/cx.js";
 import "../../styled-system/helpers.js";
-import { sva as a } from "../../styled-system/css/sva.js";
-import p from "../../assets/checkboxChecked.svg.js";
-import I from "../../assets/checkboxUnchecked.svg.js";
-import C from "../../assets/radioChecked.svg.js";
-import x from "../../assets/radioUnchecked.svg.js";
-import { checkboxUncheckedIconCss as l, checkboxCheckedIconCss as b, checkboxIconCss as f } from "../CheckBox/CheckBox.js";
-import { radioUncheckedIconCss as u, radioCheckedIconCss as U, radioIconCss as N } from "../RadioButton/RadioButton.js";
+import { sva as k } from "../../styled-system/css/sva.js";
+import I from "../../assets/checkboxChecked.svg.js";
+import p from "../../assets/checkboxUnchecked.svg.js";
+import C from "../../assets/checkboxIndeterminate.svg.js";
+import x from "../../assets/radioChecked.svg.js";
+import l from "../../assets/radioUnchecked.svg.js";
+import { checkboxUncheckedIconCss as b, checkboxCheckedIconCss as f, checkboxIconCss as u } from "../CheckBox/CheckBox.js";
+import { radioUncheckedIconCss as U, radioCheckedIconCss as N, radioIconCss as g } from "../RadioButton/RadioButton.js";
 import { RadioGroupItem as R } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item.js";
-import { RadioGroupItemContext as g } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
-import { RadioGroupItemControl as v } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-control.js";
-import { RadioGroupItemHiddenInput as S } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-hidden-input.js";
-import { CheckboxRoot as G } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
-import { CheckboxContext as P } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
-import { CheckboxControl as j } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
-import { CheckboxHiddenInput as y } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
-const h = a({
+import { RadioGroupItemContext as v } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
+import { RadioGroupItemControl as S } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-control.js";
+import { RadioGroupItemHiddenInput as G } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-hidden-input.js";
+import { CheckboxRoot as P } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
+import { CheckboxContext as j } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
+import { CheckboxControl as y } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
+import { CheckboxHiddenInput as B } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
+const h = k({
   slots: [
     "root",
     "radioItem",
@@ -31,53 +32,58 @@ const h = a({
     root: {
       display: "flex"
     },
-    radioItem: N,
-    radioCheckedIcon: U,
-    radioUncheckedIcon: u,
-    checkboxItem: f,
-    checkboxCheckedIcon: b,
-    checkboxUncheckedIcon: l
+    radioItem: g,
+    radioCheckedIcon: N,
+    radioUncheckedIcon: U,
+    checkboxItem: u,
+    checkboxCheckedIcon: f,
+    checkboxUncheckedIcon: b
   }
-}), Y = ({
+}), _ = ({
   type: r,
   value: t,
   className: i,
-  ...s
+  ...m
 }) => {
-  const [k, m] = h.splitVariantProps(s), c = h(k);
+  const [s, a] = h.splitVariantProps(m), e = h(s);
   if (r === "radio")
     return /* @__PURE__ */ d(
       R,
       {
         value: t,
-        className: n("group", c.root, i),
-        ...m,
+        className: n("group", e.root, i),
+        ...a,
         children: [
-          /* @__PURE__ */ o(g, { children: (e) => /* @__PURE__ */ o(v, { className: c.radioItem, asChild: !0, children: e.checked ? /* @__PURE__ */ o(C, { className: c.radioCheckedIcon }) : /* @__PURE__ */ o(x, { className: c.radioUncheckedIcon }) }) }),
-          /* @__PURE__ */ o(S, {})
+          /* @__PURE__ */ o(v, { children: (c) => /* @__PURE__ */ o(S, { className: e.radioItem, asChild: !0, children: c.checked ? /* @__PURE__ */ o(x, { className: e.radioCheckedIcon }) : /* @__PURE__ */ o(l, { className: e.radioUncheckedIcon }) }) }),
+          /* @__PURE__ */ o(G, {})
         ]
       }
     );
   if (r === "checkbox")
-    return /* @__PURE__ */ d(
-      G,
+    return /* @__PURE__ */ o(
+      P,
       {
         value: t,
-        className: n("group", c.root, i),
+        className: n("group", e.root, i),
         ...m,
-        children: [
-          /* @__PURE__ */ o(P, { children: (e) => /* @__PURE__ */ o(j, { className: c.checkboxItem, children: e.checked ? /* @__PURE__ */ o(p, { className: c.checkboxCheckedIcon }) : /* @__PURE__ */ o(
-            I,
+        children: /* @__PURE__ */ o(j, { children: (c) => /* @__PURE__ */ d(y, { className: e.checkboxItem, children: [
+          c.checked === !0 ? /* @__PURE__ */ o(I, { className: e.checkboxCheckedIcon }) : c.indeterminate === !0 ? /* @__PURE__ */ o(
+            C,
             {
-              className: c.checkboxUncheckedIcon
+              className: e.checkboxCheckedIcon
             }
-          ) }) }),
-          /* @__PURE__ */ o(y, {})
-        ]
+          ) : /* @__PURE__ */ o(
+            p,
+            {
+              className: e.checkboxUncheckedIcon
+            }
+          ),
+          /* @__PURE__ */ o(B, {})
+        ] }) })
       }
     );
 };
 export {
-  Y as ChoiceBox,
+  _ as ChoiceBox,
   h as ChoiceBoxStyle
 };

package/dist/components/DataTable/DataTableComponent.d.ts

@@ -0,0 +1,23 @@
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+/**
+ * TanStack Tableは設計上、各カラムが異なる値の型を持つことを前提としています。
+ * createColumnHelperは各カラムに正確な型（string, number等）を付与しますが、
+ * これらを単一の配列にまとめる際、TypeScriptの型システムの制約により問題が生じます。
+ *
+ * TanStack Table自体も内部実装で`ColumnDef<TData, any>[]`を使用しており、
+ * これは意図的な設計判断です。これに従い、型エイリアスで意図を明確にします。
+ * https://github.com/TanStack/table/blob/0cc6992c7836489661a0954a2b56e620850ad4da/packages/table-core/src/types.ts#L288C1-L289C1
+ */
+type TableColumnDef<TData> = ColumnDef<TData, any>;
+export interface DataTableComponentProps<TData = Record<string, unknown>> {
+    data: TData[];
+    columns: TableColumnDef<TData>[];
+    enableRowSelection?: boolean;
+    enableSorting?: boolean;
+    initialSorting?: SortingState;
+    onRowSelectionChange?: (selection: Record<string, boolean>) => void;
+    onSortingChange?: (sorting: SortingState) => void;
+    className?: string;
+}
+export declare function DataTableComponent<TData = Record<string, unknown>>({ data, columns, enableRowSelection, enableSorting, initialSorting, onSortingChange, className, }: DataTableComponentProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default DataTableComponent;

package/dist/components/DataTable/DataTableComponent.js

@@ -0,0 +1,52 @@
+import { jsxs as M, jsx as e } from "react/jsx-runtime";
+import { useState as a } from "react";
+import { useReactTable as T } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { DataTable as t } from "./index.js";
+import { getSortedRowModel as S, getCoreRowModel as b } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
+function D({
+  data: l = [],
+  columns: m = [],
+  enableRowSelection: r = !0,
+  enableSorting: c = !0,
+  initialSorting: f = [],
+  onSortingChange: s,
+  className: w
+}) {
+  const [R, p] = a({}), [i, g] = a(f), u = (o) => {
+    const n = typeof o == "function" ? o(i) : o;
+    g(n), s == null || s(n);
+  }, d = T({
+    data: l,
+    columns: m,
+    getCoreRowModel: b(),
+    getSortedRowModel: S(),
+    state: { rowSelection: R, sorting: i },
+    onRowSelectionChange: p,
+    onSortingChange: u,
+    enableRowSelection: r,
+    enableSorting: c
+  });
+  return /* @__PURE__ */ M(t.Root, { className: w, children: [
+    /* @__PURE__ */ e(t.Thead, { children: d.getHeaderGroups().map((o) => /* @__PURE__ */ e(
+      t.HeaderRow,
+      {
+        headerGroup: o,
+        enableRowSelection: r,
+        table: d
+      },
+      o.id
+    )) }),
+    /* @__PURE__ */ e(t.Tbody, { children: d.getRowModel().rows.map((o) => /* @__PURE__ */ e(
+      t.Row,
+      {
+        row: o,
+        enableRowSelection: r
+      },
+      o.id
+    )) })
+  ] });
+}
+export {
+  D as DataTableComponent,
+  D as default
+};

package/dist/components/DataTable/createColumnHelper.d.ts

@@ -0,0 +1,2 @@
+import { createColumnHelper as TanstackCreateColumnHelper } from '@tanstack/react-table';
+export declare const createColumnHelper: typeof TanstackCreateColumnHelper;

package/dist/components/DataTable/createColumnHelper.js

@@ -0,0 +1,5 @@
+import { createColumnHelper as e } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
+const o = e;
+export {
+  o as createColumnHelper
+};

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

@@ -0,0 +1,19 @@
+import { createColumnHelper } from './createColumnHelper';
+import { DataTableComponent, DataTableComponentProps } from './DataTableComponent';
+import { BodyCell, Root, Row, HeaderRow, Thead, Tr, HeaderCheckbox, BodyCheckbox, Tbody, HeaderCell } from './table';
+interface DataTableCompound {
+    <TData = Record<string, unknown>>(props: DataTableComponentProps<TData>): JSX.Element;
+    BodyCell: typeof BodyCell;
+    BodyCheckbox: typeof BodyCheckbox;
+    Tbody: typeof Tbody;
+    HeaderCell: typeof HeaderCell;
+    HeaderCheckbox: typeof HeaderCheckbox;
+    HeaderRow: typeof HeaderRow;
+    Root: typeof Root;
+    Row: typeof Row;
+    Thead: typeof Thead;
+    Tr: typeof Tr;
+    createColumnHelper: typeof createColumnHelper;
+}
+declare const DataTable: DataTableCompound;
+export { DataTable, DataTableComponent };

package/dist/components/DataTable/index.js

@@ -0,0 +1,28 @@
+import { createColumnHelper as r } from "./createColumnHelper.js";
+import { DataTableComponent as e } from "./DataTableComponent.js";
+import { Root as m } from "./table/Root.js";
+import { Thead as t } from "./table/Thead.js";
+import { Tr as a } from "./table/Tr.js";
+import { Row as p } from "./table/Row.js";
+import { HeaderRow as d } from "./table/HeaderRow.js";
+import { BodyCell as l } from "./table/BodyCell.js";
+import { HeaderCheckbox as f } from "./table/HeaderCheckbox.js";
+import { BodyCheckbox as i } from "./table/BodyCheckbox.js";
+import { Tbody as C } from "./table/Tbody.js";
+import { HeaderCell as b } from "./table/HeaderCell.js";
+const o = e;
+o.BodyCell = l;
+o.BodyCheckbox = i;
+o.Tbody = C;
+o.HeaderCell = b;
+o.HeaderCheckbox = f;
+o.HeaderRow = d;
+o.Root = m;
+o.Row = p;
+o.Thead = t;
+o.Tr = a;
+o.createColumnHelper = r;
+export {
+  o as DataTable,
+  e as DataTableComponent
+};

package/dist/components/DataTable/table/BodyCell.d.ts

@@ -0,0 +1,55 @@
+import { RecipeVariantProps } from '../../../../styled-system/css';
+declare const cellStyle: import('../../../../styled-system/types').RecipeRuntimeFn<{
+    type: {
+        default: {
+            background: "sd.system.color.component.surface";
+        };
+        success: {
+            background: "sd.system.color.impression.positiveContainerVariant";
+        };
+        notice: {
+            background: "sd.system.color.impression.noticeContainerVariant";
+        };
+        error: {
+            background: "sd.system.color.impression.negativeContainerVariant";
+            color: "sd.system.color.impression.onNegativeContainerVariant";
+        };
+    };
+    state: {
+        enabled: {};
+        hovered: {
+            background: "color-mix(in srgb, token(colors.sd.system.color.component.surface) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)";
+        };
+        selected: {
+            background: "sd.system.color.component.inversePrimary";
+        };
+    };
+    size: {
+        small: {
+            fontSize: "11px";
+            height: "24px";
+        };
+        medium: {
+            fontSize: "13px";
+            height: "32px";
+        };
+        large: {
+            fontSize: "15px";
+            height: "40px";
+        };
+    };
+}>;
+type CellStyleVariants = RecipeVariantProps<typeof cellStyle>;
+type ExtractVariantProperty<T, K extends string> = NonNullable<T> extends infer V ? V extends {
+    [P in K]?: infer U;
+} ? U : never : never;
+export type CellType = ExtractVariantProperty<CellStyleVariants, "type">;
+type CellState = ExtractVariantProperty<CellStyleVariants, "state">;
+type CellSize = ExtractVariantProperty<CellStyleVariants, "size">;
+export declare const BodyCell: React.FC<{
+    children: React.ReactNode;
+    size?: CellSize;
+    type?: CellType | string;
+    state?: CellState;
+}>;
+export {};

package/dist/components/DataTable/table/BodyCell.js

@@ -0,0 +1,127 @@
+import { jsx as c } from "react/jsx-runtime";
+import "../../../styled-system/css/css.js";
+import { cva as i } from "../../../styled-system/css/cva.js";
+import "../../../styled-system/helpers.js";
+const a = i({
+  base: {
+    borderBottom: "1px solid",
+    borderColor: "sd.system.color.component.outline",
+    fontFamily: "Roboto, sans-serif",
+    color: "sd.system.color.component.onSurface",
+    textAlign: "left",
+    verticalAlign: "middle",
+    fontWeight: 400,
+    fontSize: "13px",
+    px: "sd.system.dimension.spacing.extraSmall",
+    py: "sd.system.dimension.spacing.twoExtraSmall",
+    height: "32px",
+    whiteSpace: "nowrap"
+  },
+  variants: {
+    type: {
+      default: {
+        background: "sd.system.color.component.surface"
+      },
+      success: {
+        background: "sd.system.color.impression.positiveContainerVariant"
+      },
+      notice: {
+        background: "sd.system.color.impression.noticeContainerVariant"
+      },
+      error: {
+        background: "sd.system.color.impression.negativeContainerVariant",
+        color: "sd.system.color.impression.onNegativeContainerVariant"
+      }
+    },
+    state: {
+      enabled: {},
+      hovered: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.component.surface) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)"
+      },
+      selected: {
+        background: "sd.system.color.component.inversePrimary"
+      }
+    },
+    size: {
+      small: { fontSize: "11px", height: "24px" },
+      medium: { fontSize: "13px", height: "32px" },
+      large: { fontSize: "15px", height: "40px" }
+    }
+  },
+  compoundVariants: [
+    {
+      type: "success",
+      state: "hovered",
+      css: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.impression.positiveContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+        opacity: 0.95
+      }
+    },
+    {
+      type: "notice",
+      state: "hovered",
+      css: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.impression.noticeContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+        opacity: 0.95
+      }
+    },
+    {
+      type: "error",
+      state: "hovered",
+      css: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.impression.negativeContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+        opacity: 0.95
+      }
+    },
+    {
+      type: "success",
+      state: "selected",
+      css: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.impression.positiveContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+        opacity: 0.98
+      }
+    },
+    {
+      type: "notice",
+      state: "selected",
+      css: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.impression.noticeContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+        opacity: 0.98
+      }
+    },
+    {
+      type: "error",
+      state: "selected",
+      css: {
+        background: "color-mix(in srgb, token(colors.sd.system.color.impression.negativeContainerVariant) 95%, token(colors.sd.system.color.component.inverseSurface) 5%)",
+        opacity: 0.98
+      }
+    }
+  ],
+  defaultVariants: {
+    type: "default",
+    state: "enabled"
+  }
+}), l = ["default", "success", "notice", "error"], m = (o) => l.includes(o) ? o : "default", g = ({
+  children: o,
+  size: t = "medium",
+  type: r = "default",
+  state: e = "enabled",
+  ...n
+}) => {
+  const s = m(r);
+  return /* @__PURE__ */ c(
+    "td",
+    {
+      role: "cell",
+      "data-type": s,
+      "data-state": e,
+      className: a({ size: t, type: s, state: e }),
+      ...n,
+      children: o
+    }
+  );
+};
+export {
+  g as BodyCell
+};

package/dist/components/DataTable/table/BodyCheckbox.d.ts

@@ -0,0 +1,4 @@
+import { ChoiceBoxProps } from '../../ChoiceBox';
+export declare const BodyCheckbox: ({ checked, onChange, value, state, ...props }: {
+    state?: "enabled" | "hovered" | "selected";
+} & Omit<ChoiceBoxProps, "type">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/BodyCheckbox.js

@@ -0,0 +1,22 @@
+import { jsx as o } from "react/jsx-runtime";
+import { ChoiceBox as i } from "../../ChoiceBox/ChoiceBox.js";
+import { DataTable as l } from "../index.js";
+const b = ({
+  checked: e,
+  onChange: r,
+  value: t,
+  state: c = "enabled",
+  ...m
+}) => /* @__PURE__ */ o(l.BodyCell, { state: c, children: /* @__PURE__ */ o(
+  i,
+  {
+    ...m,
+    type: "checkbox",
+    value: t,
+    checked: e,
+    onChange: r
+  }
+) });
+export {
+  b as BodyCheckbox
+};

package/dist/components/DataTable/table/HeaderCell.d.ts

@@ -0,0 +1,8 @@
+export declare const HeaderCell: ({ children, size, state, sortable, sortDirection, onSort, className, ...props }: React.PropsWithChildren<{
+    size?: "small" | "medium" | "large";
+    state?: "enabled" | "hovered";
+    sortable?: boolean;
+    sortDirection?: "asc" | "desc" | false;
+    onSort?: () => void;
+    className?: string;
+}> & React.ComponentProps<"th">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/HeaderCell.js

@@ -0,0 +1,79 @@
+import { jsx as l, jsxs as c } from "react/jsx-runtime";
+import { SerendieSymbol as a } from "@serendie/symbols";
+import { css as p } from "../../../styled-system/css/css.js";
+import { cx as f } from "../../../styled-system/css/cx.js";
+import { cva as y } from "../../../styled-system/css/cva.js";
+import "../../../styled-system/helpers.js";
+const u = y({
+  base: {
+    borderBottom: "1px solid",
+    borderColor: "sd.system.color.component.outline",
+    fontFamily: "Roboto, sans-serif",
+    color: "sd.system.color.component.onSurface",
+    textAlign: "left",
+    fontWeight: 400,
+    fontSize: "14px",
+    px: "sd.system.dimension.spacing.extraSmall",
+    py: "sd.system.dimension.spacing.twoExtraSmall",
+    height: "32px",
+    background: "sd.system.color.component.inversePrimary",
+    verticalAlign: "middle",
+    whiteSpace: "nowrap"
+  },
+  defaultVariants: {}
+}), C = ({
+  children: i,
+  size: d = "medium",
+  state: m = "enabled",
+  sortable: e = !1,
+  sortDirection: n,
+  onSort: o,
+  className: r,
+  ...t
+}) => /* @__PURE__ */ l(
+  "th",
+  {
+    role: "columnheader",
+    "aria-sort": n === "asc" ? "ascending" : n === "desc" ? "descending" : e ? "none" : void 0,
+    tabIndex: e ? 0 : void 0,
+    onClick: e ? o : void 0,
+    onKeyDown: (s) => {
+      e && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), o == null || o());
+    },
+    className: f(u({ size: d, state: m }), r),
+    style: {
+      cursor: e ? "pointer" : "default",
+      userSelect: "none"
+    },
+    ...t,
+    children: /* @__PURE__ */ c(
+      "span",
+      {
+        className: p({
+          display: "inline-flex",
+          alignItems: "center",
+          verticalAlign: "middle"
+        }),
+        children: [
+          i,
+          e && (n === "asc" ? /* @__PURE__ */ l(
+            a,
+            {
+              name: "chevron-double-up",
+              style: { marginLeft: 4 }
+            }
+          ) : n === "desc" ? /* @__PURE__ */ l(
+            a,
+            {
+              name: "chevron-double-down",
+              style: { marginLeft: 4 }
+            }
+          ) : /* @__PURE__ */ l(a, { name: "chevron-up-down", style: { marginLeft: 4 } }))
+        ]
+      }
+    )
+  }
+);
+export {
+  C as HeaderCell
+};

package/dist/components/DataTable/table/HeaderCheckbox.d.ts

@@ -0,0 +1,2 @@
+import { ChoiceBoxProps } from '../../ChoiceBox';
+export declare const HeaderCheckbox: React.FC<Omit<ChoiceBoxProps, "type">>;

package/dist/components/DataTable/table/HeaderCheckbox.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ChoiceBox as m } from "../../ChoiceBox/ChoiceBox.js";
+import { DataTable as t } from "../index.js";
+import { css as i } from "../../../styled-system/css/css.js";
+import { cx as c } from "../../../styled-system/css/cx.js";
+import "../../../styled-system/helpers.js";
+const d = ({
+  className: r,
+  ...o
+}) => /* @__PURE__ */ e(t.HeaderCell, { children: /* @__PURE__ */ e(
+  m,
+  {
+    ...o,
+    type: "checkbox",
+    className: c(
+      i({
+        alignItems: "center",
+        verticalAlign: "middle"
+      }),
+      r
+    )
+  }
+) });
+export {
+  d as HeaderCheckbox
+};

package/dist/components/DataTable/table/HeaderRow.d.ts

@@ -0,0 +1,11 @@
+import { HeaderGroup } from '@tanstack/react-table';
+export interface HeaderRowProps<TData> {
+    headerGroup: HeaderGroup<TData>;
+    enableRowSelection?: boolean;
+    table: {
+        getIsAllRowsSelected: () => boolean;
+        getIsSomeRowsSelected: () => boolean;
+        getToggleAllRowsSelectedHandler: () => (event: unknown) => void;
+    };
+}
+export declare function HeaderRow<TData>({ headerGroup, enableRowSelection, table, }: HeaderRowProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/table/HeaderRow.js

@@ -0,0 +1,40 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { flexRender as i } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { DataTable as t } from "../index.js";
+import { css as a } from "../../../styled-system/css/css.js";
+import "../../../styled-system/helpers.js";
+function p({
+  headerGroup: l,
+  enableRowSelection: n,
+  table: o
+}) {
+  return /* @__PURE__ */ m(t.Tr, { children: [
+    n && /* @__PURE__ */ r(
+      t.HeaderCheckbox,
+      {
+        checked: o.getIsSomeRowsSelected() ? "indeterminate" : !!o.getIsAllRowsSelected(),
+        onChange: o.getToggleAllRowsSelectedHandler(),
+        value: "select-all",
+        className: a({
+          verticalAlign: "middle"
+        })
+      }
+    ),
+    l.headers.map((e) => {
+      const c = e.column.getCanSort(), s = e.column.getIsSorted();
+      return /* @__PURE__ */ r(
+        t.HeaderCell,
+        {
+          sortable: c,
+          sortDirection: s,
+          onSort: () => e.column.toggleSorting(),
+          children: i(e.column.columnDef.header, e.getContext())
+        },
+        e.id
+      );
+    })
+  ] }, l.id);
+}
+export {
+  p as HeaderRow
+};

package/dist/components/DataTable/table/Root.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function Root({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;