no-frills-ui 0.0.14-alpha.0 → 0.0.14-alpha.1

package/lib-esm/components/Chip/Chip.d.ts

@@ -1,5 +1,7 @@
 interface ChipProps {
+    /** Label for the chip */
     label: string;
+    /** Callback when the close button is clicked */
     onCloseClick?: () => void;
 }
 export default function Chip(props: ChipProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib-esm/components/Chip/Chip.js

@@ -15,6 +15,7 @@ import constants from '../../shared/constants';
 import { Close } from '../../icons';
 const Container = styled.div `
     padding: 5px;
+    padding-left: 15px;
     border-radius: 16px;
     background-color: var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
     display: inline-flex;
@@ -23,7 +24,7 @@ const Container = styled.div `
     align-items: center;
 
     &:focus-within {
-        background-color: var(--light-grey, ${constants.LIGHT_GREY});
+        outline: 2px solid var(--primary-light, ${constants.PRIMARY_LIGHT});
     }
 `;
 const Button = styled.button `
@@ -42,6 +43,6 @@ export default function Chip(props) {
             onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
         }
     };
-    return (_jsxs(Container, Object.assign({}, rest, { onKeyUp: keyUpHandler, children: [label, _jsx(Button, { onClick: onCloseClick, children: _jsx(Close, { height: 20, width: 20 }) })] })));
+    return (_jsxs(Container, Object.assign({}, rest, { onKeyUp: keyUpHandler, children: [label, _jsx(Button, { onClick: onCloseClick, "aria-label": `Remove ${label}`, children: _jsx(Close, { height: 20, width: 20 }) })] })));
 }
 //# sourceMappingURL=Chip.js.map

package/lib-esm/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAOpC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;kDAGsB,SAAS,CAAC,kBAAkB;;;;;;;8CAOhC,SAAS,CAAC,UAAU;;CAEjE,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;+CAEmB,SAAS,CAAC,eAAe;;;;;;CAMvE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAgB;IACzC,MAAM,EAAE,KAAK,EAAE,YAAY,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAxC,yBAAgC,CAAQ,CAAC;IAE/C,MAAM,YAAY,GAA8C,CAAC,CAAC,EAAE,EAAE;QAClE,IAAI,CAAC,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE,EAAE,CAAC;YACtC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;QACrB,CAAC;IACL,CAAC,CAAA;IAED,OAAO,CACH,MAAC,SAAS,oBAAK,IAAI,IAAE,OAAO,EAAE,YAAY,aACrC,KAAK,EACN,KAAC,MAAM,IAAC,OAAO,EAAE,YAAY,YAAE,KAAC,KAAK,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,GAAI,GAAS,KAChE,CACf,CAAC;AACN,CAAC"}
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AASpC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;kDAIsB,SAAS,CAAC,kBAAkB;;;;;;;kDAO5B,SAAS,CAAC,aAAa;;CAExE,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;+CAEmB,SAAS,CAAC,eAAe;;;;;;CAMvE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAgB;IACzC,MAAM,EAAE,KAAK,EAAE,YAAY,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAxC,yBAAgC,CAAQ,CAAC;IAE/C,MAAM,YAAY,GAA8C,CAAC,CAAC,EAAE,EAAE;QAClE,IAAI,CAAC,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE,EAAE,CAAC;YACtC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;QACrB,CAAC;IACL,CAAC,CAAA;IAED,OAAO,CACH,MAAC,SAAS,oBAAK,IAAI,IAAE,OAAO,EAAE,YAAY,aACrC,KAAK,EACN,KAAC,MAAM,IAAC,OAAO,EAAE,YAAY,gBAAc,UAAU,KAAK,EAAE,YACxD,KAAC,KAAK,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,GAAI,GAC3B,KACD,CACf,CAAC;AACN,CAAC"}

