@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

package/dist/primitives/components/breadcrumbs/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../utils';
+const renderBreadcrumbItem = (item, isLast, itemClassName) => {
+    const ariaCurrent = isLast ? 'page' : undefined;
+    // Use anchor if `href` is provided
+    if (item.href) {
+        return (_jsx("a", { href: item.href, className: cn('mdk-breadcrumbs__link', itemClassName), "aria-current": ariaCurrent, children: item.label }));
+    }
+    // Button with onClick
+    if (item.onClick) {
+        return (_jsx("button", { onClick: item.onClick, className: cn('mdk-breadcrumbs__link', 'mdk-breadcrumbs__link--button', itemClassName), type: "button", "aria-current": ariaCurrent, children: item.label }));
+    }
+    // Plain text
+    return (_jsx("span", { className: cn('mdk-breadcrumbs__link', 'mdk-breadcrumbs__link--current', itemClassName), "aria-current": "page", children: item.label }));
+};
+/**
+ * Hierarchical navigation trail that renders the path of pages leading to the
+ * current view. Each item can be a link (`href` or `onClick`) or plain text;
+ * the last item is rendered as the current page. Pass `showBack` to prepend a
+ * "back" affordance for mobile/touch layouts. The separator between items is
+ * customisable via `separator` (defaults to `/`).
+ *
+ * @category navigation
+ * @domain generic
+ * @tier agent-ready
+ */
+export const Breadcrumbs = forwardRef(({ items, separator = '/', showBack = false, backLabel = 'Back', onBackClick, className, itemClassName, backClassName, }, ref) => {
+    return (_jsxs("nav", { ref: ref, className: cn('mdk-breadcrumbs', className), "aria-label": "Breadcrumb", children: [showBack && (_jsxs("button", { onClick: onBackClick, className: cn('mdk-breadcrumbs__back', backClassName), type: "button", children: [_jsx("svg", { className: "mdk-breadcrumbs__back-icon", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m15 18-6-6 6-6" }) }), _jsx("span", { children: backLabel })] })), _jsx("ol", { className: "mdk-breadcrumbs__list", children: items.map((item, index) => {
+                    const isLast = index === items.length - 1;
+                    return (_jsxs("li", { className: "mdk-breadcrumbs__item", children: [renderBreadcrumbItem(item, isLast, itemClassName), !isLast && (_jsx("span", { className: "mdk-breadcrumbs__separator", "aria-hidden": "true", children: separator }))] }, index));
+                }) })] }));
+});
+Breadcrumbs.displayName = 'Breadcrumbs';

package/dist/primitives/components/btc-average-price/btc-average-price.example.d.ts

@@ -0,0 +1 @@
+export declare const BtcAveragePriceExample: () => import("react").JSX.Element;

package/dist/primitives/components/btc-average-price/btc-average-price.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for BtcAveragePrice.
+ */
+import { BtcAveragePrice } from '@tetherto/mdk-react-devkit';
+export const BtcAveragePriceExample = () => (_jsxs("div", { className: "mdk-example-col", children: [_jsx(BtcAveragePrice, { price: 97_500 }), _jsx(BtcAveragePrice, { price: null })] }));

package/dist/primitives/components/btc-average-price/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const BTC_AVERAGE_PRICE: {
+    readonly SUFFIX: ':';
+    readonly LABEL: 'BTC Average Price';
+};

package/dist/primitives/components/btc-average-price/constants.js

@@ -0,0 +1,4 @@
+export const BTC_AVERAGE_PRICE = {
+    SUFFIX: ':',
+    LABEL: 'BTC Average Price',
+};

package/dist/primitives/components/btc-average-price/index.d.ts

@@ -0,0 +1,24 @@
+export type BtcAveragePriceProps = Partial<{
+    /**
+     * BTC price in USD; formatted with grouping and no decimal places.
+     * When `null`, `undefined`, non-finite, or negative, the value shows `-` (`FALLBACK` from format utils).
+     */
+    price: number | null;
+    /**
+     * Label for the BTC average price.
+     * @default "BTC Average Price"
+     */
+    label: string;
+}>;
+/**
+ * Read-only BTC average price label for reporting toolbars.
+ *
+ * @example
+ * ```tsx
+ * <BtcAveragePrice price={97_500} />
+ * ```
+ * @category display
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const BtcAveragePrice: ({ price, label, }: BtcAveragePriceProps) => import("react").JSX.Element;

package/dist/primitives/components/btc-average-price/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BTC_AVERAGE_PRICE } from './constants';
+import { formatPriceValue } from './utils';
+/**
+ * Read-only BTC average price label for reporting toolbars.
+ *
+ * @example
+ * ```tsx
+ * <BtcAveragePrice price={97_500} />
+ * ```
+ * @category display
+ * @domain generic
+ * @tier agent-ready
+ */
+export const BtcAveragePrice = ({ price, label = BTC_AVERAGE_PRICE.LABEL, }) => (_jsxs("div", { className: "mdk-btc-average-price", children: [_jsx("span", { className: "mdk-btc-average-price__header", children: `${label}${BTC_AVERAGE_PRICE.SUFFIX}` }), _jsx("span", { className: "mdk-btc-average-price__value", children: formatPriceValue(price) })] }));

package/dist/primitives/components/btc-average-price/utils.d.ts

@@ -0,0 +1 @@
+export declare const formatPriceValue: (price: number | null | undefined) => string;

package/dist/primitives/components/btc-average-price/utils.js

@@ -0,0 +1,7 @@
+import { FALLBACK, formatNumber } from '../../utils/format';
+export const formatPriceValue = (price) => {
+    if (price == null || Number.isNaN(price) || !Number.isFinite(price) || price < 0) {
+        return FALLBACK;
+    }
+    return `$${formatNumber(price, { maximumFractionDigits: 0 })}`;
+};

package/dist/primitives/components/button/button.example.d.ts

@@ -0,0 +1 @@
+export declare const ButtonExample: () => import("react").JSX.Element;

package/dist/primitives/components/button/button.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Button.
+ */
+import { Button } from '@tetherto/mdk-react-devkit';
+export const ButtonExample = () => (_jsxs("div", { className: "mdk-example-row", children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "primary", loading: true, children: "Submitting" }), _jsx(Button, { variant: "secondary", disabled: true, children: "Disabled" }), _jsx(Button, { variant: "primary", size: "sm", children: "Small" }), _jsx(Button, { variant: "primary", size: "lg", children: "Large" })] }));

