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

package/lib/components/index.d.ts

@@ -1,5 +1,9 @@
 export { Button } from './buttons/Button';
 export type { ButtonProps } from './buttons/Button';
+export { ToggleButton } from './buttons/ToggleButton';
+export type { ToggleButtonProps } from './buttons/ToggleButton';
+export { ButtonToggleGroup, ButtonToggleGroupItem, ButtonToggleGroupContext, useButtonToggleGroup, } from './buttons/ButtonToggleGroup';
+export type { ButtonToggleGroupProps, ButtonToggleGroupItemProps, ButtonToggleGroupContextValue, } from './buttons/ButtonToggleGroup';
 export { Icon } from './display/Icon';
 export type { IconProps } from './display/Icon';
 export { Badge } from './display/Badge';
@@ -22,6 +26,10 @@ export { KPI } from './display/KPI';
 export type { KPIProps } from './display/KPI';
 export { Skeleton } from './display/Skeleton';
 export type { SkeletonProps } from './display/Skeleton';
+export { OverflowText } from './display/OverflowText';
+export type { OverflowTextProps } from './display/OverflowText';
+export { TruncatedList } from './display/TruncatedList';
+export type { TruncatedListProps } from './display/TruncatedList';
 export { Spinner } from './display/Spinner';
 export type { SpinnerProps, SpinnerStyle, SpinnerVariant, SpinnerSpeed } from './display/Spinner';
 export { Collapse } from './display/Collapse';
@@ -38,9 +46,17 @@ export { Reveal } from './display/Reveal';
 export type { RevealProps, RevealAnimation } from './display/Reveal';
 export { Carousel } from './display/Carousel';
 export type { CarouselProps } from './display/Carousel';
+export { Tabs, TabList, Tab, TabPanel, TabsContext, useTabsContext, useTabsContextStrict, } from './display/Tabs';
+export type { TabsProps, TabListProps, TabProps, TabPanelProps, TabsContextValue, TabsVariant, } from './display/Tabs';
+export { ScrollArea } from './display/ScrollArea';
+export type { ScrollAreaProps, ScrollAreaRef } from './display/ScrollArea';
 export { PageMessages } from './display/PageMessages';
 export type { PageMessagesProps, PageMessageState, PageMessageStateConfig, PageMessageAction, LoadingStateConfig, } from './display/PageMessages';
 export { getActiveState } from './display/PageMessages';
+export { Table, TableHeader, TableBody, TableRow, TableCell, TableContext, useTableContext, useTableContextStrict, autoGenerateColumns, getCellValue, sortData, formatCellValue, useTableSelection, useTableSort, useTableExpand, useInfiniteScroll, } from './display/Table';
+export type { TableProps, TableContextValue, ColumnConfig, ColumnAlign, SortState, SortDirection, SelectionMode as TableSelectionMode, TablePaginationConfig, TableInfiniteScrollConfig, UseTableSelectionOptions, UseTableSelectionReturn, UseTableSortOptions, UseTableSortReturn, UseTableExpandOptions, UseTableExpandReturn, UseInfiniteScrollOptions, UseInfiniteScrollReturn, } from './display/Table';
+export { List, ListItem, ListHeader, ListGroup, ListSearch, ListSkeleton, ListEmpty, ListContext, useListContext, useListContextStrict, useListSelection, useListExpand, useListFilter, useListKeyboardNav, useListGroups, getNestedValue, formatValue, generateItemKey, searchItems, groupItems, sortItems, } from './display/List';
+export type { ListProps, ListItemRenderContext, ListContextValue, SelectionMode as ListSelectionMode, SelectionState, BulkAction, ItemAction, ListInfiniteScrollConfig, ListSkeletonConfig, ResponsiveColumns, UseListSelectionOptions, UseListSelectionReturn, UseListExpandOptions, UseListExpandReturn, UseListFilterOptions, UseListFilterReturn, UseListKeyboardNavOptions, UseListKeyboardNavReturn, UseListGroupsOptions, UseListGroupsReturn, ListGroup as ListGroupType, } from './display/List';
 export { Portal } from './overlays/Portal';
 export type { PortalProps } from './overlays/Portal';
 export { Popover } from './overlays/Popover';
