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

package/lib/components/dnd/SortableList/SortableItem.d.ts

@@ -0,0 +1,76 @@
+import { default as React, ReactNode, DragEvent } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+/**
+ * Props passed to renderItem function
+ */
+export interface SortableItemRenderProps {
+    /**
+     * Whether this item is being dragged
+     */
+    isDragging: boolean;
+    /**
+     * Whether another item is being dragged over this item
+     */
+    isOver: boolean;
+    /**
+     * Props to spread on a drag handle element
+     */
+    dragHandleProps?: {
+        draggable: boolean;
+        onDragStart: (event: DragEvent<HTMLElement>) => void;
+        onDragEnd: (event: DragEvent<HTMLElement>) => void;
+        onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+        role: string;
+        tabIndex: number;
+        'aria-grabbed': boolean;
+    };
+    /**
+     * Index of the item in the list
+     */
+    index: number;
+}
+export interface SortableItemProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Unique identifier for this item
+     */
+    id: string;
+    /**
+     * Index of this item in the list
+     */
+    index: number;
+    /**
+     * Whether this item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Element to render as
+     * @default 'div'
+     */
+    as?: React.ElementType;
+    /**
+     * Data associated with this item
+     */
+    data?: Record<string, unknown>;
+    /**
+     * Content to render - can be a ReactNode or a render function
+     */
+    children?: ReactNode | ((props: SortableItemRenderProps) => ReactNode);
+}
+/**
+ * SortableItem component for use within SortableList
+ *
+ * @example
+ * ```tsx
+ * <SortableItem id="item-1" index={0}>
+ *   {({ isDragging, dragHandleProps }) => (
+ *     <>
+ *       <DragHandle {...dragHandleProps} />
+ *       <span>Item content</span>
+ *     </>
+ *   )}
+ * </SortableItem>
+ * ```
+ */
+export declare const SortableItem: React.ForwardRefExoticComponent<SortableItemProps & React.RefAttributes<HTMLElement>>;
+export default SortableItem;

package/lib/components/dnd/SortableList/SortableList.d.ts