package/dist/primitives/components/button/index.d.ts

@@ -0,0 +1,98 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import type { ButtonIconPosition, ButtonVariant, ComponentSize } from '../../types';
+/**
+ * Props for {@link Button}. Extends all native `<button>` attributes.
+ */
+export type ButtonProps = Partial<{
+    /**
+     * Show a spinner instead of the content and disable the button.
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * Make the button stretch to fill its container.
+     * @default false
+     */
+    fullWidth: boolean;
+    /** Icon node rendered alongside `children`. */
+    icon: ReactNode;
+    /**
+     * Visual variant (e.g. `primary`, `secondary`, `ghost`).
+     * @default "secondary"
+     */
+    variant: ButtonVariant;
+    /** Class names applied to the inner content wrapper. */
+    contentClassName: string;
+    /**
+     * Icon placement relative to children.
+     * @default "left"
+     */
+    iconPosition: ButtonIconPosition;
+    /** Size token (`sm`, `md`, `lg`). */
+    size: ComponentSize;
+    /**
+     * Disable the button
+     * @default false
+     */
+    disabled: ButtonHTMLAttributes<HTMLButtonElement>['disabled'];
+    /**
+     * Native button type
+     * @default "button"
+     */
+    type: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+} & ButtonHTMLAttributes<HTMLButtonElement>>;
+/**
+ * Primary action button. Supports loading state with spinner, icon placement,
+ * variants, sizes, and full-width layout. Forwards refs and all native button
+ * attributes.
+ *
+ * @category actions
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" onClick={handleSave}>Save</Button>
+ * <Button variant="secondary" icon={<TrashIcon />}>Delete</Button>
+ * <Button loading>Submitting…</Button>
+ * ```
+ */
+declare const Button: import("react").ForwardRefExoticComponent<Partial<{
+    /**
+     * Show a spinner instead of the content and disable the button.
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * Make the button stretch to fill its container.
+     * @default false
+     */
+    fullWidth: boolean;
+    /** Icon node rendered alongside `children`. */
+    icon: ReactNode;
+    /**
+     * Visual variant (e.g. `primary`, `secondary`, `ghost`).
+     * @default "secondary"
+     */
+    variant: ButtonVariant;
+    /** Class names applied to the inner content wrapper. */
+    contentClassName: string;
+    /**
+     * Icon placement relative to children.
+     * @default "left"
+     */
+    iconPosition: ButtonIconPosition;
+    /** Size token (`sm`, `md`, `lg`). */
+    size: ComponentSize;
+    /**
+     * Disable the button
+     * @default false
+     */
+    disabled: ButtonHTMLAttributes<HTMLButtonElement>['disabled'];
+    /**
+     * Native button type
+     * @default "button"
+     */
+    type: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+} & ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>;
+export { Button };

