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

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

@@ -0,0 +1,113 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+/**
+ * Props for the CollapsibleSidebar component
+ */
+export interface CollapsibleSidebarProps extends BaseComponentProps {
+    /**
+     * Controlled collapsed state
+     */
+    collapsed?: boolean;
+    /**
+     * Default collapsed state (uncontrolled)
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Width when expanded (px)
+     * @default 240
+     */
+    expandedWidth?: number;
+    /**
+     * Width when collapsed (px)
+     * @default 64
+     */
+    collapsedWidth?: number;
+    /**
+     * Auto-collapse below this container width (px)
+     * Uses parent container width, not viewport
+     */
+    collapseBreakpoint?: number;
+    /**
+     * Auto-hide below this container width (px)
+     * Uses parent container width, not viewport
+     */
+    hideBreakpoint?: number;
+    /**
+     * Position of the sidebar
+     * @default 'left'
+     */
+    position?: 'left' | 'right';
+    /**
+     * Callback when collapsed state changes
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Callback when hidden state changes (due to hideBreakpoint)
+     */
+    onHiddenChange?: (hidden: boolean) => void;
+    /**
+     * Animation duration (ms)
+     * @default 250
+     */
+    animationDuration?: number;
+    /**
+     * Animation easing
+     * @default 'ease-in-out'
+     */
+    animationEasing?: string;
+    /**
+     * Header content (always visible, above scrollable content)
+     */
+    header?: React.ReactNode;
+    /**
+     * Footer content (always visible, below scrollable content)
+     */
+    footer?: React.ReactNode;
+    /**
+     * Main content of the sidebar
+     */
+    children: React.ReactNode;
+}
+/**
+ * CollapsibleSidebar - A sidebar that collapses based on container width or user interaction
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <CollapsibleSidebar
+ *   header={<Logo />}
+ *   footer={<UserProfile />}
+ * >
+ *   <NavItem icon={<HomeIcon />}>Home</NavItem>
+ *   <NavItem icon={<SettingsIcon />}>Settings</NavItem>
+ * </CollapsibleSidebar>
+ * ```
+ *
+ * @example
+ * Controlled collapsed state:
+ * ```tsx
+ * const [collapsed, setCollapsed] = useState(false);
+ *
+ * <CollapsibleSidebar
+ *   collapsed={collapsed}
+ *   onCollapsedChange={setCollapsed}
+ *   collapseBreakpoint={768}
+ * >
+ *   {navItems}
+ * </CollapsibleSidebar>
+ * ```
+ *
+ * @example
+ * Auto-hide on small screens:
+ * ```tsx
+ * <CollapsibleSidebar
+ *   collapseBreakpoint={1024}
+ *   hideBreakpoint={768}
+ * >
+ *   {navItems}
+ * </CollapsibleSidebar>
+ * ```
+ */
+export declare const CollapsibleSidebar: React.ForwardRefExoticComponent<CollapsibleSidebarProps & React.RefAttributes<HTMLDivElement>>;
+export default CollapsibleSidebar;

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

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

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

@@ -0,0 +1,74 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types';
+import { IconName } from '../../display/Icon';
+export type NavLinkVariant = 'default' | 'underline' | 'pill' | 'ghost';
+export interface NavLinkProps extends BaseComponentProps {
+    /**
+     * Link destination
+     */
+    href: string;
+    /**
+     * Whether link is active
+     */
+    active?: boolean;
+    /**
+     * Icon to display
+     */
+    icon?: React.ReactNode | IconName;
+    /**
+     * Icon position
+     * @default 'start'
+     */
+    iconPosition?: 'start' | 'end';
+    /**
+     * Visual variant
+     * @default 'default'
+     */
+    variant?: NavLinkVariant;
+    /**
+     * Size
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Whether link is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Link content
+     */
+    children: React.ReactNode;
+    /**
+     * Target attribute
+     */
+    target?: string;
+    /**
+     * Rel attribute (defaults to 'noopener noreferrer' when target='_blank')
+     */
+    rel?: string;
+}
+/**
+ * NavLink - Reusable navigation link with active state support
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <NavLink href="/home">Home</NavLink>
+ *
+ * // With icon
+ * <NavLink href="/settings" icon="settings">Settings</NavLink>
+ *
+ * // Active state
+ * <NavLink href="/dashboard" active>Dashboard</NavLink>
+ *
+ * // Different variants
+ * <NavLink href="/about" variant="underline">About</NavLink>
+ * <NavLink href="/profile" variant="pill" active>Profile</NavLink>
+ * ```
+ */
+export declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export default NavLink;

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

