@bug-on/m3-expressive 1.3.5 → 1.3.6

package/dist/{side-sheet-modal-64FGhDxL.d.mts → side-sheet-modal-BycxrabB.d.mts}

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React$1 from 'react';
+import { B as BaseIconButtonProps } from './icon-button-CxyJv7UV.mjs';
 import { MotionStyle, useMotionValue, useTransform } from 'motion/react';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.mjs';
 
@@ -43,6 +44,49 @@ interface DialogProps {
 interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
     /** Hides the top-right close (X) button. @default false */
     hideCloseButton?: boolean;
+    /**
+     * Override any `IconButton` prop on the default close button.
+     *
+     * Common use cases:
+     * - `disabled` — prevent closing during form submission.
+     * - `aria-label` — i18n label (e.g. `"Đóng"`).
+     * - `colorStyle` — change visual style (`"filled"` restores original look).
+     * - `className` — reposition or override the default `absolute right-4 top-4`.
+     *
+     * These props are **merged** with the library defaults — you only need to specify overrides.
+     *
+     * @example
+     * ```tsx
+     * // Disable during form submission
+     * <DialogContent closeButtonProps={{ disabled: isSubmitting, "aria-label": "Đóng" }}>
+     *
+     * // Restore the original filled style
+     * <DialogContent closeButtonProps={{ colorStyle: "filled" }}>
+     * ```
+     */
+    closeButtonProps?: Partial<BaseIconButtonProps>;
+    /**
+     * Fully replace the close button with a custom React node.
+     * The node is automatically wrapped in `RadixDialog.Close asChild`.
+     *
+     * When provided, `hideCloseButton` and `closeButtonProps` are ignored —
+     * this slot takes full ownership of the close action.
+     *
+     * Use when `closeButtonProps` is insufficient (e.g. completely different element
+     * or button placed inside a custom flex header).
+     *
+     * @example
+     * ```tsx
+     * <DialogContent
+     *   closeButton={
+     *     <IconButton disabled={isSubmitting} aria-label="Đóng" className="absolute right-4 top-4">
+     *       <Icon name="close" />
+     *     </IconButton>
+     *   }
+     * >
+     * ```
+     */
+    closeButton?: React$1.ReactNode;
     className?: string;
 }
 /**
@@ -62,6 +106,32 @@ interface DialogFullScreenContentProps extends React$1.ComponentPropsWithoutRef<
     actionLabel?: string;
     /** Handler invoked when pressing the primary action button. */
     onAction?: () => void;
+    /**
+     * Override any native `<button>` attribute on the top-bar action button.
+     *
+     * Common use case: `disabled` during form submission.
+     *
+     * @example
+     * ```tsx
+     * <DialogFullScreenContent
+     *   actionLabel="Lưu"
+     *   onAction={handleSave}
+     *   actionButtonProps={{ disabled: isSubmitting }}
+     * >
+     * ```
+     */
+    actionButtonProps?: React$1.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * Override any `IconButton` prop on the top-bar close button.
+     *
+     * Common use cases: `disabled` during submission, `aria-label` for i18n.
+     *
+     * @example
+     * ```tsx
+     * <DialogFullScreenContent closeButtonProps={{ disabled: isSubmitting, "aria-label": "Đóng" }}>
+     * ```
+     */
+    closeButtonProps?: Partial<BaseIconButtonProps>;
     /** Renders a divider separating Top App Bar from scrollable body content. @default false */
     showDivider?: boolean;
     className?: string;

package/dist/{side-sheet-modal-Bd5Qqvp9.d.ts → side-sheet-modal-Cw4vemKx.d.ts}

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React$1 from 'react';
+import { B as BaseIconButtonProps } from './icon-button-Di8VX6ou.js';
 import { MotionStyle, useMotionValue, useTransform } from 'motion/react';
 import { b as ScrollAreaProps } from './scroll-area-CVS6HyLl.js';
 
