flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/forms/DateRangePicker/DateRangePicker.types.d.ts

@@ -1,129 +0,0 @@
-import React from 'react';
-/**
- * Date range object
- */
-export interface DateRange {
-    /** Start date of the range */
-    start: Date | null;
-    /** End date of the range */
-    end: Date | null;
-}
-/**
- * Range preset configuration
- */
-export interface RangePreset {
-    /** Display label for the preset */
-    label: string;
-    /** Number of days to go back from today */
-    days?: number;
-    /** Specific date range value */
-    value?: DateRange | 'current-month' | 'current-year' | 'last-month' | 'last-year';
-    /** Function to calculate dynamic range */
-    getValue?: () => DateRange;
-}
-/**
- * DateRangePicker modes
- */
-export type DateRangePickerMode = 'single' | 'dual' | 'input';
-/**
- * DateRangePicker component props
- */
-export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    /** Start date of the range (controlled mode) */
-    startDate?: Date | null;
-    /** End date of the range (controlled mode) */
-    endDate?: Date | null;
-    /** Default date range (uncontrolled mode) */
-    defaultRange?: DateRange;
-    /** Callback fired when date range changes */
-    onChange?: (range: DateRange) => void;
-    /** Display mode for the range picker */
-    mode?: DateRangePickerMode;
-    /** Whether to allow selecting the same day for start and end */
-    allowSameDay?: boolean;
-    /** Maximum number of days that can be selected in range */
-    maxRange?: number;
-    /** Minimum number of days that must be selected in range */
-    minRange?: number;
-    /** Predefined date range presets */
-    presets?: RangePreset[];
-    /** Show preset buttons */
-    showPresets?: boolean;
-    /** Custom placeholder text for input mode */
-    placeholder?: [string, string];
-    /** Whether to auto-close after range selection */
-    closeOnSelect?: boolean;
-    /** Custom separator between dates in display */
-    separator?: string;
-    /** Additional class name for the container */
-    className?: string;
-    /** Component-level theme overrides */
-    theme?: DateRangePickerThemeOverrides;
-    /** Minimum selectable date */
-    minDate?: Date;
-    /** Maximum selectable date */
-    maxDate?: Date;
-    /** Function to determine if a specific date should be disabled */
-    isDateDisabled?: (date: Date) => boolean;
-    /** Format for displaying dates */
-    dateFormat?: string;
-    /** Whether to highlight today's date */
-    showToday?: boolean;
-    /** Custom weekday labels */
-    weekdays?: string[];
-    /** Custom month names */
-    months?: string[];
-    /** Enable year picker functionality */
-    enableYearPicker?: boolean;
-    /** Enable month picker functionality */
-    enableMonthPicker?: boolean;
-    /** Show today button in header */
-    showTodayButton?: boolean;
-}
-/**
- * Internal range state for tracking selection
- */
-export interface RangeSelectionState {
-    /** Currently selected start date */
-    startDate: Date | null;
-    /** Currently selected end date */
-    endDate: Date | null;
-    /** Date being hovered over (for preview) */
-    hoverDate: Date | null;
-    /** Which date is being selected (start or end) */
-    selectingDate: 'start' | 'end' | null;
-    /** Whether the range selection is complete */
-    isComplete: boolean;
-}
-/**
- * Theme overrides for the DateRangePicker component
- */
-export interface DateRangePickerThemeOverrides {
-    /** Container styles */
-    containerStyle?: string;
-    /** Dual calendar container styles */
-    dualCalendarStyle?: string;
-    /** Individual calendar wrapper styles */
-    calendarWrapperStyle?: string;
-    /** Presets panel styles */
-    presetsStyle?: string;
-    /** Preset button styles */
-    presetButtonStyle?: string;
-    /** Active preset button styles */
-    activePresetStyle?: string;
-    /** Input container styles for input mode */
-    inputContainerStyle?: string;
-    /** Range connector styles (for input mode) */
-    rangeConnectorStyle?: string;
-    /** Styles for dates in range */
-    rangeStyles?: {
-        /** Style for start date */
-        startDate?: string;
-        /** Style for end date */
-        endDate?: string;
-        /** Style for dates in between */
-        inRange?: string;
-        /** Style for hover preview */
-        hoverRange?: string;
-    };
-}

