flikkui 0.1.0-beta.11

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

@@ -0,0 +1,45 @@
+/**
+ * Skeleton component props
+ * Loading placeholder that mimics the shape of content
+ */
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The variant of the skeleton
+     * @default "rectangle"
+     */
+    variant?: SkeletonVariant;
+    /**
+     * Width of the skeleton
+     * Can be a number (px), string (with units), or percentage
+     */
+    width?: number | string;
+    /**
+     * Height of the skeleton
+     * Can be a number (px), string (with units), or percentage
+     */
+    height?: number | string;
+    /**
+     * Number of skeleton lines to render (for text variant)
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * Whether to show pulse animation
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Custom CSS class to apply to the skeleton
+     */
+    className?: string;
+    /**
+     * Theme overrides for the skeleton
+     */
+    theme?: SkeletonThemeOverrides;
+}
+export type SkeletonVariant = "text" | "circular" | "rectangle";
+export interface SkeletonThemeOverrides {
+    baseStyle?: string;
+    variants?: Partial<Record<SkeletonVariant, string>>;
+    animation?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant } from './Skeleton.types';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SlidingNumberProps } from './SlidingNumber.types';
+/**
+ * SlidingNumber component with odometer-style digit animation
+ *
+ * Each digit animates independently, creating a satisfying slot-machine effect.
+ * Perfect for counters, statistics, and animated numeric displays.
+ *
+ * @example
+ * ```tsx
+ * <SlidingNumber value={12345} />
+ * <SlidingNumber value={99.95} decimalPlaces={2} />
+ * <SlidingNumber value={42} padStart padWidth={4} /> // "0042"
+ * ```
+ */
+export declare const SlidingNumber: React.ForwardRefExoticComponent<SlidingNumberProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/SlidingNumber/SlidingNumber.js

@@ -0,0 +1,63 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+/**
+ * SlidingNumber component with odometer-style digit animation
+ *
+ * Each digit animates independently, creating a satisfying slot-machine effect.
+ * Perfect for counters, statistics, and animated numeric displays.
+ *
+ * @example
+ * ```tsx
+ * <SlidingNumber value={12345} />
+ * <SlidingNumber value={99.95} decimalPlaces={2} />
+ * <SlidingNumber value={42} padStart padWidth={4} /> // "0042"
+ * ```
+ */
+var SlidingNumber = React__default.forwardRef(function (_a, ref) {
+    var value = _a.value, _b = _a.decimalPlaces, decimalPlaces = _b === void 0 ? 0 : _b, _c = _a.padStart, padStart = _c === void 0 ? false : _c, padWidth = _a.padWidth, _d = _a.transition, transition = _d === void 0 ? { type: 'spring', stiffness: 300, damping: 30, bounce: 0 } : _d, className = _a.className, digitClassName = _a.digitClassName, props = __rest(_a, ["value", "decimalPlaces", "padStart", "padWidth", "transition", "className", "digitClassName"]);
+    var shouldReduceMotion = useReducedMotion();
+    var shouldDisableAnimations = !!shouldReduceMotion;
+    // Format the number with decimal places
+    var formattedNumber = useMemo(function () {
+        var num;
+        // Only apply toFixed if decimalPlaces > 0
+        if (decimalPlaces > 0) {
+            num = Number(value).toFixed(decimalPlaces);
+        }
+        else {
+            num = String(Math.round(value));
+        }
+        if (padStart && padWidth) {
+            var _a = num.split('.'), intPart = _a[0], decPart = _a[1];
+            var paddedInt = intPart.padStart(padWidth, '0');
+            return decPart ? "".concat(paddedInt, ".").concat(decPart) : paddedInt;
+        }
+        return num;
+    }, [value, decimalPlaces, padStart, padWidth]);
+    // Split formatted number into individual characters (digits, decimal point, minus sign)
+    var characters = useMemo(function () {
+        return formattedNumber.split('');
+    }, [formattedNumber]);
+    // Render a single digit with vertical sliding animation
+    var renderDigit = function (char, index) {
+        var isNumber = /\d/.test(char);
+        // For non-numeric characters (., -, etc), render without animation
+        if (!isNumber) {
+            return (React__default.createElement("div", { key: "".concat(char, "-").concat(index), className: cn('inline-flex items-center justify-center', digitClassName), style: { width: '0.6em' } }, char));
+        }
+        // For numeric digits, create vertical scrolling animation
+        var digitValue = parseInt(char, 10);
+        return (React__default.createElement("div", { key: "digit-".concat(index), className: cn('relative inline-block overflow-hidden', digitClassName), style: { height: '1em', width: '0.6em', lineHeight: '1em' } },
+            React__default.createElement(motion.div, { className: "absolute inset-0", animate: shouldDisableAnimations
+                    ? { y: 0 }
+                    : { y: "".concat(-digitValue * 100, "%") }, transition: shouldDisableAnimations ? undefined : transition }, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(function (num) { return (React__default.createElement("div", { key: num, className: "flex items-center justify-center", style: { height: '1em', lineHeight: '1em' } }, num)); }))));
+    };
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn('inline-flex items-center justify-center tabular-nums', className), style: { lineHeight: '1' } }, props), characters.map(function (char, index) { return renderDigit(char, index); })));
+});
+SlidingNumber.displayName = 'SlidingNumber';
+
+export { SlidingNumber };

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