@@ -53,6 +69,12 @@ export { Dropdown } from './overlays/Dropdown';
 export type { DropdownProps } from './overlays/Dropdown';
 export { LoadingOverlay } from './overlays/LoadingOverlay';
 export type { LoadingOverlayProps, LoadingOverlayMode } from './overlays/LoadingOverlay';
+export { Dialog, DialogHeader, DialogBody, DialogFooter, DialogProvider, DialogContext, useDialogContext, useDialogContextStrict, } from './overlays/Dialog';
+export type { DialogProps, DialogSize, DialogHeaderProps, DialogBodyProps, DialogFooterProps, DialogProviderProps, DialogContextValue, DialogStackItem, } from './overlays/Dialog';
+export { Alert, AlertProvider, AlertContext, useAlertContext, useAlertContextStrict, ALERT_PRESETS, getAlertPreset, } from './overlays/Alert';
+export type { AlertProps, AlertVariant, AlertPreset, AlertProviderProps, AlertContextValue, AlertQueueItem, } from './overlays/Alert';
+export { Toast, ToastContainer, ToastProvider, ToastContext, useToastContext, useToastContextStrict, } from './overlays/Toast';
+export type { ToastProps, ToastData, ToastVariant, ToastPosition, ToastAnimationState, ToastContainerProps, ToastProviderProps, ToastContextValue, ToastInstance, PromiseToastOptions, } from './overlays/Toast';
 export { Input } from './inputs/Input';
 export type { InputProps, ValidationResult, FormatMask, ValidationTiming, InputType, } from './inputs/Input';
 export { Autocomplete } from './inputs/Autocomplete';
@@ -63,6 +85,8 @@ export { Checkbox } from './inputs/Checkbox';
 export type { CheckboxProps } from './inputs/Checkbox';
 export { Radio, RadioGroup, useRadioGroup, RadioGroupContext } from './inputs/Radio';
 export type { RadioProps, RadioGroupProps, RadioGroupContextValue } from './inputs/Radio';
+export { CheckboxGroup, CheckboxGroupItem, CheckboxGroupContext, useCheckboxGroup, useCheckboxGroupStrict, } from './inputs/CheckboxGroup';
+export type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupContextValue, } from './inputs/CheckboxGroup';
 export { Textarea } from './inputs/Textarea';
 export type { TextareaProps } from './inputs/Textarea';
 export { Select } from './inputs/Select';
@@ -85,7 +109,35 @@ export { DatePicker } from './inputs/DatePicker';
 export type { DatePickerProps } from './inputs/DatePicker';
 export { DateRangePicker } from './inputs/DateRangePicker';
 export type { DateRangePickerProps, DateRangePreset } from './inputs/DateRangePicker';