package/lib-esm/components/ChipInput/ChipInput.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+type ChipInputProps = PropTypes.InferProps<typeof ChipInput.propTypes>;
+/**
+ * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.
+ * @component
+ * @example
+ * ```tsx
+ * <ChipInput
+ *   value={['tag1', 'tag2']}
+ *   onChange={(newTags) => console.log(newTags)}
+ *   label="Add tags"
+ *   errorText="At least one tag is required"
+ * />
+ * ```
+ */
+declare function ChipInput(props: ChipInputProps & React.AllHTMLAttributes<HTMLInputElement>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace ChipInput {
+    var propTypes: {
+        /** Label for the field */
+        label: PropTypes.Validator<string>;
+        /** Error message for the field */
+        errorText: PropTypes.Requireable<string>;
+        /** Values to display as chips */
+        value: PropTypes.Requireable<string[]>;
+        /** Callback when chips change */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    var defaultProps: {
+        value: any[];
+    };
+}
+export default ChipInput;

package/lib-esm/components/ChipInput/ChipInput.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import constants from '../../shared/constants';
+import Chip from '../Chip/Chip';
+import { DragAndDrop, ORIENTATION } from '../DragAndDrop';
+// Label component for the ChipInput
+const Label = styled.label `
+    display: inline-flex;
+    flex-direction: column;
+    flex: 1;
+    position: relative;
+    margin: 10px 5px;
+    color: inherit;
+    padding: 0 8px;
+    width: 250px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
+    background-color: var(--background, ${constants.BACKGROUND});
+
+    /** Focused */
+    &:has(:focus), &:has(:active) {
+        border-color: var(--primary, ${constants.PRIMARY});
+        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
+    }
+
+    &:has(:focus) > span, &:has(:active) > span {
+        color: var(--primary, ${constants.PRIMARY});
+    }
+
+    /** Disabled */
+    &:has(:disabled) {
+        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
+        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
+    }
+    
+    &:has(:disabled) > span {
+        color: #777;
+    }
+
+    /** Invalid */
+    &:has(:focus:invalid) {
+        border-color: var(--error, ${constants.ERROR});
+        box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
+    }
+
+    ${props => props.touched ? `
+        &:has(:invalid) {
+            border-color: var(--error, ${constants.ERROR});
+        }
+    
+        &:has(:invalid) > span {
+            color: var(--error, ${constants.ERROR});
+        }
+        ` : ''}
+    
+    /** Error */
+    ${props => props.errorText ? `
+        border-color: var(--error, ${constants.ERROR});
+
+        & > span {
+            color: var(--error, ${constants.ERROR});
+        }
+        ` : ''}
+
+    /** Required */
+    &:has(:required) > span:after {
+        content: '*';
+        margin-left: 2px;
+        color: var(--error, ${constants.ERROR});
+    }
+
+    & > input {
+        border: none;
+        outline: none;
+        width: 100%;
+        line-height: 30px;
+        min-height: 30px;
+    }
+
+    /** Label Animation */
+    & > span {
+        position: absolute;
+        padding: 0 5px;
+        top: 0px;
+        left: 4px;
+        font-size: 14px;
+        line-height: 32px;
+        transition: all 300ms ease;
+    }
+
+    &:has(:focus) > span, &:has(:placeholder-shown) > span {
+        top: -8px;
+        background: var(--background, ${constants.BACKGROUND});
+        font-size: 12px;
+        line-height: 14px;
+    }
+
+    ${props => props.text !== '' ? `
+    & > span {
+        top: -8px;
+        background: var(--background, ${constants.BACKGROUND});
+        font-size: 12px;
+        line-height: 14px;
+    }
+    ` : ''}
+`;
+// Error message container
+const ErrorContainer = styled.div `
+    color: var(--error, ${constants.ERROR});
+    padding-top: 3px;
+    font-size: 12px;
+    line-height: 14px;
+    margin-left: 3px;
+`;
+/**
+ * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.
+ * @component
+ * @example
+ * ```tsx
+ * <ChipInput
+ *   value={['tag1', 'tag2']}
+ *   onChange={(newTags) => console.log(newTags)}
+ *   label="Add tags"
+ *   errorText="At least one tag is required"
+ * />
+ * ```
+ */
+export default function ChipInput(props) {
+    const [text, setText] = useState('');
+    const [touched, setTouched] = useState(false);
+    const [value, setValue] = useState(props.value);
+    const InputRef = React.useRef(null);
+    // Sync internal value with props.value
+    useEffect(() => {
+        setValue(props.value);
+    }, [props.value]);
+    /**
+     * Update the chip values and notify changes.
+     * @param newValue The new array of chip values
+     */
+    const updateValue = (newValue) => {
+        var _a;
+        const deduped = Array.from(new Set(newValue));
+        setValue(deduped);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, deduped);
+    };
+    /**
+     * Marks the input as touched on focus.
+     * @param e React focus event
+     */
+    const handleFocus = (e) => {
+        setTouched(true);
+        if (props.onFocus) {
+            props.onFocus(e);
+        }
+    };
+    /**
+     * Change handler for the input field.
+     * @param e React change event
+     */
+    const handleChange = (e) => {
+        setText(e.target.value);
+    };
+    /**
+     * Adds a new chip on Enter key press.
+     * @param e React keyboard event
+     */
+    const handleKeyUp = (e) => {
+        if (e.key === 'Enter' && text.trim() !== '') {
+            const newValue = [...value, text.trim()];
+            updateValue(newValue);
+            setText('');
+        }
+    };
+    /**
+     * Removes a chip from the list.
+     * @param chipToRemove The chip value to remove
+     */
+    const removeChip = (chipToRemove) => {
+        const newValue = value.filter(chip => chip !== chipToRemove);
+        updateValue(newValue);
+    };
+    /**
+     * Moves a chip from one position to another.
+     * @param start The starting index of the item to move
+     * @param end The ending index where the item should be placed
+     */
+    const onDrop = (start, end) => {
+        // Clone existing elements
+        const newItems = [...value];
+        // Remove the element to be moved
+        const item = newItems.splice(start, 1);
+        // Add it back at the required position
+        newItems.splice(end, 0, item[0]);
+        // Update
+        updateValue(newItems);
+    };
+    // Render the component
+    return (_jsxs(Label, { text: text, touched: touched, errorText: props.errorText, children: [_jsx("input", Object.assign({}, props, { ref: InputRef, type: "text", value: text, onChange: handleChange, onFocus: handleFocus, onKeyUp: handleKeyUp, required: props.required && value.length === 0 })), _jsx("div", { children: (value === null || value === void 0 ? void 0 : value.length) > 0 && (_jsx(DragAndDrop, { orientation: ORIENTATION.HORIZONTAL, onDrop: onDrop, children: value.map((chip) => (_jsx(Chip, { label: chip, onCloseClick: () => removeChip(chip) }, chip))) })) }), _jsx("span", { children: props.label }), props.errorText && _jsx(ErrorContainer, { children: props.errorText })] }));
+}
+ChipInput.propTypes = {
+    /** Label for the field */
+    label: PropTypes.string.isRequired,
+    /** Error message for the field */
+    errorText: PropTypes.string,
+    /** Values to display as chips */
+    value: PropTypes.arrayOf(PropTypes.string),
+    /** Callback when chips change */
+    onChange: PropTypes.func,
+};
+ChipInput.defaultProps = {
+    value: [],
+};
+//# sourceMappingURL=ChipInput.js.map

package/lib-esm/components/ChipInput/ChipInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipInput.js","sourceRoot":"","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"names":[],"mappings":"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"}