package/dist/primitives/components/button/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../utils';
+import { Spinner } from '../spinner';
+/**
+ * Primary action button. Supports loading state with spinner, icon placement,
+ * variants, sizes, and full-width layout. Forwards refs and all native button
+ * attributes.
+ *
+ * @category actions
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" onClick={handleSave}>Save</Button>
+ * <Button variant="secondary" icon={<TrashIcon />}>Delete</Button>
+ * <Button loading>Submitting…</Button>
+ * ```
+ */
+const Button = forwardRef(({ icon, disabled, children, className, fullWidth, size, type = 'button', loading = false, contentClassName, variant = 'secondary', iconPosition = 'left', ...props }, ref) => {
+    const leftIcon = icon && iconPosition === 'left';
+    const rightIcon = icon && iconPosition === 'right';
+    const buttonClasses = cn('mdk-button', `mdk-button--variant-${variant}`, size && `mdk-button--size-${size}`, fullWidth && 'mdk-button--full-width', loading && 'mdk-button--loading', className);
+    const contentClasses = cn('mdk-button__content', `mdk-button__content--${variant}`, contentClassName);
+    return (_jsx("button", { ref: ref, type: type, "data-variant": variant, className: buttonClasses, disabled: disabled || loading, "aria-busy": loading || undefined, ...props, children: loading ? (_jsx("span", { className: "mdk-button__loading", "aria-hidden": "true", children: _jsx(Spinner, { size: "sm", type: "circle" }) })) : (_jsxs("span", { className: contentClasses, children: [leftIcon && _jsx("span", { className: "mdk-button__icon", children: icon }), children && _jsx("span", { className: "mdk-button__children", children: children }), rightIcon && _jsx("span", { className: "mdk-button__icon", children: icon })] })) }));
+});
+Button.displayName = 'Button';
+export { Button };

package/dist/primitives/components/card/card.example.d.ts

@@ -0,0 +1 @@
+export declare const CardExample: () => import("react").JSX.Element;

package/dist/primitives/components/card/card.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Card.
+ */
+import { Button, Card } from '@tetherto/mdk-react-devkit';
+export const CardExample = () => (_jsxs(Card, { className: "mdk-example-card", children: [_jsx(Card.Header, { children: _jsx("strong", { children: "Container 03" }) }), _jsxs(Card.Body, { children: [_jsx("p", { children: "Power: 31.5 kW" }), _jsx("p", { children: "Hashrate: 102.4 TH/s" })] }), _jsx(Card.Footer, { children: _jsx(Button, { variant: "primary", size: "sm", children: "Details" }) })] }));

