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

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

@@ -41,9 +41,20 @@ export interface ButtonProps extends BaseComponentProps {
      * Can be an icon name or a React component
      */
     endIcon?: React.ReactNode | IconName;
+    /**
+     * Whether the button is in loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Text to display while loading (replaces children)
+     */
+    loadingText?: string;
+    /**
+     * Position of the loading spinner
+     * @default 'start'
+     */
+    loadingPosition?: 'start' | 'end' | 'center';
 }
-/**
- * Button component with multiple variants and sizes
- */
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

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/Accordion/Accordion.d.ts

@@ -0,0 +1,112 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types';
+import { IconName } from '../../display/Icon/icons';
+/**
+ * Position of the expand/collapse icon
+ */
+export type AccordionIconPosition = 'left' | 'right';
+export interface AccordionProps extends BaseComponentProps {
+    /**
+     * Unique identifier for the accordion
+     * Required when used within AccordionContainer
+     */
+    id?: string;
+    /**
+     * Header content (can be string or ReactNode)
+     */
+    header: ReactNode;
+    /**
+     * Accordion body content
+     */
+    children: ReactNode;
+    /**
+     * Whether the accordion is expanded (controlled)
+     */
+    isOpen?: boolean;
+    /**
+     * Default expanded state (uncontrolled)
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback when open state changes
+     * @param isOpen - The new open state
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Position of the expand/collapse icon
+     * @default 'right'
+     */
+    iconPosition?: AccordionIconPosition;
+    /**
+     * Custom expand icon (icon name or ReactNode)
+     * @default 'chevron-down'
+     */
+    expandIcon?: IconName | ReactNode;
+    /**
+     * Custom collapse icon (icon name or ReactNode)
+     * If not provided, expandIcon will rotate 180deg
+     */
+    collapseIcon?: IconName | ReactNode;
+    /**
+     * Whether to disable the accordion
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Accordion size variant
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Whether to show border around the accordion
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Animation duration in milliseconds
+     * @default 250
+     */
+    animationDuration?: number;
+    /**
+     * Whether to unmount body content when collapsed
+     * @default false
+     */
+    unmountOnCollapse?: boolean;
+    /**
+     * Additional header icon (shown before header text)
+     */
+    headerIcon?: IconName | ReactNode;
+    /**
+     * Callback when header is clicked
+     */
+    onHeaderClick?: () => void;
+}
+/**
+ * Accordion component
+ * A collapsible panel with a clickable header and expandable body
+ *
+ * @example
+ * ```tsx
+ * // Standalone usage
+ * <Accordion header="Section Title">
+ *   <p>Section content here</p>
+ * </Accordion>
+ *
+ * // With custom icon position
+ * <Accordion header="Settings" iconPosition="left">
+ *   <p>Settings content</p>
+ * </Accordion>
+ *
+ * // Controlled
+ * <Accordion
+ *   header="Details"
+ *   isOpen={isExpanded}
+ *   onOpenChange={setIsExpanded}
+ * >
+ *   <p>Details content</p>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Accordion;

package/lib/components/display/Accordion/AccordionContainer.d.ts

@@ -0,0 +1,101 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types';
+import { AccordionMode } from './AccordionContext';
+/**
+ * Position of the expand/collapse all controls
+ */
+export type AccordionControlsPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface AccordionContainerProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Accordion children
+     */
+    children: ReactNode;
+    /**
+     * Mode for accordion expansion
+     * - 'single': Only one accordion can be open at a time
+     * - 'multiple': Multiple accordions can be open simultaneously
+     * @default 'multiple'
+     */
+    mode?: AccordionMode;
+    /**
+     * Array of expanded accordion IDs (controlled)
+     */
+    expandedIds?: string[];
+    /**
+     * Default expanded accordion IDs (uncontrolled)
+     * @default []
+     */
+    defaultExpandedIds?: string[];
+    /**
+     * Callback when expanded IDs change
+     * @param expandedIds - Array of currently expanded accordion IDs
+     */
+    onExpandedChange?: (expandedIds: string[]) => void;
+    /**
+     * Whether to show expand all / collapse all controls
+     * @default false
+     */
+    showExpandAllControls?: boolean;
+    /**
+     * Label for "Expand All" button
+     * @default 'Expand All'
+     */
+    expandAllLabel?: ReactNode;
+    /**
+     * Label for "Collapse All" button
+     * @default 'Collapse All'
+     */
+    collapseAllLabel?: ReactNode;
+    /**
+     * Position of expand/collapse all controls
+     * @default 'top-right'
+     */
+    controlsPosition?: AccordionControlsPosition;
+    /**
+     * Size variant for all accordions (can be overridden per accordion)
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Gap between accordions in pixels
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Whether accordions should be bordered
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Whether to disable all accordions
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * AccordionContainer component
+ * Manages multiple accordions with optional expand/collapse all functionality
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AccordionContainer>
+ *   <Accordion id="section1" header="Section 1">Content 1</Accordion>
+ *   <Accordion id="section2" header="Section 2">Content 2</Accordion>
+ * </AccordionContainer>
+ *
+ * // With expand/collapse all
+ * <AccordionContainer showExpandAllControls>
+ *   <Accordion id="section1" header="Section 1">Content 1</Accordion>
+ *   <Accordion id="section2" header="Section 2">Content 2</Accordion>
+ * </AccordionContainer>
+ *
+ * // Single mode (only one open at a time)
+ * <AccordionContainer mode="single">
+ *   <Accordion id="section1" header="Section 1">Content 1</Accordion>
+ *   <Accordion id="section2" header="Section 2">Content 2</Accordion>
+ * </AccordionContainer>
+ * ```
+ */
+export declare const AccordionContainer: React.FC<AccordionContainerProps>;
+export default AccordionContainer;

