@flikk/ui 1.0.0-beta.1

package/dist/components/core/Sortable/Sortable.js

@@ -0,0 +1,202 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { createContext, useState, useRef, useMemo, useCallback, useEffect, useContext } from 'react';
+import { Reorder, useDragControls, motion } from 'motion/react';
+import { LockClosedIcon, Bars3Icon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { sortableTheme } from './Sortable.theme.js';
+import { sortableAnimations } from './Sortable.animations.js';
+
+const SortableContext = createContext(null);
+const useSortableContext = () => {
+    const context = useContext(SortableContext);
+    if (!context) {
+        throw new Error('SortableItem must be used within a Sortable component');
+    }
+    return context;
+};
+const Sortable = React__default.forwardRef(({ children, onReorder, className, theme: customTheme = {}, direction = 'vertical', showDragHandle = false, onSortDragStart, onSortDragEnd, values, }, ref) => {
+    const [draggedItem, setDraggedItem] = useState(null);
+    const [dropPosition, setDropPosition] = useState(null);
+    const itemRefs = useRef(new Map());
+    const [draggedItemContent, setDraggedItemContent] = useState(null);
+    const theme = {
+        ...sortableTheme,
+        ...customTheme,
+    };
+    // Extract values from children if not provided
+    const internalValues = useMemo(() => {
+        if (values)
+            return values;
+        const childArray = React__default.Children.toArray(children);
+        return childArray.map((child) => {
+            if (React__default.isValidElement(child)) {
+                return child.props.value !== undefined ? child.props.value : child.props.id;
+            }
+            return null;
+        }).filter((v) => v != null);
+    }, [values, children]);
+    const handleReorder = useCallback((newValues) => {
+        // Calculate indices for the callback
+        const oldValues = internalValues;
+        if (oldValues.length === 0)
+            return;
+        // Find what moved
+        for (let i = 0; i < newValues.length; i++) {
+            const oldIndex = oldValues.indexOf(newValues[i]);
+            if (oldIndex !== i) {
+                onReorder(oldIndex, i);
+                break;
+            }
+        }
+    }, [internalValues, onReorder]);
+    const contextValue = useMemo(() => ({
+        direction,
+        showDragHandle,
+        theme,
+        onReorder,
+        onSortDragStart,
+        onSortDragEnd,
+        draggedItem,
+        setDraggedItem,
+        dropPosition,
+        setDropPosition,
+        itemRefs,
+        draggedItemContent,
+        setDraggedItemContent,
+    }), [direction, showDragHandle, theme, onReorder, onSortDragStart, onSortDragEnd, draggedItem, dropPosition, draggedItemContent]);
+    return (jsx(SortableContext.Provider, { value: contextValue, children: jsx(Reorder.Group, { ref: ref, axis: direction === 'horizontal' ? 'x' : 'y', values: internalValues, onReorder: handleReorder, className: cn(theme.containerStyle, direction === 'horizontal' ? 'flex flex-row' : 'flex flex-col', className), as: "div", children: children }) }));
+});
+Sortable.displayName = 'Sortable';
+const SortableItem = React__default.forwardRef(({ id, children, className, theme: customTheme = {}, disabled = false, value, }, forwardedRef) => {
+    const context = useSortableContext();
+    const dragControls = useDragControls();
+    const itemRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const theme = {
+        ...context.theme,
+        ...customTheme,
+    };
+    // Register item ref
+    useEffect(() => {
+        if (itemRef.current) {
+            context.itemRefs.current.set(id, itemRef.current);
+        }
+        return () => {
+            context.itemRefs.current.delete(id);
+        };
+    }, [id, context.itemRefs]);
+    // Keyboard navigation
+    const handleKeyDown = useCallback((event) => {
+        var _a, _b;
+        if (disabled)
+            return;
+        const items = Array.from(context.itemRefs.current.entries());
+        const currentIndex = items.findIndex(([itemId]) => itemId === id);
+        if (currentIndex === -1)
+            return;
+        let targetIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowUp':
+                if (context.direction === 'vertical' && currentIndex > 0) {
+                    event.preventDefault();
+                    targetIndex = currentIndex - 1;
+                }
+                break;
+            case 'ArrowDown':
+                if (context.direction === 'vertical' && currentIndex < items.length - 1) {
+                    event.preventDefault();
+                    targetIndex = currentIndex + 1;
+                }
+                break;
+            case 'ArrowLeft':
+                if (context.direction === 'horizontal' && currentIndex > 0) {
+                    event.preventDefault();
+                    targetIndex = currentIndex - 1;
+                }
+                break;
+            case 'ArrowRight':
+                if (context.direction === 'horizontal' && currentIndex < items.length - 1) {
+                    event.preventDefault();
+                    targetIndex = currentIndex + 1;
+                }
+                break;
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                // Trigger drag start
+                (_a = context.onSortDragStart) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value }, event);
+                return;
+            case 'Escape':
+                event.preventDefault();
+                (_b = itemRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+                return;
+            default:
+                return;
+        }
+        if (targetIndex !== currentIndex) {
+            context.onReorder(currentIndex, targetIndex);
+            // Focus the item at new position after reorder
+            setTimeout(() => {
+                const targetItem = items[targetIndex];
+                if (targetItem) {
+                    targetItem[1].focus();
+                }
+            }, 100);
+        }
+    }, [disabled, context, id, value]);
+    const handleDragStart = useCallback(() => {
+        var _a;
+        if (disabled)
+            return;
+        setIsDragging(true);
+        context.setDraggedItem(id);
+        context.setDraggedItemContent(children);
+        const items = Array.from(context.itemRefs.current.entries());
+        const currentIndex = items.findIndex(([itemId]) => itemId === id);
+        (_a = context.onSortDragStart) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value }, {});
+    }, [disabled, id, children, context, value]);
+    const handleDragEnd = useCallback(() => {
+        var _a;
+        setIsDragging(false);
+        context.setDraggedItem(null);
+        context.setDraggedItemContent(null);
+        context.setDropPosition(null);
+        const items = Array.from(context.itemRefs.current.entries());
+        const currentIndex = items.findIndex(([itemId]) => itemId === id);
+        (_a = context.onSortDragEnd) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value }, {});
+    }, [id, context, value]);
+    const handlePointerDown = useCallback((event) => {
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        // Only allow drag from handle if showDragHandle is true
+        if (context.showDragHandle) {
+            // Prevent drag from starting on the item itself
+            event.preventDefault();
+        }
+    }, [disabled, context.showDragHandle]);
+    const handleDragHandlePointerDown = useCallback((event) => {
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        dragControls.start(event);
+    }, [disabled, dragControls]);
+    const isBeingDragged = context.draggedItem === id;
+    return (jsxs(Reorder.Item, { ref: (node) => {
+            itemRef.current = node;
+            if (typeof forwardedRef === 'function') {
+                forwardedRef(node);
+            }
+            else if (forwardedRef) {
+                forwardedRef.current = node;
+            }
+        }, value: value || id, id: id, dragListener: !context.showDragHandle && !disabled, dragControls: context.showDragHandle ? dragControls : undefined, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onPointerDown: handlePointerDown, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: cn(theme.itemStyle, context.showDragHandle && 'flex items-center gap-2', disabled && 'opacity-50 cursor-not-allowed', !disabled && !context.showDragHandle && 'cursor-grab active:cursor-grabbing', isBeingDragged && 'shadow-lg z-50', isFocused && !disabled && 'ring-2 ring-blue-500 ring-offset-2', className), style: {
+            position: 'relative',
+        }, variants: sortableAnimations.variants, animate: isBeingDragged ? 'dragging' : 'idle', transition: sortableAnimations.layout.layout, children: [context.showDragHandle && (jsx(motion.div, { onPointerDown: handleDragHandlePointerDown, className: cn(theme.dragHandleStyle, disabled && 'cursor-not-allowed opacity-60', !disabled && 'cursor-grab active:cursor-grabbing'), whileHover: !disabled ? sortableAnimations.dragHandle.hover : undefined, whileTap: !disabled ? sortableAnimations.dragHandle.tap : undefined, children: disabled ? (jsx(LockClosedIcon, { className: "w-4 h-4 text-gray-500" })) : (jsx(Bars3Icon, { className: "w-4 h-4" })) })), jsx("div", { className: "flex-1", children: children })] }));
+});
+SortableItem.displayName = 'SortableItem';
+
+export { Sortable, SortableItem };

