@coveord/plasma-mantine 56.18.0 → 56.20.1

package/dist/esm/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/esm/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/esm/components/Collection/CollectionColumn.types.js

@@ -0,0 +1,5 @@
+/**
+ * Column definition for Collection component
+ */ export { };
+
+//# sourceMappingURL=CollectionColumn.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Collection/CollectionColumn.types.ts"],"sourcesContent":["import {ReactNode} from 'react';\n\n/**\n * Context provided to header render functions\n */\nexport interface CollectionHeaderContext {\n    /** Column index */\n    index: number;\n}\n\n/**\n * Context provided to cell render functions.\n *\n * Use `context.disabled` and `context.readOnly` to pass the collection's state to your form inputs:\n * @example\n * ```tsx\n * cell: (item, index, context) => (\n *   <TextInput\n *     {...form.getInputProps(`items.${index}.name`)}\n *     disabled={context.disabled}\n *     readOnly={context.readOnly}\n *   />\n * )\n * ```\n */\n// eslint-disable-next-line unused-imports/no-unused-vars\nexport interface CollectionCellContext<T = unknown> {\n    /** Whether the item can be removed */\n    removable?: boolean;\n    /** Whether the collection is draggable */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled.\n     * Pass this to your form inputs: `disabled={context.disabled}`\n     */\n    disabled?: boolean;\n    /**\n     * Whether the collection is read-only.\n     * Pass this to your form inputs: `readOnly={context.readOnly}`\n     */\n    readOnly?: boolean;\n    /** Callback to remove the item */\n    onRemove?: () => void;\n}\n\n/**\n * Column definition for Collection component\n */\nexport interface CollectionColumnDef<T = unknown> {\n    /**\n     * Column header content\n     * Can be a ReactNode or a function that receives header context\n     */\n    header?: ReactNode | ((context: CollectionHeaderContext) => ReactNode);\n\n    /**\n     * Cell render function\n     * @param item The current item's data\n     * @param index The current item's index\n     * @param context Additional context for rendering\n     */\n    cell: (item: T, index: number, context: CollectionCellContext<T>) => ReactNode;\n\n    /**\n     * Minimum column size\n     */\n    minSize?: string | number;\n\n    /**\n     * Maximum column size\n     */\n    maxSize?: string | number;\n\n    /**\n     * Unique identifier for the column\n     * Auto-generated if not provided\n     */\n    id?: string;\n}\n"],"names":[],"mappings":"AA6CA;;CAEC,GACD,WA8BC"}

package/dist/esm/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/esm/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;;;+CAAE,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;;;+CAAE,oBAAoB,6BAErD,CAAC"}

package/dist/esm/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":["createSafeContext","CollectionProvider","useCollectionContext"],"mappings":"AAAA,SAAQA,iBAAiB,QAA0B,gBAAgB;AAOnE,OAAO,MAAM,CAACC,oBAAoBC,qBAAqB,GAAGF,kBACtD,8CACF"}
+{"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":["createSafeContext","CollectionProvider","useCollectionContext"],"mappings":"AAAA,SAAQA,iBAAiB,QAA0B,gBAAgB;AAYnE,OAAO,MAAM,CAACC,oBAAoBC,qBAAqB,GAAGF,kBACtD,8CACF"}

package/dist/esm/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/esm/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/esm/components/Collection/CollectionItem.js

@@ -1,36 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DragAndDropSize24Px, IconTrash } from '@coveord/plasma-react-icons';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Group, useProps } from '@mantine/core';
-import { ActionIcon } from '../ActionIcon/ActionIcon.js';
 import { useCollectionContext } from './CollectionContext.js';
+import { DragHandle } from './layouts/shared/DragHandle.js';
+import { RemoveButton } from './layouts/shared/RemoveButton.js';
 const defaultProps = {
     removable: true,
     gap: 'sm'
 };