package/dist/components/forms/DateRangePicker/index.d.ts

@@ -1,3 +0,0 @@
-export { DateRangePicker as default, DateRangePicker } from './DateRangePicker';
-export type { DateRangePickerProps, DateRange, RangePreset, RangeSelectionState, DateRangePickerMode, DateRangePickerThemeOverrides } from './DateRangePicker.types';
-export { dateRangePickerTheme } from './DateRangePicker.theme';

package/dist/components/forms/TimePicker/TimePicker.animations.js

@@ -1,188 +0,0 @@
-/**
- * Animation variants for TimePicker component using Framer Motion
- *
- * These animations provide smooth transitions for the dropdown
- * and interactive feedback for the time selectors.
- */
-var timePickerAnimations = {
-    // Dropdown container animations
-    dropdown: {
-        initial: {
-            opacity: 0,
-            y: -10,
-            scale: 0.95
-        },
-        animate: {
-            opacity: 1,
-            y: 0,
-            scale: 1,
-            transition: {
-                duration: 0.2,
-                ease: [0.16, 1, 0.3, 1] // Custom easing for smooth feel
-            }
-        },
-        exit: {
-            opacity: 0,
-            y: -10,
-            scale: 0.95,
-            transition: {
-                duration: 0.15,
-                ease: "easeIn"
-            }
-        }
-    },
-    // Time selector item animations
-    selectorItem: {
-        initial: {
-            opacity: 0,
-            x: -10
-        },
-        animate: {
-            opacity: 1,
-            x: 0,
-            transition: {
-                duration: 0.2,
-                ease: "easeOut"
-            }
-        },
-        hover: {
-            scale: 1.02,
-            backgroundColor: "var(--color-neutral-50)",
-            transition: {
-                duration: 0.1,
-                ease: "easeOut"
-            }
-        },
-        tap: {
-            scale: 0.98,
-            transition: {
-                duration: 0.05,
-                ease: "easeOut"
-            }
-        },
-        selected: {
-            scale: 1.05,
-            backgroundColor: "var(--color-primary-50)",
-            borderLeftColor: "var(--color-primary-500)",
-            transition: {
-                duration: 0.2,
-                ease: "easeOut"
-            }
-        }
-    },
-    // Clear button animations
-    clearButton: {
-        initial: {
-            opacity: 0,
-            scale: 0.8
-        },
-        animate: {
-            opacity: 1,
-            scale: 1,
-            transition: {
-                duration: 0.15,
-                ease: "easeOut"
-            }
-        },
-        hover: {
-            scale: 1.1,
-            backgroundColor: "var(--color-neutral-100)",
-            transition: {
-                duration: 0.1,
-                ease: "easeOut"
-            }
-        },
-        tap: {
-            scale: 0.95,
-            transition: {
-                duration: 0.05,
-                ease: "easeOut"
-            }
-        }
-    },
-    // Column header animations
-    columnHeader: {
-        initial: {
-            opacity: 0,
-            y: -5
-        },
-        animate: {
-            opacity: 1,
-            y: 0,
-            transition: {
-                duration: 0.2,
-                ease: "easeOut",
-                delay: 0.1 // Slight delay after dropdown appears
-            }
-        }
-    },
-    // Staggered animation for selector columns
-    selectorColumns: {
-        animate: {
-            transition: {
-                staggerChildren: 0.05,
-                delayChildren: 0.1
-            }
-        }
-    },
-    // Input field focus animation
-    inputField: {
-        focus: {
-            borderColor: "var(--color-primary-500)",
-            boxShadow: "0 0 0 3px var(--color-primary-500/20)",
-            transition: {
-                duration: 0.15,
-                ease: "easeOut"
-            }
-        },
-        blur: {
-            borderColor: "var(--color-neutral-300)",
-            boxShadow: "0 0 0 0px transparent",
-            transition: {
-                duration: 0.15,
-                ease: "easeOut"
-            }
-        }
-    },
-    // Error state animation
-    errorMessage: {
-        initial: {
-            opacity: 0,
-            y: -5,
-            height: 0
-        },
-        animate: {
-            opacity: 1,
-            y: 0,
-            height: "auto",
-            transition: {
-                duration: 0.2,
-                ease: "easeOut"
-            }
-        },
-        exit: {
-            opacity: 0,
-            y: -5,
-            height: 0,
-            transition: {
-                duration: 0.15,
-                ease: "easeIn"
-            }
-        }
-    },
-    // Spring animation for active selection
-    springSelection: {
-        type: "spring",
-        stiffness: 300,
-        damping: 30,
-        mass: 1
-    },
-    // Smooth scroll animation for auto-scroll to selected item
-    scrollToSelected: {
-        type: "tween",
-        duration: 0.3,
-        ease: "easeInOut"
-    }
-};
-
-export { timePickerAnimations as default, timePickerAnimations };