+export { Panes, Pane, usePanesContext } from './layout/Panes';
+export type { PanesProps, PaneProps, PanesContextValue, PaneConfig } from './layout/Panes';
+export { ResponsiveStack } from './layout/ResponsiveStack';
+export type { ResponsiveStackProps } from './layout/ResponsiveStack';
+export { AdaptiveGrid } from './layout/AdaptiveGrid';
+export type { AdaptiveGridProps } from './layout/AdaptiveGrid';
+export { MasonryLayout } from './layout/MasonryLayout';
+export type { MasonryLayoutProps } from './layout/MasonryLayout';
+export { CollapsibleSidebar } from './navigation/CollapsibleSidebar';
+export type { CollapsibleSidebarProps } from './navigation/CollapsibleSidebar';
+export { NavLink } from './navigation/NavLink';
+export type { NavLinkProps, NavLinkVariant } from './navigation/NavLink';
+export { Navbar, NavbarBrand, NavbarNav, NavbarActions, NavbarToggle, NavbarCollapse, NavbarContext, useNavbarContext, useNavbarContextStrict, } from './navigation/Navbar';
+export type { NavbarProps, NavbarBrandProps, NavbarNavProps, NavbarActionsProps, NavbarToggleProps, NavbarCollapseProps, NavbarContextValue, NavbarVariant, NavbarPosition, } from './navigation/Navbar';
+export { SideNav, SideNavItem, SideNavGroup, SideNavDivider, SideNavContext, useSideNavContext, useSideNavContextStrict, } from './navigation/SideNav';
+export type { SideNavProps, SideNavItemProps, SideNavGroupProps, SideNavDividerProps, SideNavContextValue, } from './navigation/SideNav';
+export { Breadcrumbs, BreadcrumbItem, BreadcrumbSeparator, useBreadcrumbsFromPath, } from './navigation/Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItemProps, BreadcrumbItemConfig, BreadcrumbSeparatorProps, UseBreadcrumbsFromPathOptions, } from './navigation/Breadcrumbs';
+export { Pagination } from './navigation/Pagination';
+export type { PaginationProps, PaginationVariant, PaginationShape } from './navigation/Pagination';
+export { Stepper, Step, StepperContext, useStepperContext, useStepperContextStrict, } from './navigation/Stepper';
+export type { StepperProps, StepProps, StepperContextValue, StepperVariant, StepperOrientation, } from './navigation/Stepper';
+export { BottomNavigation, BottomNavigationItem, BottomNavigationContext, useBottomNavigationContext, useBottomNavigationContextStrict, } from './navigation/BottomNavigation';
+export type { BottomNavigationProps, BottomNavigationItemProps, BottomNavigationContextValue, } from './navigation/BottomNavigation';
 export { FormBuilder, useFormContext } from './forms/FormBuilder';
 export type { FormBuilderProps } from './forms/FormBuilder';
 export { useFormState, useFormValidation } from './forms/FormBuilder';
 export type { FormFieldType, FormFieldConfig, FormFieldValidation, FormFieldDependency, FormValues, FormErrors, FormTouched, FormState, FormActions, FormContext, UseFormStateOptions, } from './forms/FormBuilder';
+export { DndProvider, DndContext, useDndContext, useDndContextOptional, useDraggable, useDroppable, useSortable, DragHandle, DragOverlay, SortableList, SortableItem, SortableListContext, useSortableListContext, useSortableListContextOptional, KanbanBoard, KanbanColumn, KanbanCard, KanbanBoardContext, useKanbanBoardContext, useKanbanBoardContextOptional, SortableGrid, SortableGridItemComponent, ResizablePanels, ResizablePanel, ResizeHandle, ResizablePanelsContext, useResizablePanelsContext, useResizablePanelsContextOptional, } from './dnd';
+export type { DndProviderProps, DndContextValue, ActiveDrag, DragData, DragEndEvent, DragStartEvent, DragOverEvent, UseDraggableOptions, UseDraggableReturn, UseDroppableOptions, UseDroppableReturn, UseSortableOptions, UseSortableReturn, DragHandleProps, DragOverlayProps, SortableListProps, SortableListItem, SortableItemProps, SortableItemRenderProps, SortableListContextValue, KanbanBoardProps, KanbanCardData, KanbanColumnData, KanbanColumnProps, KanbanCardProps, KanbanCardRenderProps, KanbanBoardContextValue, CardMoveEvent, SortableGridProps, SortableGridItemData, SortableGridItemProps, SortableGridItemRenderProps, ResizablePanelsProps, ResizablePanelProps, ResizeHandleProps, ResizablePanelsContextValue, } from './dnd';
+export { FilterContext, useFilterContext, useFilterContextStrict, useFilter, useFilterDependencies, useFilterOptions, getDependencyValues, clearOptionsCache, FilterProvider, FilterField, FilterSection, ActiveFilters, SelectFilter, MultiSelectFilter, CheckboxFilter, ToggleFilter, TextFilter, DateFilter, DateRangeFilter, NumberFilter, NumberRangeFilter, RatingFilter, ListSelectFilter, FilterSidebar, FilterBar, FilterPopover, FilterModal, FilterAccordion, } from './filters';
+export type { FilterType, FilterValue, FilterValueWithMeta, FilterOption, FilterOptionsLoader, FilterOptionsLoaderParams, FilterOptionsLoadResult, FilterDependency, FilterDependencyAction, FilterDefinition, FilterGroup, FilterState, FilterActions, FilterContextValue, FilterOptionsState, NumberRangeValue, DateRangeValue, SelectFilterConfig, MultiSelectFilterConfig, MultiSelectDisplayMode, TextFilterConfig, NumberFilterConfig, NumberRangeFilterConfig, NumberRangeDisplayMode, DateFilterConfig, DateRangeFilterConfig, DateRangePreset as FilterDateRangePreset, RatingFilterConfig, ListSelectFilterConfig, FilterTypeConfig, FilterProviderProps, FilterFieldProps, FilterSectionProps, ActiveFiltersProps, FilterLayoutProps, FilterSidebarProps, FilterBarProps, FilterPopoverProps, FilterModalProps, FilterAccordionProps, UseFilterOptions, UseFilterReturn, UseFilterDependenciesOptions, UseFilterDependenciesReturn, UseFilterOptionsOptions, UseFilterOptionsReturn, SelectFilterProps, MultiSelectFilterProps, CheckboxFilterProps, ToggleFilterProps, TextFilterProps, DateFilterProps, DateRangeFilterProps, NumberFilterProps, NumberRangeFilterProps, RatingFilterProps, ListSelectFilterProps, } from './filters';

