dash-ui-kit 1.0.2

package/README.md

@@ -0,0 +1,91 @@
+# dash-ui-kit
+
+Dash ui kit is a UI component library with TypeScript, TailwindCSS v4, and class-variance-authority (CVA) support.
+
+At the moment the library is in its initial stage and is actively developed. More components will be added soon and more detailed documentation will be written.
+
+You can see all the created components in the storybook - https://alexeytriplea.github.io/dash-ui-kit/
+
+## ⚡ Quick Start
+
+### Installation
+
+```bash
+npm install AlexeyTripleA/dash-ui-kit
+```
+
+### Setup with Tailwind CSS v4
+
+```css
+/* main.css */
+@import "tailwindcss";
+@import "dash-ui/theme";
+@import "dash-ui/styles";
+```
+
+```jsx
+import { Button } from 'dash-ui/react';
+
+<Button colorScheme="brand">Button</Button>
+```
+
+## 📦 Components
+
+- **ThemeProvider** - Theme context for dark/light mode
+- **Avatar** - Avatar component that creates unique identicons from usernames with customizable appearance. To create avatars for identities, documents, and other entities, you should use their identifiers.
+- **Button** - Flexible buttons with multiple variants and color schemes
+- **Select** - The component of the form for choosing one element from the set.
+- **Text** - Typography component for text.
+- **ValueCard** - A flexibly customized container.
+
+
+## 🎨 Features
+
+- ✅ **Tailwind v4**: Modern CSS-first architecture with `@theme` and `@layer`
+- ✅ **Auto-generated**: Theme CSS automatically built from source
+- ✅ **TypeScript**: Full type safety and IntelliSense support
+- ✅ **Lightweight**: Minimal bundle size impact
+
+## 🚀 Usage Examples
+
+### Button Component
+
+```jsx
+import { Button } from 'dash-ui/react';
+
+// Color schemes
+<Button colorScheme="brand">Brand Button</Button>
+<Button colorScheme="mint">Mint Button</Button>
+<Button colorScheme="gray">Gray Button</Button>
+<Button colorScheme="red">Red Button</Button>
+
+// Variants
+<Button variant="solid">Solid Button</Button>
+<Button variant="outline">Outline Button</Button>
+
+// Sizes
+<Button size="sm">Small Button</Button>
+<Button size="md">Medium Button</Button>
+```
+
+### Text Component
+
+```jsx
+import { Text } from 'dash-ui/react';
+
+<Text size="xl" weight="bold" color="blue">
+  Styled Text
+</Text>
+```
+
+## 🔧 Development
+
+```bash
+npm run build        # Build library
+npm run test         # Run tests
+npm run storybook    # Start Storybook
+```
+
+## License
+
+MIT

package/dist/react/components/accordion/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface AccordionProps {
+    /** The title displayed in the accordion trigger */
+    title: string;
+    /** Content to display in the accordion */
+    children?: React.ReactNode;
+    /** Whether the accordion is open by default */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Accordion component based on Radix UI with smooth animations.
+ * Displays custom content in an expandable format.
+ */
+export declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

package/dist/react/components/avatar/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface AvatarProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {
+    /** Username to generate identicon for */
+    username: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Saturation level for the identicon (0-100) */
+    saturation?: number;
+    /** Lightness level for the identicon (0-100) */
+    lightness?: number;
+}
+/**
+ * Avatar component that creates unique identicons from usernames
+ * with customizable appearance.
+ */
+export declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/dist/react/components/bigNumber/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export type BigNumberVariant = 'space' | 'comma';
+export interface BigNumberProps {
+    /** The numeric value (or string) to format. */
+    children?: number | string | null;
+    /** Use non-breaking space groups or comma groups. */
+    variant?: BigNumberVariant;
+    /** Extra class names to apply to the wrapper. Use gap-* classes for spacing between groups. */
+    className?: string;
+}
+/**
+ * Splits a numeric string into groups of three characters for display.
+ * Supports two variants:
+ * - `space`: groups separated by gap
+ * - `comma`: groups separated by commas, with decimal part after `.`
+ * Supports light/dark theme.
+ */
+export declare const BigNumber: React.FC<BigNumberProps>;
+export default BigNumber;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Solid or outline style */
+    variant?: 'solid' | 'outline';
+    /** Color scheme for the button */
+    colorScheme?: 'brand' | 'mint' | 'gray' | 'red' | 'lightBlue' | 'lightGray';
+    /** Size of the button */
+    size?: 'sm' | 'md' | 'xl';
+}
+/**
+ * Button with solid or outline style, color schemes, disabled state,
+ * press animation, and customizable size. Supports light/dark theme.
+ */
+export declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/react/components/copyButton/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CopyResult } from '../../utils/copyToClipboard';
+export interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onCopy'> {
+    /** Text to copy into clipboard */
+    text: string;
+    /** Optional callback that will be called with the copy result */
+    onCopy?: (result: CopyResult) => void;
+}
+export declare const CopyButton: React.FC<CopyButtonProps>;
+export default CopyButton;

