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

package/lib/components/navigation/SideNav/SideNavContext.d.ts

@@ -0,0 +1,43 @@
+export interface SideNavContextValue {
+    /**
+     * Unique ID for this SideNav instance
+     */
+    sideNavId: string;
+    /**
+     * Whether the sidebar is collapsed (icon-only mode)
+     */
+    collapsed: boolean;
+    /**
+     * Currently selected item value
+     */
+    selectedValue: string | null;
+    /**
+     * Select an item
+     */
+    onSelect: (value: string) => void;
+    /**
+     * Position of the sidebar
+     */
+    position: 'left' | 'right';
+    /**
+     * Set of expanded group IDs
+     */
+    expandedGroups: Set<string>;
+    /**
+     * Toggle a group's expanded state
+     */
+    toggleGroup: (groupId: string) => void;
+    /**
+     * Register a group as expanded by default
+     */
+    registerDefaultExpanded: (groupId: string) => void;
+}
+export declare const SideNavContext: import('react').Context<SideNavContextValue | null>;
+/**
+ * Hook to access SideNav context (returns null if outside SideNav)
+ */
+export declare function useSideNavContext(): SideNavContextValue | null;
+/**
+ * Hook to access SideNav context (throws if outside SideNav)
+ */
+export declare function useSideNavContextStrict(): SideNavContextValue;

package/lib/components/navigation/SideNav/SideNavDivider.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface SideNavDividerProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Optional label for the divider
+     */
+    label?: string;
+}
+/**
+ * SideNavDivider - Visual separator for SideNav
+ *
+ * @example
+ * ```tsx
+ * // Simple divider
+ * <SideNavDivider />
+ *
+ * // With label
+ * <SideNavDivider label="Settings" />
+ * ```
+ */
+export declare const SideNavDivider: React.ForwardRefExoticComponent<SideNavDividerProps & React.RefAttributes<HTMLDivElement>>;
+export default SideNavDivider;

package/lib/components/navigation/SideNav/SideNavGroup.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+import { IconName } from '../../display/Icon';
+export interface SideNavGroupProps extends BaseComponentProps {
+    /**
+     * Unique identifier for this group
+     */
+    groupId: string;
+    /**
+     * Group label
+     */
+    label: string;
+    /**
+     * Icon for the group header
+     */
+    icon?: React.ReactNode | IconName;
+    /**
+     * Controlled expanded state
+     */
+    expanded?: boolean;
+    /**
+     * Default expanded state
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Nested navigation items
+     */
+    children: React.ReactNode;
+}
+/**
+ * SideNavGroup - Grouped/nested navigation items
+ *
+ * @example
+ * ```tsx
+ * <SideNavGroup groupId="settings" label="Settings" icon="Settings">
+ *   <SideNavItem value="profile" label="Profile" />
+ *   <SideNavItem value="security" label="Security" />
+ *   <SideNavItem value="notifications" label="Notifications" />
+ * </SideNavGroup>
+ * ```
+ */
+export declare const SideNavGroup: React.ForwardRefExoticComponent<SideNavGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default SideNavGroup;

package/lib/components/navigation/SideNav/SideNavItem.d.ts

@@ -0,0 +1,71 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+import { IconName } from '../../display/Icon';
+export interface SideNavItemProps extends BaseComponentProps {
+    /**
+     * Unique identifier for this item
+     */
+    value: string;
+    /**
+     * Icon to display
+     */
+    icon?: React.ReactNode | IconName;
+    /**
+     * Label text
+     */
+    label: string;
+    /**
+     * Tooltip text (shown when collapsed, defaults to label)
+     */
+    tooltip?: string;
+    /**
+     * Whether item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Link href (renders as anchor tag)
+     */
+    href?: string;
+    /**
+     * Click handler
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Badge content
+     */
+    badge?: React.ReactNode;
+    /**
+     * End adornment (icon, badge, etc.)
+     */
+    endAdornment?: React.ReactNode;
+    /**
+     * Nesting level (set automatically by SideNavGroup)
+     */
+    level?: number;
+}
+/**
+ * SideNavItem - Individual navigation item for SideNav
+ *
+ * @example
+ * ```tsx
+ * <SideNavItem value="home" icon="Home" label="Home" />
+ *
+ * // With badge
+ * <SideNavItem
+ *   value="notifications"
+ *   icon="Bell"
+ *   label="Notifications"
+ *   badge={<Badge>5</Badge>}
+ * />
+ *
+ * // As link
+ * <SideNavItem
+ *   value="settings"
+ *   icon="Settings"
+ *   label="Settings"
+ *   href="/settings"
+ * />
+ * ```
+ */
+export declare const SideNavItem: React.ForwardRefExoticComponent<SideNavItemProps & React.RefAttributes<HTMLElement>>;
+export default SideNavItem;

