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

package/lib/components/display/Tabs/Tab.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+import { IconName } from '../Icon/icons';
+export interface TabProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Value identifier for this tab (required)
+     */
+    value: string;
+    /**
+     * Icon to display before tab label
+     */
+    icon?: IconName;
+    /**
+     * Whether this tab is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Tab label content
+     */
+    children: React.ReactNode;
+}
+/**
+ * Tab component - individual tab header button
+ *
+ * Must be used within TabList, which must be within Tabs.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabList>
+ *     <Tab value="tab1">Tab 1</Tab>
+ *     <Tab value="tab2" icon="settings">Settings</Tab>
+ *   </TabList>
+ *   <TabPanel value="tab1">Content 1</TabPanel>
+ *   <TabPanel value="tab2">Content 2</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
+export default Tab;

package/lib/components/display/Tabs/TabList.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface TabListProps extends BaseComponentProps {
+    /**
+     * Tab children
+     */
+    children: React.ReactNode;
+}
+/**
+ * TabList component - container for Tab items
+ *
+ * Must be used within Tabs.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabList>
+ *     <Tab value="tab1">Tab 1</Tab>
+ *     <Tab value="tab2">Tab 2</Tab>
+ *   </TabList>
+ *   <TabPanel value="tab1">Content 1</TabPanel>
+ *   <TabPanel value="tab2">Content 2</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;
+export default TabList;

package/lib/components/display/Tabs/TabPanel.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { BaseComponentProps } from '../../../types';
+export interface TabPanelProps extends BaseComponentProps {
+    /**
+     * Value identifier matching the corresponding Tab
+     */
+    value: string;
+    /**
+     * Panel content
+     */
+    children: React.ReactNode;
+}
+/**
+ * TabPanel component - content panel for a tab
+ *
+ * Must be used within Tabs and paired with a Tab of the same value.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabList>
+ *     <Tab value="tab1">Tab 1</Tab>
+ *     <Tab value="tab2">Tab 2</Tab>
+ *   </TabList>
+ *   <TabPanel value="tab1">Content for tab 1</TabPanel>
+ *   <TabPanel value="tab2">Content for tab 2</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+export default TabPanel;

package/lib/components/display/Tabs/Tabs.d.ts

@@ -0,0 +1,90 @@
+import { default as React } from 'react';
+import { BaseComponentProps, ComponentSize } from '../../../types';
+import { TabsVariant } from './TabsContext';
+export interface TabsProps extends Omit<BaseComponentProps, 'onChange'> {
+    /**
+     * Currently selected tab value (controlled)
+     */
+    value?: string;
+    /**
+     * Default selected tab value (uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * Callback when tab selection changes
+     * @param value - The newly selected tab value
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Visual variant of the tabs
+     * @default 'line'
+     */
+    variant?: TabsVariant;
+    /**
+     * Size of the tabs
+     * @default 'md'
+     */
+    size?: ComponentSize;
+    /**
+     * Orientation of the tab list
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether tabs are disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether tab panels should be lazy loaded (only render when active)
+     * @default false
+     */
+    lazyMount?: boolean;
+    /**
+     * Whether to keep inactive panels mounted (with lazyMount)
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Whether tabs should fit container width (distribute equally)
+     * @default false
+     */
+    fitted?: boolean;
+    /**
+     * Tab components (TabList and TabPanels)
+     */
+    children: React.ReactNode;
+}
+/**
+ * Tabs component - tab navigation with headers and content panels
+ *
+ * A container component that manages tab selection and provides context
+ * to TabList, Tab, and TabPanel children.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Tabs defaultValue="tab1">
+ *   <TabList>
+ *     <Tab value="tab1">Overview</Tab>
+ *     <Tab value="tab2">Details</Tab>
+ *     <Tab value="tab3">Settings</Tab>
+ *   </TabList>
+ *   <TabPanel value="tab1">Overview content</TabPanel>
+ *   <TabPanel value="tab2">Details content</TabPanel>
+ *   <TabPanel value="tab3">Settings content</TabPanel>
+ * </Tabs>
+ *
+ * // Controlled with icons
+ * <Tabs value={activeTab} onChange={setActiveTab} variant="enclosed">
+ *   <TabList>
+ *     <Tab value="home" icon="home">Home</Tab>
+ *     <Tab value="settings" icon="settings">Settings</Tab>
+ *   </TabList>
+ *   <TabPanel value="home">Home content</TabPanel>
+ *   <TabPanel value="settings">Settings content</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export default Tabs;

package/lib/components/display/Tabs/TabsContext.d.ts

@@ -0,0 +1,63 @@
+import { ComponentSize } from '../../../types';
+export type TabsVariant = 'line' | 'enclosed' | 'soft-rounded' | 'solid-rounded';
+export interface TabsContextValue {
+    /**
+     * Unique ID for this tabs instance (used to generate deterministic IDs)
+     */
+    tabsId: string;
+    /**
+     * Currently selected tab value
+     */
+    selectedValue: string;
+    /**
+     * Callback when tab selection changes
+     */
+    onChange: (value: string) => void;
+    /**
+     * Orientation of the tabs
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Visual variant of the tabs
+     */
+    variant: TabsVariant;
+    /**
+     * Size of the tabs
+     */
+    size: ComponentSize;
+    /**
+     * Whether all tabs are disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether tabs should fill container width
+     */
+    fitted: boolean;
+    /**
+     * Whether panels should be lazy mounted
+     */
+    lazyMount: boolean;
+    /**
+     * Whether to keep inactive panels mounted
+     */
+    keepMounted: boolean;
+    /**
+     * Set of panel values that have been activated at least once
+     */
+    activatedPanels: Set<string>;
+    /**
+     * Mark a panel as having been activated
+     */
+    markPanelActivated: (value: string) => void;
+}
+export declare const TabsContext: import('react').Context<TabsContextValue | null>;
+/**
+ * Hook to optionally access Tabs context
+ * Returns null if not within a Tabs component
+ */
+export declare const useTabsContext: () => TabsContextValue | null;
+/**
+ * Hook to access Tabs context
+ * @throws Error if used outside of Tabs
+ */
+export declare const useTabsContextStrict: () => TabsContextValue;