package/dist/components/core/Sortable/Sortable.theme.d.ts

@@ -0,0 +1,2 @@
+import { SortableTheme } from "./Sortable.types";
+export declare const sortableTheme: SortableTheme;

package/dist/components/core/Sortable/Sortable.theme.js

@@ -0,0 +1,7 @@
+const sortableTheme = {
+    containerStyle: "relative list-none",
+    itemStyle: "relative cursor-move select-none relative focus-within:z-10 list-none",
+    dragHandleStyle: "cursor-grab active:cursor-grabbing p-1 text-gray-400 hover:text-gray-600 flex items-center justify-center rounded transition-colors duration-200",
+};
+
+export { sortableTheme };

package/dist/components/core/Sortable/Sortable.types.d.ts

@@ -0,0 +1,71 @@
+import { HTMLAttributes, ReactNode, DragEvent } from 'react';
+export interface SortableData {
+    id: string;
+    index: number;
+    data?: string | number | Record<string, unknown>;
+}
+export interface SortableTheme {
+    containerStyle: string;
+    itemStyle: string;
+    dragHandleStyle: string;
+}
+export interface SortableThemeOverrides {
+    containerStyle?: string;
+    itemStyle?: string;
+    dragHandleStyle?: string;
+}
+export interface SortableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onDragStart' | 'onDragEnd'> {
+    /** Content to make sortable */
+    children: ReactNode;
+    /** Called when items are reordered */
+    onReorder: (fromIndex: number, toIndex: number) => void;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: SortableThemeOverrides;
+    /** Direction of sorting */
+    direction?: 'vertical' | 'horizontal';
+    /** Show drag handles */
+    showDragHandle?: boolean;
+    /** Called when drag starts */
+    onSortDragStart?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    /** Called when drag ends */
+    onSortDragEnd?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    /** Optional array of values for Reorder.Group - auto-extracted from children if not provided */
+    values?: (string | number)[];
+}
+export interface SortableItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Unique identifier for the item */
+    id: string;
+    /** Content of the sortable item */
+    children: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: SortableThemeOverrides;
+    /** Disable dragging for this item */
+    disabled?: boolean;
+    /** Value for Reorder.Item - defaults to id if not provided */
+    value?: string | number;
+}
+export interface SortableContextValue {
+    direction: 'vertical' | 'horizontal';
+    showDragHandle: boolean;
+    theme: SortableTheme;
+    onReorder: (fromIndex: number, toIndex: number) => void;
+    onSortDragStart?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    onSortDragEnd?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    draggedItem: string | null;
+    setDraggedItem: (id: string | null) => void;
+    dropPosition: {
+        index: number;
+        position: 'before' | 'after';
+    } | null;
+    setDropPosition: (position: {
+        index: number;
+        position: 'before' | 'after';
+    } | null) => void;
+    itemRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
+    draggedItemContent: React.ReactNode | null;
+    setDraggedItemContent: (content: React.ReactNode | null) => void;
+}

