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

package/lib/components/layout/Panes/Panes.d.ts

@@ -0,0 +1,75 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+/**
+ * Props for the Panes container component
+ */
+export interface PanesProps extends BaseComponentProps {
+    /**
+     * Gap between panes in pixels
+     * @default 16
+     */
+    gap?: number;
+    /**
+     * Animation duration for pane transitions (ms)
+     * @default 250
+     */
+    animationDuration?: number;
+    /**
+     * Animation easing function
+     * @default 'ease-in-out'
+     */
+    animationEasing?: string;
+    /**
+     * Minimum container width to show any panes
+     * @default 200
+     */
+    minContainerWidth?: number;
+    /**
+     * Callback when visible panes change
+     * @param visibleIds - Array of visible pane IDs
+     * @param visibleIndices - Array of visible pane indices
+     */
+    onVisiblePanesChange?: (visibleIds: string[], visibleIndices: number[]) => void;
+    /**
+     * Callback when a pane is hidden due to space constraints
+     * @param id - The ID of the hidden pane
+     * @param index - The index of the hidden pane
+     */
+    onPaneHidden?: (id: string, index: number) => void;
+    /**
+     * Pane children
+     */
+    children: React.ReactNode;
+}
+/**
+ * Panes - A container that manages responsive pane visibility
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <Panes gap={16}>
+ *   <Pane minWidth={200}>Sidebar</Pane>
+ *   <Pane minWidth={400} grow={2}>Main Content</Pane>
+ *   <Pane minWidth={200}>Details</Pane>
+ * </Panes>
+ * ```
+ *
+ * @example
+ * With callbacks:
+ * ```tsx
+ * <Panes
+ *   onVisiblePanesChange={(ids, indices) => {
+ *     console.log('Visible panes:', ids);
+ *   }}
+ *   onPaneHidden={(id, index) => {
+ *     console.log('Pane hidden:', id, 'at index', index);
+ *   }}
+ * >
+ *   <Pane minWidth={200}>First</Pane>
+ *   <Pane minWidth={300}>Second</Pane>
+ *   <Pane minWidth={200}>Third (highest priority)</Pane>
+ * </Panes>
+ * ```
+ */
+export declare const Panes: React.ForwardRefExoticComponent<PanesProps & React.RefAttributes<HTMLDivElement>>;
+export default Panes;

package/lib/components/layout/Panes/PanesContext.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Configuration for a registered pane
+ */
+export interface PaneConfig {
+    id: string;
+    minWidth: number;
+    maxWidth?: number;
+    preferredWidth: number | string;
+    grow: number;
+    shrink: number;
+    priority: number;
+    index: number;
+}
+/**
+ * Context value for Panes component
+ */
+export interface PanesContextValue {
+    /**
+     * Register a pane with the container
+     */
+    registerPane: (config: PaneConfig) => void;
+    /**
+     * Unregister a pane
+     */
+    unregisterPane: (id: string) => void;
+    /**
+     * Update a pane's configuration
+     */
+    updatePane: (id: string, config: Partial<PaneConfig>) => void;
+    /**
+     * Set of currently visible pane IDs
+     */
+    visiblePanes: Set<string>;
+    /**
+     * Set of pane IDs currently entering (animating in)
+     */
+    enteringPanes: Set<string>;
+    /**
+     * Set of pane IDs currently exiting (animating out)
+     */
+    exitingPanes: Set<string>;
+    /**
+     * Animation duration (ms)
+     */
+    animationDuration: number;
+    /**
+     * Animation easing function
+     */
+    animationEasing: string;
+    /**
+     * Gap between panes (px)
+     */
+    gap: number;
+}
+declare const PanesContext: import('react').Context<PanesContextValue | null>;
+/**
+ * Hook to access Panes context
+ */
+export declare function usePanesContext(): PanesContextValue;
+export { PanesContext };

package/lib/components/layout/Panes/index.d.ts

@@ -0,0 +1,6 @@
+export { Panes } from './Panes';
+export type { PanesProps } from './Panes';
+export { Pane } from './Pane';
+export type { PaneProps } from './Pane';
+export { usePanesContext } from './PanesContext';
+export type { PanesContextValue, PaneConfig } from './PanesContext';

