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

package/lib/components/navigation/Breadcrumbs/BreadcrumbSeparator.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface BreadcrumbSeparatorProps extends BaseComponentProps {
+    /**
+     * Custom separator content
+     * @default "/"
+     */
+    children?: React.ReactNode;
+}
+/**
+ * BreadcrumbSeparator - Separator between breadcrumb items
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbSeparator>/</BreadcrumbSeparator>
+ * <BreadcrumbSeparator>
+ *   <ChevronRight />
+ * </BreadcrumbSeparator>
+ * ```
+ */
+export declare const BreadcrumbSeparator: React.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React.RefAttributes<HTMLSpanElement>>;
+export default BreadcrumbSeparator;

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

@@ -0,0 +1,96 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types';
+import { IconName } from '../../display/Icon';
+export interface BreadcrumbItemConfig {
+    /**
+     * Display label
+     */
+    label: string;
+    /**
+     * Link href
+     */
+    href?: string;
+    /**
+     * Icon to display
+     */
+    icon?: React.ReactNode | IconName;
+    /**
+     * Whether this is the current/active page
+     */
+    current?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: (e: React.MouseEvent) => void;
+}
+export interface BreadcrumbsProps extends BaseComponentProps {
+    /**
+     * Custom separator element
+     * @default "/"
+     */
+    separator?: React.ReactNode;
+    /**
+     * Maximum items before collapsing
+     */
+    maxItems?: number;
+    /**
+     * Number of items to show at start when collapsed
+     * @default 1
+     */
+    itemsBeforeCollapse?: number;
+    /**
+     * Number of items to show at end when collapsed
+     * @default 2
+     */
+    itemsAfterCollapse?: number;
+    /**
+     * Show home icon for first item
+     * @default false
+     */
+    showHomeIcon?: boolean;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Breadcrumb items (declarative API)
+     */
+    items?: BreadcrumbItemConfig[];
+    /**
+     * Children (compound API - BreadcrumbItem components)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Breadcrumbs - Show current location in navigation hierarchy
+ *
+ * @example
+ * ```tsx
+ * // Declarative API with items prop
+ * <Breadcrumbs
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Products', href: '/products' },
+ *     { label: 'Electronics', current: true },
+ *   ]}
+ * />
+ *
+ * // Compound API with children
+ * <Breadcrumbs>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+ *   <BreadcrumbItem current>Electronics</BreadcrumbItem>
+ * </Breadcrumbs>
+ *
+ * // With collapse
+ * <Breadcrumbs
+ *   items={items}
+ *   maxItems={4}
+ *   itemsBeforeCollapse={1}
+ *   itemsAfterCollapse={2}
+ * />
+ * ```
+ */
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
+export default Breadcrumbs;

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

@@ -0,0 +1,9 @@
+export { Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItemConfig } from './Breadcrumbs';
+export { default } from './Breadcrumbs';
+export { BreadcrumbItem } from './BreadcrumbItem';
+export type { BreadcrumbItemProps } from './BreadcrumbItem';
+export { BreadcrumbSeparator } from './BreadcrumbSeparator';
+export type { BreadcrumbSeparatorProps } from './BreadcrumbSeparator';
+export { useBreadcrumbsFromPath } from './useBreadcrumbsFromPath';
+export type { UseBreadcrumbsFromPathOptions } from './useBreadcrumbsFromPath';

package/lib/components/navigation/Breadcrumbs/useBreadcrumbsFromPath.d.ts

@@ -0,0 +1,73 @@
+import { BreadcrumbItemConfig } from './Breadcrumbs';
+export interface UseBreadcrumbsFromPathOptions {
+    /**
+     * Current path (e.g., from useLocation or window.location.pathname)
+     */
+    path: string;
+    /**
+     * Custom label mapping for path segments
+     * @example { 'users': 'All Users', 'settings': 'Account Settings' }
+     */
+    labels?: Record<string, string>;
+    /**
+     * Base path to start from (segments before this are ignored)
+     * @default '/'
+     */
+    basePath?: string;
+    /**
+     * Label for the home/root breadcrumb
+     * @default 'Home'
+     */
+    homeLabel?: string;
+    /**
+     * Include home as the first breadcrumb
+     * @default true
+     */
+    includeHome?: boolean;
+    /**
+     * Transform function for labels (applied after labels lookup)
+     * @default Capitalizes first letter and replaces hyphens/underscores with spaces
+     */
+    labelTransform?: (segment: string) => string;
+    /**
+     * Segments to exclude from breadcrumbs (e.g., route groups like '(auth)')
+     */
+    excludeSegments?: string[];
+}
+/**
+ * Hook to auto-generate breadcrumbs from a URL path
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const breadcrumbs = useBreadcrumbsFromPath({
+ *   path: '/products/electronics/phones',
+ * });
+ * // Result: [
+ * //   { label: 'Home', href: '/' },
+ * //   { label: 'Products', href: '/products' },
+ * //   { label: 'Electronics', href: '/products/electronics' },
+ * //   { label: 'Phones', href: '/products/electronics/phones', current: true },
+ * // ]
+ *
+ * // With custom labels
+ * const breadcrumbs = useBreadcrumbsFromPath({
+ *   path: '/users/123/settings',
+ *   labels: {
+ *     'users': 'All Users',
+ *     'settings': 'Account Settings',
+ *   },
+ * });
+ *
+ * // With Next.js App Router (excluding route groups)
+ * const breadcrumbs = useBreadcrumbsFromPath({
+ *   path: '/(dashboard)/projects/123',
+ *   excludeSegments: ['(dashboard)', '(auth)'],
+ * });
+ *
+ * // Usage in component
+ * <Breadcrumbs items={breadcrumbs} />
+ * ```
+ */
+export declare function useBreadcrumbsFromPath(options: UseBreadcrumbsFromPathOptions): BreadcrumbItemConfig[];
+export default useBreadcrumbsFromPath;

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