@coveord/plasma-mantine 56.17.0 → 56.20.0

package/dist/cjs/components/Collection/Collection.js

@@ -13,17 +13,17 @@ var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _jsxruntime = require("react/jsx-runtime");
-var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _core = require("@dnd-kit/core");
 var _modifiers = require("@dnd-kit/modifiers");
 var _sortable = require("@dnd-kit/sortable");
 var _core1 = require("@mantine/core");
 var _hooks = require("@mantine/hooks");
 var _createFactoryComponent = require("../../utils/createFactoryComponent.js");
-var _Button = require("../Button/Button.js");
 var _Collectionmodulecss = /*#__PURE__*/ _interop_require_default._(require("./Collection.module.css"));
+var _CollectionAddButton = require("./CollectionAddButton.js");
 var _CollectionContext = require("./CollectionContext.js");
 var _CollectionItem = require("./CollectionItem.js");
+var _CollectionLayouts = require("./layouts/CollectionLayouts.js");
 var defaultProps = {
     draggable: false,
     addLabel: 'Add item',
@@ -38,7 +38,7 @@ var defaultProps = {
     }
 };
 var Collection = function(props) {
-    var _useProps = (0, _core1.useProps)('Collection', defaultProps, props), value = _useProps.value, onChange = _useProps.onChange, onRemoveItem = _useProps.onRemoveItem, onReorderItem = _useProps.onReorderItem, onInsertItem = _useProps.onInsertItem, disabled = _useProps.disabled, readOnly = _useProps.readOnly, draggable = _useProps.draggable, children = _useProps.children, gap = _useProps.gap, required = _useProps.required, newItem = _useProps.newItem, addLabel = _useProps.addLabel, addDisabledTooltip = _useProps.addDisabledTooltip, allowAdd = _useProps.allowAdd, label = _useProps.label, labelProps = _useProps.labelProps, withAsterisk = _useProps.withAsterisk, description = _useProps.description, descriptionProps = _useProps.descriptionProps, error = _useProps.error, errorProps = _useProps.errorProps, getItemId = _useProps.getItemId, ref = _useProps.ref, // Style props
+    var _useProps = (0, _core1.useProps)('Collection', defaultProps, props), value = _useProps.value, onChange = _useProps.onChange, onRemoveItem = _useProps.onRemoveItem, onReorderItem = _useProps.onReorderItem, onInsertItem = _useProps.onInsertItem, disabled = _useProps.disabled, readOnly = _useProps.readOnly, draggable = _useProps.draggable, children = _useProps.children, columns = _useProps.columns, layout = _useProps.layout, gap = _useProps.gap, required = _useProps.required, newItem = _useProps.newItem, addLabel = _useProps.addLabel, addDisabledTooltip = _useProps.addDisabledTooltip, allowAdd = _useProps.allowAdd, label = _useProps.label, labelProps = _useProps.labelProps, withAsterisk = _useProps.withAsterisk, description = _useProps.description, descriptionProps = _useProps.descriptionProps, error = _useProps.error, errorProps = _useProps.errorProps, getItemId = _useProps.getItemId, ref = _useProps.ref, // Style props
     style = _useProps.style, className = _useProps.className, classNames = _useProps.classNames, styles = _useProps.styles, unstyled = _useProps.unstyled, others = _object_without_properties._(_useProps, [
         "value",
         "onChange",
@@ -49,6 +49,8 @@ var Collection = function(props) {
         "readOnly",
         "draggable",
         "children",
+        "columns",
+        "layout",
         "gap",
         "required",
         "newItem",
@@ -70,6 +72,13 @@ var Collection = function(props) {
         "styles",
         "unstyled"
     ]);
+    // Runtime validation: ensure columns and children are mutually exclusive
+    if (columns && children) {
+        throw new Error('Collection: Cannot use both "columns" and "children" props.');
+    }
+    if (layout && !columns) {
+        throw new Error('Collection: "layout" prop can only be used with "columns" prop.');
+    }
     var getStyles = (0, _core1.useStyles)({
         name: 'Collection',
         classes: _Collectionmodulecss.default,
@@ -84,13 +93,14 @@ var Collection = function(props) {
         coordinateGetter: _sortable.sortableKeyboardCoordinates
     }));
     var canEdit = !disabled && !readOnly;
-    var hasOnlyOneItem = value.length === 1;
+    var items = value !== null && value !== void 0 ? value : [];
+    var hasOnlyOneItem = items.length === 1;
     /**
      * Enforcing onChange when the value is modified will make sure the errors are carried through.
      */ (0, _hooks.useDidUpdate)(function() {
-        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(items);
     }, [
-        JSON.stringify(value)
+        JSON.stringify(items)
     ]);
     var isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;
     var _label = label ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Input.Label, _object_spread_props._(_object_spread._({
@@ -113,43 +123,13 @@ var Collection = function(props) {
             _description
         ]
     }) : null;
-    var standardizedItems = value.map(function(item, index) {
+    var standardizedItems = items.map(function(item, index) {
         var _getItemId;
         return {
             id: (_getItemId = getItemId === null || getItemId === void 0 ? void 0 : getItemId(item, index)) !== null && _getItemId !== void 0 ? _getItemId : String(index),
             data: item
         };
     });
-    var items = standardizedItems.map(function(item, index) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollectionItem.CollectionItem, {
-            id: item.id,
-            disabled: !canEdit,
-            draggable: draggable,
-            onRemove: function() {
-                return onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
-            },
-            removable: !(isRequired && hasOnlyOneItem),
-            children: children(item.data, index)
-        }, item.id);
-    });
-    var _allowAdd;
-    var addAllowed = typeof allowAdd === 'boolean' ? allowAdd : (_allowAdd = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(value)) !== null && _allowAdd !== void 0 ? _allowAdd : true;
-    var _addButton = canEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Box, {
-        className: _Collectionmodulecss.default.addButtonContainer,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button.Quaternary, {
-            leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconPlus, {
-                size: 16
-            }),
-            onClick: function() {
-                var newItemValue = typeof newItem === 'function' ? newItem() : newItem;
-                var _value_length;
-                onInsertItem(newItemValue, (_value_length = value === null || value === void 0 ? void 0 : value.length) !== null && _value_length !== void 0 ? _value_length : 0);
-            },
-            disabled: !addAllowed,
-            disabledTooltip: addDisabledTooltip,
-            children: addLabel
-        })
-    }) : null;
     var getIndex = function(id) {
         return standardizedItems.findIndex(function(item) {
             return item.id === id;
@@ -168,6 +148,81 @@ var Collection = function(props) {
             }
         }
     };
+    var _allowAdd;
+    var addAllowed = typeof allowAdd === 'boolean' ? allowAdd : (_allowAdd = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(items)) !== null && _allowAdd !== void 0 ? _allowAdd : true;
+    var handleAdd = function() {
+        var newItemValue = typeof newItem === 'function' ? newItem() : newItem;
+        var _items_length;
+        onInsertItem === null || onInsertItem === void 0 ? void 0 : onInsertItem(newItemValue, (_items_length = items === null || items === void 0 ? void 0 : items.length) !== null && _items_length !== void 0 ? _items_length : 0);
+    };
+    var _addButton = canEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollectionAddButton.CollectionAddButton, {
+        addLabel: addLabel,
+        addDisabledTooltip: addDisabledTooltip,
+        addAllowed: addAllowed,
+        onAdd: handleAdd
+    }) : null;
+    // Column-based layout pattern
+    if (columns) {
+        var Layout = layout || _CollectionLayouts.CollectionLayouts.Horizontal;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollectionContext.CollectionProvider, {
+            value: {
+                getStyles: getStyles,
+                columns: columns
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.DndContext, {
+                onDragEnd: handleDragEnd,
+                sensors: sensors,
+                modifiers: [
+                    _modifiers.restrictToVerticalAxis,
+                    _modifiers.restrictToParentElement
+                ],
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_sortable.SortableContext, {
+                    items: standardizedItems,
+                    strategy: _sortable.verticalListSortingStrategy,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Box, _object_spread_props._(_object_spread._({
+                        ref: ref
+                    }, others, getStyles('root')), {
+                        children: [
+                            _header,
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(Layout, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(Layout.Header, {
+                                        draggable: draggable && canEdit,
+                                        removable: canEdit && !(isRequired && hasOnlyOneItem)
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(Layout.Body, {
+                                        items: items,
+                                        onRemove: canEdit ? onRemoveItem : undefined,
+                                        removable: canEdit && !(isRequired && hasOnlyOneItem),
+                                        draggable: draggable && canEdit,
+                                        disabled: disabled,
+                                        readOnly: readOnly,
+                                        getItemId: getItemId,
+                                        gap: gap
+                                    })
+                                ]
+                            }),
+                            _addButton,
+                            _error
+                        ]
+                    }))
+                })
+            })
+        });
+    }
+    // Legacy children render prop pattern
+    var renderedItems = standardizedItems.map(function(item, index) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollectionItem.CollectionItem, {
+            id: item.id,
+            disabled: !canEdit,
+            draggable: draggable,
+            onRemove: function() {
+                return onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
+            },
+            removable: !(isRequired && hasOnlyOneItem),
+            children: children(item.data, index)
+        }, item.id);
+    });
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollectionContext.CollectionProvider, {
         value: {
             getStyles: getStyles
@@ -191,7 +246,7 @@ var Collection = function(props) {
                             gap: gap
                         }, getStyles('items')), {
                             children: [
-                                items,
+                                renderedItems,
                                 _addButton
                             ]
                         })),
