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

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

@@ -0,0 +1,99 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types';
+export type PaginationVariant = 'default' | 'outlined' | 'minimal';
+export type PaginationShape = 'rounded' | 'circular' | 'square';
+export interface PaginationProps extends BaseComponentProps {
+    /**
+     * Total number of pages
+     */
+    totalPages: number;
+    /**
+     * Current page (1-indexed)
+     */
+    currentPage: number;
+    /**
+     * Callback when page changes
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * Number of page buttons to show on each side of current page
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Number of boundary pages to show at start and end
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * Show first/last page buttons
+     * @default true
+     */
+    showFirstLast?: boolean;
+    /**
+     * Show prev/next buttons
+     * @default true
+     */
+    showPrevNext?: boolean;
+    /**
+     * Size
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Visual variant
+     * @default 'default'
+     */
+    variant?: PaginationVariant;
+    /**
+     * Shape of page buttons
+     * @default 'rounded'
+     */
+    shape?: PaginationShape;
+    /**
+     * Whether to disable component
+     */
+    disabled?: boolean;
+    /**
+     * Custom labels
+     */
+    labels?: {
+        first?: string;
+        last?: string;
+        prev?: string;
+        next?: string;
+        page?: (page: number) => string;
+    };
+}
+/**
+ * Pagination - Page navigation for paginated content
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Pagination
+ *   totalPages={10}
+ *   currentPage={currentPage}
+ *   onPageChange={setCurrentPage}
+ * />
+ *
+ * // With custom sibling count
+ * <Pagination
+ *   totalPages={20}
+ *   currentPage={currentPage}
+ *   onPageChange={setCurrentPage}
+ *   siblingCount={2}
+ * />
+ *
+ * // Minimal style without first/last
+ * <Pagination
+ *   totalPages={10}
+ *   currentPage={currentPage}
+ *   onPageChange={setCurrentPage}
+ *   variant="minimal"
+ *   showFirstLast={false}
+ * />
+ * ```
+ */
+export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+export default Pagination;

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

@@ -0,0 +1,3 @@
+export { Pagination } from './Pagination';
+export type { PaginationProps, PaginationVariant, PaginationShape } from './Pagination';
+export { default } from './Pagination';

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

@@ -0,0 +1,89 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface SideNavProps extends BaseComponentProps {
+    /**
+     * Position of the sidebar
+     * @default 'left'
+     */
+    position?: 'left' | 'right';
+    /**
+     * Controlled collapsed state (icon-only mode)
+     */
+    collapsed?: boolean;
+    /**
+     * Default collapsed state
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Callback when collapse state changes
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Width when expanded (px)
+     * @default 240
+     */
+    expandedWidth?: number;
+    /**
+     * Width when collapsed (px)
+     * @default 64
+     */
+    collapsedWidth?: number;
+    /**
+     * Currently selected item value (controlled)
+     */
+    selectedValue?: string;
+    /**
+     * Default selected item value
+     */
+    defaultSelectedValue?: string;
+    /**
+     * Callback when selection changes
+     */
+    onSelect?: (value: string) => void;
+    /**
+     * Header content
+     */
+    header?: React.ReactNode;
+    /**
+     * Footer content
+     */
+    footer?: React.ReactNode;
+    /**
+     * Navigation items
+     */
+    children: React.ReactNode;
+}
+/**
+ * SideNav - Side navigation panel with icons, labels, and nesting support
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SideNav>
+ *   <SideNavItem value="home" icon="Home" label="Home" />
+ *   <SideNavItem value="settings" icon="Settings" label="Settings" />
+ * </SideNav>
+ *
+ * // With groups
+ * <SideNav selectedValue="profile" onSelect={handleSelect}>
+ *   <SideNavItem value="dashboard" icon="Home" label="Dashboard" />
+ *   <SideNavGroup groupId="settings" label="Settings" icon="Settings">
+ *     <SideNavItem value="profile" label="Profile" />
+ *     <SideNavItem value="security" label="Security" />
+ *   </SideNavGroup>
+ *   <SideNavDivider label="Other" />
+ *   <SideNavItem value="help" icon="HelpCircle" label="Help" />
+ * </SideNav>
+ *
+ * // With header and footer
+ * <SideNav
+ *   header={<Logo />}
+ *   footer={<UserProfile />}
+ * >
+ *   {navItems}
+ * </SideNav>
+ * ```
+ */
+export declare const SideNav: React.ForwardRefExoticComponent<SideNavProps & React.RefAttributes<HTMLElement>>;
+export default SideNav;

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