canny-ui-react 5.0.0 → 6.1.0

package/dist/components/Stepper/Stepper.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface StepperStep {
     label: ReactNode;
     description?: ReactNode;
@@ -12,5 +13,11 @@ export interface StepperProps extends Omit<HTMLAttributes<HTMLOListElement>, 'ch
     size?: 'sm' | 'md';
     /** Fired when a previously-completed step is clicked. */
     onStepClick?: (index: number) => 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 }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLOListElement>>;

package/dist/components/Switch/Switch.d.ts

@@ -1,8 +1,25 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import * as RadixSwitch from '@radix-ui/react-switch';
-type SwitchRootProps = ComponentPropsWithoutRef<typeof RadixSwitch.Root>;
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { FormControlProps } from '../../utils/primitiveProps';
+import type { SxProp } from '../Layout/sx';
+interface SwitchRootProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange' | 'checked' | 'defaultChecked' | 'type'>, FormControlProps {
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Uncontrolled initial checked state. */
+    defaultChecked?: boolean;
+    /** Fires when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Value submitted with the form when checked. Default: `'on'`. */
+    value?: string;
+}
 export interface SwitchProps extends Omit<SwitchRootProps, '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 switch itself when there is no label.
+     */
+    sx?: SxProp;
 }
 export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import * as RadixTabs from '@radix-ui/react-tabs';
+import type { SxProp } from '../Layout/sx';
 export type TabsVariant = 'line' | 'pills' | 'segmented';
 export type TabsSize = 'sm' | 'md' | 'lg';
 /**
@@ -35,9 +35,19 @@ export interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'dir'>
     variant?: TabsVariant;
     /** Size preset. Default: `md`. */
     size?: TabsSize;
+    /**
+     * 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 Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TabsList: import("react").ForwardRefExoticComponent<Omit<RadixTabs.TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface TabsListProps extends ComponentPropsWithoutRef<'div'> {
+    /** Keep arrow-key navigation inside the list. Default: true. */
+    loop?: boolean;
+}
+export declare const TabsList: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface TabsTriggerProps extends ComponentPropsWithoutRef<'button'> {
     /** Value identifying which panel this trigger activates. */
     value: string;
@@ -47,4 +57,10 @@ export interface TabsTriggerProps extends ComponentPropsWithoutRef<'button'> {
     badge?: ReactNode;
 }
 export declare const TabsTrigger: import("react").ForwardRefExoticComponent<TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const TabsContent: import("react").ForwardRefExoticComponent<Omit<RadixTabs.TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface TabsContentProps extends ComponentPropsWithoutRef<'div'> {
+    /** Value of the trigger that reveals this panel. */
+    value: string;
+    /** Keep mounted while hidden (useful for forms and animations). */
+    forceMount?: true;
+}
+export declare const TabsContent: import("react").ForwardRefExoticComponent<TabsContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Text/Text.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithoutRef, ElementType, ForwardedRef, ReactElement } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type TextVariant = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'lead' | 'body' | 'small' | 'caption' | 'code' | 'kbd';
 export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 export type TextAlign = 'left' | 'center' | 'right' | 'justify';
@@ -10,6 +11,12 @@ export type TextProps<E extends ElementType = ElementType> = Omit<ComponentProps
     align?: TextAlign;
     color?: TextColor;
     truncate?: 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;
 };
 /**
  * Text — typography primitive. `variant` picks the semantic element and the

package/dist/components/Textarea/Textarea.d.ts

@@ -1,4 +1,5 @@
 import type { TextareaHTMLAttributes } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type TextareaColor = 'primary' | 'danger' | 'warning' | 'success';
 export type TextareaSize = 'sm' | 'md' | 'lg';
 export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
@@ -8,6 +9,12 @@ export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
     autoGrow?: boolean;
     /** With autoGrow, limits how tall the textarea can get. Default 12. */
     maxRows?: number;
+    /**
+     * 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;
 }
 /** Auto-growing textarea. Measures scrollHeight on every change to set height. */
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Timeline/Timeline.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type TimelineDotColor = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 /** Which side the content sits on relative to the central rail. */
 export type TimelinePosition = 'right' | 'left' | 'alternate';
@@ -13,6 +14,12 @@ export interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
     orientation?: TimelineOrientation;
     /** Density preset. Default `'md'`. */
     size?: TimelineSize;
