@coveord/plasma-mantine 56.18.0 → 56.20.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconPlus } from '@coveord/plasma-react-icons';
+import { Box } from '@mantine/core';
+import { Button } from '../Button/Button.js';
+import classes from './Collection.module.css';
+export const CollectionAddButton = ({ addLabel, addDisabledTooltip, addAllowed, onAdd })=>/*#__PURE__*/ _jsx(Box, {
+        className: classes.addButtonContainer,
+        children: /*#__PURE__*/ _jsx(Button.Quaternary, {
+            leftSection: /*#__PURE__*/ _jsx(IconPlus, {
+                size: 16
+            }),
+            onClick: onAdd,
+            disabled: !addAllowed,
+            disabledTooltip: addDisabledTooltip,
+            children: addLabel
+        })
+    });
+
+//# sourceMappingURL=CollectionAddButton.js.map

package/dist/esm/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":["IconPlus","Box","Button","classes","CollectionAddButton","addLabel","addDisabledTooltip","addAllowed","onAdd","className","addButtonContainer","Quaternary","leftSection","size","onClick","disabled","disabledTooltip"],"mappings":";AAAA,SAAQA,QAAQ,QAAO,8BAA8B;AACrD,SAAQC,GAAG,QAAO,gBAAgB;AAGlC,SAAQC,MAAM,QAAO,sBAAsB;AAC3C,OAAOC,aAAa,0BAA0B;AAyB9C,OAAO,MAAMC,sBAAsB,CAAC,EAACC,QAAQ,EAAEC,kBAAkB,EAAEC,UAAU,EAAEC,KAAK,EAA2B,iBAC3G,KAACP;QAAIQ,WAAWN,QAAQO,kBAAkB;kBACtC,cAAA,KAACR,OAAOS,UAAU;YACdC,2BAAa,KAACZ;gBAASa,MAAM;;YAC7BC,SAASN;YACTO,UAAU,CAACR;YACXS,iBAAiBV;sBAEhBD;;OAGX"}

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":"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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":["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"}