@@ -0,0 +1,3 @@
+export { NavLink } from './NavLink';
+export type { NavLinkProps, NavLinkVariant } from './NavLink';
+export { default } from './NavLink';

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

@@ -0,0 +1,81 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types';
+import { NavbarVariant, NavbarPosition } from './NavbarContext';
+export interface NavbarProps extends BaseComponentProps {
+    /**
+     * Visual variant
+     * @default 'solid'
+     */
+    variant?: NavbarVariant;
+    /**
+     * Position behavior
+     * @default 'sticky'
+     */
+    position?: NavbarPosition;
+    /**
+     * Size (height)
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Alignment of nav items
+     * @default 'left'
+     */
+    alignment?: 'left' | 'center';
+    /**
+     * Controlled expanded state (mobile menu)
+     */
+    expanded?: boolean;
+    /**
+     * Default expanded state
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Callback when mobile menu toggles
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Breakpoint for mobile collapse (px)
+     * @default 768
+     */
+    collapseBreakpoint?: number;
+    /**
+     * Children (NavbarBrand, NavbarNav, NavbarActions)
+     */
+    children: React.ReactNode;
+}
+/**
+ * Navbar - Top navigation bar for branding and primary navigation
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Navbar>
+ *   <NavbarBrand href="/">
+ *     <Logo />
+ *     <span>My App</span>
+ *   </NavbarBrand>
+ *   <NavbarNav>
+ *     <NavLink href="/home">Home</NavLink>
+ *     <NavLink href="/about">About</NavLink>
+ *   </NavbarNav>
+ *   <NavbarActions>
+ *     <Button>Sign In</Button>
+ *   </NavbarActions>
+ * </Navbar>
+ *
+ * // With mobile menu
+ * <Navbar>
+ *   <NavbarBrand href="/">Logo</NavbarBrand>
+ *   <NavbarToggle />
+ *   <NavbarCollapse>
+ *     <NavbarNav>
+ *       <NavLink href="/home">Home</NavLink>
+ *     </NavbarNav>
+ *   </NavbarCollapse>
+ * </Navbar>
+ * ```
+ */
+export declare const Navbar: React.ForwardRefExoticComponent<NavbarProps & React.RefAttributes<HTMLElement>>;
+export default Navbar;

package/lib/components/navigation/Navbar/NavbarActions.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface NavbarActionsProps extends BaseComponentProps {
+    /**
+     * Action elements (buttons, menu, etc.)
+     */
+    children: React.ReactNode;
+}
+/**
+ * NavbarActions - Actions slot for buttons, user menu, etc.
+ *
+ * @example
+ * ```tsx
+ * <NavbarActions>
+ *   <Button variant="ghost">Sign In</Button>
+ *   <Button variant="primary">Sign Up</Button>
+ * </NavbarActions>
+ * ```
+ */
+export declare const NavbarActions: React.ForwardRefExoticComponent<NavbarActionsProps & React.RefAttributes<HTMLDivElement>>;
+export default NavbarActions;

