@gearbox-protocol/ui-kit 2.1.0-next.1

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

@@ -0,0 +1,13 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+/**
+ * Separator — visual divider between content
+ *
+ * @example
+ * ```tsx
+ * <Separator />
+ * <Separator orientation="vertical" className="h-4" />
+ * ```
+ */
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };

package/dist/types/components/short-string/index.d.ts

@@ -0,0 +1 @@
+export * from './short-string';

package/dist/types/components/short-string/short-string.d.ts

@@ -0,0 +1,39 @@
+import type * as React from "react";
+/**
+ * ShortStringProps — props for ShortString component.
+ */
+export interface ShortStringProps {
+    children: React.ReactNode;
+    maxLength?: number | "text-overflow";
+    showTooltip?: boolean;
+    className?: string;
+}
+/**
+ * ShortString — component for truncating text with tooltip showing full content.
+ *
+ * @usage
+ * Use ShortString to display long text in limited space:
+ * long addresses, file names, descriptions, text overflow handling.
+ *
+ * Props:
+ * - `children` — text content to display (required).
+ * - `maxLength` — maximum character length before truncation (if not provided, uses CSS text-overflow).
+ * - `className` — additional CSS classes for styling.
+ * - `showTooltip` — whether to show tooltip with full text on hover (defaults to true).
+ *
+ * Note: If maxLength is not provided, uses CSS text-overflow with ellipsis.
+ * If maxLength is provided, truncates text with JavaScript and adds "..." suffix.
+ * Tooltip shows full text content on hover when enabled.
+ *
+ * @example
+ * ```tsx
+ * <ShortString maxLength={20}>
+ *   This is a very long string that will be truncated
+ * </ShortString>
+ *
+ * <ShortString>
+ *   This will be truncated with CSS text-overflow
+ * </ShortString>
+ * ```
+ */
+export declare function ShortString({ children, maxLength, showTooltip, className, }: ShortStringProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/types/components/signatures/confirmation-item.d.ts

@@ -0,0 +1,26 @@
+import { Address, Hex } from 'viem';
+/**
+ * ConfirmationItem — component for displaying transaction confirmation with address.
+ *
+ * @usage
+ * Use ConfirmationItem to display confirmation information in timelines:
+ * signature confirmations, transaction confirmations, address confirmations.
+ *
+ * Props:
+ * - `confirmation` — confirmation address or hash (Address | Hex) (required).
+ * - `note` — optional note text displayed next to address.
+ * - `explorerUrl` — optional explorer URL for external link button.
+ *
+ * Note: Displays Identicon, shortened hash, optional note, and action buttons (Copy, External link).
+ * Action buttons are shown on hover. Used in VerticalTimeline ExtentionStep content.
+ *
+ * Do NOT use ConfirmationItem:
+ * - outside of timeline or confirmation contexts (use appropriate address display components).
+ */
+interface ConfirmationItemProps {
+    confirmation: Address | Hex;
+    note?: string;
+    explorerUrl?: string;
+}
+export declare function ConfirmationItem({ confirmation, note, explorerUrl, }: ConfirmationItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/signatures/identicon.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Identicon — component for displaying address identifier icon.
+ *
+ * @usage
+ * Use Identicon to display visual identifier for addresses:
+ * address avatars, confirmation icons, address representations.
+ *
+ * Props:
+ * - `address` — address string to generate identicon from (required).
+ * - `size` — identicon size in pixels (defaults to 32).
+ *
+ * Note: Uses first two hex characters (after 0x) of address as identifier.
+ * Displays as rounded circle with gray background and white text.
+ *
+ * Do NOT use Identicon:
+ * - for token icons or asset images (use TokenIcon component).
+ */
+export declare function Identicon({ address, size, }: {
+    address: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/signatures/index.d.ts

@@ -0,0 +1,3 @@
+export * from './confirmation-item';
+export * from './identicon';
+export * from './vertical-timeline';

package/dist/types/components/signatures/vertical-timeline.d.ts

@@ -0,0 +1,53 @@
+/**
+ * StepCommon — common properties for timeline steps.
+ */
+interface StepCommon {
+    status: "success" | "pending" | "not-started" | "error";
+}
+/**
+ * Step — default step type for timeline.
+ */
+interface Step extends StepCommon {
+    type: "default";
+    title: string;
+}
+/**
+ * ExtentionStep — expandable step type for timeline with collapsible content.
+ */
+interface ExtentionStep extends StepCommon {
+    type: "extention";
+    children: React.ReactNode;
+}
+/**
+ * VerticalTimeline — component for displaying vertical timeline of steps with status indicators.
+ *
+ * @usage
+ * Use VerticalTimeline to display sequential steps with status:
+ * transaction confirmation steps, multi-step processes, signature workflows, progress tracking.
+ * Commonly used for tracking transaction status: signed, queued,executed, etc.
+ *
+ * Props:
+ * - `steps` — array of step objects (Step | ExtentionStep) (required):
+ *   - Step: `type: "default"`, `title: string`, `status: "success" | "pending" | "not-started" | "error"`.
+ *   - ExtentionStep: `type: "extention"`, `children: React.ReactNode`, `status: "success" | "pending" | "not-started" | "error"`.
+ * - `minWidth` — minimum width of timeline in pixels (defaults to 300).
+ *
+ * Step Statuses:
+ * - `success` — step completed successfully (green circle with checkmark).
+ * - `pending` — step in progress (gray border circle).
+ * - `not-started` — step not yet started (not displayed).
+ * - `error` — step failed (red circle with X).
+ *
+ * Note: ExtentionStep provides expandable content with "Show all" / "Hide all" toggle.
+ * Steps with "not-started" status are not rendered.
+ *
+ * Do NOT use VerticalTimeline:
+ * - for horizontal progress indicators (use appropriate progress components).
+ * - for simple lists without status tracking (use regular list components).
+ */
+interface VerticalTimelineProps {
+    steps: (Step | ExtentionStep)[];
+    minWidth?: number;
+}
+export declare function VerticalTimeline({ steps, minWidth, }: VerticalTimelineProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/simple-accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './simple-accordion';

package/dist/types/components/simple-accordion/simple-accordion.d.ts

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react';
+export interface SimpleAccordionItemProps {
+    /**
+     * Unique value identifying this item within the accordion.
+     */
+    value: string;
+    title: ReactNode;
+    description: ReactNode;
+    className?: string;
+    /**
+     * Hide the expand/collapse chevron icon.
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * When `true`, the trigger button is rendered after the content.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * When `true`, the bottom border is hidden (use for the last item).
+     * @default false
+     */
+    last?: boolean;
+    /**
+     * Extra className for the trigger button.
+     */
+    triggerClassName?: string;
+    /**
+     * Called when the item is toggled. Receives the new open state.
+     */
+    onClick?: (opened: boolean) => void;
+}
+export declare function SimpleAccordionItem({ value, title, description, className, hideIcon, reverse, last, triggerClassName, onClick, }: SimpleAccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SimpleAccordionItem {
+    var displayName: string;
+}
+export interface SimpleAccordionProps {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Accordion mode.
+     * - `"single"` — only one item can be open at a time.
+     * - `"multiple"` — multiple items can be open simultaneously.
+     * @default "single"
+     */
+    type?: "single" | "multiple";
+    /**
+     * When `type="single"`, allows closing the open item by clicking it again.
+     * @default true
+     */
+    collapsible?: boolean;
+    /**
+     * Default expanded item value(s).
+     */
+    defaultValue?: string | string[];
+}
+/**
+ * `SimpleAccordion` — a single-component accordion that mirrors the
+ * Accordion API from `../interface` while reusing the base Accordion
+ * primitives from ui-kit.
+ *
+ * Uses `SimpleAccordionItem` for individual expandable sections.
+ *
+ * @example
+ * ```tsx
+ * <SimpleAccordion>
+ *   <SimpleAccordionItem
+ *     value="a11y"
+ *     title="Is it accessible?"
+ *     description="Yes. It adheres to the WAI-ARIA design pattern."
+ *   />
+ *   <SimpleAccordionItem
+ *     value="styled"
+ *     title="Is it styled?"
+ *     description="Yes. It comes with default styles."
+ *     last
+ *   />
+ * </SimpleAccordion>
+ * ```
+ */
+export declare function SimpleAccordion({ children, className, type, collapsible, defaultValue, }: SimpleAccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SimpleAccordion {
+    var displayName: string;
+}

package/dist/types/components/simple-dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from './simple-dropdown';
+export * from './simple-dropdown-menu-item';

package/dist/types/components/simple-dropdown/simple-dropdown-menu-item.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+/**
+ * SimpleDropdownMenuItem — dropdown menu item with styles aligned to SimpleDropdown usage
+ * (e.g. ChainFilter). Uses DropdownMenuItem as base and applies encapsulated item styles.
+ *
+ * @example
+ * ```tsx
+ * <SimpleDropdown title={<button>Open</button>} asChild>
+ *   <SimpleDropdownMenuItem onSelect={() => {}}>
+ *     <span>Option 1</span>
+ *   </SimpleDropdownMenuItem>
+ *   <SimpleDropdownMenuItem asChild>
+ *     <BaseLink href="https://..." external>Etherscan</BaseLink>
+ *   </SimpleDropdownMenuItem>
+ * </SimpleDropdown>
+ * ```
+ */
+declare const SimpleDropdownMenuItem: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-dropdown-menu').DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { SimpleDropdownMenuItem };

package/dist/types/components/simple-dropdown/simple-dropdown.d.ts

@@ -0,0 +1,106 @@
+import { ReactNode } from 'react';
+export type SimpleDropdownPlacement = "top" | "bottom" | "right" | "left";
+export type SimpleDropdownAlign = "start" | "center" | "end";
+export interface SimpleDropdownProps {
+    /**
+     * Dropdown popup content — what appears inside the floating panel.
+     */
+    children: ReactNode;
+    /**
+     * Trigger element — what the user clicks to reveal the dropdown.
+     *
+     * Named `title` for consistency with the `SimpleTooltip` API.
+     */
+    title: ReactNode;
+    /**
+     * When `true`, `title` is used directly as the trigger element (Radix `asChild`).
+     * Use this when `title` is already a `<button>`, `<a>`, or another interactive
+     * component to avoid invalid nesting (`<button>` inside `<button>`).
+     *
+     * @default false
+     */
+    asChild?: boolean;
+    /** Placement relative to the trigger element. @default "bottom" */
+    placement?: SimpleDropdownPlacement;
+    /** Alignment along the placement axis. @default "start" */
+    align?: SimpleDropdownAlign;
+    /** Offset from the trigger along the side axis (px). @default 4 */
+    sideOffset?: number;
+    /** Maximum width of the dropdown panel. */
+    maxWidth?: string;
+    /** Minimum width of the dropdown panel. */
+    minWidth?: string;
+    /** Controlled open state. When provided the component becomes controlled. */
+    open?: boolean;
+    /** Called when the open state should change (controlled mode). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the dropdown is modal (blocks interaction with the rest of the page).
+     * @default false
+     */
+    modal?: boolean;
+    /**
+     * When `true`, content flips to the opposite side when there is not enough space.
+     * When `false`, content always stays on the requested `placement` (e.g. always bottom).
+     * @default true
+     */
+    avoidCollisions?: boolean;
+    /**
+     * When `true`, content width is set to the trigger width (uses
+     * `--radix-dropdown-menu-trigger-width`).
+     * @default false
+     */
+    matchTriggerWidth?: boolean;
+    /**
+     * When `true`, the dropdown only closes on outside click or Escape.
+     * Clicks on the trigger (when open) or inside the content do not close it.
+     * @default false
+     */
+    closeOnlyOnOutsideClick?: boolean;
+    /** Extra className applied to the floating content container. */
+    className?: string;
+    /** Extra className applied to the trigger wrapper. */
+    triggerClassName?: string;
+}
+/**
+ * `SimpleDropdown` — a single-component dropdown that mirrors the
+ * `SimpleTooltip` API for consistency.
+ *
+ * Built on Radix UI DropdownMenu primitives and styled with Tailwind CSS.
+ *
+ * `title` = trigger element, `children` = popup content.
+ *
+ * @example
+ * ```tsx
+ * // Basic dropdown — title is plain content, wrapped in a <button> automatically
+ * <SimpleDropdown title={<span>Open menu</span>} placement="bottom">
+ *   <DropdownMenuItem>Item 1</DropdownMenuItem>
+ *   <DropdownMenuItem>Item 2</DropdownMenuItem>
+ * </SimpleDropdown>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Title is already a button — use asChild to avoid <button> nesting
+ * <SimpleDropdown title={<button className="btn">Toggle</button>} asChild>
+ *   <div className="p-4">Any custom content here</div>
+ * </SimpleDropdown>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled
+ * const [open, setOpen] = useState(false);
+ * <SimpleDropdown
+ *   title={<span>Toggle</span>}
+ *   open={open}
+ *   onOpenChange={setOpen}
+ * >
+ *   <div>Controlled content</div>
+ * </SimpleDropdown>
+ * ```
+ */
+export declare function SimpleDropdown({ children, title, asChild, placement, align, sideOffset, maxWidth, minWidth, open, onOpenChange, modal, avoidCollisions, matchTriggerWidth, closeOnlyOnOutsideClick, className, triggerClassName, }: SimpleDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SimpleDropdown {
+    var displayName: string;
+}

package/dist/types/components/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './skeleton';
+export * from './skeleton-stack';

package/dist/types/components/skeleton/skeleton-stack.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+export interface SkeletonStackProps {
+    /** Number of skeleton lines to display */
+    lines?: number;
+    /** Additional className for the container */
+    className?: string;
+    /** Gap between skeleton lines */
+    gap?: "sm" | "md" | "lg";
+}
+/**
+ * SkeletonStack — displays multiple skeleton lines for loading text content
+ *
+ * @example
+ * ```tsx
+ * <SkeletonStack lines={5} />
+ * <SkeletonStack lines={3} gap="lg" />
+ * ```
+ */
+export declare function SkeletonStack({ lines, className, gap, }: SkeletonStackProps): React.ReactElement;

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

@@ -0,0 +1,82 @@
+import { VariantProps } from 'class-variance-authority';
+import type * as React from "react";
+declare const skeletonVariants: (props?: ({
+    variant?: "default" | "lighter" | "darker" | null | undefined;
+    speed?: "default" | "fast" | "slow" | null | undefined;
+    width?: "full" | "xs" | "sm" | "lg" | "xl" | "2xl" | "md" | "3/4" | "1/2" | "1/3" | "1/4" | null | undefined;
+    height?: "xs" | "sm" | "lg" | "xl" | "2xl" | "md" | "3xl" | "4xl" | "5xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type WidthPreset = NonNullable<VariantProps<typeof skeletonVariants>["width"]>;
+type HeightPreset = NonNullable<VariantProps<typeof skeletonVariants>["height"]>;
+/**
+ * SkeletonProps — props for Skeleton component.
+ */
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, Omit<VariantProps<typeof skeletonVariants>, "width" | "height"> {
+    /**
+     * Width of the skeleton.
+     * Can be a preset string or a number (pixels).
+     * @default "full"
+     */
+    width?: WidthPreset | number;
+    /**
+     * Height of the skeleton.
+     * Can be a preset string or a number (pixels).
+     * @default "md"
+     */
+    height?: HeightPreset | number;
+    /**
+     * Whether to show the skeleton (loading state).
+     * When false and children are provided, children are rendered instead.
+     * When true or undefined, skeleton is shown.
+     * @default true
+     */
+    loading?: boolean;
+    /**
+     * Content to show when loading is false.
+     * If not provided, skeleton is always shown.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Skeleton — loading placeholder component with pulse animation.
+ *
+ * @usage
+ * Use Skeleton to display loading placeholders:
+ * content loading states, data fetching indicators, placeholder animations.
+ *
+ * Props:
+ * - `variant` — visual variant: "default", "lighter", "darker" (defaults to "default").
+ * - `speed` — animation speed: "slow", "default", "fast" (defaults to "default").
+ * - `width` — width preset or number (pixels): "full", "3/4", "1/2", "1/3", "1/4", "xs", "sm", "md", "lg", "xl", "2xl", or number (defaults to "full").
+ * - `height` — height preset or number (pixels): "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", or number (defaults to "md").
+ * - `loading` — whether to show skeleton (defaults to true). When false, shows children.
+ * - `children` — content to show when loading is false.
+ * - All standard HTML div props are supported (className, style, etc.).
+ *
+ * Note: Uses pulse animation and muted background color.
+ * Can be styled with className to match content dimensions.
+ * Prefer using this component instead of native HTML div element for loading placeholders.
+ *
+ * Do NOT use Skeleton:
+ * - for error states (use appropriate error components).
+ * - for empty states (use appropriate empty state components).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (unchanged API)
+ * <Skeleton />
+ * <Skeleton width="1/2" height="sm" />
+ * <Skeleton variant="lighter" width="md" height="lg" />
+ * <Skeleton speed="fast" width="sm" height="xl" className="rounded-full" />
+ *
+ * // With numeric dimensions (pixels)
+ * <Skeleton width={80} height={16} />
+ *
+ * // Conditional rendering with children
+ * <Skeleton loading={isLoading} width={80} height={14}>
+ *   {actualContent}
+ * </Skeleton>
+ * ```
+ */
+declare function Skeleton({ className, variant, speed, width, height, loading, children, style, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton, skeletonVariants };

package/dist/types/components/slider/index.d.ts

@@ -0,0 +1,6 @@
+export * from './slider';
+export * from './slider-context';
+export * from './slider-mark';
+export * from './slider-track';
+export * from './slider-utils';
+export * from './types';

package/dist/types/components/slider/slider-context.d.ts

@@ -0,0 +1,16 @@
+import { ColorInterval } from '../../utils/ranges';
+import type * as React from "react";
+interface SliderContextValue {
+    colorIntervals: ColorInterval[] | undefined;
+    min: number;
+    max: number;
+}
+interface SliderProviderProps {
+    children: React.ReactNode;
+    colorIntervals: ColorInterval[] | undefined;
+    min: number;
+    max: number;
+}
+export declare function SliderProvider({ children, colorIntervals, min, max, }: SliderProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useSliderContext(): SliderContextValue | undefined;
+export {};

package/dist/types/components/slider/slider-mark.d.ts

@@ -0,0 +1,17 @@
+interface SliderMarkProps {
+    value: number;
+    min: number;
+    max: number;
+    onSelect?: (value: number) => void;
+}
+/**
+ * SliderMark — renders a single marker dot on the slider track.
+ *
+ * Colors the dot based on the first matching color interval
+ * (matching original interface MUIMark behavior).
+ *
+ * Uses onPointerDown + stopPropagation so Radix Slider
+ * doesn't also process the same click (prevents double-firing).
+ */
+export declare function SliderMark({ value, min, max, onSelect }: SliderMarkProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/components/slider/slider-track.d.ts

@@ -0,0 +1,7 @@
+/**
+ * SliderTrack — renders colored intervals on the slider track.
+ *
+ * Intervals are rendered in reversed order so that the first interval
+ * in the array renders on top (matching original interface behavior).
+ */
+export declare function SliderTrack(): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/components/slider/slider-utils.d.ts

@@ -0,0 +1,9 @@
+export type { Decimals } from '../../utils/math';
+export { decimalsToStep, findClosestPoint, formatWithDecimals, formatWithoutDecimals, splitInterval, validateMinMax, } from '../../utils/math';
+export interface MarkerPoint {
+    point: number;
+    type: "base" | "additional";
+}
+export type MarkerStep = 1 | 10 | 100 | 200;
+export declare function validateMarkerPoints(value: MarkerPoint[], min: number, max: number): MarkerPoint[];
+export declare function makeMarkerPoints(min: number, max: number, decimals: number, precision: number, markerStep: number): MarkerPoint[];

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

@@ -0,0 +1,58 @@
+import { ColorInterval } from '../../utils/ranges';
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+export interface SliderProps extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "value" | "onValueChange" | "onValueCommit" | "min" | "max" | "step"> {
+    from: number;
+    to: number;
+    value: number;
+    onChangeValue: (v: number) => void;
+    onSubmitValue?: (v: number) => void;
+    /**
+     * Color intervals for track styling.
+     * Color values can be CSS colors or legacy theme keys.
+     */
+    colorIntervals?: ColorInterval[];
+    /**
+     * Precision for step calculation.
+     * Step = Number(LEVERAGE_DECIMALS) / precision.
+     * Can be number or array (first element used).
+     * @default 10
+     */
+    precision?: number | number[];
+    /**
+     * Marker step for tick marks.
+     * @default 100
+     */
+    markerStep?: number;
+    /**
+     * Snap distance for color interval boundaries.
+     * When dragging, if the thumb is within `epsilon` of a color interval
+     * start or end point, it snaps to that point.
+     * @default 8
+     */
+    epsilon?: number;
+    /**
+     * Optional label displayed below the color intervals (e.g. "Available leverage").
+     * Only shown when colorIntervals are provided.
+     */
+    colorIntervalLabel?: React.ReactNode;
+}
+/**
+ * Slider — range input component matching the @gearbox-protocol/interface Slider API.
+ *
+ * @example
+ * ```tsx
+ * <Slider
+ *   from={100}
+ *   to={700}
+ *   value={400}
+ *   precision={100}
+ *   colorIntervals={[{ start: 200, end: 500, color: 'additionalSuccess' }]}
+ *   colorIntervalLabel="Available leverage"
+ *   markerStep={100}
+ *   onChangeValue={setValue}
+ * />
+ * ```
+ */
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
+export { Slider };

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

@@ -0,0 +1,28 @@
+import { ColorInterval } from '../../utils/ranges';
+/**
+ * Map of legacy interface theme color keys to CSS color values.
+ * Resolves color strings that may be either legacy theme keys or CSS colors.
+ */
+export declare const THEME_COLOR_MAP: Record<string, string>;
+/**
+ * Resolve a color that may be either a legacy theme key or a CSS color value.
+ */
+export declare function resolveColor(color: string | undefined): string | undefined;
+/**
+ * Get interval bounds with defaults
+ */
+export declare function getIntervalBounds(interval: ColorInterval): {
+    start: number;
+    end: number;
+};
+/**
+ * Thumb size in pixels — must match the h-[18px] w-[18px] in the Thumb className.
+ */
+export declare const THUMB_SIZE = 18;
+export declare const THUMB_HALF: number;
+/**
+ * Compute the same in-bounds offset that Radix UI Slider applies to the thumb.
+ * At 0% the thumb is pushed right by THUMB_HALF, at 100% pushed left by THUMB_HALF,
+ * and linearly interpolated in between.
+ */
+export declare function getThumbInBoundsOffset(percent: number): number;

package/dist/types/components/slider-token/index.d.ts

@@ -0,0 +1,3 @@
+export * from './slider-token';
+export * from './slider-token-label';
+export * from './slider-token-utils';

package/dist/types/components/slider-token/slider-token-label.d.ts

@@ -0,0 +1,13 @@
+export interface SliderTokenLabelProps {
+    point: number;
+    min: number;
+    max: number;
+    label: string;
+    align: "top" | "bottom";
+    onSelect: (value: number) => void;
+}
+/**
+ * Clickable label for a slider-token marker (numeric below or text above).
+ * Positioned with the same thumb-offset logic as the track.
+ */
+export declare function SliderTokenLabel({ point, min, max, label, align, onSelect, }: SliderTokenLabelProps): import("react/jsx-runtime").JSX.Element | null;