package/lib/components/display/Tabs/index.d.ts

@@ -0,0 +1,11 @@
+export { Tabs } from './Tabs';
+export type { TabsProps } from './Tabs';
+export { TabList } from './TabList';
+export type { TabListProps } from './TabList';
+export { Tab } from './Tab';
+export type { TabProps } from './Tab';
+export { TabPanel } from './TabPanel';
+export type { TabPanelProps } from './TabPanel';
+export { TabsContext, useTabsContext, useTabsContextStrict, } from './TabsContext';
+export type { TabsContextValue, TabsVariant } from './TabsContext';
+export { default } from './Tabs';

package/lib/components/display/TruncatedList/TruncatedList.d.ts

@@ -0,0 +1,69 @@
+import { default as React } from 'react';
+import { PopoverPosition } from '../../../utils/positioning';
+import { BaseComponentProps } from '../../../types';
+/**
+ * Props for the TruncatedList component
+ */
+export interface TruncatedListProps<T> extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Items to display
+     */
+    items: T[];
+    /**
+     * Maximum number of visible items before truncation
+     * @default 3
+     */
+    maxVisible?: number;
+    /**
+     * Render function for each visible item
+     */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /**
+     * Render function for the "+N more" indicator
+     * If not provided, uses default indicator
+     */
+    renderMore?: (count: number, hiddenItems: T[]) => React.ReactNode;
+    /**
+     * Gap between items (px)
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Direction of the list
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Show hidden items in a tooltip on hover
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * Custom tooltip content for hidden items
+     * If not provided, uses renderItem for each hidden item
+     */
+    tooltipContent?: (hiddenItems: T[]) => React.ReactNode;
+    /**
+     * Tooltip position
+     * @default 'top'
+     */
+    tooltipPosition?: PopoverPosition;
+    /**
+     * Maximum width of the tooltip
+     * @default 300
+     */
+    tooltipMaxWidth?: number;
+    /**
+     * Callback when the "more" indicator is clicked
+     */
+    onMoreClick?: (hiddenItems: T[]) => void;
+    /**
+     * Custom key extractor for items
+     * @default (item, index) => index
+     */
+    keyExtractor?: (item: T, index: number) => string | number;
+}
+export declare const TruncatedList: <T>(props: TruncatedListProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;
+export default TruncatedList;

package/lib/components/display/TruncatedList/index.d.ts

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

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

@@ -9,3 +9,7 @@ export * from './ProgressBar';
 export * from './CircularProgress';
 export * from './KPI';
 export * from './Skeleton';
+export * from './OverflowText';
+export * from './TruncatedList';
+export * from './Collapse';
+export * from './List';

package/lib/components/dnd/DndProvider/DndContext.d.ts

@@ -0,0 +1,91 @@
+/**
+ * DnD context for sharing drag state across components
+ */
+/**
+ * Data attached to a draggable item
+ */
+export interface DragData {
+    /** Unique identifier */
+    id: string;
+    /** Item type for filtering drop targets */
+    type?: string;
+    /** Index in list (for sortable) */
+    index?: number;
+    /** Additional custom data */
+    [key: string]: unknown;
+}
+/**
+ * Active drag state
+ */
+export interface ActiveDrag {
+    /** ID of the dragged item */
+    id: string;
+    /** Data attached to the dragged item */
+    data: DragData;
+    /** Element being dragged */
+    element: HTMLElement | null;
+}
+/**
+ * DnD context value
+ */
+export interface DndContextValue {
+    /** Currently active drag, null if nothing is being dragged */
+    active: ActiveDrag | null;
+    /** ID of the element currently being dragged over */
+    overId: string | null;
+    /** Data of the element currently being dragged over */
+    overData: DragData | null;
+    /** Set active drag state */
+    setActive: (active: ActiveDrag | null) => void;
+    /** Set over state */
+    setOver: (id: string | null, data: DragData | null) => void;
+    /** Register a droppable and return unregister function */
+    registerDroppable: (id: string, data: DragData) => () => void;
+    /** Get all registered droppables */
+    getDroppables: () => Map<string, DragData>;
+    /** Drag end callback */
+    onDragEnd?: (event: DragEndEvent) => void;
+}
+/**
+ * Event fired when drag ends
+ */
+export interface DragEndEvent {
+    /** The dragged item */
+    active: ActiveDrag;
+    /** The drop target, null if dropped outside */
+    over: {
+        id: string;
+        data: DragData;
+    } | null;
+}
+/**
+ * Event fired when drag starts
+ */
+export interface DragStartEvent {
+    /** The dragged item */
+    active: ActiveDrag;
+}
+/**
+ * Event fired when dragging over a droppable
+ */
+export interface DragOverEvent {
+    /** The dragged item */
+    active: ActiveDrag;
+    /** The element being dragged over */
+    over: {
+        id: string;
+        data: DragData;
+    };
+}
+/**
+ * DnD context
+ */
+export declare const DndContext: import('react').Context<DndContextValue | null>;
+/**
+ * Hook to access DnD context (throws if not in provider)
+ */
+export declare function useDndContext(): DndContextValue;
+/**
+ * Hook to access DnD context (returns null if not in provider)
+ */
+export declare function useDndContextOptional(): DndContextValue | null;

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

@@ -0,0 +1,37 @@
+import { default as React, ReactNode } from 'react';
+import { DragEndEvent, DragStartEvent, DragOverEvent } from './DndContext';
+import { BaseComponentProps } from '../../../types/component.types';
+export interface DndProviderProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Children components
+     */
+    children: ReactNode;
+    /**
+     * Callback when drag starts
+     */
+    onDragStart?: (event: DragStartEvent) => void;
+    /**
+     * Callback when dragging over a droppable
+     */
+    onDragOver?: (event: DragOverEvent) => void;
+    /**
+     * Callback when drag ends
+     */
+    onDragEnd?: (event: DragEndEvent) => void;
+    /**
+     * Callback when drag is cancelled
+     */
+    onDragCancel?: (event: DragStartEvent) => void;
+}
+/**
+ * DndProvider component that wraps the application to enable drag and drop
+ *
+ * @example
+ * ```tsx
+ * <DndProvider onDragEnd={handleDragEnd}>
+ *   <SortableList items={items} onReorder={setItems} />
+ * </DndProvider>
+ * ```
+ */
+export declare const DndProvider: React.FC<DndProviderProps>;
+export default DndProvider;

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