@@ -43,6 +44,49 @@ interface DialogProps {
 interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
     /** Hides the top-right close (X) button. @default false */
     hideCloseButton?: boolean;
+    /**
+     * Override any `IconButton` prop on the default close button.
+     *
+     * Common use cases:
+     * - `disabled` — prevent closing during form submission.
+     * - `aria-label` — i18n label (e.g. `"Đóng"`).
+     * - `colorStyle` — change visual style (`"filled"` restores original look).
+     * - `className` — reposition or override the default `absolute right-4 top-4`.
+     *
+     * These props are **merged** with the library defaults — you only need to specify overrides.
+     *
+     * @example
+     * ```tsx
+     * // Disable during form submission
+     * <DialogContent closeButtonProps={{ disabled: isSubmitting, "aria-label": "Đóng" }}>
+     *
+     * // Restore the original filled style
+     * <DialogContent closeButtonProps={{ colorStyle: "filled" }}>
+     * ```
+     */
+    closeButtonProps?: Partial<BaseIconButtonProps>;
+    /**
+     * Fully replace the close button with a custom React node.
+     * The node is automatically wrapped in `RadixDialog.Close asChild`.
+     *
+     * When provided, `hideCloseButton` and `closeButtonProps` are ignored —
+     * this slot takes full ownership of the close action.
+     *
+     * Use when `closeButtonProps` is insufficient (e.g. completely different element
+     * or button placed inside a custom flex header).
+     *
+     * @example
+     * ```tsx
+     * <DialogContent
+     *   closeButton={
+     *     <IconButton disabled={isSubmitting} aria-label="Đóng" className="absolute right-4 top-4">
+     *       <Icon name="close" />
+     *     </IconButton>
+     *   }
+     * >
+     * ```
+     */
+    closeButton?: React$1.ReactNode;
     className?: string;
 }
 /**
@@ -62,6 +106,32 @@ interface DialogFullScreenContentProps extends React$1.ComponentPropsWithoutRef<
     actionLabel?: string;
     /** Handler invoked when pressing the primary action button. */
     onAction?: () => void;
+    /**
+     * Override any native `<button>` attribute on the top-bar action button.
+     *
+     * Common use case: `disabled` during form submission.
+     *
+     * @example
+     * ```tsx
+     * <DialogFullScreenContent
+     *   actionLabel="Lưu"
+     *   onAction={handleSave}
+     *   actionButtonProps={{ disabled: isSubmitting }}
+     * >
+     * ```
+     */
+    actionButtonProps?: React$1.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * Override any `IconButton` prop on the top-bar close button.
+     *
+     * Common use cases: `disabled` during submission, `aria-label` for i18n.
+     *
+     * @example
+     * ```tsx
+     * <DialogFullScreenContent closeButtonProps={{ disabled: isSubmitting, "aria-label": "Đóng" }}>
+     * ```
+     */
+    closeButtonProps?: Partial<BaseIconButtonProps>;
     /** Renders a divider separating Top App Bar from scrollable body content. @default false */
     showDivider?: boolean;
     className?: string;

package/dist/{text-field-4OlT9o8s.d.mts → text-field-B1fLh5Sh.d.mts}

@@ -473,11 +473,30 @@ interface SelectProps extends Omit<TextFieldProps, "value" | "onChange" | "defau
     /** Callback fired when selection changes */
     onChange?: (value: string, option?: SelectOption) => void;
     /**
-     * Callback fired when search query changes in searchable mode.
-     * When provided, INTERNAL filtering is disabled — pass filtered `options` from outside (for server-side/async search).
+     * Callback fired when the search query changes.
+     *
+     * ⚠️ **Requires `searchable={true}`** — without it, typing is disabled and this callback is never called.
+     *
+     * When provided, INTERNAL filtering is disabled — you control `options` externally
+     * (ideal for server-side / async search with large datasets).
+     *
+     * @example
+     * // Server-side search: fetch results as user types
+     * <Select
+     *   searchable
+     *   loading={isLoading}
+     *   options={serverResults}
+     *   onSearchChange={(query) => fetchOptions(query)}
+     *   onChange={(val) => setSelected(val)}
+     * />
      */
     onSearchChange?: (query: string) => void;
-    /** Enable autocomplete mode (input filtering real-time search) */
+    /**
+     * Enable autocomplete/search mode — renders the trigger as an editable text input.
+     *
+     * - When `false` (default): read-only dropdown, no typing allowed.
+     * - When `true`: user can type to filter options. Combine with `onSearchChange` for server-side search.
+     */
     searchable?: boolean;
     /** Whether data is loading (displays a spinner inside the dropdown) */
     loading?: boolean;

package/dist/{text-field-DARNdj14.d.ts → text-field-C0VQLp8Y.d.ts}