package/dist/components/core/Sortable/index.d.ts

@@ -0,0 +1,2 @@
+export { Sortable, SortableItem } from './Sortable';
+export type { SortableProps, SortableItemProps, SortableData, SortableTheme, SortableThemeOverrides } from './Sortable.types';

package/dist/components/core/Spinner/Spinner.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SpinnerProps } from './Spinner.types';
+declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
+export { Spinner };

package/dist/components/core/Spinner/Spinner.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { spinnerTheme } from './Spinner.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const Spinner = React__default.forwardRef(({ size = 'md', color = 'primary', className, theme, ...props }, ref) => {
+    // Merge custom theme with default theme
+    const currentTheme = useMemo(() => theme ? { ...spinnerTheme, ...theme } : spinnerTheme, [theme]);
+    return (jsx("div", { ref: ref, className: cn(currentTheme.baseStyle), ...props, children: jsx("div", { className: cn(currentTheme.animation, currentTheme.sizes[size], currentTheme.colors[color], className), role: "status", "aria-label": "loading" }) }));
+});
+Spinner.displayName = 'Spinner';
+
+export { Spinner };

package/dist/components/core/Spinner/Spinner.theme.d.ts

@@ -0,0 +1,15 @@
+import { SpinnerSize, SpinnerColor } from "./Spinner.types";
+/**
+ * Internal theme structure for the Spinner component
+ */
+interface SpinnerTheme {
+    baseStyle: string;
+    sizes: Record<SpinnerSize, string>;
+    colors: Record<SpinnerColor, string>;
+    animation: string;
+}
+/**
+ * Default theme for the Spinner component
+ */
+export declare const spinnerTheme: SpinnerTheme;
+export {};