package/lib/components/layout/ResponsiveStack/ResponsiveStack.d.ts

@@ -0,0 +1,99 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type FlexJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+/**
+ * Props for the ResponsiveStack component
+ */
+export interface ResponsiveStackProps extends BaseComponentProps {
+    /**
+     * Breakpoint width to switch from horizontal to vertical layout (px)
+     * @default 768
+     */
+    breakpoint?: number;
+    /**
+     * Direction when at/above breakpoint
+     * @default 'row'
+     */
+    direction?: FlexDirection;
+    /**
+     * Direction when below breakpoint
+     * @default 'column'
+     */
+    collapseDirection?: FlexDirection;
+    /**
+     * Gap between items (px)
+     * @default 16
+     */
+    gap?: number;
+    /**
+     * Gap when collapsed (defaults to gap)
+     */
+    collapseGap?: number;
+    /**
+     * Item alignment
+     * @default 'stretch'
+     */
+    align?: FlexAlign;
+    /**
+     * Alignment when collapsed (defaults to align)
+     */
+    collapseAlign?: FlexAlign;
+    /**
+     * Content justification
+     * @default 'start'
+     */
+    justify?: FlexJustify;
+    /**
+     * Justification when collapsed (defaults to justify)
+     */
+    collapseJustify?: FlexJustify;
+    /**
+     * Whether items should wrap
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Callback when layout direction changes
+     * @param isCollapsed - Whether the layout is in collapsed state
+     * @param direction - Current direction
+     */
+    onLayoutChange?: (isCollapsed: boolean, direction: FlexDirection) => void;
+    /**
+     * Content to render
+     */
+    children: React.ReactNode;
+}
+/**
+ * ResponsiveStack - A flex container that switches direction based on container width
+ *
+ * @example
+ * Basic usage (row -> column on narrow screens):
+ * ```tsx
+ * <ResponsiveStack breakpoint={600}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </ResponsiveStack>
+ * ```
+ *
+ * @example
+ * Custom alignment:
+ * ```tsx
+ * <ResponsiveStack
+ *   breakpoint={768}
+ *   align="center"
+ *   justify="space-between"
+ *   collapseAlign="stretch"
+ *   collapseJustify="start"
+ *   gap={24}
+ *   collapseGap={16}
+ * >
+ *   <Button>Save</Button>
+ *   <Button>Cancel</Button>
+ * </ResponsiveStack>
+ * ```
+ */
+export declare const ResponsiveStack: React.ForwardRefExoticComponent<ResponsiveStackProps & React.RefAttributes<HTMLDivElement>>;
+export default ResponsiveStack;

package/lib/components/layout/ResponsiveStack/index.d.ts

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

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

@@ -0,0 +1,4 @@
+export * from './Panes';
+export * from './ResponsiveStack';
+export * from './AdaptiveGrid';
+export * from './MasonryLayout';

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

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface BottomNavigationProps extends BaseComponentProps {
+    /**
+     * Selected item value (controlled)
+     */
+    value?: string;
+    /**
+     * Default selected value (uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Whether to show labels for all items
+     * @default true
+     */
+    showLabels?: boolean;
+    /**
+     * Whether to only show label for selected item
+     * @default false
+     */
+    showSelectedLabel?: boolean;
+    /**
+     * Navigation items
+     */
+    children: React.ReactNode;
+}
+/**
+ * BottomNavigation - Mobile bottom navigation bar
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <BottomNavigation value={selected} onChange={setSelected}>
+ *   <BottomNavigationItem value="home" label="Home" icon="Home" />
+ *   <BottomNavigationItem value="search" label="Search" icon="Search" />
+ *   <BottomNavigationItem value="profile" label="Profile" icon="User" />
+ * </BottomNavigation>
+ *
+ * // Show label only for selected item
+ * <BottomNavigation value={selected} onChange={setSelected} showSelectedLabel>
+ *   <BottomNavigationItem value="home" label="Home" icon="Home" />
+ *   <BottomNavigationItem value="search" label="Search" icon="Search" />
+ *   <BottomNavigationItem value="notifications" label="Notifications" icon="Bell" badge={<Badge>3</Badge>} />
+ *   <BottomNavigationItem value="profile" label="Profile" icon="User" />
+ * </BottomNavigation>
+ * ```
+ */
+export declare const BottomNavigation: React.ForwardRefExoticComponent<BottomNavigationProps & React.RefAttributes<HTMLElement>>;
+export default BottomNavigation;