@@ -473,11 +473,30 @@ interface SelectProps extends Omit<TextFieldProps, "value" | "onChange" | "defau
     /** Callback fired when selection changes */
     onChange?: (value: string, option?: SelectOption) => void;
     /**
-     * Callback fired when search query changes in searchable mode.
-     * When provided, INTERNAL filtering is disabled — pass filtered `options` from outside (for server-side/async search).
+     * Callback fired when the search query changes.
+     *
+     * ⚠️ **Requires `searchable={true}`** — without it, typing is disabled and this callback is never called.
+     *
+     * When provided, INTERNAL filtering is disabled — you control `options` externally
+     * (ideal for server-side / async search with large datasets).
+     *
+     * @example
+     * // Server-side search: fetch results as user types
+     * <Select
+     *   searchable
+     *   loading={isLoading}
+     *   options={serverResults}
+     *   onSearchChange={(query) => fetchOptions(query)}
+     *   onChange={(val) => setSelected(val)}
+     * />
      */
     onSearchChange?: (query: string) => void;
-    /** Enable autocomplete mode (input filtering real-time search) */
+    /**
+     * Enable autocomplete/search mode — renders the trigger as an editable text input.
+     *
+     * - When `false` (default): read-only dropdown, no typing allowed.
+     * - When `true`: user can type to filter options. Combine with `onSearchChange` for server-side search.
+     */
     searchable?: boolean;
     /** Whether data is loading (displays a spinner inside the dropdown) */
     loading?: boolean;

package/llms-full.txt

@@ -126,6 +126,8 @@ Icons use **Material Symbols** (Variable Font).
 ### 7.1 Compound Components & Responsive Layout Groups
 Complex components use a structured compound pattern:
 - **Dialog & Drawer**: `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogBody`, `DialogFooter`, `DialogClose`.
+  - `DialogContent` has `closeButtonProps?: Partial<IconButtonProps>` to override the default close button (use `disabled`, `aria-label`, `colorStyle`, `className`) and `closeButton?: React.ReactNode` for full slot replacement (auto-wrapped in `DialogClose`).
+  - `DialogFullScreenContent` has `closeButtonProps?: Partial<IconButtonProps>` and `actionButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>` to disable/label close and action buttons during form submission.
 - **Tabs**: `Tabs`, `TabsList`, `Tab`, `TabsContent`.
 - **SplitButton**: `SplitButtonLayout`, `SplitButtonLeading`, `SplitButtonTrailing` (or `SplitButtonTrailingUncheckable`).
 - **ButtonDistribute**: `ButtonDistribute` (`mode="dynamic" | "fixed" | "mixed"`), spring-animated button layout container for responsive action bars.
@@ -257,3 +259,8 @@ import {
 | `<ProgressIndicator max={100} />` | ProgressIndicator does not support `max` prop. Progress is mapped strictly from 0 to 100 on the `value` prop |
 | `<ProgressIndicator>` without `aria-label` | `aria-label` is required on all progress indicators for accessibility |
 | `<ProgressIndicator value={0} />` for indeterminate mode | Omit `value` prop entirely (or pass `undefined`) to trigger indeterminate loading. Setting `value={0}` indicates 0% determinate progress |
+| `<DialogContent>` close button during form submission | Use `closeButtonProps={{ disabled: isSubmitting }}` — do not build a custom close button just for `disabled` support |
+| `<DialogContent>` close button i18n label | Use `closeButtonProps={{ "aria-label": "Đóng" }}` — the `aria-label` prop is forwarded to the `IconButton` |
+| `<DialogContent>` needing full custom close button | Use `closeButton={<YourNode />}` — library auto-wraps in `DialogClose asChild`. When provided, `hideCloseButton` and `closeButtonProps` are ignored |
+| `<DialogFullScreenContent>` action/close disabled during submit | Use `actionButtonProps={{ disabled: isSubmitting }}` and `closeButtonProps={{ disabled: isSubmitting }}` |
+| Building a custom header with `DialogContent` just to control close button style | Use `closeButtonProps={{ colorStyle: "standard" }}` (default) or `"filled"` to override. Only use `hideCloseButton` + custom header when layout positioning is the actual requirement |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/m3-expressive",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "Material Design 3 Expressive React components",
   "author": "Bug On",
   "license": "MIT",