@true-tech-team/react-components 0.0.4 → 0.0.5

package/lib/components/buttons/ButtonToggleGroup/ButtonToggleGroup.d.ts

@@ -0,0 +1,79 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize, ComponentVariant } from '../../../types';
+export interface ButtonToggleGroupProps extends Omit<BaseComponentProps, 'onChange'> {
+    /**
+     * Currently selected value (controlled)
+     */
+    value?: string;
+    /**
+     * Default selected value (uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * Callback when selection changes
+     * @param value - The newly selected value
+     * @param event - The click event
+     */
+    onChange?: (value: string, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Variant style for all buttons
+     * @default 'outline'
+     */
+    variant?: ComponentVariant;
+    /**
+     * Size for all buttons
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Orientation of the button group
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether buttons should take full width (distribute equally)
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether all buttons are disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Group label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+    /**
+     * ButtonToggleGroupItem children
+     */
+    children: React.ReactNode;
+}
+/**
+ * ButtonToggleGroup component - a group of buttons with single selection
+ *
+ * A segmented control that allows selecting one option from a group of buttons.
+ * Buttons can contain icons, text, or both.
+ *
+ * @example
+ * ```tsx
+ * // Text buttons
+ * <ButtonToggleGroup value={size} onChange={setSize}>
+ *   <ButtonToggleGroupItem value="sm">Small</ButtonToggleGroupItem>
+ *   <ButtonToggleGroupItem value="md">Medium</ButtonToggleGroupItem>
+ *   <ButtonToggleGroupItem value="lg">Large</ButtonToggleGroupItem>
+ * </ButtonToggleGroup>
+ *
+ * // Icon buttons
+ * <ButtonToggleGroup value={view} onChange={setView}>
+ *   <ButtonToggleGroupItem value="list" icon="list" />
+ *   <ButtonToggleGroupItem value="grid" icon="grid" />
+ * </ButtonToggleGroup>
+ * ```
+ */
+export declare const ButtonToggleGroup: React.ForwardRefExoticComponent<ButtonToggleGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default ButtonToggleGroup;

package/lib/components/buttons/ButtonToggleGroup/ButtonToggleGroupContext.d.ts

@@ -0,0 +1,38 @@
+import { ComponentSize, ComponentVariant } from '../../../types';
+export interface ButtonToggleGroupContextValue {
+    /**
+     * Group name for form submission
+     */
+    name: string;
+    /**
+     * Currently selected value
+     */
+    value?: string;
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (value: string, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Whether the group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Size for all items
+     */
+    size?: ComponentSize;
+    /**
+     * Variant style for all items
+     */
+    variant?: ComponentVariant;
+}
+export declare const ButtonToggleGroupContext: import('react').Context<ButtonToggleGroupContextValue | null>;
+/**
+ * Hook to access ButtonToggleGroup context
+ * @throws Error if used outside of ButtonToggleGroup
+ */
+export declare const useButtonToggleGroup: () => ButtonToggleGroupContextValue;
+/**
+ * Hook to optionally access ButtonToggleGroup context
+ * Returns null if not within a ButtonToggleGroup
+ */
+export declare const useButtonToggleGroupOptional: () => ButtonToggleGroupContextValue | null;

package/lib/components/buttons/ButtonToggleGroup/ButtonToggleGroupItem.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+import { IconName } from '../../display/Icon/icons';
+export interface ButtonToggleGroupItemProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Value for this item (required for selection)
+     */
+    value: string;
+    /**
+     * Icon to display (can be used with or without children)
+     */
+    icon?: IconName;
+    /**
+     * Whether this specific item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Button content (text label)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ButtonToggleGroupItem component - individual button within a ButtonToggleGroup
+ *
+ * Must be used as a child of ButtonToggleGroup.
+ *
+ * @example
+ * ```tsx
+ * <ButtonToggleGroup value={view} onChange={setView}>
+ *   <ButtonToggleGroupItem value="list" icon="list">List</ButtonToggleGroupItem>
+ *   <ButtonToggleGroupItem value="grid" icon="grid">Grid</ButtonToggleGroupItem>
+ * </ButtonToggleGroup>
+ * ```
+ */
+export declare const ButtonToggleGroupItem: React.ForwardRefExoticComponent<ButtonToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default ButtonToggleGroupItem;

package/lib/components/buttons/ButtonToggleGroup/index.d.ts

@@ -0,0 +1,7 @@
+export { ButtonToggleGroup } from './ButtonToggleGroup';
+export type { ButtonToggleGroupProps } from './ButtonToggleGroup';
+export { ButtonToggleGroupItem } from './ButtonToggleGroupItem';
+export type { ButtonToggleGroupItemProps } from './ButtonToggleGroupItem';
+export { ButtonToggleGroupContext, useButtonToggleGroup, useButtonToggleGroupOptional, } from './ButtonToggleGroupContext';
+export type { ButtonToggleGroupContextValue } from './ButtonToggleGroupContext';
+export { default } from './ButtonToggleGroup';

package/lib/components/buttons/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,96 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ExtendedComponentSize } from '../../../types';
+import { IconName } from '../../display/Icon/icons';
+export interface ToggleButtonProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Whether the toggle button is in active state (controlled)
+     */
+    active?: boolean;
+    /**
+     * Default active state for uncontrolled component
+     * @default false
+     */
+    defaultActive?: boolean;
+    /**
+     * Callback fired when active state changes
+     * @param active - The new active state
+     * @param event - The click event
+     */
+    onChange?: (active: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Icon to display when active (filled icon recommended)
+     * @default 'heart-filled'
+     */
+    activeIcon?: IconName;
+    /**
+     * Icon to display when inactive (outline icon recommended)
+     * @default 'heart'
+     */
+    inactiveIcon?: IconName;
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size?: ExtendedComponentSize;
+    /**
+     * Color when active
+     * @default 'var(--theme-error)'
+     */
+    activeColor?: string;
+    /**
+     * Color when inactive
+     * @default 'var(--theme-text-secondary)'
+     */
+    inactiveColor?: string;
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Button type attribute
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Whether to show animation on toggle
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * Accessible label (REQUIRED for icon-only buttons)
+     */
+    'aria-label': string;
+}
+/**
+ * ToggleButton component - an icon button that toggles between two states
+ *
+ * A versatile toggle button that displays different icons for active/inactive states.
+ * Perfect for like buttons, favorites, bookmarks, and similar toggle interactions.
+ *
+ * @example
+ * ```tsx
+ * // Like button (default)
+ * <ToggleButton aria-label="Like" onChange={(liked) => console.log(liked)} />
+ *
+ * // Controlled bookmark button
+ * <ToggleButton
+ *   active={isBookmarked}
+ *   onChange={setIsBookmarked}
+ *   activeIcon="bookmark"
+ *   inactiveIcon="bookmark"
+ *   activeColor="var(--theme-primary)"
+ *   aria-label="Bookmark"
+ * />
+ *
+ * // Star favorite button
+ * <ToggleButton
+ *   activeIcon="star"
+ *   inactiveIcon="star"
+ *   activeColor="var(--theme-warning)"
+ *   aria-label="Favorite"
+ * />
+ * ```
+ */
+export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ToggleButton;

package/lib/components/buttons/ToggleButton/index.d.ts

@@ -0,0 +1,3 @@
+export { ToggleButton } from './ToggleButton';
+export type { ToggleButtonProps } from './ToggleButton';
+export { default } from './ToggleButton';

package/lib/components/display/Icon/icons/BookmarkFilled.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const BookmarkFilled: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default BookmarkFilled;

package/lib/components/display/Icon/icons/ChevronsLeft.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const ChevronsLeft: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default ChevronsLeft;

package/lib/components/display/Icon/icons/ChevronsRight.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const ChevronsRight: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default ChevronsRight;

package/lib/components/display/Icon/icons/HeartFilled.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const HeartFilled: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default HeartFilled;

package/lib/components/display/Icon/icons/More.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const More: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default More;

package/lib/components/display/Icon/icons/StarFilled.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const StarFilled: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default StarFilled;

package/lib/components/display/Icon/icons/ThumbsUpFilled.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const ThumbsUpFilled: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default ThumbsUpFilled;

package/lib/components/display/Icon/icons/index.d.ts

@@ -21,6 +21,7 @@ import { default as BellOff } from './BellOff';
 import { default as Bluetooth } from './Bluetooth';
 import { default as Bold } from './Bold';
 import { default as Bookmark } from './Bookmark';
+import { default as BookmarkFilled } from './BookmarkFilled';
 import { default as BookmarkPlus } from './BookmarkPlus';
 import { default as Building } from './Building';
 import { default as Calendar } from './Calendar';
@@ -31,6 +32,8 @@ import { default as Check } from './Check';
 import { default as ChevronDown } from './ChevronDown';
 import { default as ChevronLeft } from './ChevronLeft';
 import { default as ChevronRight } from './ChevronRight';
+import { default as ChevronsLeft } from './ChevronsLeft';
+import { default as ChevronsRight } from './ChevronsRight';
 import { default as ChevronUp } from './ChevronUp';
 import { default as Clock } from './Clock';
 import { default as Close } from './Close';
@@ -73,6 +76,7 @@ import { default as Grid } from './Grid';
 import { default as HardDrive } from './HardDrive';
 import { default as Hash } from './Hash';
 import { default as Heart } from './Heart';
+import { default as HeartFilled } from './HeartFilled';
 import { default as Help } from './Help';
 import { default as Home } from './Home';
 import { default as Hourglass } from './Hourglass';
@@ -103,6 +107,7 @@ import { default as MicOff } from './MicOff';
 import { default as Minimize } from './Minimize';
 import { default as Minus } from './Minus';
 import { default as Monitor } from './Monitor';
+import { default as More } from './More';
 import { default as Music } from './Music';
 import { default as Navigation } from './Navigation';
 import { default as Navigation2 } from './Navigation2';
@@ -148,6 +153,7 @@ import { default as SkipBack } from './SkipBack';
 import { default as SkipForward } from './SkipForward';
 import { default as Smartphone } from './Smartphone';
 import { default as Star } from './Star';
+import { default as StarFilled } from './StarFilled';
 import { default as Stop } from './Stop';
 import { default as Stopwatch } from './Stopwatch';
 import { default as Sunrise } from './Sunrise';
@@ -157,6 +163,7 @@ import { default as Tag } from './Tag';
 import { default as Target } from './Target';
 import { default as Terminal } from './Terminal';
 import { default as ThumbsUp } from './ThumbsUp';
+import { default as ThumbsUpFilled } from './ThumbsUpFilled';
 import { default as TrendingDown } from './TrendingDown';
 import { default as TrendingUp } from './TrendingUp';
 import { default as Type } from './Type';
@@ -208,6 +215,7 @@ export declare const iconRegistry: {
     readonly bluetooth: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly bold: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly bookmark: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly 'bookmark-filled': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly 'bookmark-plus': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly building: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly calendar: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
@@ -218,6 +226,8 @@ export declare const iconRegistry: {
     readonly 'chevron-down': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly 'chevron-left': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly 'chevron-right': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly 'chevrons-left': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly 'chevrons-right': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly 'chevron-up': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly clock: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly close: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
@@ -260,6 +270,7 @@ export declare const iconRegistry: {
     readonly 'hard-drive': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly hash: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly heart: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly 'heart-filled': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly help: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly home: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly hourglass: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
@@ -290,6 +301,7 @@ export declare const iconRegistry: {
     readonly minimize: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly minus: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly monitor: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly more: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly music: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly navigation: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly 'navigation-2': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
@@ -335,6 +347,7 @@ export declare const iconRegistry: {
     readonly 'skip-forward': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly smartphone: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly star: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly 'star-filled': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly stop: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly stopwatch: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly sunrise: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
@@ -344,6 +357,7 @@ export declare const iconRegistry: {
     readonly target: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly terminal: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly 'thumbs-up': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly 'thumbs-up-filled': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly 'trending-down': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly 'trending-up': (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
     readonly type: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
@@ -376,4 +390,4 @@ export type IconName = keyof typeof iconRegistry;
 /**
  * Named exports for direct import
  */
-export { Account, Activity, AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, AtSign, BarChart2, Battery, BatteryCharging, Bell, BellOff, Bluetooth, Bold, Bookmark, BookmarkPlus, Building, Calendar, Camera, ChartBar, ChartLine, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Close, Cloud, CloudDownload, CloudOff, CloudUpload, Code, Compass, Copy, CornerDownLeft, CornerDownRight, CornerUpLeft, CornerUpRight, Cpu, CreditCard, Crosshair, Database, Delete, Dollar, Download, Edit, Error, ExternalLink, Eye, EyeOff, File, FileCheck, FileMinus, FilePlus, FileText, Filter, Folder, FolderMinus, FolderOpen, FolderPlus, Gift, Globe, Grid, HardDrive, Hash, Heart, Help, Home, Hourglass, Image, Inbox, Info, Italic, Key, Laptop, Link, Link2, List, ListOrdered, ListUnordered, Lock, Logout, Mail, MailOpen, Map, MapPin, Maximize, Menu, MessageCircle, Messages, MessageSquare, Mic, MicOff, Minimize, Minus, Monitor, Music, Navigation, Navigation2, Outbox, Paperclip, Pause, Percent, PercentCircle, Phone, PhoneCall, PhoneIncoming, PhoneMissed, PhoneOutgoing, PieChart, Play, Plus, Power, Preferences, Printer, Profile, Redo, Refresh, Repeat, RotateCcw, RotateCw, Route, Rss, Save, Search, Send, Server, Settings, Share, Share2, Shield, ShieldAlert, ShieldCheck, ShieldOff, ShoppingBag, ShoppingCart, Shuffle, SkipBack, SkipForward, Smartphone, Star, Stop, Stopwatch, Sunrise, Sunset, Tablet, Tag, Target, Terminal, ThumbsUp, TrendingDown, TrendingUp, Type, Underline, Undo, Unlock, Unlink, Upload, User, UserCheck, UserMinus, UserPlus, Users, UserX, Video, Volume, Volume1, Volume2, VolumeX, Warning, Watch, Wifi, WifiOff, Zap, };
+export { Account, Activity, AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, AtSign, BarChart2, Battery, BatteryCharging, Bell, BellOff, Bluetooth, Bold, Bookmark, BookmarkFilled, BookmarkPlus, Building, Calendar, Camera, ChartBar, ChartLine, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, ChevronUp, Clock, Close, Cloud, CloudDownload, CloudOff, CloudUpload, Code, Compass, Copy, CornerDownLeft, CornerDownRight, CornerUpLeft, CornerUpRight, Cpu, CreditCard, Crosshair, Database, Delete, Dollar, Download, Edit, Error, ExternalLink, Eye, EyeOff, File, FileCheck, FileMinus, FilePlus, FileText, Filter, Folder, FolderMinus, FolderOpen, FolderPlus, Gift, Globe, Grid, HardDrive, Hash, Heart, HeartFilled, Help, Home, Hourglass, Image, Inbox, Info, Italic, Key, Laptop, Link, Link2, List, ListOrdered, ListUnordered, Lock, Logout, Mail, MailOpen, Map, MapPin, Maximize, Menu, MessageCircle, Messages, MessageSquare, Mic, MicOff, Minimize, Minus, Monitor, More, Music, Navigation, Navigation2, Outbox, Paperclip, Pause, Percent, PercentCircle, Phone, PhoneCall, PhoneIncoming, PhoneMissed, PhoneOutgoing, PieChart, Play, Plus, Power, Preferences, Printer, Profile, Redo, Refresh, Repeat, RotateCcw, RotateCw, Route, Rss, Save, Search, Send, Server, Settings, Share, Share2, Shield, ShieldAlert, ShieldCheck, ShieldOff, ShoppingBag, ShoppingCart, Shuffle, SkipBack, SkipForward, Smartphone, Star, StarFilled, Stop, Stopwatch, Sunrise, Sunset, Tablet, Tag, Target, Terminal, ThumbsUp, ThumbsUpFilled, TrendingDown, TrendingUp, Type, Underline, Undo, Unlock, Unlink, Upload, User, UserCheck, UserMinus, UserPlus, Users, UserX, Video, Volume, Volume1, Volume2, VolumeX, Warning, Watch, Wifi, WifiOff, Zap, };

package/lib/components/display/OverflowText/OverflowText.d.ts

@@ -0,0 +1,81 @@
+import { default as React } from 'react';
+import { PopoverPosition } from '../../../utils/positioning';
+import { BaseComponentProps } from '../../../types';
+/**
+ * Props for the OverflowText component
+ */
+export interface OverflowTextProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Text content to display
+     */
+    children: string;
+    /**
+     * Maximum number of lines before truncation
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * Position of the tooltip
+     * @default 'top'
+     */
+    tooltipPosition?: PopoverPosition;
+    /**
+     * Delay before showing tooltip (ms)
+     * @default 200
+     */
+    tooltipDelay?: number;
+    /**
+     * Whether to disable the tooltip (always truncate, never show full text)
+     * @default false
+     */
+    disableTooltip?: boolean;
+    /**
+     * Custom tooltip content (defaults to full text)
+     */
+    tooltipContent?: React.ReactNode;
+    /**
+     * Maximum width of the tooltip
+     * @default 300
+     */
+    tooltipMaxWidth?: number;
+    /**
+     * HTML element to render
+     * @default 'span'
+     */
+    as?: 'span' | 'p' | 'div';
+    /**
+     * Callback when text overflow state changes
+     * @param isOverflowing - Whether text is currently overflowing
+     */
+    onOverflowChange?: (isOverflowing: boolean) => void;
+}
+/**
+ * OverflowText - Text that truncates with ellipsis and shows full content in tooltip
+ *
+ * @example
+ * Single line truncation:
+ * ```tsx
+ * <OverflowText>
+ *   This is a very long text that will be truncated with ellipsis
+ * </OverflowText>
+ * ```
+ *
+ * @example
+ * Multi-line truncation:
+ * ```tsx
+ * <OverflowText lines={2}>
+ *   This is a very long text that spans multiple lines and will be
+ *   truncated after the second line with an ellipsis.
+ * </OverflowText>
+ * ```
+ *
+ * @example
+ * With custom tooltip position:
+ * ```tsx
+ * <OverflowText tooltipPosition="bottom" tooltipDelay={500}>
+ *   Hover to see the full text in a tooltip at the bottom
+ * </OverflowText>
+ * ```
+ */
+export declare const OverflowText: React.ForwardRefExoticComponent<OverflowTextProps & React.RefAttributes<HTMLElement>>;
+export default OverflowText;

package/lib/components/display/OverflowText/index.d.ts

@@ -0,0 +1,2 @@
+export { OverflowText } from './OverflowText';
+export type { OverflowTextProps } from './OverflowText';

package/lib/components/display/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,112 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface ScrollAreaRef {
+    /**
+     * Scroll to specific position
+     */
+    scrollTo: (options: ScrollToOptions) => void;
+    /**
+     * Scroll to top
+     */
+    scrollToTop: (behavior?: ScrollBehavior) => void;
+    /**
+     * Scroll to bottom
+     */
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
+    /**
+     * Scroll to left
+     */
+    scrollToLeft: (behavior?: ScrollBehavior) => void;
+    /**
+     * Scroll to right
+     */
+    scrollToRight: (behavior?: ScrollBehavior) => void;
+    /**
+     * Get current scroll position
+     */
+    getScrollPosition: () => {
+        scrollTop: number;
+        scrollLeft: number;
+    };
+    /**
+     * Get the viewport element
+     */
+    getElement: () => HTMLDivElement | null;
+}
+export interface ScrollAreaProps extends BaseComponentProps {
+    /**
+     * Scroll direction
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal' | 'both';
+    /**
+     * Maximum height (enables vertical scroll)
+     */
+    maxHeight?: string | number;
+    /**
+     * Maximum width (enables horizontal scroll)
+     */
+    maxWidth?: string | number;
+    /**
+     * Whether to show shadow indicators at scroll edges
+     * @default false
+     */
+    showShadows?: boolean;
+    /**
+     * Callback when scroll position changes
+     */
+    onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+    /**
+     * Callback when scrolled to top
+     */
+    onScrollToTop?: () => void;
+    /**
+     * Callback when scrolled to bottom
+     */
+    onScrollToBottom?: () => void;
+    /**
+     * Callback when scrolled to left edge
+     */
+    onScrollToLeft?: () => void;
+    /**
+     * Callback when scrolled to right edge
+     */
+    onScrollToRight?: () => void;
+    /**
+     * Threshold in pixels for scroll end callbacks
+     * @default 10
+     */
+    scrollEndThreshold?: number;
+    /**
+     * Content to render inside scrollable area
+     */
+    children: React.ReactNode;
+}
+/**
+ * ScrollArea component - a custom scrollbar container
+ *
+ * Provides styled scrollbars with various visibility modes and
+ * programmatic scroll control.
+ *
+ * @example
+ * Basic vertical scroll:
+ * ```tsx
+ * <ScrollArea maxHeight={300}>
+ *   <p>Long content here...</p>
+ * </ScrollArea>
+ * ```
+ *
+ * @example
+ * With scroll callbacks:
+ * ```tsx
+ * <ScrollArea
+ *   maxHeight={400}
+ *   onScrollToBottom={() => loadMore()}
+ *   showShadows
+ * >
+ *   {items.map(item => <Item key={item.id} {...item} />)}
+ * </ScrollArea>
+ * ```
+ */
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<ScrollAreaRef>>;
+export default ScrollArea;

package/lib/components/display/ScrollArea/index.d.ts

@@ -0,0 +1,3 @@
+export { ScrollArea } from './ScrollArea';
+export type { ScrollAreaProps, ScrollAreaRef } from './ScrollArea';
+export { default } from './ScrollArea';

package/lib/components/display/Tabs/Tab.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+import { IconName } from '../Icon/icons';
+export interface TabProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Value identifier for this tab (required)
+     */
+    value: string;
+    /**
+     * Icon to display before tab label
+     */
+    icon?: IconName;
+    /**
+     * Whether this tab is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Tab label content
+     */
+    children: React.ReactNode;
+}
+/**
+ * Tab component - individual tab header button
+ *
+ * Must be used within TabList, which must be within Tabs.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabList>
+ *     <Tab value="tab1">Tab 1</Tab>
+ *     <Tab value="tab2" icon="settings">Settings</Tab>
+ *   </TabList>
+ *   <TabPanel value="tab1">Content 1</TabPanel>
+ *   <TabPanel value="tab2">Content 2</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
+export default Tab;