@@ -0,0 +1,3 @@
+export { DndProvider, type DndProviderProps } from './DndProvider';
+export { DndContext, useDndContext, useDndContextOptional, type DndContextValue, type ActiveDrag, type DragData, type DragEndEvent, type DragStartEvent, type DragOverEvent, } from './DndContext';
+export { default } from './DndProvider';

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

@@ -0,0 +1,41 @@
+import { default as React, CSSProperties } from 'react';
+import { BaseComponentProps, ExtendedComponentSize } from '../../../types/component.types';
+export interface DragHandleProps extends Omit<BaseComponentProps, 'children'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
+    /**
+     * Size of the handle
+     * @default 'md'
+     */
+    size?: ExtendedComponentSize;
+    /**
+     * Visual variant
+     * @default 'dots'
+     */
+    variant?: 'dots' | 'lines' | 'grip';
+    /**
+     * Whether handle is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Accessible label
+     * @default 'Drag handle'
+     */
+    label?: string;
+    /**
+     * Custom styles
+     */
+    style?: CSSProperties;
+}
+/**
+ * DragHandle component for drag and drop interactions
+ *
+ * @example
+ * ```tsx
+ * <SortableItem>
+ *   <DragHandle {...dragHandleProps} />
+ *   <span>Item content</span>
+ * </SortableItem>
+ * ```
+ */
+export declare const DragHandle: React.ForwardRefExoticComponent<DragHandleProps & React.RefAttributes<HTMLDivElement>>;
+export default DragHandle;

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

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

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

@@ -0,0 +1,39 @@
+import { default as React, ReactNode } from 'react';
+import { BaseComponentProps } from '../../../types/component.types';
+export interface DragOverlayProps extends Omit<BaseComponentProps, 'children'> {
+    /**
+     * Content to render in the overlay
+     * Can be a render function that receives the active drag data
+     */
+    children?: ReactNode | ((activeId: string, activeData: Record<string, unknown>) => ReactNode);
+    /**
+     * Whether to adjust position with scroll
+     * @default true
+     */
+    adjustScale?: boolean;
+    /**
+     * Drop animation duration in ms (0 to disable)
+     * @default 200
+     */
+    dropAnimationDuration?: number;
+    /**
+     * Z-index for the overlay
+     * @default 9999
+     */
+    zIndex?: number;
+}
+/**
+ * DragOverlay component that renders a visual clone during drag operations
+ *
+ * @example
+ * ```tsx
+ * <DndProvider>
+ *   <SortableList items={items} />
+ *   <DragOverlay>
+ *     {(activeId, data) => <Card>{data.title}</Card>}
+ *   </DragOverlay>
+ * </DndProvider>
+ * ```
+ */
+export declare const DragOverlay: React.FC<DragOverlayProps>;
+export default DragOverlay;

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

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