package/lib/components/inputs/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import { default as React, ReactNode } from 'react';
 import { ComponentSize, ComponentVariant, InputBaseProps } from '../../../types';
 import { IconName } from '../../display/Icon/icons';
 export interface CheckboxProps extends Omit<InputBaseProps, 'value' | 'onChange' | 'placeholder'> {
@@ -34,7 +34,7 @@ export interface CheckboxProps extends Omit<InputBaseProps, 'value' | 'onChange'
     /**
      * Label text to display next to checkbox
      */
-    label?: string;
+    label?: ReactNode;
     /**
      * Label placement relative to checkbox
      * @default 'end'

package/lib/components/inputs/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,122 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize, ComponentVariant } from '../../../types';
+export interface CheckboxGroupProps extends Omit<BaseComponentProps, 'onChange'> {
+    /**
+     * Array of selected values (controlled)
+     */
+    value?: string[];
+    /**
+     * Default selected values (uncontrolled)
+     * @default []
+     */
+    defaultValue?: string[];
+    /**
+     * Callback when selection changes
+     * @param values - Array of currently selected values
+     */
+    onChange?: (values: string[]) => void;
+    /**
+     * Variant style for all checkboxes
+     * @default 'primary'
+     */
+    variant?: ComponentVariant;
+    /**
+     * Size for all checkboxes
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Layout orientation
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Group label
+     */
+    label?: string;
+    /**
+     * Helper text below the group
+     */
+    helperText?: string;
+    /**
+     * Error message when in error state
+     */
+    errorMessage?: string;
+    /**
+     * Whether the group is in error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Whether all checkboxes are disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether all checkboxes are read-only
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether at least one selection is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Minimum number of selections required
+     */
+    min?: number;
+    /**
+     * Maximum number of selections allowed
+     */
+    max?: number;
+    /**
+     * Gap between checkboxes (in spacing units)
+     * @default 2
+     */
+    gap?: number;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+    /**
+     * ID for the fieldset element
+     */
+    id?: string;
+    /**
+     * CheckboxGroupItem children
+     */
+    children: React.ReactNode;
+}
+/**
+ * CheckboxGroup component - container for multiple checkboxes with multi-select
+ *
+ * A group component that manages multiple checkbox selections with support
+ * for min/max constraints, validation, and accessibility.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CheckboxGroup value={selected} onChange={setSelected} label="Select options">
+ *   <CheckboxGroupItem value="option1" label="Option 1" />
+ *   <CheckboxGroupItem value="option2" label="Option 2" />
+ *   <CheckboxGroupItem value="option3" label="Option 3" />
+ * </CheckboxGroup>
+ *
+ * // With constraints
+ * <CheckboxGroup
+ *   value={selected}
+ *   onChange={setSelected}
+ *   label="Select 1-3 options"
+ *   min={1}
+ *   max={3}
+ * >
+ *   <CheckboxGroupItem value="a" label="Option A" />
+ *   <CheckboxGroupItem value="b" label="Option B" />
+ *   <CheckboxGroupItem value="c" label="Option C" />
+ *   <CheckboxGroupItem value="d" label="Option D" />
+ * </CheckboxGroup>
+ * ```
+ */
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+export default CheckboxGroup;

