@marwes-ui/react 1.3.0 → 1.4.0

package/dist/index.d.ts

@@ -1,12 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ThemeInput, ThemePreference, ThemeMode, FontLoadingConfig, ThemeVariableStrategy, ResolvedTheme, ButtonOptions, InputOptions, SelectOptions, SelectAppearance as SelectAppearance$1, SelectOption as SelectOption$1, TextareaOptions, RichTextOptions, InputOtpOptions, CurrencyCode, iconRegistry, IconSize, IconStrokeWidth, AvatarOptions, CheckboxProps as CheckboxProps$1, DividerOptions, DividerSize, DividerOrientation, SpinnerOptions, SkeletonOptions, SpacingOptions, SpacingSize, HeadingOptions, HeadingSize, ParagraphOptions, ParagraphSize, StatTileOptions, StatTileTrendDirection, StatTileTone, DatePickerOptions, DatePickerDevice, DatePickerDay, ToastOptions, ToastVariant, ToastIntent, ToastPlacement, TooltipOptions, IconNameType, RadioOptions, BadgeOptions, SwitchOptions, SliderOptions, TabOptions, DialogOptions } from '@marwes-ui/core';
-export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, Density, FontLoadingConfig, FontLoadingMode, FontLoadingOptions, IconName, MarwesThemeScriptOptions, MarwesThemeStyleOptions, MwAvailableFont, MwFontFallback, MwGoogleFontFamily, MwStyledTheme, MwThemeVarName, MwThemeVarNames, MwThemeVarReference, MwThemeVars, ResolvedTheme, SpacingSize, Spacings, SwitchSize, Theme, ThemeInput, ThemeMode, ThemeModeAttribute, ThemeModeRootTarget, ThemePreference, ThemeVariableStrategy, ToneName, createFontStack, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
+import { ThemeInput, ThemePreference, ThemeMode, FontLoadingConfig, ThemeVariableStrategy, MwTheme, ResolvedTheme, ButtonOptions, IconName as IconName$1, SelectOptions, SelectAppearance as SelectAppearance$1, SelectOption as SelectOption$1, InputOptions, InputOtpOptions, TextareaOptions, RichTextOptions, CurrencyCode, iconRegistry, IconSize, IconStrokeWidth, AvatarOptions, DividerOptions, DividerSize, DividerOrientation, ContextMenuOptions, ContextMenuEntry, ContextMenuActionItem, BreadcrumbOptions, BreadcrumbItem, SpinnerOptions, SkeletonOptions, ProgressBarOptions, SpacingOptions, SpacingSize, HeadingOptions, HeadingSize, ParagraphOptions, ParagraphSize, TextOptions, TextVariant, TextAs, StatTileOptions, StatTileTrendDirection, StatTileTone, DatePickerOptions, DatePickerDevice, DatePickerDay, DrawerOptions, ToastOptions, ToastVariant, ToastIntent, ToastPlacement, TooltipOptions, IconNameType, BadgeOptions, BannerOptions, SwitchOptions, SliderOptions, TabOptions, SegmentedControlVariant, SegmentedControlSize, PaginationControlDisplay, PaginationGetItemAriaLabel, DialogOptions, CheckboxProps as CheckboxProps$1 } from '@marwes-ui/core';
+export { AvatarSize, AvatarType, BadgeVariant, BannerVariant, BreadcrumbItem, ButtonAction, ButtonSize, ButtonVariant, ContextMenuActionItem, ContextMenuDividerItem, ContextMenuEntry, Density, DrawerPlacement, DrawerSize, FontLoadingConfig, FontLoadingMode, FontLoadingOptions, IconName, MarwesThemeScriptOptions, MarwesThemeStyleOptions, MwAvailableFont, MwFontFallback, MwGoogleFontFamily, MwStyledTheme, MwTheme, MwThemeMedia, MwThemeVarName, MwThemeVarNames, MwThemeVarReference, MwThemeVars, PersonalityName, ResolvedTheme, SpacingSize, Spacings, SwitchSize, TextAs, TextVariant, Theme, ThemeBreakpointName, ThemeBreakpoints, ThemeInput, ThemeMode, ThemeModeAttribute, ThemeModeRootTarget, ThemePreference, ThemeVariableStrategy, ToneName, createFontStack, createMwTheme, createMwThemeMedia, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
 import * as React from 'react';
 export { MarwesThemeScript, MarwesThemeScriptProps, MarwesThemeStyle, MarwesThemeStyleProps, createMarwesThemeScript, createMarwesThemeStyle } from './ssr.js';
 
 type ThemeTarget = "provider" | "html" | "body";
 type ThemeAttribute = "class" | "data-theme" | "data-mode";
 
+type MarwesProviderChildren = React.ReactNode | ((mwTheme: MwTheme) => React.ReactNode);
 type MarwesProviderProps = {
     theme?: ThemeInput;
     defaultPreference?: ThemePreference;
@@ -22,7 +23,7 @@ type MarwesProviderProps = {
     attribute?: ThemeAttribute;
     disableTransitionOnChange?: boolean;
     variableStrategy?: ThemeVariableStrategy;
-    children: React.ReactNode;
+    children: MarwesProviderChildren;
 };
 declare function MarwesProvider({ theme, defaultPreference, preference: controlledPreference, defaultMode, mode: controlledMode, fontLoading, onPreferenceChange, onModeChange, storageKey, enableSystem, target, attribute, disableTransitionOnChange, variableStrategy, children, }: MarwesProviderProps): react_jsx_runtime.JSX.Element;
 
@@ -48,6 +49,14 @@ type ButtonProps = ButtonOptions & {
 };
 declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
 
+type IconButtonProps = Omit<ButtonProps, "children" | "hasVisibleText" | "iconLeft" | "iconOnly" | "iconRight"> & {
+    icon: IconName$1;
+    /** Accessible name — required for icon-only buttons. Prefer `label`; `ariaLabel` also accepted. */
+    label?: string;
+    ariaLabel?: string;
+};
+declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Purpose Components — Button
  *
@@ -107,34 +116,17 @@ declare function TextButton(props: TextButtonProps): react_jsx_runtime.JSX.Eleme
 type SuccessButtonProps = Omit<ButtonProps, "variant" | "as"> & {};
 declare function SuccessButton(props: SuccessButtonProps): react_jsx_runtime.JSX.Element;
 
-type InputProps = InputOptions & {
-    onValueChange?: (value: string) => void;
-    className?: string;
-};
-declare function Input(props: InputProps): react_jsx_runtime.JSX.Element;
-
 type SelectAppearance = SelectAppearance$1;
 type SelectOption = SelectOption$1;
 type SelectProps = SelectOptions & {
     onValueChange?: (value: string) => void;
     className?: string;
 };
-declare function Select(props: SelectProps): react_jsx_runtime.JSX.Element;
-
-type TextareaProps = TextareaOptions & {
-    onValueChange?: (value: string) => void;
-    className?: string;
-};
-declare function Textarea(props: TextareaProps): react_jsx_runtime.JSX.Element;
 
-type RichTextProps = RichTextOptions & {
+type InputProps = InputOptions & {
     onValueChange?: (value: string) => void;
     className?: string;
 };
-declare const RichText: React.ForwardRefExoticComponent<RichTextOptions & {
-    onValueChange?: (value: string) => void;
-    className?: string;
-} & React.RefAttributes<HTMLDivElement>>;
 
 type InputFieldProps = {
     /** Optional: if omitted, we generate one via useId(). */
@@ -243,15 +235,46 @@ type InputFieldProps = {
  */
 declare function InputField(props: InputFieldProps): React.ReactElement;
 
+/**
+ * Props for the bare `InputOtp` atom.
+ *
+ * The atom renders only the OTP cells + hidden input — no label, helper,
+ * or error region. Use `InputOtpField` for labeled forms; reach for the
+ * atom directly only when you need a custom layout.
+ */
 type InputOtpProps = Omit<InputOtpOptions, "describedBy"> & {
+    onValueChange?: (value: string) => void;
+    className?: string;
+    /** ID(s) of elements that describe the input. Pre-merged by `InputOtpField`. */
+    describedBy?: string;
+};
+
+type InputOtpFieldProps = {
+    /** Optional: if omitted, a stable id is generated via useId(). */
+    id?: string;
+    /** Field label (required for accessibility). */
     label: string;
+    /** Optional helper text shown below the cells. */
     helperText?: string;
+    /** Optional error message. */
     error?: string;
+    /** Props forwarded to the bare `InputOtp` atom. */
+    inputOtp?: Omit<InputOtpProps, "id" | "ariaLabel" | "ariaLabelledBy" | "describedBy">;
+    /** Additional aria-describedby IDs to merge with internal helper/error IDs. */
     ariaDescribedBy?: string;
-    onValueChange?: (value: string) => void;
     className?: string;
 };
-declare function InputOtp(props: InputOtpProps): React.ReactElement;
+/**
+ * InputOtpField (Molecule)
+ *
+ * Labeled wrapper around the `InputOtp` atom. Renders the visible label,
+ * the OTP cells (via the atom), and optional helper/error regions.
+ * Auto-wires `aria-labelledby` and `aria-describedby`.
+ *
+ * Replaces the old self-contained `InputOtp` field — use this anywhere
+ * you previously used `<InputOtp label={...} />`.
+ */
+declare function InputOtpField(props: InputOtpFieldProps): React.ReactElement;
 
 type SelectFieldVariant = "default" | "date";
 type SelectFieldProps = {
@@ -265,16 +288,27 @@ type SelectFieldProps = {
 };
 declare function SelectField(props: SelectFieldProps): React.ReactElement;
 
+type TextareaProps = TextareaOptions & {
+    onValueChange?: (value: string) => void;
+    className?: string;
+};
+
 type TextareaFieldProps = {
     id?: string;
     label: string;
     helperText?: string;
+    counterText?: string;
     error?: string;
     textarea: TextareaProps;
     ariaDescribedBy?: string;
 };
 declare function TextareaField(props: TextareaFieldProps): React.ReactElement;
 
+type RichTextProps = RichTextOptions & {
+    onValueChange?: (value: string) => void;
+    className?: string;
+};
+
 type RichTextFieldProps = {
     id?: string;
     label: string;
@@ -620,10 +654,10 @@ type IconProps = {
      * Common props
      */
     className?: string;
-    "aria-label"?: string;
+    ariaLabel?: string;
     decorative?: boolean;
 };
-declare function Icon({ name, size, strokeWidth, className, "aria-label": ariaLabel, decorative, }: IconProps): react_jsx_runtime.JSX.Element;
+declare function Icon({ name, size, strokeWidth, className, ariaLabel, decorative }: IconProps): react_jsx_runtime.JSX.Element;
 
 interface AvatarProps extends AvatarOptions, Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     dataAttributes?: Record<string, string>;
@@ -654,217 +688,6 @@ declare function PresenceAvatar(props: PresenceAvatarProps): React.ReactElement;
 type TeamAvatarGroupProps = AvatarGroupProps;
 declare function TeamAvatarGroup(props: TeamAvatarGroupProps): React.ReactElement;
 
-/**
- * React adapter for Marwes Checkbox.
- * - Renders a native <input type="checkbox"> using the core render kit.
- * - Applies strict a11y fields and CSS vars.
- * - Sets `indeterminate` via DOM property (not an HTML attribute).
- */
-
-type CheckboxProps = CheckboxProps$1 & {
-    /**
-     * Called with the next checked value when the user toggles the checkbox.
-     * For indeterminate state: browser toggling typically results in `checked=true` and `indeterminate=false`
-     * unless you keep controlling it.
-     */
-    onCheckedChange?: (checked: boolean) => void;
-    /**
-     * Escape hatch for consumers that want raw event access.
-     * (Optional – keep if you want parity with other components.)
-     */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-};
-/**
- * Checkbox (Atom)
- *
- * Low-level checkbox control built on a native `<input type="checkbox">`.
- * Use this when you need custom layout or when the label/description is handled
- * elsewhere (e.g. inside a list item, table row, or custom field wrapper).
- *
- * For most forms, prefer `CheckboxField`, which composes `Checkbox` with
- * label/description/error wiring and consistent spacing.
- *
- * Accessibility
- * - Provide **either** `ariaLabel` **or** `ariaLabelledBy` (or use `CheckboxField` which wires a `<label>`).
- * - Use `ariaDescribedBy` to connect supporting text (help/error).
- * - `indeterminate` is applied via a DOM property, not an HTML attribute.
- *
- * @example Basic (uncontrolled)
- * ```tsx
- * <Checkbox ariaLabel="Subscribe to updates" defaultChecked />
- * ```
- *
- * @example Controlled
- * ```tsx
- * const [checked, setChecked] = React.useState(false);
- *
- * <Checkbox
- *   ariaLabel="Accept terms"
- *   checked={checked}
- *   onCheckedChange={setChecked}
- * />
- * ```
- *
- * @example Indeterminate (mixed)
- * ```tsx
- * const [checked, setChecked] = React.useState(false);
- * const [mixed, setMixed] = React.useState(true);
- *
- * <Checkbox
- *   ariaLabel="Select all"
- *   checked={checked}
- *   indeterminate={mixed}
- *   onCheckedChange={(next) => {
- *     setMixed(false);   // first interaction clears mixed state
- *     setChecked(next);
- *   }}
- * />
- * ```
- *
- * @example With external label + description
- * ```tsx
- * const id = "terms";
- * const descId = "terms-desc";
- *
- * <>
- *   <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
- *     <Checkbox id={id} ariaDescribedBy={descId} />
- *     <label htmlFor={id}>I accept the terms</label>
- *   </div>
- *   <div id={descId}>Required to continue.</div>
- * </>
- * ```
- */
-declare function Checkbox(props: CheckboxProps): React.ReactElement;
-
-type CheckboxFieldProps = {
-    /** Optional: if omitted, we generate one via useId(). */
-    id?: string;
-    /** Field content (rendered by adapter). */
-    label: React.ReactNode;
-    description?: React.ReactNode;
-    error?: React.ReactNode;
-    /** Props forwarded to the Checkbox atom. */
-    checkbox: CheckboxProps;
-    /** Additional aria-describedby IDs to merge with internal description/error IDs. */
-    ariaDescribedBy?: string;
-};
-/**
- * CheckboxField (Molecule) — Recommended
- *
- * A convenient, accessible wrapper around `Checkbox` that provides:
- * - a clickable `<label>` wired via `htmlFor`/`id`
- * - optional `description` and `error` regions
- * - automatic `aria-describedby` wiring (description + error + any external ids)
- * - automatic invalid state when `error` is present
- *
- * Use `CheckboxField` for most forms. Use `Checkbox` directly only when you need
- * a highly custom layout (tables, list rows, compound list items, etc.).
- *
- * Accessibility
- * - Generates a stable `id` via `useId()` when `id` is not provided.
- * - Always renders a real `<label>` element connected to the checkbox control.
- * - When `description` and/or `error` are present, it sets `aria-describedby`
- *   on the checkbox to reference their ids.
- * - When `error` is present, the checkbox is marked invalid (aria-invalid via core).
- *
- * @example Minimal (recommended)
- * ```tsx
- * <CheckboxField
- *   label="Subscribe to updates"
- *   checkbox={{ defaultChecked: true }}
- * />
- * ```
- *
- * @example With description
- * ```tsx
- * <CheckboxField
- *   label="Subscribe to updates"
- *   description="We'll only email you about important product changes."
- *   checkbox={{}}
- * />
- * ```
- *
- * @example With error (invalid state)
- * ```tsx
- * <CheckboxField
- *   label="Accept terms"
- *   error="You must accept the terms to continue."
- *   checkbox={{ required: true }}
- * />
- * ```
- *
- * @example Controlled
- * ```tsx
- * const [checked, setChecked] = React.useState(false);
- *
- * <CheckboxField
- *   label="Accept terms"
- *   checkbox={{
- *     checked,
- *     onCheckedChange: setChecked,
- *   }}
- * />
- * ```
- *
- * @example Indeterminate (mixed)
- * ```tsx
- * const [checked, setChecked] = React.useState(false);
- * const [mixed, setMixed] = React.useState(true);
- *
- * <CheckboxField
- *   label="Select all"
- *   description="Applies to all items in the current view."
- *   checkbox={{
- *     checked,
- *     indeterminate: mixed,
- *     onCheckedChange: (next) => {
- *       setMixed(false);
- *       setChecked(next);
- *     },
- *   }}
- * />
- * ```
- *
- * @example Custom describedBy (merge with internal description/error)
- * ```tsx
- * <CheckboxField
- *   ariaDescribedBy="my-extra-help"
- *   label="Enable telemetry"
- *   description="Helps us improve the product."
- *   checkbox={{}}
- * />
- *
- * <div id="my-extra-help">This setting can be changed later.</div>
- * ```
- */
-declare function CheckboxField(props: CheckboxFieldProps): React.ReactElement;
-
-interface CheckboxGroupFieldOption {
-    value: string;
-    label: React.ReactNode;
-    disabled?: boolean;
-    indeterminate?: boolean;
-}
-type CheckboxGroupFieldCheckboxProps = Omit<CheckboxProps, "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "checked" | "defaultChecked" | "disabled" | "id" | "indeterminate" | "invalid" | "name" | "onChange" | "onCheckedChange" | "required" | "value">;
-interface CheckboxGroupFieldProps {
-    label: React.ReactNode;
-    options: CheckboxGroupFieldOption[];
-    description?: React.ReactNode;
-    error?: React.ReactNode;
-    value?: string[];
-    onChange?: (value: string[]) => void;
-    defaultValue?: string[];
-    checkbox?: CheckboxGroupFieldCheckboxProps;
-    disabled?: boolean;
-    required?: boolean;
-    name?: string;
-    id?: string;
-    ariaDescribedBy?: string;
-    dataAttributes?: Record<string, string>;
-}
-declare function CheckboxGroupField(props: CheckboxGroupFieldProps): React.ReactElement;
-
 /**
  * React adapter for Marwes Divider component.
  * - Renders semantic <hr> using the core divider recipe.
@@ -948,6 +771,19 @@ declare const Divider: React.ForwardRefExoticComponent<DividerOptions & Omit<Rea
     style?: React.CSSProperties;
 } & React.RefAttributes<HTMLHRElement>>;
 
+interface ContextMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onSelect">, ContextMenuOptions {
+    items: readonly ContextMenuEntry[];
+    onSelect?: (value: string, item: ContextMenuActionItem) => void;
+}
+declare function ContextMenu(props: ContextMenuProps): React.ReactElement;
+
+interface BreadcrumbProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, BreadcrumbOptions {
+    items: readonly BreadcrumbItem[];
+    onItemSelect?: (value: string, item: BreadcrumbItem, event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    onHomeClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+}
+declare function Breadcrumb(props: BreadcrumbProps): React.ReactElement;
+
 interface SpinnerProps extends SpinnerOptions, Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     dataAttributes?: Record<string, string>;
 }
@@ -956,8 +792,23 @@ declare function Spinner(props: SpinnerProps): React.ReactElement;
 type ButtonSpinnerProps = SpinnerProps & {
     inverted?: boolean;
 };
+/**
+ * ButtonSpinner — purpose variant of Spinner for in-button loading states.
+ *
+ * Defaults (`variant="classic"`, `size="xs"`, `decorative=true`) are
+ * intentionally overridable: the `Button` atom forwards
+ * `loading.spinnerVariant` through this prop. If you want a different
+ * loading look, just override the prop; use the base `Spinner` directly
+ * only when you need to escape the button-loading data-attributes.
+ */
 declare function ButtonSpinner(props: ButtonSpinnerProps): React.ReactElement;
 type EmptyStateSpinnerProps = SpinnerProps;
+/**
+ * EmptyStateSpinner — purpose variant of Spinner for empty/loading-state regions.
+ *
+ * Defaults (`variant="dots-round"`, `size="lg"`, `decorative=true`) are
+ * intentionally overridable — same rationale as `ButtonSpinner`.
+ */
 declare function EmptyStateSpinner(props: EmptyStateSpinnerProps): React.ReactElement;
 
 interface SkeletonProps extends SkeletonOptions, Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
@@ -965,6 +816,11 @@ interface SkeletonProps extends SkeletonOptions, Omit<React.HTMLAttributes<HTMLS
 }
 declare function Skeleton(props: SkeletonProps): React.ReactElement;
 
+interface ProgressBarProps extends ProgressBarOptions, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    dataAttributes?: Record<string, string>;
+}
+declare function ProgressBar(props: ProgressBarProps): React.ReactElement;
+
 /**
  * React adapter for Marwes Spacing component.
  * - Renders a decorative, aria-hidden div using the core spacing recipe.
@@ -1106,6 +962,13 @@ type H1Props = Omit<HeadingOptions, "level"> & {
  * Semantic top-level heading rendered as `<h1>`.
  * Supports visual size override for cases where semantic and visual hierarchy differ.
  *
+ * @remarks
+ * Marwes officially styles H1-H3 only. For semantic H4-H6 (deep section
+ * nesting, accessibility outlines), render `<Text headingLevel={4..6}
+ * variant="..." />` — it produces the correct heading tag while letting
+ * the consumer pick the visual variant. Type your wrappers against
+ * `SemanticHeadingLevel` from `@marwes-ui/core`.
+ *
  * @example Basic usage
  * ```tsx
  * <H1>Page Title</H1>
@@ -1155,6 +1018,10 @@ type H2Props = Omit<HeadingOptions, "level"> & {
  * Semantic section heading rendered as `<h2>`.
  * Supports visual size override for cases where semantic and visual hierarchy differ.
  *
+ * @remarks
+ * Marwes officially styles H1-H3 only. For semantic H4-H6, use
+ * `<Text headingLevel={4..6} variant="..." />`.
+ *
  * @example Basic usage
  * ```tsx
  * <H2>Section Title</H2>
@@ -1199,6 +1066,10 @@ type H3Props = Omit<HeadingOptions, "level"> & {
  * Semantic subsection heading rendered as `<h3>`.
  * Supports visual size override for cases where semantic and visual hierarchy differ.
  *
+ * @remarks
+ * Marwes officially styles H1-H3 only — H3 is the deepest blessed rung.
+ * For H4-H6, use `<Text headingLevel={4..6} variant="..." />`.
+ *
  * @example Basic usage
  * ```tsx
  * <H3>Subsection Title</H3>
@@ -1260,27 +1131,98 @@ type ParagraphProps = ParagraphOptions & {
  */
 declare function Paragraph(props: ParagraphProps): React.ReactElement;
 
-interface StatTileProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "title">, Pick<StatTileOptions, "dataAttributes"> {
-    label: React.ReactNode;
-    value: React.ReactNode;
-    subtitle?: React.ReactNode;
-    trendValue?: React.ReactNode;
-    trendDirection?: StatTileTrendDirection;
-    tone?: StatTileTone;
-}
-declare function StatTile(props: StatTileProps): React.ReactElement;
+/**
+ * React adapter for Marwes Text component.
+ * - Renders non-heading typography styles without creating document outline.
+ */
 
-interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onSelect">, Pick<DatePickerOptions, "monthLabel" | "weekdayLabels" | "weeks" | "previousYearLabel" | "previousMonthLabel" | "nextMonthLabel" | "nextYearLabel" | "cancelLabel" | "applyLabel" | "calendarLabel" | "dataAttributes"> {
-    device?: DatePickerDevice;
-    onPreviousYear?: () => void;
-    onPreviousMonth?: () => void;
-    onNextMonth?: () => void;
-    onNextYear?: () => void;
-    onDaySelect?: (day: DatePickerDay) => void;
+type TextProps = TextOptions & {
+    /**
+     * Visual typography variant.
+     * @default "caption"
+     */
+    variant?: TextVariant;
+    /**
+     * Rendered HTML element.
+     * @default "span"
+     */
+    as?: TextAs;
+    /**
+     * Content of the text node.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Inline styles.
+     */
+    style?: React.CSSProperties;
+};
+declare function Text(props: TextProps): React.ReactElement;
+type TextComponent = typeof Text;
+declare const TypographyText: typeof Text;
+
+interface StatTileProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "title">, Pick<StatTileOptions, "dataAttributes"> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    subtitle?: React.ReactNode;
+    trendValue?: React.ReactNode;
+    trendDirection?: StatTileTrendDirection;
+    tone?: StatTileTone;
+}
+declare function StatTile(props: StatTileProps): React.ReactElement;
+
+interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onSelect">, Pick<DatePickerOptions, "monthLabel" | "weekdayLabels" | "weeks" | "previousYearLabel" | "previousMonthLabel" | "nextMonthLabel" | "nextYearLabel" | "cancelLabel" | "applyLabel" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "calendarLabel" | "dataAttributes"> {
+    device?: DatePickerDevice;
+    onPreviousYear?: () => void;
+    onPreviousMonth?: () => void;
+    onNextMonth?: () => void;
+    onNextYear?: () => void;
+    onDaySelect?: (day: DatePickerDay) => void;
     onCancel?: () => void;
     onApply?: () => void;
 }
-declare function DatePicker(props: DatePickerProps): React.ReactElement;
+
+type DatePickerFieldProps = {
+    /** Optional: if omitted, a stable id is generated via useId(). */
+    id?: string;
+    /** Field label (required for accessibility). */
+    label: string;
+    /** Optional helper text shown below the calendar. */
+    helperText?: string;
+    /** Optional error message. */
+    error?: string;
+    /** Props forwarded to the DatePicker atom. */
+    datePicker?: Omit<DatePickerProps, "ariaLabel" | "ariaLabelledBy" | "calendarLabel">;
+    /** Additional aria-describedby IDs to merge with internal helper/error IDs. */
+    ariaDescribedBy?: string;
+    className?: string;
+};
+/**
+ * DatePickerField (Molecule)
+ *
+ * A labeled wrapper around `DatePicker` that:
+ * - renders a visible `<label>` wired via `aria-labelledby`
+ * - generates a stable id via `useId()` when one isn't provided
+ * - optionally renders helper text and error messages
+ * - threads `aria-describedby` to the calendar when helper/error are present
+ */
+declare function DatePickerField(props: DatePickerFieldProps): React.ReactElement;
+
+interface DrawerProps extends DrawerOptions {
+    id?: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    onClose?: () => void;
+    className?: string;
+    panelClassName?: string;
+    dataAttributes?: Record<string, string>;
+}
+declare function Drawer(props: DrawerProps): React.ReactElement;
 
 interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     /** Optional title rendered above the body content */
@@ -1382,27 +1324,6 @@ interface TooltipGroupProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
 }
 declare function TooltipGroup(props: TooltipGroupProps): React.ReactElement;
 
-/**
- * React adapter for Marwes Accordion.
- * - Renders a compound structure: wrapper div > trigger button + panel div.
- * - id is optional; falls back to React.useId() for aria wiring.
- */
-
-interface AccordionProps {
-    /** Unique id for aria wiring. Defaults to React.useId() when omitted. */
-    id?: string;
-    open?: boolean;
-    disabled?: boolean;
-    /** Content of the trigger button header */
-    title: React.ReactNode;
-    /** Content shown in the collapsible panel */
-    children: React.ReactNode;
-    className?: string;
-    /** Called when the trigger is clicked */
-    onToggle?: () => void;
-}
-declare function Accordion(props: AccordionProps): React.ReactElement;
-
 /**
  * AccordionField (Molecule) — Recommended
  *
@@ -1575,95 +1496,6 @@ type SectionsAccordionProps = AccordionFieldProps;
  */
 declare function SectionsAccordion(props: SectionsAccordionProps): React.ReactElement;
 
-/**
- * React adapter for Marwes Radio.
- * - Renders a native <input type="radio"> using the core render kit.
- * - Applies strict a11y fields and modifier classes.
- */
-
-type RadioProps = RadioOptions & {
-    /**
-     * Called with the next checked value when the user selects this radio.
-     * In a group, only the newly selected radio fires `true`.
-     */
-    onCheckedChange?: (checked: boolean) => void;
-    /** Raw event access escape hatch. */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-};
-/**
- * Radio (Atom)
- *
- * Low-level radio control built on a native `<input type="radio">`.
- * Use this when you need custom layout or when the label/grouping is handled
- * elsewhere (e.g. inside a list item, table row, or custom field wrapper).
- *
- * For most forms, prefer `RadioGroupField`, which composes `Radio` with
- * group label/description/error wiring, selection state, and consistent spacing.
- *
- * **AI Context:**
- * - Renders a native `<input type="radio">` using the core `radioRecipe`
- * - Applies strict a11y attributes: `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-invalid`
- * - Supports controlled (`checked` + `onCheckedChange`) and uncontrolled (`defaultChecked`) modes
- * - Modifier classes: `mw-radio`, `mw-radio--disabled`, `mw-radio--invalid`
- *
- * Accessibility:
- * - Provide **either** `ariaLabel` **or** `ariaLabelledBy` (or wrap with a `<label htmlFor>`).
- * - Use the same `name` attribute on all radios in a group for native keyboard navigation.
- * - Use `ariaDescribedBy` to connect supporting text (help/error).
- *
- * @example Basic (uncontrolled)
- * ```tsx
- * <Radio ariaLabel="Option A" name="preference" defaultChecked />
- * ```
- *
- * @example Controlled
- * ```tsx
- * const [selected, setSelected] = React.useState("a");
- *
- * <Radio
- *   name="color"
- *   value="a"
- *   checked={selected === "a"}
- *   onCheckedChange={(checked) => { if (checked) setSelected("a"); }}
- *   ariaLabel="Red"
- * />
- * ```
- *
- * @example With external label
- * ```tsx
- * const id = "opt-1";
- *
- * <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
- *   <Radio id={id} name="group" value="a" />
- *   <label htmlFor={id}>Option A</label>
- * </div>
- * ```
- *
- * @example In a group (manual)
- * ```tsx
- * const [selected, setSelected] = React.useState("a");
- * const options = [
- *   { value: "a", label: "Option A" },
- *   { value: "b", label: "Option B" },
- * ];
- *
- * <div role="radiogroup" aria-label="Preference">
- *   {options.map(({ value, label }) => (
- *     <label key={value}>
- *       <Radio
- *         name="preference"
- *         value={value}
- *         checked={selected === value}
- *         onCheckedChange={(checked) => { if (checked) setSelected(value); }}
- *       />
- *       {label}
- *     </label>
- *   ))}
- * </div>
- * ```
- */
-declare function Radio(props: RadioProps): React.ReactElement;
-
 /**
  * RadioGroupField (Molecule) — Recommended
  *
@@ -1734,6 +1566,7 @@ declare function Radio(props: RadioProps): React.ReactElement;
 interface RadioGroupFieldOption {
     value: string;
     label: React.ReactNode;
+    description?: React.ReactNode;
     disabled?: boolean;
 }
 interface RadioGroupFieldProps {
@@ -1992,6 +1825,68 @@ type NotificationBadgeProps = BadgeProps;
  */
 declare function NotificationBadge(props: NotificationBadgeProps): React.ReactElement;
 
+type BannerProps = BannerOptions & {
+    /** Banner message content. */
+    children?: React.ReactNode;
+    /** Optional CTA/action content rendered in the action slot. */
+    action?: React.ReactNode;
+    /** Custom icon element. If omitted, a default status icon is rendered when showIcon is true. */
+    icon?: React.ReactNode;
+    /** Callback when the dismiss button is clicked. */
+    onDismiss?: () => void;
+    className?: string;
+    id?: string;
+};
+declare function Banner(props: BannerProps): React.ReactElement;
+
+/**
+ * Purpose Components — Banner
+ *
+ * Thin semantic wrappers that preset the `variant` prop and emit
+ * canonical `data-purpose` and `data-intent` metadata.
+ */
+
+type InfoBannerProps = Omit<BannerProps, "variant">;
+/**
+ * InfoBanner - Informational page-level messages.
+ *
+ * @example
+ * ```tsx
+ * <InfoBanner>Your profile has been updated.</InfoBanner>
+ * ```
+ */
+declare function InfoBanner(props: InfoBannerProps): React.ReactElement;
+type SuccessBannerProps = Omit<BannerProps, "variant">;
+/**
+ * SuccessBanner - Positive confirmation messages.
+ *
+ * @example
+ * ```tsx
+ * <SuccessBanner>Payment processed successfully.</SuccessBanner>
+ * ```
+ */
+declare function SuccessBanner(props: SuccessBannerProps): React.ReactElement;
+type WarningBannerProps = Omit<BannerProps, "variant">;
+/**
+ * WarningBanner - Caution or upcoming deadline messages.
+ *
+ * @example
+ * ```tsx
+ * <WarningBanner>Your subscription expires in 3 days.</WarningBanner>
+ * ```
+ */
+declare function WarningBanner(props: WarningBannerProps): React.ReactElement;
+type ErrorBannerProps = Omit<BannerProps, "variant">;
+/**
+ * ErrorBanner - Error or critical issue messages.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBanner>Failed to save changes. Please try again.</ErrorBanner>
+ * ```
+ */
+declare function ErrorBanner(props: ErrorBannerProps): React.ReactElement;
+
 type SwitchProps = SwitchOptions & {
     /** Label text rendered next to the toggle */
     children?: React.ReactNode;
@@ -2000,7 +1895,6 @@ type SwitchProps = SwitchOptions & {
     onCheckedChange?: (checked: boolean) => void;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 };
-declare function Switch(props: SwitchProps): React.ReactElement;
 
 type SwitchFieldProps = {
     id?: string;
@@ -2027,12 +1921,6 @@ type SliderProps = SliderOptions & NativeSliderProps & {
     onValueChange?: (value: number) => void;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
 };
-declare const Slider: React.ForwardRefExoticComponent<SliderOptions & NativeSliderProps & {
-    className?: string;
-    style?: React.CSSProperties;
-    onValueChange?: (value: number) => void;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-} & React.RefAttributes<HTMLInputElement>>;
 
 type SliderFieldLabelPosition = "top" | "inline";
 type SliderFieldProps = {
@@ -2113,6 +2001,125 @@ declare function ContentTabs(props: ContentTabsProps): React.ReactElement;
 type SettingsTabsProps = TabGroupProps;
 declare function SettingsTabs(props: SettingsTabsProps): React.ReactElement;
 
+/**
+ * React adapter for Marwes SegmentedControl.
+ * Single-select segmented toggle using radiogroup semantics.
+ */
+
+interface SegmentedControlItem<T extends string = string> {
+    value: T;
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
+interface SegmentedControlProps<T extends string = string> {
+    items: SegmentedControlItem<T>[];
+    value?: T;
+    defaultValue?: T;
+    onValueChange?: (value: T) => void;
+    variant?: SegmentedControlVariant;
+    size?: SegmentedControlSize;
+    disabled?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    /** Stretch the control to fill its container. Defaults to inline width. */
+    fullWidth?: boolean;
+    className?: string;
+    id?: string;
+    style?: React.CSSProperties;
+}
+
+type SegmentedControlFieldProps<T extends string = string> = {
+    /** Optional: if omitted, a stable id is generated via useId(). */
+    id?: string;
+    /** Field label (required for accessibility). */
+    label: React.ReactNode;
+    /** Optional description text shown below the label. */
+    description?: React.ReactNode;
+    /** Optional error message. */
+    error?: React.ReactNode;
+    /** Props forwarded to the SegmentedControl atom. */
+    segmentedControl: Omit<SegmentedControlProps<T>, "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy">;
+    /** Additional aria-describedby IDs to merge with internal description/error IDs. */
+    ariaDescribedBy?: string;
+    className?: string;
+};
+/**
+ * SegmentedControlField (Molecule)
+ *
+ * A labeled wrapper around `SegmentedControl` that:
+ * - renders a visible label wired via aria-labelledby
+ * - generates a stable id with useId() when one isn't supplied
+ * - optionally renders description and error regions
+ * - threads aria-describedby to the radiogroup
+ */
+declare function SegmentedControlField<T extends string = string>(props: SegmentedControlFieldProps<T>): React.ReactElement;
+
+interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange" | "children"> {
+    pageCount: number;
+    page?: number;
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    siblingCount?: number;
+    boundaryCount?: number;
+    maxVisibleItems?: number;
+    controlDisplay?: PaginationControlDisplay;
+    adaptive?: boolean;
+    showPrevNext?: boolean;
+    showFirstLast?: boolean;
+    disabled?: boolean;
+    firstLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    lastLabel?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    getItemAriaLabel?: PaginationGetItemAriaLabel;
+}
+
+type PaginationFieldProps = {
+    /** Optional: if omitted, a stable id is generated via useId(). */
+    id?: string;
+    /** Field label (required for accessibility). */
+    label: React.ReactNode;
+    /** Optional description text shown below the label. */
+    description?: React.ReactNode;
+    /** Optional error message. */
+    error?: React.ReactNode;
+    /** Props forwarded to the Pagination atom. */
+    pagination: Omit<PaginationProps, "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy">;
+    /** Additional aria-describedby IDs to merge with internal description/error IDs. */
+    ariaDescribedBy?: string;
+    className?: string;
+};
+/**
+ * PaginationField (Molecule)
+ *
+ * A labeled wrapper around `Pagination` that:
+ * - renders a visible label wired via aria-labelledby
+ * - generates a stable id with useId() when one isn't supplied
+ * - optionally renders description and error regions
+ * - threads aria-describedby to the pagination nav
+ */
+declare function PaginationField(props: PaginationFieldProps): React.ReactElement;
+
+/**
+ * React adapter for Marwes SkipLink.
+ * Visually hidden anchor that becomes visible on focus, lets keyboard
+ * users jump to a target landmark (typically <main>).
+ */
+
+interface SkipLinkProps {
+    /** Anchor href, typically a fragment like "#main". */
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function SkipLink(props: SkipLinkProps): React.ReactElement;
+
 interface DialogProps extends DialogOptions {
     id?: string;
     title?: React.ReactNode;
@@ -2128,6 +2135,8 @@ declare function Dialog(props: DialogProps): React.ReactElement;
 interface DialogFooterControls {
     close: () => void;
 }
+type DialogModalTone = "default" | "calm";
+type DialogModalDivider = "visible" | "hidden";
 interface DialogModalProps extends Omit<DialogProps, "footer" | "onClose"> {
     open?: boolean;
     defaultOpen?: boolean;
@@ -2137,6 +2146,9 @@ interface DialogModalProps extends Omit<DialogProps, "footer" | "onClose"> {
     restoreFocus?: boolean;
     portalTarget?: HTMLElement | null;
     overlayClassName?: string;
+    surfaceWidth?: string | number;
+    tone?: DialogModalTone;
+    divider?: DialogModalDivider;
     footer?: React.ReactNode | ((controls: DialogFooterControls) => React.ReactNode);
 }
 declare function DialogModal(props: DialogModalProps): React.ReactElement | null;
@@ -2161,4 +2173,154 @@ type InfoDialogProps = Omit<DialogModalProps, "footer"> & {
 };
 declare function InfoDialog(props: InfoDialogProps): React.ReactElement;
 
-export { Accordion, AccordionField, type AccordionFieldItem, type AccordionFieldProps, type AccordionProps, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, Badge, BadgeGroup, type BadgeGroupProps, type BadgeProps, BrightnessSlider, type BrightnessSliderProps, Button, type ButtonProps, ButtonSpinner, type ButtonSpinnerProps, CancelButton, type CancelButtonProps, Card, type CardProps, Checkbox, CheckboxField, type CheckboxFieldProps, CheckboxGroupField, type CheckboxGroupFieldOption, type CheckboxGroupFieldProps, type CheckboxProps, CloseButton, type CloseButtonProps, ConfirmButton, type ConfirmButtonProps, ConfirmDialog, type ConfirmDialogProps, ContentTabs, type ContentTabsProps, CopyButton, type CopyButtonProps, CreateButton, type CreateButtonProps, CurrencyField, type CurrencyFieldProps, DateOfBirthField, type DateOfBirthFieldProps, DatePicker, type DatePickerProps, DestructiveButton, type DestructiveButtonProps, DestructiveDialog, type DestructiveDialogProps, Dialog, type DialogFooterControls, DialogModal, type DialogModalProps, type DialogProps, Divider, type DividerProps, DownloadButton, type DownloadButtonProps, DropdownButton, type DropdownButtonProps, DropdownField, type DropdownFieldProps, EditButton, type EditButtonProps, EmailField, type EmailFieldProps, EmptyStateSpinner, type EmptyStateSpinnerProps, ErrorToast, type ErrorToastProps, FAQAccordion, type FAQAccordionProps, FeatureToggle, type FeatureToggleProps, FilterButton, type FilterButtonProps, H1, type H1Props, H2, type H2Props, H3, type H3Props, Icon, type IconProps, InfoDialog, type InfoDialogProps, InfoToast, type InfoToastProps, Input, InputField, type InputFieldProps, InputOtp, type InputOtpProps, type InputProps, LinkButton, type LinkButtonProps, type ManagedToast, MarwesProvider, type MarwesProviderProps, NavigationTabs, type NavigationTabsProps, NotificationBadge, type NotificationBadgeProps, OptionRadioGroup, type OptionRadioGroupProps, Paragraph, type ParagraphProps, PasswordField, type PasswordFieldProps, PermissionSwitch, type PermissionSwitchProps, PhoneField, type PhoneFieldProps, PreferenceSwitch, type PreferenceSwitchProps, PresenceAvatar, type PresenceAvatarProps, PrimaryButton, type PrimaryButtonProps, PriorityBadge, type PriorityBadgeProps, ProductCard, type ProductCardProps, ProfileAvatar, type ProfileAvatarProps, ProfileCard, type ProfileCardProps, Radio, RadioGroupField, type RadioGroupFieldOption, type RadioGroupFieldProps, type RadioProps, RadiusSlider, type RadiusSliderProps, RatingRadioGroup, type RatingRadioGroupProps, RefreshButton, type RefreshButtonProps, RichText, RichTextField, type RichTextFieldProps, type RichTextProps, SaveButton, type SaveButtonProps, SearchButton, type SearchButtonProps, SearchField, type SearchFieldProps, SecondaryButton, type SecondaryButtonProps, SectionsAccordion, type SectionsAccordionProps, Select, type SelectAppearance, SelectField, type SelectFieldProps, type SelectOption, type SelectProps, SettingsAccordion, type SettingsAccordionProps, SettingsTabs, type SettingsTabsProps, type ShowToastOptions, Skeleton, type SkeletonProps, Slider, SliderField, type SliderFieldProps, type SliderProps, SortButton, type SortButtonProps, Spacer, type SpacerProps, Spacing, type SpacingProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, SubmitButton, type SubmitButtonProps, SuccessButton, type SuccessButtonProps, SuccessToast, type SuccessToastProps, Switch, SwitchField, type SwitchFieldProps, type SwitchProps, Tab, TabGroup, type TabGroupItem, type TabGroupProps, TabPanel, type TabPanelProps, type TabProps, TeamAvatarGroup, type TeamAvatarGroupProps, TextButton, type TextButtonProps, Textarea, TextareaField, type TextareaFieldProps, type TextareaProps, type ThemeModeContextValue, Toast, ToastContainer, type ToastContainerProps, type ToastController, type ToastProps, ToastProvider, type ToastProviderProps, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipProps, URLField, type URLFieldProps, UploadButton, type UploadButtonProps, VerifyButton, type VerifyButtonProps, VolumeSlider, type VolumeSliderProps, WarningToast, type WarningToastProps, YesNoRadioGroup, type YesNoRadioGroupProps, ZipCodeField, type ZipCodeFieldProps, useTheme, useThemeMode, useToast };
+/**
+ * React adapter for Marwes Checkbox.
+ * - Renders a native <input type="checkbox"> using the core render kit.
+ * - Applies strict a11y fields and CSS vars.
+ * - Sets `indeterminate` via DOM property (not an HTML attribute).
+ */
+
+type CheckboxProps = CheckboxProps$1 & {
+    /**
+     * Called with the next checked value when the user toggles the checkbox.
+     * For indeterminate state: browser toggling typically results in `checked=true` and `indeterminate=false`
+     * unless you keep controlling it.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Escape hatch for consumers that want raw event access.
+     * (Optional – keep if you want parity with other components.)
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+};
+
+type CheckboxFieldProps = {
+    /** Optional: if omitted, we generate one via useId(). */
+    id?: string;
+    /** Field content (rendered by adapter). */
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    /** Props forwarded to the Checkbox atom. */
+    checkbox: CheckboxProps;
+    /** Additional aria-describedby IDs to merge with internal description/error IDs. */
+    ariaDescribedBy?: string;
+};
+/**
+ * CheckboxField (Molecule) — Recommended
+ *
+ * A convenient, accessible wrapper around `Checkbox` that provides:
+ * - a clickable `<label>` wired via `htmlFor`/`id`
+ * - optional `description` and `error` regions
+ * - automatic `aria-describedby` wiring (description + error + any external ids)
+ * - automatic invalid state when `error` is present
+ *
+ * Use `CheckboxField` for most forms. Use `Checkbox` directly only when you need
+ * a highly custom layout (tables, list rows, compound list items, etc.).
+ *
+ * Accessibility
+ * - Generates a stable `id` via `useId()` when `id` is not provided.
+ * - Always renders a real `<label>` element connected to the checkbox control.
+ * - When `description` and/or `error` are present, it sets `aria-describedby`
+ *   on the checkbox to reference their ids.
+ * - When `error` is present, the checkbox is marked invalid (aria-invalid via core).
+ *
+ * @example Minimal (recommended)
+ * ```tsx
+ * <CheckboxField
+ *   label="Subscribe to updates"
+ *   checkbox={{ defaultChecked: true }}
+ * />
+ * ```
+ *
+ * @example With description
+ * ```tsx
+ * <CheckboxField
+ *   label="Subscribe to updates"
+ *   description="We'll only email you about important product changes."
+ *   checkbox={{}}
+ * />
+ * ```
+ *
+ * @example With error (invalid state)
+ * ```tsx
+ * <CheckboxField
+ *   label="Accept terms"
+ *   error="You must accept the terms to continue."
+ *   checkbox={{ required: true }}
+ * />
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [checked, setChecked] = React.useState(false);
+ *
+ * <CheckboxField
+ *   label="Accept terms"
+ *   checkbox={{
+ *     checked,
+ *     onCheckedChange: setChecked,
+ *   }}
+ * />
+ * ```
+ *
+ * @example Indeterminate (mixed)
+ * ```tsx
+ * const [checked, setChecked] = React.useState(false);
+ * const [mixed, setMixed] = React.useState(true);
+ *
+ * <CheckboxField
+ *   label="Select all"
+ *   description="Applies to all items in the current view."
+ *   checkbox={{
+ *     checked,
+ *     indeterminate: mixed,
+ *     onCheckedChange: (next) => {
+ *       setMixed(false);
+ *       setChecked(next);
+ *     },
+ *   }}
+ * />
+ * ```
+ *
+ * @example Custom describedBy (merge with internal description/error)
+ * ```tsx
+ * <CheckboxField
+ *   ariaDescribedBy="my-extra-help"
+ *   label="Enable telemetry"
+ *   description="Helps us improve the product."
+ *   checkbox={{}}
+ * />
+ *
+ * <div id="my-extra-help">This setting can be changed later.</div>
+ * ```
+ */
+declare function CheckboxField(props: CheckboxFieldProps): React.ReactElement;
+
+interface CheckboxGroupFieldOption {
+    value: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    indeterminate?: boolean;
+}
+type CheckboxGroupFieldCheckboxProps = Omit<CheckboxProps, "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "checked" | "defaultChecked" | "disabled" | "id" | "indeterminate" | "invalid" | "name" | "onChange" | "onCheckedChange" | "required" | "value">;
+interface CheckboxGroupFieldProps {
+    label: React.ReactNode;
+    options: CheckboxGroupFieldOption[];
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    defaultValue?: string[];
+    checkbox?: CheckboxGroupFieldCheckboxProps;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    ariaDescribedBy?: string;
+    dataAttributes?: Record<string, string>;
+}
+declare function CheckboxGroupField(props: CheckboxGroupFieldProps): React.ReactElement;
+
+export { AccordionField, type AccordionFieldItem, type AccordionFieldProps, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, Badge, BadgeGroup, type BadgeGroupProps, type BadgeProps, Banner, type BannerProps, Breadcrumb, type BreadcrumbProps, BrightnessSlider, type BrightnessSliderProps, Button, type ButtonProps, ButtonSpinner, type ButtonSpinnerProps, CancelButton, type CancelButtonProps, Card, type CardProps, CheckboxField, type CheckboxFieldProps, CheckboxGroupField, type CheckboxGroupFieldOption, type CheckboxGroupFieldProps, CloseButton, type CloseButtonProps, ConfirmButton, type ConfirmButtonProps, ConfirmDialog, type ConfirmDialogProps, ContentTabs, type ContentTabsProps, ContextMenu, type ContextMenuProps, CopyButton, type CopyButtonProps, CreateButton, type CreateButtonProps, CurrencyField, type CurrencyFieldProps, DateOfBirthField, type DateOfBirthFieldProps, DatePickerField, type DatePickerFieldProps, DestructiveButton, type DestructiveButtonProps, DestructiveDialog, type DestructiveDialogProps, Dialog, type DialogFooterControls, DialogModal, type DialogModalProps, type DialogProps, Divider, type DividerProps, DownloadButton, type DownloadButtonProps, Drawer, type DrawerProps, DropdownButton, type DropdownButtonProps, DropdownField, type DropdownFieldProps, EditButton, type EditButtonProps, EmailField, type EmailFieldProps, EmptyStateSpinner, type EmptyStateSpinnerProps, ErrorBanner, type ErrorBannerProps, ErrorToast, type ErrorToastProps, FAQAccordion, type FAQAccordionProps, FeatureToggle, type FeatureToggleProps, FilterButton, type FilterButtonProps, H1, type H1Props, H2, type H2Props, H3, type H3Props, Icon, IconButton, type IconButtonProps, type IconProps, InfoBanner, type InfoBannerProps, InfoDialog, type InfoDialogProps, InfoToast, type InfoToastProps, InputField, type InputFieldProps, InputOtpField, type InputOtpFieldProps, LinkButton, type LinkButtonProps, type ManagedToast, MarwesProvider, type MarwesProviderChildren, type MarwesProviderProps, NavigationTabs, type NavigationTabsProps, NotificationBadge, type NotificationBadgeProps, OptionRadioGroup, type OptionRadioGroupProps, PaginationField, type PaginationFieldProps, Paragraph, type ParagraphProps, PasswordField, type PasswordFieldProps, PermissionSwitch, type PermissionSwitchProps, PhoneField, type PhoneFieldProps, PreferenceSwitch, type PreferenceSwitchProps, PresenceAvatar, type PresenceAvatarProps, PrimaryButton, type PrimaryButtonProps, PriorityBadge, type PriorityBadgeProps, ProductCard, type ProductCardProps, ProfileAvatar, type ProfileAvatarProps, ProfileCard, type ProfileCardProps, ProgressBar, type ProgressBarProps, RadioGroupField, type RadioGroupFieldOption, type RadioGroupFieldProps, RadiusSlider, type RadiusSliderProps, RatingRadioGroup, type RatingRadioGroupProps, RefreshButton, type RefreshButtonProps, RichTextField, type RichTextFieldProps, SaveButton, type SaveButtonProps, SearchButton, type SearchButtonProps, SearchField, type SearchFieldProps, SecondaryButton, type SecondaryButtonProps, SectionsAccordion, type SectionsAccordionProps, SegmentedControlField, type SegmentedControlFieldProps, type SegmentedControlItem, type SelectAppearance, SelectField, type SelectFieldProps, type SelectFieldVariant, type SelectOption, SettingsAccordion, type SettingsAccordionProps, SettingsTabs, type SettingsTabsProps, type ShowToastOptions, Skeleton, type SkeletonProps, SkipLink, type SkipLinkProps, SliderField, type SliderFieldProps, SortButton, type SortButtonProps, Spacer, type SpacerProps, Spacing, type SpacingProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, SubmitButton, type SubmitButtonProps, SuccessBanner, type SuccessBannerProps, SuccessButton, type SuccessButtonProps, SuccessToast, type SuccessToastProps, SwitchField, type SwitchFieldProps, Tab, TabGroup, type TabGroupItem, type TabGroupProps, TabPanel, type TabPanelProps, type TabProps, TeamAvatarGroup, type TeamAvatarGroupProps, Text, TextButton, type TextButtonProps, type TextComponent, type TextProps, TextareaField, type TextareaFieldProps, type ThemeModeContextValue, Toast, ToastContainer, type ToastContainerProps, type ToastController, type ToastProps, ToastProvider, type ToastProviderProps, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipProps, TypographyText, URLField, type URLFieldProps, UploadButton, type UploadButtonProps, VerifyButton, type VerifyButtonProps, VolumeSlider, type VolumeSliderProps, WarningBanner, type WarningBannerProps, WarningToast, type WarningToastProps, YesNoRadioGroup, type YesNoRadioGroupProps, ZipCodeField, type ZipCodeFieldProps, useTheme, useThemeMode, useToast };