canny-ui-react 3.0.0 → 5.0.0

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

@@ -13,6 +13,7 @@ export type BoxProps<E extends ElementType = 'div'> = LayoutProps & Omit<Compone
  * @example
  * <Box p={4} gap={2} direction="column">...</Box>
  * <Box as="section" py={6} px={4}>...</Box>
+ * <Box sx={{ gridTemplateColumns: { base: '1fr', lg: '3fr 1fr' } }}>...</Box>
  */
 export declare const Box: <E extends ElementType = "div">(props: BoxProps<E> & {
     ref?: ForwardedRef<Element>;

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

@@ -1,16 +1,32 @@
 import type { ElementType, ForwardedRef, ReactElement } from 'react';
 import type { BoxProps } from './Box';
+import type { Breakpoint } from './sx';
 type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/** Column weights, e.g. `[3, 1]` → `minmax(0,3fr) minmax(0,1fr)`. */
+type Ratio = number[];
+/** A ratio, or a per-breakpoint map for responsive tracks (e.g. `{ base: [1], lg: [3, 1] }`). */
+type ResponsiveRatio = Ratio | Partial<Record<Breakpoint, Ratio>>;
 export type GridProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, 'display' | 'direction'> & {
-    /** Fixed column count. Maps to `.grid-cols-{n}` utility. Ignored if `minColWidth` is set. */
+    /** Fixed column count. Maps to `.grid-cols-{n}` utility. Ignored if another track prop is set. */
     cols?: GridCols;
     /**
      * Auto-fit responsive grid: `repeat(auto-fit, minmax(minColWidth, 1fr))`.
      * Pass a CSS length (e.g. `'240px'`, `'18rem'`).
      */
     minColWidth?: string;
+    /**
+     * Asymmetric tracks via column weights. `[3, 1]` → a 75/25 split. Responsive
+     * with a breakpoint map: `ratio={{ base: [1], lg: [3, 1] }}` stacks below `lg`
+     * and splits 3:1 at/above it — no custom CSS needed.
+     */
+    ratio?: ResponsiveRatio;
+    /** Explicit `grid-template-columns` string (e.g. `'200px 1fr auto'`). */
+    template?: string;
 };
-/** CSS Grid container. Use `cols` for fixed tracks, or `minColWidth` for responsive auto-fit. */
+/**
+ * CSS Grid container. Choose one track model: `cols` (equal), `minColWidth`
+ * (auto-fit), `ratio` (asymmetric, responsive), or `template` (explicit).
+ */
 export declare const Grid: <E extends ElementType = "div">(props: GridProps<E> & {
     ref?: ForwardedRef<Element>;
 }) => ReactElement;

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

@@ -17,3 +17,5 @@ export type { AspectRatioProps } from './AspectRatio';
 export type { CenterProps } from './Center';
 export type { GroupProps } from './Group';
 export type { Space, Align, Justify, Direction, Display, LayoutProps } from './layout.types';
+export type { SxProp, Breakpoint } from './sx';
+export { BREAKPOINTS, resolveSx } from './sx';

package/dist/components/Layout/layout.types.d.ts

@@ -1,4 +1,5 @@
 import type { ElementType, ReactNode } from 'react';
+import type { SxProp } from './sx';
 /** Spacing scale token — maps 1:1 to `.p-{n}`, `.m-{n}`, `.gap-{n}` utilities. */
 export type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
 export type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
@@ -32,6 +33,15 @@ export interface LayoutProps {
     wrap?: boolean;
     w?: 'full' | 'auto' | 'fit';
     h?: 'full' | 'auto' | 'fit';
+    /** Grow to fill remaining space along the parent flex axis (`flex: 1 1 0`). */
+    grow?: boolean;
+    /**
+     * MUI-like escape hatch for one-off CSS. Each value may be a scalar or a
+     * responsive map keyed by breakpoint (base/sm/md/lg/xl), e.g.
+     * `sx={{ p: 8, gridTemplateColumns: { base: '1fr', lg: '3fr 1fr' } }}`.
+     * Scalar-only sx becomes inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     children?: ReactNode;
 }
 /** Maps layout props to the utility class names emitted by core. */

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

@@ -0,0 +1,31 @@
+import type { CSSProperties } from 'react';
+/** Responsive breakpoint keys. `base` has no media query (applies at all widths). */
+export type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl';
+/** Mobile-first min-width breakpoints (px). Mirrors the common sm/md/lg/xl scale. */
+export declare const BREAKPOINTS: Record<Exclude<Breakpoint, 'base'>, number>;
+type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+/**
+ * MUI-like style object: any CSS property, each value either a scalar or a
+ * responsive map keyed by breakpoint, e.g.
+ * `sx={{ padding: 8, gridTemplateColumns: { base: '1fr', lg: '3fr 1fr' } }}`.
+ */
+export type SxProp = {
+    [K in keyof CSSProperties]?: Responsive<CSSProperties[K]>;
+};
+export interface SxResult {
+    /** Inline style for all-scalar sx. */
+    style?: CSSProperties;
+    /** Generated class for responsive sx. */
+    className?: string;
+    /** CSS text (base rules + min-width @media blocks) to inject in a <style>. */
+    css?: string;
+}
+/**
+ * Resolve an `sx` object into what a component needs to render:
+ * - All-scalar sx → merged into inline `style` (no <style> element needed).
+ * - Any responsive value → a deterministic hashed class plus a `css` string of
+ *   base rules and min-width @media blocks. The hash is content-derived, so SSR
+ *   and client output match exactly.
+ */
+export declare function resolveSx(sx: SxProp): SxResult;
+export {};

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

@@ -2,8 +2,16 @@ 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>>;
-export interface MenuContentProps extends ComponentPropsWithoutRef<typeof RadixMenu.Content> {
+export interface MenuContentProps extends ComponentPropsWithoutRef<'div'> {
     className?: string;
+    /** Preferred side of the trigger to render against. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Distance in px from the trigger. Default: 6. */
+    sideOffset?: number;
+    /** Alignment against the trigger. */
+    align?: 'start' | 'center' | 'end';
+    /** Offset in px from the aligned edge. */
+    alignOffset?: number;
     /** Visual size — controls padding + font size. Default: `md`. */
     size?: 'sm' | 'md';
 }
@@ -21,7 +29,13 @@ export interface MenuContentProps extends ComponentPropsWithoutRef<typeof RadixM
  *   </Menu>
  */
 export declare const MenuContent: import("react").ForwardRefExoticComponent<MenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface MenuItemProps extends ComponentPropsWithoutRef<typeof RadixMenu.Item> {
+export interface MenuItemProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {
+    /** Disable selecting this item. */
+    disabled?: boolean;
+    /** Fires when the item is selected (click or Enter). */
+    onSelect?: (event: Event) => void;
+    /** Optional text used for typeahead matching. */
+    textValue?: string;
     /** Leading icon. */
     icon?: ReactNode;
     /** Right-aligned shortcut hint (e.g. `⌘C`). */
@@ -30,21 +44,43 @@ export interface MenuItemProps extends ComponentPropsWithoutRef<typeof RadixMenu
     destructive?: boolean;
 }
 export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface MenuCheckboxItemProps extends ComponentPropsWithoutRef<typeof RadixMenu.CheckboxItem> {
+export interface MenuCheckboxItemProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Fires when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Disable selecting this item. */
+    disabled?: boolean;
+    /** Fires when the item is selected (click or Enter). */
+    onSelect?: (event: Event) => void;
+    /** Optional text used for typeahead matching. */
+    textValue?: string;
     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 MenuRadioItemProps extends ComponentPropsWithoutRef<typeof RadixMenu.RadioItem> {
+export interface MenuRadioItemProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {
+    /** The value of this radio item within its group. */
+    value: string;
+    /** Disable selecting this item. */
+    disabled?: boolean;
+    /** Fires when the item is selected (click or Enter). */
+    onSelect?: (event: Event) => void;
+    /** Optional text used for typeahead matching. */
+    textValue?: string;
     shortcut?: ReactNode;
 }
 export declare const MenuRadioItem: import("react").ForwardRefExoticComponent<MenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface MenuLabelProps extends ComponentPropsWithoutRef<typeof RadixMenu.Label> {
+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 interface MenuSubTriggerProps extends ComponentPropsWithoutRef<typeof RadixMenu.SubTrigger> {
+export interface MenuSubTriggerProps extends ComponentPropsWithoutRef<'div'> {
+    /** Disable opening this submenu. */
+    disabled?: boolean;
+    /** Optional text used for typeahead matching. */
+    textValue?: string;
     icon?: ReactNode;
 }
 export declare const MenuSubTrigger: import("react").ForwardRefExoticComponent<MenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, PointerEvent } from 'react';
+export type PanelDirection = 'horizontal' | 'vertical';
+export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Initial size as a percentage of the group. */
+    defaultSize?: number;
+    /** Minimum size in percent. Default 10. */
+    minSize?: number;
+    /** Maximum size in percent. Default 90. */
+    maxSize?: number;
+}
+export declare const Panel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<HTMLDivElement>>;
+interface HandleInternal {
+    direction: PanelDirection;
+    valueNow: number;
+    valueMin: number;
+    valueMax: number;
+    onResizeStart: (e: PointerEvent<HTMLDivElement>) => void;
+    onKeyResize: (dir: 1 | -1) => void;
+}
+export interface PanelResizeHandleProps extends HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+    /** @internal injected by PanelGroup */
+    __internal?: HandleInternal;
+}
+export declare const PanelResizeHandle: import("react").ForwardRefExoticComponent<PanelResizeHandleProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface PanelGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Layout axis. Default `'horizontal'`. */
+    direction?: PanelDirection;
+}
+export declare const PanelGroup: import("react").ForwardRefExoticComponent<PanelGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+/** No-op kept for drop-in compatibility with `react-resizable-panels`. */
+export declare function disableGlobalCursorStyles(): void;
+export {};

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

@@ -0,0 +1,2 @@
+export { PanelGroup, Panel, PanelResizeHandle, disableGlobalCursorStyles } from './PanelGroup';
+export type { PanelGroupProps, PanelProps, PanelResizeHandleProps, PanelDirection, } from './PanelGroup';

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

@@ -16,9 +16,17 @@ 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 interface PopoverContentProps extends ComponentPropsWithoutRef<typeof RadixPopover.Content> {
+export interface PopoverContentProps extends ComponentPropsWithoutRef<'div'> {
     className?: string;
     /** Render the small directional arrow on the popover. Default: false. */
     withArrow?: boolean;
+    /** Preferred side of the trigger to render against. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Distance in px from the trigger. Default: 8. */
+    sideOffset?: number;
+    /** Alignment against the trigger. */
+    align?: 'start' | 'center' | 'end';
+    /** Offset in px from the aligned edge. */
+    alignOffset?: number;
 }
 export declare const PopoverContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -38,13 +38,19 @@ export interface SelectProps extends SelectRootProps {
  * </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 interface SelectItemProps extends ComponentPropsWithoutRef<typeof RadixSelect.Item> {
+export interface SelectItemProps extends ComponentPropsWithoutRef<'div'> {
+    /** The value submitted when this item is selected. */
+    value: string;
+    /** Disable selecting this item. */
+    disabled?: boolean;
+    /** Optional text used for typeahead matching. */
+    textValue?: string;
 }
 export declare const SelectItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface SelectGroupProps extends ComponentPropsWithoutRef<typeof RadixSelect.Group> {
+export interface SelectGroupProps extends ComponentPropsWithoutRef<'div'> {
 }
 export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface SelectLabelProps extends ComponentPropsWithoutRef<typeof RadixSelect.Label> {
+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>>;

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

@@ -1,6 +1,29 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import * as SliderPrimitive from '@radix-ui/react-slider';
-export interface SliderProps extends ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+export interface SliderProps extends Omit<ComponentPropsWithoutRef<'span'>, 'defaultValue' | 'dir' | 'onChange'> {
+    /** Controlled value (one entry per thumb). */
+    value?: number[];
+    /** Uncontrolled initial value (one entry per thumb). */
+    defaultValue?: number[];
+    /** Fires continuously as the value changes. */
+    onValueChange?: (value: number[]) => void;
+    /** Fires when the user finishes dragging. */
+    onValueCommit?: (value: number[]) => void;
+    /** Minimum value. Default: 0. */
+    min?: number;
+    /** Maximum value. Default: 100. */
+    max?: number;
+    /** Step increment. Default: 1. */
+    step?: number;
+    /** Minimum steps allowed between two thumbs. */
+    minStepsBetweenThumbs?: number;
+    /** Orientation. Default: `horizontal`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Disable the slider. */
+    disabled?: boolean;
+    /** Reading direction. */
+    dir?: 'ltr' | 'rtl';
+    /** Name for form submission. */
+    name?: string;
     size?: 'sm' | 'md' | 'lg';
     color?: 'primary' | 'success' | 'warning' | 'danger';
     /** Show inline value bubble above the active thumb on hover/focus. */

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

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import * as RadixTabs from '@radix-ui/react-tabs';
 export type TabsVariant = 'line' | 'pills' | 'segmented';
 export type TabsSize = 'sm' | 'md' | 'lg';
@@ -16,7 +16,21 @@ export type TabsSize = 'sm' | 'md' | 'lg';
  *     <TabsContent value="activity">…</TabsContent>
  *   </Tabs>
  */
-export interface TabsProps extends ComponentPropsWithoutRef<typeof RadixTabs.Root> {
+export interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'dir'> {
+    /** Controlled active tab value. */
+    value?: string;
+    /** Uncontrolled initial active tab value. */
+    defaultValue?: string;
+    /** Fires when the active tab changes. */
+    onValueChange?: (value: string) => void;
+    /** Orientation of the tab list. Default: `horizontal`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Reading direction. */
+    dir?: 'ltr' | 'rtl';
+    /** Whether tabs activate on focus or only on click. Default: `automatic`. */
+    activationMode?: 'automatic' | 'manual';
+    /** Tab list and panels. */
+    children?: ReactNode;
     /** Visual style. Default: `line`. */
     variant?: TabsVariant;
     /** Size preset. Default: `md`. */
@@ -24,11 +38,13 @@ export interface TabsProps extends ComponentPropsWithoutRef<typeof RadixTabs.Roo
 }
 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 TabsTriggerProps extends ComponentPropsWithoutRef<typeof RadixTabs.Trigger> {
+export interface TabsTriggerProps extends ComponentPropsWithoutRef<'button'> {
+    /** Value identifying which panel this trigger activates. */
+    value: string;
     /** Optional leading icon. */
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     /** Optional right-aligned badge (count, status). */
-    badge?: React.ReactNode;
+    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>>;

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

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+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';
+/** Rail direction. */
+export type TimelineOrientation = 'vertical' | 'horizontal';
+/** Density preset — scales dots, connector thickness, and type. */
+export type TimelineSize = 'sm' | 'md' | 'lg';
+export interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+    /** Side the content sits on relative to the rail. Default `'right'`. (Vertical only.) */
+    position?: TimelinePosition;
+    /** Rail direction. Default `'vertical'`. */
+    orientation?: TimelineOrientation;
+    /** Density preset. Default `'md'`. */
+    size?: TimelineSize;
+}
+export declare const Timeline: import("react").ForwardRefExoticComponent<TimelineProps & import("react").RefAttributes<HTMLOListElement>>;
+export type TimelineItemProps = HTMLAttributes<HTMLLIElement>;
+export declare const TimelineItem: import("react").ForwardRefExoticComponent<TimelineItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export type TimelineSeparatorProps = HTMLAttributes<HTMLDivElement>;
+export declare const TimelineSeparator: import("react").ForwardRefExoticComponent<TimelineSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+/** Dot fill treatment. */
+export type TimelineDotVariant = 'filled' | 'outlined' | 'soft';
+export interface TimelineDotProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Semantic color. Default `'neutral'`. */
+    color?: TimelineDotColor;
+    /** Fill treatment: filled (default), outlined ring, or soft tint. */
+    variant?: TimelineDotVariant;
+    /** Optional icon (or number) rendered inside the dot. */
+    icon?: ReactNode;
+    /** Pulsing ring to mark the current step. Respects reduced-motion. */
+    active?: boolean;
+}
+export declare const TimelineDot: import("react").ForwardRefExoticComponent<TimelineDotProps & import("react").RefAttributes<HTMLSpanElement>>;
+/** Connector line style. */
+export type TimelineConnectorLineStyle = 'solid' | 'dashed' | 'dotted';
+export interface TimelineConnectorProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Tint the segment to show a completed step. Omit for a neutral hairline. */
+    color?: TimelineDotColor;
+    /** Line style. Default `'solid'`. */
+    lineStyle?: TimelineConnectorLineStyle;
+}
+export declare const TimelineConnector: import("react").ForwardRefExoticComponent<TimelineConnectorProps & import("react").RefAttributes<HTMLSpanElement>>;
+/** Content treatment: plain, bordered card, or elevated card. */
+export type TimelineContentVariant = 'plain' | 'card' | 'elevated';
+export interface TimelineContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** `'card'` = bordered block, `'elevated'` = card with shadow. Default `'plain'`. */
+    variant?: TimelineContentVariant;
+    /** Adds a colored left-accent border to a card, matched to a status color. */
+    accentColor?: TimelineDotColor;
+}
+export declare const TimelineContent: import("react").ForwardRefExoticComponent<TimelineContentProps & import("react").RefAttributes<HTMLDivElement>>;
+/** Slot rendered on the opposite side of the rail from the content (e.g. a timestamp). */
+export type TimelineOppositeContentProps = HTMLAttributes<HTMLDivElement>;
+export declare const TimelineOppositeContent: import("react").ForwardRefExoticComponent<TimelineOppositeContentProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { Timeline, TimelineItem, TimelineSeparator, TimelineDot, TimelineConnector, TimelineContent, TimelineOppositeContent, } from './Timeline';
+export type { TimelineDotColor, TimelinePosition, TimelineOrientation, TimelineSize, TimelineDotVariant, TimelineConnectorLineStyle, TimelineContentVariant, TimelineDotProps, TimelineProps, TimelineItemProps, TimelineSeparatorProps, TimelineConnectorProps, TimelineContentProps, TimelineOppositeContentProps, } from './Timeline';

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

@@ -0,0 +1,28 @@
+import type { ReactElement, ReactNode, Ref } from 'react';
+import type { TreeViewProps } from './TreeView';
+/** Minimal shape RichTreeView expects; extra fields are passed through untouched. */
+export type RichTreeViewItem = {
+    id?: string;
+    label?: ReactNode;
+    children?: RichTreeViewItem[];
+    [key: string]: unknown;
+};
+export interface RichTreeViewProps<T extends RichTreeViewItem = RichTreeViewItem> extends TreeViewProps {
+    /** Hierarchical data. */
+    items: T[];
+    /** Derive a stable id. Default `item.id`. */
+    getItemId?: (item: T) => string;
+    /** Derive the row label. Default `item.label`. */
+    getItemLabel?: (item: T) => ReactNode;
+    /** Derive child items. Default `item.children`. */
+    getItemChildren?: (item: T) => T[] | undefined;
+    /** Optional per-item leading icon. */
+    getItemIcon?: (item: T) => ReactNode;
+}
+/**
+ * Data-driven tree. Renders a `TreeView` from a `items` array; all expansion /
+ * selection props are forwarded to the underlying `TreeView`.
+ */
+export declare const RichTreeView: <T extends RichTreeViewItem = RichTreeViewItem>(props: RichTreeViewProps<T> & {
+    ref?: Ref<HTMLUListElement>;
+}) => ReactElement;

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

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface TreeViewProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect'> {
+    /** Controlled set of expanded item ids. */
+    expandedIds?: string[];
+    /** Initial expanded ids when uncontrolled. */
+    defaultExpandedIds?: string[];
+    /** Fired with the next expanded ids whenever an item expands or collapses. */
+    onExpandedChange?: (ids: string[]) => void;
+    /** Controlled selected item id. */
+    selectedId?: string | null;
+    /** Initial selected id when uncontrolled. */
+    defaultSelectedId?: string | null;
+    /** Fired with the selected id. */
+    onSelectedChange?: (id: string) => void;
+    /** Fired when a specific item toggles — `(id, willExpand)`. Use for lazy loading. */
+    onItemExpandToggle?: (id: string, expanded: boolean) => void;
+    /** Auto folder/file icons for items without their own icon. Default `true`. */
+    defaultIcons?: boolean;
+}
+export declare const TreeView: import("react").ForwardRefExoticComponent<TreeViewProps & import("react").RefAttributes<HTMLUListElement>>;
+export interface TreeItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
+    /** Stable id for this node. */
+    itemId: string;
+    /** Row label. */
+    label: ReactNode;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /** Child TreeItems. */
+    children?: ReactNode;
+}
+export declare const TreeItem: import("react").ForwardRefExoticComponent<TreeItemProps & import("react").RefAttributes<HTMLLIElement>>;

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

@@ -0,0 +1,4 @@
+export { TreeView, TreeItem } from './TreeView';
+export type { TreeViewProps, TreeItemProps } from './TreeView';
+export { RichTreeView } from './RichTreeView';
+export type { RichTreeViewProps, RichTreeViewItem } from './RichTreeView';