@moneyforward/mfui-components 3.7.0 → 3.8.0

package/dist/src/MainNavigation/NarrowViewportMainNavigation.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DisclosureBasicCollapsed, DisclosureBasicExpanded, Lock } from '@moneyforward/mfui-icons-react';
-import { forwardRef, useImperativeHandle, useRef, useState, useEffect } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState, useEffect, useId } from 'react';
 import { cx } from '../../styled-system/css';
 import { FocusIndicator } from '../FocusIndicator';
 import { Typography } from '../Typography';
@@ -16,6 +16,7 @@ import { Portal } from '../Portal';
 export const NarrowViewportMainNavigation = forwardRef(({ className, featureShortcut, navigationItems, width = 'normal', customLinkComponent }, ref) => {
     const classes = narrowViewportMainNavigationSlotRecipe({ width });
     const InternalLinkTag = customLinkComponent ?? 'a';
+    const navId = useId();
     const hasCurrentNavigationInChildren = (children) => children?.some((child) => child.isCurrent);
     const dialogRef = useRef(null);
     const [openState, setOpenState] = useState(false);
@@ -47,5 +48,19 @@ export const NarrowViewportMainNavigation = forwardRef(({ className, featureShor
     }
     return (_jsx(Portal, { children: _jsxs("div", { ref: dialogRef, role: "dialog", className: cx(classes.root, 'mfui-NarrowViewportMainNavigation__root', className), tabIndex: -1, onKeyDown: handleOnKeyDown, children: [_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-NarrowViewportMainNavigation__backdrop'), onClick: handleCloseMainNavigation }), _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.container, 'mfui-NarrowViewportMainNavigation__container'), onClick: (event) => {
                         event.stopPropagation();
-                    }, children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsx("nav", { className: cx(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: _jsx("ul", { className: cx(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? (_jsxs("details", { open: navigation.isOpenByDefault || hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-NarrowViewportMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-NarrowViewportMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-NarrowViewportMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-NarrowViewportMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-NarrowViewportMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-NarrowViewportMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) : (_jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null] }) }) })) }, index))) }) })] })] }) }));
+                    }, children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsxs("nav", { className: cx(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: [_jsx("ul", { className: cx(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => {
+                                        const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
+                                        if (isGroupLabel) {
+                                            return null;
+                                        }
+                                        return (_jsx("li", { className: cx(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? (_jsxs("details", { open: ('isOpenByDefault' in navigation && navigation.isOpenByDefault) ||
+                                                    hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-NarrowViewportMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-NarrowViewportMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-NarrowViewportMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-NarrowViewportMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-NarrowViewportMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-NarrowViewportMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) : (_jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null] }) }) })) }, index));
+                                    }) }), navigationItems.map((navigation, index) => {
+                                    const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
+                                    if (!isGroupLabel) {
+                                        return null;
+                                    }
+                                    const groupLabelId = `${navId}-group-label-${String(index)}`;
+                                    return (_jsxs("div", { className: cx(classes.groupLabelSection, 'mfui-NarrowViewportMainNavigation__groupLabelSection'), children: [_jsx("div", { className: cx(classes.groupLabel, 'mfui-NarrowViewportMainNavigation__groupLabel'), children: _jsx(Typography, { id: groupLabelId, variant: "condensedControlLabel", className: cx(classes.groupLabelText, 'mfui-NarrowViewportMainNavigation__groupLabelText'), children: navigation.label }) }), _jsx("ul", { "aria-labelledby": groupLabelId, className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: child.icon }), _jsx(Typography, { variant: "controlLabel", children: child.label })] }), child.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": child.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, child.statusSlot && child.locked !== true ? child.statusSlot : null] }) }) }) }, childIndex))) })] }, index));
+                                })] })] })] }) }));
 });

package/dist/src/index.d.ts

@@ -25,6 +25,7 @@ export * from './ToggleSwitch';
 export * from './Pagination';
 export * from './Tag';
 export * from './ProgressIndicator';
