@apipass/design-system 6.1.0 → 7.0.0

package/dist/lib/ui/primitives/Table/Table.js

@@ -1,111 +1,109 @@
-import { jsx as e, jsxs as b, Fragment as v } from "react/jsx-runtime";
-import { clsx as a } from "../../../vendor/clsx/dist/clsx.js";
-import { createContext as $, useContext as N } from "react";
-import { Table as k, Column as w, TableBody as B, useTableOptions as f, TableHeader as R, Checkbox as g, Collection as p, Row as U, Button as j, Cell as D } from "react-aria-components";
+import { jsx as e, jsxs as b, Fragment as y } from "react/jsx-runtime";
+import { clsx as o } from "../../../vendor/clsx/dist/clsx.js";
+import { createContext as v, useContext as N } from "react";
+import { Table as $, Column as k, TableBody as w, useTableOptions as f, TableHeader as B, Checkbox as p, Collection as g, Row as R, Button as U, Cell as j } from "react-aria-components";
 /* empty css          */
-import { IconChevronDown as F } from "../../icons/IconChevronDown.js";
-import { IconChevronUp as I } from "../../icons/IconChevronUp.js";
+import { IconChevronDown as D } from "../../icons/IconChevronDown.js";
+import { IconChevronUp as F } from "../../icons/IconChevronUp.js";
 import { Checkbox as C } from "../Checkbox/Checkbox.js";