@@ -0,0 +1,98 @@
+import { ReactNode } from 'react';
+import { SortableItemRenderProps } from './SortableItem';
+import { BaseComponentProps, ComponentSize } from '../../../types/component.types';
+/**
+ * Item type for SortableList
+ */
+export interface SortableListItem {
+    /**
+     * Unique identifier for the item
+     */
+    id: string;
+    /**
+     * Additional item data
+     */
+    [key: string]: unknown;
+}
+export interface SortableListProps<T extends SortableListItem> extends Omit<BaseComponentProps, 'onChange' | 'children'> {
+    /**
+     * Items to render
+     */
+    items: T[];
+    /**
+     * Callback when items are reordered
+     */
+    onReorder?: (items: T[]) => void;
+    /**
+     * Callback when reorder completes (with from/to indices)
+     */
+    onReorderComplete?: (items: T[], fromIndex: number, toIndex: number) => void;
+    /**
+     * Render function for each item
+     */
+    renderItem: (item: T, props: SortableItemRenderProps) => ReactNode;
+    /**
+     * Gap between items
+     * @default 'md'
+     */
+    gap?: ComponentSize | number;
+    /**
+     * Sorting direction
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * Group ID for cross-list drag
+     */
+    groupId?: string;
+    /**
+     * Whether to use drag handles (requires DragHandle in renderItem)
+     * @default false
+     */
+    useDragHandle?: boolean;
+    /**
+     * Whether the list is disabled
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * SortableList component for creating reorderable lists
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState([
+ *   { id: '1', name: 'Item 1' },
+ *   { id: '2', name: 'Item 2' },
+ *   { id: '3', name: 'Item 3' },
+ * ]);
+ *
+ * <SortableList
+ *   items={items}
+ *   onReorder={setItems}
+ *   renderItem={(item, { isDragging }) => (
+ *     <div data-dragging={isDragging}>{item.name}</div>
+ *   )}
+ * />
+ * ```
+ *
+ * @example with drag handle
+ * ```tsx
+ * <SortableList
+ *   items={items}
+ *   onReorder={setItems}
+ *   useDragHandle
+ *   renderItem={(item, { isDragging, dragHandleProps }) => (
+ *     <div data-dragging={isDragging}>
+ *       <DragHandle {...dragHandleProps} />
+ *       <span>{item.name}</span>
+ *     </div>
+ *   )}
+ * />
+ * ```
+ */
+export declare function SortableList<T extends SortableListItem>(props: SortableListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SortableList {
+    var displayName: string;
+}
+export default SortableList;

package/lib/components/dnd/SortableList/SortableListContext.d.ts

@@ -0,0 +1,42 @@
+import { DragData } from '../DndProvider';
+/**
+ * SortableList context value
+ */
+export interface SortableListContextValue {
+    /**
+     * Direction of the list
+     */
+    direction: 'vertical' | 'horizontal';
+    /**
+     * Whether to use drag handles
+     */
+    useDragHandle: boolean;
+    /**
+     * Group ID for cross-list sorting
+     */
+    groupId?: string;
+    /**
+     * Whether the list is disabled
+     */
+    disabled: boolean;
+    /**
+     * Callback when an item is moved
+     */
+    onItemMove: (fromIndex: number, toIndex: number) => void;
+    /**
+     * Get the current active drag data
+     */
+    getActiveData: () => DragData | null;
+}
+/**
+ * SortableList context
+ */
+export declare const SortableListContext: import('react').Context<SortableListContextValue | null>;
+/**
+ * Hook to access SortableList context (throws if not in provider)
+ */
+export declare function useSortableListContext(): SortableListContextValue;
+/**
+ * Hook to access SortableList context (returns null if not in provider)
+ */
+export declare function useSortableListContextOptional(): SortableListContextValue | null;

package/lib/components/dnd/SortableList/index.d.ts

@@ -0,0 +1,4 @@
+export { SortableList, type SortableListProps, type SortableListItem } from './SortableList';
+export { SortableItem, type SortableItemProps, type SortableItemRenderProps } from './SortableItem';
+export { SortableListContext, useSortableListContext, useSortableListContextOptional, type SortableListContextValue, } from './SortableListContext';
+export { default } from './SortableList';

package/lib/components/dnd/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useDraggable, type UseDraggableOptions, type UseDraggableReturn } from './useDraggable';
+export { useDroppable, type UseDroppableOptions, type UseDroppableReturn } from './useDroppable';
+export { useSortable, type UseSortableOptions, type UseSortableReturn } from './useSortable';

package/lib/components/dnd/hooks/useDraggable.d.ts

@@ -0,0 +1,66 @@
+import { DragEvent } from 'react';
+import { DragData } from '../DndProvider';
+export interface UseDraggableOptions {
+    /**
+     * Unique identifier for this draggable
+     */
+    id: string;
+    /**
+     * Data attached to this draggable
+     */
+    data?: Omit<DragData, 'id'>;
+    /**
+     * Whether dragging is disabled
+     */
+    disabled?: boolean;
+}
+export interface UseDraggableReturn {
+    /**
+     * Whether this element is currently being dragged
+     */
+    isDragging: boolean;
+    /**
+     * Ref to attach to the draggable element
+     */
+    setNodeRef: (node: HTMLElement | null) => void;
+    /**
+     * Attributes to spread on the draggable element
+     */
+    attributes: {
+        draggable: boolean;
+        'aria-grabbed': boolean;
+        'data-dragging': boolean;
+        role: string;
+        tabIndex: number;
+    };
+    /**
+     * Event listeners to spread on the draggable element
+     */
+    listeners: {
+        onDragStart: (event: DragEvent<HTMLElement>) => void;
+        onDragEnd: (event: DragEvent<HTMLElement>) => void;
+        onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    };
+    /**
+     * The element node ref
+     */
+    node: HTMLElement | null;
+}
+/**
+ * Hook to make an element draggable
+ *
+ * @example
+ * ```tsx
+ * const { setNodeRef, attributes, listeners, isDragging } = useDraggable({
+ *   id: 'item-1',
+ *   data: { type: 'card', index: 0 },
+ * });
+ *
+ * return (
+ *   <div ref={setNodeRef} {...attributes} {...listeners} data-dragging={isDragging}>
+ *     Drag me!
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useDraggable(options: UseDraggableOptions): UseDraggableReturn;

package/lib/components/dnd/hooks/useDroppable.d.ts

@@ -0,0 +1,73 @@
+import { DragEvent } from 'react';
+import { DragData, ActiveDrag } from '../DndProvider';
+export interface UseDroppableOptions {
+    /**
+     * Unique identifier for this droppable
+     */
+    id: string;
+    /**
+     * Data attached to this droppable (for validation/filtering)
+     */
+    data?: Omit<DragData, 'id'>;
+    /**
+     * Whether dropping is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Types of draggables this droppable accepts (by type field in data)
+     * If not specified, accepts all types
+     */
+    accepts?: string[];
+}
+export interface UseDroppableReturn {
+    /**
+     * Whether a draggable is currently over this droppable
+     */
+    isOver: boolean;
+    /**
+     * The currently active drag item (if any)
+     */
+    active: ActiveDrag | null;
+    /**
+     * Ref to attach to the droppable element
+     */
+    setNodeRef: (node: HTMLElement | null) => void;
+    /**
+     * Attributes to spread on the droppable element
+     */
+    attributes: {
+        'aria-dropeffect': 'move' | 'none';
+        'data-over': boolean;
+    };
+    /**
+     * Event listeners to spread on the droppable element
+     */
+    listeners: {
+        onDragEnter: (event: DragEvent<HTMLElement>) => void;
+        onDragLeave: (event: DragEvent<HTMLElement>) => void;
+        onDragOver: (event: DragEvent<HTMLElement>) => void;
+        onDrop: (event: DragEvent<HTMLElement>) => void;
+    };
+    /**
+     * The element node ref
+     */
+    node: HTMLElement | null;
+}
+/**
+ * Hook to make an element a drop target
+ *
+ * @example
+ * ```tsx
+ * const { setNodeRef, attributes, listeners, isOver } = useDroppable({
+ *   id: 'drop-zone-1',
+ *   accepts: ['card'],
+ * });
+ *
+ * return (
+ *   <div ref={setNodeRef} {...attributes} {...listeners} data-over={isOver}>
+ *     Drop here
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useDroppable(options: UseDroppableOptions): UseDroppableReturn;

package/lib/components/dnd/hooks/useSortable.d.ts

@@ -0,0 +1,94 @@
+import { DragEvent } from 'react';
+import { DragData, ActiveDrag } from '../DndProvider';
+export interface UseSortableOptions {
+    /**
+     * Unique identifier for this sortable item
+     */
+    id: string;
+    /**
+     * Index of this item in the list
+     */
+    index: number;
+    /**
+     * Data attached to this sortable item
+     */
+    data?: Omit<DragData, 'id' | 'index'>;
+    /**
+     * Whether sorting is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Group ID for cross-list sorting
+     */
+    groupId?: string;
+}
+export interface UseSortableReturn {
+    /**
+     * Whether this item is currently being dragged
+     */
+    isDragging: boolean;
+    /**
+     * Whether a draggable is currently over this item
+     */
+    isOver: boolean;
+    /**
+     * The currently active drag item (if any)
+     */
+    active: ActiveDrag | null;
+    /**
+     * Ref to attach to the sortable element
+     */
+    setNodeRef: (node: HTMLElement | null) => void;
+    /**
+     * Attributes to spread on the sortable element
+     */
+    attributes: {
+        draggable: boolean;
+        'aria-grabbed': boolean;
+        'data-dragging': boolean;
+        'data-over': boolean;
+        role: string;
+        tabIndex: number;
+    };
+    /**
+     * Event listeners to spread on the sortable element
+     */
+    listeners: {
+        onDragStart: (event: DragEvent<HTMLElement>) => void;
+        onDragEnd: (event: DragEvent<HTMLElement>) => void;
+        onDragEnter: (event: DragEvent<HTMLElement>) => void;
+        onDragLeave: (event: DragEvent<HTMLElement>) => void;
+        onDragOver: (event: DragEvent<HTMLElement>) => void;
+        onDrop: (event: DragEvent<HTMLElement>) => void;
+        onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    };
+    /**
+     * CSS transform style for animation
+     */
+    style: {
+        transition?: string;
+        opacity?: number;
+    };
+    /**
+     * Get the element node (use this instead of accessing node directly)
+     */
+    getNode: () => HTMLElement | null;
+}
+/**
+ * Hook to make an element sortable (draggable and droppable)
+ *
+ * @example
+ * ```tsx
+ * const { setNodeRef, attributes, listeners, isDragging, isOver } = useSortable({
+ *   id: 'item-1',
+ *   index: 0,
+ * });
+ *
+ * return (
+ *   <div ref={setNodeRef} {...attributes} {...listeners}>
+ *     Sortable item
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useSortable(options: UseSortableOptions): UseSortableReturn;

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

@@ -0,0 +1,8 @@
+export * from './DndProvider';
+export * from './hooks';
+export * from './DragHandle';
+export * from './DragOverlay';
+export * from './SortableList';
+export * from './KanbanBoard';
+export * from './SortableGrid';
+export * from './ResizablePanels';

package/lib/components/filters/FilterContext.d.ts

@@ -0,0 +1,34 @@
+import { FilterContextValue } from './types';
+/**
+ * Filter context
+ * Provides state coordination for filter components
+ */
+export declare const FilterContext: import('react').Context<FilterContextValue | null>;
+/**
+ * Hook to optionally access filter context
+ * Returns null if not within FilterProvider
+ *
+ * @returns FilterContextValue or null if outside provider
+ *
+ * @example
+ * ```tsx
+ * const context = useFilterContext();
+ * if (context) {
+ *   // Use context...
+ * }
+ * ```
+ */
+export declare function useFilterContext(): FilterContextValue | null;
+/**
+ * Hook that throws if not within FilterProvider
+ * Use this when filter components must be within a provider
+ *
+ * @throws Error if used outside FilterProvider
+ * @returns FilterContextValue
+ *
+ * @example
+ * ```tsx
+ * const { values, setFilterValue } = useFilterContextStrict();
+ * ```
+ */
+export declare function useFilterContextStrict(): FilterContextValue;

