canny-ui-react 5.0.0 → 6.1.0

package/dist/components/Accordion/Accordion.d.ts

@@ -1,25 +1,51 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-type RootSingle = ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+import type { Direction } from '../../utils/primitiveProps';
+import type { SxProp } from '../Layout/sx';
+interface AccordionRootBase extends Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange' | 'dir'> {
+    /** Disable every item. */
+    disabled?: boolean;
+    /** Reading direction. */
+    dir?: Direction;
+    /** Layout axis. Default: `vertical`. */
+    orientation?: 'horizontal' | 'vertical';
+}
+type RootSingle = AccordionRootBase & {
     type: 'single';
+    /** Controlled open item. */
+    value?: string;
+    /** Uncontrolled initial open item. */
+    defaultValue?: string;
+    /** Fires when the open item changes. */
+    onValueChange?: (value: string) => void;
+    /** Allow closing the open item by clicking it again. */
+    collapsible?: boolean;
 };
-type RootMultiple = ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+type RootMultiple = AccordionRootBase & {
     type: 'multiple';
+    /** Controlled set of open items. */
+    value?: string[];
+    /** Uncontrolled initial set of open items. */
+    defaultValue?: string[];
+    /** Fires when the open set changes. */
+    onValueChange?: (value: string[]) => void;
 };
 export type AccordionProps = (RootSingle | RootMultiple) & {
     variant?: 'plain' | 'bordered' | 'separated';
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 };
-export declare const Accordion: import("react").ForwardRefExoticComponent<((Omit<AccordionPrimitive.AccordionSingleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    type: "single";
-} & {
-    variant?: "plain" | "bordered" | "separated";
-}) | (Omit<AccordionPrimitive.AccordionMultipleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    type: "multiple";
-} & {
-    variant?: "plain" | "bordered" | "separated";
-})) & import("react").RefAttributes<HTMLDivElement>>;
-export type AccordionItemProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
-export declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AccordionItemProps extends ComponentPropsWithoutRef<'div'> {
+    /** Value identifying this item. */
+    value: string;
+    /** Disables just this item. */
+    disabled?: boolean;
+}
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface AccordionTriggerProps extends ComponentPropsWithoutRef<'button'> {
     /** Optional leading icon in the trigger row. */
     icon?: ReactNode;
@@ -27,6 +53,9 @@ export interface AccordionTriggerProps extends ComponentPropsWithoutRef<'button'
     hideIndicator?: boolean;
 }
 export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export type AccordionContentProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
-export declare const AccordionContent: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface AccordionContentProps extends ComponentPropsWithoutRef<'div'> {
+    /** Keep mounted while collapsed (useful for animations). */
+    forceMount?: true;
+}
+export declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/Alert/Alert.types.d.ts

@@ -1,8 +1,15 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type AlertColor = 'info' | 'success' | 'warning' | 'danger';
 export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     color?: AlertColor;
     solid?: boolean;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     title?: ReactNode;
     children?: ReactNode;
     /** Custom icon node. Pass `false` to hide the default icon. */