package/dist/react/components/dashLogo/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface DashLogoProps {
+    color?: string;
+    size?: number;
+    width?: number;
+    height?: number;
+    className?: string;
+    onClick?: () => void;
+    containerPadding?: string | number;
+    containerSize?: string | number;
+    containerClassName?: string;
+}
+/**
+ * Dash Logo component with customizable size and color
+ * Original aspect ratio: 30:25 (1.2:1)
+ *
+ * Color can be set via:
+ * - color prop (takes precedence)
+ * - CSS class with text color (e.g., "text-dash-primary-dark-blue")
+ *
+ * SVG is wrapped in a container that centers the logo and supports:
+ * - containerPadding: padding around the logo
+ * - containerSize: width/height of the container
+ * - containerClassName: CSS class for the container
+ * - minWidth/minHeight: min-content (adapts to logo size)
+ */
+export declare const DashLogo: React.FC<DashLogoProps>;
+export default DashLogo;

package/dist/react/components/dateBlock/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export type DateBlockFormat = 'all' | 'deltaOnly' | 'dateOnly';
+export interface DateBlockProps {
+    /** Unix timestamp (ms), Date object, or parsable date string */
+    timestamp: number | Date | string;
+    /** Display format: full date+delta, delta only, or date only */
+    format?: DateBlockFormat;
+    /** Include hours and minutes in formatted date */
+    showTime?: boolean;
+    /** Show a tooltip with relative time */
+    showRelativeTooltip?: boolean;
+    /** Additional CSS classes for wrapper div */
+    className?: string;
+}
+/**
+ * DateBlock component displays a date, optional calendar icon,
+ * and relative time via TimeDelta. It can also show an optional
+ * tooltip with the relative time when hovered. Supports light/dark theme.
+ */
+export declare const DateBlock: React.FC<DateBlockProps>;
+export default DateBlock;

package/dist/react/components/dialog/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface DialogProps {
+    /** Whether the dialog is open */
+    open?: boolean;
+    /** Callback when dialog open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Dialog title */
+    title?: string;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Dialog size */
+    size?: 'sm' | 'md' | 'xl';
+    /** Dialog content */
+    children: React.ReactNode;
+    /** Additional className for the content container */
+    className?: string;
+    /** Custom trigger element (if not controlled) */
+    trigger?: React.ReactNode;
+}
+export declare const DashDialog: React.FC<DialogProps>;
+export { DashDialog as Dialog };