package/lib-esm/components/ChipInput/index.d.ts

@@ -0,0 +1 @@
+export { default as ChipInput } from './ChipInput';

package/lib-esm/components/ChipInput/index.js

@@ -0,0 +1,2 @@
+export { default as ChipInput } from './ChipInput';
+//# sourceMappingURL=index.js.map

package/lib-esm/components/ChipInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChipInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/lib-esm/components/DragAndDrop/DragAndDrop.d.ts

@@ -8,10 +8,37 @@ type DragAndDropProps = {
     /** Shows drag indicator against each list item */
     showIndicator: boolean;
 } & PropsWithChildren<{}>;
+/**
+ * A drag and drop container component that enables reordering of child elements.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DragAndDrop
+ *   orientation={ORIENTATION.VERTICAL}
+ *   onDrop={(start, end) => handleReorder(start, end)}
+ *   showIndicator={true}
+ * >
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </DragAndDrop>
+ * ```
+ *
+ * @param {DragAndDropProps} props - The component props
+ * @param {ORIENTATION} props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.
+ * @param {(start: number, end: number) => void} props.onDrop - Callback fired when an item is dropped, receives the start and end indices
+ * @param {boolean} props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.
+ * @param {React.ReactNode} props.children - Child elements to be rendered as draggable items
+ *
+ * @returns {JSX.Element} A draggable container with reorderable items
+ */
 declare function DragAndDrop(props: DragAndDropProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare namespace DragAndDrop {
     var defaultProps: {
+        /** Orientation of the list layout */
         orientation: ORIENTATION;
+        /** Whether to display drag indicators for each list item */
         showIndicator: boolean;
     };
 }

package/lib-esm/components/DragAndDrop/DragAndDrop.js

@@ -3,23 +3,59 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import DragItem from './DragItem';
 import { ORIENTATION, DragContext } from './types';
+/** Container Component */
 const Container = styled.div `
     flex: 1;
     display: flex;
     position: relative;
+    flex-wrap: wrap;
     flex-direction: ${props => props.orientation === ORIENTATION.HORIZONTAL ? 'row' : 'column'};
 `;
+/**
+ * A drag and drop container component that enables reordering of child elements.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DragAndDrop
+ *   orientation={ORIENTATION.VERTICAL}
+ *   onDrop={(start, end) => handleReorder(start, end)}
+ *   showIndicator={true}
+ * >
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </DragAndDrop>
+ * ```
+ *
+ * @param {DragAndDropProps} props - The component props
+ * @param {ORIENTATION} props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.
+ * @param {(start: number, end: number) => void} props.onDrop - Callback fired when an item is dropped, receives the start and end indices
+ * @param {boolean} props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.
+ * @param {React.ReactNode} props.children - Child elements to be rendered as draggable items
+ *
+ * @returns {JSX.Element} A draggable container with reorderable items
+ */
 export default function DragAndDrop(props) {
     const { orientation, children, onDrop, showIndicator } = props;
     const [startIndex, setStartIndex] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragOver, setDragOver] = useState(null);
+    /**
+     * Drop handler invoked when a draggable item is released.
+     * @param index
+     */
     const drop = (index) => {
         startIndex !== null && (onDrop === null || onDrop === void 0 ? void 0 : onDrop(startIndex, index));
         setStartIndex(null);
+        setIsDragging(false);
     };
-    return (_jsx(DragContext.Provider, { value: { startIndex, setStartIndex, drop }, children: _jsx(Container, { orientation: orientation, children: React.Children.map(children, (child, index) => (_jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, children: child }))) }) }));
+    return (_jsx(DragContext.Provider, { value: { startIndex, setStartIndex, drop, isDragging, setIsDragging, setDragOver }, children: _jsx(Container, { orientation: orientation, children: React.Children.map(children, (child, index) => (_jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, dragOver: dragOver, children: child }))) }) }));
 }
 DragAndDrop.defaultProps = {
+    /** Orientation of the list layout */
     orientation: ORIENTATION.VERTICAL,
+    /** Whether to display drag indicators for each list item */
     showIndicator: false,
 };
 //# sourceMappingURL=DragAndDrop.js.map