package/lib/components/navigation/SideNav/index.d.ts

@@ -0,0 +1,11 @@
+export { SideNav } from './SideNav';
+export type { SideNavProps } from './SideNav';
+export { default } from './SideNav';
+export { SideNavItem } from './SideNavItem';
+export type { SideNavItemProps } from './SideNavItem';
+export { SideNavGroup } from './SideNavGroup';
+export type { SideNavGroupProps } from './SideNavGroup';
+export { SideNavDivider } from './SideNavDivider';
+export type { SideNavDividerProps } from './SideNavDivider';
+export { SideNavContext, useSideNavContext, useSideNavContextStrict } from './SideNavContext';
+export type { SideNavContextValue } from './SideNavContext';

package/lib/components/navigation/Stepper/Step.d.ts

@@ -0,0 +1,57 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+import { IconName } from '../../display/Icon';
+export interface StepProps extends BaseComponentProps {
+    /**
+     * Step title
+     */
+    title: string;
+    /**
+     * Step description
+     */
+    description?: string;
+    /**
+     * Custom icon (for 'icon' variant)
+     */
+    icon?: React.ReactNode | IconName;
+    /**
+     * Whether step is optional
+     */
+    optional?: boolean;
+    /**
+     * Whether step has error
+     */
+    error?: boolean;
+    /**
+     * Error message
+     */
+    errorMessage?: string;
+    /**
+     * Step content (for vertical orientation)
+     */
+    children?: React.ReactNode;
+    /**
+     * Step index (injected by Stepper parent)
+     * @internal
+     */
+    _stepIndex?: number;
+}
+/**
+ * Step - Individual step in a Stepper
+ *
+ * @example
+ * ```tsx
+ * <Step title="Account" description="Create your account" />
+ *
+ * // With custom icon
+ * <Step title="Shipping" icon="Truck" />
+ *
+ * // Optional step
+ * <Step title="Extras" optional />
+ *
+ * // With error
+ * <Step title="Payment" error errorMessage="Please fix payment details" />
+ * ```
+ */
+export declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLDivElement>>;
+export default Step;

package/lib/components/navigation/Stepper/Stepper.d.ts

@@ -0,0 +1,80 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types';
+import { StepperVariant, StepperOrientation } from './StepperContext';
+export interface StepperProps extends BaseComponentProps {
+    /**
+     * Current active step (0-indexed)
+     */
+    currentStep: number;
+    /**
+     * Callback when step is clicked
+     */
+    onStepChange?: (step: number) => void;
+    /**
+     * Orientation
+     * @default 'horizontal'
+     */
+    orientation?: StepperOrientation;
+    /**
+     * Visual variant
+     * @default 'numbered'
+     */
+    variant?: StepperVariant;
+    /**
+     * Size
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Allow clicking on steps to navigate
+     * @default false
+     */
+    allowStepClick?: boolean;
+    /**
+     * Only allow clicking previous steps
+     * @default true
+     */
+    onlyPreviousClickable?: boolean;
+    /**
+     * Completed steps (for non-linear steppers)
+     */
+    completedSteps?: number[];
+    /**
+     * Step components
+     */
+    children: React.ReactNode;
+}
+/**
+ * Stepper - Wizard-style step navigation
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Stepper currentStep={currentStep} onStepChange={setCurrentStep}>
+ *   <Step title="Account" description="Create your account" />
+ *   <Step title="Profile" description="Set up your profile" />
+ *   <Step title="Review" description="Review and confirm" />
+ * </Stepper>
+ *
+ * // With clickable steps
+ * <Stepper
+ *   currentStep={currentStep}
+ *   onStepChange={setCurrentStep}
+ *   allowStepClick
+ *   onlyPreviousClickable
+ * >
+ *   <Step title="Step 1" />
+ *   <Step title="Step 2" />
+ *   <Step title="Step 3" />
+ * </Stepper>
+ *
+ * // Vertical orientation
+ * <Stepper currentStep={currentStep} orientation="vertical">
+ *   <Step title="Step 1">Step 1 content</Step>
+ *   <Step title="Step 2">Step 2 content</Step>
+ *   <Step title="Step 3">Step 3 content</Step>
+ * </Stepper>
+ * ```
+ */
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export default Stepper;

