flikkui 0.1.0-beta.2 → 0.1.0-beta.3

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

@@ -19,7 +19,7 @@ import React from 'react';
  * @property {PasswordStrengthIndicator} passwordStrengthIndicator - Password strength indicator configuration
  * @property {number} currencyDecimalPlaces - Number of decimal places for currency inputs
  */
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'className'> {
     /** The size of the input */
     size?: InputSize;
     /** The state of the input (default, disabled, invalid) */
@@ -43,7 +43,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     addonSuffix?: React.ReactNode;
     /** Keyboard shortcut to display on the right side */
     keyboardShortcut?: React.ReactNode;
-    /** Additional class name for the input */
+    /** Additional class name for the input (highest priority) */
     className?: string;
     /** Additional class name for the label */
     labelClassName?: string;
@@ -53,8 +53,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     wrapperClassName?: string;
     /** Additional class name for the input group */
     inputGroupClassName?: string;
-    /** Component-level theme overrides */
-    theme?: InputThemeOverrides;
     /** Whether the input is required */
     required?: boolean;
     /** Whether to show a toggle button for password fields. Only works when type="password" */
@@ -92,71 +90,50 @@ export interface PasswordStrengthIndicator {
  */
 export type PasswordStrength = 'weak' | 'moderate' | 'strong' | 'very-strong';
 /**
- * Theme overrides for the Input component
+ * Clean theme structure for Input component - following current Flikkui patterns
  */
-export interface InputThemeOverrides {
-    /** Style for the outermost wrapper */
-    wrapperStyle?: string;
-    /** Style for the input group container (input + addons) */
-    inputGroupStyle?: string;
-    /** Base style for the input element */
-    baseStyle?: string;
-    /** Size variants for the input */
-    sizes?: Partial<Record<InputSize, string>>;
-    /** State variants applied to the input group */
-    states?: Partial<Record<InputState, string>>;
-    /** Base style for the helper text */
-    helperText?: string;
-    /** Common style for both prefix and suffix addons */
-    addonStyle?: string;
-    /** Additional style for the addon prefix */
-    addonPrefixStyle?: string;
-    /** Additional style for the addon suffix */
-    addonSuffixStyle?: string;
-    /** Style for the keyboard shortcut */
-    keyboardShortcutStyle?: string;
-    /** Style for the left icon container */
-    leftIconStyle?: string;
-    /** Style for the right icon container */
-    rightIconStyle?: string;
-    /** Padding styles for icons */
-    iconPadding?: {
-        left?: string;
-        right?: string;
+export interface InputTheme {
+    wrapperStyle: string;
+    inputGroupStyle: string;
+    baseStyle: string;
+    sizes: Record<InputSize, string>;
+    states: Record<InputState, string>;
+    helperText: string;
+    leftIconStyle: string;
+    rightIconStyle: string;
+    iconPadding: {
+        left: string;
+        right: string;
     };
-    /** Style for the password toggle button */
-    passwordToggleStyle?: string;
-    /** Style for number buttons container */
-    numberButtonsContainerStyle?: string;
-    /** Base style for number buttons */
-    numberButtonStyle?: string;
-    /** Styles specific to input types */
-    typeStyles?: {
-        password?: {
-            toggleIconActive?: string;
-            toggleIconInactive?: string;
-        };
-        search?: {
-            iconStyle?: string;
+    addonStyle: string;
+    addonPrefixStyle: string;
+    addonSuffixStyle: string;
+    keyboardShortcutStyle: string;
+    passwordToggleStyle: string;
+    numberButtonsContainerStyle: string;
+    numberButtonStyle: string;
+    typeStyles: {
+        password: {
+            toggleIconActive: string;
+            toggleIconInactive: string;
         };
-        number?: {
-            incrementIconStyle?: string;
-            decrementIconStyle?: string;
+        search: {
+            iconStyle: string;
         };
-        currency?: {
-            symbolStyle?: string;
+        number: {
+            incrementIconStyle: string;
+            decrementIconStyle: string;
         };
     };
-    /** Styles for password strength indicator */
-    passwordStrengthIndicator?: {
-        containerStyle?: string;
-        labelStyle?: string;
-        dotStyle?: string;
-        dotActiveStyle?: string;
-        dotInactiveStyle?: string;
-        strengthStyles?: Partial<Record<PasswordStrength, {
-            label?: string;
-            color?: string;
-        }>>;
+    passwordStrengthIndicator: {
+        containerStyle: string;
+        labelStyle: string;
+        dotStyle: string;
+        dotActiveStyle: string;
+        dotInactiveStyle: string;
+        strengthStyles: Record<PasswordStrength, {
+            label: string;
+            color: string;
+        }>;
     };
 }

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

@@ -1,3 +1,3 @@
 export { Input } from './Input';
-export type { InputProps, InputSize, InputState, InputThemeOverrides } from './Input.types';
+export type { InputProps, InputSize, InputState, InputTheme, InputType, PasswordStrength, PasswordStrengthIndicator } from './Input.types';
 export { inputTheme } from './Input.theme';

package/dist/components/forms/InputAddress/InputAddress.theme.d.ts

@@ -13,8 +13,8 @@ export declare const styledInputAddressTheme: {
     contentStyles?: string;
     countryWrapperStyles?: string;
     postalCodeWrapperStyles?: string;
-    countryInput?: InputThemeOverrides;
-    postalCodeInput?: InputThemeOverrides;
+    countryInput?: import("..").InputTheme;
+    postalCodeInput?: import("..").InputTheme;
     inputPositions?: import("./InputAddress.types").InputPositionStyles;
     chevronStyles?: string;
     baseInputGroupStyle?: string;

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

@@ -1,4 +1,4 @@
-import { InputProps, InputThemeOverrides } from '../../core/Input/Input.types';
+import { InputProps, InputTheme } from '../Input/Input.types';
 /**
  * InputAddress component props
  * @property {boolean} showCountrySelector - Whether to show the country selector
@@ -71,9 +71,9 @@ export interface InputAddressThemeOverrides {
     /** Styles for the postal code input wrapper */
     postalCodeWrapperStyles?: string;
     /** Country input theme overrides */
-    countryInput?: InputThemeOverrides;
+    countryInput?: InputTheme;
     /** Postal code input theme overrides */
-    postalCodeInput?: InputThemeOverrides;
+    postalCodeInput?: InputTheme;
     /** Styles for input positions */
     inputPositions?: InputPositionStyles;
     /** Styles for the chevron icon */

package/dist/components/forms/InputCreditCard/InputCreditCard.theme.d.ts

@@ -13,9 +13,9 @@ export declare const styledInputCreditCardTheme: {
     contentStyles?: string;
     expiryDateWrapperStyles?: string;
     cvcWrapperStyles?: string;
-    cardNumberInput?: import("..").InputThemeOverrides;
-    expiryDateInput?: import("..").InputThemeOverrides;
-    cvcInput?: import("..").InputThemeOverrides;
+    cardNumberInput?: import("..").InputTheme;
+    expiryDateInput?: import("..").InputTheme;
+    cvcInput?: import("..").InputTheme;
     inputPositions?: import("./InputCreditCard.types").InputPositionStyles;
     chevronStyles?: string;
     baseInputGroupStyle?: string;

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

@@ -1,4 +1,4 @@
-import { InputProps, InputThemeOverrides } from '../Input/Input.types';
+import { InputProps, InputTheme } from '../Input/Input.types';
 /**
  * InputCreditCard component props
  * @property {function} onCardNumberChange - Callback when card number changes
@@ -64,11 +64,11 @@ export interface InputCreditCardThemeOverrides {
     /** Styles for the CVC input wrapper */
     cvcWrapperStyles?: string;
     /** Card number input theme overrides */
-    cardNumberInput?: InputThemeOverrides;
+    cardNumberInput?: InputTheme;
     /** Expiry date input theme overrides */
-    expiryDateInput?: InputThemeOverrides;
+    expiryDateInput?: InputTheme;
     /** CVC input theme overrides */
-    cvcInput?: InputThemeOverrides;
+    cvcInput?: InputTheme;
     /** Styles for input positions */
     inputPositions?: InputPositionStyles;
     /** Styles for the chevron icon */

package/dist/components/forms/Radio/Radio.js

@@ -1,20 +1,20 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useState } from 'react';
-import { useRadioTheme } from './Radio.theme.js';
+import { radioTheme } from './Radio.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
+import { cn } from '../../../utils/cn.js';
 
 /**
  * Radio component for selecting one option from a group
  */
 var Radio = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, controlledChecked = _a.checked, onChange = _a.onChange, label = _a.label, description = _a.description, _b = _a.state, state = _b === void 0 ? "default" : _b, themeOverrides = _a.theme;
-    var _c = useState(false), internalChecked = _c[0], setInternalChecked = _c[1];
-    var theme = useRadioTheme(themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.baseStyle);
+    var id = _a.id, name = _a.name, value = _a.value, controlledChecked = _a.checked, onChange = _a.onChange, label = _a.label, description = _a.description, _b = _a.state, state = _b === void 0 ? "default" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, restProps = __rest(_a, ["id", "name", "value", "checked", "onChange", "label", "description", "state", "size", "className"]);
+    var _d = useState(false), internalChecked = _d[0], setInternalChecked = _d[1];
     // Determine if component is controlled or uncontrolled
     var isControlled = controlledChecked !== undefined;
     var isChecked = isControlled ? controlledChecked : internalChecked;
     // Derive state flags
     var isDisabled = state === "disabled";
-    var isInvalid = state === "invalid";
     var handleChange = function (e) {
         if (isDisabled)
             return;
@@ -23,19 +23,13 @@ var Radio = function (_a) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
     };
-    // Create state class for CSS selectors (like other components)
-    var stateClass = isInvalid
-        ? "state-invalid"
-        : isDisabled
-            ? "state-disabled"
-            : "state-default";
-    return (React__default.createElement("div", { className: "".concat(theme.container, " ").concat(stateClass) },
-        React__default.createElement("div", { className: theme.inputContainer },
-            React__default.createElement("input", { type: "radio", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? "".concat(id, "-description") : undefined, "aria-invalid": isInvalid, className: theme.input }),
-            React__default.createElement("div", { className: "".concat(theme.dot, " ").concat(isChecked ? 'opacity-100' : '') })),
-        (label || description) && (React__default.createElement("div", { className: theme.labelContainer },
-            label && React__default.createElement(FormLabel, { htmlFor: id, state: state }, label),
-            description && (React__default.createElement("div", { id: "".concat(id, "-description"), className: theme.description }, description))))));
+    return (React__default.createElement("div", __assign({ className: cn(radioTheme.baseStyle, className) }, restProps),
+        React__default.createElement("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]) },
+            React__default.createElement("input", { type: "radio", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? "".concat(id, "-description") : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(radioTheme.inputStyle, radioTheme.sizes[size]) }),
+            isChecked && (React__default.createElement("div", { className: cn(radioTheme.dotStyle, size === "sm" ? "size-2" : "size-3", "opacity-100") }))),
+        (label || description) && (React__default.createElement("div", { className: "cursor-pointer" },
+            label && (React__default.createElement(FormLabel, { htmlFor: id, className: "!mb-0", state: state }, label)),
+            description && (React__default.createElement("div", { id: "".concat(id, "-description"), className: radioTheme.descriptionStyle }, description))))));
 };
 
 export { Radio, Radio as default };

package/dist/components/forms/Radio/Radio.theme.d.ts

@@ -1,21 +1,5 @@
-import { RadioThemeConfig } from "./Radio.types";
+import { RadioTheme } from "./Radio.types";
 /**
  * Default theme configuration for the Radio component
  */
-export declare const radioTheme: RadioThemeConfig;
-/**
- * Utility function to merge default theme with overrides
- */
-export declare const useRadioTheme: (overrides?: Partial<RadioThemeConfig["baseStyle"]>) => {
-    container: string;
-    inputContainer: string;
-    labelContainer: string;
-    input: string;
-    dot: string;
-    description: string;
-    states?: {
-        default: string;
-        disabled: string;
-        invalid: string;
-    };
-};
+export declare const radioTheme: RadioTheme;

package/dist/components/forms/Radio/Radio.theme.js

@@ -1,25 +1,16 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
-
 /**
  * Default theme configuration for the Radio component
  */
 var radioTheme = {
-    baseStyle: {
-        container: "relative flex items-start gap-3",
-        inputContainer: "relative flex-shrink-0 size-6 flex items-center justify-center",
-        labelContainer: "cursor-pointer",
-        input: "size-6 appearance-none rounded-full border-2 border-gray-300 bg-white checked:border-primary-600 checked:bg-white disabled:border-gray-300 disabled:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 checked:outline-2 checked:outline-primary-100 checked:outline-offset-1 transition-all duration-400",
-        dot: "absolute pointer-events-none size-3 rounded-full bg-primary-600 opacity-0 checked:opacity-100 disabled:bg-gray-400 transition-all duration-400",
-        description: "text-sm text-text-secondary -mt-1",
-    },
-};
-/**
- * Utility function to merge default theme with overrides
- */
-var useRadioTheme = function (overrides) {
-    if (!overrides)
-        return radioTheme.baseStyle;
-    return __assign(__assign({}, radioTheme.baseStyle), overrides);
+    baseStyle: "relative flex items-start gap-3",
+    inputContainerStyle: "relative flex-shrink-0 flex items-center justify-center",
+    inputStyle: "appearance-none rounded-full border-2 border-gray-300 bg-white checked:border-primary-base checked:bg-white disabled:border-gray-300 disabled:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 checked:outline-2 checked:outline-primary-100 checked:outline-offset-1 transition-all duration-400 data-[state=disabled]:border-gray-300 data-[state=disabled]:bg-gray-100",
+    dotStyle: "absolute pointer-events-none rounded-full bg-primary-base opacity-0 transition-all duration-400",
+    descriptionStyle: "text-sm text-text-secondary mt-1",
+    sizes: {
+        sm: "size-5 mt-0.25",
+        md: "size-6"
+    }
 };
 
-export { radioTheme, useRadioTheme };
+export { radioTheme };

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

@@ -1,20 +1,16 @@
+import React from 'react';
 /**
  * State variants for the radio component
  */
-export type RadioState = 'default' | 'disabled' | 'invalid';
+export type RadioState = 'default' | 'disabled';
+/**
+ * Size variants for the radio component
+ */
+export type RadioSize = 'sm' | 'md';
 /**
  * Radio component props
- * @property {string} id - Unique identifier for the radio input
- * @property {string} name - Name for the radio input group
- * @property {string} value - Value for the radio input
- * @property {boolean} checked - Whether the radio is checked
- * @property {(checked: boolean, value: string) => void} onChange - Function called when the radio state changes
- * @property {string} label - Label text for the radio
- * @property {string} description - Optional description text
- * @property {RadioState} state - The state of the radio (default, disabled, invalid)
- * @property {RadioThemeOverrides} theme - Optional theme overrides
  */
-export interface RadioProps {
+export interface RadioProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
     id: string;
     name: string;
     value: string;
@@ -23,29 +19,17 @@ export interface RadioProps {
     label?: string;
     description?: string;
     state?: RadioState;
-    theme?: RadioThemeOverrides;
+    size?: RadioSize;
+    className?: string;
 }
 /**
  * Radio theme configuration
  */
-export interface RadioThemeConfig {
-    baseStyle: {
-        container: string;
-        inputContainer: string;
-        labelContainer: string;
-        input: string;
-        dot: string;
-        description: string;
-        states?: {
-            default: string;
-            disabled: string;
-            invalid: string;
-        };
-    };
-}
-/**
- * Radio theme overrides
- */
-export interface RadioThemeOverrides {
-    baseStyle?: Partial<RadioThemeConfig['baseStyle']>;
+export interface RadioTheme {
+    baseStyle: string;
+    inputContainerStyle: string;
+    inputStyle: string;
+    dotStyle: string;
+    descriptionStyle: string;
+    sizes: Record<RadioSize, string>;
 }

package/dist/components/forms/Select/Select.js

@@ -151,18 +151,10 @@ var SelectOptions = function (_a) {
         searchable && (React__default.createElement("div", { className: "sticky top-0 py-1 bg-white z-10 border-b border-neutral-100 ".concat(searchInputStyle), style: {
                 '--form-rounded': '0',
             } },
-            React__default.createElement(Input, { placeholder: "Search...", value: searchValue, onChange: handleSearchChange, type: "search", className: "border-none outline-none ring-0 shadow-none  [&:focus]:outline-none [&:focus]:ring-0 [&:focus]:border-none [&:focus-visible]:outline-none [&:focus-visible]:ring-0 [&:focus-visible]:border-none", leftIcon: React__default.createElement(SearchIcon, { size: "sm", className: "text-neutral-400 group-focus-within:text-neutral-900" }), wrapperClassName: "!border-none !outline-none !ring-0 !shadow-none", style: {
+            React__default.createElement(Input, { placeholder: "Search...", value: searchValue, onChange: handleSearchChange, type: "search", className: "w-full block bg-white border-none outline-none ring-0 shadow-none [&:focus]:outline-none [&:focus]:ring-0 [&:focus]:border-none [&:focus-visible]:outline-none [&:focus-visible]:ring-0 [&:focus-visible]:border-none", leftIcon: React__default.createElement(SearchIcon, { size: "sm", className: "text-neutral-400 group-focus-within:text-neutral-900" }), wrapperClassName: "!border-none !outline-none !ring-0 !shadow-none", inputGroupClassName: "!border-none !outline-none !ring-0 !shadow-none flex items-center", style: {
                     border: "none",
                     outline: "none",
                     boxShadow: "none"
-                }, theme: {
-                    baseStyle: "w-full block bg-white",
-                    states: {
-                        default: "!border-none !outline-none !ring-0 !shadow-none",
-                        disabled: "!border-none !outline-none !ring-0 !shadow-none",
-                    },
-                    inputGroupStyle: "!border-none !outline-none !ring-0 !shadow-none flex items-center",
-                    wrapperStyle: "!border-none !outline-none !ring-0 !shadow-none"
                 } }))),
         React__default.createElement("div", { style: { maxHeight: maxHeightValue, overflow: "auto" } }, children)))));
 };

package/dist/components/forms/Signature/Signature.js

@@ -2,6 +2,7 @@ import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useRef, useState, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { signatureTheme } from './Signature.theme.js';
+import Button from '../../core/Button/Button.js';
 
 var Signature = React__default.forwardRef(function (_a, ref) {
     var _b = _a.width, width = _b === void 0 ? 400 : _b, _c = _a.height, height = _c === void 0 ? 200 : _c, _d = _a.strokeColor, strokeColor = _d === void 0 ? '#000000' : _d, _e = _a.strokeWidth, strokeWidth = _e === void 0 ? 2 : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? 'transparent' : _f, className = _a.className, _g = _a.theme, customTheme = _g === void 0 ? {} : _g, onChange = _a.onChange, onClear = _a.onClear, _h = _a.showControls, showControls = _h === void 0 ? true : _h, _j = _a.placeholder, placeholder = _j === void 0 ? 'Sign here' : _j, props = __rest(_a, ["width", "height", "strokeColor", "strokeWidth", "backgroundColor", "className", "theme", "onChange", "onClear", "showControls", "placeholder"]);
@@ -110,10 +111,10 @@ var Signature = React__default.forwardRef(function (_a, ref) {
     }, []);
     return (React__default.createElement("div", __assign({ ref: ref, className: cn(theme.baseStyle, className), style: { width: width, height: height } }, props),
         React__default.createElement("canvas", { ref: canvasRef, className: theme.canvasStyle, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing }),
-        isEmpty && placeholder && (React__default.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none text-gray-400" }, placeholder)),
-        showControls && (React__default.createElement("div", { className: theme.controlsStyle },
-            React__default.createElement("button", { type: "button", className: theme.buttonStyle, onClick: clear }, "Clear"),
-            React__default.createElement("button", { type: "button", className: theme.buttonStyle, onClick: save, disabled: isEmpty }, "Save")))));
+        isEmpty && placeholder && (React__default.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none text-text-placeholder text-sm" }, placeholder)),
+        showControls && (React__default.createElement("div", { className: "absolute bottom-2 right-2 flex gap-1" },
+            React__default.createElement(Button, { size: "sm", variant: "clear", onClick: clear }, "Clear"),
+            React__default.createElement(Button, { size: "sm", variant: "outline", onClick: save, disabled: isEmpty }, "Download")))));
 });
 Signature.displayName = 'Signature';
 

package/dist/components/forms/Signature/Signature.theme.js

@@ -1,8 +1,6 @@
 var signatureTheme = {
-    baseStyle: 'relative border border-gray-300 rounded-lg bg-white',
+    baseStyle: 'relative border border-border rounded-[var(--form-rounded)] bg-white',
     canvasStyle: 'block w-full h-full cursor-crosshair',
-    controlsStyle: 'absolute top-2 right-2 flex gap-2',
-    buttonStyle: 'px-3 py-1 text-sm bg-white border border-gray-300 rounded hover:bg-gray-50 transition-colors',
 };
 
 export { signatureTheme };

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

@@ -2,14 +2,10 @@ import { HTMLAttributes } from 'react';
 export interface SignatureTheme {
     baseStyle: string;
     canvasStyle: string;
-    controlsStyle: string;
-    buttonStyle: string;
 }
 export interface SignatureThemeOverrides {
     baseStyle?: string;
     canvasStyle?: string;
-    controlsStyle?: string;
-    buttonStyle?: string;
 }
 export interface SignatureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Canvas width */

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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,8 @@
+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/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 };