@optiaxiom/react 3.0.0 → 3.0.1

package/dist/esm/packages/react/src/data-table/DataTableExpandableCell.js

@@ -1,46 +1,51 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { IconAngleDown, IconChevronRight } from '@optiaxiom/icons';
-import { useId } from '@radix-ui/react-id';
-import clsx from 'clsx';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { Group } from '../group/Group.js';
-import { useDataTableRowContext } from './DataTableRowContext.js';
-
-function DataTableExpandableCell({
-  children,
-  getValue,
-  row
-}) {
-  const labelPrefixId = useId();
-  const { labelId } = useDataTableRowContext(
-    "@optiaxiom/react/DataTableExpandableCell"
-  );
-  return /* @__PURE__ */ jsxs(Group, { alignItems: "start", gap: "8", children: [
-    Array.from({ length: row.depth }).map((_, index) => /* @__PURE__ */ jsx(Box, { flex: "none", w: "sm" }, index)),
-    row.getCanExpand() ? /* @__PURE__ */ jsx(
-      Button,
-      {
-        appearance: "subtle",
-        "aria-expanded": row.getIsExpanded(),
-        "aria-label": "Toggle row",
-        "aria-labelledby": clsx(labelPrefixId, labelId),
-        flex: "none",
-        icon: row.getIsExpanded() ? /* @__PURE__ */ jsx(IconAngleDown, {}) : /* @__PURE__ */ jsx(IconChevronRight, {}),
-        id: labelPrefixId,
-        onClick: row.getToggleExpandedHandler(),
-        size: "sm",
-        style: { marginBlock: -2 },
-        type: "button"
-      }
-    ) : /* @__PURE__ */ jsx(Box, { flex: "none", w: "sm" }),
-    children ?? getValue()
-  ] });
+import { Box } from "../box/Box.js";
+import { Group } from "../group/Group.js";
+import { Button } from "../button/Button.js";
+import { useDataTableRowContext } from "./DataTableRowContext.js";
+import { IconAngleDown, IconChevronRight } from "@optiaxiom/icons";
+import { useId } from "@radix-ui/react-id";
+import "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/data-table/DataTableExpandableCell.tsx
+/**
+* Table cell component with expandable row functionality.
+*
+* @group DataTable
+* @experimental
+*/
+function DataTableExpandableCell({ children, getValue, row }) {
+	const labelPrefixId = useId();
+	const { labelId } = useDataTableRowContext("@optiaxiom/react/DataTableExpandableCell");
+	return /* @__PURE__ */ jsxs(Group, {
+		alignItems: "start",
+		gap: "8",
+		children: [
+			Array.from({ length: row.depth }).map((_, index) => /* @__PURE__ */ jsx(Box, {
+				flex: "none",
+				w: "sm"
+			}, index)),
+			row.getCanExpand() ? /* @__PURE__ */ jsx(Button, {
+				appearance: "subtle",
+				"aria-expanded": row.getIsExpanded(),
+				"aria-label": "Toggle row",
+				"aria-labelledby": clsx(labelPrefixId, labelId),
+				flex: "none",
+				icon: row.getIsExpanded() ? /* @__PURE__ */ jsx(IconAngleDown, {}) : /* @__PURE__ */ jsx(IconChevronRight, {}),
+				id: labelPrefixId,
+				onClick: row.getToggleExpandedHandler(),
+				size: "sm",
+				style: { marginBlock: -2 },
+				type: "button"
+			}) : /* @__PURE__ */ jsx(Box, {
+				flex: "none",
+				w: "sm"
+			}),
+			children ?? getValue()
+		]
+	});
 }
 DataTableExpandableCell.displayName = "@optiaxiom/react/DataTableExpandableCell";
-
+//#endregion
 export { DataTableExpandableCell };

package/dist/esm/packages/react/src/data-table/DataTableExpandableHeader.js

@@ -1,14 +1,20 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-
-function DataTableExpandableHeader({
-  children
-}) {
-  return /* @__PURE__ */ jsx(Box, { ml: "32", children });
+import { Box } from "../box/Box.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/data-table/DataTableExpandableHeader.tsx
+/**
+* Table header component for expandable columns.
+*
+* @group DataTable
+* @experimental
+*/
+function DataTableExpandableHeader({ children }) {
+	return /* @__PURE__ */ jsx(Box, {
+		ml: "32",
+		children
+	});
 }
 DataTableExpandableHeader.displayName = "@optiaxiom/react/DataTableExpandableHeader";
-
+//#endregion
 export { DataTableExpandableHeader };

package/dist/esm/packages/react/src/data-table/DataTableFooter-css.js

@@ -1,7 +1,13 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-Blk2SToB.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var addon$1 = recipeRuntime({base:'_1c9ufse',variants:{slot:{after:{textAlign:'end'},before:{}}}});
-
-export { addon$1 as addon };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-NLz6OMAp.css";
+//#region src/data-table/DataTableFooter.css.ts
+var addon = recipeRuntime({
+	base: "_1pzuyaq",
+	variants: { slot: {
+		after: { textAlign: "end" },
+		before: {}
+	} }
+});
+//#endregion
+export { addon };

package/dist/esm/packages/react/src/data-table/DataTableFooter.js

@@ -1,85 +1,82 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Group } from '../group/Group.js';
-import { Pagination } from '../pagination/Pagination.js';
-import { Select } from '../select/Select.js';
-import { SelectContent } from '../select/SelectContent.js';
-import { SelectTrigger } from '../select/SelectTrigger.js';
-import { Text } from '../text/Text.js';
-import { useDataTableContext } from './DataTableContext.js';
-import { addon } from './DataTableFooter-css.js';
-
-const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"].map((size) => ({
-  label: size,
-  value: size
+import { Box } from "../box/Box.js";
+import { Text } from "../text/Text.js";
+import { Group } from "../group/Group.js";
+import { useDataTableContext } from "./DataTableContext.js";
+import { Pagination } from "../pagination/Pagination.js";
+import { Select } from "../select/Select.js";
+import { SelectContent } from "../select/SelectContent.js";
+import { SelectTrigger } from "../select/SelectTrigger.js";
+import { addon } from "./DataTableFooter-css.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/data-table/DataTableFooter.tsx
+const DEFAULT_PAGE_SIZES = [
+	"10",
+	"20",
+	"30",
+	"50",
+	"100"
+].map((size) => ({
+	label: size,
+	value: size
 }));
-const DataTableFooter = forwardRef(
-  ({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
-    const { table } = useDataTableContext("@optiaxiom/react/DataTableFooter");
-    const { pagination } = table.getState();
-    const pageSizeId = useId();
-    return /* @__PURE__ */ jsxs(
-      Group,
-      {
-        alignSelf: "stretch",
-        fontSize: "md",
-        gap: "16",
-        justifyContent: "space-between",
-        mt: "auto",
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(Box, { ...addon({ slot: "before" }), children: showPageSizeOptions && /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
-            /* @__PURE__ */ jsx(Text, { color: "fg.secondary", id: pageSizeId, children: "Page Size" }),
-            /* @__PURE__ */ jsxs(
-              Select,
-              {
-                onValueChange: (value) => value && table.setPageSize(parseFloat(value)),
-                options: pageSizeOptions,
-                value: pagination.pageSize.toString(),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    SelectTrigger,
-                    {
-                      appearance: "subtle",
-                      "aria-labelledby": pageSizeId
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(SelectContent, {})
-                ]
-              }
-            )
-          ] }) }),
-          table.getPageCount() > 1 && /* @__PURE__ */ jsx(
-            Pagination,
-            {
-              onPageChange: (newPage) => table.setPageIndex(newPage - 1),
-              page: pagination.pageIndex + 1,
-              total: table.getPageCount()
-            }
-          ),
-          /* @__PURE__ */ jsx(Text, { ...addon({ slot: "after" }), children: table.getRowCount() > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            pagination.pageIndex * pagination.pageSize + 1,
-            " -",
-            " ",
-            Math.min(
-              (pagination.pageIndex + 1) * pagination.pageSize,
-              table.getRowCount()
-            ),
-            " ",
-            "of ",
-            table.getRowCount()
-          ] }) })
-        ]
-      }
-    );
-  }
-);
+/**
+* @group DataTable
+*/
+const DataTableFooter = forwardRef(({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
+	const { table } = useDataTableContext("@optiaxiom/react/DataTableFooter");
+	const { pagination } = table.getState();
+	const pageSizeId = useId();
+	return /* @__PURE__ */ jsxs(Group, {
+		alignSelf: "stretch",
+		fontSize: "md",
+		gap: "16",
+		justifyContent: "space-between",
+		mt: "auto",
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				...addon({ slot: "before" }),
+				children: showPageSizeOptions && /* @__PURE__ */ jsxs(Group, {
+					gap: "8",
+					children: [/* @__PURE__ */ jsx(Text, {
+						color: "fg.secondary",
+						id: pageSizeId,
+						children: "Page Size"
+					}), /* @__PURE__ */ jsxs(Select, {
+						onValueChange: (value) => value && table.setPageSize(parseFloat(value)),
+						options: pageSizeOptions,
+						value: pagination.pageSize.toString(),
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							appearance: "subtle",
+							"aria-labelledby": pageSizeId
+						}), /* @__PURE__ */ jsx(SelectContent, {})]
+					})]
+				})
+			}),
+			table.getPageCount() > 1 && /* @__PURE__ */ jsx(Pagination, {
+				onPageChange: (newPage) => table.setPageIndex(newPage - 1),
+				page: pagination.pageIndex + 1,
+				total: table.getPageCount()
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				...addon({ slot: "after" }),
+				children: table.getRowCount() > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					pagination.pageIndex * pagination.pageSize + 1,
+					" -",
+					" ",
+					Math.min((pagination.pageIndex + 1) * pagination.pageSize, table.getRowCount()),
+					" ",
+					"of ",
+					table.getRowCount()
+				] })
+			})
+		]
+	});
+});
 DataTableFooter.displayName = "@optiaxiom/react/DataTableFooter";
