@true-tech-team/react-components 0.0.1 → 0.0.2

package/lib/assets/icons/index.d.ts

@@ -21,6 +21,13 @@ import { default as Profile } from './profile.svg?react';
 import { default as Preferences } from './preferences.svg?react';
 import { default as Account } from './account.svg?react';
 import { default as Logout } from './logout.svg?react';
+import { default as User } from './user.svg?react';
+import { default as Users } from './users.svg?react';
+import { default as Building } from './building.svg?react';
+import { default as Dollar } from './dollar.svg?react';
+import { default as ChartLine } from './chart-line.svg?react';
+import { default as ChartBar } from './chart-bar.svg?react';
+import { default as TrendingDown } from './trending-down.svg?react';
 /**
  * Icon registry mapping icon names to SVG components
  */
@@ -94,6 +101,27 @@ export declare const iconRegistry: {
     readonly logout: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
+    readonly user: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly users: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly building: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly dollar: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly 'chart-line': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly 'chart-bar': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    readonly 'trending-down': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
 };
 /**
  * Available icon names
@@ -102,4 +130,4 @@ export type IconName = keyof typeof iconRegistry;
 /**
  * Named exports for direct import
  */
-export { Calendar, ChevronDown, ChevronUp, ChevronLeft, ChevronRight, Close, Check, Minus, Plus, Info, Help, Warning, Error, Eye, EyeOff, Edit, Copy, Delete, Settings, Profile, Preferences, Account, Logout, };
+export { Calendar, ChevronDown, ChevronUp, ChevronLeft, ChevronRight, Close, Check, Minus, Plus, Info, Help, Warning, Error, Eye, EyeOff, Edit, Copy, Delete, Settings, Profile, Preferences, Account, Logout, User, Users, Building, Dollar, ChartLine, ChartBar, TrendingDown, };

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

@@ -0,0 +1,58 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ExtendedComponentSize } from '../../../types/component.types';
+/**
+ * Props for the Avatar component
+ */
+export interface AvatarProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+    /**
+     * Size of the avatar
+     * @default 'md'
+     */
+    size?: ExtendedComponentSize;
+    /**
+     * Visual variant of the avatar
+     * @default 'circular'
+     */
+    variant?: 'circular' | 'rounded' | 'square';
+    /**
+     * Fallback content when image fails to load
+     * Can be an icon, text, or any ReactNode
+     */
+    fallback?: React.ReactNode;
+    /**
+     * Initials to display when no image is available
+     * Takes precedence over fallback if provided
+     */
+    initials?: string;
+    /**
+     * Status indicator
+     */
+    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'processing';
+}
+/**
+ * Avatar - User profile picture or placeholder with initials/fallback
+ *
+ * @example
+ * ```tsx
+ * <Avatar src="https://example.com/avatar.jpg" alt="John Doe" size="md" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Avatar initials="JD" status="success" variant="circular" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Avatar fallback={<Icon name="user" />} variant="rounded" size="lg" />
+ * ```
+ */
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Props for the Badge component
+ */
+export interface BadgeProps extends BaseComponentProps {
+    /**
+     * Visual variant of the component
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    /**
+     * Size of the component
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the component is disabled
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Badge - Small status or count indicator for displaying numerical information or brief status text
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="primary" size="md">
+ *   5
+ * </Badge>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="danger" size="sm">
+ *   New
+ * </Badge>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">
+ *   Active
+ * </Badge>
+ * ```
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export default Badge;

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

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

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

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Props for the Chip component
+ */
+export interface ChipProps extends BaseComponentProps {
+    /**
+     * Visual variant of the component
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    /**
+     * Size of the component
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the component is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when the remove button is clicked
+     */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Custom class name for the remove button
+     */
+    removeButtonClassName?: string;
+    /**
+     * ARIA label for the remove button
+     * @default 'Remove'
+     */
+    removeButtonAriaLabel?: string;
+}
+/**
+ * Chip - Interactive tag-like component with optional remove functionality
+ *
+ * @example
+ * ```tsx
+ * <Chip variant="primary" size="md">
+ *   Tag Name
+ * </Chip>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Chip variant="danger" size="sm" onRemove={() => console.log('removed')}>
+ *   Removable
+ * </Chip>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Chip variant="success">
+ *   Active
+ * </Chip>
+ * ```
+ */
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+export default Chip;

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

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

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

@@ -0,0 +1,65 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Props for the CircularProgress component
+ */
+export interface CircularProgressProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Visual variant of the component
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    /**
+     * Size of the component
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Current progress value (0-100)
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Whether to show the value label in the center
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Custom label to display in the center
+     */
+    label?: string;
+    /**
+     * Stroke width of the circle
+     * @default 4
+     */
+    strokeWidth?: number;
+    /**
+     * Custom format function for the value display
+     */
+    formatValue?: (value: number, max: number) => string;
+}
+/**
+ * CircularProgress - Circular progress indicator for showing task completion or loading states
+ *
+ * @example
+ * ```tsx
+ * <CircularProgress variant="primary" value={75} showValue />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CircularProgress variant="success" value={90} label="Complete" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CircularProgress variant="warning" value={50} size="lg" />
+ * ```
+ */
+export declare const CircularProgress: React.ForwardRefExoticComponent<CircularProgressProps & React.RefAttributes<HTMLDivElement>>;
+export default CircularProgress;

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

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

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