package/lib/components/navigation/Stepper/StepperContext.d.ts

@@ -0,0 +1,58 @@
+import { ComponentSize } from '../../../types';
+export type StepperVariant = 'numbered' | 'dot' | 'icon';
+export type StepperOrientation = 'horizontal' | 'vertical';
+export interface StepperContextValue {
+    /**
+     * Unique ID for this stepper instance
+     */
+    stepperId: string;
+    /**
+     * Current active step (0-indexed)
+     */
+    currentStep: number;
+    /**
+     * Total number of steps
+     */
+    totalSteps: number;
+    /**
+     * Orientation
+     */
+    orientation: StepperOrientation;
+    /**
+     * Visual variant
+     */
+    variant: StepperVariant;
+    /**
+     * Size
+     */
+    size: ComponentSize;
+    /**
+     * Set of completed step indices
+     */
+    completedSteps: Set<number>;
+    /**
+     * Click handler for steps
+     */
+    onStepClick?: (step: number) => void;
+    /**
+     * Whether step clicking is allowed
+     */
+    allowStepClick: boolean;
+    /**
+     * Only allow clicking previous steps
+     */
+    onlyPreviousClickable: boolean;
+    /**
+     * Register a step and get its index
+     */
+    registerStep: () => number;
+}
+export declare const StepperContext: import('react').Context<StepperContextValue | null>;
+/**
+ * Hook to access Stepper context (returns null if outside Stepper)
+ */
+export declare function useStepperContext(): StepperContextValue | null;
+/**
+ * Hook to access Stepper context (throws if outside Stepper)
+ */
+export declare function useStepperContextStrict(): StepperContextValue;

package/lib/components/navigation/Stepper/index.d.ts

@@ -0,0 +1,7 @@
+export { Stepper } from './Stepper';
+export type { StepperProps } from './Stepper';
+export { default } from './Stepper';
+export { Step } from './Step';
+export type { StepProps } from './Step';
+export { StepperContext, useStepperContext, useStepperContextStrict } from './StepperContext';
+export type { StepperContextValue, StepperVariant, StepperOrientation } from './StepperContext';

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

