@salilvnair/dui 1.0.0 → 1.0.2

package/dist/lib/components/input/InviteInputView.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export interface InviteInputViewProps {
+    emails: string[];
+    onChange: (emails: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Email-chip input specialized for multi-invite forms — validates each entry before adding. */
+export declare function InviteInputView({ emails, onChange, placeholder, disabled, size, borderRadius, color, className, style, }: InviteInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/MaskedInputView.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties } from 'react';
+import { DuiSize, DuiRadius, DuiWidth } from '../../core/DuiTypes';
+/**
+ * Mask tokens: `9` = digit, `A` = letter, `*` = any character.
+ * Any other character in the mask is a literal separator, auto-inserted.
+ */
+export interface MaskedInputViewProps {
+    value: string;
+    onChange: (value: string) => void;
+    mask: string;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: DuiSize;
+    width?: DuiWidth;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function applyMask(mask: string, raw: string): string;
+export declare function MaskedInputView({ value, onChange, mask, placeholder, disabled, size, width, borderRadius, color, className, style, }: MaskedInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/MentionInputView.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export interface MentionUser {
+    id: string;
+    label: string;
+}
+export interface MentionInputViewProps {
+    value: string;
+    onChange: (value: string) => void;
+    users: MentionUser[];
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** @mention autocomplete textarea. */
+export declare function MentionInputView({ value, onChange, users, placeholder, rows, disabled, size, borderRadius, color, className, style, }: MentionInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/MergedInputView.d.ts

@@ -5,6 +5,7 @@ export interface MergedSelectOption {
     value: string;
     label: string;
     color?: string;
+    icon?: React.ReactNode;
 }
 export type MergedInputSegment = {
     type: 'select';

package/dist/lib/components/input/NpsSurveyView.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface NpsSurveyViewProps {
+    question?: string;
+    score: number | null;
+    onScoreChange: (score: number) => void;
+    followUp?: string;
+    onFollowUpChange?: (text: string) => void;
+    onSubmit?: () => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** 0-10 Net Promoter Score picker with an optional follow-up text field. */
+export declare function NpsSurveyView({ question, score, onScoreChange, followUp, onFollowUpChange, onSubmit, size, color, className, style, }: NpsSurveyViewProps): import("react").JSX.Element;

package/dist/lib/components/input/OtpInputView.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export interface OtpInputViewProps {
+    value: string;
+    onChange: (value: string) => void;
+    onComplete?: (value: string) => void;
+    length?: number;
+    /** Accepts only digits by default. Set false to allow any character. */
+    numeric?: boolean;
+    disabled?: boolean;
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function OtpInputView({ value, onChange, onComplete, length, numeric, disabled, size, borderRadius, color, className, style, }: OtpInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/PhoneInputView.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties } from 'react';
+import { DuiSize, DuiRadius, DuiWidth } from '../../core/DuiTypes';
+export interface PhoneCountry {
+    code: string;
+    dialCode: string;
+    label: string;
+    flag?: string;
+}
+export declare const DEFAULT_PHONE_COUNTRIES: PhoneCountry[];
+export interface PhoneInputViewProps {
+    countryCode: string;
+    onCountryChange: (code: string) => void;
+    number: string;
+    onNumberChange: (number: string) => void;
+    countries?: PhoneCountry[];
+    placeholder?: string;
+    disabled?: boolean;
+    size?: DuiSize;
+    width?: DuiWidth;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function PhoneInputView({ countryCode, onCountryChange, number, onNumberChange, countries, placeholder, disabled, size, width, borderRadius, color, className, style, }: PhoneInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/PickerView.d.ts

@@ -0,0 +1,38 @@
+import { DuiSize, DuiRadius, DuiWidth } from '../../core/DuiTypes';
+export interface PickerOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface PickerColumn {
+    options: PickerOption[];
+    value: string;
+    onChange: (value: string) => void;
+    /** Optional caption rendered under the wheel, e.g. "Hour" / "Min". */
+    label?: string;
+    /** Flex-grow weight relative to other columns. Defaults to 1 (equal width). */
+    flex?: number;
+}
+export interface PickerViewProps {
+    /** Single-column mode — mutually exclusive with `columns`. */
+    options?: PickerOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    /** Multi-column mode — e.g. hour / minute / meridiem wheels side by side. */
+    columns?: PickerColumn[];
+    size?: DuiSize;
+    /** Odd number of rows visible in the wheel. Default 5. */
+    visibleRows?: number;
+    width?: DuiWidth;
+    borderRadius?: DuiRadius | number;
+    /** Accent color for the selection highlight band. */
+    color?: string;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Scrollable wheel picker. Single column via `options`/`value`/`onChange`,
+ * or multiple synchronized wheels (hour/min/meridiem-style) via `columns`.
+ */
+export declare function PickerView({ options, value, onChange, columns, size, visibleRows, width, borderRadius, color, disabled, className, style, }: PickerViewProps): import("react").JSX.Element;

package/dist/lib/components/input/PriorityPickerView.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type PriorityLevel = 'low' | 'medium' | 'high' | 'urgent';
+export interface PriorityPickerViewProps {
+    value: PriorityLevel;
+    onChange: (value: PriorityLevel) => void;
+    size?: DuiSize;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Low/medium/high/urgent selector with color-coded dots — a color-coded priority picker. */
+export declare function PriorityPickerView({ value, onChange, size, disabled, className, style, }: PriorityPickerViewProps): import("react").JSX.Element;

package/dist/lib/components/input/RadioCardView.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export interface RadioCardOption {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface RadioCardViewProps {
+    options: RadioCardOption[];
+    value: string;
+    onChange: (value: string) => void;
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    accentColor?: string;
+    /** Number of columns in the card grid. Default 1 (stacked rows). */
+    columns?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function RadioCardView({ options, value, onChange, size, borderRadius, accentColor, columns, className, style, }: RadioCardViewProps): import("react").JSX.Element;

package/dist/lib/components/input/RadioGroupView.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface RadioGroupViewProps {
+    options: RadioOption[];
+    value: string;
+    onChange: (value: string) => void;
+    size?: DuiSize;
+    accentColor?: string;
+    disabled?: boolean;
+    /** Stack rows vertically (default) or lay them out horizontally. */
+    direction?: 'vertical' | 'horizontal';
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function RadioGroupView({ options, value, onChange, size, accentColor, disabled, direction, className, style, }: RadioGroupViewProps): import("react").JSX.Element;

package/dist/lib/components/input/RangeSliderView.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface RangeSliderViewProps {
+    value: [number, number];
+    onChange: (value: [number, number]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    size?: DuiSize;
+    accentColor?: string;
+    width?: number | string;
+    showValue?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Dual-handle min/max range slider — distinct from the single-handle `SliderView`. */
+export declare function RangeSliderView({ value, onChange, min, max, step, disabled, size, accentColor, width, showValue, className, style, }: RangeSliderViewProps): import("react").JSX.Element;

package/dist/lib/components/input/RatingView.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface RatingViewProps {
+    value: number;
+    onChange?: (value: number) => void;
+    max?: number;
+    /** Allow selecting half steps (e.g. 3.5). Default false. */
+    allowHalf?: boolean;
+    readOnly?: boolean;
+    size?: DuiSize;
+    color?: string;
+    icon?: 'star' | 'heart';
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function RatingView({ value, onChange, max, allowHalf, readOnly, size, color, icon, className, style, }: RatingViewProps): import("react").JSX.Element;

package/dist/lib/components/input/RichTextToolbarView.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export type RichTextAction = 'bold' | 'italic' | 'underline' | 'link' | 'list' | 'code';
+export interface RichTextToolbarViewProps {
+    active?: RichTextAction[];
+    onAction: (action: RichTextAction) => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Formatting toolbar primitive — bold/italic/underline/link/list/code. */
+export declare function RichTextToolbarView({ active, onAction, size, color, className, style, }: RichTextToolbarViewProps): import("react").JSX.Element;

package/dist/lib/components/input/RoleSelectView.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties } from 'react';
+import { DuiSize, DuiRadius, DuiWidth } from '../../core/DuiTypes';
+export interface RoleOption {
+    value: string;
+    label: string;
+    description?: string;
+}
+export interface RoleSelectViewProps {
+    options: RoleOption[];
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    size?: DuiSize;
+    width?: DuiWidth;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Role dropdown with a per-option description shown beneath the label. */
+export declare function RoleSelectView({ options, value, onChange, disabled, size, width, borderRadius, color, className, style, }: RoleSelectViewProps): import("react").JSX.Element;

package/dist/lib/components/input/SegmentedControlView.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { DuiSize } from '../../core/DuiTypes';
+import { DuiSize, DuiRadius, DuiWidth } from '../../core/DuiTypes';
+export type SegmentedControlVariant = 'pill' | 'rounded' | 'pointy';
 export interface SegmentedControlOption {
     value: string;
     label: string;
@@ -11,13 +12,19 @@ export interface SegmentedControlViewProps {
     value: string;
     onChange: (value: string) => void;
     size?: DuiSize;
-    /** Accent color for the active segment indicator and text */
+    /** Shape of the track/indicator. 'pill' = fully rounded ends (iOS default), 'rounded' = size-based radius, 'pointy' = sharp square corners. Default 'pill'. */
+    variant?: SegmentedControlVariant;
+    /** Solid fill color of the active indicator. */
     accentColor?: string;
-    /** Stretch to fill container width */
+    /** Stretch to fill container width, segments share it equally. */
     fullWidth?: boolean;
+    width?: DuiWidth;
+    /** Explicit radius override — takes precedence over `variant`. */
+    borderRadius?: DuiRadius | number;
+    /** Inactive label text color override. */
+    color?: string;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
 }
-/**
- * Segmented control with a sliding animated indicator.
- * Active segment text color shifts to accentColor; inactive stays text-secondary.
- */
-export declare function SegmentedControlView({ options, value, onChange, size, accentColor, fullWidth, }: SegmentedControlViewProps): import("react").JSX.Element;
+export declare function SegmentedControlView({ options, value, onChange, size, variant, accentColor, fullWidth, width, borderRadius, color, disabled, className, style, }: SegmentedControlViewProps): import("react").JSX.Element;

package/dist/lib/components/input/ShortcutRecorderView.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export interface ShortcutRecorderViewProps {
+    value: string[];
+    onChange: (keys: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Captures a keybinding — click to start recording, press keys, click away or Enter to commit. */
+export declare function ShortcutRecorderView({ value, onChange, placeholder, disabled, size, borderRadius, color, className, style, }: ShortcutRecorderViewProps): import("react").JSX.Element;

package/dist/lib/components/input/SpectrumSliderView.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface SpectrumSliderViewProps {
+    value: number;
+    min?: number;
+    max?: number;
+    onChange: (value: number) => void;
+    /** CSS gradient stops rendered along the track, e.g. hue, severity, or temperature. */
+    gradient?: string;
+    width?: number;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** The slider track is a live rendered gradient spectrum; the handle shows a magnified live-color preview bubble while dragging. */
+export declare function SpectrumSliderView({ value, min, max, onChange, gradient, width, size, className, style, }: SpectrumSliderViewProps): import("react").JSX.Element;

package/dist/lib/components/input/StepperInputView.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export interface StepperInputViewProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function StepperInputView({ value, onChange, min, max, step, disabled, size, borderRadius, color, className, style, }: StepperInputViewProps): import("react").JSX.Element;

package/dist/lib/components/input/SwitchGroupView.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface SwitchGroupItem {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface SwitchGroupViewProps {
+    title?: string;
+    items: SwitchGroupItem[];
+    /** Set of currently-enabled item values. */
+    checked: string[];
+    onChange: (checked: string[]) => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function SwitchGroupView({ title, items, checked, onChange, size, color, className, style, }: SwitchGroupViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TabView.d.ts

@@ -1,11 +1,21 @@
+import { ReactNode } from 'react';
 import { DuiSize, DuiRadius, DuiWidth, DuiFontStyle } from '../../core/DuiTypes';
 export interface TabItem {
     id: string;
     label: string;
+    /** Optional icon rendered before the label (any variant) */
+    icon?: ReactNode;
     badge?: number;
     dot?: boolean;
     dotColor?: string;
     badgeColor?: string;
+    /**
+     * 'right' pushes this tab (and any tabs after it) to the far end of the
+     * row via margin-left: auto — e.g. tabs=[Params, Headers, Body, {label:
+     * 'Auth', align: 'right'}] renders "Params Headers Body ⟶ Auth".
+     * Only meaningful on the first tab marked 'right' in the list.
+     */
+    align?: 'left' | 'right';
 }
 export type TabVariant = 'pill' | 'underline' | 'chip' | 'picker';
 export interface TabViewProps {

package/dist/lib/components/input/TimeTravelSliderView.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface TimeTravelSliderViewProps<T> {
+    /** Historical states, oldest first. */
+    states: T[];
+    /** Index of the currently-scrubbed state. */
+    index: number;
+    onScrub: (index: number) => void;
+    /** Extracts a plottable number (e.g. a metric) from each state, for the background sparkline. */
+    toValue: (state: T) => number;
+    /** Extracts a short label shown above the playhead. */
+    toLabel?: (state: T, index: number) => string;
+    width?: number;
+    height?: number;
+    color?: string;
+    size?: DuiSize;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Scrub a draggable playhead across a sparkline of past states — a time-travel state scrubber, generalized. */
+export declare function TimeTravelSliderView<T>({ states, index, onScrub, toValue, toLabel, width, height, color, size, className, style, }: TimeTravelSliderViewProps<T>): import("react").JSX.Element;

package/dist/lib/components/input/TimeWheelView.d.ts

@@ -0,0 +1,21 @@
+import { DuiSize, DuiRadius, DuiWidth } from '../../core/DuiTypes';
+export interface TimeWheelValue {
+    hour: number;
+    minute: number;
+    meridiem?: 'AM' | 'PM';
+}
+export interface TimeWheelViewProps {
+    value: TimeWheelValue;
+    onChange: (value: TimeWheelValue) => void;
+    use24Hour?: boolean;
+    minuteStep?: number;
+    size?: DuiSize;
+    width?: DuiWidth;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    visibleRows?: number;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function TimeWheelView({ value, onChange, use24Hour, minuteStep, size, width, borderRadius, color, visibleRows, disabled, className, style, }: TimeWheelViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TransferListView.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties } from 'react';
+import { DuiSize, DuiRadius } from '../../core/DuiTypes';
+export interface TransferItem {
+    value: string;
+    label: string;
+}
+export interface TransferListViewProps {
+    items: TransferItem[];
+    /** Values currently on the right ("selected") side. */
+    value: string[];
+    onChange: (value: string[]) => void;
+    leftTitle?: string;
+    rightTitle?: string;
+    size?: DuiSize;
+    borderRadius?: DuiRadius | number;
+    color?: string;
+    height?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function TransferListView({ items, value, onChange, leftTitle, rightTitle, size, borderRadius, color, height, className, style, }: TransferListViewProps): import("react").JSX.Element;

package/dist/lib/components/input/TreeSelectView.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface TreeSelectNode {
+    id: string;
+    label: string;
+    children?: TreeSelectNode[];
+}
+export interface TreeSelectViewProps {
+    nodes: TreeSelectNode[];
+    /** Checked node ids. */
+    value: string[];
+    onChange: (value: string[]) => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Checkbox-driven hierarchical select — tri-state parent checkboxes over a folder-style tree. */
+export declare function TreeSelectView({ nodes, value, onChange, size, color, className, style, }: TreeSelectViewProps): import("react").JSX.Element;

package/dist/lib/components/input/WizardStepperView.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface WizardStep {
+    id: string;
+    label: string;
+    description?: string;
+}
+export interface WizardStepperViewProps {
+    steps: WizardStep[];
+    activeStep: string;
+    completedSteps?: string[];
+    onStepClick?: (id: string) => void;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Multi-step form wizard progress header — numbered step indicator pattern. Distinct from `StepperInputView` (numeric +/-). */
+export declare function WizardStepperView({ steps, activeStep, completedSteps, onStepClick, size, color, className, style, }: WizardStepperViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/AccordionGroupView.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface AccordionGroupItem {
+    id: string;
+    title: string;
+    badge?: number;
+    children: ReactNode;
+}
+export interface AccordionGroupViewProps {
+    items: AccordionGroupItem[];
+    /** Allow more than one section open at once. Default false (single-open, accordion-style). */
+    multiple?: boolean;
+    defaultOpen?: string[];
+    accentColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Managed single/multi-open accordion group built on `CollapsibleSectionView`. */
+export declare function AccordionGroupView({ items, multiple, defaultOpen, accentColor, className, style, }: AccordionGroupViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/AffixView.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface AffixViewProps {
+    children: ReactNode;
+    /** Distance from viewport top before sticking. Default 0. */
+    offsetTop?: number;
+    onStickyChange?: (stuck: boolean) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Sticky-on-scroll wrapper — stays pinned once it reaches `offsetTop`, releases at the end of its placeholder. */
+export declare function AffixView({ children, offsetTop, onStickyChange, className, style, }: AffixViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/AnchorView.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import { DuiSize } from '../../core/DuiTypes';
+export interface AnchorLink {
+    /** Section element id, without the `#`. */
+    id: string;
+    label: string;
+}
+export interface AnchorViewProps {
+    links: AnchorLink[];
+    size?: DuiSize;
+    color?: string;
+    /** Extra offset (px) for scroll-into-view and scroll-spy detection, e.g. a fixed header height. */
+    offset?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Scroll-spy in-page navigation — highlights the section currently in view, click to jump. */
+export declare function AnchorView({ links, size, color, offset, className, style, }: AnchorViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/AspectRatioView.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DuiRadius } from '../../core/DuiTypes';
+export interface AspectRatioViewProps {
+    children: ReactNode;
+    /** width / height. Default 16/9. */
+    ratio?: number;
+    borderRadius?: DuiRadius | number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Fixed aspect-ratio box for image/video containers — content fills it via absolute inset. */
+export declare function AspectRatioView({ children, ratio, borderRadius, className, style, }: AspectRatioViewProps): import("react").JSX.Element;

package/dist/lib/components/layout/BackToTopView.d.ts

@@ -0,0 +1,10 @@
+import { DuiSize } from '../../core/DuiTypes';
+export interface BackToTopViewProps {
+    /** Scroll threshold (px) before the button appears. Default 240. */
+    threshold?: number;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+}
+/** Floating scroll-to-top button — fades in once the page scrolls past `threshold`. */
+export declare function BackToTopView({ threshold, size, color, className, }: BackToTopViewProps): import("react").JSX.Element | null;

package/dist/lib/components/layout/BreadcrumbView.d.ts

@@ -0,0 +1,14 @@
+import { DuiSize } from '../../core/DuiTypes';
+export interface BreadcrumbItem {
+    label: string;
+    onClick?: () => void;
+}
+export interface BreadcrumbViewProps {
+    items: BreadcrumbItem[];
+    /** Collapse the middle into a "…" when there are more than this many items. Default 4. */
+    maxVisible?: number;
+    size?: DuiSize;
+    color?: string;
+    className?: string;
+}
+export declare function BreadcrumbView({ items, maxVisible, size, color, className, }: BreadcrumbViewProps): import("react").JSX.Element;