package/dist/react/components/heading/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface HeadingProps {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
+    color?: 'black' | 'gray' | 'blue' | 'red' | 'green';
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const Heading: React.FC<HeadingProps>;
+export type { HeadingProps };

package/dist/react/components/icons/index.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface IconProps {
+    color?: string;
+    size?: number;
+    className?: string;
+    onClick?: () => void;
+}
+export declare const ArrowIcon: React.FC<IconProps>;
+export declare const CopyIcon: React.FC<IconProps>;
+export declare const SuccessIcon: React.FC<IconProps>;
+export declare const ErrorIcon: React.FC<IconProps>;
+export declare const QueuedIcon: React.FC<IconProps>;
+export declare const PooledIcon: React.FC<IconProps>;
+export declare const BroadcastedIcon: React.FC<IconProps>;
+export declare const CalendarIcon: React.FC<IconProps>;
+export declare const EyeOpenIcon: React.FC<IconProps>;
+export declare const EyeClosedIcon: React.FC<IconProps>;
+export declare const CheckIcon: React.FC<IconProps>;
+export declare const KeyIcon: React.FC<IconProps>;
+export declare const ProtectedMessageIcon: React.FC<IconProps>;
+export declare const SmartphoneIcon: React.FC<IconProps>;
+export declare const CrossIcon: React.FC<IconProps>;
+export declare const WalletIcon: React.FC<IconProps>;
+export declare const PlusIcon: React.FC<IconProps>;
+export declare const FilterIcon: React.FC<IconProps>;
+export declare const EditIcon: React.FC<IconProps>;
+export declare const DeleteIcon: React.FC<IconProps>;
+export declare const ChevronIcon: React.FC<IconProps>;
+export declare const BurgerMenuIcon: React.FC<IconProps>;
+export declare const KebabMenuIcon: React.FC<IconProps>;
+export declare const CircleProcessIcon: React.FC<IconProps>;
+export declare const CreditsIcon: React.FC<IconProps>;
+export declare const WebIcon: React.FC<IconProps>;
+export declare const ChainSmallIcon: React.FC<IconProps>;
+export declare const SettingsIcon: React.FC<IconProps>;
+export declare const ShieldSmallIcon: React.FC<IconProps>;
+export declare const QuestionMessageIcon: React.FC<IconProps>;

package/dist/react/components/identifier/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+/** CVA for the root container, now with light/dark theme */
+declare const identifier: (props?: ({
+    theme?: "light" | "dark" | null | undefined;
+    ellipsis?: boolean | null | undefined;
+    highlight?: "default" | "both" | "first" | "last" | "dim" | "highlight" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type IdentifierVariants = VariantProps<typeof identifier>;
+export interface IdentifierProps extends IdentifierVariants {
+    children?: string;
+    avatar?: boolean;
+    copyButton?: boolean;
+    linesAdjustment?: boolean;
+    maxLines?: number;
+    className?: string;
+    middleEllipsis?: boolean;
+    edgeChars?: number;
+}
+/**
+ * Identifier component shows an ID string with optional highlighting, avatar,
+ * copy button, dynamic line adjustment, and multi-line clamp.
+ */
+declare const Identifier: React.FC<IdentifierProps>;
+export default Identifier;

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

@@ -0,0 +1,26 @@
+export { Accordion, type AccordionProps } from './accordion';
+export { Button, type ButtonProps } from './button';
+export { Input, type InputProps } from './input';
+export { Textarea, type TextareaProps } from './textarea';
+export { Text, type TextProps } from './text';
+export { ValueCard, type ValueCardProps } from './valueCard';
+export { Select, type SelectProps, type SelectOption } from './select';
+export { OverlaySelect, type OverlaySelectProps, type OverlaySelectOption } from './overlaySelect';
+export { OverlayMenu, type OverlayMenuProps, type OverlayMenuItem } from './overlayMenu';
+export { Switch, type SwitchProps, type SwitchOption } from './switch';
+export { Avatar, type AvatarProps } from './avatar';
+export { List, type ListProps, type ListItem } from './list';
+export { BigNumber, type BigNumberProps, type BigNumberVariant } from './bigNumber';
+export { default as Identifier, type IdentifierProps } from './identifier';
+export { Heading, type HeadingProps } from './heading';
+export { CopyButton, type CopyButtonProps } from './copyButton';
+export { NotActive, type NotActiveProps } from './notActive';
+export { TimeDelta, type TimeDeltaProps } from './timeDelta';
+export { DateBlock, type DateBlockProps, type DateBlockFormat } from './dateBlock';
+export { TransactionStatusIcon, type TransactionStatusIconProps, type StatusKey } from './transactionStatusIcon';
+export { ProgressStepBar, type ProgressStepBarProps } from './progressStepBar';
+export { DashLogo, type DashLogoProps } from './dashLogo';
+export { Dialog, type DialogProps } from './dialog';
+export { Tabs, type TabsProps, type TabItem } from './tabs';
+export type { TimeDeltaFormat } from '../utils/datetime';
+export { ArrowIcon, CopyIcon, SuccessIcon, ErrorIcon, QueuedIcon, PooledIcon, BroadcastedIcon, CalendarIcon, EyeOpenIcon, EyeClosedIcon, CheckIcon, KeyIcon, ProtectedMessageIcon, SmartphoneIcon, CrossIcon, WalletIcon, PlusIcon, FilterIcon, EditIcon, DeleteIcon, ChevronIcon, BurgerMenuIcon, KebabMenuIcon, CircleProcessIcon, CreditsIcon, WebIcon, ChainSmallIcon, SettingsIcon, ShieldSmallIcon, QuestionMessageIcon } from './icons';

package/dist/react/components/input/index.d.ts

@@ -0,0 +1,38 @@
+import React, { InputHTMLAttributes } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const input: (props?: ({
+    theme?: "light" | "dark" | null | undefined;
+    colorScheme?: "default" | "brand" | "error" | "success" | null | undefined;
+    size?: "sm" | "md" | "xl" | null | undefined;
+    variant?: "outlined" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type InputVariants = VariantProps<typeof input>;
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>, Omit<InputVariants, 'theme' | 'disabled'> {
+    className?: string;
+    error?: boolean;
+    success?: boolean;
+    prefix?: string | React.ReactNode;
+    /**
+     * Controls visibility toggle for password inputs. When false, the eye icon is hidden and no extra right padding is applied.
+     * Defaults to true.
+     */
+    showPasswordToggle?: boolean;
+}
+/**
+ * A versatile input component that adapts to light/dark theme,
+ * supports various color schemes, sizes, variants, and states.
+ * For password inputs, includes a toggleable eye icon.
+ * Supports prefix text or elements before input content.
+ *
+ * @example
+ * <Input
+ *   type='password'
+ *   placeholder='Enter password'
+ *   colorScheme='brand'
+ *   size='xl'
+ *   prefix="https://"
+ * />
+ */
+export declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/react/components/list/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ListItem {
+    text: string;
+    description?: string;
+}
+interface ListProps {
+    items: ListItem[];
+    iconType?: 'check';
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const List: React.FC<ListProps>;
+export type { ListProps, ListItem };

package/dist/react/components/notActive/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface NotActiveProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare function NotActive({ children, className, ...props }: NotActiveProps): React.JSX.Element;

package/dist/react/components/overlayMenu/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const overlayMenuTrigger: (props?: ({
+    theme?: "light" | "dark" | null | undefined;
+    colorScheme?: "default" | "brand" | "gray" | "lightGray" | "error" | "success" | null | undefined;
+    size?: "sm" | "md" | "xl" | null | undefined;
+    border?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    filled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type OverlayMenuVariants = VariantProps<typeof overlayMenuTrigger>;
+export interface OverlayMenuItem {
+    id: string;
+    content: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+export interface OverlayMenuProps extends Omit<OverlayMenuVariants, 'theme' | 'disabled'> {
+    className?: string;
+    error?: boolean;
+    success?: boolean;
+    border?: boolean;
+    filled?: boolean;
+    items?: OverlayMenuItem[];
+    showArrow?: boolean;
+    disabled?: boolean;
+    name?: string;
+    overlayLabel?: string;
+    maxHeight?: string;
+    triggerContent?: React.ReactNode;
+    placeholder?: string;
+    showItemBorders?: boolean;
+}
+/**
+ * Overlay menu component that opens above the trigger with overlay positioning.
+ * Supports custom content items with onClick handlers.
+ */
+export declare const OverlayMenu: React.FC<OverlayMenuProps>;
+export default OverlayMenu;

package/dist/react/components/overlaySelect/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const overlaySelectTrigger: (props?: ({
+    theme?: "light" | "dark" | null | undefined;
+    colorScheme?: "default" | "brand" | "gray" | "lightGray" | "error" | "success" | null | undefined;
+    size?: "sm" | "md" | "xl" | null | undefined;
+    border?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    filled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type OverlaySelectVariants = VariantProps<typeof overlaySelectTrigger>;
+export interface OverlaySelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    content?: React.ReactNode;
+}
+export interface OverlaySelectProps extends Omit<OverlaySelectVariants, 'theme' | 'disabled'> {
+    className?: string;
+    error?: boolean;
+    success?: boolean;
+    border?: boolean;
+    filled?: boolean;
+    options?: OverlaySelectOption[];
+    showArrow?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+    overlayLabel?: string;
+    maxHeight?: string;
+}
+/**
+ * Overlay select component that opens above the trigger with overlay positioning.
+ * Simple select component without additional button functionality.
+ */
+export declare const OverlaySelect: React.FC<OverlaySelectProps>;
+export default OverlaySelect;

package/dist/react/components/progressStepBar/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ProgressStepBarProps {
+    currentStep: number;
+    totalSteps: number;
+    className?: string;
+}
+export declare function ProgressStepBar({ currentStep, totalSteps, className }: ProgressStepBarProps): React.JSX.Element;
+export type { ProgressStepBarProps };

package/dist/react/components/select/index.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const selectTrigger: (props?: ({
+    theme?: "light" | "dark" | null | undefined;
+    colorScheme?: "default" | "brand" | "error" | "success" | null | undefined;
+    size?: "sm" | "md" | "xl" | null | undefined;
+    border?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type SelectVariants = VariantProps<typeof selectTrigger>;
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    content?: React.ReactNode;
+}
+export interface SelectProps extends Omit<SelectVariants, 'theme' | 'disabled'> {
+    className?: string;
+    error?: boolean;
+    success?: boolean;
+    border?: boolean;
+    options?: SelectOption[];
+    showArrow?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+}
+/**
+ * A versatile select component built on Radix UI that adapts to light/dark theme,
+ * supports various color schemes, sizes, variants, states, and HTML content in options.
+ *
+ * @example
+ * <Select
+ *   options={[
+ *     {value: 'id1', label: 'Option 1'},
+ *     {value: 'id2', label: 'Option 2', content: <div><strong>Option 2</strong><br/>Description</div>}
+ *   ]}
+ *   colorScheme="default"
+ *   size="xl"
+ *   border={true}
+ * />
+ */
+export declare const Select: React.FC<SelectProps>;
+export default Select;

package/dist/react/components/switch/index.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const switchContainer: (props?: ({
+    theme?: "light" | "dark" | null | undefined;
+    size?: "sm" | "md" | "xl" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type SwitchVariants = VariantProps<typeof switchContainer>;
+/**
+ * Configuration object for a single switch option.
+ *
+ * @template T - The type of the value (string or number)
+ */
+export interface SwitchOption<T = string | number> {
+    /** Display text for the option */
+    label: string;
+    /** Unique value for the option */
+    value: T;
+    /** Whether this specific option is disabled */
+    disabled?: boolean;
+}
+/**
+ * Props for the Switch component.
+ *
+ * @template T - The type of the option values (string or number)
+ */
+export interface SwitchProps<T = string | number> extends Omit<SwitchVariants, 'theme' | 'disabled'> {
+    /** Array of options to display */
+    options: SwitchOption<T>[];
+    /** Currently selected value */
+    value: T;
+    /** Callback when selection changes */
+    onChange: (value: T) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether the entire switch is disabled */
+    disabled?: boolean;
+}
+/**
+ * A switch component for selecting between multiple options.
+ * Supports individual option disabling, hover states, and responsive sizing.
+ * Uses dash design system sizing and theming with automatic light/dark mode.
+ * @example
+ * // With disabled options
+ * <Switch
+ *   options={[
+ *     { label: 'Basic', value: 'basic' },
+ *     { label: 'Pro', value: 'pro', disabled: true },
+ *     { label: 'Free', value: 'free' }
+ *   ]}
+ *   value="basic"
+ *   onChange={(value) => console.log(value)}
+ * />
+ */
+export declare function Switch<T = string | number>({ options, value, onChange, size, className, disabled }: SwitchProps<T>): React.JSX.Element;
+export default Switch;

package/dist/react/components/tabs/index.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface TabItem {
+    /** Unique identifier for the tab */
+    value: string;
+    /** Label text to display */
+    label: string;
+    /** Content to render when tab is active */
+    content: React.ReactNode;
+    /** Whether this tab is disabled */
+    disabled?: boolean;
+}
+export interface TabsProps {
+    /** Array of tab items */
+    items: TabItem[];
+    /** Currently active tab value (controlled) */
+    value?: string;
+    /** Default active tab value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when active tab changes */
+    onValueChange?: (value: string) => void;
+    /** Size variant */
+    size?: 'sm' | 'lg' | 'xl';
+    /** Additional CSS classes */
+    className?: string;
+    /** Additional CSS classes for the tabs list */
+    listClassName?: string;
+    /** Additional CSS classes for tab triggers */
+    triggerClassName?: string;
+    /** Additional CSS classes for tab content */
+    contentClassName?: string;
+}
+/**
+ * Tabs component with sleek underline style matching Figma design.
+ * Built on radix-ui with light/dark theme support and keyboard navigation.
+ */
+export declare const Tabs: React.FC<TabsProps>;
+export default Tabs;