@@ -0,0 +1,16 @@
+export { CollapsibleSidebar } from './CollapsibleSidebar';
+export type { CollapsibleSidebarProps } from './CollapsibleSidebar';
+export { NavLink } from './NavLink';
+export type { NavLinkProps, NavLinkVariant } from './NavLink';
+export { Navbar, NavbarBrand, NavbarNav, NavbarActions, NavbarToggle, NavbarCollapse, NavbarContext, useNavbarContext, useNavbarContextStrict, } from './Navbar';
+export type { NavbarProps, NavbarBrandProps, NavbarNavProps, NavbarActionsProps, NavbarToggleProps, NavbarCollapseProps, NavbarContextValue, NavbarVariant, NavbarPosition, } from './Navbar';
+export { SideNav, SideNavItem, SideNavGroup, SideNavDivider, SideNavContext, useSideNavContext, useSideNavContextStrict, } from './SideNav';
+export type { SideNavProps, SideNavItemProps, SideNavGroupProps, SideNavDividerProps, SideNavContextValue, } from './SideNav';
+export { Breadcrumbs, BreadcrumbItem, BreadcrumbSeparator, useBreadcrumbsFromPath, } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItemProps, BreadcrumbItemConfig, BreadcrumbSeparatorProps, UseBreadcrumbsFromPathOptions, } from './Breadcrumbs';
+export { Pagination } from './Pagination';
+export type { PaginationProps, PaginationVariant, PaginationShape } from './Pagination';
+export { Stepper, Step, StepperContext, useStepperContext, useStepperContextStrict, } from './Stepper';
+export type { StepperProps, StepProps, StepperContextValue, StepperVariant, StepperOrientation, } from './Stepper';
+export { BottomNavigation, BottomNavigationItem, BottomNavigationContext, useBottomNavigationContext, useBottomNavigationContextStrict, } from './BottomNavigation';
+export type { BottomNavigationProps, BottomNavigationItemProps, BottomNavigationContextValue, } from './BottomNavigation';

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

@@ -0,0 +1,102 @@
+import { default as React, ReactNode } from 'react';
+import { DialogProps, DialogSize } from '../Dialog';
+import { IconName } from '../../display/Icon/icons';
+import { AlertVariant } from './AlertPresets';
+/**
+ * Alert props - extends Dialog with preset configurations
+ */
+export interface AlertProps extends Omit<DialogProps, 'actions' | 'renderHeader' | 'renderFooter'> {
+    /**
+     * Alert variant (determines icon, colors, default buttons)
+     * @default 'info'
+     */
+    variant?: AlertVariant;
+    /**
+     * Alert icon (overrides variant default)
+     */
+    icon?: IconName | ReactNode;
+    /**
+     * Hide the icon
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * Description/message content
+     */
+    description?: ReactNode;
+    /**
+     * Confirm button text
+     * @default 'OK' (or 'Confirm' for confirm variant)
+     */
+    confirmText?: string;
+    /**
+     * Cancel button text (only shown for confirm variant or when explicitly provided)
+     */
+    cancelText?: string;
+    /**
+     * Callback when confirm is clicked
+     */
+    onConfirm?: () => void | Promise<void>;
+    /**
+     * Callback when cancel is clicked
+     */
+    onCancel?: () => void;
+    /**
+     * Whether confirm button is loading
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether confirm button is disabled
+     * @default false
+     */
+    confirmDisabled?: boolean;
+    /**
+     * Confirm button variant
+     */
+    confirmVariant?: 'primary' | 'danger' | 'success' | 'warning';
+    /**
+     * Additional actions to render
+     */
+    extraActions?: ReactNode;
+    /**
+     * Override default size for alerts
+     * @default 'sm'
+     */
+    size?: DialogSize;
+    /**
+     * Show cancel button
+     * @default true for confirm variant, false for others
+     */
+    showCancel?: boolean;
+}
+/**
+ * Alert component
+ * A dialog variant with preset configurations for common alert types
+ *
+ * @example
+ * ```tsx
+ * // Simple info alert
+ * <Alert
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   variant="info"
+ *   title="Information"
+ *   description="This is an informational message."
+ * />
+ *
+ * // Confirmation alert
+ * <Alert
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   variant="confirm"
+ *   title="Delete Item"
+ *   description="Are you sure you want to delete this item?"
+ *   onConfirm={handleDelete}
+ *   onCancel={() => setIsOpen(false)}
+ *   confirmVariant="danger"
+ * />
+ * ```
+ */
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export default Alert;

package/lib/components/overlays/Alert/AlertContext.d.ts