package/lib-esm/components/DragAndDrop/DragAndDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../src/components/DragAndDrop/DragAndDrop.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWnD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA4B;;;;sBAIlC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;CAC7F,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAuB;IACvD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,IAAI,CAAC,CAAC;IAE3D,MAAM,IAAI,GAAG,CAAC,KAAa,EAAE,EAAE;QAC3B,UAAU,KAAK,IAAI,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,UAAU,EAAE,KAAK,CAAC,CAAA,CAAC;QACnD,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,CAAA;IAED,OAAO,CAAC,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,YACpE,KAAC,SAAS,IAAC,WAAW,EAAE,WAAW,YAC9B,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,YACzE,KAAK,GACC,CACd,CAAC,GACM,GACO,CAAC,CAAC;AAC7B,CAAC;AAED,WAAW,CAAC,YAAY,GAAG;IACvB,WAAW,EAAE,WAAW,CAAC,QAAQ;IACjC,aAAa,EAAE,KAAK;CACvB,CAAA"}
+{"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../src/components/DragAndDrop/DragAndDrop.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWnD,0BAA0B;AAC1B,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA4B;;;;;sBAKlC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;CAC7F,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAuB;IACvD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,IAAI,CAAC,CAAC;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAS,IAAI,CAAC,CAAC;IAEvD;;;OAGG;IACH,MAAM,IAAI,GAAG,CAAC,KAAa,EAAE,EAAE;QAC3B,UAAU,KAAK,IAAI,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,UAAU,EAAE,KAAK,CAAC,CAAA,CAAC;QACnD,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,aAAa,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAA;IAED,OAAO,CAAC,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,YAC5G,KAAC,SAAS,IAAC,WAAW,EAAE,WAAW,YAC9B,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,YAC7F,KAAK,GACC,CACd,CAAC,GACM,GACO,CAAC,CAAC;AAC7B,CAAC;AAED,WAAW,CAAC,YAAY,GAAG;IACvB,qCAAqC;IACrC,WAAW,EAAE,WAAW,CAAC,QAAQ;IACjC,4DAA4D;IAC5D,aAAa,EAAE,KAAK;CACvB,CAAA"}

package/lib-esm/components/DragAndDrop/DragItem.d.ts