@@ -0,0 +1,36 @@
+import { Transition } from 'motion/react';
+import { HTMLAttributes } from 'react';
+export interface SlidingNumberProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The number value to display with sliding animation
+     */
+    value: number;
+    /**
+     * Number of decimal places to display
+     * @default 0
+     */
+    decimalPlaces?: number;
+    /**
+     * Whether to pad the start with zeros for consistent width
+     * @default false
+     */
+    padStart?: boolean;
+    /**
+     * Total width for padding (only used if padStart is true)
+     * @default undefined
+     */
+    padWidth?: number;
+    /**
+     * Custom transition configuration for digit animations
+     * @default { type: 'spring', stiffness: 300, damping: 30, bounce: 0 }
+     */
+    transition?: Transition;
+    /**
+     * Additional CSS classes for the container
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for individual digits
+     */
+    digitClassName?: string;
+}

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

@@ -0,0 +1,2 @@
+export { SlidingNumber } from './SlidingNumber';
+export type { SlidingNumberProps } from './SlidingNumber.types';

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

@@ -0,0 +1,74 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+
+// Spring configuration for smooth, natural animations
+var springConfig = {
+    type: 'spring',
+    stiffness: 300,
+    damping: 30,
+    mass: 1,
+};
+var fastSpringConfig = {
+    type: 'spring',
+    stiffness: 400,
+    damping: 25,
+    mass: 0.8,
+};
+var layoutSpringConfig = {
+    type: 'spring',
+    stiffness: 200,
+    damping: 25,
+    mass: 1,
+};
+// Drag state animations
+var dragAnimations = {
+    initial: {
+        opacity: 1,
+        scale: 1,
+        zIndex: 1,
+        rotate: 0,
+    },
+    dragging: {
+        opacity: 0.9,
+        scale: 1.02,
+        zIndex: 10,
+        rotate: 2,
+        transition: springConfig,
+    },
+    idle: {
+        opacity: 1,
+        scale: 1,
+        zIndex: 1,
+        rotate: 0,
+        transition: springConfig,
+    },
+};
+// Layout animation configuration
+var layoutAnimations = {
+    layout: __assign(__assign({}, layoutSpringConfig), { 
+        // Slightly slower for smooth settling effect
+        stiffness: 180, damping: 28 })};
+// Drag handle animations
+var dragHandleAnimations = {
+    hover: {
+        scale: 1.1,
+        transition: fastSpringConfig,
+    },
+    tap: {
+        scale: 0.9,
+        transition: __assign(__assign({}, fastSpringConfig), { stiffness: 500 }),
+    },
+};
+// Animation variants for different states
+var itemVariants = {
+    initial: dragAnimations.initial,
+    dragging: dragAnimations.dragging,
+    idle: dragAnimations.idle,
+};
+// Export configuration objects
+var sortableAnimations = {
+    layout: layoutAnimations,
+    dragHandle: dragHandleAnimations,
+    variants: itemVariants,
+};
+
+export { dragAnimations, dragHandleAnimations, itemVariants, layoutAnimations, sortableAnimations };

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

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

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

