canny-ui-react 5.0.0 → 6.1.0

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;

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

@@ -1,4 +1,5 @@
 import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type InputColor = 'primary' | 'danger' | 'warning' | 'success';
 export type InputSize = 'sm' | 'md' | 'lg';
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
@@ -15,4 +16,11 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     onClear?: () => void;
     /** Show a password-visibility toggle. Forces `type="password"` when hidden. */
     showPasswordToggle?: 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.
+     * Applied to the outer affix wrapper, or the input itself when no affixes.
+     */
+    sx?: SxProp;
 }

package/dist/components/Layout/AspectRatio.d.ts

@@ -1,7 +1,10 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from './sx';
 export interface AspectRatioProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Ratio = width / height. e.g. 16/9, 4/3, 1, 21/9. Default 16/9. */
     ratio?: number;
+    /** One-off CSS (scalar or responsive breakpoint map), like `Box`'s `sx`. */
+    sx?: SxProp;
     children?: ReactNode;
 }
 /**

package/dist/components/Layout/Divider.d.ts

@@ -1,7 +1,10 @@
 import type { HTMLAttributes } from 'react';
+import type { SxProp } from './sx';
 export interface DividerProps extends Omit<HTMLAttributes<HTMLHRElement | HTMLSpanElement>, 'role'> {
     /** Axis. Default: `'horizontal'`. */
     orientation?: 'horizontal' | 'vertical';
+    /** One-off CSS (scalar or responsive breakpoint map), like `Box`'s `sx`. */
+    sx?: SxProp;
 }
 /**
  * Hairline divider. Renders `<hr>` when horizontal (no accessible name needed)

package/dist/components/Layout/Spacer.d.ts

@@ -1,4 +1,8 @@
 import type { HTMLAttributes } from 'react';
-export type SpacerProps = HTMLAttributes<HTMLSpanElement>;
+import type { SxProp } from './sx';
+export interface SpacerProps extends HTMLAttributes<HTMLSpanElement> {
+    /** One-off CSS (scalar or responsive breakpoint map), like `Box`'s `sx`. */
+    sx?: SxProp;
+}
 /** Flexible filler — `flex: 1 1 auto`. Use inside a `<Row>` or `<Stack>`. */
 export declare const Spacer: import("react").ForwardRefExoticComponent<SpacerProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/List/List.d.ts