package/dist/primitives/components/card/index.d.ts

@@ -0,0 +1,40 @@
+import { type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'react';
+/** Props for {@link Card}. Forwards all native `<div>` attributes. */
+export type CardProps = HTMLAttributes<HTMLDivElement>;
+/** Props for {@link CardHeader} slot. Forwards all native `<div>` attributes. */
+export type CardHeaderProps = HTMLAttributes<HTMLDivElement>;
+/** Props for {@link CardBody} slot. Forwards all native `<div>` attributes. */
+export type CardBodyProps = HTMLAttributes<HTMLDivElement>;
+/** Props for {@link CardFooter} slot. Forwards all native `<div>` attributes. */
+export type CardFooterProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Top region of a `<Card>` that groups the title, optional subtitle, and an action slot.
+ *
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
+/**
+ * Main content region of a `<Card>` — applies the standard inner padding and vertical rhythm.
+ *
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const CardBody: ForwardRefExoticComponent<CardBodyProps & RefAttributes<HTMLDivElement>>;
+/**
+ * Bottom action/metadata row of a `<Card>`, typically used for buttons, timestamps, or secondary info.
+ *
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
+export type CardComponent = ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> & {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+};
+export declare const Card: CardComponent;
+export { CardBody, CardFooter, CardHeader };

package/dist/primitives/components/card/index.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, isValidElement, } from 'react';
+import { cn } from '../../utils';
+/**
+ * Top region of a `<Card>` that groups the title, optional subtitle, and an action slot.
+ *
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+const CardHeader = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('mdk-card__header', className), ...props })));
+CardHeader.displayName = 'CardHeader';
+/**
+ * Main content region of a `<Card>` — applies the standard inner padding and vertical rhythm.
+ *
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+const CardBody = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('mdk-card__body', className), ...props })));
+CardBody.displayName = 'CardBody';
+/**
+ * Bottom action/metadata row of a `<Card>`, typically used for buttons, timestamps, or secondary info.
+ *
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+const CardFooter = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('mdk-card__footer', className), ...props })));
+CardFooter.displayName = 'CardFooter';
+/**
+ * Groups children into header, body, and footer slots.
+ * CardHeader/CardBody/CardFooter go to their slots; all others go to body.
+ */
+const partitionChildren = (children) => {
+    const header = [];
+    const body = [];
+    const footer = [];
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type != null && typeof child.type !== 'string') {
+            const displayName = child.type.displayName;
+            if (displayName === 'CardHeader')
+                header.push(child);
+            else if (displayName === 'CardBody')
+                body.push(child);
+            else if (displayName === 'CardFooter')
+                footer.push(child);
+            else
+                body.push(child);
+        }
+        else {
+            body.push(child);
+        }
+    });
+    return {
+        header: header.length > 0 ? header : null,
+        body: body.length > 0 ? body : null,
+        footer: footer.length > 0 ? footer : null,
+    };
+};
+/**
+ * Card component with optional header, body, and footer.
+ * Default children are rendered in the body.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Header>Title</Card.Header>
+ *   <Card.Body>Content</Card.Body>
+ *   <Card.Footer>Actions</Card.Footer>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Header>Title</Card.Header>
+ *   Content (default children go to body)
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Card onClick={() => navigate('/details')}>
+ *   <Card.Header>Title</Card.Header>
+ *   <Card.Body>Content</Card.Body>
+ * </Card>
+ * ```
+ */
+const CardRoot = forwardRef(({ className, children, onClick, ...props }, ref) => {
+    const { header, body, footer } = partitionChildren(children);
+    const bodyArray = body ? (Array.isArray(body) ? body : [body]) : [];
+    const hasCardBody = bodyArray.some((item) => isValidElement(item) &&
+        item.type != null &&
+        item.type.displayName === 'CardBody');
+    const bodyContent = body && (hasCardBody ? body : _jsx("div", { className: "mdk-card__body", children: body }));
+    return (_jsxs("div", { ref: ref, className: cn('mdk-card', onClick && 'mdk-card--clickable', className), onClick: onClick, ...props, children: [header, bodyContent, footer] }));
+});
+CardRoot.displayName = 'Card';
+export const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Body: CardBody,
+    Footer: CardFooter,
+});
+export { CardBody, CardFooter, CardHeader };