@@ -1,9 +1,46 @@
 import { PropsWithChildren } from 'react';
 import { ORIENTATION } from './types';
 interface DragItemProps {
+    /** Position index of the draggable item */
     index: number;
+    /** Orientation of the drag operation (VERTICAL or HORIZONTAL) */
     orientation: ORIENTATION;
+    /** Whether to show a drag handle indicator instead of making the entire item draggable */
     showIndicator: boolean;
+    /** The index of the item currently being dragged over */
+    dragOver: number;
 }
+/**
+ * A draggable item component that supports both mouse and touch interactions for drag-and-drop functionality.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DragItem
+ *   index={0}
+ *   orientation={ORIENTATION.VERTICAL}
+ *   showIndicator={true}
+ *   dragOver={-1}
+ * >
+ *   <div>Draggable content</div>
+ * </DragItem>
+ * ```
+ *
+ * @param props - The component props
+ * @param props.index - The position index of this item in the draggable list
+ * @param props.orientation - The orientation of the drag operation (VERTICAL or HORIZONTAL)
+ * @param props.showIndicator - Whether to show a drag handle indicator instead of making the entire item draggable
+ * @param props.dragOver - The index of the item currently being dragged over
+ * @param props.children - The content to be rendered inside the draggable item
+ *
+ * @remarks
+ * - Uses the DragContext to manage drag state across items
+ * - Provides visual feedback with borders during drag operations
+ * - Supports haptic feedback (vibration) on touch devices
+ * - For touch devices, requires a 200ms hold before drag starts
+ * - When showIndicator is true, only the drag handle can initiate drag operations
+ *
+ * @returns A draggable item with optional drag indicator and visual feedback
+ */
 export default function DragItem(props: PropsWithChildren<DragItemProps>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/lib-esm/components/DragAndDrop/DragItem.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useContext, useState } from 'react';
+import { useContext, useState, useEffect } from 'react';
 import styled from '@emotion/styled';
 import constants from '../../shared/constants';
 import { ORIENTATION, DragContext } from './types';
 import { DragIndicator } from '../../icons';
+/** Styled component for the draggable item container */
 const Item = styled.div `
     cursor: ${props => props.showIndicator ? 'default' : 'move'};
     display: flex;
+    user-select: ${props => props.showIndicator ? 'auto' : 'none'};
     border-top: 2px solid ${props => props.orientation === ORIENTATION.VERTICAL && props.active > 0
     ? constants.PRIMARY : 'transparent'};
     border-bottom: 2px solid ${props => props.orientation === ORIENTATION.VERTICAL && props.active < 0
@@ -15,35 +17,171 @@ const Item = styled.div `
     ? constants.PRIMARY : 'transparent'};
     border-right: 2px solid ${props => props.orientation === ORIENTATION.HORIZONTAL && props.active < 0
     ? constants.PRIMARY : 'transparent'};
+    opacity: ${props => props.dragging ? 0.5 : 1};
 `;
+/** Styled component for the drag handle indicator */
 const DragKnob = styled.div `
     padding-top: 8px;
     cursor: move;