+export * from './DataTable';
 export * from './DataGrid';
 export * from './SubNavigation';
 export * from './Tabs';

package/dist/src/index.js

@@ -25,6 +25,7 @@ export * from './ToggleSwitch';
 export * from './Pagination';
 export * from './Tag';
 export * from './ProgressIndicator';
+export * from './DataTable';
 export * from './DataGrid';
 export * from './SubNavigation';
 export * from './Tabs';

package/dist/src/utilities/dom/useFixedColumns.d.ts

@@ -41,7 +41,7 @@ type UseFixedColumnsReturn = {
     };
 };
 /**
- * A hook to calculate the position of fixed columns in the DataGrid component.
+ * A hook to calculate the position of fixed columns in the DataTable component.
  */
 export declare const useFixedColumns: ({ enableRowSelection, columnIndex, leftFixedColumnIndex, rightFixedColumnIndex, }: UseFixedColumnsProps) => UseFixedColumnsReturn;
 export {};

package/dist/src/utilities/dom/useFixedColumns.js

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 /**
- * A hook to calculate the position of fixed columns in the DataGrid component.
+ * A hook to calculate the position of fixed columns in the DataTable component.
  */
 export const useFixedColumns = ({ enableRowSelection = false, columnIndex, leftFixedColumnIndex, rightFixedColumnIndex, }) => {
     const cellRef = useRef(null);

package/dist/src/utilities/react/isComponentOrWrapped.d.ts

@@ -31,24 +31,24 @@
  * // In Children.map
  * Children.map(children, (child) => {
  *   if (!isValidElement(child)) return child;
- *   if (isComponentOrWrapped(child, DataGridCell)) {
+ *   if (isComponentOrWrapped(child, DataTableCell)) {
  *     return cloneElement(child, { ...additionalProps });
  *   }
  *   return child;
  * });
  *
  * // Creating a wrapper component (recommended approach)
- * const WrappedDataGridCell = (props) => {
- *   return <DataGridCell {...props} customProp="value" />;
+ * const WrappedDataTableCell = (props) => {
+ *   return <DataTableCell {...props} customProp="value" />;
  * };
- * WrappedDataGridCell.displayName = 'DataGridCell'; // Recommended for detection
+ * WrappedDataTableCell.displayName = 'DataTableCell'; // Recommended for detection
  *
  * // Wrapper with hooks (displayName is required)
- * const WrappedDataGridCellWithHooks = (props) => {
+ * const WrappedDataTableCellWithHooks = (props) => {
  *   const [state, setState] = useState(initialState);
- *   return <DataGridCell {...props} state={state} />;
+ *   return <DataTableCell {...props} state={state} />;
  * };
- * WrappedDataGridCellWithHooks.displayName = 'DataGridCell'; // Required to avoid hooks error
+ * WrappedDataTableCellWithHooks.displayName = 'DataTableCell'; // Required to avoid hooks error
  * ```
  */
 export declare function isComponentOrWrapped<P = unknown>(element: React.ReactElement, targetComponent: React.ComponentType<P>): boolean;

package/dist/src/utilities/react/isComponentOrWrapped.js

@@ -32,24 +32,24 @@ import { isValidElement } from 'react';
  * // In Children.map
  * Children.map(children, (child) => {
  *   if (!isValidElement(child)) return child;
- *   if (isComponentOrWrapped(child, DataGridCell)) {
+ *   if (isComponentOrWrapped(child, DataTableCell)) {
  *     return cloneElement(child, { ...additionalProps });
  *   }
  *   return child;
  * });
  *
  * // Creating a wrapper component (recommended approach)
- * const WrappedDataGridCell = (props) => {
- *   return <DataGridCell {...props} customProp="value" />;
+ * const WrappedDataTableCell = (props) => {
+ *   return <DataTableCell {...props} customProp="value" />;
  * };
- * WrappedDataGridCell.displayName = 'DataGridCell'; // Recommended for detection
+ * WrappedDataTableCell.displayName = 'DataTableCell'; // Recommended for detection
  *
  * // Wrapper with hooks (displayName is required)
- * const WrappedDataGridCellWithHooks = (props) => {
+ * const WrappedDataTableCellWithHooks = (props) => {
  *   const [state, setState] = useState(initialState);
- *   return <DataGridCell {...props} state={state} />;
+ *   return <DataTableCell {...props} state={state} />;
  * };
- * WrappedDataGridCellWithHooks.displayName = 'DataGridCell'; // Required to avoid hooks error
+ * WrappedDataTableCellWithHooks.displayName = 'DataTableCell'; // Required to avoid hooks error
  * ```
  */
 export function isComponentOrWrapped(element, targetComponent) {

package/dist/styled-system/recipes/base-main-navigation-slot-recipe.d.ts

@@ -11,7 +11,7 @@ type BaseMainNavigationSlotRecipeVariantMap = {
   [key in keyof BaseMainNavigationSlotRecipeVariant]: Array<BaseMainNavigationSlotRecipeVariant[key]>
 }
 
-type BaseMainNavigationSlotRecipeSlot = "root" | "nav" | "list" | "featureShortcut" | "featureShortcutAnchor" | "labelGroup" | "iconAndLabel" | "lockIcon" | "listItem" | "listItemTooltip" | "listItemAnchor" | "listItemAnchorIcon" | "parentDetails" | "parentSummary" | "parentSummaryIcon" | "childrenList" | "childrenListItem" | "childrenListItemAnchor" | "popoverChildrenList" | "footer" | "toggleButton" | "toggleButtonIcon"
+type BaseMainNavigationSlotRecipeSlot = "root" | "nav" | "list" | "featureShortcut" | "featureShortcutAnchor" | "labelGroup" | "iconAndLabel" | "lockIcon" | "listItem" | "listItemTooltip" | "listItemAnchor" | "listItemAnchorIcon" | "parentDetails" | "parentSummary" | "parentSummaryIcon" | "groupLabelSection" | "groupLabel" | "groupLabelText" | "childrenList" | "childrenListItem" | "childrenListItemAnchor" | "popoverChildrenList" | "footer" | "toggleButton" | "toggleButtonIcon"
 
 export type BaseMainNavigationSlotRecipeVariantProps = {
   [key in keyof BaseMainNavigationSlotRecipeVariant]?: ConditionalValue<BaseMainNavigationSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/base-main-navigation-slot-recipe.js

@@ -63,6 +63,18 @@ const baseMainNavigationSlotRecipeSlotNames = [
         "parentSummaryIcon",
         "BaseMainNavigation__parentSummaryIcon"
     ],
+    [
+        "groupLabelSection",
+        "BaseMainNavigation__groupLabelSection"
+    ],
+    [
+        "groupLabel",
+        "BaseMainNavigation__groupLabel"
+    ],
+    [
+        "groupLabelText",
+        "BaseMainNavigation__groupLabelText"
+    ],
     [
         "childrenList",
         "BaseMainNavigation__childrenList"

package/dist/styled-system/recipes/data-table-body-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DataTableBodySlotRecipeVariant {
+  
+}
+
+type DataTableBodySlotRecipeVariantMap = {
+  [key in keyof DataTableBodySlotRecipeVariant]: Array<DataTableBodySlotRecipeVariant[key]>
+}
+
+type DataTableBodySlotRecipeSlot = "root"
+
+export type DataTableBodySlotRecipeVariantProps = {
+  [key in keyof DataTableBodySlotRecipeVariant]?: ConditionalValue<DataTableBodySlotRecipeVariant[key]> | undefined
+}
+
+export interface DataTableBodySlotRecipeRecipe {
+  __slot: DataTableBodySlotRecipeSlot
+  __type: DataTableBodySlotRecipeVariantProps
+  (props?: DataTableBodySlotRecipeVariantProps): Pretty<Record<DataTableBodySlotRecipeSlot, string>>
+  raw: (props?: DataTableBodySlotRecipeVariantProps) => DataTableBodySlotRecipeVariantProps
+  variantMap: DataTableBodySlotRecipeVariantMap
+  variantKeys: Array<keyof DataTableBodySlotRecipeVariant>
+  splitVariantProps<Props extends DataTableBodySlotRecipeVariantProps>(props: Props): [DataTableBodySlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DataTableBodySlotRecipeVariantProps>>]
+  getVariantProps: (props?: DataTableBodySlotRecipeVariantProps) => DataTableBodySlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DataTableBody component.
+ */
+export declare const dataTableBodySlotRecipe: DataTableBodySlotRecipeRecipe

package/dist/styled-system/recipes/data-table-body-slot-recipe.js

@@ -0,0 +1,28 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const dataTableBodySlotRecipeDefaultVariants = {};
+const dataTableBodySlotRecipeCompoundVariants = [];
+const dataTableBodySlotRecipeSlotNames = [
+    [
+        "root",
+        "DataTableBody__root"
+    ]
+];
+const dataTableBodySlotRecipeSlotFns = /* @__PURE__ */ dataTableBodySlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableBodySlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableBodySlotRecipeCompoundVariants, slotName))]);
+const dataTableBodySlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(dataTableBodySlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const dataTableBodySlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...dataTableBodySlotRecipeDefaultVariants, ...compact(variants) });
+export const dataTableBodySlotRecipe = /* @__PURE__ */ Object.assign(dataTableBodySlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'dataTableBodySlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: dataTableBodySlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, dataTableBodySlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/data-table-cell-slot-recipe.d.ts

@@ -0,0 +1,38 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DataTableCellSlotRecipeVariant {
+  size: "small" | "medium"
+isCheckboxCell: boolean
+rowHighlighted: boolean
+fixedColumn: boolean
+edgeFixedColumn: "left" | "right"
+type: "text" | "amount"
+}
+
+type DataTableCellSlotRecipeVariantMap = {
+  [key in keyof DataTableCellSlotRecipeVariant]: Array<DataTableCellSlotRecipeVariant[key]>
+}
+
+type DataTableCellSlotRecipeSlot = "root" | "defaultCell" | "interactiveCell" | "disclosureIconWrapper" | "disclosureSpacing" | "skeletonCell"
+
+export type DataTableCellSlotRecipeVariantProps = {
+  [key in keyof DataTableCellSlotRecipeVariant]?: ConditionalValue<DataTableCellSlotRecipeVariant[key]> | undefined
+}
+
+export interface DataTableCellSlotRecipeRecipe {
+  __slot: DataTableCellSlotRecipeSlot
+  __type: DataTableCellSlotRecipeVariantProps
+  (props?: DataTableCellSlotRecipeVariantProps): Pretty<Record<DataTableCellSlotRecipeSlot, string>>
+  raw: (props?: DataTableCellSlotRecipeVariantProps) => DataTableCellSlotRecipeVariantProps
+  variantMap: DataTableCellSlotRecipeVariantMap
+  variantKeys: Array<keyof DataTableCellSlotRecipeVariant>
+  splitVariantProps<Props extends DataTableCellSlotRecipeVariantProps>(props: Props): [DataTableCellSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DataTableCellSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DataTableCellSlotRecipeVariantProps) => DataTableCellSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DataTableCell component.
+ */
+export declare const dataTableCellSlotRecipe: DataTableCellSlotRecipeRecipe

package/dist/styled-system/recipes/data-table-cell-slot-recipe.js

@@ -0,0 +1,77 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const dataTableCellSlotRecipeDefaultVariants = {};
+const dataTableCellSlotRecipeCompoundVariants = [];
+const dataTableCellSlotRecipeSlotNames = [
+    [
+        "root",
+        "DataTableCell__root"
+    ],
+    [
+        "defaultCell",
+        "DataTableCell__defaultCell"
+    ],
+    [
+        "interactiveCell",
+        "DataTableCell__interactiveCell"
+    ],
+    [
+        "disclosureIconWrapper",
+        "DataTableCell__disclosureIconWrapper"
+    ],
+    [
+        "disclosureSpacing",
+        "DataTableCell__disclosureSpacing"
+    ],
+    [
+        "skeletonCell",
+        "DataTableCell__skeletonCell"
+    ]
+];
+const dataTableCellSlotRecipeSlotFns = /* @__PURE__ */ dataTableCellSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableCellSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableCellSlotRecipeCompoundVariants, slotName))]);
+const dataTableCellSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(dataTableCellSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const dataTableCellSlotRecipeVariantKeys = [
+    "size",
+    "isCheckboxCell",
+    "rowHighlighted",
+    "fixedColumn",
+    "edgeFixedColumn",
+    "type"
+];
+const getVariantProps = (variants) => ({ ...dataTableCellSlotRecipeDefaultVariants, ...compact(variants) });
+export const dataTableCellSlotRecipe = /* @__PURE__ */ Object.assign(dataTableCellSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'dataTableCellSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: dataTableCellSlotRecipeVariantKeys,
+    variantMap: {
+        "size": [
+            "small",
+            "medium"
+        ],
+        "isCheckboxCell": [
+            "true"
+        ],
+        "rowHighlighted": [
+            "true"
+        ],
+        "fixedColumn": [
+            "true"
+        ],
+        "edgeFixedColumn": [
+            "left",
+            "right"
+        ],
+        "type": [
+            "text",
+            "amount"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, dataTableCellSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/data-table-header-cell-slot-recipe.d.ts

@@ -0,0 +1,37 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DataTableHeaderCellSlotRecipeVariant {
+  size: "small" | "medium"
+fixedColumn: boolean
+edgeFixedColumn: "left" | "right"
+isCheckboxCell: boolean
+type: "text" | "amount"
+}
+
+type DataTableHeaderCellSlotRecipeVariantMap = {
+  [key in keyof DataTableHeaderCellSlotRecipeVariant]: Array<DataTableHeaderCellSlotRecipeVariant[key]>
+}
+
+type DataTableHeaderCellSlotRecipeSlot = "root" | "headerCell" | "sortButton" | "sortIconContainer" | "sortIcon" | "unsortedIcon"
+
+export type DataTableHeaderCellSlotRecipeVariantProps = {
+  [key in keyof DataTableHeaderCellSlotRecipeVariant]?: ConditionalValue<DataTableHeaderCellSlotRecipeVariant[key]> | undefined
+}
+
+export interface DataTableHeaderCellSlotRecipeRecipe {
+  __slot: DataTableHeaderCellSlotRecipeSlot
+  __type: DataTableHeaderCellSlotRecipeVariantProps
+  (props?: DataTableHeaderCellSlotRecipeVariantProps): Pretty<Record<DataTableHeaderCellSlotRecipeSlot, string>>
+  raw: (props?: DataTableHeaderCellSlotRecipeVariantProps) => DataTableHeaderCellSlotRecipeVariantProps
+  variantMap: DataTableHeaderCellSlotRecipeVariantMap
+  variantKeys: Array<keyof DataTableHeaderCellSlotRecipeVariant>
+  splitVariantProps<Props extends DataTableHeaderCellSlotRecipeVariantProps>(props: Props): [DataTableHeaderCellSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DataTableHeaderCellSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DataTableHeaderCellSlotRecipeVariantProps) => DataTableHeaderCellSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DataTableHeaderCell component.
+ */
+export declare const dataTableHeaderCellSlotRecipe: DataTableHeaderCellSlotRecipeRecipe

package/dist/styled-system/recipes/data-table-header-cell-slot-recipe.js

@@ -0,0 +1,73 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const dataTableHeaderCellSlotRecipeDefaultVariants = {};
+const dataTableHeaderCellSlotRecipeCompoundVariants = [];
+const dataTableHeaderCellSlotRecipeSlotNames = [
+    [
+        "root",
+        "DataTableHeaderCell__root"
+    ],
+    [
+        "headerCell",
+        "DataTableHeaderCell__headerCell"
+    ],
+    [
+        "sortButton",
+        "DataTableHeaderCell__sortButton"
+    ],
+    [
+        "sortIconContainer",
+        "DataTableHeaderCell__sortIconContainer"
+    ],
+    [
+        "sortIcon",
+        "DataTableHeaderCell__sortIcon"
+    ],
+    [
+        "unsortedIcon",
+        "DataTableHeaderCell__unsortedIcon"
+    ]
+];
+const dataTableHeaderCellSlotRecipeSlotFns = /* @__PURE__ */ dataTableHeaderCellSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableHeaderCellSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableHeaderCellSlotRecipeCompoundVariants, slotName))]);
+const dataTableHeaderCellSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(dataTableHeaderCellSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const dataTableHeaderCellSlotRecipeVariantKeys = [
+    "size",
+    "fixedColumn",
+    "edgeFixedColumn",
+    "isCheckboxCell",
+    "type"
+];
+const getVariantProps = (variants) => ({ ...dataTableHeaderCellSlotRecipeDefaultVariants, ...compact(variants) });
+export const dataTableHeaderCellSlotRecipe = /* @__PURE__ */ Object.assign(dataTableHeaderCellSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'dataTableHeaderCellSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: dataTableHeaderCellSlotRecipeVariantKeys,
+    variantMap: {
+        "size": [
+            "small",
+            "medium"
+        ],
+        "fixedColumn": [
+            "true"
+        ],
+        "edgeFixedColumn": [
+            "left",
+            "right"
+        ],
+        "isCheckboxCell": [
+            "true"
+        ],
+        "type": [
+            "text",
+            "amount"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, dataTableHeaderCellSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/data-table-header-row-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DataTableHeaderRowSlotRecipeVariant {
+  
+}
+
+type DataTableHeaderRowSlotRecipeVariantMap = {
+  [key in keyof DataTableHeaderRowSlotRecipeVariant]: Array<DataTableHeaderRowSlotRecipeVariant[key]>
+}
+
+type DataTableHeaderRowSlotRecipeSlot = "root"
+
+export type DataTableHeaderRowSlotRecipeVariantProps = {
+  [key in keyof DataTableHeaderRowSlotRecipeVariant]?: ConditionalValue<DataTableHeaderRowSlotRecipeVariant[key]> | undefined
+}
+
+export interface DataTableHeaderRowSlotRecipeRecipe {
+  __slot: DataTableHeaderRowSlotRecipeSlot
+  __type: DataTableHeaderRowSlotRecipeVariantProps
+  (props?: DataTableHeaderRowSlotRecipeVariantProps): Pretty<Record<DataTableHeaderRowSlotRecipeSlot, string>>
+  raw: (props?: DataTableHeaderRowSlotRecipeVariantProps) => DataTableHeaderRowSlotRecipeVariantProps
+  variantMap: DataTableHeaderRowSlotRecipeVariantMap
+  variantKeys: Array<keyof DataTableHeaderRowSlotRecipeVariant>
+  splitVariantProps<Props extends DataTableHeaderRowSlotRecipeVariantProps>(props: Props): [DataTableHeaderRowSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DataTableHeaderRowSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DataTableHeaderRowSlotRecipeVariantProps) => DataTableHeaderRowSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DataTableHeaderRow component.
+ */
+export declare const dataTableHeaderRowSlotRecipe: DataTableHeaderRowSlotRecipeRecipe

package/dist/styled-system/recipes/data-table-header-row-slot-recipe.js

@@ -0,0 +1,28 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const dataTableHeaderRowSlotRecipeDefaultVariants = {};
+const dataTableHeaderRowSlotRecipeCompoundVariants = [];
+const dataTableHeaderRowSlotRecipeSlotNames = [
+    [
+        "root",
+        "DataTableHeaderRow__root"
+    ]
+];
+const dataTableHeaderRowSlotRecipeSlotFns = /* @__PURE__ */ dataTableHeaderRowSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableHeaderRowSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableHeaderRowSlotRecipeCompoundVariants, slotName))]);
+const dataTableHeaderRowSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(dataTableHeaderRowSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const dataTableHeaderRowSlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...dataTableHeaderRowSlotRecipeDefaultVariants, ...compact(variants) });
+export const dataTableHeaderRowSlotRecipe = /* @__PURE__ */ Object.assign(dataTableHeaderRowSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'dataTableHeaderRowSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: dataTableHeaderRowSlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, dataTableHeaderRowSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/data-table-header-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DataTableHeaderSlotRecipeVariant {
+  fixedHeader: boolean
+}
+
+type DataTableHeaderSlotRecipeVariantMap = {
+  [key in keyof DataTableHeaderSlotRecipeVariant]: Array<DataTableHeaderSlotRecipeVariant[key]>
+}
+
+type DataTableHeaderSlotRecipeSlot = "root"
+
+export type DataTableHeaderSlotRecipeVariantProps = {
+  [key in keyof DataTableHeaderSlotRecipeVariant]?: ConditionalValue<DataTableHeaderSlotRecipeVariant[key]> | undefined
+}
+
+export interface DataTableHeaderSlotRecipeRecipe {
+  __slot: DataTableHeaderSlotRecipeSlot
+  __type: DataTableHeaderSlotRecipeVariantProps
+  (props?: DataTableHeaderSlotRecipeVariantProps): Pretty<Record<DataTableHeaderSlotRecipeSlot, string>>
+  raw: (props?: DataTableHeaderSlotRecipeVariantProps) => DataTableHeaderSlotRecipeVariantProps
+  variantMap: DataTableHeaderSlotRecipeVariantMap
+  variantKeys: Array<keyof DataTableHeaderSlotRecipeVariant>
+  splitVariantProps<Props extends DataTableHeaderSlotRecipeVariantProps>(props: Props): [DataTableHeaderSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DataTableHeaderSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DataTableHeaderSlotRecipeVariantProps) => DataTableHeaderSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DataTableHeader component.
+ */
+export declare const dataTableHeaderSlotRecipe: DataTableHeaderSlotRecipeRecipe

package/dist/styled-system/recipes/data-table-header-slot-recipe.js

@@ -0,0 +1,35 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const dataTableHeaderSlotRecipeDefaultVariants = {};
+const dataTableHeaderSlotRecipeCompoundVariants = [];
+const dataTableHeaderSlotRecipeSlotNames = [
+    [
+        "root",
+        "DataTableHeader__root"
+    ]
+];
+const dataTableHeaderSlotRecipeSlotFns = /* @__PURE__ */ dataTableHeaderSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableHeaderSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableHeaderSlotRecipeCompoundVariants, slotName))]);
+const dataTableHeaderSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(dataTableHeaderSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const dataTableHeaderSlotRecipeVariantKeys = [
+    "fixedHeader"
+];
+const getVariantProps = (variants) => ({ ...dataTableHeaderSlotRecipeDefaultVariants, ...compact(variants) });
+export const dataTableHeaderSlotRecipe = /* @__PURE__ */ Object.assign(dataTableHeaderSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'dataTableHeaderSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: dataTableHeaderSlotRecipeVariantKeys,
+    variantMap: {
+        "fixedHeader": [
+            "true",
+            "false"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, dataTableHeaderSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});