gridsmith-ui 0.4.0 → 0.6.1

package/dist/index.d.ts

@@ -1,13 +1,13 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, Ref, HTMLAttributes, ComponentProps } from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, Ref, ReactElement, HTMLAttributes, AnchorHTMLAttributes, ComponentType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconName } from './icons.js';
-import { ColumnDef } from '@tanstack/react-table';
-import { VirtualItem } from '@tanstack/react-virtual';
-import { Separator, Panel, Group } from 'react-resizable-panels';
+import { B as BreakpointKey } from './use-breakpoint-Cn51IubK.js';
+export { a as BreakpointWidthProvider, u as useBreakpoint } from './use-breakpoint-Cn51IubK.js';
 
 type ButtonVariant = "default" | "secondary" | "tertiary" | "outline" | "ghost" | "destructive" | "success" | "warning" | "link";
 type ButtonSize = "sm" | "md" | "lg" | "icon-sm" | "icon" | "icon-lg";
+declare const ButtonSizeContext: react.Context<ButtonSize | null>;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -16,7 +16,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     loading?: boolean;
     children?: ReactNode;
 }
-declare function Button({ variant, size, iconLeft, iconRight, loading, className, children, disabled, style, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 type Side = "top" | "right" | "bottom" | "left";
 type Align = "start" | "center" | "end";
@@ -100,8 +100,10 @@ interface DropdownProps {
     ref?: Ref<HTMLDivElement>;
     container?: Element | DocumentFragment;
     error?: boolean;
+    /** When multiple, show removable chips below the trigger. Defaults to true. Set false in toolbar contexts where chips are shown elsewhere. */
+    showChips?: boolean;
 }
-declare function Dropdown({ options, value, onChange, label, disabled, placeholder, multiple, searchable, size, className, ref, container, error, }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ options, value, onChange, label, disabled, placeholder, multiple, searchable, size, className, ref, container, error, showChips, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 interface ComboboxOption {
     value: string;
@@ -177,8 +179,59 @@ interface DatePickerProps {
     label?: string;
     /** Forwarded to the trigger button so an external Label htmlFor can be associated. Defaults to a generated id used by the built-in label. */
     id?: string;
+    /** Earliest / latest selectable day (inclusive). Days outside are disabled. */
+    min?: Date;
+    max?: Date;
+    /**
+     * Range context for paired "Start date" / "End date" pickers. The other
+     * end of the range is shown as selected and the days between are shaded,
+     * so choosing an end date shows the start date and the span. When this
+     * picker has no value yet, hovering previews the span from the other end.
+     */
+    range?: {
+        start?: Date | null;
+        end?: Date | null;
+    };
+}
+declare function DatePicker({ value, onChange, placeholder, disabled, className, ref, container, error, label, id, min, max, range }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface DateRangePreset {
+    label: string;
+    /** Returns the range to apply; evaluated when clicked so "Last 7 days" is always relative to now. */
+    range: () => DateRange;
+}
+interface DateRangePickerProps {
+    value: DateRange;
+    onChange: (range: DateRange) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    /** Built-in label above the trigger. Omit when wrapping in <Field>. */
+    label?: string;
+    id?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    container?: Element | DocumentFragment;
+    /** Earliest / latest selectable day. */
+    min?: Date;
+    max?: Date;
+    /** Quick ranges listed beside the calendars. Pass [] to hide; omit for the defaults. */
+    presets?: DateRangePreset[];
+    /** First day of the week. Default 0 (Sunday). */
+    weekStartsOn?: 0 | 1;
 }
-declare function DatePicker({ value, onChange, placeholder, disabled, className, ref, container, error, label, id }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[];
+/**
+ * Start/end date selection with two side-by-side months, hover preview of
+ * the pending range, and quick presets. Click once for the start, again for
+ * the end (clicking before the start restarts the selection). Closes on
+ * Escape or outside click. Pair with <Field> for label/hint/error wiring.
+ */
+declare function DateRangePicker({ value, onChange, placeholder, disabled, error, label, id, className, ref, container, min, max, presets, weekStartsOn, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
 
 interface FileUploadProps {
     onFiles: (files: File[]) => void;
@@ -192,6 +245,8 @@ interface FileUploadProps {
 declare function FileUpload({ onFiles, accept, multiple, maxSize, className, error, label }: FileUploadProps): react_jsx_runtime.JSX.Element;
 
 interface SliderRangeProps {
+    /** Accessible name for the slider thumb(s); range sliders announce "<label> minimum" / "<label> maximum". Default "Value". */
+    label?: string;
     value: number | [number, number];
     onChange: (value: number | [number, number]) => void;
     min?: number;
@@ -203,7 +258,7 @@ interface SliderRangeProps {
     ref?: Ref<HTMLDivElement>;
     error?: boolean;
 }
-declare function SliderRange({ value, onChange, min, max, step, disabled, showValue, className, ref, error, }: SliderRangeProps): react_jsx_runtime.JSX.Element;
+declare function SliderRange({ value, onChange, min, max, step, disabled, showValue, className, ref, error, label }: SliderRangeProps): react_jsx_runtime.JSX.Element;
 
 interface TimePickerProps {
     value: string;
@@ -233,10 +288,12 @@ interface NumberInputProps {
     size?: "sm" | "md" | "lg";
     className?: string;
     error?: boolean;
+    /** Allow decimal input. Default: true when step is not an integer, false otherwise. */
+    allowDecimals?: boolean;
     /** Forwarded to the inner input element so a Label htmlFor can be associated. */
     id?: string;
 }
-declare function NumberInput({ value, onChange, min, max, step, disabled, placeholder, prefix, suffix, size, className, error, id, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+declare function NumberInput({ value, onChange, min, max, step, disabled, placeholder, prefix, suffix, size, className, error, allowDecimals, id, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface TagInputProps {
     value: string[];
@@ -248,8 +305,10 @@ interface TagInputProps {
     error?: boolean;
     /** Forwarded to the inner input element so a Label htmlFor can be associated. */
     id?: string;
+    /** Accessible name for the input when no visible Label is associated via id. Default "Add tag". */
+    "aria-label"?: string;
 }
-declare function TagInput({ value, onChange, placeholder, maxTags, disabled, className, error, id, }: TagInputProps): react_jsx_runtime.JSX.Element;
+declare function TagInput({ value, onChange, placeholder, maxTags, disabled, className, error, id, "aria-label": ariaLabel }: TagInputProps): react_jsx_runtime.JSX.Element;
 
 interface PinInputProps {
     value: string;
@@ -295,6 +354,39 @@ interface InlineFieldErrorProps {
 }
 declare function InlineFieldError({ message, id, className }: InlineFieldErrorProps): react_jsx_runtime.JSX.Element;
 
+interface FieldControlProps {
+    id: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: true;
+    "aria-required"?: true;
+    required?: boolean;
+    /** Set on Gridsmith form components (Input, Textarea, Dropdown, DatePicker, …). */
+    error?: boolean;
+}
+interface FieldProps {
+    label: ReactNode;
+    /** The single form control. Receives id, aria-describedby, aria-invalid/error and required automatically. */
+    children: ReactElement | ((props: FieldControlProps) => ReactNode);
+    /** Persistent help text (format requirements, why a field is disabled). Shown below the control, above any error. */
+    hint?: ReactNode;
+    /** Current validation error. Rendered as InlineFieldError (role="alert") and linked via aria-describedby. */
+    error?: string | null | false;
+    required?: boolean;
+    /** Slot to the right of the label, e.g. a "Forgot password?" Link. */
+    labelAction?: ReactNode;
+    /** Explicit id for the control; generated when omitted. */
+    id?: string;
+    className?: string;
+}
+/**
+ * Label + control + hint + error, wired together. Guarantees the label is
+ * associated (htmlFor/id), that hint and error are announced
+ * (aria-describedby), that the control is marked invalid, and that the error
+ * sits directly below the field (forms-002/006/009/010). Use one Field per
+ * control; do not add a separate <Label> or a label prop on the child.
+ */
+declare function Field({ label, children, hint, error, required, labelAction, id: idProp, className }: FieldProps): react_jsx_runtime.JSX.Element;
+
 type ValidationMode = "onBlur" | "onSubmit" | "onChange";
 interface FormErrors {
     [field: string]: string | undefined;
@@ -333,18 +425,6 @@ interface TransferListProps {
 }
 declare function TransferList({ available, selected, onChange, availableTitle, selectedTitle, searchable, className, ref, }: TransferListProps): react_jsx_runtime.JSX.Element;
 
-type ToolbarGroup = "blockType" | "fontFamily" | "textSize" | "formatting" | "colors" | "alignment" | "lists" | "blocks" | "insert" | "extras" | "history";
-interface RichTextEditorProps {
-    content?: string;
-    placeholder?: string;
-    onChange?: (html: string) => void;
-    editable?: boolean;
-    toolbar?: ToolbarGroup[] | "full" | "minimal";
-    className?: string;
-    ref?: Ref<HTMLDivElement>;
-}
-declare function RichTextEditor({ content, placeholder, onChange, editable, toolbar, className, ref, }: RichTextEditorProps): react_jsx_runtime.JSX.Element | null;
-
 interface MentionSuggestion {
     id: string;
     label: string;
@@ -363,23 +443,35 @@ interface MentionInputProps {
 declare function MentionInput({ value: controlledValue, onChange, suggestions, trigger, placeholder, disabled, className, }: MentionInputProps): react_jsx_runtime.JSX.Element;
 
 type CardVariant = "default" | "featured" | "interactive" | "outline" | "ghost";
+type CardSelectType = "radio" | "checkbox" | "toggle";
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
     variant?: CardVariant;
     loading?: boolean;
     selected?: boolean;
     selectable?: boolean;
+    selectType?: CardSelectType;
     onSelectedChange?: (selected: boolean) => void;
+    name?: string;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    checkable?: boolean;
     children: ReactNode;
 }
-declare function Card({ variant, loading, selected, selectable, onSelectedChange, className, children, onClick, style, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
 interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
     actions?: ReactNode;
+    icon?: IconName;
+    menuItems?: DropdownMenuEntry[];
 }
-declare function CardHeader({ className, children, actions, ...props }: CardHeaderProps): react_jsx_runtime.JSX.Element;
-declare function CardTitle({ className, children, ...props }: HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
-declare function CardDescription({ className, children, ...props }: HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
-declare function CardContent({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-declare function CardFooter({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<HTMLHeadingElement>>;
+interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** Max lines before clamping. Default 2. Set to 0 for no limit. */
+    lines?: number;
+}
+declare const CardDescription: react.ForwardRefExoticComponent<CardDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 
 interface Trend {
     direction: "up" | "down" | "flat";
@@ -409,6 +501,35 @@ interface DataListProps {
 }
 declare function DataList({ items, columns, className }: DataListProps): react_jsx_runtime.JSX.Element;
 
+interface DescriptionItem {
+    label: string;
+    value: ReactNode;
+    icon?: IconName;
+    tooltip?: string;
+    span?: number;
+}
+type DescriptionListOrientation = "horizontal" | "vertical";
+type DescriptionListSize = "sm" | "md" | "lg";
+interface DescriptionListProps {
+    items: DescriptionItem[];
+    orientation?: DescriptionListOrientation;
+    columns?: 1 | 2 | 3 | 4;
+    size?: DescriptionListSize;
+    dividers?: boolean;
+    stackBelow?: "sm" | "md" | "lg";
+    className?: string;
+}
+declare const DescriptionList: react.ForwardRefExoticComponent<DescriptionListProps & react.RefAttributes<HTMLDListElement>>;
+
+type StatusDotVariant = "success" | "warning" | "error" | "info" | "neutral" | "offline";
+interface StatusDotProps {
+    variant?: StatusDotVariant;
+    label?: string;
+    pulse?: boolean;
+    className?: string;
+}
+declare const StatusDot: react.ForwardRefExoticComponent<StatusDotProps & react.RefAttributes<HTMLSpanElement>>;
+
 interface AccordionItem {
     trigger: ReactNode;
     content: ReactNode;
@@ -423,37 +544,17 @@ interface AccordionProps {
 }
 declare function Accordion({ items, type, defaultOpen, open: controlledOpen, onOpenChange, className }: AccordionProps): react_jsx_runtime.JSX.Element;
 
-declare const DEFAULT_BREAKPOINTS: {
-    readonly sm: 640;
-    readonly md: 768;
-    readonly lg: 1024;
-    readonly xl: 1280;
-};
-type BreakpointKey = keyof typeof DEFAULT_BREAKPOINTS;
-/**
- * Provides an override container width for all `useBreakpoint` calls within
- * this subtree. Used by the builder's viewport preview to make components
- * respond to the constrained canvas width instead of the browser viewport.
- */
-declare function BreakpointWidthProvider({ width, children }: {
-    width: number | null;
-    children: ReactNode;
-}): react.FunctionComponentElement<react.ProviderProps<number | null>>;
-/**
- * Reactive breakpoint check that reads `--ds-bp-*` CSS variables.
- * Returns true when the viewport (or override container) is at or below the
- * named breakpoint.
- *
- * @example
- * const isMobile = useBreakpoint("md"); // true when ≤768px
- */
-declare function useBreakpoint(key: BreakpointKey): boolean;
-
 interface Column {
     key: string;
     header: string;
     align?: "left" | "center" | "right";
     sortable?: boolean;
+    /** Opt-in text truncation. true = 1 line, or { lines: N } for multi-line clamp before truncating. */
+    truncate?: boolean | {
+        lines: number;
+    };
+    /** CSS max-width for the column (e.g. "200px", "30ch"). Helps constrain wide text columns. */
+    maxWidth?: string;
 }
 type SortDir = "asc" | "desc" | null;
 type TableDensity = "default" | "compact";
@@ -522,22 +623,32 @@ declare function Calendar({ events, view: controlledView, defaultView, onViewCha
 
 type BadgeVariant = "default" | "neutral" | "subtle" | "success" | "success-soft" | "warning" | "warning-soft" | "error" | "error-soft" | "outline";
 type BadgeSize = "xs" | "sm" | "md";
+type BadgePaletteColor = 1 | 2 | 3 | 4 | 5;
 interface BadgeProps {
     variant?: BadgeVariant;
     size?: BadgeSize;
+    /** Palette colour (1-5). Overrides variant colour with decorative palette tokens. */
+    color?: BadgePaletteColor;
     /** Icon to show before the label */
     iconLeft?: IconName;
     /** Icon to show after the label */
     iconRight?: IconName;
+    /** Max width before truncation (e.g. "120px", "16ch"). Shows tooltip when truncated. */
+    maxWidth?: string;
     className?: string;
     children?: ReactNode;
 }
-declare function Badge({ variant, size, iconLeft, iconRight, className, children }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ variant, size, color, iconLeft, iconRight, maxWidth, className, children }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 type TagVariant = "default" | "subtle" | "success" | "warning" | "error" | "outline";
+type TagPaletteColor = 1 | 2 | 3 | 4 | 5;
 interface TagProps {
     variant?: TagVariant;
     size?: "sm" | "md";
+    /** Palette colour (1-5). Overrides variant colour with decorative palette tokens. */
+    color?: TagPaletteColor;
+    /** Max width before truncation (e.g. "120px", "16ch"). Shows tooltip when truncated. */
+    maxWidth?: string;
     onRemove?: () => void;
     onClick?: () => void;
     disabled?: boolean;
@@ -546,16 +657,43 @@ interface TagProps {
 }
 declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
 
+type AvatarStatus = "online" | "away" | "busy" | "offline";
 interface AvatarProps {
     initials?: string;
     src?: string;
     alt?: string;
     size?: "sm" | "md" | "lg";
-    status?: "online" | "away";
+    status?: AvatarStatus;
     className?: string;
 }
 declare function Avatar({ initials, src, alt, size, status, className }: AvatarProps): react_jsx_runtime.JSX.Element;
 
+interface AvatarGroupItem {
+    /** Display name — used for the tooltip and, when initials are omitted, to derive them. */
+    name?: string;
+    initials?: string;
+    src?: string;
+    alt?: string;
+    status?: AvatarStatus;
+}
+interface AvatarGroupProps {
+    items: AvatarGroupItem[];
+    /** Avatars shown before collapsing the rest into a "+N" counter. Default 4. */
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    /** Colour of the ring separating overlapping avatars — match the surface the group sits on. Default "canvas". */
+    ring?: "canvas" | "surface";
+    /** Called when the "+N" counter is clicked (e.g. open a member list). Renders it as a button. */
+    onOverflowClick?: () => void;
+    className?: string;
+}
+/**
+ * Overlapping row of avatars with a "+N" counter for the rest. Use for
+ * members, assignees, participants — anywhere several people share one
+ * slot. Do not hand-roll this with -space-x and ring classes.
+ */
+declare function AvatarGroup({ items, max, size, ring, onOverflowClick, className }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
 interface EmptyStateProps {
     icon?: ReactNode;
     title: string;
@@ -663,39 +801,6 @@ interface CarouselProps {
 }
 declare function Carousel({ children, autoPlay, autoPlayInterval, loop, showIndicators, showArrows, className, ref, }: CarouselProps): react_jsx_runtime.JSX.Element;
 
-interface DataGridProps<T> {
-    data: T[];
-    columns: ColumnDef<T, any>[];
-    pageSize?: number;
-    editable?: boolean;
-    onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void;
-    /** Breakpoint at which the grid switches to card layout. Defaults to "md" (768px). */
-    mobileBreakpoint?: BreakpointKey;
-    className?: string;
-}
-declare function DataGrid<T>({ data, columns, pageSize, editable, onCellEdit, mobileBreakpoint, className, }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
-
-interface KanbanCard {
-    id: string;
-    title: string;
-    description?: string;
-    tags?: string[];
-    avatar?: string;
-}
-interface KanbanColumn {
-    id: string;
-    title: string;
-    cards: KanbanCard[];
-    color?: string;
-}
-interface KanbanBoardProps {
-    columns: KanbanColumn[];
-    onColumnsChange?: (columns: KanbanColumn[]) => void;
-    renderCard?: (card: KanbanCard) => ReactNode;
-    className?: string;
-}
-declare function KanbanBoard({ columns: controlledCols, onColumnsChange, renderCard, className, }: KanbanBoardProps): react_jsx_runtime.JSX.Element;
-
 interface ChatMessage {
     id: string;
     sender: {
@@ -715,17 +820,6 @@ interface ChatMessageListProps {
 }
 declare function ChatMessageList({ messages, typingUser, showInput, onSend, className, }: ChatMessageListProps): react_jsx_runtime.JSX.Element;
 
-interface VirtualizedListProps<T> {
-    items: T[];
-    estimateSize: (index: number) => number;
-    renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode;
-    overscan?: number;
-    height?: number | string;
-    className?: string;
-    ref?: Ref<HTMLDivElement>;
-}
-declare function VirtualizedList<T>({ items, estimateSize, renderItem, overscan, height, className, ref, }: VirtualizedListProps<T>): react_jsx_runtime.JSX.Element;
-
 interface StackedListItem {
     id: string | number;
     leading?: ReactNode;
@@ -743,13 +837,48 @@ interface StackedListProps {
 }
 declare const StackedList: react.ForwardRefExoticComponent<StackedListProps & react.RefAttributes<HTMLUListElement>>;
 
+type LinkUnderline = "hover" | "always" | "none";
+type LinkTone = "accent" | "muted" | "inherit";
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    children: ReactNode;
+    /** When to show the underline. Default "hover". */
+    underline?: LinkUnderline;
+    /** Colour: accent (default), muted for secondary links, inherit to match surrounding text. */
+    tone?: LinkTone;
+    /** Opens in a new tab with rel="noopener noreferrer". Default false. */
+    external?: boolean;
+    /**
+     * Render through a router link component instead of a plain anchor
+     * (e.g. `component={RouterLink}` from react-router or next/link). The
+     * component receives the same props; `href` is also passed as `to` for
+     * react-router compatibility.
+     */
+    component?: ComponentType<Record<string, unknown>>;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+}
+/**
+ * Navigation link. Renders a real <a> (or a router link via `component`) so
+ * middle-click, open-in-new-tab, right-click "copy link" and screen readers
+ * all behave correctly. Visually identical to Button variant="link".
+ *
+ * Use Link for NAVIGATION (to a page or URL). Use Button variant="link" for an
+ * ACTION that should look like a link (show more, resend code). Never use a
+ * ghost Button for inline text — its padding breaks the line.
+ */
+declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+
 type TabsVariant = "underline" | "pill";
+type TabsOverflow = "scroll" | "hidden" | "truncate";
 interface Tab {
     id: string;
     label: string;
     count?: number;
     icon?: IconName;
     disabled?: boolean;
+    /** Truncate long labels and show tooltip on hover. */
+    truncate?: boolean;
 }
 interface TabsArrayProps {
     tabs: Tab[];
@@ -758,6 +887,7 @@ interface TabsArrayProps {
     orientation?: "horizontal" | "vertical";
     variant?: TabsVariant;
     fullWidth?: boolean;
+    overflow?: TabsOverflow;
     className?: string;
     children?: never;
 }
@@ -767,6 +897,7 @@ interface TabsCompoundProps {
     orientation?: "horizontal" | "vertical";
     variant?: TabsVariant;
     fullWidth?: boolean;
+    overflow?: TabsOverflow;
     className?: string;
     children: ReactNode;
     tabs?: never;
@@ -776,12 +907,13 @@ declare function TabsList({ children, className }: {
     children: ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function TabsTrigger({ value, children, count, icon, disabled, className }: {
+declare function TabsTrigger({ value, children, count, icon, disabled, truncate, className }: {
     value: string;
     children: ReactNode;
     count?: number;
     icon?: IconName;
     disabled?: boolean;
+    truncate?: boolean;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 declare function TabsContent({ value, children, className }: {
@@ -800,13 +932,28 @@ interface BreadcrumbItem$1 {
     label: string;
     href?: string;
     onClick?: () => void;
+    icon?: IconName;
 }
+type BreadcrumbsVariant = "inline" | "contained" | "pill";
+type BreadcrumbsSeparator = "slash" | "chevron" | "dot" | "arrow";
+type BreadcrumbsSize = "sm" | "md";
 interface BreadcrumbsProps {
     items: BreadcrumbItem$1[];
-    separator?: "slash" | "chevron" | "dot";
+    separator?: BreadcrumbsSeparator;
+    variant?: BreadcrumbsVariant;
+    /** Visual treatment of individual breadcrumb items — independent of layout variant. */
+    itemVariant?: "default" | "pill";
+    size?: BreadcrumbsSize;
+    showIcons?: boolean;
+    maxItems?: number;
+    /** Full-bleed: contained background extends edge-to-edge, breaking out of parent padding. Text stays aligned with sibling content. */
+    bleed?: boolean;
+    /** Max-width for bleed content alignment. Defaults to --ds-bp-xl. */
+    contentMaxWidth?: string;
     className?: string;
+    container?: Element | DocumentFragment;
 }
-declare function Breadcrumbs({ items, separator, className }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+declare const Breadcrumbs: react.ForwardRefExoticComponent<BreadcrumbsProps & react.RefAttributes<HTMLElement>>;
 
 interface PaginationProps {
     currentPage: number;
@@ -834,14 +981,16 @@ interface StepperProps {
 declare function Stepper({ steps, currentStep, onStepChange, orientation, className }: StepperProps): react_jsx_runtime.JSX.Element;
 
 type SidebarType = "traditional" | "compact" | "minimal";
+type SidebarPosition = "flush" | "floating";
 interface SidebarContextValue {
     collapsed: boolean;
     onCollapsedChange: (collapsed: boolean) => void;
     portalContainer: Element | null;
     type: SidebarType;
+    navSize?: "sm" | "md";
 }
 declare function useSidebar(): SidebarContextValue | null;
-type SidebarVariant = "default" | "dark" | "branded";
+type SidebarVariant = "default" | "dark";
 interface SidebarProps {
     header?: ReactNode;
     footer?: ReactNode;
@@ -855,6 +1004,12 @@ interface SidebarProps {
     mini?: boolean;
     /** Sidebar layout type: traditional (collapsible), compact (narrow icon+label stacked), minimal (transparent, no border) */
     type?: SidebarType;
+    /** Position: flush (default, edge-to-edge) or floating (inset with rounded corners and glass surface) */
+    position?: SidebarPosition;
+    /** Whether the adjacent navbar is floating — zeroes top padding in floating mode */
+    navbarFloating?: boolean;
+    /** Item density — passed to context so collapse button matches nav item sizing */
+    navSize?: "sm" | "md";
     /** Fill available width (100%) instead of using a fixed token width. Use inside Drawers. */
     fill?: boolean;
     className?: string;
@@ -875,6 +1030,7 @@ interface SidebarSection {
     label?: string;
     items: SidebarItem[];
 }
+type SidebarNavSize = "sm" | "md";
 interface SidebarNavProps {
     items?: SidebarItem[];
     sections?: SidebarSection[];
@@ -888,9 +1044,11 @@ interface SidebarNavProps {
     mode?: "light" | "dark";
     /** Mobile mode: disables hover flyouts for compact items, renders children inline instead. */
     mobile?: boolean;
+    /** Item density — "sm" reduces padding, font size, and icon size for menu-heavy sidebars */
+    size?: SidebarNavSize;
     className?: string;
 }
-declare function SidebarNav({ items, sections, collapsed: propsCollapsed, onCollapsedChange: propsOnChange, footer, onItemClick, type: propsType, mode, mobile, className, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+declare function SidebarNav({ items, sections, collapsed: propsCollapsed, onCollapsedChange: propsOnChange, footer, onItemClick, type: propsType, mode, mobile, size, className, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
 
 interface SegmentedControlOption {
     value: string;
@@ -928,6 +1086,9 @@ interface BreadcrumbItem {
     onClick?: () => void;
 }
 type HeadingLevel = "h1" | "h2" | "h3" | "h4";
+type PageHeaderVariant = "default" | "colourful" | "minimal" | "tabs-integrated";
+type PageHeaderBehavior = "static" | "snapping";
+type PageHeaderIntensity = "subtle" | "bold";
 interface PageHeaderProps {
     title: string;
     description?: string;
@@ -940,8 +1101,43 @@ interface PageHeaderProps {
     bannerImage?: string;
     as?: HeadingLevel;
     className?: string;
-}
-declare function PageHeader({ title, description, badge, breadcrumbs, onBack, actions, avatar, filters, bannerImage, as: Heading, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+    variant?: PageHeaderVariant;
+    /** Scroll behavior — independent of visual variant. "snapping" collapses on scroll. */
+    behavior?: PageHeaderBehavior;
+    /** Colourful: "subtle" = light accent tint, "bold" = full accent background (dark) */
+    intensity?: PageHeaderIntensity;
+    /** Colourful: background image URL — overlaid with accent colour */
+    backgroundImage?: string;
+    /** Colourful: extra bottom padding (px) for content overlap. Content below should use -mt-[value] to pull up. */
+    overlapHeight?: number;
+    /** Snapping: content shown only when expanded */
+    expandedContent?: ReactNode;
+    /** Snapping: scroll offset before collapse (px) */
+    collapseOffset?: number;
+    /** Snapping: keep collapsed header pinned at top */
+    pinned?: boolean;
+    /** Constrain inner content to this max-width while the header background spans full width. Used by colourful and snapping variants to align header content with PageContainer body. Defaults to --ds-bp-xl. */
+    contentMaxWidth?: string;
+    /** Tabs-integrated: render a Tabs component at the header bottom edge */
+    tabs?: ReactNode;
+    /** Visual style of inline breadcrumbs */
+    breadcrumbStyle?: "default" | "pill";
+    /** Separator between breadcrumb items */
+    breadcrumbSeparator?: "chevron" | "slash" | "dot" | "arrow";
+    /** Snapping: when true, suppress breadcrumbs in the expanded state (external breadcrumbs provide them). Collapsed state still shows the last crumb for context. */
+    hideExpandedBreadcrumbs?: boolean;
+    /** Position: flush (default, edge-to-edge) or floating (inset with rounded corners and glass surface) */
+    position?: "flush" | "floating";
+    /** Whether the adjacent navbar is floating — zeroes top padding in floating mode */
+    navbarFloating?: boolean;
+    /** Whether the adjacent sidebar is floating — zeroes left padding in floating mode */
+    sidebarFloating?: boolean;
+    /** Suppress the bottom margin on colourful headers (used when the header is inside an external floating block that manages its own spacing) */
+    noBottomMargin?: boolean;
+    /** Snapping + floating: contained breadcrumbs to render inside the floating card when expanded. Keeps breadcrumbs visually inside the same card as the header. */
+    containedBreadcrumbs?: ReactNode;
+}
+declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
 
 interface DockItem {
     id: string;
@@ -960,7 +1156,9 @@ declare function Dock({ items, magnification, baseSize, className, }: DockProps)
 
 type NavbarType = "default" | "underline" | "minimal";
 type NavbarAlign = "left" | "center" | "right";
-type NavbarVariant = "default" | "transparent" | "compact" | "branded";
+type NavbarVariant = "default" | "transparent" | "compact" | "elevated" | "blurred";
+type NavbarSize = "sm" | "md" | "lg";
+type NavbarPosition = "flush" | "floating";
 interface NavbarProps {
     logo?: ReactNode;
     navLinks?: ReactNode;
@@ -972,6 +1170,12 @@ interface NavbarProps {
     type?: NavbarType;
     /** Horizontal alignment of nav links: left (default), center (viewport-centered), right (before actions) */
     align?: NavbarAlign;
+    /** Height density — sm (compact), md (default), lg (spacious) */
+    size?: NavbarSize;
+    /** Position: flush (default, edge-to-edge) or floating (inset with rounded corners and glass surface) */
+    position?: NavbarPosition;
+    /** Explicit border control — overrides variant default when set */
+    bordered?: boolean;
     sticky?: boolean;
     className?: string;
     onMenuClick?: () => void;
@@ -1187,9 +1391,12 @@ interface TourProps {
 declare function Tour({ steps, open, onClose, onComplete, container }: TourProps): react.ReactPortal | null;
 
 type AlertVariant = "info" | "success" | "warning" | "error";
+type AlertPlacement = "inline" | "page-top" | "section-top";
 interface AlertAction {
     label: string;
     onClick: () => void;
+    variant?: "secondary" | "outline";
+    iconLeft?: ReactNode;
 }
 interface AlertProps {
     variant: AlertVariant;
@@ -1198,9 +1405,14 @@ interface AlertProps {
     dismissible?: boolean;
     onDismiss?: () => void;
     action?: AlertAction;
+    actions?: AlertAction[];
+    /** Scoping: inline (default), page-top (sticky at viewport top), section-top (emphasized, full-width within container) */
+    placement?: AlertPlacement;
+    /** Expandable detail content — collapsed by default */
+    expandableContent?: ReactNode;
     className?: string;
 }
-declare function Alert({ variant, title, children, dismissible, onDismiss, action, className }: AlertProps): react_jsx_runtime.JSX.Element;
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
 
 type ToastVariant = "default" | "success" | "warning" | "error";
 type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
@@ -1219,8 +1431,62 @@ interface ToastProps {
     position?: ToastPosition;
     mode?: "light" | "dark";
     container?: Element | DocumentFragment;
+    /**
+     * Render only the toast card, without the portal and fixed positioning.
+     * Used by ToastProvider, which owns stacking and placement. Standalone
+     * usage should leave this unset.
+     */
+    inline?: boolean;
 }
-declare function Toast({ variant, message, visible, onDismiss, duration, pauseOnHover, action, position, mode, container }: ToastProps): react.ReactPortal | null;
+declare function Toast({ variant, message, visible, onDismiss, duration, pauseOnHover, action, position, mode, container, inline }: ToastProps): react_jsx_runtime.JSX.Element | null;
+
+interface ToastOptions {
+    variant?: ToastVariant;
+    /** Milliseconds before auto-dismiss. 0 or Infinity keeps the toast until dismissed. */
+    duration?: number;
+    action?: ToastAction;
+    /** Supply to update an existing toast in place instead of adding a new one. */
+    id?: string;
+}
+interface PromiseToastMessages<T> {
+    loading: ReactNode;
+    success: ReactNode | ((value: T) => ReactNode);
+    error: ReactNode | ((error: unknown) => ReactNode);
+}
+interface ToastApi {
+    /** Enqueue a toast. Returns its id. */
+    toast: (message: ReactNode, options?: ToastOptions) => string;
+    success: (message: ReactNode, options?: Omit<ToastOptions, "variant">) => string;
+    warning: (message: ReactNode, options?: Omit<ToastOptions, "variant">) => string;
+    error: (message: ReactNode, options?: Omit<ToastOptions, "variant">) => string;
+    /** Update a toast in place (message, variant, duration, action). */
+    update: (id: string, message: ReactNode, options?: Omit<ToastOptions, "id">) => void;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+    /** Show a persistent loading toast that resolves to success or error. */
+    promise: <T>(promise: Promise<T>, messages: PromiseToastMessages<T>, options?: Omit<ToastOptions, "id" | "variant" | "duration">) => Promise<T>;
+}
+interface ToastProviderProps {
+    children: ReactNode;
+    /** Maximum toasts shown at once; further toasts queue until one dismisses. Default 3. */
+    maxVisible?: number;
+    /** Where the stack is anchored. Default "bottom-right". */
+    position?: ToastPosition;
+    /** Default auto-dismiss duration in ms. Default 3000. */
+    duration?: number;
+    /** Independent colour mode for toasts, when the theme configures one. */
+    mode?: "light" | "dark";
+    /** Pause a toast's timer while hovered. Default true. */
+    pauseOnHover?: boolean;
+}
+declare function useToast(): ToastApi;
+/**
+ * Queue-backed toast manager. Wrap the app once (get_app_shell does this),
+ * then call useToast() anywhere. Enforces the configured maximum visible
+ * count, stacks toasts at the configured position, and provides success /
+ * error / promise helpers so pages never hand-roll their own queue.
+ */
+declare function ToastProvider({ children, maxVisible, position, duration, mode, pauseOnHover }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 type ProgressVariant = "default" | "success" | "warning" | "error";
 interface ProgressProps {
@@ -1230,9 +1496,11 @@ interface ProgressProps {
     size?: "sm" | "md" | "lg";
     indeterminate?: boolean;
     showLabel?: boolean;
+    /** Accessible name announced with the value, e.g. "Upload progress". Default "Progress". */
+    label?: string;
     className?: string;
 }
-declare function Progress({ value, max, variant, size, indeterminate, showLabel, className }: ProgressProps): react_jsx_runtime.JSX.Element;
+declare function Progress({ value, max, variant, size, indeterminate, showLabel, label, className }: ProgressProps): react_jsx_runtime.JSX.Element;
 
 declare const sizes: {
     readonly sm: "h-4 w-4 border-[1.5px]";
@@ -1264,29 +1532,10 @@ interface ScrollAreaProps {
 }
 declare function ScrollArea({ children, className, orientation, maxHeight, maxWidth, }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
 
-type PanelGroupProps = ComponentProps<typeof Group>;
-type Direction = "horizontal" | "vertical";
-interface ResizablePanelGroupProps extends Omit<PanelGroupProps, "className" | "orientation"> {
-    direction?: Direction;
-    stackOnMobile?: boolean;
-    className?: string;
-}
-declare function ResizablePanelGroup({ className, direction, stackOnMobile, ...props }: ResizablePanelGroupProps): react_jsx_runtime.JSX.Element;
-type PanelProps = ComponentProps<typeof Panel>;
-interface ResizablePanelProps extends Omit<PanelProps, "className"> {
-    className?: string;
-}
-declare function ResizablePanel({ className, ...props }: ResizablePanelProps): react_jsx_runtime.JSX.Element;
-type PanelResizeHandleProps = ComponentProps<typeof Separator>;
-interface ResizableHandleProps extends Omit<PanelResizeHandleProps, "className"> {
-    withHandle?: boolean;
-    className?: string;
-}
-declare function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps): react_jsx_runtime.JSX.Element;
-
 interface AppShellContextValue {
     hasSidebar: boolean;
     hasMobileMenu: boolean;
+    hasMobileNav: boolean;
     sidebarOpen: boolean;
     setSidebarOpen: (open: boolean) => void;
     isMobile: boolean;
@@ -1316,9 +1565,13 @@ interface AppShellProps {
 declare const AppShell: react.ForwardRefExoticComponent<AppShellProps & react.RefAttributes<HTMLDivElement>>;
 
 type MaxWidth = "sm" | "md" | "lg" | "xl" | "full";
+type PageContainerWidth = "constrained" | "full" | "narrow";
 type Padding = "none" | "default" | "wide";
 type VerticalPadding = "none" | "default" | "spacious";
 interface PageContainerProps {
+    /** Semantic width — maps to maxWidth internally. Takes precedence over maxWidth when both are set. */
+    width?: PageContainerWidth;
+    /** Lower-level max-width escape hatch. Use `width` for standard cases. */
     maxWidth?: MaxWidth;
     padding?: Padding;
     verticalPadding?: VerticalPadding;
@@ -1353,4 +1606,48 @@ interface ActionPanelGroupProps {
 }
 declare const ActionPanelGroup: react.ForwardRefExoticComponent<ActionPanelGroupProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, ActionPanel, ActionPanelGroup, Alert, AppShell, type AppShellContextValue, Avatar, Badge, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, Breadcrumbs, type BreakpointKey, BreakpointWidthProvider, BulkActionBar, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, ColorPicker, type Column, Combobox, CommandPalette, ContextMenu, DataGrid, DataList, DatePicker, Dialog, Divider, Dock, Drawer, Dropdown, DropdownMenu, EmptyState, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, KanbanBoard, Kbd, Label, MentionInput, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarType, NotificationCenter, NumberInput, PageContainer, PageHeader, type PageHeaderProps, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextEditor, ScrollArea, SectionHeading, SegmentedControl, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarSection, type SidebarType, Skeleton, SliderRange, Spinner, StackedList, StatsCard, Stepper, type Tab, Table, type TableDensity, type TableProps, Tabs, Tag, TagInput, type TagVariant, Textarea, TimePicker, Timeline, Toast, Toggle, Tooltip, Tour, TransferList, TreeView, VirtualizedList, useAppShell, useBreakpoint, useFormContext, useSidebar };
+interface TextOverflowProps {
+    /** Max visible lines before truncation. 1 = single-line ellipsis, >1 = line-clamp-N. */
+    lines?: number;
+    /** Show tooltip/hovercard when text is truncated. Default: true. */
+    tooltip?: boolean;
+    /** Custom tooltip content. Defaults to the text content of children. */
+    tooltipContent?: ReactNode;
+    /** Use HoverCard instead of Tooltip for long multi-line content. */
+    expandMode?: "tooltip" | "hovercard";
+    /** The HTML element to render. Default: "div". */
+    as?: "span" | "p" | "div";
+    children: ReactNode;
+    className?: string;
+}
+declare const TextOverflow: react.ForwardRefExoticComponent<TextOverflowProps & react.RefAttributes<HTMLElement>>;
+
+interface UseTextOverflowOptions {
+    /** Number of visible lines before truncation. 1 = single-line ellipsis, >1 = line-clamp. */
+    lines?: number;
+    /** Disable overflow detection (e.g. when component is hidden) */
+    disabled?: boolean;
+    /** Content key — triggers re-check when this value changes (use for dynamic text content) */
+    content?: unknown;
+}
+interface UseTextOverflowResult {
+    /** Callback ref — attach to the element that has truncation CSS applied */
+    ref: (node: HTMLElement | null) => void;
+    /** True when the element's text is currently overflowing/truncated */
+    isTruncated: boolean;
+}
+/**
+ * Detects whether an element's text content is overflowing (truncated).
+ * Uses a single shared ResizeObserver for all instances on the page.
+ *
+ * @example
+ * const { ref, isTruncated } = useTextOverflow({ lines: 1 });
+ * return (
+ *   <Tooltip content={fullText} disabled={!isTruncated}>
+ *     <span ref={ref} className="truncate">{fullText}</span>
+ *   </Tooltip>
+ * );
+ */
+declare function useTextOverflow(options?: UseTextOverflowOptions): UseTextOverflowResult;
+
+export { Accordion, ActionPanel, ActionPanelGroup, Alert, type AlertPlacement, AppShell, type AppShellContextValue, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarStatus, Badge, type BadgePaletteColor, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, type BreadcrumbItem$1 as BreadcrumbItem, Breadcrumbs, type BreadcrumbsSeparator, type BreadcrumbsSize, type BreadcrumbsVariant, BreakpointKey, BulkActionBar, Button, ButtonSizeContext, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardSelectType, CardTitle, type CardVariant, Carousel, ChatMessageList, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, ColorPicker, type Column, Combobox, CommandPalette, ContextMenu, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DescriptionItem, DescriptionList, type DescriptionListOrientation, type DescriptionListSize, Dialog, Divider, Dock, Drawer, Dropdown, DropdownMenu, type DropdownMenuDivider, type DropdownMenuEntry, type DropdownMenuItem, EmptyState, Field, type FieldControlProps, type FieldProps, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, Kbd, Label, Link, type LinkProps, MentionInput, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarSize, type NavbarType, type NavbarVariant, NotificationCenter, NumberInput, PageContainer, type PageContainerWidth, PageHeader, type PageHeaderBehavior, type PageHeaderIntensity, type PageHeaderProps, type PageHeaderVariant, Pagination, PinInput, Popover, Progress, type PromiseToastMessages, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarNavSize, type SidebarPosition, type SidebarSection, type SidebarType, Skeleton, SliderRange, Spinner, StackedList, StatsCard, StatusDot, type StatusDotVariant, Stepper, type Tab, Table, type TableDensity, type TableProps, Tabs, Tag, TagInput, type TagPaletteColor, type TagVariant, TextOverflow, type TextOverflowProps, Textarea, TimePicker, Timeline, Toast, type ToastAction, type ToastApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastVariant, Toggle, Tooltip, Tour, TransferList, TreeView, type UseTextOverflowOptions, type UseTextOverflowResult, useAppShell, useFormContext, useSidebar, useTextOverflow, useToast };