package/dist/components/core/Spinner/Spinner.theme.js

@@ -0,0 +1,26 @@
+/**
+ * Default theme for the Spinner component
+ */
+const spinnerTheme = {
+    // Base styles for the spinner container
+    baseStyle: "inline-flex items-center justify-center",
+    // Size variants
+    sizes: {
+        sm: "size-4 border-3",
+        md: "size-5 border-3",
+        lg: "size-6 border-3",
+    },
+    // Color variants
+    colors: {
+        neutral: "border-[var(--color-border)] border-t-transparent",
+        dark: "border-[var(--color-background-quinary)] border-t-transparent",
+        primary: "border-[var(--color-primary)] border-t-transparent",
+        success: "border-[var(--color-success)] border-t-transparent",
+        warning: "border-[var(--color-warning)] border-t-transparent",
+        danger: "border-[var(--color-danger)] border-t-transparent",
+    },
+    // Animation class with drop shadow
+    animation: "animate-[spin_1s_linear_infinite] rounded-full",
+};
+
+export { spinnerTheme };

package/dist/components/core/Spinner/Spinner.types.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Spinner component props
+ */
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The size of the spinner
+     * @default "md"
+     */
+    size?: SpinnerSize;
+    /**
+     * The color of the spinner
+     * @default "primary"
+     */
+    color?: SpinnerColor;
+    /**
+     * Custom CSS class to apply to the spinner
+     */
+    className?: string;
+    /**
+     * Theme overrides for the spinner
+     */
+    theme?: SpinnerThemeOverrides;
+}
+export type SpinnerSize = "sm" | "md" | "lg";
+export type SpinnerColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
+export interface SpinnerThemeOverrides {
+    baseStyle?: string;
+    sizes?: Partial<Record<SpinnerSize, string>>;
+    colors?: Partial<Record<SpinnerColor, string>>;
+    animation?: string;
+}

package/dist/components/core/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerSize } from './Spinner.types';

package/dist/components/core/Table/Table.animations.d.ts

@@ -0,0 +1,10 @@
+import { Variants } from "motion/react";
+/**
+ * Container animation for row expansion (height: 0 -> auto with opacity)
+ * Uses the same easing curve pattern as Accordion for consistency
+ */
+export declare const tableExpandAnimations: Variants;
+/**
+ * Content slide-in animation for expanded row content (staggered after container)
+ */
+export declare const tableExpandContentAnimations: Variants;