package/lib/components/filters/core/ActiveFilters/ActiveFilters.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { ActiveFiltersProps } from '../../types';
+/**
+ * ActiveFilters displays the currently applied filters as removable chips.
+ * Provides an easy way for users to see and remove active filters.
+ *
+ * @example
+ * ```tsx
+ * <FilterProvider filters={filters}>
+ *   <ActiveFilters maxVisible={5} showClearAll />
+ *   <FilterSidebar>...</FilterSidebar>
+ * </FilterProvider>
+ * ```
+ */
+export declare const ActiveFilters: React.ForwardRefExoticComponent<ActiveFiltersProps & React.RefAttributes<HTMLDivElement>>;
+export default ActiveFilters;

package/lib/components/filters/core/ActiveFilters/index.d.ts

@@ -0,0 +1,2 @@
+export { ActiveFilters } from './ActiveFilters';
+export { default } from './ActiveFilters';

package/lib/components/filters/core/FilterField/FilterField.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { FilterFieldProps } from '../../types';
+/**
+ * FilterField is a unified wrapper that automatically renders the appropriate
+ * filter component based on the filter definition's type.
+ *
+ * @example
+ * ```tsx
+ * <FilterProvider filters={filters}>
+ *   <FilterField filterId="status" />
+ *   <FilterField filterId="dateRange" showLabel={false} />
+ *   <FilterField filterId="search" placeholder="Search..." />
+ * </FilterProvider>
+ * ```
+ */
+export declare const FilterField: React.ForwardRefExoticComponent<FilterFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default FilterField;