+    /**
+     * 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 Timeline: import("react").ForwardRefExoticComponent<TimelineProps & import("react").RefAttributes<HTMLOListElement>>;
 export type TimelineItemProps = HTMLAttributes<HTMLLIElement>;

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type ToastVariant = 'default' | 'success' | 'info' | 'warning' | 'danger' | 'loading';
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export interface ToastOptions {
@@ -20,6 +21,12 @@ export interface ToastOptions {
     id?: string;
     /** Hide the close button. */
     dismissible?: boolean;
+    /**
+     * One-off CSS for this toast's root, 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 ToastInstance extends Required<Pick<ToastOptions, 'variant' | 'duration' | 'dismissible'>> {
     id: string;
@@ -28,6 +35,7 @@ export interface ToastInstance extends Required<Pick<ToastOptions, 'variant' | '
     action?: ReactNode;
     icon?: ReactNode | false;
     onDismiss?: () => void;
+    sx?: SxProp;
     /** Internal — flips to true when entering exit animation. */
     exiting?: boolean;
 }

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,7 @@
-import type { ReactNode } from 'react';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
+import type { FC, ReactNode } from 'react';
+import type { OpenStateProps, PopperContentProps, TriggerProps } from '../../utils/primitiveProps';
+import type { CSSProperties } from 'react';
+import type { SxProp } from '../Layout/sx';
 /**
  * Tooltip provider — wrap your app once. Controls the global delay so the
  * first tooltip in a group has a longer delay, then subsequent tooltips
@@ -10,7 +12,16 @@ import * as RadixTooltip from '@radix-ui/react-tooltip';
  *     <App />
  *   </TooltipProvider>
  */
-export declare const TooltipProvider: import("react").FC<RadixTooltip.TooltipProviderProps>;
+export interface TooltipProviderProps {
+    /** Delay before the first tooltip in a group opens, in ms. Default: 700. */
+    delayDuration?: number;
+    /** Window in which subsequent tooltips open instantly, in ms. Default: 300. */
+    skipDelayDuration?: number;
+    /** Prevent the content itself from keeping the tooltip open on hover. */
+    disableHoverableContent?: boolean;
+    children?: ReactNode;
+}
+export declare const TooltipProvider: FC<TooltipProviderProps>;
 export interface TooltipProps {
     /** The element that triggers the tooltip on hover/focus. */
     children: ReactNode;
@@ -30,6 +41,14 @@ export interface TooltipProps {
     disabled?: boolean;
     /** Extra className on the popup. */
     contentClassName?: string;
+    /** Inline style on the tooltip bubble. */
+    contentStyle?: CSSProperties;
+    /**
+     * One-off CSS for the tooltip bubble, 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;
 }
 /**
  * Single-shot tooltip. Pass any element as `children` and it becomes the
@@ -41,6 +60,14 @@ export interface TooltipProps {
  *   </Tooltip>
  */
 export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TooltipRoot: import("react").FC<RadixTooltip.TooltipProps>;
-export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<RadixTooltip.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const TooltipContent: import("react").ForwardRefExoticComponent<Omit<RadixTooltip.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface TooltipRootProps extends Omit<OpenStateProps, 'modal'> {
+    /** Delay before opening, in ms. Overrides the provider default. */
+    delayDuration?: number;
+    /** Prevent the content itself from keeping the tooltip open on hover. */
+    disableHoverableContent?: boolean;
+}
+export declare const TooltipRoot: FC<TooltipRootProps>;
+export type TooltipTriggerProps = TriggerProps;
+export declare const TooltipTrigger: FC<TooltipTriggerProps>;
+export type TooltipContentProps = PopperContentProps;
+export declare const TooltipContent: import("react").ForwardRefExoticComponent<PopperContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/TreeView/TreeView.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface TreeViewProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect'> {
     /** Controlled set of expanded item ids. */
     expandedIds?: string[];
@@ -16,6 +17,13 @@ export interface TreeViewProps extends Omit<HTMLAttributes<HTMLUListElement>, 'o
     onItemExpandToggle?: (id: string, expanded: boolean) => void;
     /** Auto folder/file icons for items without their own icon. Default `true`. */
     defaultIcons?: 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 }`). Applied to the
+     * root tree container. Scalar-only sx merges into inline style; responsive
+     * sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 export declare const TreeView: import("react").ForwardRefExoticComponent<TreeViewProps & import("react").RefAttributes<HTMLUListElement>>;
 export interface TreeItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {