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

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/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';

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

@@ -0,0 +1,125 @@
+import { default as React, ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+import { IconName } from '../Icon';
+/**
+ * Props for the Carousel component
+ */
+export interface CarouselProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Slides to display
+     */
+    children: ReactNode;
+    /**
+     * Whether to auto-play the carousel
+     * @default false
+     */
+    autoPlay?: boolean;
+    /**
+     * Auto-play interval in milliseconds
+     * @default 5000
+     */
+    autoPlayInterval?: number;
+    /**
+     * Whether to pause auto-play on hover
+     * @default true
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Whether to show navigation dots
+     * @default true
+     */
+    showDots?: boolean;
+    /**
+     * Whether to show navigation arrows
+     * @default true
+     */
+    showArrows?: boolean;
+    /**
+     * Whether to loop infinitely
+     * @default true
+     */
+    infinite?: boolean;
+    /**
+     * Number of slides to show at once
+     * @default 1
+     */
+    slidesToShow?: number;
+    /**
+     * Number of slides to scroll at once
+     * @default 1
+     */
+    slidesToScroll?: number;
+    /**
+     * Gap between slides
+     * @default '16px'
+     */
+    gap?: string;
+    /**
+     * Transition duration in milliseconds
+     * @default 300
+     */
+    transitionDuration?: number;
+    /**
+     * Active slide index (controlled mode)
+     */
+    activeIndex?: number;
+    /**
+     * Default active slide index (uncontrolled mode)
+     * @default 0
+     */
+    defaultIndex?: number;
+    /**
+     * Callback when slide changes
+     */
+    onChange?: (index: number) => void;
+    /**
+     * Icon for previous arrow
+     * @default 'chevron-left'
+     */
+    prevIcon?: ReactNode | IconName;
+    /**
+     * Icon for next arrow
+     * @default 'chevron-right'
+     */
+    nextIcon?: ReactNode | IconName;
+    /**
+     * Whether arrows should be outside the carousel
+     * @default false
+     */
+    arrowsOutside?: boolean;
+    /**
+     * Dot position
+     * @default 'bottom'
+     */
+    dotsPosition?: 'bottom' | 'top';
+}
+/**
+ * Carousel - A sliding carousel component for displaying multiple items
+ *
+ * @example
+ * ```tsx
+ * <Carousel>
+ *   <div>Slide 1</div>
+ *   <div>Slide 2</div>
+ *   <div>Slide 3</div>
+ * </Carousel>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Carousel autoPlay autoPlayInterval={3000} showDots>
+ *   <img src="image1.jpg" alt="Slide 1" />
+ *   <img src="image2.jpg" alt="Slide 2" />
+ * </Carousel>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multiple slides visible
+ * <Carousel slidesToShow={3} gap="24px">
+ *   {items.map(item => <Card key={item.id}>{item.content}</Card>)}
+ * </Carousel>
+ * ```
+ */
+export declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
+export default Carousel;

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

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

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

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface CollapseProps extends BaseComponentProps {
+    /**
+     * Whether the content is expanded
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Content to show/hide
+     */
+    children: ReactNode;
+    /**
+     * Animation duration in milliseconds
+     * @default 250
+     */
+    duration?: number;
+    /**
+     * Easing function for animation
+     * @default 'ease-in-out'
+     */
+    easing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | string;
+    /**
+     * Callback when expand animation starts
+     */
+    onExpandStart?: () => void;
+    /**
+     * Callback when expand animation ends
+     */
+    onExpandEnd?: () => void;
+    /**
+     * Callback when collapse animation starts
+     */
+    onCollapseStart?: () => void;
+    /**
+     * Callback when collapse animation ends
+     */
+    onCollapseEnd?: () => void;
+    /**
+     * Whether to unmount children when collapsed
+     * @default false
+     */
+    unmountOnCollapse?: boolean;
+}
+/**
+ * Collapse component
+ * A container that provides smooth expand/collapse animation for its children
+ *
+ * @example
+ * ```tsx
+ * <Collapse isOpen={isExpanded}>
+ *   <div>Content to show/hide</div>
+ * </Collapse>
+ * ```
+ */
+export declare const Collapse: import('react').ForwardRefExoticComponent<CollapseProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Collapse;

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

@@ -0,0 +1,2 @@
+export { Collapse, default } from './Collapse';
+export type { CollapseProps } from './Collapse';