package/lib/components/filters/core/FilterField/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterField } from './FilterField';
+export { default } from './FilterField';

package/lib/components/filters/core/FilterProvider/FilterProvider.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { FilterProviderProps } from '../../types';
+export declare const FilterProvider: React.FC<FilterProviderProps>;
+export default FilterProvider;

package/lib/components/filters/core/FilterProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterProvider } from './FilterProvider';
+export { default } from './FilterProvider';

package/lib/components/filters/core/FilterSection/FilterSection.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { FilterSectionProps } from '../../types';
+/**
+ * FilterSection provides a collapsible container for grouping related filters.
+ * Shows an optional badge with the count of active filters in the section.
+ *
+ * @example
+ * ```tsx
+ * <FilterSection title="Product" collapsible showActiveCount>
+ *   <FilterField filterId="category" />
+ *   <FilterField filterId="brand" />
+ * </FilterSection>
+ * ```
+ */
+export declare const FilterSection: React.ForwardRefExoticComponent<FilterSectionProps & React.RefAttributes<HTMLDivElement>>;
+export default FilterSection;

package/lib/components/filters/core/FilterSection/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterSection } from './FilterSection';
+export { default } from './FilterSection';

package/lib/components/filters/core/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Core filter components exports
+ */
+export { FilterProvider } from './FilterProvider';
+export { FilterField } from './FilterField';
+export { ActiveFilters } from './ActiveFilters';
+export { FilterSection } from './FilterSection';