@@ -0,0 +1,85 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Props for the KPI component
+ */
+export interface KPIProps extends BaseComponentProps {
+    /**
+     * Visual variant of the component
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    /**
+     * Size of the component
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Title of the KPI
+     */
+    title: string;
+    /**
+     * The main metric value
+     */
+    value: string | number;
+    /**
+     * Optional subtitle or category
+     */
+    subtitle?: string;
+    /**
+     * Optional description text
+     */
+    description?: string;
+    /**
+     * Optional change indicator (e.g., "+12%", "-5%")
+     */
+    change?: string;
+    /**
+     * Direction of change
+     */
+    changeType?: 'increase' | 'decrease' | 'neutral';
+    /**
+     * Optional icon component
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional trend data or chart
+     */
+    trend?: React.ReactNode;
+    /**
+     * Optional footer content
+     */
+    footer?: React.ReactNode;
+}
+/**
+ * KPI - Key Performance Indicator card for displaying important metrics with context
+ *
+ * @example
+ * ```tsx
+ * <KPI title="Total Revenue" value="$54,239" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <KPI
+ *   title="Active Users"
+ *   value="1,428"
+ *   change="+12%"
+ *   changeType="increase"
+ *   description="Monthly active users"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <KPI
+ *   title="Conversion Rate"
+ *   value="3.24%"
+ *   subtitle="E-commerce"
+ *   variant="success"
+ *   trend={<TrendChart data={data} />}
+ * />
+ * ```
+ */
+export declare const KPI: React.ForwardRefExoticComponent<KPIProps & React.RefAttributes<HTMLDivElement>>;
+export default KPI;

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

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

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

@@ -0,0 +1,83 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Props for the Pill component
+ */
+export interface PillProps extends BaseComponentProps {
+    /**
+     * Visual variant of the component
+     * @default 'filled'
+     */
+    variant?: 'filled' | 'outlined' | 'subtle';
+    /**
+     * Color theme of the component
+     * @default 'primary'
+     */
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    /**
+     * Size of the component
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the component is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Click handler - makes the pill clickable (renders as button)
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Remove handler - adds a remove button
+     */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Icon to display at the start of the pill
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Icon to display at the end of the pill
+     */
+    endIcon?: React.ReactNode;
+}
+/**
+ * Pill - Fully rounded tag-like element for status, categories, or filter pills
+ *
+ * @example
+ * ```tsx
+ * <Pill color="primary" variant="filled">
+ *   Active
+ * </Pill>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Pill color="success" variant="outlined" size="sm">
+ *   Available
+ * </Pill>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Pill
+ *   color="info"
+ *   onClick={() => console.log('clicked')}
+ *   startIcon={<Icon name="tag" />}
+ * >
+ *   Clickable
+ * </Pill>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Pill
+ *   color="danger"
+ *   onRemove={() => console.log('removed')}
+ * >
+ *   Removable
+ * </Pill>
+ * ```
+ */
+export declare const Pill: React.ForwardRefExoticComponent<PillProps & React.RefAttributes<HTMLElement>>;
+export default Pill;

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

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

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

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Props for the ProgressBar component
+ */
+export interface ProgressBarProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Visual variant of the component
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    /**
+     * Size of the component
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Current progress value (0-100)
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Whether to show the value label
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Custom label to display
+     */
+    label?: string;
+    /**
+     * Whether to animate the progress
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * Whether to show striped pattern
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Custom format function for the value display
+     */
+    formatValue?: (value: number, max: number) => string;
+}
+/**
+ * ProgressBar - Linear progress indicator for showing task completion or loading states
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar variant="primary" value={50} showValue />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar variant="success" value={75} label="Uploading..." />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar variant="warning" value={30} size="lg" striped animated />
+ * ```
+ */
+export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+export default ProgressBar;

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

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

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

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Props for the Skeleton component
+ */
+export interface SkeletonProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Visual variant of the component
+     * @default 'primary'
+     */
+    variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
+    /**
+     * Width of the skeleton
+     * @default '100%'
+     */
+    width?: string | number;
+    /**
+     * Height of the skeleton
+     */
+    height?: string | number;
+    /**
+     * Whether to animate the skeleton
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * Number of lines for text variant
+     * @default 1
+     */
+    lines?: number;
+}
+/**
+ * Skeleton - Loading placeholder component for content that is loading
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="text" width="200px" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="circular" width={40} height={40} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="rectangular" width="100%" height="200px" />
+ * ```
+ */
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+export default Skeleton;

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

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

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

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Props for the StatusIndicator component
+ */
+export interface StatusIndicatorProps extends BaseComponentProps {
+    /**
+     * Status variant of the indicator
+     * @default 'neutral'
+     */
+    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'processing';
+    /**
+     * Size of the indicator
+     * @default 'md'
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Whether to show pulse animation
+     * @default false
+     */
+    pulse?: boolean;
+    /**
+     * Whether to display text alongside the indicator
+     * @default false
+     */
+    withText?: boolean;
+}
+/**
+ * StatusIndicator - Visual colored dot indicator for status with optional text and pulse animation
+ *
+ * @example
+ * ```tsx
+ * <StatusIndicator status="success" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <StatusIndicator status="error" pulse size="lg" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <StatusIndicator status="processing" pulse withText>
+ *   Processing
+ * </StatusIndicator>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <StatusIndicator status="warning" withText size="sm">
+ *   Warning
+ * </StatusIndicator>
+ * ```
+ */
+export declare const StatusIndicator: React.ForwardRefExoticComponent<StatusIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export default StatusIndicator;

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

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