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

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

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

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Props for the Tag component
+ */
+export interface TagProps extends BaseComponentProps {
+    /**
+     * Visual variant of the tag
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Size of the tag
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the tag is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the tag can be removed
+     * @default false
+     */
+    removable?: boolean;
+    /**
+     * Callback when remove button is clicked
+     */
+    onRemove?: () => void;
+    /**
+     * Callback when tag is clicked (makes tag interactive)
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+/**
+ * Tag - Standalone tag element for labeling and categorization
+ *
+ * @example
+ * ```tsx
+ * <Tag variant="primary" size="md">
+ *   React
+ * </Tag>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Tag variant="secondary" size="sm" removable onRemove={() => console.log('removed')}>
+ *   Removable
+ * </Tag>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Tag variant="tertiary" onClick={() => console.log('clicked')}>
+ *   Clickable
+ * </Tag>
+ * ```
+ */
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;

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

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

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

@@ -1 +1,11 @@
 export * from './Icon';
+export * from './Badge';
+export * from './Chip';
+export * from './Pill';
+export * from './Tag';
+export * from './Avatar';
+export * from './StatusIndicator';
+export * from './ProgressBar';
+export * from './CircularProgress';
+export * from './KPI';
+export * from './Skeleton';

package/lib/components/index.d.ts

@@ -2,6 +2,26 @@ export { Button } from './buttons/Button';
 export type { ButtonProps } from './buttons/Button';
 export { Icon } from './display/Icon';
 export type { IconProps } from './display/Icon';
+export { Badge } from './display/Badge';
+export type { BadgeProps } from './display/Badge';
+export { Chip } from './display/Chip';
+export type { ChipProps } from './display/Chip';
+export { Pill } from './display/Pill';
+export type { PillProps } from './display/Pill';
+export { Tag } from './display/Tag';
+export type { TagProps } from './display/Tag';
+export { Avatar } from './display/Avatar';
+export type { AvatarProps } from './display/Avatar';
+export { StatusIndicator } from './display/StatusIndicator';
+export type { StatusIndicatorProps } from './display/StatusIndicator';
+export { ProgressBar } from './display/ProgressBar';
+export type { ProgressBarProps } from './display/ProgressBar';
+export { CircularProgress } from './display/CircularProgress';
+export type { CircularProgressProps } from './display/CircularProgress';
+export { KPI } from './display/KPI';
+export type { KPIProps } from './display/KPI';
+export { Skeleton } from './display/Skeleton';
+export type { SkeletonProps } from './display/Skeleton';
 export { Portal } from './overlays/Portal';
 export type { PortalProps } from './overlays/Portal';
 export { Popover } from './overlays/Popover';
@@ -13,7 +33,7 @@ export type { MenuProps, MenuListProps, MenuItemProps, MenuDividerProps, MenuGro
 export { Dropdown } from './overlays/Dropdown';
 export type { DropdownProps } from './overlays/Dropdown';
 export { Input } from './inputs/Input';
-export type { InputProps, ValidationResult, FormatMask, ValidationTiming, InputType } from './inputs/Input';
+export type { InputProps, ValidationResult, FormatMask, ValidationTiming, InputType, } from './inputs/Input';
 export { Autocomplete } from './inputs/Autocomplete';
 export type { AutocompleteProps, AutocompleteOption } from './inputs/Autocomplete';
 export { Toggle } from './inputs/Toggle';

package/lib/components/inputs/Autocomplete/Autocomplete.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 import { ComponentVariant, ComponentSize, BaseComponentProps } from '../../../types';
 /**
  * Autocomplete option

package/lib/components/inputs/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ComponentSize, ComponentVariant, InputBaseProps } from '../../../types';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 export interface CheckboxProps extends Omit<InputBaseProps, 'value' | 'onChange' | 'placeholder'> {
     /**
      * Checkbox variant style

package/lib/components/inputs/DatePicker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { BaseComponentProps } from '../../../types/component.types';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 export interface DatePickerProps extends Omit<BaseComponentProps, 'children'> {
     /**
      * Controlled date value

package/lib/components/inputs/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { InputBaseProps } from '../../../types';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 /**
  * Validation timing options
  */

package/lib/components/inputs/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
     /**
      * The value of this radio button

package/lib/components/inputs/Rating/Rating.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ComponentSize } from '../../../types';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 export interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
     size?: ComponentSize;
     value?: number;

package/lib/components/inputs/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 export interface SelectOption {
     /**
      * Option value

package/lib/components/overlays/Dropdown/Dropdown.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { MenuProps } from '../Menu';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 import { ComponentVariant, ComponentSize } from '../../../types';
 /**
  * Dropdown item definition

package/lib/components/overlays/Menu/MenuItem.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { BaseComponentProps } from '../../../types';
-import { IconName } from '../../../assets/icons';
+import { IconName } from '../../display/Icon/icons';
 /**
  * MenuItem component props
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-tech-team/react-components",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "React TypeScript component library",
   "main": "./index.js",
   "types": "./index.d.ts",

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

@@ -1,105 +0,0 @@
-import { default as Calendar } from './calendar.svg?react';
-import { default as ChevronDown } from './chevron-down.svg?react';
-import { default as ChevronUp } from './chevron-up.svg?react';
-import { default as ChevronLeft } from './chevron-left.svg?react';
-import { default as ChevronRight } from './chevron-right.svg?react';
-import { default as Close } from './close.svg?react';
-import { default as Check } from './check.svg?react';
-import { default as Minus } from './minus.svg?react';
-import { default as Plus } from './plus.svg?react';
-import { default as Info } from './info.svg?react';
-import { default as Help } from './help.svg?react';
-import { default as Warning } from './warning.svg?react';
-import { default as Error } from './error.svg?react';
-import { default as Eye } from './eye.svg?react';
-import { default as EyeOff } from './eye-off.svg?react';
-import { default as Edit } from './edit.svg?react';
-import { default as Copy } from './copy.svg?react';
-import { default as Delete } from './delete.svg?react';
-import { default as Settings } from './settings.svg?react';
-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';
-/**
- * Icon registry mapping icon names to SVG components
- */
-export declare const iconRegistry: {
-    readonly calendar: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly 'chevron-down': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly 'chevron-up': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly 'chevron-left': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly 'chevron-right': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly close: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly check: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly minus: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly plus: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly info: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly help: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly warning: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly error: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly eye: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly 'eye-off': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly edit: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly copy: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly delete: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly settings: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly profile: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly preferences: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly account: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-    readonly logout: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
-        title?: string;
-    }>;
-};
-/**
- * Available icon names
- */
-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, };