flikkui 0.1.0-beta.2 → 0.1.0-beta.4

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

@@ -0,0 +1,81 @@
+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.js

@@ -0,0 +1,165 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { sortableTheme } from './Sortable.theme.js';
+import { sortableAnimations } from './Sortable.animations.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.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';
+
+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;
+    var _e = useState(null), draggedItem = _e[0], setDraggedItem = _e[1];
+    var containerRef = useRef(null);
+    var theme = __assign(__assign({}, sortableTheme), customTheme);
+    // Handle drag over container (for gaps between items)
+    var handleContainerDragOver = useCallback(function (event) {
+        event.preventDefault();
+        console.log('🔵 Container DragOver:', {
+            draggedItem: draggedItem,
+            hasContainer: !!containerRef.current,
+            direction: direction
+        });
+        // Simple container drag over - no complex logic for now
+    }, [direction, draggedItem]);
+    var contextValue = {
+        direction: direction,
+        showDragHandle: showDragHandle,
+        theme: theme,
+        onReorder: onReorder,
+        onSortDragStart: onSortDragStart,
+        onSortDragEnd: onSortDragEnd,
+        draggedItem: draggedItem,
+        setDraggedItem: setDraggedItem,
+        dropPosition: null,
+        setDropPosition: function () { },
+        itemRefs: { current: new Map() },
+        draggedItemContent: null,
+        setDraggedItemContent: function () { },
+    };
+    console.log('🏠 Sortable render:', {
+        direction: direction,
+        showDragHandle: showDragHandle,
+        draggedItem: draggedItem
+    });
+    return (React__default.createElement(SortableContext.Provider, { value: contextValue },
+        React__default.createElement(motion.div, { ref: function (node) {
+                if (typeof ref === 'function') {
+                    ref(node);
+                }
+                else if (ref) {
+                    ref.current = node;
+                }
+                containerRef.current = node;
+            }, className: cn(theme.containerStyle, className), layout: true, transition: sortableAnimations.container.layout, onDragOver: handleContainerDragOver }, children)));
+});
+Sortable.displayName = 'Sortable';
+var SortableItem = React__default.forwardRef(function (_a, _ref) {
+    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;
+    var context = useSortableContext();
+    var itemRef = useRef(null);
+    var theme = __assign(__assign({}, context.theme), customTheme);
+    var getItemIndex = useCallback(function () {
+        var _a;
+        if (!((_a = itemRef.current) === null || _a === void 0 ? void 0 : _a.parentElement))
+            return -1;
+        var siblings = Array.from(itemRef.current.parentElement.children);
+        return siblings.indexOf(itemRef.current);
+    }, []);
+    var handleDragStart = useCallback(function (event) {
+        var _a;
+        if (disabled) {
+            console.log('❌ Drag Start blocked - disabled:', { id: id, disabled: disabled });
+            return;
+        }
+        var index = getItemIndex();
+        console.log('🚀 Drag Start:', { id: id, index: index, disabled: disabled, event: event });
+        context.setDraggedItem(id);
+        // Simple drag data like the working standalone test
+        event.dataTransfer.setData('text/plain', id);
+        event.dataTransfer.setData('text/index', index.toString());
+        event.dataTransfer.effectAllowed = 'move';
+        console.log('✅ Drag data set:', { id: id, index: index });
+        (_a = context.onSortDragStart) === null || _a === void 0 ? void 0 : _a.call(context, { id: id, index: index, data: { id: id } }, event);
+    }, [id, disabled, getItemIndex, context]);
+    var handleDragEnd = useCallback(function (event) {
+        var _a;
+        console.log('🏁 Drag End:', { id: id, event: event });
+        context.setDraggedItem(null);
+        var index = getItemIndex();
+        var dragData = { id: id, index: index, data: { id: id } };
+        (_a = context.onSortDragEnd) === null || _a === void 0 ? void 0 : _a.call(context, dragData, event);
+    }, [id, getItemIndex, context]);
+    var handleDragOver = useCallback(function (event) {
+        event.preventDefault();
+        console.log('🟢 Item DragOver:', { id: id, disabled: disabled, draggedItem: context.draggedItem });
+        if (disabled || context.draggedItem === id) {
+            console.log('🟡 Item DragOver skipped:', { id: id, disabled: disabled, draggedItem: context.draggedItem });
+            return;
+        }
+        // Simple visual feedback - no complex positioning logic for now
+        console.log('✅ DragOver allowed on:', { id: id });
+    }, [disabled, id, context.draggedItem]);
+    var handleDrop = useCallback(function (event) {
+        event.preventDefault();
+        console.log('📍 Drop START:', { id: id, disabled: disabled, event: event });
+        if (disabled) {
+            console.log('❌ Drop blocked - disabled:', { id: id, disabled: disabled });
+            return;
+        }
+        // Simple drag data like the working standalone test
+        var draggedId = event.dataTransfer.getData('text/plain');
+        var fromIndex = parseInt(event.dataTransfer.getData('text/index'));
+        var toIndex = getItemIndex();
+        console.log('📊 Drop data:', { draggedId: draggedId, fromIndex: fromIndex, toIndex: toIndex, currentId: id });
+        if (fromIndex !== toIndex && !isNaN(fromIndex)) {
+            console.log('✅ Calling onReorder:', { fromIndex: fromIndex, toIndex: toIndex });
+            context.onReorder(fromIndex, toIndex);
+        }
+    }, [disabled, context, getItemIndex, id]);
+    var handleDragEnter = useCallback(function (event) {
+        event.preventDefault();
+        console.log('📥 Drag Enter:', { id: id, event: event });
+    }, [id]);
+    var handleDragLeave = useCallback(function (event) {
+        event.preventDefault();
+        console.log('📤 Drag Leave:', { id: id, event: event });
+    }, [id]);
+    // Simple effect to log item mount/unmount
+    useEffect(function () {
+        console.log('🔧 Item Effect:', { id: id, hasRef: !!itemRef.current });
+    }, [id]);
+    var currentIndex = getItemIndex();
+    var isBeingDragged = context.draggedItem === id;
+    // Log component render
+    console.log('🔄 SortableItem render:', {
+        id: id,
+        disabled: disabled,
+        isBeingDragged: isBeingDragged,
+        currentIndex: currentIndex,
+        draggable: !disabled,
+        itemRefExists: !!itemRef.current
+    });
+    return (React__default.createElement(motion.div, { ref: itemRef, draggable: !disabled, "data-sortable-id": id, "data-sortable-index": currentIndex, "data-draggable": !disabled, className: cn(theme.itemStyle, context.showDragHandle && 'flex items-center gap-2 relative', disabled && 'opacity-50 cursor-not-allowed', 
+        // Dynamic shadow classes based on drag state
+        isBeingDragged ? 'shadow-lg' : 'shadow-none', className), 
+        // Animation properties
+        layoutId: sortableAnimations.layout.layoutId(id), variants: sortableAnimations.variants, animate: isBeingDragged ? 'dragging' : 'idle', layout: true, transition: {
+            layout: sortableAnimations.layout.layout
+        }, 
+        // Drag event handlers (keep functionality intact)
+        onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, onMouseDown: function () { return console.log('🖱️ Mouse Down:', { id: id }); }, onClick: function () { return console.log('🖱️ Click:', { id: id }); } },
+        context.showDragHandle && (React__default.createElement(motion.div, { className: cn(theme.dragHandleStyle, disabled && 'cursor-not-allowed opacity-60'), 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/layout/Sortable/Sortable.theme.js

@@ -0,0 +1,7 @@
+var sortableTheme = {
+    containerStyle: "relative",
+    itemStyle: "relative cursor-move select-none relative focus-within:z-10",
+    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/navigation/index.d.ts

@@ -1,4 +1,4 @@
 export { NavItem } from './NavItem';
-export type { NavItemProps, NavItemVariant, NavItemSize, NavItemTheme, NavItemThemeOverrides } from './NavItem';
+export type { NavItemProps, NavItemTheme, NavItemThemeOverrides } from './NavItem';
 export { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarNav, SidebarNavGroup, SidebarToggle, useSidebarContext, } from './Sidebar';
 export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, } from './Sidebar';

package/dist/index.d.ts

@@ -18,4 +18,5 @@ export { default as Spinner } from './components/feedback/Spinner';
 export type { SpinnerProps, SpinnerSize, SpinnerColor, SpinnerThemeOverrides } from './components/feedback/Spinner/Spinner.types';
 export { default as Masonry, masonryTheme, getMasonryTheme } from './components/data-display/Masonry';
 export type { MasonryProps, MasonryThemeOverrides, MasonryTheme } from './components/data-display/Masonry';
+export * from './components/layout';
 export * from './components/forms';

package/dist/index.js

@@ -15,6 +15,8 @@ export { default as ProgressiveBlur } from './components/core/ProgressiveBlur/Pr
 export { default as Spinner } from './components/feedback/Spinner/Spinner.js';
 export { default as Masonry } from './components/data-display/Masonry/Masonry.js';
 export { getMasonryTheme, masonryTheme } from './components/data-display/Masonry/Masonry.theme.js';
+export { Draggable, Droppable } from './components/layout/DragDrop/DragDrop.js';
+export { Sortable, SortableItem } from './components/layout/Sortable/Sortable.js';
 export { Input } from './components/forms/Input/Input.js';
 export { inputTheme } from './components/forms/Input/Input.theme.js';
 export { InputOTP } from './components/forms/InputOTP/InputOTP.js';
@@ -28,7 +30,7 @@ export { formLabelTheme } from './components/forms/FormLabel/FormLabel.theme.js'
 export { InputAddress } from './components/forms/InputAddress/InputAddress.js';
 export { inputAddressTheme, styledInputAddressTheme } from './components/forms/InputAddress/InputAddress.theme.js';
 export { Radio } from './components/forms/Radio/Radio.js';
-export { radioTheme, useRadioTheme } from './components/forms/Radio/Radio.theme.js';
+export { radioTheme } from './components/forms/Radio/Radio.theme.js';
 export { Checkbox } from './components/forms/Checkbox/Checkbox.js';
 export { checkboxTheme } from './components/forms/Checkbox/Checkbox.theme.js';
 export { Switch } from './components/forms/Switch/Switch.js';

package/dist/node_modules/@heroicons/react/24/outline/esm/Bars3Icon.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+function Bars3Icon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ React.forwardRef(Bars3Icon);
+
+export { ForwardRef as default };

package/dist/node_modules/@heroicons/react/24/outline/esm/LockClosedIcon.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+function LockClosedIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ React.forwardRef(LockClosedIcon);
+
+export { ForwardRef as default };