@@ -204,5 +259,6 @@ var Collection = function(props) {
 };
 Collection.displayName = 'Collection';
 Collection.extend = _createFactoryComponent.identity;
+Collection.Layouts = _CollectionLayouts.CollectionLayouts;
 
 //# sourceMappingURL=Collection.js.map

package/dist/cjs/components/Collection/Collection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Collection/Collection.tsx"],"sourcesContent":["import {IconPlus} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n    __InputWrapperProps,\n    Box,\n    BoxProps,\n    Factory,\n    Input,\n    MantineSpacing,\n    Stack,\n    StylesApiProps,\n    useProps,\n    useStyles,\n} from '@mantine/core';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ForwardedRef, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../utils/createFactoryComponent.js';\nimport {Button} from '../Button/Button.js';\nimport classes from './Collection.module.css';\nimport {CollectionProvider} from './CollectionContext.js';\nimport {CollectionItem} from './CollectionItem.js';\n\nexport interface CollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T | (() => T);\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     *\n     * This method is required when using this component with ReactHookForm.\n     *\n     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n     *\n     * @param originalItem The original item\n     * @param itemIndex The index of the original item\n     */\n    getItemId?: (originalItem: T, itemIndex: number) => string;\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: {from: number; to: number}) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Whether the collection is readOnly. If true, the collection will not allow adding or removing items\n     *\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: boolean | ((values: T[]) => boolean);\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The gap between the colleciton items\n     *\n     * @default 'xs'\n     */\n    gap?: MantineSpacing;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nexport type CollectionStylesNames = 'root' | 'item' | 'items' | 'itemDragging' | 'dragHandle';\n\nexport type CollectionFactory = Factory<{\n    props: CollectionProps<unknown>;\n    ref: HTMLDivElement;\n    stylesNames: CollectionStylesNames;\n}>;\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    readOnly: false,\n    gap: 'md',\n    required: false,\n    getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        readOnly,\n        draggable,\n        children,\n        gap,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        withAsterisk,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n        getItemId,\n        ref,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        unstyled,\n        ...others\n    } = useProps('Collection', defaultProps as CollectionProps<T>, props);\n\n    const getStyles = useStyles<CollectionFactory>({\n        name: 'Collection',\n        classes,\n        props,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n    });\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        }),\n    );\n\n    const canEdit = !disabled && !readOnly;\n    const hasOnlyOneItem = value.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(value);\n    }, [JSON.stringify(value)]);\n\n    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n    const _label = label ? (\n        <Input.Label required={isRequired} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n    const _error = error ? (\n        <Input.Error {...errorProps} pt=\"xs\">\n            {error}\n        </Input.Error>\n    ) : null;\n    const _header =\n        _label || _description ? (\n            <Stack gap=\"xxs\" pb=\"xs\">\n                {_label}\n                {_description}\n            </Stack>\n        ) : null;\n\n    const standardizedItems = value.map((item, index) => ({id: getItemId?.(item, index) ?? String(index), data: item}));\n\n    const items = standardizedItems.map((item, index) => (\n        <CollectionItem\n            key={item.id}\n            id={item.id}\n            disabled={!canEdit}\n            draggable={draggable}\n            onRemove={() => onRemoveItem?.(index)}\n            removable={!(isRequired && hasOnlyOneItem)}\n        >\n            {children(item.data, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = typeof allowAdd === 'boolean' ? allowAdd : (allowAdd?.(value) ?? true);\n\n    const _addButton = canEdit ? (\n        <Box className={classes.addButtonContainer}>\n            <Button.Quaternary\n                leftSection={<IconPlus size={16} />}\n                onClick={() => {\n                    const newItemValue = typeof newItem === 'function' ? (newItem as () => T)() : newItem;\n                    onInsertItem(newItemValue, value?.length ?? 0);\n                }}\n                disabled={!addAllowed}\n                disabledTooltip={addDisabledTooltip}\n            >\n                {addLabel}\n            </Button.Quaternary>\n        </Box>\n    ) : null;\n\n    const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n    const handleDragEnd = ({over, active}: DragEndEvent): void => {\n        if (over) {\n            const activeIndex = getIndex(String(active.id));\n            const overIndex = getIndex(String(over.id));\n            if (activeIndex !== overIndex) {\n                onReorderItem?.({from: activeIndex, to: overIndex});\n            }\n        }\n    };\n\n    return (\n        <CollectionProvider value={{getStyles}}>\n            <DndContext\n                onDragEnd={handleDragEnd}\n                sensors={sensors}\n                modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n            >\n                <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n                    <Box ref={ref} {...others} {...getStyles('root')}>\n                        {_header}\n                        <Stack gap={gap} {...getStyles('items')}>\n                            {items}\n                            {_addButton}\n                        </Stack>\n                        {_error}\n                    </Box>\n                </SortableContext>\n            </DndContext>\n        </CollectionProvider>\n    );\n};\n\nCollection.displayName = 'Collection';\n\nCollection.extend = identity as CustomComponentThemeExtend<CollectionFactory>;\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","readOnly","gap","required","getItemId","id","props","useProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","ref","style","className","classNames","styles","unstyled","others","getStyles","useStyles","name","classes","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","canEdit","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","pt","_header","Stack","pb","standardizedItems","map","item","index","String","data","items","CollectionItem","onRemove","removable","addAllowed","_addButton","Box","addButtonContainer","Button","Quaternary","leftSection","IconPlus","size","onClick","newItemValue","disabledTooltip","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","CollectionProvider","DndContext","onDragEnd","modifiers","restrictToVerticalAxis","restrictToParentElement","SortableContext","strategy","verticalListSortingStrategy","displayName","extend","identity"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Collection/Collection.tsx"],"sourcesContent":["import {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n    __InputWrapperProps,\n    Box,\n    BoxProps,\n    Factory,\n    Input,\n    MantineSpacing,\n    Stack,\n    StylesApiProps,\n    useProps,\n    useStyles,\n} from '@mantine/core';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ForwardedRef, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../utils/createFactoryComponent.js';\nimport classes from './Collection.module.css';\nimport {CollectionAddButton} from './CollectionAddButton.js';\nimport {CollectionColumnDef} from './CollectionColumn.types.js';\nimport {CollectionProvider} from './CollectionContext.js';\nimport {CollectionItem} from './CollectionItem.js';\nimport {CollectionLayout} from './layouts/CollectionLayout.types.js';\nimport {CollectionLayouts} from './layouts/CollectionLayouts.js';\n\n/**\n * Base props shared by both column-based and children-based patterns\n */\ninterface BaseCollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T | (() => T);\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     *\n     * This method is required when using this component with ReactHookForm.\n     *\n     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n     *\n     * @param originalItem The original item\n     * @param itemIndex The index of the original item\n     */\n    getItemId?: (originalItem: T, itemIndex: number) => string;\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Function that gets called whenever a collection item needs to be reordered\n     *\n     * @param payload The origin and destination index of the item to reorder\n     */\n    onReorderItem?: (payload: {from: number; to: number}) => void;\n    /**\n     * Function that gets called when a new item needs to be added to the collection\n     *\n     * @param value The value of the item to insert\n     * @param index The index of the new item to insert\n     */\n    onInsertItem?: (value: T, index: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Whether the collection is readOnly. If true, the collection will not allow adding or removing items\n     *\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: boolean | ((values: T[]) => boolean);\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: ReactNode;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The gap between the collection items\n     *\n     * @default 'md'\n     */\n    gap?: MantineSpacing;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\n/**\n * Collection with column-based layout\n */\ninterface CollectionWithColumns<T> extends BaseCollectionProps<T> {\n    /**\n     * Column definitions for the collection\n     */\n    columns: Array<CollectionColumnDef<T>>;\n\n    /**\n     * Layout component to use for rendering\n     * @default CollectionLayouts.Horizontal\n     */\n    layout?: CollectionLayout;\n\n    /**\n     * Must not have children when using columns\n     */\n    children?: never;\n}\n\n/**\n * Collection with legacy children render prop\n */\ninterface CollectionWithChildren<T> extends BaseCollectionProps<T> {\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n\n    /**\n     * Must not have columns when using children\n     */\n    columns?: never;\n\n    /**\n     * Must not have layout when using children\n     */\n    layout?: never;\n}\n\n/**\n * Collection props - either columns OR children, never both\n */\nexport type CollectionProps<T> = CollectionWithColumns<T> | CollectionWithChildren<T>;\n\nexport type CollectionStylesNames = 'root' | 'item' | 'items' | 'itemDragging' | 'dragHandle' | 'removeButton';\n\nexport type CollectionFactory = Factory<{\n    props: CollectionProps<unknown>;\n    ref: HTMLDivElement;\n    stylesNames: CollectionStylesNames;\n}>;\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    readOnly: false,\n    gap: 'md',\n    required: false,\n    getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n    const {\n        value,\n        onChange,\n        onRemoveItem,\n        onReorderItem,\n        onInsertItem,\n        disabled,\n        readOnly,\n        draggable,\n        children,\n        columns,\n        layout,\n        gap,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        withAsterisk,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n        getItemId,\n        ref,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        unstyled,\n        ...others\n    } = useProps('Collection', defaultProps as CollectionProps<T>, props);\n\n    // Runtime validation: ensure columns and children are mutually exclusive\n    if (columns && children) {\n        throw new Error('Collection: Cannot use both \"columns\" and \"children\" props.');\n    }\n\n    if (layout && !columns) {\n        throw new Error('Collection: \"layout\" prop can only be used with \"columns\" prop.');\n    }\n\n    const getStyles = useStyles<CollectionFactory>({\n        name: 'Collection',\n        classes,\n        props,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n    });\n    const sensors = useSensors(\n        useSensor(PointerSensor),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        }),\n    );\n\n    const canEdit = !disabled && !readOnly;\n    const items = value ?? [];\n    const hasOnlyOneItem = items.length === 1;\n\n    /**\n     * Enforcing onChange when the value is modified will make sure the errors are carried through.\n     */\n    useDidUpdate(() => {\n        onChange?.(items);\n    }, [JSON.stringify(items)]);\n\n    const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n    const _label = label ? (\n        <Input.Label required={isRequired} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n    const _error = error ? (\n        <Input.Error {...errorProps} pt=\"xs\">\n            {error}\n        </Input.Error>\n    ) : null;\n    const _header =\n        _label || _description ? (\n            <Stack gap=\"xxs\" pb=\"xs\">\n                {_label}\n                {_description}\n            </Stack>\n        ) : null;\n\n    const standardizedItems = items.map((item, index) => ({id: getItemId?.(item, index) ?? String(index), data: item}));\n\n    const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n    const handleDragEnd = ({over, active}: DragEndEvent): void => {\n        if (over) {\n            const activeIndex = getIndex(String(active.id));\n            const overIndex = getIndex(String(over.id));\n            if (activeIndex !== overIndex) {\n                onReorderItem?.({from: activeIndex, to: overIndex});\n            }\n        }\n    };\n\n    const addAllowed = typeof allowAdd === 'boolean' ? allowAdd : (allowAdd?.(items) ?? true);\n\n    const handleAdd = () => {\n        const newItemValue = typeof newItem === 'function' ? (newItem as () => T)() : newItem;\n        onInsertItem?.(newItemValue, items?.length ?? 0);\n    };\n\n    const _addButton = canEdit ? (\n        <CollectionAddButton\n            addLabel={addLabel}\n            addDisabledTooltip={addDisabledTooltip}\n            addAllowed={addAllowed}\n            onAdd={handleAdd}\n        />\n    ) : null;\n\n    // Column-based layout pattern\n    if (columns) {\n        const Layout = layout || CollectionLayouts.Horizontal;\n\n        return (\n            <CollectionProvider value={{getStyles, columns: columns as Array<CollectionColumnDef<unknown>>}}>\n                <DndContext\n                    onDragEnd={handleDragEnd}\n                    sensors={sensors}\n                    modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n                >\n                    <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n                        <Box ref={ref} {...others} {...getStyles('root')}>\n                            {_header}\n                            <Layout>\n                                <Layout.Header\n                                    draggable={draggable && canEdit}\n                                    removable={canEdit && !(isRequired && hasOnlyOneItem)}\n                                />\n                                <Layout.Body\n                                    items={items}\n                                    onRemove={canEdit ? onRemoveItem : undefined}\n                                    removable={canEdit && !(isRequired && hasOnlyOneItem)}\n                                    draggable={draggable && canEdit}\n                                    disabled={disabled}\n                                    readOnly={readOnly}\n                                    getItemId={getItemId}\n                                    gap={gap}\n                                />\n                            </Layout>\n                            {_addButton}\n                            {_error}\n                        </Box>\n                    </SortableContext>\n                </DndContext>\n            </CollectionProvider>\n        );\n    }\n\n    // Legacy children render prop pattern\n    const renderedItems = standardizedItems.map((item, index) => (\n        <CollectionItem\n            key={item.id}\n            id={item.id}\n            disabled={!canEdit}\n            draggable={draggable}\n            onRemove={() => onRemoveItem?.(index)}\n            removable={!(isRequired && hasOnlyOneItem)}\n        >\n            {children(item.data, index)}\n        </CollectionItem>\n    ));\n\n    return (\n        <CollectionProvider value={{getStyles}}>\n            <DndContext\n                onDragEnd={handleDragEnd}\n                sensors={sensors}\n                modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n            >\n                <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n                    <Box ref={ref} {...others} {...getStyles('root')}>\n                        {_header}\n                        <Stack gap={gap} {...getStyles('items')}>\n                            {renderedItems}\n                            {_addButton}\n                        </Stack>\n                        {_error}\n                    </Box>\n                </SortableContext>\n            </DndContext>\n        </CollectionProvider>\n    );\n};\n\nCollection.displayName = 'Collection';\n\nCollection.extend = identity as CustomComponentThemeExtend<CollectionFactory>;\n\nCollection.Layouts = CollectionLayouts;\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","readOnly","gap","required","getItemId","id","props","useProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","columns","layout","newItem","allowAdd","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","ref","style","className","classNames","styles","unstyled","others","Error","getStyles","useStyles","name","classes","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","canEdit","items","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","pt","_header","Stack","pb","standardizedItems","map","item","index","String","data","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","addAllowed","handleAdd","newItemValue","_addButton","CollectionAddButton","onAdd","Layout","CollectionLayouts","Horizontal","CollectionProvider","DndContext","onDragEnd","modifiers","restrictToVerticalAxis","restrictToParentElement","SortableContext","strategy","verticalListSortingStrategy","Box","Header","removable","Body","onRemove","undefined","renderedItems","CollectionItem","displayName","extend","identity","Layouts"],"mappings":"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"}

package/dist/cjs/components/Collection/Collection.module.css

@@ -20,9 +20,21 @@
 }
 
 .dragHandle {
-    cursor: move;
+    cursor: grab;
+    display: flex;
+    align-items: center;
+
+    &:active {
+        cursor: grabbing;
+    }
+}
+
+.removeButton {
+    display: flex;
+    align-items: center;
 }
 
 .addButtonContainer {
     align-self: flex-start;
+    width: min-content;
 }