package/dist/primitives/components/cascader/cascader.example.d.ts

@@ -0,0 +1 @@
+export declare const CascaderExample: () => import("react").JSX.Element;

package/dist/primitives/components/cascader/cascader.example.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Cascader.
+ */
+import { useState } from 'react';
+import { Cascader } from '@tetherto/mdk-react-devkit';
+const poolOptions = [
+    {
+        value: 'foundry',
+        label: 'Foundry',
+        children: [
+            { value: 'eu-primary', label: 'EU Primary' },
+            { value: 'us-east', label: 'US East' },
+            { value: 'asia', label: 'Asia Pacific' },
+        ],
+    },
+    {
+        value: 'antpool',
+        label: 'AntPool',
+        children: [
+            { value: 'btc', label: 'BTC' },
+            { value: 'ltc', label: 'LTC' },
+        ],
+    },
+];
+export const CascaderExample = () => {
+    const [single, setSingle] = useState(['foundry', 'eu-primary']);
+    const [multi, setMulti] = useState([
+        ['foundry', 'eu-primary'],
+        ['antpool', 'btc'],
+    ]);
+    return (_jsxs("div", { className: "mdk-example-col", children: [_jsx(Cascader, { options: poolOptions, value: single, onChange: (value) => setSingle(value), placeholder: "Select pool..." }), _jsx(Cascader, { options: poolOptions, value: multi, onChange: (value) => setMulti(value), multiple: true, placeholder: "Select pools..." })] }));
+};

package/dist/primitives/components/cascader/index.d.ts