package/dist/components/core/Table/Table.animations.js

@@ -0,0 +1,46 @@
+/**
+ * Container animation for row expansion (height: 0 -> auto with opacity)
+ * Uses the same easing curve pattern as Accordion for consistency
+ */
+const tableExpandAnimations = {
+    collapsed: {
+        height: 0,
+        opacity: 0,
+        transition: {
+            height: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] },
+            opacity: { duration: 0.25 },
+        },
+    },
+    expanded: {
+        height: 'auto',
+        opacity: 1,
+        transition: {
+            height: { duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] },
+            opacity: { duration: 0.3, delay: 0.1 },
+        },
+    },
+};
+/**
+ * Content slide-in animation for expanded row content (staggered after container)
+ */
+const tableExpandContentAnimations = {
+    collapsed: {
+        opacity: 0,
+        y: -10,
+        transition: {
+            y: { duration: 0.2 },
+            opacity: { duration: 0.2 },
+        },
+    },
+    expanded: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            delay: 0.15,
+            y: { duration: 0.3 },
+            opacity: { duration: 0.3 },
+        },
+    },
+};
+
+export { tableExpandAnimations, tableExpandContentAnimations };

package/dist/components/core/Table/Table.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { TableProps, TableContextType } from "./Table.types";
+/**
+ * Context for sharing table state across all table components
+ * Provides theme, configuration, and callback functions to child components
+ */
+declare const TableContext: React.Context<TableContextType>;
+/**
+ * Enhanced Table component with dual API support (declarative and data-driven)
+ *
+ * Features:
+ * - Dual API: Use with data/columns props OR declarative Table.Header/Body/Row/Cell components
+ * - Stable row identification using rowKey prop for consistent React reconciliation
+ * - Column management with visibility controls
+ * - Sorting, filtering, row selection, and expansion
+ * - Frozen columns and headers
+ * - Pagination support
+ * - Full accessibility compliance (WCAG 2.1 AA)
+ * - Theme customization with className overrides
+ */
+declare function TableComponent<T extends Record<string, any>>(props: TableProps<T>): React.ReactElement;
+declare namespace TableComponent {
+    var displayName: string;
+}
+declare const Table: typeof TableComponent;
+export { Table };
+export { TableContext };

package/dist/components/core/Table/Table.filterUtils.d.ts

@@ -0,0 +1,32 @@
+import type { Column, FilterConfig, FilterLogic, FilterOperator, FilterType } from './Table.types';
+import type { SelectOption } from '../../forms/Select/Select.types';
+/**
+ * Human-readable labels for filter operators
+ */
+export declare const operatorLabels: Record<FilterOperator, string>;
+/**
+ * Infer the filter type for a column based on its configuration and data.
+ * Priority: explicit filterType > filterOptions presence > data sampling
+ */
+export declare function inferFilterType<T>(column: Column<T>, data?: T[]): FilterType;
+/**
+ * Get the valid operators for a given filter type
+ */
+export declare function getOperatorsForFilterType(filterType: FilterType): SelectOption<FilterOperator>[];
+/**
+ * Get the default operator for a given filter type
+ */
+export declare function getDefaultOperator(filterType: FilterType): FilterOperator;
+/**
+ * Returns true if the operator requires no value input (unary operators)
+ */
+export declare function isUnaryOperator(operator: FilterOperator): boolean;
+/**
+ * Returns true if the operator needs two value inputs (between)
+ */
+export declare function isBetweenOperator(operator: FilterOperator): boolean;
+/**
+ * Pure filtering function — filters data based on columns, filter configs, and logic.
+ * Returns filtered data array.
+ */
+export declare function filterData<T>(data: T[], columns: Column<T>[], filters: FilterConfig[], logic?: FilterLogic): T[];