@coveord/plasma-mantine 56.18.0 → 56.20.1

package/dist/esm/components/Checkbox/Checkbox.js

@@ -1,5 +1,6 @@
 import { Checkbox } from '@mantine/core';
 Checkbox.displayName = 'Checkbox';
+Checkbox.Group.displayName = 'Checkbox.Group';
 export { Checkbox } from '@mantine/core';
 
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.ts"],"sourcesContent":["import {Checkbox} from '@mantine/core';\n\nCheckbox.displayName = 'Checkbox';\n\nexport {Checkbox, type CheckboxFactory, type CheckboxProps} from '@mantine/core';\n"],"names":["Checkbox","displayName"],"mappings":"AAAA,SAAQA,QAAQ,QAAO,gBAAgB;AAEvCA,SAASC,WAAW,GAAG;AAEvB,SAAQD,QAAQ,QAAiD,gBAAgB"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.ts"],"sourcesContent":["import {Checkbox} from '@mantine/core';\n\nCheckbox.displayName = 'Checkbox';\nCheckbox.Group.displayName = 'Checkbox.Group';\n\nexport {Checkbox, type CheckboxFactory, type CheckboxProps} from '@mantine/core';\n"],"names":["Checkbox","displayName","Group"],"mappings":"AAAA,SAAQA,QAAQ,QAAO,gBAAgB;AAEvCA,SAASC,WAAW,GAAG;AACvBD,SAASE,KAAK,CAACD,WAAW,GAAG;AAE7B,SAAQD,QAAQ,QAAiD,gBAAgB"}

package/dist/esm/components/CodeEditor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKH,iBAAiB,EAIjB,UAAU,EAKb,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAiB,MAAM,IAAI,YAAY,EAAC,MAAM,eAAe,CAAC;AACrE,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAQrE,UAAU,eACN,SACI,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,GAAG,mBAAmB,GAAG,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC,EAC/G,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,YAAY,CAAC;IAC/C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;IACrF,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,oEAAoE;IACpE,YAAY,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,YAAY,CAAC,qBAAqB,GAAG,IAAI,CAAC,CAAC;IACjF;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAC/B;;;;OAIG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,oCAAoC,EAAE,SAAS,CAAC,CAAC;CAChF;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA4LzD,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKH,iBAAiB,EAIjB,UAAU,EAKb,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAiB,MAAM,IAAI,YAAY,EAAC,MAAM,eAAe,CAAC;AACrE,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAQrE,UAAU,eACN,SACI,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,GAAG,mBAAmB,GAAG,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC,EAC/G,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,YAAY,CAAC;IAC/C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;IACrF,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,oEAAoE;IACpE,YAAY,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,YAAY,CAAC,qBAAqB,GAAG,IAAI,CAAC,CAAC;IACjF;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAC/B;;;;OAIG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,oCAAoC,EAAE,SAAS,CAAC,CAAC;CAChF;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAsLzD,CAAC"}

package/dist/esm/components/CodeEditor/CodeEditor.js

@@ -166,10 +166,11 @@ export const CodeEditor = (props)=>{
         className: CodeEditorClasses.editor,
         children: /*#__PURE__*/ _jsx(Loader, {})
     });
