canny-ui-react 6.7.0 → 7.0.0

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

@@ -25,7 +25,7 @@ interface HandleInternal {
     valueMin: number;
     valueMax: number;
     onResizeStart: (e: PointerEvent<HTMLDivElement>) => void;
-    onKeyResize: (dir: 1 | -1) => void;
+    onKeyResize: (dir: 1 | -1, toEdge?: boolean) => void;
 }
 export interface PanelResizeHandleProps extends HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;

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

@@ -13,10 +13,17 @@ import type { SxProp } from '../Layout/sx';
  *     </PopoverContent>
  *   </Popover>
  */
-export type PopoverProps = OpenStateProps;
+export interface PopoverProps extends OpenStateProps {
+    /** Open on pointer hover (mouse only) and on keyboard focus, in addition to click. Default: false. */
+    openOnHover?: boolean;
+    /** Hover delay in ms before opening when `openOnHover`. Keyboard focus opens instantly. Default: 300. */
+    openDelay?: number;
+    /** Hover delay in ms before closing when `openOnHover`. Default: 150. */
+    closeDelay?: number;
+}
 export declare const Popover: FC<PopoverProps>;
 export type PopoverTriggerProps = TriggerProps;
-export declare const PopoverTrigger: FC<PopoverTriggerProps>;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & AsChildProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type PopoverAnchorProps = HTMLAttributes<HTMLDivElement> & AsChildProps;
 export declare const PopoverAnchor: FC<PopoverAnchorProps>;
 export type PopoverCloseProps = TriggerProps;