package/lib/components/display/Accordion/AccordionContext.d.ts

@@ -0,0 +1,57 @@
+import { ComponentSize } from '../../../types';
+/**
+ * Accordion expansion mode
+ * - 'single': Only one accordion can be open at a time
+ * - 'multiple': Multiple accordions can be open simultaneously
+ */
+export type AccordionMode = 'single' | 'multiple';
+/**
+ * Context value for AccordionContainer
+ */
+export interface AccordionContextValue {
+    /**
+     * Set of expanded accordion IDs
+     */
+    expandedIds: Set<string>;
+    /**
+     * Toggle expansion state of an accordion
+     * @param id - The accordion ID to toggle
+     */
+    toggleAccordion: (id: string) => void;
+    /**
+     * Expansion mode
+     */
+    mode: AccordionMode;
+    /**
+     * Whether all accordions in the container are disabled
+     */
+    disabled: boolean;
+    /**
+     * Size variant from container (can be overridden per accordion)
+     */
+    size?: ComponentSize;
+    /**
+     * Whether accordions should show borders
+     */
+    bordered?: boolean;
+}
+/**
+ * Accordion context
+ * Provides state coordination for AccordionContainer
+ */
+export declare const AccordionContext: import('react').Context<AccordionContextValue | null>;
+/**
+ * Hook to access accordion container context
+ * Returns null if not within AccordionContainer (allowing standalone usage)
+ *
+ * @returns AccordionContextValue or null if outside container
+ */
+export declare function useAccordionContext(): AccordionContextValue | null;
+/**
+ * Hook that throws if not within AccordionContainer
+ * Use this when accordion must be within a container
+ *
+ * @throws Error if used outside AccordionContainer
+ * @returns AccordionContextValue
+ */
+export declare function useAccordionContextStrict(): AccordionContextValue;

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

@@ -0,0 +1,6 @@
+export { Accordion, default } from './Accordion';
+export type { AccordionProps, AccordionIconPosition } from './Accordion';
+export { AccordionContainer } from './AccordionContainer';
+export type { AccordionContainerProps, AccordionControlsPosition } from './AccordionContainer';
+export { AccordionContext, useAccordionContext, useAccordionContextStrict } from './AccordionContext';
+export type { AccordionContextValue, AccordionMode } from './AccordionContext';

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

@@ -35,7 +35,7 @@ export interface AvatarProps extends Omit<BaseComponentProps, 'children'> {
     /**
      * Status indicator
      */
-    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'processing';
+    status?: 'online' | 'offline' | 'away' | 'busy' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'processing';
 }
 /**
  * Avatar - User profile picture or placeholder with initials/fallback

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

@@ -0,0 +1,101 @@
+import { default as React, ReactNode, MouseEvent } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types/component.types';
+/**
+ * Card visual variants
+ */
+export type CardVariant = 'outlined' | 'elevated' | 'filled';
+/**
+ * Card padding options
+ */
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+/**
+ * Props for the Card component
+ */
+export interface CardProps extends BaseComponentProps {
+    /**
+     * Visual variant of the card
+     * @default 'outlined'
+     */
+    variant?: CardVariant;
+    /**
+     * Size of the card (affects border-radius)
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Padding inside the card
+     * @default 'md'
+     */
+    padding?: CardPadding;
+    /**
+     * Whether the card is interactive (clickable)
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Whether the card is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Click handler (when interactive)
+     */
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Optional header content
+     */
+    header?: ReactNode;
+    /**
+     * Optional footer content
+     */
+    footer?: ReactNode;
+    /**
+     * Whether the header has a bottom divider
+     * @default true (when header is provided)
+     */
+    headerDivider?: boolean;
+    /**
+     * Whether the footer has a top divider
+     * @default true (when footer is provided)
+     */
+    footerDivider?: boolean;
+    /**
+     * Whether to show hover effect (auto-enabled when interactive)
+     * @default false
+     */
+    hoverable?: boolean;
+    /**
+     * Whether the card takes full width
+     * @default false
+     */
+    fullWidth?: boolean;
+}
+/**
+ * Card - A flexible container component for grouping related content
+ *
+ * @example
+ * ```tsx
+ * <Card variant="outlined" padding="md">
+ *   Card content goes here
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Card
+ *   header={<h3>Card Title</h3>}
+ *   footer={<Button>Action</Button>}
+ * >
+ *   Main content
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Card interactive onClick={() => console.log('clicked')}>
+ *   Clickable card
+ * </Card>
+ * ```
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export default Card;

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

@@ -0,0 +1,3 @@
+export { Card } from './Card';
+export type { CardProps, CardVariant, CardPadding } from './Card';
+export { default } from './Card';