package/lib/components/navigation/Navbar/NavbarBrand.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface NavbarBrandProps extends BaseComponentProps {
+    /**
+     * Brand content (logo, text, etc.)
+     */
+    children: React.ReactNode;
+    /**
+     * Link href
+     */
+    href?: string;
+    /**
+     * Click handler
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>) => void;
+}
+/**
+ * NavbarBrand - Logo/branding slot for the Navbar
+ *
+ * @example
+ * ```tsx
+ * <NavbarBrand href="/">
+ *   <Logo />
+ *   <span>My App</span>
+ * </NavbarBrand>
+ * ```
+ */
+export declare const NavbarBrand: React.ForwardRefExoticComponent<NavbarBrandProps & React.RefAttributes<HTMLDivElement>>;
+export default NavbarBrand;

package/lib/components/navigation/Navbar/NavbarCollapse.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface NavbarCollapseProps extends BaseComponentProps {
+    /**
+     * Content to show in collapsed mobile menu
+     */
+    children: React.ReactNode;
+}
+/**
+ * NavbarCollapse - Collapsible container for mobile menu content
+ *
+ * @example
+ * ```tsx
+ * <NavbarCollapse>
+ *   <NavbarNav>
+ *     <NavLink href="/home">Home</NavLink>
+ *     <NavLink href="/about">About</NavLink>
+ *   </NavbarNav>
+ *   <NavbarActions>
+ *     <Button>Sign In</Button>
+ *   </NavbarActions>
+ * </NavbarCollapse>
+ * ```
+ */
+export declare const NavbarCollapse: React.ForwardRefExoticComponent<NavbarCollapseProps & React.RefAttributes<HTMLDivElement>>;
+export default NavbarCollapse;

package/lib/components/navigation/Navbar/NavbarContext.d.ts

@@ -0,0 +1,50 @@
+import { ComponentSize } from '../../../types';
+export type NavbarVariant = 'solid' | 'transparent' | 'blur';
+export type NavbarPosition = 'fixed' | 'sticky' | 'static';
+export interface NavbarContextValue {
+    /**
+     * Unique ID for this navbar instance
+     */
+    navbarId: string;
+    /**
+     * Visual variant
+     */
+    variant: NavbarVariant;
+    /**
+     * Size (height)
+     */
+    size: ComponentSize;
+    /**
+     * Position behavior
+     */
+    position: NavbarPosition;
+    /**
+     * Whether mobile menu is expanded
+     */
+    isExpanded: boolean;
+    /**
+     * Toggle mobile menu
+     */
+    setExpanded: (expanded: boolean) => void;
+    /**
+     * Toggle function for convenience
+     */
+    toggle: () => void;
+    /**
+     * Alignment of nav items
+     */
+    alignment: 'left' | 'center';
+    /**
+     * Whether navbar is in mobile mode
+     */
+    isMobile: boolean;
+}
+export declare const NavbarContext: import('react').Context<NavbarContextValue | null>;
+/**
+ * Hook to access navbar context (returns null if outside Navbar)
+ */
+export declare function useNavbarContext(): NavbarContextValue | null;
+/**
+ * Hook to access navbar context (throws if outside Navbar)
+ */
+export declare function useNavbarContextStrict(): NavbarContextValue;

package/lib/components/navigation/Navbar/NavbarNav.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface NavbarNavProps extends BaseComponentProps {
+    /**
+     * Navigation items
+     */
+    children: React.ReactNode;
+}
+/**
+ * NavbarNav - Navigation links container for the Navbar
+ *
+ * @example
+ * ```tsx
+ * <NavbarNav>
+ *   <NavLink href="/home">Home</NavLink>
+ *   <NavLink href="/about">About</NavLink>
+ *   <NavLink href="/contact">Contact</NavLink>
+ * </NavbarNav>
+ * ```
+ */
+export declare const NavbarNav: React.ForwardRefExoticComponent<NavbarNavProps & React.RefAttributes<HTMLElement>>;
+export default NavbarNav;

package/lib/components/navigation/Navbar/NavbarToggle.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface NavbarToggleProps extends BaseComponentProps {
+    /**
+     * Custom toggle icon
+     */
+    icon?: React.ReactNode;
+}
+/**
+ * NavbarToggle - Mobile hamburger menu button
+ *
+ * @example
+ * ```tsx
+ * <NavbarToggle />
+ *
+ * // With custom icon
+ * <NavbarToggle icon={<CustomIcon />} />
+ * ```
+ */
+export declare const NavbarToggle: React.ForwardRefExoticComponent<NavbarToggleProps & React.RefAttributes<HTMLButtonElement>>;
+export default NavbarToggle;

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

@@ -0,0 +1,15 @@
+export { Navbar } from './Navbar';
+export type { NavbarProps } from './Navbar';
+export { default } from './Navbar';
+export { NavbarBrand } from './NavbarBrand';
+export type { NavbarBrandProps } from './NavbarBrand';
+export { NavbarNav } from './NavbarNav';
+export type { NavbarNavProps } from './NavbarNav';
+export { NavbarActions } from './NavbarActions';
+export type { NavbarActionsProps } from './NavbarActions';
+export { NavbarToggle } from './NavbarToggle';
+export type { NavbarToggleProps } from './NavbarToggle';
+export { NavbarCollapse } from './NavbarCollapse';
+export type { NavbarCollapseProps } from './NavbarCollapse';
+export { NavbarContext, useNavbarContext, useNavbarContextStrict } from './NavbarContext';
+export type { NavbarContextValue, NavbarVariant, NavbarPosition } from './NavbarContext';

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;