package/lib/components/navigation/BottomNavigation/BottomNavigationContext.d.ts

@@ -0,0 +1,27 @@
+export interface BottomNavigationContextValue {
+    /**
+     * Currently selected item value
+     */
+    selectedValue: string | null;
+    /**
+     * Select an item
+     */
+    onSelect: (value: string) => void;
+    /**
+     * Whether to show labels
+     */
+    showLabels: boolean;
+    /**
+     * Whether to only show label for selected item
+     */
+    showSelectedLabel: boolean;
+}
+export declare const BottomNavigationContext: import('react').Context<BottomNavigationContextValue | null>;
+/**
+ * Hook to access BottomNavigation context (returns null if outside BottomNavigation)
+ */
+export declare function useBottomNavigationContext(): BottomNavigationContextValue | null;
+/**
+ * Hook to access BottomNavigation context (throws if outside BottomNavigation)
+ */
+export declare function useBottomNavigationContextStrict(): BottomNavigationContextValue;

package/lib/components/navigation/BottomNavigation/BottomNavigationItem.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+import { IconName } from '../../display/Icon';
+export interface BottomNavigationItemProps extends BaseComponentProps {
+    /**
+     * Unique identifier for this item
+     */
+    value: string;
+    /**
+     * Item label
+     */
+    label: string;
+    /**
+     * Item icon
+     */
+    icon: React.ReactNode | IconName;
+    /**
+     * Badge content
+     */
+    badge?: React.ReactNode;
+    /**
+     * Whether item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Link href (renders as anchor tag)
+     */
+    href?: string;
+    /**
+     * Click handler
+     */
+    onClick?: (e: React.MouseEvent) => void;
+}
+/**
+ * BottomNavigationItem - Individual item in BottomNavigation
+ *
+ * @example
+ * ```tsx
+ * <BottomNavigationItem value="home" label="Home" icon="Home" />
+ *
+ * // With badge
+ * <BottomNavigationItem
+ *   value="notifications"
+ *   label="Notifications"
+ *   icon="Bell"
+ *   badge={<Badge>5</Badge>}
+ * />
+ *
+ * // As link
+ * <BottomNavigationItem
+ *   value="profile"
+ *   label="Profile"
+ *   icon="User"
+ *   href="/profile"
+ * />
+ * ```
+ */
+export declare const BottomNavigationItem: React.ForwardRefExoticComponent<BottomNavigationItemProps & React.RefAttributes<HTMLElement>>;
+export default BottomNavigationItem;

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

@@ -0,0 +1,7 @@
+export { BottomNavigation } from './BottomNavigation';
+export type { BottomNavigationProps } from './BottomNavigation';
+export { default } from './BottomNavigation';
+export { BottomNavigationItem } from './BottomNavigationItem';
+export type { BottomNavigationItemProps } from './BottomNavigationItem';
+export { BottomNavigationContext, useBottomNavigationContext, useBottomNavigationContextStrict, } from './BottomNavigationContext';
+export type { BottomNavigationContextValue } from './BottomNavigationContext';

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

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+import { IconName } from '../../display/Icon';
+export interface BreadcrumbItemProps extends BaseComponentProps {
+    /**
+     * Link href
+     */
+    href?: string;
+    /**
+     * Whether this is the current page
+     */
+    current?: boolean;
+    /**
+     * Icon to display
+     */
+    icon?: React.ReactNode | IconName;
+    /**
+     * Click handler
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * Item content
+     */
+    children: React.ReactNode;
+}
+/**
+ * BreadcrumbItem - Individual breadcrumb item
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ * <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+ * <BreadcrumbItem current>Electronics</BreadcrumbItem>
+ * ```
+ */
+export declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLElement>>;
+export default BreadcrumbItem;

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;