+    const height = Math.max(Number.isNaN(parentHeight) ? 0 : parentHeight, minHeight);
     return /*#__PURE__*/ _jsxs(Stack, {
         justify: "flex-start",
         gap: "sm",
-        h: Math.max(parentHeight, minHeight),
+        h: height,
         mah: maxHeight,
         ref: ref,
         ...others,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    Group,\n    Input,\n    InputWrapperProps,\n    Loader,\n    Space,\n    Stack,\n    StackProps,\n    px,\n    useMantineColorScheme,\n    useMantineTheme,\n    useProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {Monaco, loader} from '@monaco-editor/react';\nimport {MarkerSeverity, editor as monacoEditor} from 'monaco-editor';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport cx from 'clsx';\nimport {useParentHeight} from '../../hooks/useParentHeight.js';\nimport {CopyToClipboard} from '../CopyToClipboard/CopyToClipboard.js';\nimport CodeEditorClasses from './CodeEditor.module.css';\nimport {XML} from './languages/xml.js';\nimport {Search} from './search/Search.js';\ninterface CodeEditorProps\n    extends\n        Omit<InputWrapperProps, 'inputContainer' | 'inputWrapperOrder' | 'classNames' | 'styles' | 'vars' | 'onChange'>,\n        Omit<StackProps, 'onChange' | 'attributes'> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml' | (string & unknown);\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the search icon is clicked  */\n    onSearch?(): void;\n    /** Called whenever the copy icon is clicked */\n    onCopy?(): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /** Ref object that provides access to the editor's functionality */\n    editorHandle?: React.MutableRefObject<monacoEditor.IStandaloneCodeEditor | null>;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n    /**\n     * Options to pass to the monaco editor.\n     * Currently only supporting [`tabSize`](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html#tabSize).\n     *\n     */\n    options?: Pick<monacoEditor.IStandaloneEditorConstructionOptions, 'tabSize'>;\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onCopy,\n        onSearch,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        options: {tabSize} = {tabSize: 2},\n        editorHandle,\n        ...others\n    } = useProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    const registerThemes = (monaco: Monaco) => {\n        monaco.editor.defineTheme('light', {\n            base: 'vs',\n            inherit: true,\n            rules: [],\n            colors: {\n                'editor.background': theme.colors.gray[0],\n            },\n        });\n    };\n\n    const handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n            onSearch?.();\n        }\n    };\n\n    const [hasMonacoError, setHasMonacoError] = useState(false);\n    const hasMonacoErrorRef = useRef(false);\n\n    hasMonacoErrorRef.current = hasMonacoError;\n\n    const hasError = !!error || hasMonacoError;\n    const theme = useMantineTheme();\n    const {colorScheme} = useMantineColorScheme();\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const handleValidate = (markers: monacoEditor.IMarker[]) => {\n        setHasMonacoError(markers.some((marker) => marker.severity === MarkerSeverity.Error));\n    };\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n\n    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : <Space h=\"sm\" />;\n\n    const _header =\n        _label || _description ? (\n            <Stack gap=\"xxs\">\n                {_label}\n                {_description}\n            </Stack>\n        ) : null;\n\n    const _buttons = (\n        <Group justify=\"right\" gap=\"xs\">\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n    let editorTheme = colorScheme === 'light' ? 'light' : 'vs-dark';\n    if (disabled) {\n        editorTheme += '-disabled';\n    }\n\n    const _editor = loaded ? (\n        <Box\n            p=\"md\"\n            pl=\"xs\"\n            className={cx(\n                CodeEditorClasses.root,\n                {[CodeEditorClasses.error]: hasError},\n                {[CodeEditorClasses.disabled]: disabled},\n            )}\n            data-testid=\"editor-wrapper\"\n        >\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={editorTheme}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs) as number,\n                    readOnly: disabled,\n                    stickyScroll: {enabled: false},\n                    tabSize,\n                }}\n                value={_value}\n                onChange={handleChange}\n                beforeMount={(monaco) => {\n                    registerLanguages(monaco);\n                    registerThemes(monaco);\n                }}\n                onMount={(editor) => {\n                    editorRef.current = editor;\n                    if (editorHandle) {\n                        editorHandle.current = editor;\n                    }\n                    editor.onDidFocusEditorText(() => onFocus?.());\n                    editor.onDidBlurEditorText(async () => {\n                        // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that\n                        setTimeout(async () => {\n                            if (!hasMonacoErrorRef.current) {\n                                await editor?.getAction('editor.action.formatDocument')?.run();\n                            }\n                        }, 550);\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={CodeEditorClasses.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            gap=\"sm\"\n            h={Math.max(parentHeight, minHeight)}\n            mah={maxHeight}\n            ref={ref}\n            {...others}\n        >\n            <Group justify=\"space-between\">\n                {_header}\n                {_buttons}\n            </Group>\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n\nCodeEditor.displayName = 'CodeEditor';\n"],"names":["Box","Center","Group","Input","Loader","Space","Stack","px","useMantineColorScheme","useMantineTheme","useProps","useUncontrolled","Editor","loader","MarkerSeverity","useEffect","useRef","useState","cx","useParentHeight","CopyToClipboard","CodeEditorClasses","XML","Search","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","options","tabSize","editorHandle","others","loaded","setLoaded","_value","handleChange","finalValue","parentHeight","ref","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","registerThemes","editor","defineTheme","base","inherit","rules","colors","theme","gray","handleSearch","current","focus","trigger","hasMonacoError","setHasMonacoError","hasMonacoErrorRef","hasError","colorScheme","handleValidate","markers","some","marker","severity","Error","_label","Label","_description","Description","_error","h","_header","gap","_buttons","justify","editorTheme","_editor","p","pl","className","root","data-testid","onValidate","defaultLanguage","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","stickyScroll","beforeMount","onMount","onDidFocusEditorText","onDidBlurEditorText","setTimeout","getAction","run","Math","max","mah","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    Group,\n    Input,\n    InputWrapperProps,\n    Loader,\n    Space,\n    Stack,\n    StackProps,\n    px,\n    useMantineColorScheme,\n    useMantineTheme,\n    useProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {Monaco, loader} from '@monaco-editor/react';\nimport {MarkerSeverity, editor as monacoEditor} from 'monaco-editor';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport cx from 'clsx';\nimport {useParentHeight} from '../../hooks/useParentHeight.js';\nimport {CopyToClipboard} from '../CopyToClipboard/CopyToClipboard.js';\nimport CodeEditorClasses from './CodeEditor.module.css';\nimport {XML} from './languages/xml.js';\nimport {Search} from './search/Search.js';\ninterface CodeEditorProps\n    extends\n        Omit<InputWrapperProps, 'inputContainer' | 'inputWrapperOrder' | 'classNames' | 'styles' | 'vars' | 'onChange'>,\n        Omit<StackProps, 'onChange' | 'attributes'> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml' | (string & unknown);\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the search icon is clicked  */\n    onSearch?(): void;\n    /** Called whenever the copy icon is clicked */\n    onCopy?(): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /** Ref object that provides access to the editor's functionality */\n    editorHandle?: React.MutableRefObject<monacoEditor.IStandaloneCodeEditor | null>;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n    /**\n     * Options to pass to the monaco editor.\n     * Currently only supporting [`tabSize`](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html#tabSize).\n     *\n     */\n    options?: Pick<monacoEditor.IStandaloneEditorConstructionOptions, 'tabSize'>;\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onCopy,\n        onSearch,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        options: {tabSize} = {tabSize: 2},\n        editorHandle,\n        ...others\n    } = useProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    const registerThemes = (monaco: Monaco) => {\n        monaco.editor.defineTheme('light', {\n            base: 'vs',\n            inherit: true,\n            rules: [],\n            colors: {\n                'editor.background': theme.colors.gray[0],\n            },\n        });\n    };\n\n    const handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n            onSearch?.();\n        }\n    };\n\n    const [hasMonacoError, setHasMonacoError] = useState(false);\n    const hasMonacoErrorRef = useRef(false);\n\n    hasMonacoErrorRef.current = hasMonacoError;\n\n    const hasError = !!error || hasMonacoError;\n    const theme = useMantineTheme();\n    const {colorScheme} = useMantineColorScheme();\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const handleValidate = (markers: monacoEditor.IMarker[]) => {\n        setHasMonacoError(markers.some((marker) => marker.severity === MarkerSeverity.Error));\n    };\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n\n    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : <Space h=\"sm\" />;\n\n    const _header =\n        _label || _description ? (\n            <Stack gap=\"xxs\">\n                {_label}\n                {_description}\n            </Stack>\n        ) : null;\n\n    const _buttons = (\n        <Group justify=\"right\" gap=\"xs\">\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n    let editorTheme = colorScheme === 'light' ? 'light' : 'vs-dark';\n    if (disabled) {\n        editorTheme += '-disabled';\n    }\n\n    const _editor = loaded ? (\n        <Box\n            p=\"md\"\n            pl=\"xs\"\n            className={cx(\n                CodeEditorClasses.root,\n                {[CodeEditorClasses.error]: hasError},\n                {[CodeEditorClasses.disabled]: disabled},\n            )}\n            data-testid=\"editor-wrapper\"\n        >\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={editorTheme}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs) as number,\n                    readOnly: disabled,\n                    stickyScroll: {enabled: false},\n                    tabSize,\n                }}\n                value={_value}\n                onChange={handleChange}\n                beforeMount={(monaco) => {\n                    registerLanguages(monaco);\n                    registerThemes(monaco);\n                }}\n                onMount={(editor) => {\n                    editorRef.current = editor;\n                    if (editorHandle) {\n                        editorHandle.current = editor;\n                    }\n                    editor.onDidFocusEditorText(() => onFocus?.());\n                    editor.onDidBlurEditorText(async () => {\n                        // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that\n                        setTimeout(async () => {\n                            if (!hasMonacoErrorRef.current) {\n                                await editor?.getAction('editor.action.formatDocument')?.run();\n                            }\n                        }, 550);\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={CodeEditorClasses.editor}>\n            <Loader />\n        </Center>\n    );\n\n    const height = Math.max(Number.isNaN(parentHeight) ? 0 : parentHeight, minHeight);\n    return (\n        <Stack justify=\"flex-start\" gap=\"sm\" h={height} mah={maxHeight} ref={ref} {...others}>\n            <Group justify=\"space-between\">\n                {_header}\n                {_buttons}\n            </Group>\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n\nCodeEditor.displayName = 'CodeEditor';\n"],"names":["Box","Center","Group","Input","Loader","Space","Stack","px","useMantineColorScheme","useMantineTheme","useProps","useUncontrolled","Editor","loader","MarkerSeverity","useEffect","useRef","useState","cx","useParentHeight","CopyToClipboard","CodeEditorClasses","XML","Search","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","options","tabSize","editorHandle","others","loaded","setLoaded","_value","handleChange","finalValue","parentHeight","ref","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","registerThemes","editor","defineTheme","base","inherit","rules","colors","theme","gray","handleSearch","current","focus","trigger","hasMonacoError","setHasMonacoError","hasMonacoErrorRef","hasError","colorScheme","handleValidate","markers","some","marker","severity","Error","_label","Label","_description","Description","_error","h","_header","gap","_buttons","justify","editorTheme","_editor","p","pl","className","root","data-testid","onValidate","defaultLanguage","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","stickyScroll","beforeMount","onMount","onDidFocusEditorText","onDidBlurEditorText","setTimeout","getAction","run","height","Math","max","Number","isNaN","mah","displayName"],"mappings":"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"}

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