-
+//#endregion
 export { DataTableFooter };

package/dist/esm/packages/react/src/data-table/DataTableHeaderCell-css.js

@@ -1,9 +1,38 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-D3gkn1tF.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var button$3 = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',textTransform:'uppercase',transition:'colors',w:'full'},'ylnxno']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1wp8adz'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1sb6nvb'],variants:{active:{false:'_1ekb5hi',true:'_1mdq10s'}}});
-
-export { button$3 as button, handle, icon };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DVAXcaZJ.css";
+//#region src/data-table/DataTableHeaderCell.css.ts
+var button = recipeRuntime({ base: [{
+	alignItems: "center",
+	display: "flex",
+	gap: "4",
+	justifyContent: "flex-start",
+	rounded: "md",
+	textAlign: "start",
+	textTransform: "uppercase",
+	transition: "colors",
+	w: "full"
+}, "_1qoz8d"] });
+var handle = recipeRuntime({
+	base: [{
+		h: "full",
+		z: "10"
+	}, "_112l6sk"],
+	variants: { resizing: {
+		false: {},
+		true: { borderColor: "border.focus" }
+	} }
+});
+var icon = recipeRuntime({
+	base: [{
+		h: "12",
+		mx: "2",
+		transition: "opacity"
+	}, "_1b3ld5f"],
+	variants: { active: {
+		false: "_1pb86k5",
+		true: "_12zhtit"
+	} }
+});
+//#endregion
+export { button, handle, icon };