package/dist/components/layout/DragDrop/DragDrop.d.ts

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

package/dist/components/layout/DragDrop/DragDrop.js

@@ -1,62 +0,0 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { useState, useCallback } from 'react';
-import { cn } from '../../../utils/cn.js';
-import { dragDropTheme } from './DragDrop.theme.js';
-
-var Draggable = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, dragData = _a.dragData, className = _a.className, _b = _a.theme, customTheme = _b === void 0 ? {} : _b, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, props = __rest(_a, ["children", "dragData", "className", "theme", "onDragStart", "onDragEnd"]);
-    var _c = useState(false), isDragging = _c[0], setIsDragging = _c[1];
-    var theme = __assign(__assign({}, dragDropTheme), customTheme);
-    var handleDragStart = useCallback(function (event) {
-        setIsDragging(true);
-        event.dataTransfer.setData('application/json', JSON.stringify(dragData));
-        event.dataTransfer.effectAllowed = 'move';
-        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(dragData, event);
-    }, [dragData, onDragStart]);
-    var handleDragEnd = useCallback(function (event) {
-        setIsDragging(false);
-        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(dragData, event);
-    }, [dragData, onDragEnd]);
-    return (React__default.createElement("div", __assign({ ref: ref, draggable: true, className: cn(theme.draggableStyle, isDragging && theme.dragPreviewStyle, className), onDragStart: handleDragStart, onDragEnd: handleDragEnd }, props), children));
-});
-Draggable.displayName = 'Draggable';
-var Droppable = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, acceptedTypes = _a.acceptedTypes, className = _a.className, _b = _a.theme, customTheme = _b === void 0 ? {} : _b, onDrop = _a.onDrop, onDragEnter = _a.onDragEnter, onDragLeave = _a.onDragLeave, onDragOver = _a.onDragOver, props = __rest(_a, ["children", "acceptedTypes", "className", "theme", "onDrop", "onDragEnter", "onDragLeave", "onDragOver"]);
-    var _c = useState(false), isDragOver = _c[0], setIsDragOver = _c[1];
-    var theme = __assign(__assign({}, dragDropTheme), customTheme);
-    var handleDragEnter = useCallback(function (event) {
-        event.preventDefault();
-        setIsDragOver(true);
-        onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(event);
-    }, [onDragEnter]);
-    var handleDragLeave = useCallback(function (event) {
-        event.preventDefault();
-        setIsDragOver(false);
-        onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(event);
-    }, [onDragLeave]);
-    var handleDragOver = useCallback(function (event) {
-        event.preventDefault();
-        onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(event);
-    }, [onDragOver]);
-    var handleDrop = useCallback(function (event) {
-        event.preventDefault();
-        setIsDragOver(false);
-        try {
-            var data = JSON.parse(event.dataTransfer.getData('application/json'));
-            // Check if the dropped type is accepted
-            if (acceptedTypes && acceptedTypes.length > 0) {
-                if (!acceptedTypes.includes(data.type || '')) {
-                    return;
-                }
-            }
-            onDrop === null || onDrop === void 0 ? void 0 : onDrop(data, event);
-        }
-        catch (error) {
-            console.warn('Failed to parse drag data:', error);
-        }
-    }, [acceptedTypes, onDrop]);
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn(theme.droppableStyle, isDragOver && theme.dragOverStyle, className), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop }, props), children));
-});
-Droppable.displayName = 'Droppable';
-
-export { Draggable, Droppable };