package/lib/components/filters/fields/CheckboxFilter.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types';
+export interface CheckboxFilterProps extends BaseComponentProps {
+    /** Filter ID from FilterDefinition */
+    filterId: string;
+    /** Override label */
+    label?: string;
+    /** Size variant */
+    size?: ComponentSize;
+    /** Additional props for Checkbox component */
+    checkboxProps?: Record<string, unknown>;
+}
+/**
+ * CheckboxFilter wraps the Checkbox component for boolean filters
+ */
+export declare const CheckboxFilter: React.ForwardRefExoticComponent<CheckboxFilterProps & React.RefAttributes<HTMLDivElement>>;
+export default CheckboxFilter;

package/lib/components/filters/fields/DateFilter.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types';
+export interface DateFilterProps extends BaseComponentProps {
+    /** Filter ID from FilterDefinition */
+    filterId: string;
+    /** Override label */
+    label?: string;
+    /** Override placeholder */
+    placeholder?: string;
+    /** Show label */
+    showLabel?: boolean;
+    /** Size variant */
+    size?: ComponentSize;
+    /** Additional props for DatePicker component */
+    datePickerProps?: Record<string, unknown>;
+}
+/**
+ * DateFilter wraps the DatePicker component for date filters
+ */
+export declare const DateFilter: React.ForwardRefExoticComponent<DateFilterProps & React.RefAttributes<HTMLDivElement>>;
+export default DateFilter;

package/lib/components/filters/fields/DateRangeFilter.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types';
+export interface DateRangeFilterProps extends BaseComponentProps {
+    /** Filter ID from FilterDefinition */
+    filterId: string;
+    /** Override label */
+    label?: string;
+    /** Show label */
+    showLabel?: boolean;
+    /** Size variant */
+    size?: ComponentSize;
+    /** Additional props for DateRangePicker component */
+    dateRangePickerProps?: Record<string, unknown>;
+}
+/**
+ * DateRangeFilter wraps the DateRangePicker component for date range filters
+ */
+export declare const DateRangeFilter: React.ForwardRefExoticComponent<DateRangeFilterProps & React.RefAttributes<HTMLDivElement>>;
+export default DateRangeFilter;

package/lib/components/filters/fields/ListSelectFilter.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types';
+export interface ListSelectFilterProps extends BaseComponentProps {
+    /** Filter ID from FilterDefinition */
+    filterId: string;
+    /** Override label */
+    label?: string;
+    /** Show label */
+    showLabel?: boolean;
+    /** Size variant */
+    size?: ComponentSize;
+    /** Additional props */
+    componentProps?: Record<string, unknown>;
+}
+/**
+ * ListSelectFilter provides a searchable list for selecting one or more items
+ */
+export declare const ListSelectFilter: React.ForwardRefExoticComponent<ListSelectFilterProps & React.RefAttributes<HTMLDivElement>>;
+export default ListSelectFilter;