@@ -0,0 +1,220 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useState, useRef, useEffect, useCallback, useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { sortableTheme } from './Sortable.theme.js';
+import { sortableAnimations } from './Sortable.animations.js';
+import { useDragControls } from '../../../node_modules/framer-motion/dist/es/gestures/drag/use-drag-controls.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/LockClosedIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/Bars3Icon.js';
+import { ReorderGroup } from '../../../node_modules/framer-motion/dist/es/components/Reorder/Group.js';
+import { ReorderItem } from '../../../node_modules/framer-motion/dist/es/components/Reorder/Item.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var SortableContext = createContext(null);
+var useSortableContext = function () {
+    var context = useContext(SortableContext);
+    if (!context) {
+        throw new Error('SortableItem must be used within a Sortable component');
+    }
+    return context;
+};
+var Sortable = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, onReorder = _a.onReorder, className = _a.className, _b = _a.theme, customTheme = _b === void 0 ? {} : _b, _c = _a.direction, direction = _c === void 0 ? 'vertical' : _c, _d = _a.showDragHandle, showDragHandle = _d === void 0 ? false : _d, onSortDragStart = _a.onSortDragStart, onSortDragEnd = _a.onSortDragEnd, values = _a.values;
+    var _e = useState(null), draggedItem = _e[0], setDraggedItem = _e[1];
+    var _f = useState(null), dropPosition = _f[0], setDropPosition = _f[1];
+    var itemRefs = useRef(new Map());
+    var _g = useState(null), draggedItemContent = _g[0], setDraggedItemContent = _g[1];
+    var _h = useState([]), internalValues = _h[0], setInternalValues = _h[1];
+    var theme = __assign(__assign({}, sortableTheme), customTheme);
+    // Extract values from children if not provided
+    useEffect(function () {
+        if (!values) {
+            var childArray = React__default.Children.toArray(children);
+            var extractedValues = childArray.map(function (child) {
+                if (React__default.isValidElement(child)) {
+                    return child.props.value !== undefined ? child.props.value : child.props.id;
+                }
+                return null;
+            }).filter(Boolean);
+            setInternalValues(extractedValues);
+        }
+        else {
+            setInternalValues(values);
+        }
+    }, [children, values]);
+    var handleReorder = useCallback(function (newValues) {
+        setInternalValues(newValues);
+        // Calculate indices for the callback
+        var oldValues = internalValues;
+        if (oldValues.length === 0)
+            return;
+        // Find what moved
+        for (var i = 0; i < newValues.length; i++) {
+            var oldIndex = oldValues.indexOf(newValues[i]);
+            if (oldIndex !== i) {
+                onReorder(oldIndex, i);
+                break;
+            }
+        }
+    }, [internalValues, onReorder]);
+    var contextValue = {
+        direction: direction,
+        showDragHandle: showDragHandle,
+        theme: theme,
+        onReorder: onReorder,
+        onSortDragStart: onSortDragStart,
+        onSortDragEnd: onSortDragEnd,
+        draggedItem: draggedItem,
+        setDraggedItem: setDraggedItem,
+        dropPosition: dropPosition,
+        setDropPosition: setDropPosition,
+        itemRefs: itemRefs,
+        draggedItemContent: draggedItemContent,
+        setDraggedItemContent: setDraggedItemContent,
+    };
+    return (React__default.createElement(SortableContext.Provider, { value: contextValue },
+        React__default.createElement(ReorderGroup, { 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)));
+});
+Sortable.displayName = 'Sortable';
+var SortableItem = React__default.forwardRef(function (_a, forwardedRef) {
+    var id = _a.id, children = _a.children, className = _a.className, _b = _a.theme, customTheme = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, value = _a.value;
+    var context = useSortableContext();
+    var dragControls = useDragControls();
+    var itemRef = useRef(null);
+    var _d = useState(false); _d[0]; var setIsDragging = _d[1];
+    var _e = useState(false), isFocused = _e[0], setIsFocused = _e[1];
+    var theme = __assign(__assign({}, context.theme), customTheme);
+    // Register item ref
+    useEffect(function () {
+        if (itemRef.current) {
+            context.itemRefs.current.set(id, itemRef.current);
+        }
+        return function () {
+            context.itemRefs.current.delete(id);
+        };
+    }, [id, context.itemRefs]);
+    // Keyboard navigation
+    var handleKeyDown = useCallback(function (event) {
+        var _a, _b;
+        if (disabled)
+            return;
+        var items = Array.from(context.itemRefs.current.entries());
+        var currentIndex = items.findIndex(function (_a) {
+            var itemId = _a[0];
+            return itemId === id;
+        });
+        if (currentIndex === -1)
+            return;
+        var 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: 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(function () {
+                var targetItem = items[targetIndex];
+                if (targetItem) {
+                    targetItem[1].focus();
+                }
+            }, 100);
+        }
+    }, [disabled, context, id, value]);
+    var handleDragStart = useCallback(function () {
+        var _a;
+        if (disabled)
+            return;
+        setIsDragging(true);
+        context.setDraggedItem(id);
+        context.setDraggedItemContent(children);
+        var items = Array.from(context.itemRefs.current.entries());
+        var currentIndex = items.findIndex(function (_a) {
+            var itemId = _a[0];
+            return itemId === id;
+        });
+        (_a = context.onSortDragStart) === null || _a === void 0 ? void 0 : _a.call(context, { id: id, index: currentIndex, data: value }, {});
+    }, [disabled, id, children, context, value]);
+    var handleDragEnd = useCallback(function () {
+        var _a;
+        setIsDragging(false);
+        context.setDraggedItem(null);
+        context.setDraggedItemContent(null);
+        context.setDropPosition(null);
+        var items = Array.from(context.itemRefs.current.entries());
+        var currentIndex = items.findIndex(function (_a) {
+            var itemId = _a[0];
+            return itemId === id;
+        });
+        (_a = context.onSortDragEnd) === null || _a === void 0 ? void 0 : _a.call(context, { id: id, index: currentIndex, data: value }, {});
+    }, [id, context, value]);
+    var handlePointerDown = useCallback(function (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]);
+    var handleDragHandlePointerDown = useCallback(function (event) {
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        dragControls.start(event);
+    }, [disabled, dragControls]);
+    var isBeingDragged = context.draggedItem === id;
+    return (React__default.createElement(ReorderItem, { ref: function (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: function () { return setIsFocused(true); }, onBlur: function () { return 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 },
+        context.showDragHandle && (React__default.createElement(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 }, disabled ? (React__default.createElement(ForwardRef, { className: "w-4 h-4 text-gray-500" })) : (React__default.createElement(ForwardRef$1, { className: "w-4 h-4" })))),
+        React__default.createElement("div", { className: "flex-1" }, 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 @@
+var 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?: any;
+}
+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?: any[];
+}
+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?: any;
+}
+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.FC<SpinnerProps>;
+export { Spinner };

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

@@ -0,0 +1,14 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { spinnerTheme } from './Spinner.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+var Spinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, className = _a.className, theme = _a.theme, props = __rest(_a, ["size", "color", "className", "theme"]);
+    // Merge custom theme with default theme
+    var currentTheme = theme ? __assign(__assign({}, spinnerTheme), theme) : spinnerTheme;
+    return (React__default.createElement("div", __assign({ className: cn(currentTheme.baseStyle) }, props),
+        React__default.createElement("div", { className: cn(currentTheme.animation, currentTheme.sizes[size], currentTheme.colors[color], className), role: "status", "aria-label": "loading" })));
+};
+
+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
+ */
+var 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';