@@ -0,0 +1,94 @@
+import { AlertProps } from './Alert';
+/**
+ * Alert queue item representing a pending alert
+ */
+export interface AlertQueueItem {
+    /**
+     * Unique alert ID
+     */
+    id: string;
+    /**
+     * Alert props (excluding isOpen which is managed by context)
+     */
+    props: Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel'>;
+    /**
+     * Resolve function for promise-based alert
+     * Resolves with true if confirmed, false if cancelled
+     */
+    resolve: (confirmed: boolean) => void;
+}
+/**
+ * Alert context value
+ */
+export interface AlertContextValue {
+    /**
+     * Current alert queue
+     */
+    alerts: AlertQueueItem[];
+    /**
+     * Show an alert and wait for user response
+     * @returns Promise<boolean> - true if confirmed, false if cancelled
+     */
+    alert: (props: Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel'>) => Promise<boolean>;
+    /**
+     * Show a confirmation alert
+     * @param title - Alert title
+     * @param description - Alert description
+     * @param options - Additional alert options
+     * @returns Promise<boolean> - true if confirmed, false if cancelled
+     */
+    confirm: (title: string, description?: string, options?: Partial<Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel' | 'title' | 'description'>>) => Promise<boolean>;
+    /**
+     * Show an error alert
+     * @param title - Alert title
+     * @param description - Alert description
+     * @param options - Additional alert options
+     * @returns Promise<boolean> - true when dismissed
+     */
+    error: (title: string, description?: string, options?: Partial<Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel' | 'title' | 'description'>>) => Promise<boolean>;
+    /**
+     * Show a success alert
+     * @param title - Alert title
+     * @param description - Alert description
+     * @param options - Additional alert options
+     * @returns Promise<boolean> - true when dismissed
+     */
+    success: (title: string, description?: string, options?: Partial<Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel' | 'title' | 'description'>>) => Promise<boolean>;
+    /**
+     * Show a warning alert
+     * @param title - Alert title
+     * @param description - Alert description
+     * @param options - Additional alert options
+     * @returns Promise<boolean> - true when dismissed
+     */
+    warning: (title: string, description?: string, options?: Partial<Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel' | 'title' | 'description'>>) => Promise<boolean>;
+    /**
+     * Show an info alert
+     * @param title - Alert title
+     * @param description - Alert description
+     * @param options - Additional alert options
+     * @returns Promise<boolean> - true when dismissed
+     */
+    info: (title: string, description?: string, options?: Partial<Omit<AlertProps, 'isOpen' | 'onConfirm' | 'onCancel' | 'title' | 'description'>>) => Promise<boolean>;
+    /**
+     * Dismiss current alert (resolves with false)
+     */
+    dismiss: () => void;
+    /**
+     * Dismiss all alerts
+     */
+    dismissAll: () => void;
+}
+/**
+ * Alert context
+ */
+export declare const AlertContext: import('react').Context<AlertContextValue | null>;
+/**
+ * Hook to access alert context (returns null if not in provider)
+ */
+export declare function useAlertContext(): AlertContextValue | null;
+/**
+ * Hook to access alert context (throws if not in provider)
+ * @throws Error if used outside of AlertProvider
+ */
+export declare function useAlertContextStrict(): AlertContextValue;

package/lib/components/overlays/Alert/AlertPresets.d.ts

@@ -0,0 +1,42 @@
+import { IconName } from '../../display/Icon/icons';
+/**
+ * Alert variant types
+ */
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'confirm';
+/**
+ * Alert preset configuration
+ */
+export interface AlertPreset {
+    /**
+     * Variant identifier
+     */
+    variant: AlertVariant;
+    /**
+     * Default icon for the variant
+     */
+    icon: IconName;
+    /**
+     * Default title for the variant
+     */
+    title: string;
+    /**
+     * Default confirm button text
+     */
+    confirmText: string;
+    /**
+     * Default cancel button text (only for confirm variant)
+     */
+    cancelText?: string;
+    /**
+     * Confirm button variant
+     */
+    confirmVariant: 'primary' | 'danger' | 'success' | 'warning';
+}
+/**
+ * Preset configurations for each alert variant
+ */
+export declare const ALERT_PRESETS: Record<AlertVariant, AlertPreset>;
+/**
+ * Get preset configuration for a variant
+ */
+export declare function getAlertPreset(variant: AlertVariant): AlertPreset;