package/lib/components/inputs/CheckboxGroup/CheckboxGroupContext.d.ts

@@ -0,0 +1,42 @@
+import { ComponentSize, ComponentVariant } from '../../../types';
+export interface CheckboxGroupContextValue {
+    /**
+     * Group name for form submission
+     */
+    name: string;
+    /**
+     * Array of currently selected values
+     */
+    values: string[];
+    /**
+     * Callback when selection changes
+     */
+    onChange: (value: string, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Whether the group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the group is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Size for all checkboxes
+     */
+    size?: ComponentSize;
+    /**
+     * Variant style for all checkboxes
+     */
+    variant?: ComponentVariant;
+}
+export declare const CheckboxGroupContext: import('react').Context<CheckboxGroupContextValue | null>;
+/**
+ * Hook to optionally access CheckboxGroup context
+ * Returns null if not within a CheckboxGroup (allows standalone Checkbox usage)
+ */
+export declare const useCheckboxGroup: () => CheckboxGroupContextValue | null;
+/**
+ * Hook to access CheckboxGroup context
+ * @throws Error if used outside of CheckboxGroup
+ */
+export declare const useCheckboxGroupStrict: () => CheckboxGroupContextValue;

package/lib/components/inputs/CheckboxGroup/CheckboxGroupItem.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+import { IconName } from '../../display/Icon/icons';
+export interface CheckboxGroupItemProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Value for this checkbox (required in group)
+     */
+    value: string;
+    /**
+     * Label text to display next to checkbox
+     */
+    label?: string;
+    /**
+     * Label placement relative to checkbox
+     * @default 'end'
+     */
+    labelPlacement?: 'start' | 'end';
+    /**
+     * Whether this specific checkbox is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Helper text to display below the checkbox
+     */
+    helperText?: string;
+    /**
+     * Custom check icon
+     */
+    checkIcon?: React.ReactNode | IconName;
+    /**
+     * ID for the input element
+     */
+    id?: string;
+}
+/**
+ * CheckboxGroupItem component - individual checkbox within a CheckboxGroup
+ *
+ * Must be used as a child of CheckboxGroup.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup value={selected} onChange={setSelected}>
+ *   <CheckboxGroupItem value="option1" label="Option 1" />
+ *   <CheckboxGroupItem value="option2" label="Option 2" />
+ * </CheckboxGroup>
+ * ```
+ */
+export declare const CheckboxGroupItem: React.ForwardRefExoticComponent<CheckboxGroupItemProps & React.RefAttributes<HTMLInputElement>>;
+export default CheckboxGroupItem;

package/lib/components/inputs/CheckboxGroup/index.d.ts

@@ -0,0 +1,7 @@
+export { CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupProps } from './CheckboxGroup';
+export { CheckboxGroupItem } from './CheckboxGroupItem';
+export type { CheckboxGroupItemProps } from './CheckboxGroupItem';
+export { CheckboxGroupContext, useCheckboxGroup, useCheckboxGroupStrict, } from './CheckboxGroupContext';
+export type { CheckboxGroupContextValue } from './CheckboxGroupContext';
+export { default } from './CheckboxGroup';

package/lib/components/inputs/NumberInput/NumberInput.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'onBlur'> {
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'onBlur' | 'width'> {
     value?: number;
     defaultValue?: number;
     onChange?: (value: number) => void;
@@ -12,6 +12,8 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     errorMessage?: string;
     error?: boolean;
     formatDisplay?: (value: number) => string;
+    /** Width of the input (e.g., '100px', '6rem', 120) */
+    width?: number | string;
     id?: string;
     'data-testid'?: string;
 }

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;