package/dist/components/Autocomplete/Autocomplete.types.d.ts

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface AutocompleteOption {
     /** Stable identifier — what gets stored in `value`. */
     value: string;
@@ -46,6 +47,15 @@ interface AutocompleteBase {
     'aria-label'?: string;
     /** Custom className on the trigger. */
     className?: string;
+    /** Inline style applied to the trigger (the inline field). */
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Applied to the
+     * trigger. Scalar-only sx merges into inline style; responsive sx injects
+     * a scoped class.
+     */
+    sx?: SxProp;
 }
 export interface AutocompleteSingleProps extends AutocompleteBase {
     multiple?: false;

package/dist/components/Avatar/Avatar.types.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
 export type AvatarStatus = 'online' | 'busy' | 'offline';
 export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
@@ -6,6 +7,12 @@ export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     status?: AvatarStatus;
     src?: string;
     alt?: string;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     children?: ReactNode;
 }
 export interface AvatarStackProps extends HTMLAttributes<HTMLDivElement> {

package/dist/components/Badge/Badge.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type BadgeColor = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 export type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
@@ -16,6 +17,12 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     placement?: BadgePlacement;
     /** Render the indicator inline with no anchored child. */
     standalone?: boolean;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     children?: ReactNode;
 }
 export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface BreadcrumbItem {
     label: ReactNode;
     href?: string;
@@ -10,5 +11,11 @@ export interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'chil
     /** Separator node between items. Default: chevron. */
     separator?: ReactNode;
     size?: 'sm' | 'md';
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Button/Button.types.d.ts

@@ -1,4 +1,5 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type ButtonVariant = 'solid' | 'secondary' | 'outline' | 'dashed' | 'ghost' | 'soft' | 'link';
 export type ButtonColor = 'primary' | 'danger' | 'warning' | 'success' | 'info';
 export type ButtonSize = 'sm' | 'md' | 'lg';
@@ -23,5 +24,11 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     iconPosition?: ButtonIconPosition;
     /** Disable the MUI-style click ripple. Default: `false`. */
     disableRipple?: boolean;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     children?: ReactNode;
 }

package/dist/components/Button/ToggleButtonGroup.d.ts

@@ -1,8 +1,43 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { Root as RadixToggleGroup, Item as RadixToggleGroupItem } from '@radix-ui/react-toggle-group';
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import type { Direction } from '../../utils/primitiveProps';
 import type { ButtonColor, ButtonShape, ButtonSize, ButtonVariant } from './Button.types';
-type GroupRootProps = ComponentPropsWithoutRef<typeof RadixToggleGroup>;
-type GroupItemProps = ComponentPropsWithoutRef<typeof RadixToggleGroupItem>;
+interface GroupRootBase extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'dir'> {
+    /** Disable every item in the group. */
+    disabled?: boolean;
+    /** Reading direction. */
+    dir?: Direction;
+    /** Layout axis. Default: `horizontal`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Allow arrow-key navigation to wrap around. Default: true. */
+    loop?: boolean;
+    /** Keep at least one item pressed. */
+    rovingFocus?: boolean;
+}
+type GroupSingle = GroupRootBase & {
+    type?: 'single';
+    /** Controlled pressed value. */
+    value?: string;
+    /** Uncontrolled initial pressed value. */
+    defaultValue?: string;
+    /** Fires when the pressed value changes. */
+    onValueChange?: (value: string) => void;
+};
+type GroupMultiple = GroupRootBase & {
+    type: 'multiple';
+    /** Controlled set of pressed values. */
+    value?: string[];
+    /** Uncontrolled initial set of pressed values. */
+    defaultValue?: string[];
+    /** Fires when the pressed set changes. */
+    onValueChange?: (value: string[]) => void;
+};
+type GroupRootProps = GroupSingle | GroupMultiple;
+interface GroupItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'type'> {
+    /** Value identifying this item within the group. */
+    value: string;
+    /** Disables just this item. */
+    disabled?: boolean;
+}
 type GroupVariant = Extract<ButtonVariant, 'ghost' | 'outline' | 'soft' | 'dashed'>;
 export type ToggleButtonGroupProps = GroupRootProps & {
     variant?: GroupVariant;

package/dist/components/Card/Card.types.d.ts

@@ -1,6 +1,13 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type CardColor = 'default' | 'danger' | 'warning' | 'success' | 'info';
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     color?: CardColor;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     children: ReactNode;
 }

package/dist/components/Charts/BarChart.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+import type { CSSProperties } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface BarSeries {
     /** Key into each datum for this series' value. */
     key: string;
@@ -27,5 +29,13 @@ export interface BarChartProps<D extends Record<string, unknown> = Record<string
         datum: D;
     }) => ReactNode;
     className?: string;
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied to
+     * the chart's outer container.
+     */
+    sx?: SxProp;
 }
