@moneyforward/mfui-components 3.34.0 → 3.36.0

package/dist/src/TextBox/TextBox.types.d.ts

@@ -26,6 +26,32 @@ export type TextBoxProps = {
      * @default false
      */
     invalid?: TextBoxSlotRecipeVariant['invalid'];
+    /**
+     * Whether the text box needs the user's attention while still being submittable.
+     * Use it when the value passes validation but is worth double-checking.
+     *
+     * This changes the border color only, so you must also render an adjacent
+     * `<HelpMessage messageType="caution">` describing the concern — color alone does not
+     * convey the state (WCAG 2.2 1.4.1).
+     *
+     * Associate that `HelpMessage` with the text box via `aria-describedby` so screen readers
+     * announce it on focus, and give it `role="status"` so it is also announced the moment it
+     * appears while focus is already inside the text box.
+     *
+     * ```tsx
+     * const cautionMessageId = useId();
+     *
+     * <TextBox caution aria-describedby={cautionMessageId} />
+     * <HelpMessage id={cautionMessageId} role="status" messageType="caution">
+     *   過去の平均を大きく上回る金額です。
+     * </HelpMessage>
+     * ```
+     *
+     * Ignored while `invalid` is `true`, because the error state takes precedence.
+     *
+     * @default false
+     */
+    caution?: TextBoxSlotRecipeVariant['caution'];
     /**
      * The size of the text box.
      *

package/dist/src/Textarea/Textarea.d.ts

@@ -1,6 +1,6 @@
 /**
  * The general-purpose Textarea component.
- * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
+ * This component switches the variants of looks and behaviors depends on the props: size, invalid, caution, disabled.
  *
  * Also extends the props of `<textarea>` element
  *
@@ -11,6 +11,7 @@
  */
 export declare const Textarea: import("react").ForwardRefExoticComponent<{
     invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['invalid'];
+    caution?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['caution'];
     size?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['size'];
     disabled?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['disabled'];
     enableAutoResize?: boolean;

package/dist/src/Textarea/Textarea.js

@@ -6,7 +6,7 @@ import { FocusIndicator } from '../FocusIndicator';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
 /**
  * The general-purpose Textarea component.
- * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
+ * This component switches the variants of looks and behaviors depends on the props: size, invalid, caution, disabled.
  *
  * Also extends the props of `<textarea>` element
  *
@@ -15,11 +15,19 @@ import { mergeRefs } from '../utilities/dom/mergeRefs';
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
  */
-export const Textarea = forwardRef(({ invalid = false, size = 'medium', disabled = false, rows = 1, enableAutoResize = false, resize = 'both', onChange, ...props }, ref) => {
+export const Textarea = forwardRef(({ invalid = false, caution = false, size = 'medium', disabled = false, rows = 1, enableAutoResize = false, resize = 'both', onChange, ...props }, ref) => {
     const localRef = useRef(null);
     // When enableAutoResize is true, force resize to 'none' to prevent conflicts
     const effectiveResize = enableAutoResize ? 'none' : resize;
-    const classes = textareaSlotRecipe({ size, disabled, invalid, enableAutoResize, resize: effectiveResize });
+    // The error state takes precedence over the caution state
+    const classes = textareaSlotRecipe({
+        size,
+        disabled,
+        invalid,
+        caution: caution && !invalid,
+        enableAutoResize,
+        resize: effectiveResize,
+    });
     const adjustHeight = useCallback(() => {
         if (!enableAutoResize || !localRef.current)
             return;

package/dist/src/Textarea/Textarea.types.d.ts

@@ -11,6 +11,32 @@ export type TextareaProps = {
      * @default false
      */
     invalid?: TextBoxSlotRecipeVariant['invalid'];
+    /**
+     * Whether the textarea needs the user's attention while still being submittable.
+     * Use it when the value passes validation but is worth double-checking.
+     *
+     * This changes the border color only, so you must also render an adjacent
+     * `<HelpMessage messageType="caution">` describing the concern — color alone does not
+     * convey the state (WCAG 2.2 1.4.1).
+     *
+     * Associate that `HelpMessage` with the textarea via `aria-describedby` so screen readers
+     * announce it on focus, and give it `role="status"` so it is also announced the moment it
+     * appears while focus is already inside the textarea.
+     *
+     * ```tsx
+     * const cautionMessageId = useId();
+     *
+     * <Textarea caution aria-describedby={cautionMessageId} />
+     * <HelpMessage id={cautionMessageId} role="status" messageType="caution">
+     *   送信先に社外メンバーが含まれています。内容をご確認ください。
+     * </HelpMessage>
+     * ```
+     *
+     * Ignored while `invalid` is `true`, because the error state takes precedence.
+     *
+     * @default false
+     */
+    caution?: TextBoxSlotRecipeVariant['caution'];
     /**
      * The size of the textarea.
      *

package/dist/src/index.d.ts

@@ -8,6 +8,7 @@ export * from './CheckboxGroup';
 export * from './DataGrid';
 export * from './DataTable';
 export * from './DateTimeSelection';
+export * from './DeterminateProgressIndicator';
 export * from './Dialog';
 export * from './Disclosure';
 export * from './DisplayTable';

package/dist/src/index.js

@@ -8,6 +8,7 @@ export * from './CheckboxGroup';
 export * from './DataGrid';
 export * from './DataTable';
 export * from './DateTimeSelection';
+export * from './DeterminateProgressIndicator';
 export * from './Dialog';
 export * from './Disclosure';
 export * from './DisplayTable';

package/dist/styled-system/recipes/base-range-picker-trigger-slot-recipe.d.ts

@@ -4,6 +4,7 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface BaseRangePickerTriggerSlotRecipeVariant {
   invalid: boolean
+caution: boolean
 disabled: boolean
 size: "small" | "medium" | "large"
 }

package/dist/styled-system/recipes/base-range-picker-trigger-slot-recipe.js

@@ -30,6 +30,7 @@ const baseRangePickerTriggerSlotRecipeFn = memo((props = {}) => {
 });
 const baseRangePickerTriggerSlotRecipeVariantKeys = [
     "invalid",
+    "caution",
     "disabled",
     "size"
 ];
@@ -45,6 +46,10 @@ export const baseRangePickerTriggerSlotRecipe = /* @__PURE__ */ Object.assign(ba
             "true",
             "false"
         ],
+        "caution": [
+            "true",
+            "false"
+        ],
         "disabled": [
             "true",
             "false"

package/dist/styled-system/recipes/data-table-filter-button-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 DataTableFilterButtonSlotRecipeVariant {
+  filtered: boolean
+}
+
+type DataTableFilterButtonSlotRecipeVariantMap = {
+  [key in keyof DataTableFilterButtonSlotRecipeVariant]: Array<DataTableFilterButtonSlotRecipeVariant[key]>
+}
+
+type DataTableFilterButtonSlotRecipeSlot = "root" | "dialog" | "filteredDescription"
+
+export type DataTableFilterButtonSlotRecipeVariantProps = {
+  [key in keyof DataTableFilterButtonSlotRecipeVariant]?: ConditionalValue<DataTableFilterButtonSlotRecipeVariant[key]> | undefined
+}
+
+export interface DataTableFilterButtonSlotRecipeRecipe {
+  __slot: DataTableFilterButtonSlotRecipeSlot
+  __type: DataTableFilterButtonSlotRecipeVariantProps
+  (props?: DataTableFilterButtonSlotRecipeVariantProps): Pretty<Record<DataTableFilterButtonSlotRecipeSlot, string>>
+  raw: (props?: DataTableFilterButtonSlotRecipeVariantProps) => DataTableFilterButtonSlotRecipeVariantProps
+  variantMap: DataTableFilterButtonSlotRecipeVariantMap
+  variantKeys: Array<keyof DataTableFilterButtonSlotRecipeVariant>
+  splitVariantProps<Props extends DataTableFilterButtonSlotRecipeVariantProps>(props: Props): [DataTableFilterButtonSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DataTableFilterButtonSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DataTableFilterButtonSlotRecipeVariantProps) => DataTableFilterButtonSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DataTable.FilterButton sub-component.
+ */
+export declare const dataTableFilterButtonSlotRecipe: DataTableFilterButtonSlotRecipeRecipe

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

@@ -0,0 +1,43 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const dataTableFilterButtonSlotRecipeDefaultVariants = {};
+const dataTableFilterButtonSlotRecipeCompoundVariants = [];
+const dataTableFilterButtonSlotRecipeSlotNames = [
+    [
+        "root",
+        "DataTableFilterButton__root"
+    ],
+    [
+        "dialog",
+        "DataTableFilterButton__dialog"
+    ],
+    [
+        "filteredDescription",
+        "DataTableFilterButton__filteredDescription"
+    ]
+];
+const dataTableFilterButtonSlotRecipeSlotFns = /* @__PURE__ */ dataTableFilterButtonSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableFilterButtonSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableFilterButtonSlotRecipeCompoundVariants, slotName))]);
+const dataTableFilterButtonSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(dataTableFilterButtonSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const dataTableFilterButtonSlotRecipeVariantKeys = [
+    "filtered"
+];
+const getVariantProps = (variants) => ({ ...dataTableFilterButtonSlotRecipeDefaultVariants, ...compact(variants) });
+export const dataTableFilterButtonSlotRecipe = /* @__PURE__ */ Object.assign(dataTableFilterButtonSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'dataTableFilterButtonSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: dataTableFilterButtonSlotRecipeVariantKeys,
+    variantMap: {
+        "filtered": [
+            "true",
+            "false"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, dataTableFilterButtonSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

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

@@ -4,6 +4,7 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface DataTableHeaderCellSlotRecipeVariant {
   size: "small" | "medium"
+hasActions: boolean
 fixedColumn: boolean
 verticalBorder: boolean
 edgeFixedColumn: "left" | "right"
@@ -15,10 +16,10 @@ type DataTableHeaderCellSlotRecipeVariantMap = {
   [key in keyof DataTableHeaderCellSlotRecipeVariant]: Array<DataTableHeaderCellSlotRecipeVariant[key]>
 }
 
-type DataTableHeaderCellSlotRecipeSlot = "root" | "headerCell" | "sortButton" | "sortIconContainer" | "sortIcon" | "unsortedIcon"
+type DataTableHeaderCellSlotRecipeSlot = "root" | "headerCell" | "sortButton" | "sortIconContainer" | "sortIcon" | "unsortedIcon" | "container" | "actionsContainer"
 
 export type DataTableHeaderCellSlotRecipeVariantProps = {
-  [key in keyof DataTableHeaderCellSlotRecipeVariant]?: ConditionalValue<DataTableHeaderCellSlotRecipeVariant[key]> | undefined
+  [key in keyof DataTableHeaderCellSlotRecipeVariant]?: DataTableHeaderCellSlotRecipeVariant[key] | undefined
 }
 
 export interface DataTableHeaderCellSlotRecipeRecipe {

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

@@ -1,7 +1,62 @@
 import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
 import { createRecipe } from './create-recipe.js';
 const dataTableHeaderCellSlotRecipeDefaultVariants = {};
-const dataTableHeaderCellSlotRecipeCompoundVariants = [];
+const dataTableHeaderCellSlotRecipeCompoundVariants = [
+    {
+        "size": "small",
+        "hasActions": false,
+        "css": {
+            "headerCell": {
+                "paddingY": "mfui.size.padding.data-table-cell.vertical.condensed",
+                "paddingX": "mfui.size.padding.data-table-cell.horizontal.condensed",
+                "minHeight": "mfui.size.dimension.data-table-cell.height.condensed"
+            },
+            "sortButton": {
+                "paddingY": "mfui.size.padding.data-table-cell.vertical.condensed",
+                "paddingX": "mfui.size.padding.data-table-cell.horizontal.condensed",
+                "minHeight": "mfui.size.dimension.data-table-cell.height.condensed"
+            }
+        }
+    },
+    {
+        "size": "small",
+        "hasActions": true,
+        "css": {
+            "container": {
+                "paddingY": "mfui.size.padding.data-table-cell.vertical.condensed",
+                "paddingX": "mfui.size.padding.data-table-cell.horizontal.condensed",
+                "minHeight": "mfui.size.dimension.data-table-cell.height.condensed"
+            }
+        }
+    },
+    {
+        "size": "medium",
+        "hasActions": false,
+        "css": {
+            "headerCell": {
+                "paddingY": "mfui.size.padding.data-table-cell.vertical.comfort",
+                "paddingX": "mfui.size.padding.data-table-cell.horizontal.comfort",
+                "minHeight": "mfui.size.dimension.data-table-cell.height.comfort"
+            },
+            "sortButton": {
+                "paddingY": "mfui.size.padding.data-table-cell.vertical.comfort",
+                "paddingX": "mfui.size.padding.data-table-cell.horizontal.comfort",
+                "minHeight": "mfui.size.dimension.data-table-cell.height.comfort"
+            }
+        }
+    },
+    {
+        "size": "medium",
+        "hasActions": true,
+        "css": {
+            "container": {
+                "paddingY": "mfui.size.padding.data-table-cell.vertical.comfort",
+                "paddingX": "mfui.size.padding.data-table-cell.horizontal.comfort",
+                "minHeight": "mfui.size.dimension.data-table-cell.height.comfort"
+            }
+        }
+    }
+];
 const dataTableHeaderCellSlotRecipeSlotNames = [
     [
         "root",
@@ -26,6 +81,14 @@ const dataTableHeaderCellSlotRecipeSlotNames = [
     [
         "unsortedIcon",
         "DataTableHeaderCell__unsortedIcon"
+    ],
+    [
+        "container",
+        "DataTableHeaderCell__container"
+    ],
+    [
+        "actionsContainer",
+        "DataTableHeaderCell__actionsContainer"
     ]
 ];
 const dataTableHeaderCellSlotRecipeSlotFns = /* @__PURE__ */ dataTableHeaderCellSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableHeaderCellSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableHeaderCellSlotRecipeCompoundVariants, slotName))]);
@@ -34,6 +97,7 @@ const dataTableHeaderCellSlotRecipeFn = memo((props = {}) => {
 });
 const dataTableHeaderCellSlotRecipeVariantKeys = [
     "size",
+    "hasActions",
     "fixedColumn",
     "verticalBorder",
     "edgeFixedColumn",
@@ -52,6 +116,10 @@ export const dataTableHeaderCellSlotRecipe = /* @__PURE__ */ Object.assign(dataT
             "small",
             "medium"
         ],
+        "hasActions": [
+            "true",
+            "false"
+        ],
         "fixedColumn": [
             "true"
         ],

package/dist/styled-system/recipes/data-table-sort-button-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 DataTableSortButtonSlotRecipeVariant {
+  sorted: boolean
+}
+
+type DataTableSortButtonSlotRecipeVariantMap = {
+  [key in keyof DataTableSortButtonSlotRecipeVariant]: Array<DataTableSortButtonSlotRecipeVariant[key]>
+}
+
+type DataTableSortButtonSlotRecipeSlot = "root"
+
+export type DataTableSortButtonSlotRecipeVariantProps = {
+  [key in keyof DataTableSortButtonSlotRecipeVariant]?: ConditionalValue<DataTableSortButtonSlotRecipeVariant[key]> | undefined
+}
+
+export interface DataTableSortButtonSlotRecipeRecipe {
+  __slot: DataTableSortButtonSlotRecipeSlot
+  __type: DataTableSortButtonSlotRecipeVariantProps
+  (props?: DataTableSortButtonSlotRecipeVariantProps): Pretty<Record<DataTableSortButtonSlotRecipeSlot, string>>
+  raw: (props?: DataTableSortButtonSlotRecipeVariantProps) => DataTableSortButtonSlotRecipeVariantProps
+  variantMap: DataTableSortButtonSlotRecipeVariantMap
+  variantKeys: Array<keyof DataTableSortButtonSlotRecipeVariant>
+  splitVariantProps<Props extends DataTableSortButtonSlotRecipeVariantProps>(props: Props): [DataTableSortButtonSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DataTableSortButtonSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DataTableSortButtonSlotRecipeVariantProps) => DataTableSortButtonSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DataTable.SortButton sub-component.
+ */
+export declare const dataTableSortButtonSlotRecipe: DataTableSortButtonSlotRecipeRecipe

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

@@ -0,0 +1,35 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const dataTableSortButtonSlotRecipeDefaultVariants = {};
+const dataTableSortButtonSlotRecipeCompoundVariants = [];
+const dataTableSortButtonSlotRecipeSlotNames = [
+    [
+        "root",
+        "DataTableSortButton__root"
+    ]
+];
+const dataTableSortButtonSlotRecipeSlotFns = /* @__PURE__ */ dataTableSortButtonSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableSortButtonSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableSortButtonSlotRecipeCompoundVariants, slotName))]);
+const dataTableSortButtonSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(dataTableSortButtonSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const dataTableSortButtonSlotRecipeVariantKeys = [
+    "sorted"
+];
+const getVariantProps = (variants) => ({ ...dataTableSortButtonSlotRecipeDefaultVariants, ...compact(variants) });
+export const dataTableSortButtonSlotRecipe = /* @__PURE__ */ Object.assign(dataTableSortButtonSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'dataTableSortButtonSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: dataTableSortButtonSlotRecipeVariantKeys,
+    variantMap: {
+        "sorted": [
+            "true",
+            "false"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, dataTableSortButtonSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/determinate-progress-indicator-slot-recipe.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DeterminateProgressIndicatorSlotRecipeVariant {
+  /**
+ * @default "right"
+ */
+valueTextPosition: "right" | "top"
+}
+
+type DeterminateProgressIndicatorSlotRecipeVariantMap = {
+  [key in keyof DeterminateProgressIndicatorSlotRecipeVariant]: Array<DeterminateProgressIndicatorSlotRecipeVariant[key]>
+}
+
+type DeterminateProgressIndicatorSlotRecipeSlot = "root" | "progressIndicator" | "track" | "progress" | "valueText" | "value" | "unit"
+
+export type DeterminateProgressIndicatorSlotRecipeVariantProps = {
+  [key in keyof DeterminateProgressIndicatorSlotRecipeVariant]?: ConditionalValue<DeterminateProgressIndicatorSlotRecipeVariant[key]> | undefined
+}
+
+export interface DeterminateProgressIndicatorSlotRecipeRecipe {
+  __slot: DeterminateProgressIndicatorSlotRecipeSlot
+  __type: DeterminateProgressIndicatorSlotRecipeVariantProps
+  (props?: DeterminateProgressIndicatorSlotRecipeVariantProps): Pretty<Record<DeterminateProgressIndicatorSlotRecipeSlot, string>>
+  raw: (props?: DeterminateProgressIndicatorSlotRecipeVariantProps) => DeterminateProgressIndicatorSlotRecipeVariantProps
+  variantMap: DeterminateProgressIndicatorSlotRecipeVariantMap
+  variantKeys: Array<keyof DeterminateProgressIndicatorSlotRecipeVariant>
+  splitVariantProps<Props extends DeterminateProgressIndicatorSlotRecipeVariantProps>(props: Props): [DeterminateProgressIndicatorSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DeterminateProgressIndicatorSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DeterminateProgressIndicatorSlotRecipeVariantProps) => DeterminateProgressIndicatorSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DeterminateProgressIndicator component.
+ */
+export declare const determinateProgressIndicatorSlotRecipe: DeterminateProgressIndicatorSlotRecipeRecipe

package/dist/styled-system/recipes/determinate-progress-indicator-slot-recipe.js

@@ -0,0 +1,61 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const determinateProgressIndicatorSlotRecipeDefaultVariants = {
+    "valueTextPosition": "right"
+};
+const determinateProgressIndicatorSlotRecipeCompoundVariants = [];
+const determinateProgressIndicatorSlotRecipeSlotNames = [
+    [
+        "root",
+        "DeterminateProgressIndicator__root"
+    ],
+    [
+        "progressIndicator",
+        "DeterminateProgressIndicator__progressIndicator"
+    ],
+    [
+        "track",
+        "DeterminateProgressIndicator__track"
+    ],
+    [
+        "progress",
+        "DeterminateProgressIndicator__progress"
+    ],
+    [
+        "valueText",
+        "DeterminateProgressIndicator__valueText"
+    ],
+    [
+        "value",
+        "DeterminateProgressIndicator__value"
+    ],
+    [
+        "unit",
+        "DeterminateProgressIndicator__unit"
+    ]
+];
+const determinateProgressIndicatorSlotRecipeSlotFns = /* @__PURE__ */ determinateProgressIndicatorSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, determinateProgressIndicatorSlotRecipeDefaultVariants, getSlotCompoundVariant(determinateProgressIndicatorSlotRecipeCompoundVariants, slotName))]);
+const determinateProgressIndicatorSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(determinateProgressIndicatorSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const determinateProgressIndicatorSlotRecipeVariantKeys = [
+    "valueTextPosition"
+];
+const getVariantProps = (variants) => ({ ...determinateProgressIndicatorSlotRecipeDefaultVariants, ...compact(variants) });
+export const determinateProgressIndicatorSlotRecipe = /* @__PURE__ */ Object.assign(determinateProgressIndicatorSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'determinateProgressIndicatorSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: determinateProgressIndicatorSlotRecipeVariantKeys,
+    variantMap: {
+        "valueTextPosition": [
+            "right",
+            "top"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, determinateProgressIndicatorSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/icon-button-slot-recipe.d.ts

@@ -8,6 +8,7 @@ interface IconButtonSlotRecipeVariant {
  */
 size: "small" | "default"
 outlined: boolean
+destructive: boolean
 }
 
 type IconButtonSlotRecipeVariantMap = {
@@ -17,7 +18,7 @@ type IconButtonSlotRecipeVariantMap = {
 type IconButtonSlotRecipeSlot = "root"
 
 export type IconButtonSlotRecipeVariantProps = {
-  [key in keyof IconButtonSlotRecipeVariant]?: ConditionalValue<IconButtonSlotRecipeVariant[key]> | undefined
+  [key in keyof IconButtonSlotRecipeVariant]?: IconButtonSlotRecipeVariant[key] | undefined
 }
 
 export interface IconButtonSlotRecipeRecipe {

package/dist/styled-system/recipes/icon-button-slot-recipe.js

@@ -3,7 +3,33 @@ import { createRecipe } from './create-recipe.js';
 const iconButtonSlotRecipeDefaultVariants = {
     "size": "default"
 };
-const iconButtonSlotRecipeCompoundVariants = [];
+const iconButtonSlotRecipeCompoundVariants = [
+    {
+        "destructive": true,
+        "outlined": true,
+        "css": {
+            "root": {
+                "borderColor": "mfui.color.signal-red.border.none",
+                "_hover": {
+                    "_notDisabled": {
+                        "borderColor": "mfui.color.signal-red.border.hovered"
+                    }
+                },
+                "_focusVisible": {
+                    "borderColor": "mfui.color.signal-red.border.hovered"
+                },
+                "_active": {
+                    "_notDisabled": {
+                        "borderColor": "mfui.color.signal-red.border.pressed"
+                    }
+                },
+                "_disabled": {
+                    "borderColor": "mfui.color.disabled.border"
+                }
+            }
+        }
+    }
+];
 const iconButtonSlotRecipeSlotNames = [
     [
         "root",
@@ -16,7 +42,8 @@ const iconButtonSlotRecipeFn = memo((props = {}) => {
 });
 const iconButtonSlotRecipeVariantKeys = [
     "size",
-    "outlined"
+    "outlined",
+    "destructive"
 ];
 const getVariantProps = (variants) => ({ ...iconButtonSlotRecipeDefaultVariants, ...compact(variants) });
 export const iconButtonSlotRecipe = /* @__PURE__ */ Object.assign(iconButtonSlotRecipeFn, {
@@ -32,6 +59,10 @@ export const iconButtonSlotRecipe = /* @__PURE__ */ Object.assign(iconButtonSlot
         ],
         "outlined": [
             "true"
+        ],
+        "destructive": [
+            "true",
+            "false"
         ]
     },
     splitVariantProps(props) {

package/dist/styled-system/recipes/index.d.ts

@@ -48,11 +48,14 @@ export * from './data-table-body-slot-recipe';
 export * from './data-table-cell-slot-recipe';
 export * from './data-table-slot-recipe';
 export * from './data-table-header-cell-slot-recipe';
+export * from './data-table-filter-button-slot-recipe';
+export * from './data-table-sort-button-slot-recipe';
 export * from './data-table-header-row-slot-recipe';
 export * from './data-table-header-slot-recipe';
 export * from './data-table-row-slot-recipe';
 export * from './sub-navigation-slot-recipe';
 export * from './progress-indicator-slot-recipe';
+export * from './determinate-progress-indicator-slot-recipe';
 export * from './stack-slot-recipe';
 export * from './stepper-slot-recipe';
 export * from './multiple-select-box-slot-recipe';

package/dist/styled-system/recipes/index.js

@@ -47,11 +47,14 @@ export * from './data-table-body-slot-recipe.js';
 export * from './data-table-cell-slot-recipe.js';
 export * from './data-table-slot-recipe.js';
 export * from './data-table-header-cell-slot-recipe.js';
+export * from './data-table-filter-button-slot-recipe.js';
+export * from './data-table-sort-button-slot-recipe.js';
 export * from './data-table-header-row-slot-recipe.js';
 export * from './data-table-header-slot-recipe.js';
 export * from './data-table-row-slot-recipe.js';
 export * from './sub-navigation-slot-recipe.js';
 export * from './progress-indicator-slot-recipe.js';
+export * from './determinate-progress-indicator-slot-recipe.js';
 export * from './stack-slot-recipe.js';
 export * from './stepper-slot-recipe.js';
 export * from './multiple-select-box-slot-recipe.js';

package/dist/styled-system/recipes/text-box-slot-recipe.d.ts

@@ -15,6 +15,10 @@ disabled: boolean
  * @default false
  */
 invalid: boolean
+/**
+ * @default false
+ */
+caution: boolean
 }
 
 type TextBoxSlotRecipeVariantMap = {