+    touch-action: none;
     color: var(--disabled, ${constants.DISABLED});
 `;
+/** Container for the children */
 const Container = styled.div `
     flex: 1;
 `;
+/**
+ * A draggable item component that supports both mouse and touch interactions for drag-and-drop functionality.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DragItem
+ *   index={0}
+ *   orientation={ORIENTATION.VERTICAL}
+ *   showIndicator={true}
+ *   dragOver={-1}
+ * >
+ *   <div>Draggable content</div>
+ * </DragItem>
+ * ```
+ *
+ * @param props - The component props
+ * @param props.index - The position index of this item in the draggable list
+ * @param props.orientation - The orientation of the drag operation (VERTICAL or HORIZONTAL)
+ * @param props.showIndicator - Whether to show a drag handle indicator instead of making the entire item draggable
+ * @param props.dragOver - The index of the item currently being dragged over
+ * @param props.children - The content to be rendered inside the draggable item
+ *
+ * @remarks
+ * - Uses the DragContext to manage drag state across items
+ * - Provides visual feedback with borders during drag operations
+ * - Supports haptic feedback (vibration) on touch devices
+ * - For touch devices, requires a 200ms hold before drag starts
+ * - When showIndicator is true, only the drag handle can initiate drag operations
+ *
+ * @returns A draggable item with optional drag indicator and visual feedback
+ */
 export default function DragItem(props) {
-    const { index, orientation, children, showIndicator } = props;
+    const { index, orientation, children, showIndicator, dragOver } = props;
     const [active, setActive] = useState(0);
+    const [touchTimer, setTouchTimer] = useState(null);
     const context = useContext(DragContext);
+    /**
+     * Vibrate the device for haptic feedback
+     * @param duration Duration of the vibration in milliseconds
+     */
+    const vibrate = (duration) => {
+        if (navigator.vibrate) {
+            navigator.vibrate(duration);
+        }
+    };
+    /**
+     * Drag start event handler
+     * @param e Event
+     */
     const dragStartHandler = (e) => {
         context.setStartIndex(index);
+        context.setIsDragging(true);
     };
+    /**
+     * Drag over event handler
+     * @param e Event
+     */
     const dragOverHandler = (e) => {
         e.preventDefault();
         e.stopPropagation();
         setActive(context.startIndex - index);
     };
+    /**
+     * Drag leave event handler
+     */
     const dragExitHandler = () => {
         setActive(0);
     };
+    /**
+     * Drop event handler
+     * @param e Event
+     */
     const dropHandler = (e) => {
         e.preventDefault();
         setActive(0);
         context.drop(index);
+        context.setIsDragging(false);
+    };
+    /**
+     * Touch start event handler
+     * @param e Event
+     */
+    const touchStartHandler = (e) => {
+        const timer = setTimeout(() => {
+            context.setStartIndex(index);
+            context.setIsDragging(true);
+            context.setDragOver(index);
+            document.body.style.overflow = 'hidden';
+            vibrate(50);
+        }, 200);
+        setTouchTimer(timer);
+    };
+    /**
+     * Touch move event handler
+     * @param e Event
+     * @returns void
+     */
+    const touchMoveHandler = (e) => {
+        var _a;
+        const touch = e.touches[0];
+        if (!touch)
+            return;
+        if (context.isDragging) {
+            e.preventDefault();
+            // get the element under the touch point
+            const el = document.elementFromPoint(touch.clientX, touch.clientY);
+            const overAttr = (_a = el === null || el === void 0 ? void 0 : el.closest('[data-drag-index]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-drag-index');
+            const overIndex = overAttr != null ? parseInt(overAttr, 10) : null;
+            // if we know which index we're over, update visual state
+            if (overIndex !== null) {
+                context.setDragOver(overIndex);
+            }
+        }
+        else if (touchTimer) {
+            clearTimeout(touchTimer);
+            setTouchTimer(null);
+        }
+    };
+    /**
+     * Touch end event handler
+     * @param e Event
+     */
+    const touchEndHandler = (e) => {
+        if (touchTimer) {
+            clearTimeout(touchTimer);
+            setTouchTimer(null);
+        }
+        if (context.isDragging) {
+            context.drop(dragOver);
+            vibrate(50);
+            context.setIsDragging(false);
+            document.body.style.overflow = 'auto';
+        }
     };
-    return _jsxs(Item, { draggable: !showIndicator, showIndicator: showIndicator, active: active, orientation: orientation, onDragStart: !showIndicator && dragStartHandler, onDragOver: dragOverHandler, onDragLeave: dragExitHandler, onDrop: dropHandler, children: [showIndicator && _jsx(DragKnob, { draggable: true, onDragStart: dragStartHandler, children: _jsx(DragIndicator, {}) }), _jsx(Container, { children: children })] });
+    /** Cleanup touch timer on unmount */
+    useEffect(() => {
+        return () => {
+            if (touchTimer)
+                clearTimeout(touchTimer);
+            document.body.style.overflow = 'auto';
+        };
+    }, [touchTimer]);
+    /** Update active state based on dragOver changes */
+    useEffect(() => {
+        if (context.isDragging && dragOver === index) {
+            setActive(context.startIndex - index);
+        }
+        else {
+            setActive(0);
+        }
+    }, [dragOver, context.startIndex, index, context.isDragging]);
+    return _jsxs(Item, { draggable: !showIndicator, showIndicator: showIndicator, active: active, dragging: context.isDragging && context.startIndex === index, orientation: orientation, "data-drag-index": index, onDragStart: !showIndicator ? dragStartHandler : undefined, onDragOver: dragOverHandler, onDragLeave: dragExitHandler, onDrop: dropHandler, onTouchStart: !showIndicator ? touchStartHandler : undefined, onTouchMove: touchMoveHandler, onTouchEnd: touchEndHandler, onTouchCancel: touchEndHandler, children: [showIndicator && _jsx(DragKnob, { draggable: true, onDragStart: dragStartHandler, onTouchStart: touchStartHandler, children: _jsx(DragIndicator, {}) }), _jsx(Container, { children: children })] });
 }
 //# sourceMappingURL=DragItem.js.map