-const RemoveButton = ({ onClick })=>/*#__PURE__*/ _jsx(ActionIcon.Quaternary, {
-        style: {
-            alignSelf: 'center'
-        },
-        onClick: onClick,
-        children: /*#__PURE__*/ _jsx(IconTrash, {
-            "aria-label": "Remove",
-            size: 16
-        })
-    });
-const RemoveButtonPlaceholder = ()=>/*#__PURE__*/ _jsx("div", {
-        style: {
-            width: 28
-        }
-    });
 const StaticCollectionItem = (props)=>{
     const { children, removable, onRemove, id, // Style props
     style, className, classNames, styles, ...others } = useProps('CollectionItem', defaultProps, props);
     const ctx = useCollectionContext();
-    const removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
-        onClick: onRemove
-    }) : /*#__PURE__*/ _jsx(RemoveButtonPlaceholder, {});
     return /*#__PURE__*/ _jsxs(Group, {
         "data-testid": `item-${id}`,
         ...ctx.getStyles('item', {
@@ -42,13 +24,16 @@ const StaticCollectionItem = (props)=>{
         ...others,
         children: [
             children,
-            removeButton
+            /*#__PURE__*/ _jsx(RemoveButton, {
+                removable: removable,
+                onRemove: onRemove
+            })
         ]
     });
 };
 const DisabledCollectionItem = (props)=>{
     const ctx = useCollectionContext();
-    const { children, id, // Style props
+    const { children, id, removable: _removable, onRemove: _onRemove, // Style props
     style, className, classNames, styles, ...others } = useProps('CollectionItem', defaultProps, props);
     return /*#__PURE__*/ _jsx(Group, {
         "data-testid": `item-${id}`,
@@ -66,9 +51,6 @@ const DraggableCollectionItem = (props)=>{
     const ctx = useCollectionContext();
     const { children, removable, onRemove, id, // Style props
     className, classNames, styles, ...others } = useProps('CollectionItem', defaultProps, props);
-    const removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
-        onClick: onRemove
-    }) : null;
     const { attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef } = useSortable({
         id
     });
@@ -87,17 +69,16 @@ const DraggableCollectionItem = (props)=>{
         "data-isdragging": isDragging,
         ...others,
         children: [
-            /*#__PURE__*/ _jsx("div", {
-                ref: setActivatorNodeRef,
-                ...listeners,
-                ...attributes,
-                ...ctx.getStyles('dragHandle'),
-                children: /*#__PURE__*/ _jsx(DragAndDropSize24Px, {
-                    height: 16
-                })
+            /*#__PURE__*/ _jsx(DragHandle, {
+                setActivatorNodeRef: setActivatorNodeRef,
+                listeners: listeners,
+                attributes: attributes
             }),
             children,
-            removeButton
+            /*#__PURE__*/ _jsx(RemoveButton, {
+                removable: removable,
+                onRemove: onRemove
+            })
         ]
     });
 };

package/dist/esm/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":["DragAndDropSize24Px","IconTrash","useSortable","CSS","Group","useProps","ActionIcon","useCollectionContext","defaultProps","removable","gap","RemoveButton","onClick","Quaternary","style","alignSelf","aria-label","size","RemoveButtonPlaceholder","div","width","StaticCollectionItem","props","children","onRemove","id","className","classNames","styles","others","ctx","removeButton","data-testid","getStyles","DisabledCollectionItem","DraggableCollectionItem","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","Transform","toString","undefined","data-isdragging","height","CollectionItem","draggable","disabled","otherProps"],"mappings":";AAAA,SAAQA,mBAAmB,EAAEC,SAAS,QAAO,8BAA8B;AAC3E,SAAQC,WAAW,QAAO,oBAAoB;AAC9C,SAAQC,GAAG,QAAO,qBAAqB;AACvC,SAAQC,KAAK,EAAcC,QAAQ,QAAO,gBAAgB;AAG1D,SAAQC,UAAU,QAAO,8BAA8B;AACvD,SAAQC,oBAAoB,QAAO,yBAAyB;AAa5D,MAAMC,eAAmD;IACrDC,WAAW;IACXC,KAAK;AACT;AAEA,MAAMC,eAED,CAAC,EAACC,OAAO,EAAC,iBACX,KAACN,WAAWO,UAAU;QAACC,OAAO;YAACC,WAAW;QAAQ;QAAGH,SAASA;kBAC1D,cAAA,KAACX;YAAUe,cAAW;YAASC,MAAM;;;AAI7C,MAAMC,0BAA0B,kBAAM,KAACC;QAAIL,OAAO;YAACM,OAAO;QAAE;;AAE5D,MAAMC,uBAAwF,CAACC;IAC3F,MAAM,EACFC,QAAQ,EACRd,SAAS,EACTe,QAAQ,EACRC,EAAE,EAEF,cAAc;IACdX,KAAK,EACLY,SAAS,EACTC,UAAU,EACVC,MAAM,EACN,GAAGC,QACN,GAAGxB,SAAS,kBAAkBG,cAAcc;IAC7C,MAAMQ,MAAMvB;IACZ,MAAMwB,eAAetB,aAAae,yBAAW,KAACb;QAAaC,SAASY;uBAAe,KAACN;IAEpF,qBACI,MAACd;QACG4B,eAAa,CAAC,KAAK,EAAEP,IAAI;QACxB,GAAGK,IAAIG,SAAS,CAAC,QAAQ;YAACnB;YAAOY;YAAWC;YAAYC;QAAM,EAAE;QAChE,GAAGC,MAAM;;YAETN;YACAQ;;;AAGb;AAEA,MAAMG,yBAA0F,CAACZ;IAC7F,MAAMQ,MAAMvB;IACZ,MAAM,EACFgB,QAAQ,EACRE,EAAE,EAEF,cAAc;IACdX,KAAK,EACLY,SAAS,EACTC,UAAU,EACVC,MAAM,EACN,GAAGC,QACN,GAAGxB,SAAS,kBAAkBG,cAAcc;IAC7C,qBACI,KAAClB;QACG4B,eAAa,CAAC,KAAK,EAAEP,IAAI;QACxB,GAAGK,IAAIG,SAAS,CAAC,QAAQ;YAACnB;YAAOY;YAAWC;YAAYC;QAAM,EAAE;QAChE,GAAGC,MAAM;kBAETN;;AAGb;AAEA,MAAMY,0BAA2F,CAACb;IAC9F,MAAMQ,MAAMvB;IACZ,MAAM,EACFgB,QAAQ,EACRd,SAAS,EACTe,QAAQ,EACRC,EAAE,EAEF,cAAc;IACdC,SAAS,EACTC,UAAU,EACVC,MAAM,EACN,GAAGC,QACN,GAAGxB,SAAS,kBAAkBG,cAAcc;IAC7C,MAAMS,eAAetB,aAAae,yBAAW,KAACb;QAAaC,SAASY;SAAe;IACnF,MAAM,EAACY,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,UAAU,EAAEC,mBAAmB,EAAC,GAAGxC,YAAY;QAC5GuB;IACJ;IAEA,qBACI,MAACrB;QACG4B,eAAa,CAAC,KAAK,EAAEP,IAAI;QACzBkB,KAAKL;QACJ,GAAGR,IAAIG,SAAS,CAAC,QAAQ;YACtBnB,OAAOyB,YACD;gBACIA,WAAWpC,IAAIyC,SAAS,CAACC,QAAQ,CAACN;gBAClCC;YACJ,IACAM;YACNpB;YACAC;YACAC;QACJ,EAAE;QACFmB,mBAAiBN;QAChB,GAAGZ,MAAM;;0BAEV,KAACV;gBAAIwB,KAAKD;gBAAsB,GAAGL,SAAS;gBAAG,GAAGD,UAAU;gBAAG,GAAGN,IAAIG,SAAS,CAAC,aAAa;0BACzF,cAAA,KAACjC;oBAAoBgD,QAAQ;;;YAEhCzB;YACAQ;;;AAGb;AAEA,OAAO,MAAMkB,iBAA4E,CAAC,EACtFC,SAAS,EACTC,QAAQ,EACR,GAAGC,YACN;IACG,IAAID,UAAU;QACV,qBAAO,KAACjB;YAAwB,GAAGkB,UAAU;;IACjD;IACA,IAAIF,WAAW;QACX,qBAAO,KAACf;YAAyB,GAAGiB,UAAU;;IAClD;IACA,qBAAO,KAAC/B;QAAsB,GAAG+B,UAAU;;AAC/C,EAAE"}
+{"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":["useSortable","CSS","Group","useProps","useCollectionContext","DragHandle","RemoveButton","defaultProps","removable","gap","StaticCollectionItem","props","children","onRemove","id","style","className","classNames","styles","others","ctx","data-testid","getStyles","DisabledCollectionItem","_removable","_onRemove","DraggableCollectionItem","attributes","listeners","setNodeRef","transform","transition","isDragging","setActivatorNodeRef","ref","Transform","toString","undefined","data-isdragging","CollectionItem","draggable","disabled","otherProps"],"mappings":";AAAA,SAAQA,WAAW,QAAO,oBAAoB;AAC9C,SAAQC,GAAG,QAAO,qBAAqB;AACvC,SAAQC,KAAK,EAAcC,QAAQ,QAAO,gBAAgB;AAG1D,SAAQC,oBAAoB,QAAO,yBAAyB;AAC5D,SAAQC,UAAU,QAAO,iCAAiC;AAC1D,SAAQC,YAAY,QAAO,mCAAmC;AAa9D,MAAMC,eAAmD;IACrDC,WAAW;IACXC,KAAK;AACT;AAEA,MAAMC,uBAAwF,CAACC;IAC3F,MAAM,EACFC,QAAQ,EACRJ,SAAS,EACTK,QAAQ,EACRC,EAAE,EAEF,cAAc;IACdC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACN,GAAGC,QACN,GAAGhB,SAAS,kBAAkBI,cAAcI;IAC7C,MAAMS,MAAMhB;IAEZ,qBACI,MAACF;QACGmB,eAAa,CAAC,KAAK,EAAEP,IAAI;QACxB,GAAGM,IAAIE,SAAS,CAAC,QAAQ;YAACP;YAAOC;YAAWC;YAAYC;QAAM,EAAE;QAChE,GAAGC,MAAM;;YAETP;0BACD,KAACN;gBAAaE,WAAWA;gBAAWK,UAAUA;;;;AAG1D;AAEA,MAAMU,yBAA0F,CAACZ;IAC7F,MAAMS,MAAMhB;IACZ,MAAM,EACFQ,QAAQ,EACRE,EAAE,EACFN,WAAWgB,UAAU,EACrBX,UAAUY,SAAS,EAEnB,cAAc;IACdV,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACN,GAAGC,QACN,GAAGhB,SAAS,kBAAkBI,cAAcI;IAC7C,qBACI,KAACT;QACGmB,eAAa,CAAC,KAAK,EAAEP,IAAI;QACxB,GAAGM,IAAIE,SAAS,CAAC,QAAQ;YAACP;YAAOC;YAAWC;YAAYC;QAAM,EAAE;QAChE,GAAGC,MAAM;kBAETP;;AAGb;AAEA,MAAMc,0BAA2F,CAACf;IAC9F,MAAMS,MAAMhB;IACZ,MAAM,EACFQ,QAAQ,EACRJ,SAAS,EACTK,QAAQ,EACRC,EAAE,EAEF,cAAc;IACdE,SAAS,EACTC,UAAU,EACVC,MAAM,EACN,GAAGC,QACN,GAAGhB,SAAS,kBAAkBI,cAAcI;IAE7C,MAAM,EAACgB,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,UAAU,EAAEC,mBAAmB,EAAC,GAAGjC,YAAY;QAC5Gc;IACJ;IAEA,qBACI,MAACZ;QACGmB,eAAa,CAAC,KAAK,EAAEP,IAAI;QACzBoB,KAAKL;QACJ,GAAGT,IAAIE,SAAS,CAAC,QAAQ;YACtBP,OAAOe,YACD;gBACIA,WAAW7B,IAAIkC,SAAS,CAACC,QAAQ,CAACN;gBAClCC;YACJ,IACAM;YACNrB;YACAC;YACAC;QACJ,EAAE;QACFoB,mBAAiBN;QAChB,GAAGb,MAAM;;0BAEV,KAACd;gBAAW4B,qBAAqBA;gBAAqBL,WAAWA;gBAAWD,YAAYA;;YACvFf;0BACD,KAACN;gBAAaE,WAAWA;gBAAWK,UAAUA;;;;AAG1D;AAEA,OAAO,MAAM0B,iBAA4E,CAAC,EACtFC,SAAS,EACTC,QAAQ,EACR,GAAGC,YACN;IACG,IAAID,UAAU;QACV,qBAAO,KAAClB;YAAwB,GAAGmB,UAAU;;IACjD;IACA,IAAIF,WAAW;QACX,qBAAO,KAACd;YAAyB,GAAGgB,UAAU;;IAClD;IACA,qBAAO,KAAChC;QAAsB,GAAGgC,UAAU;;AAC/C,EAAE"}

package/dist/esm/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/esm/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/esm/components/Collection/layouts/CollectionLayout.types.js

@@ -0,0 +1,6 @@
+/**
+ * Collection Layout interface
+ * Follows the same pattern as Table's RowLayout
+ */ export { };
+
+//# sourceMappingURL=CollectionLayout.types.js.map

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

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

package/dist/esm/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").JSX.Element;
+        Body: <T>(props: import("./shared/layoutConstants.js").LayoutBodyProps<T> & {
+            ref?: import("react").ForwardedRef<HTMLDivElement>;
+        }) => import("react/jsx-runtime").JSX.Element;
+        Header: (props: import("./shared/layoutConstants.js").LayoutHeaderProps & {
+            ref?: import("react").ForwardedRef<HTMLDivElement>;
+        }) => import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    readonly Vertical: {
+        ({ children }: import("./shared/layoutConstants.js").LayoutProps): import("react/jsx-runtime").JSX.Element;
+        Body: <T>(props: import("./shared/layoutConstants.js").LayoutBodyProps<T> & {
+            ref?: import("react").ForwardedRef<HTMLDivElement>;
+        }) => import("react/jsx-runtime").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/esm/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/esm/components/Collection/layouts/CollectionLayouts.js

@@ -0,0 +1,10 @@
+import { HorizontalLayout } from './horizontal-layout/HorizontalLayout.js';
+import { VerticalLayout } from './vertical-layout/VerticalLayout.js';
+export const CollectionLayouts = {
+    Horizontal: HorizontalLayout,
+    Vertical: VerticalLayout
+};
+export { HorizontalLayout } from './horizontal-layout/HorizontalLayout.js';
+export { VerticalLayout } from './vertical-layout/VerticalLayout.js';
+
+//# sourceMappingURL=CollectionLayouts.js.map

package/dist/esm/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":["HorizontalLayout","VerticalLayout","CollectionLayouts","Horizontal","Vertical"],"mappings":"AAAA,SAAQA,gBAAgB,QAAO,0CAA0C;AACzE,SAAQC,cAAc,QAAO,sCAAsC;AAEnE,OAAO,MAAMC,oBAAoB;IAC7BC,YAAYH;IACZI,UAAUH;AACd,EAAW;AAEX,SAAQD,gBAAgB,QAAO,0CAA0C;AACzE,SAAQC,cAAc,QAAO,sCAAsC"}

package/dist/esm/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").JSX.Element;
+    Body: <T>(props: import("../shared/layoutConstants.js").LayoutBodyProps<T> & {
+        ref?: import("react").ForwardedRef<HTMLDivElement>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Header: (props: import("../shared/layoutConstants.js").LayoutHeaderProps & {
+        ref?: import("react").ForwardedRef<HTMLDivElement>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=HorizontalLayout.d.ts.map

package/dist/esm/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/esm/components/Collection/layouts/horizontal-layout/HorizontalLayout.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { HorizontalLayoutBody } from './HorizontalLayoutBody.js';
+import { HorizontalLayoutHeader } from './HorizontalLayoutHeader.js';
+export const HorizontalLayout = ({ children })=>/*#__PURE__*/ _jsx(_Fragment, {
+        children: children
+    });
+HorizontalLayout.Body = HorizontalLayoutBody;
+HorizontalLayout.Header = HorizontalLayoutHeader;
+HorizontalLayout.displayName = 'Horizontal';
+
+//# sourceMappingURL=HorizontalLayout.js.map

package/dist/esm/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":["HorizontalLayoutBody","HorizontalLayoutHeader","HorizontalLayout","children","Body","Header","displayName"],"mappings":";AACA,SAAQA,oBAAoB,QAAO,4BAA4B;AAC/D,SAAQC,sBAAsB,QAAO,8BAA8B;AAEnE,OAAO,MAAMC,mBAAmB,CAAC,EAACC,QAAQ,EAAc,iBAAK;kBAAGA;OAAa;AAE7ED,iBAAiBE,IAAI,GAAGJ;AACxBE,iBAAiBG,MAAM,GAAGJ;AAC1BC,iBAAiBI,WAAW,GAAG"}

package/dist/esm/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/esm/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").JSX.Element;
+//# sourceMappingURL=HorizontalLayoutBody.d.ts.map

package/dist/esm/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,4CAgCxG,CAAC"}

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Stack, useProps } from '@mantine/core';
+import { useMemo } from 'react';
+import { useCollectionContext } from '../../CollectionContext.js';
+import { getColumnSizeStyles } from '../shared/columnUtils.js';
+import { createItemRenderers, mapItemsToComponents } from '../shared/itemRenderer.js';
+import { LAYOUT_BODY_DEFAULT_PROPS } from '../shared/layoutConstants.js';
+import classes from './HorizontalLayout.module.css';
+const defaultProps = LAYOUT_BODY_DEFAULT_PROPS;
+/**
+ * Horizontal layout specific content renderer - renders cells in a row
+ */ const renderHorizontalContent = (item, index, columns, cellContext, layoutClasses)=>/*#__PURE__*/ _jsx(_Fragment, {
+        children: columns.map((column, colIndex)=>{
+            const columnId = column.id ?? `column-${colIndex}`;
+            return /*#__PURE__*/ _jsx(Box, {
+                className: layoutClasses.cell,
+                style: getColumnSizeStyles(column),
+                children: column.cell(item, index, cellContext)
+            }, columnId);
+        })
+    });
+// Create renderers once - they are stable component references
+const horizontalRenderers = createItemRenderers();
+export const HorizontalLayoutBody = (props)=>{
+    const collectionCtx = useCollectionContext();
+    const { items, onRemove, removable, draggable, disabled, readOnly, getItemId, gap, ref, ...others } = useProps('HorizontalLayoutBody', defaultProps, props);
+    const config = useMemo(()=>({
+            renderContent: renderHorizontalContent,
+            containerSelector: 'row',
+            inlineControls: true
+        }), []);
+    const rows = mapItemsToComponents(items, horizontalRenderers, config, classes, {
+        getItemId,
+        onRemove,
+        removable,
+        draggable,
+        disabled,
+        readOnly,
+        columns: collectionCtx.columns
+    });
+    return /*#__PURE__*/ _jsx(Stack, {
+        ref: ref,
+        gap: gap,
+        ...others,
+        children: rows
+    });
+};
+
+//# sourceMappingURL=HorizontalLayoutBody.js.map

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Collection/layouts/horizontal-layout/HorizontalLayoutBody.tsx"],"sourcesContent":["import {Box, Stack, useProps} from '@mantine/core';\nimport {ForwardedRef, useMemo} from 'react';\nimport {useCollectionContext} from '../../CollectionContext.js';\nimport {getColumnSizeStyles} from '../shared/columnUtils.js';\nimport {createItemRenderers, ItemContentRenderer, LayoutClasses, mapItemsToComponents} from '../shared/itemRenderer.js';\nimport {LAYOUT_BODY_DEFAULT_PROPS, LayoutBodyProps} from '../shared/layoutConstants.js';\nimport classes from './HorizontalLayout.module.css';\n\nconst defaultProps: Partial<LayoutBodyProps> = LAYOUT_BODY_DEFAULT_PROPS;\n\n/**\n * Horizontal layout specific content renderer - renders cells in a row\n */\nconst renderHorizontalContent: ItemContentRenderer<unknown> = (\n    item,\n    index,\n    columns,\n    cellContext,\n    layoutClasses: LayoutClasses,\n) => (\n    <>\n        {columns.map((column, colIndex) => {\n            const columnId = column.id ?? `column-${colIndex}`;\n            return (\n                <Box key={columnId} className={layoutClasses.cell} style={getColumnSizeStyles(column)}>\n                    {column.cell(item, index, cellContext)}\n                </Box>\n            );\n        })}\n    </>\n);\n\n// Create renderers once - they are stable component references\nconst horizontalRenderers = createItemRenderers<unknown>();\n\nexport const HorizontalLayoutBody = <T,>(props: LayoutBodyProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n    const collectionCtx = useCollectionContext();\n    const {items, onRemove, removable, draggable, disabled, readOnly, getItemId, gap, ref, ...others} = useProps(\n        'HorizontalLayoutBody',\n        defaultProps as LayoutBodyProps<T>,\n        props,\n    );\n\n    const config = useMemo(\n        () => ({\n            renderContent: renderHorizontalContent,\n            containerSelector: 'row',\n            inlineControls: true,\n        }),\n        [],\n    );\n\n    const rows = mapItemsToComponents(items, horizontalRenderers, config, classes as LayoutClasses, {\n        getItemId,\n        onRemove,\n        removable,\n        draggable,\n        disabled,\n        readOnly,\n        columns: collectionCtx.columns,\n    });\n\n    return (\n        <Stack ref={ref} gap={gap} {...others}>\n            {rows}\n        </Stack>\n    );\n};\n"],"names":["Box","Stack","useProps","useMemo","useCollectionContext","getColumnSizeStyles","createItemRenderers","mapItemsToComponents","LAYOUT_BODY_DEFAULT_PROPS","classes","defaultProps","renderHorizontalContent","item","index","columns","cellContext","layoutClasses","map","column","colIndex","columnId","id","className","cell","style","horizontalRenderers","HorizontalLayoutBody","props","collectionCtx","items","onRemove","removable","draggable","disabled","readOnly","getItemId","gap","ref","others","config","renderContent","containerSelector","inlineControls","rows"],"mappings":";AAAA,SAAQA,GAAG,EAAEC,KAAK,EAAEC,QAAQ,QAAO,gBAAgB;AACnD,SAAsBC,OAAO,QAAO,QAAQ;AAC5C,SAAQC,oBAAoB,QAAO,6BAA6B;AAChE,SAAQC,mBAAmB,QAAO,2BAA2B;AAC7D,SAAQC,mBAAmB,EAAsCC,oBAAoB,QAAO,4BAA4B;AACxH,SAAQC,yBAAyB,QAAwB,+BAA+B;AACxF,OAAOC,aAAa,gCAAgC;AAEpD,MAAMC,eAAyCF;AAE/C;;CAEC,GACD,MAAMG,0BAAwD,CAC1DC,MACAC,OACAC,SACAC,aACAC,8BAEA;kBACKF,QAAQG,GAAG,CAAC,CAACC,QAAQC;YAClB,MAAMC,WAAWF,OAAOG,EAAE,IAAI,CAAC,OAAO,EAAEF,UAAU;YAClD,qBACI,KAACnB;gBAAmBsB,WAAWN,cAAcO,IAAI;gBAAEC,OAAOnB,oBAAoBa;0BACzEA,OAAOK,IAAI,CAACX,MAAMC,OAAOE;eADpBK;QAIlB;;AAIR,+DAA+D;AAC/D,MAAMK,sBAAsBnB;AAE5B,OAAO,MAAMoB,uBAAuB,CAAKC;IACrC,MAAMC,gBAAgBxB;IACtB,MAAM,EAACyB,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,GAAG,EAAEC,GAAG,EAAE,GAAGC,QAAO,GAAGpC,SAChG,wBACAQ,cACAiB;IAGJ,MAAMY,SAASpC,QACX,IAAO,CAAA;YACHqC,eAAe7B;YACf8B,mBAAmB;YACnBC,gBAAgB;QACpB,CAAA,GACA,EAAE;IAGN,MAAMC,OAAOpC,qBAAqBsB,OAAOJ,qBAAqBc,QAAQ9B,SAA0B;QAC5F0B;QACAL;QACAC;QACAC;QACAC;QACAC;QACApB,SAASc,cAAcd,OAAO;IAClC;IAEA,qBACI,KAACb;QAAMoC,KAAKA;QAAKD,KAAKA;QAAM,GAAGE,MAAM;kBAChCK;;AAGb,EAAE"}

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.d.ts

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

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalLayoutHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAInC,OAAO,EAA8B,iBAAiB,EAAC,MAAM,8BAA8B,CAAC;AAK5F,eAAO,MAAM,sBAAsB,GAAI,OAAO,iBAAiB,GAAG;IAAC,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAAC,4CAsBrG,CAAC"}

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, useProps } from '@mantine/core';
+import { useCollectionContext } from '../../CollectionContext.js';
+import { getColumnSizeStyles } from '../shared/columnUtils.js';
+import { renderColumnHeader } from '../shared/headerUtils.js';
+import { LAYOUT_HEADER_DEFAULT_PROPS } from '../shared/layoutConstants.js';
+import classes from './HorizontalLayout.module.css';
+const defaultProps = LAYOUT_HEADER_DEFAULT_PROPS;
+export const HorizontalLayoutHeader = (props)=>{
+    const collectionCtx = useCollectionContext();
+    const { draggable, removable, style, ref, ...others } = useProps('HorizontalLayoutHeader', defaultProps, props);
+    return /*#__PURE__*/ _jsxs(Box, {
+        ref: ref,
+        className: classes.headerRow,
+        style: style,
+        ...others,
+        children: [
+            draggable && /*#__PURE__*/ _jsx("div", {
+                className: classes.dragHandleHeader
+            }),
+            collectionCtx.columns.map((column, index)=>{
+                const columnId = column.id ?? `column-${index}`;
+                return /*#__PURE__*/ _jsx(Box, {
+                    className: classes.headerCell,
+                    style: getColumnSizeStyles(column),
+                    children: renderColumnHeader(column.header, index)
+                }, columnId);
+            }),
+            removable && /*#__PURE__*/ _jsx("div", {
+                className: classes.removeButtonHeader
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=HorizontalLayoutHeader.js.map

package/dist/esm/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Collection/layouts/horizontal-layout/HorizontalLayoutHeader.tsx"],"sourcesContent":["import {Box, useProps} from '@mantine/core';\nimport {ForwardedRef} from 'react';\nimport {useCollectionContext} from '../../CollectionContext.js';\nimport {getColumnSizeStyles} from '../shared/columnUtils.js';\nimport {renderColumnHeader} from '../shared/headerUtils.js';\nimport {LAYOUT_HEADER_DEFAULT_PROPS, LayoutHeaderProps} from '../shared/layoutConstants.js';\nimport classes from './HorizontalLayout.module.css';\n\nconst defaultProps: Partial<LayoutHeaderProps> = LAYOUT_HEADER_DEFAULT_PROPS;\n\nexport const HorizontalLayoutHeader = (props: LayoutHeaderProps & {ref?: ForwardedRef<HTMLDivElement>}) => {\n    const collectionCtx = useCollectionContext();\n    const {draggable, removable, style, ref, ...others} = useProps(\n        'HorizontalLayoutHeader',\n        defaultProps as LayoutHeaderProps,\n        props,\n    );\n\n    return (\n        <Box ref={ref} className={classes.headerRow} style={style} {...others}>\n            {draggable && <div className={classes.dragHandleHeader} />}\n            {collectionCtx.columns.map((column, index) => {\n                const columnId = column.id ?? `column-${index}`;\n                return (\n                    <Box key={columnId} className={classes.headerCell} style={getColumnSizeStyles(column)}>\n                        {renderColumnHeader(column.header, index)}\n                    </Box>\n                );\n            })}\n            {removable && <div className={classes.removeButtonHeader} />}\n        </Box>\n    );\n};\n"],"names":["Box","useProps","useCollectionContext","getColumnSizeStyles","renderColumnHeader","LAYOUT_HEADER_DEFAULT_PROPS","classes","defaultProps","HorizontalLayoutHeader","props","collectionCtx","draggable","removable","style","ref","others","className","headerRow","div","dragHandleHeader","columns","map","column","index","columnId","id","headerCell","header","removeButtonHeader"],"mappings":";AAAA,SAAQA,GAAG,EAAEC,QAAQ,QAAO,gBAAgB;AAE5C,SAAQC,oBAAoB,QAAO,6BAA6B;AAChE,SAAQC,mBAAmB,QAAO,2BAA2B;AAC7D,SAAQC,kBAAkB,QAAO,2BAA2B;AAC5D,SAAQC,2BAA2B,QAA0B,+BAA+B;AAC5F,OAAOC,aAAa,gCAAgC;AAEpD,MAAMC,eAA2CF;AAEjD,OAAO,MAAMG,yBAAyB,CAACC;IACnC,MAAMC,gBAAgBR;IACtB,MAAM,EAACS,SAAS,EAAEC,SAAS,EAAEC,KAAK,EAAEC,GAAG,EAAE,GAAGC,QAAO,GAAGd,SAClD,0BACAM,cACAE;IAGJ,qBACI,MAACT;QAAIc,KAAKA;QAAKE,WAAWV,QAAQW,SAAS;QAAEJ,OAAOA;QAAQ,GAAGE,MAAM;;YAChEJ,2BAAa,KAACO;gBAAIF,WAAWV,QAAQa,gBAAgB;;YACrDT,cAAcU,OAAO,CAACC,GAAG,CAAC,CAACC,QAAQC;gBAChC,MAAMC,WAAWF,OAAOG,EAAE,IAAI,CAAC,OAAO,EAAEF,OAAO;gBAC/C,qBACI,KAACvB;oBAAmBgB,WAAWV,QAAQoB,UAAU;oBAAEb,OAAOV,oBAAoBmB;8BACzElB,mBAAmBkB,OAAOK,MAAM,EAAEJ;mBAD7BC;YAIlB;YACCZ,2BAAa,KAACM;gBAAIF,WAAWV,QAAQsB,kBAAkB;;;;AAGpE,EAAE"}

package/dist/esm/components/Collection/layouts/shared/DragHandle.d.ts

@@ -0,0 +1,12 @@
+import type { FunctionComponent } from 'react';
+export interface DragHandleProps {
+    setActivatorNodeRef: (element: HTMLElement | null) => void;
+    listeners: any;
+    attributes: any;
+}
+/**
+ * Shared drag handle component used by both horizontal and vertical layouts.
+ * Renders the drag icon with proper event handlers for drag and drop functionality.
+ */
+export declare const DragHandle: FunctionComponent<DragHandleProps>;
+//# sourceMappingURL=DragHandle.d.ts.map

package/dist/esm/components/Collection/layouts/shared/DragHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Collection/layouts/shared/DragHandle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,eAAe;IAC5B,mBAAmB,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,SAAS,EAAE,GAAG,CAAC;IACf,UAAU,EAAE,GAAG,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAOzD,CAAC"}