-export declare function BarChart<D extends Record<string, unknown>>({ data, xKey, series, height, stacked, grid, legend, yTickFormatter, xTickFormatter, renderTooltip, className, }: BarChartProps<D>): import("react/jsx-runtime").JSX.Element;
+export declare function BarChart<D extends Record<string, unknown>>({ data, xKey, series, height, stacked, grid, legend, yTickFormatter, xTickFormatter, renderTooltip, className, style, sx, }: BarChartProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/LineChart.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+import type { CSSProperties } from 'react';
+import type { SxProp } from '../Layout/sx';
 import type { BarSeries } from './BarChart';
 export interface LineChartProps<D extends Record<string, unknown> = Record<string, unknown>> {
     data: D[];
@@ -20,6 +22,14 @@ export interface LineChartProps<D extends Record<string, unknown> = Record<strin
         datum: D;
     }) => ReactNode;
     className?: string;
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied to
+     * the chart's outer container.
+     */
+    sx?: SxProp;
 }
 export declare function LineChart<D extends Record<string, unknown>>(props: LineChartProps<D>): import("react/jsx-runtime").JSX.Element;
 export declare function AreaChart<D extends Record<string, unknown>>(props: LineChartProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/PieChart.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+import type { CSSProperties } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface PieDatum {
     label: string;
     value: number;
@@ -18,5 +20,13 @@ export interface PieChartProps {
     /** Center label (e.g. a total) for donut charts. */
     centerLabel?: ReactNode;
     className?: string;
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied to
+     * the chart's outer container.
+     */
+    sx?: SxProp;
 }
-export declare function PieChart({ data, height, innerRadius, legend, renderTooltip, centerLabel, className, }: PieChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function PieChart({ data, height, innerRadius, legend, renderTooltip, centerLabel, className, style, sx, }: PieChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/ResponsiveContainer.d.ts

@@ -1,12 +1,21 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface ResponsiveContainerProps {
     /** Chart height in px. */
     height?: number;
     children: ReactNode;
     className?: string;
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied to
+     * the sizing wrapper.
+     */
+    sx?: SxProp;
 }
 /**
  * Sizing wrapper kept for `recharts` compatibility. Canny charts already fill
  * their parent's width; this passes `height` down and stretches to 100% width.
  */
-export declare function ResponsiveContainer({ height, children, className }: ResponsiveContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResponsiveContainer({ height, children, className, style, sx, }: ResponsiveContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,9 +1,27 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
-type CheckboxRootProps = ComponentPropsWithoutRef<typeof RadixCheckbox.Root>;
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { FormControlProps } from '../../utils/primitiveProps';
+import type { SxProp } from '../Layout/sx';
+export type CheckedState = boolean | 'indeterminate';
+interface CheckboxRootProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange' | 'checked' | 'defaultChecked' | 'type'>, FormControlProps {
+    /** Controlled checked state; `'indeterminate'` renders the dash. */
+    checked?: CheckedState;
+    /** Uncontrolled initial checked state. */
+    defaultChecked?: CheckedState;
+    /** Fires when the checked state changes. */
+    onCheckedChange?: (checked: CheckedState) => void;
+    /** Value submitted with the form when checked. Default: `'on'`. */
+    value?: string;
+}
 export interface CheckboxProps extends Omit<CheckboxRootProps, 'children'> {
     /** Label text or node rendered next to the box. */
     children?: ReactNode;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied to
+     * the outer label wrapper, or the checkbox itself when there is no label.
+     */
+    sx?: SxProp;
 }
 /** Accessible checkbox — tri-state (`checked | 'indeterminate' | false`). */
 export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Chip/Chip.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type ChipColor = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
 export type ChipSize = 'sm' | 'md';
 export type ChipVariant = 'soft' | 'outline' | 'solid';
@@ -21,6 +22,12 @@ export interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onSele
     onClick?: MouseEventHandler<HTMLSpanElement>;
     /** Disabled visual + non-interactive. */
     disabled?: boolean;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     /** The chip's text/content. */
     children: ReactNode;
 }

package/dist/components/ConfirmDialog/ConfirmDialog.d.ts

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface ConfirmDialogProps {
     /** Controlled open state. */
     open: boolean;
@@ -23,9 +24,18 @@ export interface ConfirmDialogProps {
     /** Fired when the cancel button is clicked (before close). */
     onCancel?: () => void;
     className?: string;
+    /** Inline style forwarded to the underlying Dialog content panel. */
+    style?: CSSProperties;
+    /**
+     * One-off CSS forwarded to the underlying Dialog content panel, same as
+     * `Box`'s `sx`: each value may be a scalar or a responsive breakpoint map
+     * (`{ base, sm, md, lg, xl }`). Scalar-only sx merges into inline style;
+     * responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 /**
  * ConfirmDialog — a small Dialog preset for destructive / confirmation prompts.
  * Composes the base `Dialog` and `Button`.
  */
-export declare function ConfirmDialog({ open, onOpenChange, title, message, children, confirmLabel, cancelLabel, danger, loading, onConfirm, onCancel, className, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmDialog({ open, onOpenChange, title, message, children, confirmLabel, cancelLabel, danger, loading, onConfirm, onCancel, className, style, sx, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/DataTable.d.ts

@@ -1,4 +1,5 @@
-import type { ReactElement, ReactNode, Ref } from 'react';
+import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type DataTableAlign = 'left' | 'center' | 'right';
 export type RowId = string | number;
 export interface DataTableColumn<R = Record<string, unknown>> {
@@ -63,6 +64,15 @@ export interface DataTableProps<R = Record<string, unknown>> {
     /** Turn off column resizing for every column. */
     disableColumnResize?: boolean;
     className?: string;
+    /** Inline style applied to the outer table container. */
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Applied to the
+     * outer table container. Scalar-only sx merges into inline style; responsive
+     * sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 export declare const DataTable: <R = Record<string, unknown>>(props: DataTableProps<R> & {
     ref?: Ref<HTMLDivElement>;

package/dist/components/DatePicker/DatePicker.types.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 import type { WeekDay } from './dateUtils';
 export type DatePickerSize = 'sm' | 'md' | 'lg';
 export type DatePickerColor = 'primary' | 'danger' | 'warning' | 'success';
@@ -80,4 +81,11 @@ export interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
     open?: boolean;
     /** Called when open state changes. */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Applied to the
+     * outer field wrapper (not the popover calendar). Scalar-only sx merges into
+     * inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }

package/dist/components/Dialog/Dialog.d.ts

@@ -1,5 +1,7 @@
-import type { ReactNode } from 'react';
-import * as RadixDialog from '@radix-ui/react-dialog';
+import type { FC, ReactNode } from 'react';
+import type { TriggerProps } from '../../utils/primitiveProps';
+import type { SxProp } from '../Layout/sx';
+import type { CSSProperties } from 'react';
 export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export interface DialogProps {
     /** Controlled open state. */
@@ -24,6 +26,14 @@ export interface DialogProps {
     hideClose?: boolean;
     /** Extra className on the dialog content. */
     className?: string;
+    /** Inline style on the dialog content panel. */
+    style?: CSSProperties;
+    /**
+     * One-off CSS for the dialog content panel, same as `Box`'s `sx`: each value
+     * may be a scalar or a responsive breakpoint map (`{ base, sm, md, lg, xl }`).
+     * Scalar-only sx merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 /**
  * Modal dialog built on @radix-ui/react-dialog. Includes a backdrop, focus trap,
@@ -37,6 +47,8 @@ export interface DialogProps {
  */
 export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;
 /** Trigger button to open a Dialog when wired with a controlled root. */
-export declare const DialogTrigger: import("react").ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DialogTriggerProps = TriggerProps;
+export declare const DialogTrigger: FC<DialogTriggerProps>;
 /** Close button — typically used inside the body or footer. */
-export declare const DialogClose: import("react").ForwardRefExoticComponent<RadixDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DialogCloseProps = TriggerProps;
+export declare const DialogClose: FC<DialogCloseProps>;

package/dist/components/Drawer/Drawer.d.ts

@@ -1,5 +1,7 @@
-import type { ReactNode } from 'react';
-import * as RadixDialog from '@radix-ui/react-dialog';
+import type { FC, ReactNode } from 'react';
+import type { TriggerProps } from '../../utils/primitiveProps';
+import type { SxProp } from '../Layout/sx';
+import type { CSSProperties } from 'react';
 export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
 export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';
 export interface DrawerProps {
@@ -27,6 +29,14 @@ export interface DrawerProps {
     hideClose?: boolean;
     /** Extra className on the drawer content. */
     className?: string;
+    /** Inline style on the drawer content panel. */
+    style?: CSSProperties;
+    /**
+     * One-off CSS for the drawer content panel, same as `Box`'s `sx`: each value
+     * may be a scalar or a responsive breakpoint map (`{ base, sm, md, lg, xl }`).
+     * Scalar-only sx merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 /**
  * Off-canvas drawer / sheet. Slides in from any edge. Built on
@@ -39,5 +49,7 @@ export interface DrawerProps {
  *   </Drawer>
  */
 export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DrawerTrigger: import("react").ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const DrawerClose: import("react").ForwardRefExoticComponent<RadixDialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DrawerTriggerProps = TriggerProps;
+export declare const DrawerTrigger: FC<DrawerTriggerProps>;
+export type DrawerCloseProps = TriggerProps;
+export declare const DrawerClose: FC<DrawerCloseProps>;

package/dist/components/Field/Field.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type FieldValidationState = 'default' | 'danger' | 'warning' | 'success';
 export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Label text. */
@@ -17,6 +18,13 @@ export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childr
     maxLength?: number;
     /** Override validation styling explicitly. */
     state?: FieldValidationState;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied
+     * to the outer field wrapper.
+     */
+    sx?: SxProp;
     /** Single form control element. The `id` is threaded to the label and aria-describedby. */
     children: ReactElement;
 }
@@ -28,4 +36,4 @@ export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childr
  *  • ARIA wiring: `htmlFor`, `aria-describedby`, `aria-invalid`
  *  • Validation state propagation to the child control via className
  */
-export declare function Field({ label, hint, error, required, optional, counter, maxLength, state, className, children, ...rest }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function Field({ label, hint, error, required, optional, counter, maxLength, state, className, style, sx, children, ...rest }: FieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FileUploader/FileUploader.d.ts

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 import type { FileRejection, UseFileDropOptions } from './useFileDrop';
 export interface FileUploaderProps extends Omit<UseFileDropOptions, 'onDrop' | 'onDropAccepted' | 'onDropRejected'> {
     /** Fired with `(accepted, rejected)` after each drop or browse. */
@@ -15,5 +16,13 @@ export interface FileUploaderProps extends Omit<UseFileDropOptions, 'onDrop' | '
     buttonLabel?: ReactNode | false;
     size?: 'sm' | 'md';
     className?: string;
+    /** Inline style applied to the dropzone root. */
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 export declare const FileUploader: import("react").ForwardRefExoticComponent<FileUploaderProps & import("react").RefAttributes<HTMLDivElement>>;