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

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

@@ -0,0 +1,100 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+/**
+ * Props for the AdaptiveGrid component
+ */
+export interface AdaptiveGridProps extends BaseComponentProps {
+    /**
+     * Minimum width for each grid item (px)
+     * @default 200
+     */
+    minItemWidth?: number;
+    /**
+     * Maximum columns (regardless of available space)
+     */
+    maxColumns?: number;
+    /**
+     * Minimum columns
+     * @default 1
+     */
+    minColumns?: number;
+    /**
+     * Gap between items (px)
+     * @default 16
+     */
+    gap?: number;
+    /**
+     * Row gap (defaults to gap)
+     */
+    rowGap?: number;
+    /**
+     * Column gap (defaults to gap)
+     */
+    columnGap?: number;
+    /**
+     * How items fill available space
+     * - 'auto-fill': Creates as many columns as will fit
+     * - 'auto-fit': Collapses empty columns
+     * @default 'auto-fill'
+     */
+    fillMode?: 'auto-fill' | 'auto-fit';
+    /**
+     * Item alignment within cells
+     * @default 'stretch'
+     */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * Content justification
+     * @default 'start'
+     */
+    justifyItems?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * Callback when column count changes
+     */
+    onColumnCountChange?: (count: number) => void;
+    /**
+     * Content to render
+     */
+    children: React.ReactNode;
+}
+/**
+ * AdaptiveGrid - A CSS grid that auto-adjusts columns based on container width
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <AdaptiveGrid minItemWidth={250} gap={16}>
+ *   {products.map(product => (
+ *     <ProductCard key={product.id} {...product} />
+ *   ))}
+ * </AdaptiveGrid>
+ * ```
+ *
+ * @example
+ * With column limits:
+ * ```tsx
+ * <AdaptiveGrid
+ *   minItemWidth={200}
+ *   maxColumns={4}
+ *   minColumns={2}
+ *   gap={24}
+ * >
+ *   {items.map(item => <Card key={item.id} {...item} />)}
+ * </AdaptiveGrid>
+ * ```
+ *
+ * @example
+ * Different row and column gaps:
+ * ```tsx
+ * <AdaptiveGrid
+ *   minItemWidth={300}
+ *   rowGap={32}
+ *   columnGap={16}
+ *   fillMode="auto-fit"
+ * >
+ *   {cards.map(card => <Card key={card.id} {...card} />)}
+ * </AdaptiveGrid>
+ * ```
+ */
+export declare const AdaptiveGrid: React.ForwardRefExoticComponent<AdaptiveGridProps & React.RefAttributes<HTMLDivElement>>;
+export default AdaptiveGrid;

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

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

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

@@ -0,0 +1,74 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+/**
+ * Props for the MasonryLayout component
+ */
+export interface MasonryLayoutProps extends BaseComponentProps {
+    /**
+     * Target column width (px) - determines number of columns
+     * @default 250
+     */
+    columnWidth?: number;
+    /**
+     * Gap between items (px)
+     * @default 16
+     */
+    gap?: number;
+    /**
+     * Maximum columns
+     */
+    maxColumns?: number;
+    /**
+     * Minimum columns
+     * @default 1
+     */
+    minColumns?: number;
+    /**
+     * Animation duration for layout changes (ms)
+     * @default 250
+     */
+    animationDuration?: number;
+    /**
+     * Animation easing function
+     * @default 'ease-out'
+     */
+    animationEasing?: string;
+    /**
+     * Callback when column count changes
+     */
+    onColumnCountChange?: (count: number) => void;
+    /**
+     * Content to render
+     */
+    children: React.ReactNode;
+}
+/**
+ * MasonryLayout - Pinterest-style masonry layout that responds to container width
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <MasonryLayout columnWidth={250} gap={16}>
+ *   {images.map(img => (
+ *     <img key={img.id} src={img.url} alt={img.alt} />
+ *   ))}
+ * </MasonryLayout>
+ * ```
+ *
+ * @example
+ * With column constraints:
+ * ```tsx
+ * <MasonryLayout
+ *   columnWidth={200}
+ *   gap={24}
+ *   minColumns={2}
+ *   maxColumns={5}
+ * >
+ *   {cards.map(card => (
+ *     <Card key={card.id} {...card} />
+ *   ))}
+ * </MasonryLayout>
+ * ```
+ */
+export declare const MasonryLayout: React.ForwardRefExoticComponent<MasonryLayoutProps & React.RefAttributes<HTMLDivElement>>;
+export default MasonryLayout;

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

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

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

@@ -0,0 +1,72 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+/**
+ * Props for the Pane component
+ */
+export interface PaneProps extends BaseComponentProps {
+    /**
+     * Minimum width of the pane in pixels
+     * @default 200
+     */
+    minWidth?: number;
+    /**
+     * Maximum width of the pane in pixels
+     */
+    maxWidth?: number;
+    /**
+     * Preferred width of the pane (flex-basis)
+     * Can be pixels, percentage, or 'auto'
+     * @default 'auto'
+     */
+    preferredWidth?: number | string;
+    /**
+     * Flex grow factor
+     * @default 1
+     */
+    grow?: number;
+    /**
+     * Flex shrink factor
+     * @default 1
+     */
+    shrink?: number;
+    /**
+     * Priority for visibility (higher = shown first when space is limited)
+     * By default, uses the index (later children = higher priority)
+     */
+    priority?: number;
+    /**
+     * Unique identifier for the pane
+     */
+    id?: string;
+    /**
+     * Content of the pane
+     */
+    children: React.ReactNode;
+}
+/**
+ * Internal props passed from Panes to Pane
+ */
+export interface PaneInternalProps {
+    /** Index of this pane within Panes children */
+    _index?: number;
+}
+/**
+ * Pane - A child component of Panes that represents a single pane
+ *
+ * @example
+ * ```tsx
+ * <Panes>
+ *   <Pane minWidth={200} maxWidth={400}>
+ *     Left sidebar
+ *   </Pane>
+ *   <Pane minWidth={400} grow={2}>
+ *     Main content
+ *   </Pane>
+ *   <Pane minWidth={200}>
+ *     Right sidebar
+ *   </Pane>
+ * </Panes>
+ * ```
+ */
+export declare const Pane: React.ForwardRefExoticComponent<PaneProps & PaneInternalProps & React.RefAttributes<HTMLDivElement>>;
+export default Pane;

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;