canny-ui-react 5.0.0 → 6.0.0

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

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import type { SxProp } from '../Layout/sx';
 type RootSingle = ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
     type: 'single';
 };
@@ -8,15 +9,33 @@ type RootMultiple = ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
 };
 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";
+    /**
+     * 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;
 }) | (Omit<AccordionPrimitive.AccordionMultipleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     type: "multiple";
 } & {
     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;
 })) & 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>>;

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/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,17 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import type { SxProp } from '../Layout/sx';
 type CheckboxRootProps = ComponentPropsWithoutRef<typeof RadixCheckbox.Root>;
 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 { 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,

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 { 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

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>>;

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

@@ -45,17 +45,17 @@ export declare function useFileDrop(options?: UseFileDropOptions): {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
         slot?: string | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
         style?: import("react").CSSProperties | undefined;
         title?: string | undefined;
         translate?: "yes" | "no" | undefined;
@@ -91,11 +91,11 @@ export declare function useFileDrop(options?: UseFileDropOptions): {
         exportparts?: string | undefined;
         part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
-        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
-        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-busy"?: (boolean | "false" | "true") | undefined;
         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
@@ -108,34 +108,34 @@ export declare function useFileDrop(options?: UseFileDropOptions): {
         "aria-details"?: string | undefined;
         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
-        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-expanded"?: (boolean | "false" | "true") | undefined;
         "aria-flowto"?: string | undefined;
-        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
         "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-hidden"?: (boolean | "false" | "true") | undefined;
         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
         "aria-label"?: string | undefined;
         "aria-labelledby"?: string | undefined;
         "aria-level"?: number | undefined;
         "aria-live"?: "off" | "assertive" | "polite" | undefined;
-        "aria-modal"?: (boolean | "true" | "false") | undefined;
-        "aria-multiline"?: (boolean | "true" | "false") | undefined;
-        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-modal"?: (boolean | "false" | "true") | undefined;
+        "aria-multiline"?: (boolean | "false" | "true") | undefined;
+        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
         "aria-orientation"?: "horizontal" | "vertical" | undefined;
         "aria-owns"?: string | undefined;
         "aria-placeholder"?: string | undefined;
         "aria-posinset"?: number | undefined;
         "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-readonly"?: (boolean | "false" | "true") | undefined;
         "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-required"?: (boolean | "false" | "true") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;
         "aria-rowindex"?: number | undefined;
         "aria-rowindextext"?: string | undefined;
         "aria-rowspan"?: number | undefined;
-        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-selected"?: (boolean | "false" | "true") | undefined;
         "aria-setsize"?: number | undefined;
         "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
         "aria-valuemax"?: number | undefined;
@@ -353,17 +353,17 @@ export declare function useFileDrop(options?: UseFileDropOptions): {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
         slot?: string | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
         tabIndex?: number | undefined;
         title?: string | undefined;
         translate?: "yes" | "no" | undefined;
@@ -400,11 +400,11 @@ export declare function useFileDrop(options?: UseFileDropOptions): {
         exportparts?: string | undefined;
         part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
-        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
-        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-busy"?: (boolean | "false" | "true") | undefined;
         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
@@ -415,37 +415,37 @@ export declare function useFileDrop(options?: UseFileDropOptions): {
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
-        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-disabled"?: (boolean | "false" | "true") | undefined;
         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
-        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-expanded"?: (boolean | "false" | "true") | undefined;
         "aria-flowto"?: string | undefined;
-        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
         "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-hidden"?: (boolean | "false" | "true") | undefined;
         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
         "aria-label"?: string | undefined;
         "aria-labelledby"?: string | undefined;
         "aria-level"?: number | undefined;
         "aria-live"?: "off" | "assertive" | "polite" | undefined;
-        "aria-modal"?: (boolean | "true" | "false") | undefined;
-        "aria-multiline"?: (boolean | "true" | "false") | undefined;
-        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-modal"?: (boolean | "false" | "true") | undefined;
+        "aria-multiline"?: (boolean | "false" | "true") | undefined;
+        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
         "aria-orientation"?: "horizontal" | "vertical" | undefined;
         "aria-owns"?: string | undefined;
         "aria-placeholder"?: string | undefined;
         "aria-posinset"?: number | undefined;
         "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-readonly"?: (boolean | "false" | "true") | undefined;
         "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-required"?: (boolean | "false" | "true") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;
         "aria-rowindex"?: number | undefined;
         "aria-rowindextext"?: string | undefined;
         "aria-rowspan"?: number | undefined;
-        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-selected"?: (boolean | "false" | "true") | undefined;
         "aria-setsize"?: number | undefined;
         "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
         "aria-valuemax"?: number | undefined;