package/dist/cjs/components/Collection/CollectionAddButton.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface CollectionAddButtonProps {
+    /**
+     * The label of the add item button
+     *
+     * @default "Add item"
+     */
+    addLabel?: ReactNode;
+    /**
+     * The tooltip text displayed when hovering over the disabled add item button
+     *
+     * @default 'There is already an empty item'
+     */
+    addDisabledTooltip?: string;
+    /**
+     * Whether the add button is allowed/enabled
+     */
+    addAllowed: boolean;
+    /**
+     * Callback when the add button is clicked
+     */
+    onAdd: () => void;
+}
+export declare const CollectionAddButton: ({ addLabel, addDisabledTooltip, addAllowed, onAdd }: CollectionAddButtonProps) => import("react/jsx-runtime.js").JSX.Element;
+//# sourceMappingURL=CollectionAddButton.d.ts.map

package/dist/cjs/components/Collection/CollectionAddButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionAddButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Collection/CollectionAddButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAKhC,MAAM,WAAW,wBAAwB;IACrC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,GAAI,qDAAmD,wBAAwB,+CAW9G,CAAC"}

package/dist/cjs/components/Collection/CollectionAddButton.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CollectionAddButton", {
+    enumerable: true,
+    get: function() {
+        return CollectionAddButton;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _jsxruntime = require("react/jsx-runtime");
+var _plasmareacticons = require("@coveord/plasma-react-icons");
+var _core = require("@mantine/core");
+var _Button = require("../Button/Button.js");
+var _Collectionmodulecss = /*#__PURE__*/ _interop_require_default._(require("./Collection.module.css"));
+var CollectionAddButton = function(param) {
+    var addLabel = param.addLabel, addDisabledTooltip = param.addDisabledTooltip, addAllowed = param.addAllowed, onAdd = param.onAdd;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
+        className: _Collectionmodulecss.default.addButtonContainer,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button.Quaternary, {
+            leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconPlus, {
+                size: 16
+            }),
+            onClick: onAdd,
+            disabled: !addAllowed,
+            disabledTooltip: addDisabledTooltip,
+            children: addLabel
+        })
+    });
+};
+
+//# sourceMappingURL=CollectionAddButton.js.map

package/dist/cjs/components/Collection/CollectionAddButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Collection/CollectionAddButton.tsx"],"sourcesContent":["import {IconPlus} from '@coveord/plasma-react-icons';\nimport {Box} from '@mantine/core';\nimport {ReactNode} from 'react';\n\nimport {Button} from '../Button/Button.js';\nimport classes from './Collection.module.css';\n\nexport interface CollectionAddButtonProps {\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: ReactNode;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * Whether the add button is allowed/enabled\n     */\n    addAllowed: boolean;\n    /**\n     * Callback when the add button is clicked\n     */\n    onAdd: () => void;\n}\n\nexport const CollectionAddButton = ({addLabel, addDisabledTooltip, addAllowed, onAdd}: CollectionAddButtonProps) => (\n    <Box className={classes.addButtonContainer}>\n        <Button.Quaternary\n            leftSection={<IconPlus size={16} />}\n            onClick={onAdd}\n            disabled={!addAllowed}\n            disabledTooltip={addDisabledTooltip}\n        >\n            {addLabel}\n        </Button.Quaternary>\n    </Box>\n);\n"],"names":["CollectionAddButton","addLabel","addDisabledTooltip","addAllowed","onAdd","Box","className","classes","addButtonContainer","Button","Quaternary","leftSection","IconPlus","size","onClick","disabled","disabledTooltip"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;gCA9BU;oBACL;sBAGG;4EACD;AAyBb,IAAMA,sBAAsB;QAAEC,iBAAAA,UAAUC,2BAAAA,oBAAoBC,mBAAAA,YAAYC,cAAAA;yBAC3E,qBAACC,SAAG;QAACC,WAAWC,4BAAO,CAACC,kBAAkB;kBACtC,cAAA,qBAACC,cAAM,CAACC,UAAU;YACdC,2BAAa,qBAACC,0BAAQ;gBAACC,MAAM;;YAC7BC,SAASV;YACTW,UAAU,CAACZ;YACXa,iBAAiBd;sBAEhBD"}

package/dist/cjs/components/Collection/CollectionColumn.types.d.ts

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+/**
+ * Context provided to header render functions
+ */
+export interface CollectionHeaderContext {
+    /** Column index */
+    index: number;
+}
+/**
+ * Context provided to cell render functions.
+ *
+ * Use `context.disabled` and `context.readOnly` to pass the collection's state to your form inputs:
+ * @example
+ * ```tsx
+ * cell: (item, index, context) => (
+ *   <TextInput
+ *     {...form.getInputProps(`items.${index}.name`)}
+ *     disabled={context.disabled}
+ *     readOnly={context.readOnly}
+ *   />
+ * )
+ * ```
+ */
+export interface CollectionCellContext<T = unknown> {
+    /** Whether the item can be removed */
+    removable?: boolean;
+    /** Whether the collection is draggable */
+    draggable?: boolean;
+    /**
+     * Whether the collection is disabled.
+     * Pass this to your form inputs: `disabled={context.disabled}`
+     */
+    disabled?: boolean;
+    /**
+     * Whether the collection is read-only.
+     * Pass this to your form inputs: `readOnly={context.readOnly}`
+     */
+    readOnly?: boolean;
+    /** Callback to remove the item */
+    onRemove?: () => void;
+}
+/**
+ * Column definition for Collection component
+ */
+export interface CollectionColumnDef<T = unknown> {
+    /**
+     * Column header content
+     * Can be a ReactNode or a function that receives header context
+     */
+    header?: ReactNode | ((context: CollectionHeaderContext) => ReactNode);
+    /**
+     * Cell render function
+     * @param item The current item's data
+     * @param index The current item's index
+     * @param context Additional context for rendering
+     */
+    cell: (item: T, index: number, context: CollectionCellContext<T>) => ReactNode;
+    /**
+     * Minimum column size
+     */
+    minSize?: string | number;
+    /**
+     * Maximum column size
+     */
+    maxSize?: string | number;
+    /**
+     * Unique identifier for the column
+     * Auto-generated if not provided
+     */
+    id?: string;
+}
+//# sourceMappingURL=CollectionColumn.types.d.ts.map

package/dist/cjs/components/Collection/CollectionColumn.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionColumn.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Collection/CollectionColumn.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAEhC;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACpC,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;GAcG;AAEH,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,OAAO;IAC9C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,OAAO;IAC5C;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,uBAAuB,KAAK,SAAS,CAAC,CAAC;IAEvE;;;;;OAKG;IACH,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IAE/E;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/cjs/components/Collection/CollectionColumn.types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=CollectionColumn.types.js.map

package/dist/cjs/components/Collection/CollectionColumn.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Collection/CollectionColumn.types.ts"],"names":[],"mappings":""}

package/dist/cjs/components/Collection/CollectionContext.d.ts

@@ -1,7 +1,12 @@
 import { type GetStylesApi } from '@mantine/core';
 import type { CollectionFactory } from './Collection.js';
+import type { CollectionColumnDef } from './CollectionColumn.types.js';
 interface CollectionContextType {
     getStyles: GetStylesApi<CollectionFactory>;
+    /**
+     * Column definitions for the collection (only present when using column-based layout)
+     */
+    columns?: Array<CollectionColumnDef<unknown>>;
 }
 export declare const CollectionProvider: ({ children, value }: {
     value: CollectionContextType;

package/dist/cjs/components/Collection/CollectionContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Collection/CollectionContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,YAAY,EAAC,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,UAAU,qBAAqB;IAC3B,SAAS,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;CAC9C;AAED,eAAO,MAAO,kBAAkB;;;kDAAE,oBAAoB,6BAErD,CAAC"}
+{"version":3,"file":"CollectionContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Collection/CollectionContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,YAAY,EAAC,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,6BAA6B,CAAC;AAErE,UAAU,qBAAqB;IAC3B,SAAS,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAC3C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC;CACjD;AAED,eAAO,MAAO,kBAAkB;;;kDAAE,oBAAoB,6BAErD,CAAC"}

package/dist/cjs/components/Collection/CollectionContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Collection/CollectionContext.ts"],"sourcesContent":["import {createSafeContext, type GetStylesApi} from '@mantine/core';\nimport type {CollectionFactory} from './Collection.js';\n\ninterface CollectionContextType {\n    getStyles: GetStylesApi<CollectionFactory>;\n}\n\nexport const [CollectionProvider, useCollectionContext] = createSafeContext<CollectionContextType>(\n    'Collection component was not found in tree',\n);\n"],"names":["CollectionProvider","useCollectionContext","createSafeContext"],"mappings":";;;;;;;;;;;QAOcA;eAAAA;;QAAoBC;eAAAA;;;;oBAPiB;IAOOC,wCAAAA,IAAAA,uBAAiB,EACvE;AADG,IAAOF,qBAA4CE,uBAAxBD,uBAAwBC"}
+{"version":3,"sources":["../../../../src/components/Collection/CollectionContext.ts"],"sourcesContent":["import {createSafeContext, type GetStylesApi} from '@mantine/core';\nimport type {CollectionFactory} from './Collection.js';\nimport type {CollectionColumnDef} from './CollectionColumn.types.js';\n\ninterface CollectionContextType {\n    getStyles: GetStylesApi<CollectionFactory>;\n    /**\n     * Column definitions for the collection (only present when using column-based layout)\n     */\n    columns?: Array<CollectionColumnDef<unknown>>;\n}\n\nexport const [CollectionProvider, useCollectionContext] = createSafeContext<CollectionContextType>(\n    'Collection component was not found in tree',\n);\n"],"names":["CollectionProvider","useCollectionContext","createSafeContext"],"mappings":";;;;;;;;;;;QAYcA;eAAAA;;QAAoBC;eAAAA;;;;oBAZiB;IAYOC,wCAAAA,IAAAA,uBAAiB,EACvE;AADG,IAAOF,qBAA4CE,uBAAxBD,uBAAwBC"}

package/dist/cjs/components/Collection/CollectionItem.d.ts

@@ -1,12 +1,12 @@
 import { GroupProps } from '@mantine/core';
-import { FunctionComponent, PropsWithChildren } from 'react';
+import { FunctionComponent, type MouseEventHandler, PropsWithChildren } from 'react';
 interface CollectionItemProps extends CollectionItemSharedProps {
     draggable?: boolean;
     disabled: boolean;
 }
 interface CollectionItemSharedProps extends GroupProps {
     id: string;
-    onRemove?: React.MouseEventHandler<HTMLButtonElement>;
+    onRemove?: MouseEventHandler<HTMLButtonElement>;
     removable?: boolean;
 }
 export declare const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>>;

package/dist/cjs/components/Collection/CollectionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Collection/CollectionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,UAAU,EAAW,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAK3D,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,UAAU;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAoHD,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}
+{"version":3,"file":"CollectionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Collection/CollectionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAW,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAC,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAMnF,UAAU,mBAAoB,SAAQ,yBAAyB;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,yBAA0B,SAAQ,UAAU;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAyGD,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAYpF,CAAC"}

package/dist/cjs/components/Collection/CollectionItem.js

@@ -12,36 +12,16 @@ var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _jsxruntime = require("react/jsx-runtime");
-var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _sortable = require("@dnd-kit/sortable");
 var _utilities = require("@dnd-kit/utilities");
 var _core = require("@mantine/core");
-var _ActionIcon = require("../ActionIcon/ActionIcon.js");
 var _CollectionContext = require("./CollectionContext.js");
+var _DragHandle = require("./layouts/shared/DragHandle.js");
+var _RemoveButton = require("./layouts/shared/RemoveButton.js");
 var defaultProps = {
     removable: true,
     gap: 'sm'
 };
-var RemoveButton = function(param) {
-    var onClick = param.onClick;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionIcon.ActionIcon.Quaternary, {
-        style: {
-            alignSelf: 'center'
-        },
-        onClick: onClick,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconTrash, {
-            "aria-label": "Remove",
-            size: 16
-        })
-    });
-};
-var RemoveButtonPlaceholder = function() {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        style: {
-            width: 28
-        }
-    });
-};
 var StaticCollectionItem = function(props) {
     var _useProps = (0, _core.useProps)('CollectionItem', defaultProps, props), children = _useProps.children, removable = _useProps.removable, onRemove = _useProps.onRemove, id = _useProps.id, // Style props
     style = _useProps.style, className = _useProps.className, classNames = _useProps.classNames, styles = _useProps.styles, others = _object_without_properties._(_useProps, [
@@ -55,9 +35,6 @@ var StaticCollectionItem = function(props) {
         "styles"
     ]);
     var ctx = (0, _CollectionContext.useCollectionContext)();
-    var removeButton = removable && onRemove ? /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButton, {
-        onClick: onRemove
-    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButtonPlaceholder, {});
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({
         "data-testid": "item-".concat(id)
     }, ctx.getStyles('item', {
@@ -68,16 +45,21 @@ var StaticCollectionItem = function(props) {
     }), others), {
         children: [
             children,
-            removeButton
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_RemoveButton.RemoveButton, {
+                removable: removable,
+                onRemove: onRemove
+            })
         ]
     }));
 };
 var DisabledCollectionItem = function(props) {
     var ctx = (0, _CollectionContext.useCollectionContext)();
-    var _useProps = (0, _core.useProps)('CollectionItem', defaultProps, props), children = _useProps.children, id = _useProps.id, // Style props
+    var _useProps = (0, _core.useProps)('CollectionItem', defaultProps, props), children = _useProps.children, id = _useProps.id, _removable = _useProps.removable, _onRemove = _useProps.onRemove, // Style props
     style = _useProps.style, className = _useProps.className, classNames = _useProps.classNames, styles = _useProps.styles, others = _object_without_properties._(_useProps, [
         "children",
         "id",
+        "removable",
+        "onRemove",
         "style",
         "className",
         "classNames",
@@ -106,9 +88,6 @@ var DraggableCollectionItem = function(props) {
         "classNames",
         "styles"
     ]);
-    var removeButton = removable && onRemove ? /*#__PURE__*/ (0, _jsxruntime.jsx)(RemoveButton, {
-        onClick: onRemove
-    }) : null;
     var _useSortable = (0, _sortable.useSortable)({
         id: id
     }), attributes = _useSortable.attributes, listeners = _useSortable.listeners, setNodeRef = _useSortable.setNodeRef, transform = _useSortable.transform, transition = _useSortable.transition, isDragging = _useSortable.isDragging, setActivatorNodeRef = _useSortable.setActivatorNodeRef;
@@ -127,15 +106,16 @@ var DraggableCollectionItem = function(props) {
         "data-isdragging": isDragging
     }), others), {
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({
-                ref: setActivatorNodeRef
-            }, listeners, attributes, ctx.getStyles('dragHandle')), {
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.DragAndDropSize24Px, {
-                    height: 16
-                })
-            })),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_DragHandle.DragHandle, {
+                setActivatorNodeRef: setActivatorNodeRef,
+                listeners: listeners,
+                attributes: attributes
+            }),
             children,
-            removeButton
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_RemoveButton.RemoveButton, {
+                removable: removable,
+                onRemove: onRemove
+            })
         ]
     }));
 };