@@ -33,6 +40,8 @@ export interface PopoverContentProps extends ComponentPropsWithoutRef<'div'> {
     align?: 'start' | 'center' | 'end';
     /** Offset in px from the aligned edge. */
     alignOffset?: number;
+    /** Fires when focus moves into the popover on open; call `preventDefault()` to keep focus on the trigger. */
+    onOpenAutoFocus?: (event: Event) => void;
     /**
      * 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 }`).

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

@@ -5,6 +5,11 @@ export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chi
     value?: number;
     color?: ProgressColor;
     indeterminate?: boolean;
+    /**
+     * With `indeterminate`: a full-width shimmer sweep instead of the sliding
+     * chunk. Under `prefers-reduced-motion` both settle into a static, faded bar.
+     */
+    shimmer?: 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

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

@@ -1,11 +1,7 @@
 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';
 export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
-    variant?: ScrollVariant;
-    tone?: ScrollTone;
     axis?: ScrollAxis;
     maxHeight?: number | string;
     maxWidth?: number | string;

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

@@ -1,2 +1,2 @@
 export { Scroll, ScrollRegion } from './Scroll';
-export type { ScrollProps, ScrollVariant, ScrollTone, ScrollAxis } from './Scroll.types';
+export type { ScrollProps, ScrollAxis } from './Scroll.types';

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

@@ -0,0 +1,10 @@
+/**
+ * Tracks whether a scroll container actually overflows, so it can be made a
+ * keyboard tab stop only when there is something to scroll (axe:
+ * scrollable-region-focusable). Re-measured on resize and on child changes.
+ * @internal
+ */
+export declare function useScrollFocusable<T extends HTMLElement>(enabled?: boolean): {
+    ref: (n: T | null) => void;
+    overflowing: boolean;
+};

package/dist/components/Select/Select.d.ts

@@ -22,6 +22,8 @@ export interface SelectProps extends SelectRootProps {
     size?: SelectSize;
     /** Validation color on the trigger. */
     color?: SelectColor;
+    /** Show a clear (×) button while a value is selected. Clearing resets to the placeholder (`onValueChange('')`). */
+    clearable?: boolean;
     /** Pre-label rendered next to the selected value (e.g. an icon). */
     triggerIcon?: ReactNode;
     /** Extra trigger className. */
@@ -34,6 +36,10 @@ export interface SelectProps extends SelectRootProps {
     'aria-invalid'?: boolean;
     /** aria-describedby — Field threads this in. */
     'aria-describedby'?: string;
+    /** Accessible name for the trigger. Falls back to the placeholder when no label is associated. */
+    'aria-label'?: string;
+    /** Id of the element that labels the trigger (Field threads this in). */
+    'aria-labelledby'?: string;
     /** Apply .danger/.warning/.success via Field's className thread. */
     className?: string;
     /**
@@ -58,7 +64,7 @@ export interface SelectProps extends SelectRootProps {
  *   <SelectItem value="staging">Staging</SelectItem>
  * </Select>
  */
-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 declare function Select({ placeholder, size, color, clearable, triggerIcon, triggerClassName, contentClassName, id, className, style, sx, disabled, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rootProps }: SelectProps): import("react/jsx-runtime").JSX.Element;
 export interface SelectItemProps extends ComponentPropsWithoutRef<'div'> {
     /** The value submitted when this item is selected. */
     value: string;

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

@@ -5,6 +5,14 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
     width?: SidebarWidth;
     sticky?: boolean;
     collapsed?: boolean;
+    /**
+     * Remember `collapsed` in localStorage under this key. The saved value is restored on
+     * mount (shown immediately and reported via `onCollapsedChange`) and updated whenever
+     * the `collapsed` prop changes.
+     */
+    persistKey?: string;
+    /** Called with the restored value when `persistKey` finds a saved state that differs from `collapsed`. */
+    onCollapsedChange?: (collapsed: boolean) => void;
     responsive?: boolean;
     /**
      * With `responsive`: below 900px the sidebar slides in from the left as a drawer
@@ -49,5 +57,7 @@ export interface SidebarItemProps extends AnchorHTMLAttributes<HTMLAnchorElement
     disabled?: boolean;
     icon?: ReactNode;
     badge?: ReactNode;
+    /** Tooltip shown on the icon when the sidebar is collapsed. Defaults to the label when it is a string. */
+    tooltip?: ReactNode;
     children: ReactNode;
 }

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

@@ -1,10 +1,12 @@
 import type { HTMLAttributes } from 'react';
 import type { SxProp } from '../Layout/sx';
-export type SkeletonShape = 'text' | 'title' | 'avatar' | 'button';
+export type SkeletonShape = 'text' | 'title' | 'avatar' | 'button' | 'circle' | 'rect';
 export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
     shape?: SkeletonShape;
     width?: number | string;
     height?: number | string;
+    /** `shape="text"` only: render a paragraph of this many lines (last one shorter). */
+    lines?: 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

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'react';
+/** Placeholder shaped like a media card: image, title, two lines of text. */
+export declare const SkeletonCard: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** Placeholder shaped like a `ListItem`: avatar plus primary and secondary lines. */
+export declare const SkeletonListItem: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,2 +1,3 @@
 export { Skeleton } from './Skeleton';
+export { SkeletonCard, SkeletonListItem } from './SkeletonLayouts';
 export type { SkeletonProps, SkeletonShape } from './Skeleton.types';

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

@@ -29,6 +29,8 @@ export interface SliderProps extends Omit<ComponentPropsWithoutRef<'span'>, 'def
     color?: 'primary' | 'success' | 'warning' | 'danger';
     /** Show inline value bubble above the active thumb on hover/focus. */
     showValue?: boolean;
+    /** Show a value tooltip above the thumb while dragging (or keyboard-focused). */
+    showValueTooltip?: boolean;
     /** Format value for the bubble. Default: `String(v)`. */
     formatValue?: (v: number) => ReactNode;
     /**

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

@@ -4,6 +4,8 @@ export interface StepperStep {
     label: ReactNode;
     description?: ReactNode;
     icon?: ReactNode;
+    /** Mark this step as failed (red marker, `aria-invalid`). Wins over complete/active styling. */
+    error?: boolean;
 }
 export interface StepperProps extends Omit<HTMLAttributes<HTMLOListElement>, 'children'> {
     steps: StepperStep[];
@@ -11,8 +13,10 @@ export interface StepperProps extends Omit<HTMLAttributes<HTMLOListElement>, 'ch
     active: number;
     orientation?: 'horizontal' | 'vertical';
     size?: 'sm' | 'md';
-    /** Fired when a previously-completed step is clicked. */
+    /** Fired when a clickable step is clicked. By default only completed steps are clickable. */
     onStepClick?: (index: number) => void;
+    /** Let every step (including upcoming ones) fire `onStepClick`. Default: false. */
+    clickable?: 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

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

@@ -35,6 +35,13 @@ export interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'dir'>
     variant?: TabsVariant;
     /** Size preset. Default: `md`. */
     size?: TabsSize;
+    /** Slide an animated indicator between tabs instead of snapping the active style. Respects reduced motion. */
+    indicator?: boolean;
+    /**
+     * How a horizontal list handles overflow. `wrap` (default) wraps onto more rows;
+     * `scroll` keeps one row that scrolls sideways with edge fades and arrow buttons.
+     */
+    overflow?: 'wrap' | 'scroll';
     /**
      * 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

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

@@ -9,6 +9,8 @@ export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
     autoGrow?: boolean;
     /** With autoGrow, limits how tall the textarea can get. Default 12. */
     maxRows?: number;
+    /** Show a live character counter below the textarea (`n/max` when `maxLength` is set). */
+    showCount?: 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

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

@@ -14,6 +14,15 @@ export interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
     orientation?: TimelineOrientation;
     /** Density preset. Default `'md'`. */
     size?: TimelineSize;
+    /**
+     * Make the entries keyboard-navigable: one Tab stop, then Up/Down (Left/Right
+     * when horizontal) and Home/End move between items.
+     */
+    navigable?: boolean;
+    /** Replace the items with skeleton entries and mark the timeline `aria-busy`. */
+    loading?: boolean;
+    /** Shown in place of the items when there are none (and not `loading`). */
+    empty?: 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

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

@@ -1,9 +1,5 @@
 import type { ToastApi, ToastProviderProps } from './Toast.types';
-/**
- * Wrap your app to enable `useToast()`. Renders a portaled viewport at the
- * chosen `position`. Multiple providers will simply create separate viewports.
- */
-export declare function ToastProvider({ children, position, defaultDuration, maxToasts, offset, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastProvider({ children, position, defaultDuration, maxToasts, limit, offset, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Imperative toast API. Must be called inside a `<ToastProvider>` tree.
  *

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

@@ -2,13 +2,21 @@ 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';
+/** Declarative action (e.g. Undo). Clicking runs `onClick`, then dismisses the toast. */
+export interface ToastActionConfig {
+    label: ReactNode;
+    onClick: () => void;
+}
 export interface ToastOptions {
     /** Visible title. Required unless `description` is supplied. */
     title?: ReactNode;
     /** Optional secondary line under the title. */
     description?: ReactNode;
-    /** Right-side action node — typically a Button. */
-    action?: ReactNode;
+    /**
+     * Right-side action. A node (typically a Button), or `{ label, onClick }` for
+     * a ready-made action such as Undo that also dismisses the toast.
+     */
+    action?: ReactNode | ToastActionConfig;
     /** Override the default icon. Pass `false` to hide the icon. */
     icon?: ReactNode | false;
     /** Variant — drives color, icon, and ARIA role. */
@@ -32,7 +40,7 @@ export interface ToastInstance extends Required<Pick<ToastOptions, 'variant' | '
     id: string;
     title?: ReactNode;
     description?: ReactNode;
-    action?: ReactNode;
+    action?: ReactNode | ToastActionConfig;
     icon?: ReactNode | false;
     onDismiss?: () => void;
     sx?: SxProp;
@@ -60,6 +68,8 @@ export interface ToastProviderProps {
     defaultDuration?: number;
     /** Max number of toasts visible at once; older ones drop off. Default 5. */
     maxToasts?: number;
+    /** Stack cap — alias of `maxToasts`; wins when both are set. */
+    limit?: number;
     /** Distance from the viewport edges. Default `1rem`. */
     offset?: string;
 }

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

@@ -2,18 +2,8 @@ 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
- * appear instantly.
- *
- * @example
- *   <TooltipProvider delayDuration={500}>
- *     <App />
- *   </TooltipProvider>
- */
 export interface TooltipProviderProps {
-    /** Delay before the first tooltip in a group opens, in ms. Default: 700. */
+    /** Delay before the first tooltip in a group opens on hover, in ms. Keyboard focus opens instantly. Default: 300. */
     delayDuration?: number;
     /** Window in which subsequent tooltips open instantly, in ms. Default: 300. */
     skipDelayDuration?: number;
@@ -37,6 +27,8 @@ export interface TooltipProps {
     delayDuration?: number;
     /** Controlled open state. Mostly for testing. */
     open?: boolean;
+    /** Show on touch long-press (hover never fires on touch). Default: true. */
+    longPress?: boolean;
     /** Disable the tooltip but keep the trigger interactive. */
     disabled?: boolean;
     /** Extra className on the popup. */

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

@@ -1,5 +1,16 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 import type { SxProp } from '../Layout/sx';
+/** Internal: per-item position info injected by the tree into its TreeItem children. */
+interface TreeMeta {
+    level: number;
+    size: number;
+    pos: number;
+    /** Windowed mode only. */
+    flat?: boolean;
+    hasChildren?: boolean;
+    expanded?: boolean;
+    parentId?: string | null;
+}
 export interface TreeViewProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect'> {
     /** Controlled set of expanded item ids. */
     expandedIds?: string[];
@@ -17,6 +28,26 @@ 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;
+    /** Show "Expand all" / "Collapse all" buttons above the tree. */
+    expandControls?: boolean;
+    /**
+     * Remember the expanded ids in `localStorage` under this key (uncontrolled
+     * trees only). Restored after mount.
+     */
+    persistKey?: string;
+    /**
+     * Windowing: only the visible nodes inside (and just around) the scrollport are in the
+     * DOM. `'auto'` (default) turns it on above 200 visible nodes when the tree sits in a
+     * height-bounded scroll container (give the tree, or a parent, a `height` and
+     * `overflow: auto`). Needs `TreeItem` children (as `RichTreeView` renders). `false` disables it.
+     */
+    virtualize?: boolean | 'auto';
+    /** Row height in px when windowed. Default 30. */
+    itemHeight?: number;
+    /** Replace the items with skeleton rows and mark the tree `aria-busy`. */
+    loading?: boolean;
+    /** Shown in place of the items when there are none (and not `loading`). */
+    empty?: 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 }`). Applied to the
@@ -35,5 +66,8 @@ export interface TreeItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'id'>
     icon?: ReactNode;
     /** Child TreeItems. */
     children?: ReactNode;
+    /** @internal Position info injected by the parent tree (aria-level / setsize / posinset). */
+    _meta?: TreeMeta;
 }
 export declare const TreeItem: import("react").ForwardRefExoticComponent<TreeItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export {};