package/dist/esm/packages/react/src/data-table/DataTableHeaderCell.js

@@ -1,79 +1,81 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { ActionsContent } from '../actions/ActionsContent.js';
-import { ActionsRoot } from '../actions/ActionsRoot.js';
-import { Cover } from '../cover/Cover.js';
-import { Icon } from '../icon/Icon.js';
-import { IconSort } from '../icons/IconSort.js';
-import { IconSortDown } from '../icons/IconSortDown.js';
-import { IconSortUp } from '../icons/IconSortUp.js';
-import { Separator } from '../separator/Separator.js';
-import '../table/Table.js';
-import '../table/TableAction.js';
-import '../table/TableBody.js';
-import '../table/TableCell.js';
-import '../table/TableHeader.js';
-import { TableHeaderCell } from '../table/TableHeaderCell.js';
-import '../table/TableRow.js';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { handle, icon, button } from './DataTableHeaderCell-css.js';
-
+import { Icon } from "../icon/Icon.js";
+import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { Separator } from "../separator/Separator.js";
+import { Cover } from "../cover/Cover.js";
+import { ActionsContent } from "../actions/ActionsContent.js";
+import { ActionsRoot } from "../actions/ActionsRoot.js";
+import { TableHeaderCell } from "../table/TableHeaderCell.js";
+import { IconSort } from "../icons/IconSort.js";
+import { IconSortDown } from "../icons/IconSortDown.js";
+import { IconSortUp } from "../icons/IconSortUp.js";
+import { button, handle, icon } from "./DataTableHeaderCell-css.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "@tanstack/react-table";
+//#region src/data-table/DataTableHeaderCell.tsx
+/**
+* Table header cell with sorting and resizing functionality.
+*
+* @group DataTable
+* @experimental
+*/
 const DataTableHeaderCell = forwardRef(({ children, header, ...props }, ref) => {
-  const sortDir = header.column.getIsSorted();
-  return /* @__PURE__ */ jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxs(
-    TableHeaderCell,
-    {
-      "aria-sort": header.column.getCanSort() ? sortDir === false ? "none" : sortDir === "asc" ? "ascending" : "descending" : void 0,
-      colSpan: header.colSpan,
-      ref,
-      ...props,
-      children: [
-        header.column.getCanResize() && /* @__PURE__ */ jsx(
-          ActionsContent,
-          {
-            visible: header.column.getIsResizing() ? "always" : "if-needed",
-            children: /* @__PURE__ */ jsx(
-              Separator,
-              {
-                onDoubleClick: () => header.column.resetSize(),
-                onMouseDown: header.getResizeHandler(),
-                onTouchStart: header.getResizeHandler(),
-                orientation: "vertical",
-                style: {
-                  transform: header.getContext().table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${header.getContext().table.getState().columnSizingInfo.deltaOffset}px)` : ""
-                },
-                ...handle({
-                  resizing: header.column.getIsResizing()
-                })
-              }
-            )
-          }
-        ),
-        header.column.getCanSort() ? /* @__PURE__ */ jsx(Cover, { asChild: true, inset: true, ...button(), children: /* @__PURE__ */ jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
-          children,
-          sortDir && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
-            "sorted ",
-            sortDir === "asc" ? "ascending" : "descending"
-          ] }),
-          /* @__PURE__ */ jsxs(
-            ActionsContent,
-            {
-              display: "grid",
-              placeItems: "center",
-              visible: sortDir ? "always" : "if-needed",
-              children: [
-                /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === false }), children: /* @__PURE__ */ jsx(IconSort, {}) }),
-                /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "asc" }), children: /* @__PURE__ */ jsx(IconSortUp, {}) }),
-                /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "desc" }), children: /* @__PURE__ */ jsx(IconSortDown, {}) })
-              ]
-            }
-          )
-        ] }) }) : children
-      ]
-    }
-  ) });
+	const sortDir = header.column.getIsSorted();
+	return /* @__PURE__ */ jsx(ActionsRoot, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(TableHeaderCell, {
+			"aria-sort": header.column.getCanSort() ? sortDir === false ? "none" : sortDir === "asc" ? "ascending" : "descending" : void 0,
+			colSpan: header.colSpan,
+			ref,
+			...props,
+			children: [header.column.getCanResize() && /* @__PURE__ */ jsx(ActionsContent, {
+				visible: header.column.getIsResizing() ? "always" : "if-needed",
+				children: /* @__PURE__ */ jsx(Separator, {
+					onDoubleClick: () => header.column.resetSize(),
+					onMouseDown: header.getResizeHandler(),
+					onTouchStart: header.getResizeHandler(),
+					orientation: "vertical",
+					style: { transform: header.getContext().table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${header.getContext().table.getState().columnSizingInfo.deltaOffset}px)` : "" },
+					...handle({ resizing: header.column.getIsResizing() })
+				})
+			}), header.column.getCanSort() ? /* @__PURE__ */ jsx(Cover, {
+				asChild: true,
+				inset: true,
+				...button(),
+				children: /* @__PURE__ */ jsxs("button", {
+					onClick: () => header.column.toggleSorting(),
+					children: [
+						children,
+						sortDir && /* @__PURE__ */ jsxs(VisuallyHidden, { children: ["sorted ", sortDir === "asc" ? "ascending" : "descending"] }),
+						/* @__PURE__ */ jsxs(ActionsContent, {
+							display: "grid",
+							placeItems: "center",
+							visible: sortDir ? "always" : "if-needed",
+							children: [
+								/* @__PURE__ */ jsx(Icon, {
+									asChild: true,
+									...icon({ active: sortDir === false }),
+									children: /* @__PURE__ */ jsx(IconSort, {})
+								}),
+								/* @__PURE__ */ jsx(Icon, {
+									asChild: true,
+									...icon({ active: sortDir === "asc" }),
+									children: /* @__PURE__ */ jsx(IconSortUp, {})
+								}),
+								/* @__PURE__ */ jsx(Icon, {
+									asChild: true,
+									...icon({ active: sortDir === "desc" }),
+									children: /* @__PURE__ */ jsx(IconSortDown, {})
+								})
+							]
+						})
+					]
+				})
+			}) : children]
+		})
+	});
 });
 DataTableHeaderCell.displayName = "@optiaxiom/react/DataTableHeaderCell";
-
+//#endregion
 export { DataTableHeaderCell };

package/dist/esm/packages/react/src/data-table/DataTableLabel.js

@@ -1,19 +1,20 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { useDataTableRowContext } from './DataTableRowContext.js';
-
-const DataTableLabel = forwardRef(
-  (props, ref) => {
-    const { labelId } = useDataTableRowContext(
-      "@optiaxiom/react/DataTableLabel"
-    );
-    return /* @__PURE__ */ jsx(Box, { id: labelId, ref, ...props });
-  }
-);
+import { Box } from "../box/Box.js";
+import { useDataTableRowContext } from "./DataTableRowContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/data-table/DataTableLabel.tsx
+/**
+* @group DataTable
+*/
+const DataTableLabel = forwardRef((props, ref) => {
+	const { labelId } = useDataTableRowContext("@optiaxiom/react/DataTableLabel");
+	return /* @__PURE__ */ jsx(Box, {
+		id: labelId,
+		ref,
+		...props
+	});
+});
 DataTableLabel.displayName = "@optiaxiom/react/DataTableLabel";
-
+//#endregion
 export { DataTableLabel };