package/dist/components/layout/DragDrop/DragDrop.theme.js

@@ -1,8 +0,0 @@
-var dragDropTheme = {
-    draggableStyle: 'cursor-move select-none transition-all duration-200 hover:opacity-90',
-    droppableStyle: 'min-h-20 border-2 border-dashed border-gray-300 rounded-lg transition-all duration-200',
-    dragOverStyle: 'border-blue-500 bg-blue-50',
-    dragPreviewStyle: 'opacity-50 scale-95',
-};
-
-export { dragDropTheme };

package/dist/components/layout/DragDrop/DragDrop.types.d.ts

@@ -1,50 +0,0 @@
-import { HTMLAttributes, ReactNode, DragEvent } from 'react';
-export interface DragData {
-    id: string;
-    type?: string;
-    data?: any;
-}
-export interface DragDropTheme {
-    draggableStyle: string;
-    droppableStyle: string;
-    dragOverStyle: string;
-    dragPreviewStyle: string;
-}
-export interface DragDropThemeOverrides {
-    draggableStyle?: string;
-    droppableStyle?: string;
-    dragOverStyle?: string;
-    dragPreviewStyle?: string;
-}
-export interface DraggableProps extends HTMLAttributes<HTMLDivElement> {
-    /** Content to make draggable */
-    children: ReactNode;
-    /** Drag data */
-    dragData: DragData;
-    /** Custom class name */
-    className?: string;
-    /** Theme overrides */
-    theme?: DragDropThemeOverrides;
-    /** Called when drag starts */
-    onDragStart?: (data: DragData, event: DragEvent<HTMLDivElement>) => void;
-    /** Called when drag ends */
-    onDragEnd?: (data: DragData, event: DragEvent<HTMLDivElement>) => void;
-}
-export interface DroppableProps extends HTMLAttributes<HTMLDivElement> {
-    /** Content of the drop zone */
-    children: ReactNode;
-    /** Accepted drag types */
-    acceptedTypes?: string[];
-    /** Custom class name */
-    className?: string;
-    /** Theme overrides */
-    theme?: DragDropThemeOverrides;
-    /** Called when item is dropped */
-    onDrop?: (data: DragData, event: DragEvent<HTMLDivElement>) => void;
-    /** Called when drag enters drop zone */
-    onDragEnter?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Called when drag leaves drop zone */
-    onDragLeave?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Called when dragging over drop zone */
-    onDragOver?: (event: DragEvent<HTMLDivElement>) => void;
-}

package/dist/components/layout/DragDrop/index.d.ts

@@ -1,2 +0,0 @@
-export { Draggable, Droppable } from './DragDrop';
-export type { DraggableProps, DroppableProps, DragData, DragDropTheme, DragDropThemeOverrides } from './DragDrop.types';

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

@@ -1,81 +0,0 @@
-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 }),
-    layoutId: function (id) { return "sortable-item-".concat(id); },
-};
-// Drag handle animations
-var dragHandleAnimations = {
-    hover: {
-        scale: 1.1,
-        transition: fastSpringConfig,
-    },
-    tap: {
-        scale: 0.9,
-        transition: __assign(__assign({}, fastSpringConfig), { stiffness: 500 }),
-    },
-};
-// Container animations
-var containerAnimations = {
-    layout: layoutSpringConfig,
-};
-// 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,
-    container: containerAnimations,
-    variants: itemVariants,
-};
-
-export { containerAnimations, dragAnimations, dragHandleAnimations, itemVariants, layoutAnimations, sortableAnimations };

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

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