@@ -1,18 +1,16 @@
 import { __InputWrapperProps, BoxProps, Factory, MantineSpacing, StylesApiProps } from '@mantine/core';
 import { ForwardedRef, ReactNode } from 'react';
 import { CustomComponentThemeExtend } from '../../utils/createFactoryComponent.js';
-export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {
+import { CollectionColumnDef } from './CollectionColumn.types.js';
+import { CollectionLayout } from './layouts/CollectionLayout.types.js';
+/**
+ * Base props shared by both column-based and children-based patterns
+ */
+interface BaseCollectionProps<T> extends __InputWrapperProps, BoxProps, StylesApiProps<CollectionFactory> {
     /**
      * The default value each new item should have
      */
     newItem: T | (() => T);
-    /**
-     * A render function called for each item passed in the `value` prop.
-     *
-     * @param item The current item's value
-     * @param index The current item's index
-     */
-    children: (item: T, index: number) => ReactNode;
     /**
      * The list of items to display inside the collection
      *
@@ -92,7 +90,7 @@ export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, Style
      *
      * @default "Add item"
      */
-    addLabel?: string;
+    addLabel?: ReactNode;
     /**
      * The tooltip text displayed when hovering over the disabled add item button
      *
@@ -100,9 +98,9 @@ export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, Style
      */
     addDisabledTooltip?: string;
     /**
-     * The gap between the colleciton items
+     * The gap between the collection items
      *
-     * @default 'xs'
+     * @default 'md'
      */
     gap?: MantineSpacing;
     /**
@@ -112,7 +110,49 @@ export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, Style
      */
     required?: boolean;
 }
-export type CollectionStylesNames = 'root' | 'item' | 'items' | 'itemDragging' | 'dragHandle';
+/**
+ * Collection with column-based layout
+ */
+interface CollectionWithColumns<T> extends BaseCollectionProps<T> {
+    /**
+     * Column definitions for the collection
+     */
+    columns: Array<CollectionColumnDef<T>>;
+    /**
+     * Layout component to use for rendering
+     * @default CollectionLayouts.Horizontal
+     */
+    layout?: CollectionLayout;
+    /**
+     * Must not have children when using columns
+     */
+    children?: never;
+}
+/**
+ * Collection with legacy children render prop
+ */
+interface CollectionWithChildren<T> extends BaseCollectionProps<T> {
+    /**
+     * A render function called for each item passed in the `value` prop.
+     *
+     * @param item The current item's value
+     * @param index The current item's index
+     */
+    children: (item: T, index: number) => ReactNode;
+    /**
+     * Must not have columns when using children
+     */
+    columns?: never;
+    /**
+     * Must not have layout when using children
+     */
+    layout?: never;
+}
+/**
+ * Collection props - either columns OR children, never both
+ */
+export type CollectionProps<T> = CollectionWithColumns<T> | CollectionWithChildren<T>;
+export type CollectionStylesNames = 'root' | 'item' | 'items' | 'itemDragging' | 'dragHandle' | 'removeButton';
 export type CollectionFactory = Factory<{
     props: CollectionProps<unknown>;
     ref: HTMLDivElement;
@@ -128,5 +168,28 @@ export declare const Collection: {
         ref: HTMLDivElement;
         stylesNames: CollectionStylesNames;
     }>;
+    Layouts: {
+        readonly Horizontal: {
+            ({ children }: import("./layouts/shared/layoutConstants.js").LayoutProps): import("react/jsx-runtime").JSX.Element;
+            Body: <T>(props: import("./layouts/shared/layoutConstants.js").LayoutBodyProps<T> & {
+                ref?: ForwardedRef<HTMLDivElement>;
+            }) => import("react/jsx-runtime").JSX.Element;
+            Header: (props: import("./layouts/shared/layoutConstants.js").LayoutHeaderProps & {
+                ref?: ForwardedRef<HTMLDivElement>;
+            }) => import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        readonly Vertical: {
+            ({ children }: import("./layouts/shared/layoutConstants.js").LayoutProps): import("react/jsx-runtime").JSX.Element;
+            Body: <T>(props: import("./layouts/shared/layoutConstants.js").LayoutBodyProps<T> & {
+                ref?: ForwardedRef<HTMLDivElement>;
+            }) => import("react/jsx-runtime").JSX.Element;
+            Header: (_props: import("./layouts/shared/layoutConstants.js").LayoutHeaderProps & {
+                ref?: ForwardedRef<HTMLDivElement>;
+            }) => null;
+            displayName: string;
+        };
+    };
 };
+export {};
 //# sourceMappingURL=Collection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/Collection/Collection.tsx"],"names":[],"mappings":"AAIA,OAAO,EACH,mBAAmB,EAEnB,QAAQ,EACR,OAAO,EAEP,cAAc,EAEd,cAAc,EAGjB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAC,0BAA0B,EAAW,MAAM,uCAAuC,CAAC;AAM3F,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,mBAAmB,EAAE,QAAQ,EAAE,cAAc,CAAC,iBAAiB,CAAC;IACxG;;OAEG;IACH,OAAO,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IACvB;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;IAC9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC;IAChD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,YAAY,CAAC;AAE9F,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAChC,GAAG,EAAE,cAAc,CAAC;IACpB,WAAW,EAAE,qBAAqB,CAAC;CACtC,CAAC,CAAC;AAaH,eAAO,MAAM,UAAU;KAAI,CAAC,SAAU,eAAe,CAAC,CAAC,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;KAAC;;;eAhBpF,eAAe,CAAC,OAAO,CAAC;aAC1B,cAAc;qBACN,qBAAqB;;CAqKrC,CAAC"}
+{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/Collection/Collection.tsx"],"names":[],"mappings":"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"}

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

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconPlus } from '@coveord/plasma-react-icons';
 import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { Box, Input, Stack, useProps, useStyles } from '@mantine/core';
 import { useDidUpdate } from '@mantine/hooks';
 import { identity } from '../../utils/createFactoryComponent.js';
-import { Button } from '../Button/Button.js';
 import classes from './Collection.module.css';
+import { CollectionAddButton } from './CollectionAddButton.js';
 import { CollectionProvider } from './CollectionContext.js';
 import { CollectionItem } from './CollectionItem.js';
+import { CollectionLayouts } from './layouts/CollectionLayouts.js';
 const defaultProps = {
     draggable: false,
     addLabel: 'Add item',
@@ -21,8 +21,15 @@ const defaultProps = {
     getItemId: ({ id })=>id
 };
 export const Collection = (props)=>{
-    const { value, onChange, onRemoveItem, onReorderItem, onInsertItem, disabled, readOnly, draggable, children, gap, required, newItem, addLabel, addDisabledTooltip, allowAdd, label, labelProps, withAsterisk, description, descriptionProps, error, errorProps, getItemId, ref, // Style props
+    const { value, onChange, onRemoveItem, onReorderItem, onInsertItem, disabled, readOnly, draggable, children, columns, layout, gap, required, newItem, addLabel, addDisabledTooltip, allowAdd, label, labelProps, withAsterisk, description, descriptionProps, error, errorProps, getItemId, ref, // Style props
     style, className, classNames, styles, unstyled, ...others } = useProps('Collection', defaultProps, props);
+    // Runtime validation: ensure columns and children are mutually exclusive
+    if (columns && children) {
+        throw new Error('Collection: Cannot use both "columns" and "children" props.');
+    }
+    if (layout && !columns) {
+        throw new Error('Collection: "layout" prop can only be used with "columns" prop.');
+    }
     const getStyles = useStyles({
         name: 'Collection',
         classes,
@@ -37,13 +44,14 @@ export const Collection = (props)=>{
         coordinateGetter: sortableKeyboardCoordinates
     }));
     const canEdit = !disabled && !readOnly;
-    const hasOnlyOneItem = value.length === 1;
+    const items = value ?? [];
+    const hasOnlyOneItem = items.length === 1;
     /**
      * Enforcing onChange when the value is modified will make sure the errors are carried through.
      */ useDidUpdate(()=>{
-        onChange?.(value);
+        onChange?.(items);
     }, [
-        JSON.stringify(value)
+        JSON.stringify(items)
     ]);
     const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;
     const _label = label ? /*#__PURE__*/ _jsx(Input.Label, {
@@ -68,34 +76,10 @@ export const Collection = (props)=>{
             _description
         ]
     }) : null;
-    const standardizedItems = value.map((item, index)=>({
+    const standardizedItems = items.map((item, index)=>({
             id: getItemId?.(item, index) ?? String(index),
             data: item
         }));
-    const items = standardizedItems.map((item, index)=>/*#__PURE__*/ _jsx(CollectionItem, {
-            id: item.id,
-            disabled: !canEdit,
-            draggable: draggable,
-            onRemove: ()=>onRemoveItem?.(index),
-            removable: !(isRequired && hasOnlyOneItem),
-            children: children(item.data, index)
-        }, item.id));
-    const addAllowed = typeof allowAdd === 'boolean' ? allowAdd : allowAdd?.(value) ?? true;
-    const _addButton = canEdit ? /*#__PURE__*/ _jsx(Box, {
-        className: classes.addButtonContainer,
-        children: /*#__PURE__*/ _jsx(Button.Quaternary, {
-            leftSection: /*#__PURE__*/ _jsx(IconPlus, {
-                size: 16
-            }),
-            onClick: ()=>{
-                const newItemValue = typeof newItem === 'function' ? newItem() : newItem;
-                onInsertItem(newItemValue, value?.length ?? 0);
-            },
-            disabled: !addAllowed,
-            disabledTooltip: addDisabledTooltip,
-            children: addLabel
-        })
-    }) : null;
     const getIndex = (id)=>standardizedItems.findIndex((item)=>item.id === id);
     const handleDragEnd = ({ over, active })=>{
         if (over) {
@@ -109,6 +93,76 @@ export const Collection = (props)=>{
             }
         }
     };
+    const addAllowed = typeof allowAdd === 'boolean' ? allowAdd : allowAdd?.(items) ?? true;
+    const handleAdd = ()=>{
+        const newItemValue = typeof newItem === 'function' ? newItem() : newItem;
+        onInsertItem?.(newItemValue, items?.length ?? 0);
+    };
+    const _addButton = canEdit ? /*#__PURE__*/ _jsx(CollectionAddButton, {
+        addLabel: addLabel,
+        addDisabledTooltip: addDisabledTooltip,
+        addAllowed: addAllowed,
+        onAdd: handleAdd
+    }) : null;
+    // Column-based layout pattern
+    if (columns) {
+        const Layout = layout || CollectionLayouts.Horizontal;
+        return /*#__PURE__*/ _jsx(CollectionProvider, {
+            value: {
+                getStyles,
+                columns: columns
+            },
+            children: /*#__PURE__*/ _jsx(DndContext, {
+                onDragEnd: handleDragEnd,
+                sensors: sensors,
+                modifiers: [
+                    restrictToVerticalAxis,
+                    restrictToParentElement
+                ],
+                children: /*#__PURE__*/ _jsx(SortableContext, {
+                    items: standardizedItems,
+                    strategy: verticalListSortingStrategy,
+                    children: /*#__PURE__*/ _jsxs(Box, {
+                        ref: ref,
+                        ...others,
+                        ...getStyles('root'),
+                        children: [
+                            _header,
+                            /*#__PURE__*/ _jsxs(Layout, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Layout.Header, {
+                                        draggable: draggable && canEdit,
+                                        removable: canEdit && !(isRequired && hasOnlyOneItem)
+                                    }),
+                                    /*#__PURE__*/ _jsx(Layout.Body, {
+                                        items: items,
+                                        onRemove: canEdit ? onRemoveItem : undefined,
+                                        removable: canEdit && !(isRequired && hasOnlyOneItem),
+                                        draggable: draggable && canEdit,
+                                        disabled: disabled,
+                                        readOnly: readOnly,
+                                        getItemId: getItemId,
+                                        gap: gap
+                                    })
+                                ]
+                            }),
+                            _addButton,
+                            _error
+                        ]
+                    })
+                })
+            })
+        });
+    }
+    // Legacy children render prop pattern
+    const renderedItems = standardizedItems.map((item, index)=>/*#__PURE__*/ _jsx(CollectionItem, {
+            id: item.id,
+            disabled: !canEdit,
+            draggable: draggable,
+            onRemove: ()=>onRemoveItem?.(index),
+            removable: !(isRequired && hasOnlyOneItem),
+            children: children(item.data, index)
+        }, item.id));
     return /*#__PURE__*/ _jsx(CollectionProvider, {
         value: {
             getStyles
@@ -133,7 +187,7 @@ export const Collection = (props)=>{
                             gap: gap,
                             ...getStyles('items'),
                             children: [
-                                items,
+                                renderedItems,
                                 _addButton
                             ]
                         }),
@@ -146,5 +200,6 @@ export const Collection = (props)=>{
 };
 Collection.displayName = 'Collection';
 Collection.extend = identity;
+Collection.Layouts = CollectionLayouts;
 
 //# sourceMappingURL=Collection.js.map

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