@@ -0,0 +1,197 @@
+/**
+ * Cascader option type - represents a hierarchical option with optional children
+ */
+export type CascaderOption = {
+    /** Unique value for the option */
+    value: string | number | boolean;
+    /** Display label for the option */
+    label: string;
+    /** Child options (creates a nested category) */
+    children?: CascaderOption[];
+    /** Whether the option is disabled */
+    disabled?: boolean;
+};
+/**
+ * Cascader value type - array representing the path from parent to child
+ * Example: ['electronics', 'phones'] means category 'electronics', option 'phones'
+ */
+export type CascaderValue = (string | number | boolean)[];
+/**
+ * Cascader component props
+ */
+export type CascaderProps = {
+    /**
+     * Hierarchical options to display in the cascader
+     * Parent options with children appear in the left panel
+     * Child options appear in the right panel when parent is selected
+     */
+    options: CascaderOption[];
+    /**
+     * Current selected value(s)
+     * - For single select: CascaderValue (e.g., ['category', 'option'])
+     * - For multiple select: CascaderValue[] (e.g., [['cat1', 'opt1'], ['cat2', 'opt2']])
+     */
+    value?: CascaderValue[] | CascaderValue;
+    /**
+     * Callback when selection changes
+     * - For single select: receives CascaderValue or null
+     * - For multiple select: receives CascaderValue[] or null
+     */
+    onChange?: (value: CascaderValue[] | CascaderValue | null) => void;
+    /**
+     * Enable multiple selection mode
+     * - true: Shows checkboxes, allows multiple selections, displays selected items as tags
+     * - false: Shows radio buttons, allows single selection
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Placeholder text shown in the input when no selections are made
+     * @default 'Select...'
+     */
+    placeholder?: string;
+    /**
+     * Disable the entire cascader (input and all options)
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom className for the root cascader element
+     */
+    className?: string;
+    /**
+     * Custom className for the dropdown panels container
+     */
+    dropdownClassName?: string;
+};
+/**
+ * Two-panel hierarchical selector for picking a leaf value from a nested tree (categories → subcategories → leaf).
+ *
+ * Features:
+ * - Two-column layout: categories on left, options on right
+ * - Single or multiple selection modes
+ * - Search/filter functionality via TagInput
+ * - Category-level selection (select/deselect all children)
+ * - Indeterminate state for partial selections
+ * - Tag display for multiple selections
+ * - Keyboard navigation support
+ * - Disabled state support
+ *
+ * @example
+ * // Single select mode
+ * ```tsx
+ * const [value, setValue] = useState<CascaderValue>(['electronics', 'phones'])
+ *
+ * <Cascader
+ *   options={[
+ *     {
+ *       value: 'electronics',
+ *       label: 'Electronics',
+ *       children: [
+ *         { value: 'phones', label: 'Phones' },
+ *         { value: 'laptops', label: 'Laptops' }
+ *       ]
+ *     }
+ *   ]}
+ *   value={value}
+ *   onChange={(val) => setValue(val as CascaderValue)}
+ * />
+ * ```
+ *
+ * @example
+ * // Multiple select mode with search
+ * ```tsx
+ * const [values, setValues] = useState<CascaderValue[]>([
+ *   ['electronics', 'phones'],
+ *   ['electronics', 'laptops']
+ * ])
+ *
+ * <Cascader
+ *   options={[
+ *     {
+ *       value: 'electronics',
+ *       label: 'Electronics',
+ *       children: [
+ *         { value: 'phones', label: 'Phones' },
+ *         { value: 'laptops', label: 'Laptops' },
+ *         { value: 'tablets', label: 'Tablets' }
+ *       ]
+ *     },
+ *     {
+ *       value: 'clothing',
+ *       label: 'Clothing',
+ *       children: [
+ *         { value: 'mens', label: "Men's" },
+ *         { value: 'womens', label: "Women's" }
+ *       ]
+ *     }
+ *   ]}
+ *   value={values}
+ *   onChange={(val) => setValues(val as CascaderValue[])}
+ *   multiple
+ *   placeholder="Select categories..."
+ * />
+ * ```
+ *
+ * @example
+ * // With disabled options
+ * ```tsx
+ * <Cascader
+ *   options={[
+ *     {
+ *       value: 'status',
+ *       label: 'Status',
+ *       children: [
+ *         { value: 'active', label: 'Active' },
+ *         { value: 'maintenance', label: 'Maintenance', disabled: true }
+ *       ]
+ *     }
+ *   ]}
+ *   value={value}
+ *   onChange={setValue}
+ * />
+ * ```
+ *
+ * @example
+ * // Filter/Alert use case
+ * ```tsx
+ * const filterOptions = [
+ *   {
+ *     value: 'severity',
+ *     label: 'Severity',
+ *     children: [
+ *       { value: 'critical', label: 'Critical' },
+ *       { value: 'high', label: 'High' },
+ *       { value: 'medium', label: 'Medium' },
+ *       { value: 'low', label: 'Low' }
+ *     ]
+ *   },
+ *   {
+ *     value: 'status',
+ *     label: 'Status',
+ *     children: [
+ *       { value: 'active', label: 'Active' },
+ *       { value: 'resolved', label: 'Resolved' }
+ *     ]
+ *   }
+ * ]
+ *
+ * const [filters, setFilters] = useState<CascaderValue[]>([
+ *   ['severity', 'critical'],
+ *   ['status', 'active']
+ * ])
+ *
+ * <Cascader
+ *   options={filterOptions}
+ *   value={filters}
+ *   onChange={setFilters}
+ *   multiple
+ *   placeholder="Filter alerts..."
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const Cascader: import("react").ForwardRefExoticComponent<CascaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Cascader };