@@ -1,4 +1,5 @@
 import type { ElementType, HTMLAttributes, ReactNode, MouseEventHandler } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type ListVariant = 'plain' | 'bordered' | 'dividers';
 export type ListSize = 'sm' | 'md' | 'lg';
 export interface ListProps extends HTMLAttributes<HTMLUListElement> {
@@ -9,6 +10,12 @@ export interface ListProps extends HTMLAttributes<HTMLUListElement> {
     /** Use this when items have explicit dividers via `<ListSeparator>` to
      * disable automatic divider rendering. */
     dense?: 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;
 }
 export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLUListElement>>;
 export interface ListItemProps {

package/dist/components/Menu/Menu.d.ts

@@ -1,7 +1,10 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import * as RadixMenu from '@radix-ui/react-dropdown-menu';
-export declare const Menu: import("react").FC<RadixMenu.DropdownMenuProps>;
-export declare const MenuTrigger: import("react").ForwardRefExoticComponent<RadixMenu.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+import type { ComponentPropsWithoutRef, FC, HTMLAttributes, ReactNode } from 'react';
+import type { OpenStateProps, PopperContentProps, TriggerProps } from '../../utils/primitiveProps';
+import type { SxProp } from '../Layout/sx';
+export type MenuProps = OpenStateProps;
+export declare const Menu: FC<MenuProps>;
+export type MenuTriggerProps = TriggerProps;
+export declare const MenuTrigger: FC<MenuTriggerProps>;
 export interface MenuContentProps extends ComponentPropsWithoutRef<'div'> {
     className?: string;
     /** Preferred side of the trigger to render against. */
@@ -14,6 +17,12 @@ export interface MenuContentProps extends ComponentPropsWithoutRef<'div'> {
     alignOffset?: number;
     /** Visual size — controls padding + font size. Default: `md`. */
     size?: 'sm' | 'md';
+    /**
+     * One-off CSS for the menu 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;
 }
 /**
  * The popup panel. Wrap in `<Menu>` and pair with `<MenuTrigger>`.
@@ -58,7 +67,13 @@ export interface MenuCheckboxItemProps extends Omit<ComponentPropsWithoutRef<'di
     shortcut?: ReactNode;
 }
 export declare const MenuCheckboxItem: import("react").ForwardRefExoticComponent<MenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const MenuRadioGroup: import("react").ForwardRefExoticComponent<RadixMenu.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface MenuRadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Controlled selected value. */
+    value?: string;
+    /** Fires when the selected value changes. */
+    onValueChange?: (value: string) => void;
+}
+export declare const MenuRadioGroup: FC<MenuRadioGroupProps>;
 export interface MenuRadioItemProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {
     /** The value of this radio item within its group. */
     value: string;
@@ -74,8 +89,18 @@ export declare const MenuRadioItem: import("react").ForwardRefExoticComponent<Me
 export interface MenuLabelProps extends ComponentPropsWithoutRef<'div'> {
 }
 export declare const MenuLabel: import("react").ForwardRefExoticComponent<MenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const MenuSeparator: import("react").ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const MenuSub: import("react").FC<RadixMenu.DropdownMenuSubProps>;
+export type MenuSeparatorProps = HTMLAttributes<HTMLDivElement>;
+export declare const MenuSeparator: import("react").ForwardRefExoticComponent<MenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface MenuSubProps {
+    /** Controlled open state of the submenu. */
+    open?: boolean;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    /** Fires when the submenu opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+export declare const MenuSub: FC<MenuSubProps>;
 export interface MenuSubTriggerProps extends ComponentPropsWithoutRef<'div'> {
     /** Disable opening this submenu. */
     disabled?: boolean;
@@ -84,4 +109,5 @@ export interface MenuSubTriggerProps extends ComponentPropsWithoutRef<'div'> {
     icon?: ReactNode;
 }
 export declare const MenuSubTrigger: import("react").ForwardRefExoticComponent<MenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const MenuSubContent: import("react").ForwardRefExoticComponent<Omit<RadixMenu.DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type MenuSubContentProps = PopperContentProps;
+export declare const MenuSubContent: import("react").ForwardRefExoticComponent<PopperContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type MultiSelectOption = {
     value: string;
     label: string;
@@ -45,10 +46,19 @@ export interface MultiSelectProps {
     'aria-label'?: string;
     /** Extra class 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;
 }
 /**
  * MultiSelect — a combobox with a searchable list and chip tokens for
  * the selected values. Built on @radix-ui/react-popover (positioning +
  * focus management) and cmdk (search + filtering).
  */
-export declare function MultiSelect({ options, value, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyText, maxItems, size, color, disabled, id, className, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelect({ options, value, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyText, maxItems, size, color, disabled, id, className, style, sx, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,13 @@
 import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface NavbarProps extends HTMLAttributes<HTMLElement> {
     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;
     children: ReactNode;
 }
 export interface NavbarBrandProps extends AnchorHTMLAttributes<HTMLAnchorElement> {

package/dist/components/Pagination/Pagination.d.ts

@@ -1,3 +1,5 @@
+import type { CSSProperties } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface PaginationProps {
     /** Current page (1-based). */
     page: number;
@@ -13,6 +15,13 @@ export interface PaginationProps {
     hideControls?: boolean;
     size?: 'sm' | 'md' | 'lg';
     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.
+     */
+    sx?: SxProp;
     'aria-label'?: string;
 }
 /**

package/dist/components/PanelGroup/PanelGroup.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, PointerEvent } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type PanelDirection = 'horizontal' | 'vertical';
 export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
     /** Initial size as a percentage of the group. */
@@ -26,6 +27,12 @@ export declare const PanelResizeHandle: import("react").ForwardRefExoticComponen
 export interface PanelGroupProps extends HTMLAttributes<HTMLDivElement> {
     /** Layout axis. Default `'horizontal'`. */
     direction?: PanelDirection;
+    /**
+     * 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 PanelGroup: import("react").ForwardRefExoticComponent<PanelGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 /** No-op kept for drop-in compatibility with `react-resizable-panels`. */

package/dist/components/Popover/Popover.d.ts

@@ -1,5 +1,6 @@
-import type { ComponentPropsWithoutRef } from 'react';
-import * as RadixPopover from '@radix-ui/react-popover';
+import type { ComponentPropsWithoutRef, FC, HTMLAttributes } from 'react';
+import type { AsChildProps, OpenStateProps, TriggerProps } from '../../utils/primitiveProps';
+import type { SxProp } from '../Layout/sx';
 /**
  * Popover root. Controlled (`open` + `onOpenChange`) or uncontrolled.
  * Wrap a `<PopoverTrigger>` and `<PopoverContent>`.
@@ -12,10 +13,14 @@ import * as RadixPopover from '@radix-ui/react-popover';
  *     </PopoverContent>
  *   </Popover>
  */
-export declare const Popover: import("react").FC<RadixPopover.PopoverProps>;
-export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const PopoverClose: import("react").ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type PopoverProps = OpenStateProps;
+export declare const Popover: FC<PopoverProps>;
+export type PopoverTriggerProps = TriggerProps;
+export declare const PopoverTrigger: FC<PopoverTriggerProps>;
+export type PopoverAnchorProps = HTMLAttributes<HTMLDivElement> & AsChildProps;
+export declare const PopoverAnchor: FC<PopoverAnchorProps>;
+export type PopoverCloseProps = TriggerProps;
+export declare const PopoverClose: FC<PopoverCloseProps>;
 export interface PopoverContentProps extends ComponentPropsWithoutRef<'div'> {
     className?: string;
     /** Render the small directional arrow on the popover. Default: false. */
@@ -28,5 +33,11 @@ export interface PopoverContentProps extends ComponentPropsWithoutRef<'div'> {
     align?: 'start' | 'center' | 'end';
     /** Offset in px from the aligned edge. */
     alignOffset?: number;
+    /**
+     * One-off CSS for the popover 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;
 }
 export declare const PopoverContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,12 +1,25 @@
 import type { HTMLAttributes } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type ProgressColor = 'primary' | 'danger' | 'warning' | 'success' | 'info';
 export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     value?: number;
     color?: ProgressColor;
     indeterminate?: 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;
 }
 export interface ProgressRingProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     value: number;
     size?: 'md' | 'lg';
     showLabel?: 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;
 }

package/dist/components/Radio/Radio.d.ts

@@ -1,7 +1,20 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import * as RadixRadio from '@radix-ui/react-radio-group';
-type RadioGroupProps = ComponentPropsWithoutRef<typeof RadixRadio.Root>;
-type RadioItemProps = ComponentPropsWithoutRef<typeof RadixRadio.Item>;
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import type { Direction, FormControlProps, ValueStateProps } from '../../utils/primitiveProps';
+import type { SxProp } from '../Layout/sx';
+interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'dir'>, ValueStateProps, FormControlProps {
+    /** Reading direction. */
+    dir?: Direction;
+    /** Allow arrow-key navigation to wrap around. Default: true. */
+    loop?: boolean;
+}
+interface RadioItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'type'> {
+    /** Value this item submits when selected. */
+    value: string;
+    /** Disables just this option. */
+    disabled?: boolean;
+    /** Marks the option required for form validation. */
+    required?: boolean;
+}
 export interface RadioGroupRootProps extends RadioGroupProps {
     /** Stack direction. Default: `'column'`. */
     orientation?: 'horizontal' | 'vertical';
@@ -9,6 +22,13 @@ export interface RadioGroupRootProps extends RadioGroupProps {
 export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface RadioProps extends Omit<RadioItemProps, 'children'> {
     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 radio itself when there is no label.
+     */
+    sx?: SxProp;
 }
 export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

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

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type ScrollVariant = 'default' | 'thin' | 'subtle' | 'overlay' | 'expand';
 export type ScrollTone = 'neutral' | 'primary';
 export type ScrollAxis = 'both' | 'x' | 'y';
@@ -9,5 +10,11 @@ export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
     maxHeight?: number | string;
     maxWidth?: number | string;
     region?: 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/Select/Select.d.ts

@@ -1,8 +1,20 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import * as RadixSelect from '@radix-ui/react-select';
+import type { ComponentPropsWithoutRef, CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import type { Direction, FormControlProps, ValueStateProps } from '../../utils/primitiveProps';
+import type { SxProp } from '../Layout/sx';
 export type SelectColor = 'primary' | 'danger' | 'warning' | 'success';
 export type SelectSize = 'sm' | 'md' | 'lg';
-type SelectRootProps = ComponentPropsWithoutRef<typeof RadixSelect.Root>;
+interface SelectRootProps extends ValueStateProps, FormControlProps {
+    /** Controlled open state of the dropdown. */
+    open?: boolean;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    /** Fires when the dropdown opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Reading direction. */
+    dir?: Direction;
+    /** Autocomplete hint forwarded to the hidden native select. */
+    autoComplete?: string;
+}
 export interface SelectProps extends SelectRootProps {
     /** Placeholder shown when nothing is selected. */
     placeholder?: string;
@@ -24,6 +36,15 @@ export interface SelectProps extends SelectRootProps {
     'aria-describedby'?: string;
     /** Apply .danger/.warning/.success via Field's className thread. */
     className?: 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 }`). Applied to the
+     * trigger (the inline field). Scalar-only sx merges into inline style;
+     * responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
+    /** Inline style applied to the trigger (the inline field). */
+    style?: CSSProperties;
     /** `<SelectItem>` / `<SelectGroup>` / `<SelectSeparator>` / `<SelectLabel>` children. */
     children: ReactNode;
 }
@@ -37,7 +58,7 @@ export interface SelectProps extends SelectRootProps {
  *   <SelectItem value="staging">Staging</SelectItem>
  * </Select>
  */
-export declare function Select({ placeholder, size, color, triggerIcon, triggerClassName, contentClassName, id, className, disabled, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, ...rootProps }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ placeholder, size, color, triggerIcon, triggerClassName, contentClassName, id, className, style, sx, disabled, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, ...rootProps }: SelectProps): import("react/jsx-runtime").JSX.Element;
 export interface SelectItemProps extends ComponentPropsWithoutRef<'div'> {
     /** The value submitted when this item is selected. */
     value: string;
@@ -53,5 +74,6 @@ export declare const SelectGroup: import("react").ForwardRefExoticComponent<Sele
 export interface SelectLabelProps extends ComponentPropsWithoutRef<'div'> {
 }
 export declare const SelectLabel: import("react").ForwardRefExoticComponent<SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SelectSeparator: import("react").ForwardRefExoticComponent<Omit<RadixSelect.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectSeparatorProps = HTMLAttributes<HTMLDivElement>;
+export declare const SelectSeparator: import("react").ForwardRefExoticComponent<SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,10 +1,17 @@
 import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type SidebarWidth = 'thin' | 'default' | 'wide';
 export interface SidebarProps extends HTMLAttributes<HTMLElement> {
     width?: SidebarWidth;
     sticky?: boolean;
     collapsed?: boolean;
     responsive?: 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 interface SidebarSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {

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

@@ -1,7 +1,14 @@
 import type { HTMLAttributes } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type SkeletonShape = 'text' | 'title' | 'avatar' | 'button';
 export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
     shape?: SkeletonShape;
     width?: number | string;
     height?: number | 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;
 }

package/dist/components/Slider/Slider.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface SliderProps extends Omit<ComponentPropsWithoutRef<'span'>, 'defaultValue' | 'dir' | 'onChange'> {
     /** Controlled value (one entry per thumb). */
     value?: number[];
@@ -30,6 +31,12 @@ export interface SliderProps extends Omit<ComponentPropsWithoutRef<'span'>, 'def
     showValue?: boolean;
     /** Format value for the bubble. Default: `String(v)`. */
     formatValue?: (v: number) => 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.
+     */
+    sx?: SxProp;
 }
 /**
  * Slider — single or range value picker. Pass an array length 1 for single,