-import { Radio as S } from "../Radio/Radio.js";
-const d = $("checkbox");
-function V(l) {
+import { Radio as I } from "../Radio/Radio.js";
+const d = v("checkbox");
+function S(l) {
   const t = Number(l);
   return `${l}`.trim() !== "" && Number.isFinite(t) ? `${t}px` : `${l}`;
 }
-function G({
+function E({
   bleed: l = !1,
   dense: t = !1,
-  grid: s = !1,
-  striped: o = !1,
-  selectionType: c = "checkbox",
+  striped: s = !1,
+  selectionType: a = "checkbox",
   maxHeight: n,
-  className: m,
-  ...i
+  className: c,
+  ...r
 }) {
-  const r = n !== void 0, x = a(
-    m,
+  const i = n !== void 0, m = o(
+    c,
     "table-container",
     l && "table-container-bleed",
-    r && "table-container-scrollable"
-  ), T = r ? { "--table-max-height": V(n) } : void 0, y = a(
+    i && "table-container-scrollable"
+  ), x = i ? { "--table-max-height": S(n) } : void 0, T = o(
     "sds-table",
     l && "table-bleed",
     t && "table-dense",
-    s && "table-grid",
-    o && "sds-table-striped"
+    s && "sds-table-striped"
   );
-  return /* @__PURE__ */ e("div", { className: x, style: T, children: /* @__PURE__ */ e(d.Provider, { value: c, children: /* @__PURE__ */ e(k, { className: y, ...i }) }) });
+  return /* @__PURE__ */ e("div", { className: m, style: x, children: /* @__PURE__ */ e(d.Provider, { value: a, children: /* @__PURE__ */ e($, { className: T, ...r }) }) });
 }
 function h({
   align: l = "start",
   className: t,
   ...s
 }) {
-  const o = a(t, "table-column", `table-align-${l}`);
-  return /* @__PURE__ */ e(w, { className: o, ...s, children: ({ allowsSorting: c, sortDirection: n }) => /* @__PURE__ */ e("div", { className: a("table-column-inner"), children: /* @__PURE__ */ b(v, { children: [
+  const a = o(t, "table-column", `table-align-${l}`);
+  return /* @__PURE__ */ e(k, { className: a, ...s, children: ({ allowsSorting: n, sortDirection: c }) => /* @__PURE__ */ e("div", { className: o("table-column-inner"), children: /* @__PURE__ */ b(y, { children: [
     s.children,
-    c && /* @__PURE__ */ e(
+    n && /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
-        className: a(
+        className: o(
           "sort-indicator",
-          !n && "sort-indicator-unsorted"
+          !c && "sort-indicator-unsorted"
         ),
-        children: n === "descending" ? /* @__PURE__ */ e(F, {}) : /* @__PURE__ */ e(I, {})
+        children: c === "descending" ? /* @__PURE__ */ e(D, {}) : /* @__PURE__ */ e(F, {})
       }
     )
   ] }) }) });
 }
-function J({
+function G({
   className: l,
   ...t
 }) {
-  return /* @__PURE__ */ e(B, { ...t });
+  return /* @__PURE__ */ e(w, { ...t });
 }
-function K({
+function J({
   className: l,
   columns: t,
   children: s,
-  ...o
+  ...a
 }) {
-  const { selectionBehavior: c, selectionMode: n, allowsDragging: m } = f(), i = N(d), r = a(l, "table-head");
-  return /* @__PURE__ */ b(R, { className: r, ...o, children: [
-    m && /* @__PURE__ */ e(h, {}),
-    c === "toggle" && /* @__PURE__ */ e(
+  const { selectionBehavior: n, selectionMode: c, allowsDragging: r } = f(), i = N(d), m = o(l, "table-head");
+  return /* @__PURE__ */ b(B, { className: m, ...a, children: [
+    r && /* @__PURE__ */ e(h, {}),
+    n === "toggle" && /* @__PURE__ */ e(
       h,
       {
-        className: a(
+        className: o(
           "table-selection-col",
           i === "radio" && "table-selection-col--radio"
         ),
-        children: n === "multiple" && /* @__PURE__ */ e(g, { slot: "selection", className: "table-selection-checkbox", children: /* @__PURE__ */ e(C, {}) })
+        children: c === "multiple" && /* @__PURE__ */ e(p, { slot: "selection", className: "table-selection-checkbox", children: /* @__PURE__ */ e(C, {}) })
       }
     ),
-    /* @__PURE__ */ e(p, { items: t, children: s })
+    /* @__PURE__ */ e(g, { items: t, children: s })
   ] });
 }
-function Q({
+function K({
   id: l,
   columns: t,
   children: s,
-  className: o,
-  ...c
+  className: a,
+  ...n
 }) {
-  const { selectionBehavior: n, allowsDragging: m } = f(), i = N(d), r = a(o, "table-row");
-  return /* @__PURE__ */ b(U, { id: l, ...c, className: r, children: [
-    m && /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(j, { slot: "drag", children: "≡" }) }),
-    n === "toggle" && /* @__PURE__ */ e(
+  const { selectionBehavior: c, allowsDragging: r } = f(), i = N(d), m = o(a, "table-row");
+  return /* @__PURE__ */ b(R, { id: l, ...n, className: m, children: [
+    r && /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(U, { slot: "drag", children: "≡" }) }),
+    c === "toggle" && /* @__PURE__ */ e(
       u,
       {
-        className: a(
+        className: o(
           "table-selection-cell",
           i === "radio" && "table-selection-cell--radio"
         ),
-        children: /* @__PURE__ */ e(g, { slot: "selection", className: "table-selection-checkbox", children: i === "radio" ? /* @__PURE__ */ e(S, {}) : /* @__PURE__ */ e(C, {}) })
+        children: /* @__PURE__ */ e(p, { slot: "selection", className: "table-selection-checkbox", children: i === "radio" ? /* @__PURE__ */ e(I, {}) : /* @__PURE__ */ e(C, {}) })
       }
     ),
-    /* @__PURE__ */ e(p, { items: t, children: s })
+    /* @__PURE__ */ e(g, { items: t, children: s })
   ] });
 }
 function u({
@@ -113,15 +111,15 @@ function u({
   className: t,
   ...s
 }) {
-  const o = a(t, "table-cell", `table-align-${l}`);
-  return /* @__PURE__ */ e(D, { className: o, ...s });
+  const a = o(t, "table-cell", `table-align-${l}`);
+  return /* @__PURE__ */ e(j, { className: a, ...s });
 }
 export {
-  G as Table,
-  J as TableBody,
+  E as Table,
+  G as TableBody,
   u as TableCell,
   h as TableColumn,
-  K as TableHead,
-  Q as TableRow
+  J as TableHead,
+  K as TableRow
 };
 //# sourceMappingURL=Table.js.map

package/dist/lib/ui/primitives/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport { Checkbox, Radio } from \"primitives\";\nimport { createContext, useContext, type CSSProperties } from \"react\";\nimport {\n  Button as RACButton,\n  Cell as RACCell,\n  Checkbox as RACSelectionCheckbox,\n  Collection as RACCollection,\n  Column as RACColumn,\n  Row as RACRow,\n  Table as RACTable,\n  TableBody as RACTableBody,\n  TableHeader as RACTableHeader,\n  useTableOptions,\n  type CellProps as RACCellProps,\n  type ColumnProps as RACColumnProps,\n  type RowProps as RACRowProps,\n  type TableBodyProps as RACTableBodyProps,\n  type TableHeaderProps as RACTableHeaderProps,\n  type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\n/**\n * Visual style of the built-in selection control rendered in the selection\n * column (header \"select all\" + per-row toggle). \"radio\" is for\n * `selectionMode=\"single\"` tables where a round, single-choice control reads\n * better than a checkbox — the header never renders a control either way\n * (there is no \"select all\" for a single choice).\n */\ntype SelectionType = \"checkbox\" | \"radio\";\nconst SelectionTypeContext = createContext<SelectionType>(\"checkbox\");\n\nfunction toCssLength(value: number | string): string {\n  const numericValue = Number(value);\n  const isUnitlessNumber =\n    `${value}`.trim() !== \"\" && Number.isFinite(numericValue);\n  return isUnitlessNumber ? `${numericValue}px` : `${value}`;\n}\n\nexport type TableProps = RACTableProps & {\n  bleed?: boolean;\n  dense?: boolean;\n  grid?: boolean;\n  striped?: boolean;\n  selectionType?: SelectionType;\n  maxHeight?: number | string;\n};\nexport function Table({\n  bleed = false,\n  dense = false,\n  grid = false,\n  striped = false,\n  selectionType = \"checkbox\",\n  maxHeight,\n  className,\n  ...props\n}: TableProps) {\n  const scrollsVertically = maxHeight !== undefined;\n  const containerClassNames = clsx(\n    className,\n    \"table-container\",\n    bleed && \"table-container-bleed\",\n    scrollsVertically && \"table-container-scrollable\",\n  );\n  const containerStyle = scrollsVertically\n    ? ({ \"--table-max-height\": toCssLength(maxHeight) } as CSSProperties)\n    : undefined;\n  const tableClassNames = clsx(\n    \"sds-table\",\n    bleed && \"table-bleed\",\n    dense && \"table-dense\",\n    grid && \"table-grid\",\n    striped && \"sds-table-striped\",\n  );\n  return (\n    <div className={containerClassNames} style={containerStyle}>\n      <SelectionTypeContext.Provider value={selectionType}>\n        <RACTable className={tableClassNames} {...props} />\n      </SelectionTypeContext.Provider>\n    </div>\n  );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n  align?: TableAlign;\n};\nexport function TableColumn({\n  align = \"start\",\n  className,\n  ...props\n}: TableColumnProps) {\n  const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n  return (\n    <RACColumn className={classNames} {...props}>\n      {({ allowsSorting, sortDirection }) => (\n        <div className={clsx(\"table-column-inner\")}>\n          <>\n            {props.children}\n            {allowsSorting && (\n              <span\n                aria-hidden=\"true\"\n                className={clsx(\n                  \"sort-indicator\",\n                  !sortDirection && \"sort-indicator-unsorted\",\n                )}\n              >\n                {sortDirection === \"descending\" ? (\n                  <IconChevronDown />\n                ) : (\n                  <IconChevronUp />\n                )}\n              </span>\n            )}\n          </>\n        </div>\n      )}\n    </RACColumn>\n  );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n  className,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n  className,\n  columns,\n  children,\n  ...props\n}: TableHeadProps<T>) {\n  const { selectionBehavior, selectionMode, allowsDragging } =\n    useTableOptions();\n  const selectionType = useContext(SelectionTypeContext);\n  const classNames = clsx(className, \"table-head\");\n  return (\n    <RACTableHeader className={classNames} {...props}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <TableColumn />}\n      {selectionBehavior === \"toggle\" && (\n        <TableColumn\n          className={clsx(\n            \"table-selection-col\",\n            selectionType === \"radio\" && \"table-selection-col--radio\",\n          )}\n        >\n          {selectionMode === \"multiple\" && (\n            <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n              <Checkbox />\n            </RACSelectionCheckbox>\n          )}\n        </TableColumn>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACTableHeader>\n  );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n  id,\n  columns,\n  children,\n  className,\n  ...otherProps\n}: TableRowProps<T>) {\n  const { selectionBehavior, allowsDragging } = useTableOptions();\n  const selectionType = useContext(SelectionTypeContext);\n  const classNames = clsx(className, \"table-row\");\n  return (\n    <RACRow id={id} {...otherProps} className={classNames}>\n      {allowsDragging && (\n        <TableCell>\n          <RACButton slot=\"drag\">≡</RACButton>\n        </TableCell>\n      )}\n      {selectionBehavior === \"toggle\" && (\n        <TableCell\n          className={clsx(\n            \"table-selection-cell\",\n            selectionType === \"radio\" && \"table-selection-cell--radio\",\n          )}\n        >\n          <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n            {selectionType === \"radio\" ? <Radio /> : <Checkbox />}\n          </RACSelectionCheckbox>\n        </TableCell>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACRow>\n  );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n  align = \"start\",\n  className,\n  ...props\n}: TableCellProps) {\n  const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n  return <RACCell className={classNames} {...props} />;\n}\n"],"names":["SelectionTypeContext","createContext","toCssLength","value","numericValue","Table","bleed","dense","grid","striped","selectionType","maxHeight","className","props","scrollsVertically","containerClassNames","clsx","containerStyle","tableClassNames","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsx","jsxs","Fragment","IconChevronDown","IconChevronUp","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","useContext","RACTableHeader","RACSelectionCheckbox","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","Radio","RACCell"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport { Checkbox, Radio } from \"primitives\";\nimport { createContext, useContext, type CSSProperties } from \"react\";\nimport {\n  Button as RACButton,\n  Cell as RACCell,\n  Checkbox as RACSelectionCheckbox,\n  Collection as RACCollection,\n  Column as RACColumn,\n  Row as RACRow,\n  Table as RACTable,\n  TableBody as RACTableBody,\n  TableHeader as RACTableHeader,\n  useTableOptions,\n  type CellProps as RACCellProps,\n  type ColumnProps as RACColumnProps,\n  type RowProps as RACRowProps,\n  type TableBodyProps as RACTableBodyProps,\n  type TableHeaderProps as RACTableHeaderProps,\n  type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\n/**\n * Visual style of the built-in selection control rendered in the selection\n * column (header \"select all\" + per-row toggle). \"radio\" is for\n * `selectionMode=\"single\"` tables where a round, single-choice control reads\n * better than a checkbox — the header never renders a control either way\n * (there is no \"select all\" for a single choice).\n */\ntype SelectionType = \"checkbox\" | \"radio\";\nconst SelectionTypeContext = createContext<SelectionType>(\"checkbox\");\n\nfunction toCssLength(value: number | string): string {\n  const numericValue = Number(value);\n  const isUnitlessNumber =\n    `${value}`.trim() !== \"\" && Number.isFinite(numericValue);\n  return isUnitlessNumber ? `${numericValue}px` : `${value}`;\n}\n\nexport type TableProps = RACTableProps & {\n  bleed?: boolean;\n  dense?: boolean;\n  striped?: boolean;\n  selectionType?: SelectionType;\n  maxHeight?: number | string;\n};\nexport function Table({\n  bleed = false,\n  dense = false,\n  striped = false,\n  selectionType = \"checkbox\",\n  maxHeight,\n  className,\n  ...props\n}: TableProps) {\n  const scrollsVertically = maxHeight !== undefined;\n  const containerClassNames = clsx(\n    className,\n    \"table-container\",\n    bleed && \"table-container-bleed\",\n    scrollsVertically && \"table-container-scrollable\",\n  );\n  const containerStyle = scrollsVertically\n    ? ({ \"--table-max-height\": toCssLength(maxHeight) } as CSSProperties)\n    : undefined;\n  const tableClassNames = clsx(\n    \"sds-table\",\n    bleed && \"table-bleed\",\n    dense && \"table-dense\",\n    striped && \"sds-table-striped\",\n  );\n  return (\n    <div className={containerClassNames} style={containerStyle}>\n      <SelectionTypeContext.Provider value={selectionType}>\n        <RACTable className={tableClassNames} {...props} />\n      </SelectionTypeContext.Provider>\n    </div>\n  );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n  align?: TableAlign;\n};\nexport function TableColumn({\n  align = \"start\",\n  className,\n  ...props\n}: TableColumnProps) {\n  const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n  return (\n    <RACColumn className={classNames} {...props}>\n      {({ allowsSorting, sortDirection }) => (\n        <div className={clsx(\"table-column-inner\")}>\n          <>\n            {props.children}\n            {allowsSorting && (\n              <span\n                aria-hidden=\"true\"\n                className={clsx(\n                  \"sort-indicator\",\n                  !sortDirection && \"sort-indicator-unsorted\",\n                )}\n              >\n                {sortDirection === \"descending\" ? (\n                  <IconChevronDown />\n                ) : (\n                  <IconChevronUp />\n                )}\n              </span>\n            )}\n          </>\n        </div>\n      )}\n    </RACColumn>\n  );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n  className,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n  className,\n  columns,\n  children,\n  ...props\n}: TableHeadProps<T>) {\n  const { selectionBehavior, selectionMode, allowsDragging } =\n    useTableOptions();\n  const selectionType = useContext(SelectionTypeContext);\n  const classNames = clsx(className, \"table-head\");\n  return (\n    <RACTableHeader className={classNames} {...props}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <TableColumn />}\n      {selectionBehavior === \"toggle\" && (\n        <TableColumn\n          className={clsx(\n            \"table-selection-col\",\n            selectionType === \"radio\" && \"table-selection-col--radio\",\n          )}\n        >\n          {selectionMode === \"multiple\" && (\n            <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n              <Checkbox />\n            </RACSelectionCheckbox>\n          )}\n        </TableColumn>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACTableHeader>\n  );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n  id,\n  columns,\n  children,\n  className,\n  ...otherProps\n}: TableRowProps<T>) {\n  const { selectionBehavior, allowsDragging } = useTableOptions();\n  const selectionType = useContext(SelectionTypeContext);\n  const classNames = clsx(className, \"table-row\");\n  return (\n    <RACRow id={id} {...otherProps} className={classNames}>\n      {allowsDragging && (\n        <TableCell>\n          <RACButton slot=\"drag\">≡</RACButton>\n        </TableCell>\n      )}\n      {selectionBehavior === \"toggle\" && (\n        <TableCell\n          className={clsx(\n            \"table-selection-cell\",\n            selectionType === \"radio\" && \"table-selection-cell--radio\",\n          )}\n        >\n          <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n            {selectionType === \"radio\" ? <Radio /> : <Checkbox />}\n          </RACSelectionCheckbox>\n        </TableCell>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACRow>\n  );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n  align = \"start\",\n  className,\n  ...props\n}: TableCellProps) {\n  const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n  return <RACCell className={classNames} {...props} />;\n}\n"],"names":["SelectionTypeContext","createContext","toCssLength","value","numericValue","Table","bleed","dense","striped","selectionType","maxHeight","className","props","scrollsVertically","containerClassNames","clsx","containerStyle","tableClassNames","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsx","jsxs","Fragment","IconChevronDown","IconChevronUp","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","useContext","RACTableHeader","RACSelectionCheckbox","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","Radio","RACCell"],"mappings":"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"}

package/dist/types/charts.index.d.ts

@@ -4,3 +4,4 @@ export * from "./ui/components/charts/ChartColorPicker/ChartColorPicker";
 export * from "./ui/components/charts/ChartLegend/ChartLegend";
 export * from "./ui/components/charts/PieChart/PieChart";
 export * from "./ui/components/charts/TimeSeriesChart/TimeSeriesChart";
+export * from "./ui/components/charts/TopList/TopList";

package/dist/types/ui/components/DataTable/DataTable.d.ts

@@ -49,8 +49,6 @@ export interface DataTableProps<T extends {
      * renders a round control instead of a checkbox.
      */
     selectionType?: "checkbox" | "radio";
-    /** When true, draws vertical lines between columns. Off by default. */
-    grid?: boolean;
     /** Controlled selection state. Omit to let the table manage its own selection internally. */
     selectedKeys?: Selection;
     onSelectionChange?: (keys: Selection) => void;
@@ -78,5 +76,5 @@ export interface DataTableProps<T extends {
 }
 export declare function DataTable<T extends {
     id: string;
-}>({ columns, data, actions, rowActions, rowActionsLabel, selectable, selectionType, grid, selectedKeys, onSelectionChange, defaultSortDescriptor, sortDescriptor: controlledSortDescriptor, onSortChange, searchPlaceholder, searchKeys, isLoading, loadingMessage, emptyMessage, previousLabel, nextLabel, pageSize, nestedColumns, getNestedData, nestedLoadingMessage, nestedEmptyMessage, nestedSearchKeys, nestedSearchPlaceholder, nestedActions, nestedPageSize, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ columns, data, actions, rowActions, rowActionsLabel, selectable, selectionType, selectedKeys, onSelectionChange, defaultSortDescriptor, sortDescriptor: controlledSortDescriptor, onSortChange, searchPlaceholder, searchKeys, isLoading, loadingMessage, emptyMessage, previousLabel, nextLabel, pageSize, nestedColumns, getNestedData, nestedLoadingMessage, nestedEmptyMessage, nestedSearchKeys, nestedSearchPlaceholder, nestedActions, nestedPageSize, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/ui/components/charts/PieChart/pie-chart-option.d.ts

@@ -9,5 +9,4 @@ export interface PieChartOptionInput {
     theme: ChartTheme;
     valueFormatter?: (value: number) => string;
 }
-export declare function formatShare(share: number): string;
 export declare function buildPieChartOption(input: PieChartOptionInput): Record<string, unknown>;

package/dist/types/ui/components/charts/TopList/TopList.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { type TopListItem, type TopListSort, type TopListValueDisplay } from "./top-list-option";
+import "./top-list.css";
+export type { TopListItem, TopListSort, TopListValueDisplay } from "./top-list-option";
+export type TopListProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
+    items: TopListItem[];
+    sort?: TopListSort;
+    total?: number;
+    valueDisplay?: TopListValueDisplay[];
+    valueFormatter?: (value: number) => string;
+    colorToken?: string;
+};
+export declare function TopList({ items, sort, total, valueDisplay, valueFormatter, colorToken, className, ...props }: TopListProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/components/charts/TopList/top-list-option.d.ts

@@ -0,0 +1,24 @@
+import type { ChartTheme } from "../chart-theme";
+export interface TopListItem {
+    id: string;
+    name: string;
+    value: number | null;
+    colorToken?: string;
+}
+export type TopListSort = "desc" | "asc";
+export type TopListValueDisplay = "value" | "percent";
+export interface TopListOptionInput {
+    items: TopListItem[];
+    sort: TopListSort;
+    total?: number;
+    valueDisplay: TopListValueDisplay[];
+    theme: ChartTheme;
+    colorsByItemId: Record<string, string>;
+    animate: boolean;
+    labeledRowStep: number;
+    valueFormatter?: (value: number) => string;
+}
+export declare function rankById(items: TopListItem[], sort: TopListSort): Map<string, number>;
+export declare function resolveTotal(items: TopListItem[], total?: number): number;
+export declare function labeledRowStepFor(canvasHeightPx: number, itemCount: number): number;
+export declare function buildTopListOption(input: TopListOptionInput): Record<string, unknown>;

package/dist/types/ui/components/charts/chart-share.d.ts

@@ -0,0 +1 @@
+export declare function formatShare(share: number): string;

package/dist/types/ui/primitives/Table/Table.d.ts

@@ -12,12 +12,11 @@ type SelectionType = "checkbox" | "radio";
 export type TableProps = RACTableProps & {
     bleed?: boolean;
     dense?: boolean;
-    grid?: boolean;
     striped?: boolean;
     selectionType?: SelectionType;
     maxHeight?: number | string;
 };
-export declare function Table({ bleed, dense, grid, striped, selectionType, maxHeight, className, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ bleed, dense, striped, selectionType, maxHeight, className, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
 export type TableColumnProps = RACColumnProps & {
     align?: TableAlign;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [