@coveord/plasma-mantine 56.18.0 → 56.20.1

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
+            })
         ]
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize24Px, IconTrash} from '@coveord/plasma-react-icons';\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {Group, GroupProps, useProps} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {ActionIcon} from '../ActionIcon/ActionIcon.js';\nimport {useCollectionContext} from './CollectionContext.js';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends GroupProps {\n    id: string;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst defaultProps: Partial<CollectionItemSharedProps> = {\n    removable: true,\n    gap: 'sm',\n};\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon.Quaternary style={{alignSelf: 'center'}} onClick={onClick}>\n        <IconTrash aria-label=\"Remove\" size={16} />\n    </ActionIcon.Quaternary>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {\n    const {\n        children,\n        removable,\n        onRemove,\n        id,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        ...others\n    } = useProps('CollectionItem', defaultProps, props);\n    const ctx = useCollectionContext();\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            {...ctx.getStyles('item', {style, className, classNames, styles})}\n            {...others}\n        >\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {\n    const ctx = useCollectionContext();\n    const {\n        children,\n        id,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        ...others\n    } = useProps('CollectionItem', defaultProps, props);\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            {...ctx.getStyles('item', {style, className, classNames, styles})}\n            {...others}\n        >\n            {children}\n        </Group>\n    );\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {\n    const ctx = useCollectionContext();\n    const {\n        children,\n        removable,\n        onRemove,\n        id,\n\n        // Style props\n        className,\n        classNames,\n        styles,\n        ...others\n    } = useProps('CollectionItem', defaultProps, props);\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n    const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n        id,\n    });\n\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            ref={setNodeRef}\n            {...ctx.getStyles('item', {\n                style: transform\n                    ? {\n                          transform: CSS.Transform.toString(transform),\n                          transition,\n                      }\n                    : undefined,\n                className,\n                classNames,\n                styles,\n            })}\n            data-isdragging={isDragging}\n            {...others}\n        >\n            <div ref={setActivatorNodeRef} {...listeners} {...attributes} {...ctx.getStyles('dragHandle')}>\n                <DragAndDropSize24Px height={16} />\n            </div>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["CollectionItem","defaultProps","removable","gap","RemoveButton","onClick","ActionIcon","Quaternary","style","alignSelf","IconTrash","aria-label","size","RemoveButtonPlaceholder","div","width","StaticCollectionItem","props","useProps","children","onRemove","id","className","classNames","styles","others","ctx","useCollectionContext","removeButton","Group","data-testid","getStyles","DisabledCollectionItem","DraggableCollectionItem","useSortable","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","CSS","Transform","toString","undefined","data-isdragging","DragAndDropSize24Px","height","draggable","disabled","otherProps"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Collection/CollectionItem.tsx"],"sourcesContent":["import {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {Group, GroupProps, useProps} from '@mantine/core';\nimport {FunctionComponent, type MouseEventHandler, PropsWithChildren} from 'react';\n\nimport {useCollectionContext} from './CollectionContext.js';\nimport {DragHandle} from './layouts/shared/DragHandle.js';\nimport {RemoveButton} from './layouts/shared/RemoveButton.js';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends GroupProps {\n    id: string;\n    onRemove?: MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst defaultProps: Partial<CollectionItemSharedProps> = {\n    removable: true,\n    gap: 'sm',\n};\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {\n    const {\n        children,\n        removable,\n        onRemove,\n        id,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        ...others\n    } = useProps('CollectionItem', defaultProps, props);\n    const ctx = useCollectionContext();\n\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            {...ctx.getStyles('item', {style, className, classNames, styles})}\n            {...others}\n        >\n            {children}\n            <RemoveButton removable={removable} onRemove={onRemove} />\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {\n    const ctx = useCollectionContext();\n    const {\n        children,\n        id,\n        removable: _removable,\n        onRemove: _onRemove,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        ...others\n    } = useProps('CollectionItem', defaultProps, props);\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            {...ctx.getStyles('item', {style, className, classNames, styles})}\n            {...others}\n        >\n            {children}\n        </Group>\n    );\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {\n    const ctx = useCollectionContext();\n    const {\n        children,\n        removable,\n        onRemove,\n        id,\n\n        // Style props\n        className,\n        classNames,\n        styles,\n        ...others\n    } = useProps('CollectionItem', defaultProps, props);\n\n    const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({\n        id,\n    });\n\n    return (\n        <Group\n            data-testid={`item-${id}`}\n            ref={setNodeRef}\n            {...ctx.getStyles('item', {\n                style: transform\n                    ? {\n                          transform: CSS.Transform.toString(transform),\n                          transition,\n                      }\n                    : undefined,\n                className,\n                classNames,\n                styles,\n            })}\n            data-isdragging={isDragging}\n            {...others}\n        >\n            <DragHandle setActivatorNodeRef={setActivatorNodeRef} listeners={listeners} attributes={attributes} />\n            {children}\n            <RemoveButton removable={removable} onRemove={onRemove} />\n        </Group>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["CollectionItem","defaultProps","removable","gap","StaticCollectionItem","props","useProps","children","onRemove","id","style","className","classNames","styles","others","ctx","useCollectionContext","Group","data-testid","getStyles","RemoveButton","DisabledCollectionItem","_removable","_onRemove","DraggableCollectionItem","useSortable","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","CSS","Transform","toString","undefined","data-isdragging","DragHandle","draggable","disabled","otherProps"],"mappings":"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"}

package/dist/cjs/components/Collection/layouts/CollectionLayout.types.d.ts

@@ -0,0 +1,46 @@
+import type { MantineSpacing } from '@mantine/core';
+import { ReactElement, ReactNode } from 'react';
+/**
+ * Props passed to layout Header component
+ */
+export interface CollectionLayoutHeaderProps {
+    /** Whether drag and drop is enabled */
+    draggable?: boolean;
+    /** Whether items are removable */
+    removable?: boolean;
+}
+/**
+ * Props passed to layout Body component
+ */
+export interface CollectionLayoutBodyProps<T = unknown> {
+    /** Items to render */
+    items: T[];
+    /** Callback to remove an item */
+    onRemove?: (index: number) => void;
+    /** Whether items are removable */
+    removable?: boolean;
+    /** Whether drag and drop is enabled */
+    draggable?: boolean;
+    /** Whether the collection is disabled */
+    disabled?: boolean;
+    /** Function to get unique ID for each item */
+    getItemId?: (item: T, index: number) => string;
+    /** Gap between items */
+    gap?: MantineSpacing;
+}
+/**
+ * Collection Layout interface
+ * Follows the same pattern as Table's RowLayout
+ */
+export interface CollectionLayout {
+    (props: {
+        children: ReactNode;
+    }): ReactElement;
+    /** Layout display name */
+    displayName: string;
+    /** Header component - renders column headers */
+    Header: (props: CollectionLayoutHeaderProps) => ReactElement | null;
+    /** Body component - renders rows/items */
+    Body: <TData>(props: CollectionLayoutBodyProps<TData>) => ReactElement;
+}
+//# sourceMappingURL=CollectionLayout.types.d.ts.map

package/dist/cjs/components/Collection/layouts/CollectionLayout.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionLayout.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Collection/layouts/CollectionLayout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAClD,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,2BAA2B;IACxC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB,CAAC,CAAC,GAAG,OAAO;IAClD,sBAAsB;IACtB,KAAK,EAAE,CAAC,EAAE,CAAC;IAEX,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAE/C,wBAAwB;IACxB,GAAG,CAAC,EAAE,cAAc,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC7B,CAAC,KAAK,EAAE;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAC,GAAG,YAAY,CAAC;IAE7C,0BAA0B;IAC1B,WAAW,EAAE,MAAM,CAAC;IAEpB,gDAAgD;IAChD,MAAM,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,YAAY,GAAG,IAAI,CAAC;IAEpE,0CAA0C;IAC1C,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,yBAAyB,CAAC,KAAK,CAAC,KAAK,YAAY,CAAC;CAC1E"}

package/dist/cjs/components/Collection/layouts/CollectionLayout.types.js

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

package/dist/cjs/components/Collection/layouts/CollectionLayout.types.js.map

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

package/dist/cjs/components/Collection/layouts/CollectionLayouts.d.ts

@@ -0,0 +1,26 @@
+export declare const CollectionLayouts: {
+    readonly Horizontal: {
+        ({ children }: import("./shared/layoutConstants.js").LayoutProps): import("react/jsx-runtime.js").JSX.Element;
+        Body: <T>(props: import("./shared/layoutConstants.js").LayoutBodyProps<T> & {
+            ref?: import("react").ForwardedRef<HTMLDivElement>;
+        }) => import("react/jsx-runtime.js").JSX.Element;
+        Header: (props: import("./shared/layoutConstants.js").LayoutHeaderProps & {
+            ref?: import("react").ForwardedRef<HTMLDivElement>;
+        }) => import("react/jsx-runtime.js").JSX.Element;
+        displayName: string;
+    };
+    readonly Vertical: {
+        ({ children }: import("./shared/layoutConstants.js").LayoutProps): import("react/jsx-runtime.js").JSX.Element;
+        Body: <T>(props: import("./shared/layoutConstants.js").LayoutBodyProps<T> & {
+            ref?: import("react").ForwardedRef<HTMLDivElement>;
+        }) => import("react/jsx-runtime.js").JSX.Element;
+        Header: (_props: import("./shared/layoutConstants.js").LayoutHeaderProps & {
+            ref?: import("react").ForwardedRef<HTMLDivElement>;
+        }) => null;
+        displayName: string;
+    };
+};
+export { HorizontalLayout } from './horizontal-layout/HorizontalLayout.js';
+export { VerticalLayout } from './vertical-layout/VerticalLayout.js';
+export type { CollectionLayout, CollectionLayoutBodyProps, CollectionLayoutHeaderProps, } from './CollectionLayout.types.js';
+//# sourceMappingURL=CollectionLayouts.d.ts.map

package/dist/cjs/components/Collection/layouts/CollectionLayouts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionLayouts.d.ts","sourceRoot":"","sources":["../../../../../src/components/Collection/layouts/CollectionLayouts.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB;;;;eAY2xB,CAAC;;;eAA5xB,CAAC;;;;;;;eAAgyF,CAAC;;;eANh0F,CAAC;;;;CAHS,CAAC;AAEX,OAAO,EAAC,gBAAgB,EAAC,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAC,cAAc,EAAC,MAAM,qCAAqC,CAAC;AACnE,YAAY,EACR,gBAAgB,EAChB,yBAAyB,EACzB,2BAA2B,GAC9B,MAAM,6BAA6B,CAAC"}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get CollectionLayouts () {
+        return CollectionLayouts;
+    },
+    get HorizontalLayout () {
+        return _HorizontalLayout.HorizontalLayout;
+    },
+    get VerticalLayout () {
+        return _VerticalLayout.VerticalLayout;
+    }
+});
+var _HorizontalLayout = require("./horizontal-layout/HorizontalLayout.js");
+var _VerticalLayout = require("./vertical-layout/VerticalLayout.js");
+var CollectionLayouts = {
+    Horizontal: _HorizontalLayout.HorizontalLayout,
+    Vertical: _VerticalLayout.VerticalLayout
+};
+
+//# sourceMappingURL=CollectionLayouts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Collection/layouts/CollectionLayouts.tsx"],"sourcesContent":["import {HorizontalLayout} from './horizontal-layout/HorizontalLayout.js';\nimport {VerticalLayout} from './vertical-layout/VerticalLayout.js';\n\nexport const CollectionLayouts = {\n    Horizontal: HorizontalLayout,\n    Vertical: VerticalLayout,\n} as const;\n\nexport {HorizontalLayout} from './horizontal-layout/HorizontalLayout.js';\nexport {VerticalLayout} from './vertical-layout/VerticalLayout.js';\nexport type {\n    CollectionLayout,\n    CollectionLayoutBodyProps,\n    CollectionLayoutHeaderProps,\n} from './CollectionLayout.types.js';\n"],"names":["CollectionLayouts","HorizontalLayout","VerticalLayout","Horizontal","Vertical"],"mappings":";;;;;;;;;;;QAGaA;eAAAA;;QAKLC;eAAAA,kCAAgB;;QAChBC;eAAAA,8BAAc;;;gCATS;8BACF;AAEtB,IAAMF,oBAAoB;IAC7BG,YAAYF,kCAAgB;IAC5BG,UAAUF,8BAAc;AAC5B"}

package/dist/cjs/components/Collection/layouts/horizontal-layout/HorizontalLayout.d.ts

@@ -0,0 +1,12 @@
+import { LayoutProps } from '../shared/layoutConstants.js';
+export declare const HorizontalLayout: {
+    ({ children }: LayoutProps): import("react/jsx-runtime.js").JSX.Element;
+    Body: <T>(props: import("../shared/layoutConstants.js").LayoutBodyProps<T> & {
+        ref?: import("react").ForwardedRef<HTMLDivElement>;
+    }) => import("react/jsx-runtime.js").JSX.Element;
+    Header: (props: import("../shared/layoutConstants.js").LayoutHeaderProps & {
+        ref?: import("react").ForwardedRef<HTMLDivElement>;
+    }) => import("react/jsx-runtime.js").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=HorizontalLayout.d.ts.map

package/dist/cjs/components/Collection/layouts/horizontal-layout/HorizontalLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/horizontal-layout/HorizontalLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,8BAA8B,CAAC;AAIzD,eAAO,MAAM,gBAAgB;mBAAgB,WAAW;;WAK63B,CAAC;;;WAA5xB,CAAC;;;CAL/E,CAAC"}

package/dist/cjs/components/Collection/layouts/horizontal-layout/HorizontalLayout.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "HorizontalLayout", {
+    enumerable: true,
+    get: function() {
+        return HorizontalLayout;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _HorizontalLayoutBody = require("./HorizontalLayoutBody.js");
+var _HorizontalLayoutHeader = require("./HorizontalLayoutHeader.js");
+var HorizontalLayout = function(param) {
+    var children = param.children;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: children
+    });
+};
+HorizontalLayout.Body = _HorizontalLayoutBody.HorizontalLayoutBody;
+HorizontalLayout.Header = _HorizontalLayoutHeader.HorizontalLayoutHeader;
+HorizontalLayout.displayName = 'Horizontal';
+
+//# sourceMappingURL=HorizontalLayout.js.map

package/dist/cjs/components/Collection/layouts/horizontal-layout/HorizontalLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Collection/layouts/horizontal-layout/HorizontalLayout.tsx"],"sourcesContent":["import {LayoutProps} from '../shared/layoutConstants.js';\nimport {HorizontalLayoutBody} from './HorizontalLayoutBody.js';\nimport {HorizontalLayoutHeader} from './HorizontalLayoutHeader.js';\n\nexport const HorizontalLayout = ({children}: LayoutProps) => <>{children}</>;\n\nHorizontalLayout.Body = HorizontalLayoutBody;\nHorizontalLayout.Header = HorizontalLayoutHeader;\nHorizontalLayout.displayName = 'Horizontal';\n"],"names":["HorizontalLayout","children","Body","HorizontalLayoutBody","Header","HorizontalLayoutHeader","displayName"],"mappings":";;;;+BAIaA;;;eAAAA;;;;oCAHsB;sCACE;AAE9B,IAAMA,mBAAmB;QAAEC,iBAAAA;yBAA2B;kBAAGA;;;AAEhED,iBAAiBE,IAAI,GAAGC,0CAAoB;AAC5CH,iBAAiBI,MAAM,GAAGC,8CAAsB;AAChDL,iBAAiBM,WAAW,GAAG"}

package/dist/cjs/components/Collection/layouts/horizontal-layout/HorizontalLayout.module.css

@@ -0,0 +1,37 @@
+.headerRow {
+    display: flex;
+    gap: var(--mantine-spacing-sm);
+    padding-bottom: var(--mantine-spacing-xs);
+    align-items: center;
+}
+
+.headerCell {
+    flex: 1;
+    font-weight: var(--coveo-fw-bold);
+    text-align: left;
+}
+
+.dragHandleHeader {
+    width: var(--mantine-spacing-sm);
+    flex-shrink: 0;
+}
+
+.removeButtonHeader {
+    width: calc(var(--mantine-spacing-md) + var(--mantine-spacing-sm));
+    flex-shrink: 0;
+}
+
+.row {
+    display: flex;
+    gap: var(--mantine-spacing-sm);
+    align-items: center;
+    background: var(--mantine-color-body);
+}
+
+.row[data-isdragging='true'] {
+    z-index: 1;
+}
+
+.cell {
+    flex: 1;
+}

package/dist/cjs/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.d.ts

@@ -0,0 +1,6 @@
+import { ForwardedRef } from 'react';
+import { LayoutBodyProps } from '../shared/layoutConstants.js';
+export declare const HorizontalLayoutBody: <T>(props: LayoutBodyProps<T> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => import("react/jsx-runtime.js").JSX.Element;
+//# sourceMappingURL=HorizontalLayoutBody.d.ts.map

package/dist/cjs/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalLayoutBody.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,YAAY,EAAU,MAAM,OAAO,CAAC;AAI5C,OAAO,EAA4B,eAAe,EAAC,MAAM,8BAA8B,CAAC;AA8BxF,eAAO,MAAM,oBAAoB,GAAI,CAAC,EAAG,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAAC,+CAgCxG,CAAC"}