@webiny/admin-ui 6.4.11 → 6.6.0-alpha.1

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.d.ts

@@ -22,60 +22,61 @@ interface MultiFilePickerPrimitiveProps extends Omit<FilePickerPrimitiveProps, "
      */
     onRemoveItem?: (item: FileItemFormatted | null, index: number) => void;
 }
-declare const MultiFilePickerPrimitive: (({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element) & {
-    original: ({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element;
+declare const BaseMultiFilePickerPrimitive: ({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element;
+declare const MultiFilePickerPrimitive: typeof BaseMultiFilePickerPrimitive & {
+    original: typeof BaseMultiFilePickerPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element;
+    original: typeof BaseMultiFilePickerPrimitive & {
+        original: typeof BaseMultiFilePickerPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseMultiFilePickerPrimitive & {
+        original: typeof BaseMultiFilePickerPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
     Preview: {
-        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
-            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
+        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
+            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
+            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
+        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;

package/MultiSelect/MultiSelect.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { MultiSelectPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type MultiSelectProps = MultiSelectPrimitiveProps & FormComponentProps;
-declare const MultiSelect: (({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element;
+declare const DecoratableMultiSelect: ({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element;
+declare const MultiSelect: typeof DecoratableMultiSelect & {
+    original: typeof DecoratableMultiSelect;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element;
+    original: typeof DecoratableMultiSelect & {
+        original: typeof DecoratableMultiSelect;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableMultiSelect & {
+        original: typeof DecoratableMultiSelect;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/MultiSelect/primitives/MultiSelectPrimitive.d.ts

@@ -23,21 +23,25 @@ interface MultiSelectPrimitiveProps {
     size?: VariantProps<typeof selectTriggerVariants>["size"];
     variant?: VariantProps<typeof selectTriggerVariants>["variant"];
 }
-declare const MultiSelectPrimitive: (({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element) & {
-    original: ({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element;
+/**
+ * MultiSelect Primitive
+ */
+declare const DecoratableMultiSelectPrimitive: ({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element;
+declare const MultiSelectPrimitive: typeof DecoratableMultiSelectPrimitive & {
+    original: typeof DecoratableMultiSelectPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element) & {
-        original: ({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableMultiSelectPrimitive & {
+        original: typeof DecoratableMultiSelectPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element) & {
-        original: ({ options, value, onChange, onValueReset, placeholder, disabled, invalid, displayResetAction, showSelectionCount, size, variant }: MultiSelectPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableMultiSelectPrimitive & {
+        original: typeof DecoratableMultiSelectPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/MultiSelect/primitives/MultiSelectPrimitive.js

@@ -53,7 +53,7 @@ const MultiSelectContent = ({ options, value, onToggle })=>/*#__PURE__*/ react.c
         className: cn("relative z-popover shadow-lg py-sm overflow-y-auto rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2", "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"),
         style: {
             width: "var(--radix-popover-trigger-width)",
-            maxHeight: "var(--radix-popover-content-available-height, 24rem)"
+            maxHeight: "min(250px, var(--radix-popover-content-available-height, 250px))"
         },
         align: "start",
         sideOffset: 4

package/MultiSelect/primitives/MultiSelectPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect/primitives/MultiSelectPrimitive.js","sources":["../../../src/MultiSelect/primitives/MultiSelectPrimitive.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { Popover } from \"radix-ui\";\nimport { ReactComponent as ChevronDown } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { cn, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { CheckboxPrimitiveRenderer } from \"~/Checkbox/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { selectTriggerVariants } from \"~/Select/primitives/components/index.js\";\n\ninterface MultiSelectOptionDto {\n    label: string;\n    value: string;\n    disabled?: boolean;\n}\n\ninterface MultiSelectPrimitiveProps {\n    options?: MultiSelectOptionDto[];\n    value?: string[];\n    onChange?: (values: string[]) => void;\n    onValueReset?: () => void;\n    placeholder?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    displayResetAction?: boolean;\n    /**\n     * When `true`, shows \"{count} items selected\" in the trigger instead of the full\n     * comma-separated label list.\n     */\n    showSelectionCount?: boolean;\n    size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n    variant?: VariantProps<typeof selectTriggerVariants>[\"variant\"];\n}\n\n/**\n * MultiSelect Trigger\n */\ninterface MultiSelectTriggerProps {\n    displayValue: string;\n    hasValue: boolean;\n    placeholder: string;\n    displayResetAction: boolean;\n    disabled?: boolean;\n    invalid?: VariantProps<typeof selectTriggerVariants>[\"invalid\"];\n    size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n    variant?: VariantProps<typeof selectTriggerVariants>[\"variant\"];\n    onValueReset: () => void;\n}\n\nconst MultiSelectTrigger = ({\n    displayValue,\n    hasValue,\n    placeholder,\n    displayResetAction,\n    disabled,\n    invalid,\n    size,\n    variant,\n    onValueReset\n}: MultiSelectTriggerProps) => {\n    const resetButton = useMemo(() => {\n        if (!hasValue || !displayResetAction) {\n            return undefined;\n        }\n        return (\n            <IconButton\n                onPointerDown={event => {\n                    event.stopPropagation();\n                    onValueReset();\n                }}\n                icon={\n                    <span>\n                        <Icon\n                            icon={<Close />}\n                            label={\"Reset\"}\n                            color={variant === \"ghost-negative\" ? \"neutral-negative\" : \"inherit\"}\n                        />\n                    </span>\n                }\n                size={\"xs\"}\n                variant={variant === \"ghost-negative\" ? \"ghost-negative\" : \"secondary\"}\n                disabled={disabled}\n                asChild\n            />\n        );\n    }, [hasValue, displayResetAction, onValueReset, variant, disabled]);\n\n    return (\n        <Popover.Trigger\n            className={cn(selectTriggerVariants({ variant, size, invalid }))}\n            disabled={disabled}\n        >\n            <div className={\"flex-1 text-left truncate\"}>\n                {hasValue ? (\n                    displayValue\n                ) : (\n                    <span className={\"text-neutral-disabled\"}>{placeholder}</span>\n                )}\n            </div>\n            {resetButton}\n            <span className={\"h-md w-md shrink-0 fill-neutral-xstrong\"}>\n                <ChevronDown className={\"h-md w-md\"} />\n            </span>\n        </Popover.Trigger>\n    );\n};\n\n/**\n * MultiSelect Content\n */\ninterface MultiSelectContentProps {\n    options: MultiSelectOptionDto[];\n    value: string[];\n    onToggle: (value: string) => void;\n}\n\nconst MultiSelectContent = ({ options, value, onToggle }: MultiSelectContentProps) => {\n    return (\n        <Popover.Portal>\n            <Popover.Content\n                className={cn(\n                    \"relative z-popover shadow-lg py-sm overflow-y-auto rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n                    \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n                    \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n                    \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\"\n                )}\n                style={{\n                    width: \"var(--radix-popover-trigger-width)\",\n                    maxHeight: \"var(--radix-popover-content-available-height, 24rem)\"\n                }}\n                align={\"start\"}\n                sideOffset={4}\n            >\n                {options.map(option => (\n                    <div\n                        key={option.value}\n                        className={cn(\n                            \"rounded-sm p-sm mx-sm cursor-pointer\",\n                            \"hover:bg-neutral-dimmed\",\n                            option.disabled && \"opacity-50 pointer-events-none\"\n                        )}\n                        onClick={() => onToggle(option.value)}\n                    >\n                        <div className={\"pointer-events-none\"}>\n                            <CheckboxPrimitiveRenderer\n                                id={option.value}\n                                label={option.label}\n                                value={option.value}\n                                checked={value.includes(option.value)}\n                                disabled={option.disabled ?? false}\n                                indeterminate={false}\n                                hasLabel={true}\n                                changeChecked={() => {}}\n                            />\n                        </div>\n                    </div>\n                ))}\n            </Popover.Content>\n        </Popover.Portal>\n    );\n};\n\n/**\n * MultiSelect Primitive\n */\nconst DecoratableMultiSelectPrimitive = ({\n    options = [],\n    value = [],\n    onChange,\n    onValueReset,\n    placeholder = \"Select options\",\n    disabled,\n    invalid,\n    displayResetAction = true,\n    showSelectionCount,\n    size,\n    variant\n}: MultiSelectPrimitiveProps) => {\n    const displayValue = useMemo(() => {\n        if (value.length === 0) {\n            return \"\";\n        }\n        if (showSelectionCount) {\n            return `${value.length} items selected`;\n        }\n        const labelMap = new Map(options.map(o => [o.value, o.label]));\n        return value.map(v => labelMap.get(v) ?? v).join(\", \");\n    }, [value, options, showSelectionCount]);\n\n    const toggle = useCallback(\n        (optionValue: string) => {\n            const next = value.includes(optionValue)\n                ? value.filter(v => v !== optionValue)\n                : [...value, optionValue];\n            onChange?.(next);\n        },\n        [value, onChange]\n    );\n\n    const reset = useCallback(() => {\n        onChange?.([]);\n        onValueReset?.();\n    }, [onChange, onValueReset]);\n\n    return (\n        <Popover.Root>\n            <MultiSelectTrigger\n                displayValue={displayValue}\n                hasValue={value.length > 0}\n                placeholder={placeholder}\n                displayResetAction={displayResetAction}\n                disabled={disabled}\n                invalid={invalid}\n                size={size}\n                variant={variant}\n                onValueReset={reset}\n            />\n            <MultiSelectContent options={options} value={value} onToggle={toggle} />\n        </Popover.Root>\n    );\n};\nconst MultiSelectPrimitive = makeDecoratable(\n    \"MultiSelectPrimitive\",\n    DecoratableMultiSelectPrimitive\n);\n\nexport { MultiSelectPrimitive, type MultiSelectPrimitiveProps, type MultiSelectOptionDto };\n"],"names":["MultiSelectTrigger","displayValue","hasValue","placeholder","displayResetAction","disabled","invalid","size","variant","onValueReset","resetButton","useMemo","IconButton","event","Icon","Close","Popover","cn","selectTriggerVariants","ChevronDown","MultiSelectContent","options","value","onToggle","option","CheckboxPrimitiveRenderer","DecoratableMultiSelectPrimitive","onChange","showSelectionCount","labelMap","Map","o","v","toggle","useCallback","optionValue","next","reset","MultiSelectPrimitive","makeDecoratable"],"mappings":";;;;;;;;;AAiDA,MAAMA,qBAAqB,CAAC,EACxBC,YAAY,EACZC,QAAQ,EACRC,WAAW,EACXC,kBAAkB,EAClBC,QAAQ,EACRC,OAAO,EACPC,IAAI,EACJC,OAAO,EACPC,YAAY,EACU;IACtB,MAAMC,cAAcC,QAAQ;QACxB,IAAI,CAACT,YAAY,CAACE,oBACd;QAEJ,OAAO,WAAP,GACI,oBAACQ,YAAUA;YACP,eAAeC,CAAAA;gBACXA,MAAM,eAAe;gBACrBJ;YACJ;YACA,oBACI,oBAAC,4BACG,oBAACK,MAAIA;gBACD,oBAAM,oBAACC,0BAAKA;gBACZ,OAAO;gBACP,OAAOP,AAAY,qBAAZA,UAA+B,qBAAqB;;YAIvE,MAAM;YACN,SAASA,AAAY,qBAAZA,UAA+B,mBAAmB;YAC3D,UAAUH;YACV;;IAGZ,GAAG;QAACH;QAAUE;QAAoBK;QAAcD;QAASH;KAAS;IAElE,OAAO,WAAP,GACI,oBAACW,QAAQ,OAAO;QACZ,WAAWC,GAAGC,sBAAsB;YAAEV;YAASD;YAAMD;QAAQ;QAC7D,UAAUD;qBAEV,oBAAC;QAAI,WAAW;OACXH,WACGD,eAAAA,WAAAA,GAEA,oBAAC;QAAK,WAAW;OAA0BE,eAGlDO,aAAAA,WAAAA,GACD,oBAAC;QAAK,WAAW;qBACb,oBAACS,gBAAWA;QAAC,WAAW;;AAIxC;AAWA,MAAMC,qBAAqB,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAA2B,GACtE,WAAP,GACI,oBAACP,QAAQ,MAAM,sBACX,oBAACA,QAAQ,OAAO;QACZ,WAAWC,GACP,oIACA,gEACA,8DACA,gEACA,iFACA;QAEJ,OAAO;YACH,OAAO;YACP,WAAW;QACf;QACA,OAAO;QACP,YAAY;OAEXI,QAAQ,GAAG,CAACG,CAAAA,SAAAA,WAAAA,GACT,oBAAC;YACG,KAAKA,OAAO,KAAK;YACjB,WAAWP,GACP,wCACA,2BACAO,OAAO,QAAQ,IAAI;YAEvB,SAAS,IAAMD,SAASC,OAAO,KAAK;yBAEpC,oBAAC;YAAI,WAAW;yBACZ,oBAACC,2BAAyBA;YACtB,IAAID,OAAO,KAAK;YAChB,OAAOA,OAAO,KAAK;YACnB,OAAOA,OAAO,KAAK;YACnB,SAASF,MAAM,QAAQ,CAACE,OAAO,KAAK;YACpC,UAAUA,OAAO,QAAQ,IAAI;YAC7B,eAAe;YACf,UAAU;YACV,eAAe,KAAO;;AAatD,MAAME,kCAAkC,CAAC,EACrCL,UAAU,EAAE,EACZC,QAAQ,EAAE,EACVK,QAAQ,EACRlB,YAAY,EACZN,cAAc,gBAAgB,EAC9BE,QAAQ,EACRC,OAAO,EACPF,qBAAqB,IAAI,EACzBwB,kBAAkB,EAClBrB,IAAI,EACJC,OAAO,EACiB;IACxB,MAAMP,eAAeU,QAAQ;QACzB,IAAIW,AAAiB,MAAjBA,MAAM,MAAM,EACZ,OAAO;QAEX,IAAIM,oBACA,OAAO,GAAGN,MAAM,MAAM,CAAC,eAAe,CAAC;QAE3C,MAAMO,WAAW,IAAIC,IAAIT,QAAQ,GAAG,CAACU,CAAAA,IAAK;gBAACA,EAAE,KAAK;gBAAEA,EAAE,KAAK;aAAC;QAC5D,OAAOT,MAAM,GAAG,CAACU,CAAAA,IAAKH,SAAS,GAAG,CAACG,MAAMA,GAAG,IAAI,CAAC;IACrD,GAAG;QAACV;QAAOD;QAASO;KAAmB;IAEvC,MAAMK,SAASC,YACX,CAACC;QACG,MAAMC,OAAOd,MAAM,QAAQ,CAACa,eACtBb,MAAM,MAAM,CAACU,CAAAA,IAAKA,MAAMG,eACxB;eAAIb;YAAOa;SAAY;QAC7BR,WAAWS;IACf,GACA;QAACd;QAAOK;KAAS;IAGrB,MAAMU,QAAQH,YAAY;QACtBP,WAAW,EAAE;QACblB;IACJ,GAAG;QAACkB;QAAUlB;KAAa;IAE3B,OAAO,WAAP,GACI,oBAACO,QAAQ,IAAI,sBACT,oBAAChB,oBAAkBA;QACf,cAAcC;QACd,UAAUqB,MAAM,MAAM,GAAG;QACzB,aAAanB;QACb,oBAAoBC;QACpB,UAAUC;QACV,SAASC;QACT,MAAMC;QACN,SAASC;QACT,cAAc6B;sBAElB,oBAACjB,oBAAkBA;QAAC,SAASC;QAAS,OAAOC;QAAO,UAAUW;;AAG1E;AACA,MAAMK,uBAAuBC,gBACzB,wBACAb"}
+{"version":3,"file":"MultiSelect/primitives/MultiSelectPrimitive.js","sources":["../../../src/MultiSelect/primitives/MultiSelectPrimitive.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { Popover } from \"radix-ui\";\nimport { ReactComponent as ChevronDown } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { cn, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { CheckboxPrimitiveRenderer } from \"~/Checkbox/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { selectTriggerVariants } from \"~/Select/primitives/components/index.js\";\n\ninterface MultiSelectOptionDto {\n    label: string;\n    value: string;\n    disabled?: boolean;\n}\n\ninterface MultiSelectPrimitiveProps {\n    options?: MultiSelectOptionDto[];\n    value?: string[];\n    onChange?: (values: string[]) => void;\n    onValueReset?: () => void;\n    placeholder?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    displayResetAction?: boolean;\n    /**\n     * When `true`, shows \"{count} items selected\" in the trigger instead of the full\n     * comma-separated label list.\n     */\n    showSelectionCount?: boolean;\n    size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n    variant?: VariantProps<typeof selectTriggerVariants>[\"variant\"];\n}\n\n/**\n * MultiSelect Trigger\n */\ninterface MultiSelectTriggerProps {\n    displayValue: string;\n    hasValue: boolean;\n    placeholder: string;\n    displayResetAction: boolean;\n    disabled?: boolean;\n    invalid?: VariantProps<typeof selectTriggerVariants>[\"invalid\"];\n    size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n    variant?: VariantProps<typeof selectTriggerVariants>[\"variant\"];\n    onValueReset: () => void;\n}\n\nconst MultiSelectTrigger = ({\n    displayValue,\n    hasValue,\n    placeholder,\n    displayResetAction,\n    disabled,\n    invalid,\n    size,\n    variant,\n    onValueReset\n}: MultiSelectTriggerProps) => {\n    const resetButton = useMemo(() => {\n        if (!hasValue || !displayResetAction) {\n            return undefined;\n        }\n        return (\n            <IconButton\n                onPointerDown={event => {\n                    event.stopPropagation();\n                    onValueReset();\n                }}\n                icon={\n                    <span>\n                        <Icon\n                            icon={<Close />}\n                            label={\"Reset\"}\n                            color={variant === \"ghost-negative\" ? \"neutral-negative\" : \"inherit\"}\n                        />\n                    </span>\n                }\n                size={\"xs\"}\n                variant={variant === \"ghost-negative\" ? \"ghost-negative\" : \"secondary\"}\n                disabled={disabled}\n                asChild\n            />\n        );\n    }, [hasValue, displayResetAction, onValueReset, variant, disabled]);\n\n    return (\n        <Popover.Trigger\n            className={cn(selectTriggerVariants({ variant, size, invalid }))}\n            disabled={disabled}\n        >\n            <div className={\"flex-1 text-left truncate\"}>\n                {hasValue ? (\n                    displayValue\n                ) : (\n                    <span className={\"text-neutral-disabled\"}>{placeholder}</span>\n                )}\n            </div>\n            {resetButton}\n            <span className={\"h-md w-md shrink-0 fill-neutral-xstrong\"}>\n                <ChevronDown className={\"h-md w-md\"} />\n            </span>\n        </Popover.Trigger>\n    );\n};\n\n/**\n * MultiSelect Content\n */\ninterface MultiSelectContentProps {\n    options: MultiSelectOptionDto[];\n    value: string[];\n    onToggle: (value: string) => void;\n}\n\nconst MultiSelectContent = ({ options, value, onToggle }: MultiSelectContentProps) => {\n    return (\n        <Popover.Portal>\n            <Popover.Content\n                className={cn(\n                    \"relative z-popover shadow-lg py-sm overflow-y-auto rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n                    \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n                    \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n                    \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\"\n                )}\n                style={{\n                    width: \"var(--radix-popover-trigger-width)\",\n                    maxHeight: \"min(250px, var(--radix-popover-content-available-height, 250px))\"\n                }}\n                align={\"start\"}\n                sideOffset={4}\n            >\n                {options.map(option => (\n                    <div\n                        key={option.value}\n                        className={cn(\n                            \"rounded-sm p-sm mx-sm cursor-pointer\",\n                            \"hover:bg-neutral-dimmed\",\n                            option.disabled && \"opacity-50 pointer-events-none\"\n                        )}\n                        onClick={() => onToggle(option.value)}\n                    >\n                        <div className={\"pointer-events-none\"}>\n                            <CheckboxPrimitiveRenderer\n                                id={option.value}\n                                label={option.label}\n                                value={option.value}\n                                checked={value.includes(option.value)}\n                                disabled={option.disabled ?? false}\n                                indeterminate={false}\n                                hasLabel={true}\n                                changeChecked={() => {}}\n                            />\n                        </div>\n                    </div>\n                ))}\n            </Popover.Content>\n        </Popover.Portal>\n    );\n};\n\n/**\n * MultiSelect Primitive\n */\nconst DecoratableMultiSelectPrimitive = ({\n    options = [],\n    value = [],\n    onChange,\n    onValueReset,\n    placeholder = \"Select options\",\n    disabled,\n    invalid,\n    displayResetAction = true,\n    showSelectionCount,\n    size,\n    variant\n}: MultiSelectPrimitiveProps) => {\n    const displayValue = useMemo(() => {\n        if (value.length === 0) {\n            return \"\";\n        }\n        if (showSelectionCount) {\n            return `${value.length} items selected`;\n        }\n        const labelMap = new Map(options.map(o => [o.value, o.label]));\n        return value.map(v => labelMap.get(v) ?? v).join(\", \");\n    }, [value, options, showSelectionCount]);\n\n    const toggle = useCallback(\n        (optionValue: string) => {\n            const next = value.includes(optionValue)\n                ? value.filter(v => v !== optionValue)\n                : [...value, optionValue];\n            onChange?.(next);\n        },\n        [value, onChange]\n    );\n\n    const reset = useCallback(() => {\n        onChange?.([]);\n        onValueReset?.();\n    }, [onChange, onValueReset]);\n\n    return (\n        <Popover.Root>\n            <MultiSelectTrigger\n                displayValue={displayValue}\n                hasValue={value.length > 0}\n                placeholder={placeholder}\n                displayResetAction={displayResetAction}\n                disabled={disabled}\n                invalid={invalid}\n                size={size}\n                variant={variant}\n                onValueReset={reset}\n            />\n            <MultiSelectContent options={options} value={value} onToggle={toggle} />\n        </Popover.Root>\n    );\n};\nconst MultiSelectPrimitive = makeDecoratable(\n    \"MultiSelectPrimitive\",\n    DecoratableMultiSelectPrimitive\n);\n\nexport { MultiSelectPrimitive, type MultiSelectPrimitiveProps, type MultiSelectOptionDto };\n"],"names":["MultiSelectTrigger","displayValue","hasValue","placeholder","displayResetAction","disabled","invalid","size","variant","onValueReset","resetButton","useMemo","IconButton","event","Icon","Close","Popover","cn","selectTriggerVariants","ChevronDown","MultiSelectContent","options","value","onToggle","option","CheckboxPrimitiveRenderer","DecoratableMultiSelectPrimitive","onChange","showSelectionCount","labelMap","Map","o","v","toggle","useCallback","optionValue","next","reset","MultiSelectPrimitive","makeDecoratable"],"mappings":"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"}

package/Popover/Popover.d.ts

@@ -9,21 +9,22 @@ interface PopoverProps extends PopoverPrimitiveProps, Omit<PopoverPrimitiveProps
     trigger: React.ReactNode;
     variant?: PopoverPrimitiveContentProps["variant"];
 }
-declare const Popover: (({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element) & {
-    original: ({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element;
+declare const DecoratablePopover: ({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element;
+declare const Popover: typeof DecoratablePopover & {
+    original: typeof DecoratablePopover;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element) & {
-        original: ({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element;
+    original: typeof DecoratablePopover & {
+        original: typeof DecoratablePopover;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element) & {
-        original: ({ align, arrow, close, content, side, trigger, variant, ...props }: PopoverProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratablePopover & {
+        original: typeof DecoratablePopover;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Popover/primitives/PopoverPrimitive.d.ts

@@ -1,9 +1,9 @@
-import { type PopoverAnchorProps as PopoverPrimitiveAnchorProps, type PopoverArrowProps as PopoverPrimitiveArrowProps, type PopoverCloseProps as PopoverPrimitiveCloseProps, type PopoverContentProps as PopoverPrimitiveContentProps, type PopoverRootProps as PopoverPrimitiveProps, type PopoverTriggerProps as PopoverPrimitiveTriggerProps } from "./components/index.js";
-declare const PopoverPrimitive: (({ ...props }: PopoverPrimitiveProps) => import("react").JSX.Element) & {
-    Anchor: ({ ...props }: PopoverPrimitiveAnchorProps) => import("react").JSX.Element;
-    Arrow: ({ variant, className, ...props }: PopoverPrimitiveArrowProps) => import("react").JSX.Element;
-    Close: ({ ...props }: PopoverPrimitiveCloseProps) => import("react").JSX.Element;
-    Content: ({ className, variant, arrow, align, sideOffset, collisionPadding, ...props }: PopoverPrimitiveContentProps) => import("react").JSX.Element;
-    Trigger: ({ ...props }: PopoverPrimitiveTriggerProps) => import("react").JSX.Element;
+import { PopoverAnchor, PopoverArrow, PopoverContent, PopoverClose, PopoverRoot, PopoverTrigger, type PopoverAnchorProps as PopoverPrimitiveAnchorProps, type PopoverArrowProps as PopoverPrimitiveArrowProps, type PopoverCloseProps as PopoverPrimitiveCloseProps, type PopoverContentProps as PopoverPrimitiveContentProps, type PopoverRootProps as PopoverPrimitiveProps, type PopoverTriggerProps as PopoverPrimitiveTriggerProps } from "./components/index.js";
+declare const PopoverPrimitive: typeof PopoverRoot & {
+    Anchor: typeof PopoverAnchor;
+    Arrow: typeof PopoverArrow;
+    Close: typeof PopoverClose;
+    Content: typeof PopoverContent;
+    Trigger: typeof PopoverTrigger;
 };
 export { PopoverPrimitive, type PopoverPrimitiveProps, type PopoverPrimitiveAnchorProps, type PopoverPrimitiveArrowProps, type PopoverPrimitiveCloseProps, type PopoverPrimitiveContentProps, type PopoverPrimitiveTriggerProps };

package/ProgressBar/ProgressBar.d.ts

@@ -3,21 +3,22 @@ import { type ProgressRootProps } from "./components/index.js";
 interface ProgressBarProps extends ProgressRootProps {
     valuePosition?: "start" | "end" | "both";
 }
-declare const ProgressBar: (({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element) & {
-    original: ({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element;
+declare const DecoratableProgressBar: ({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element;
+declare const ProgressBar: typeof DecoratableProgressBar & {
+    original: typeof DecoratableProgressBar;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element) & {
-        original: ({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element;
+    original: typeof DecoratableProgressBar & {
+        original: typeof DecoratableProgressBar;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element) & {
-        original: ({ valuePosition, className, ...props }: ProgressBarProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableProgressBar & {
+        original: typeof DecoratableProgressBar;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/RadioGroup/RadioGroup.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { RadioGroupPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type RadioGroupProps = RadioGroupPrimitiveProps & FormComponentProps;
-declare const RadioGroup: (({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element;
+declare const DecoratableRadioGroup: ({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element;
+declare const RadioGroup: typeof DecoratableRadioGroup & {
+    original: typeof DecoratableRadioGroup;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element;
+    original: typeof DecoratableRadioGroup & {
+        original: typeof DecoratableRadioGroup;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: RadioGroupProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableRadioGroup & {
+        original: typeof DecoratableRadioGroup;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/RadioGroup/primitives/Radio.d.ts

@@ -7,21 +7,22 @@ interface RadioProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPri
     label: string | React.ReactNode;
     id: string;
 }
-declare const Radio: (({ className, label, id, ...props }: RadioProps) => React.JSX.Element) & {
-    original: ({ className, label, id, ...props }: RadioProps) => React.JSX.Element;
+declare const DecoratableRadio: ({ className, label, id, ...props }: RadioProps) => React.JSX.Element;
+declare const Radio: typeof DecoratableRadio & {
+    original: typeof DecoratableRadio;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, label, id, ...props }: RadioProps) => React.JSX.Element) & {
-        original: ({ className, label, id, ...props }: RadioProps) => React.JSX.Element;
+    original: typeof DecoratableRadio & {
+        original: typeof DecoratableRadio;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, label, id, ...props }: RadioProps) => React.JSX.Element) & {
-        original: ({ className, label, id, ...props }: RadioProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableRadio & {
+        original: typeof DecoratableRadio;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/RadioGroup/primitives/RadioGroupPrimitive.d.ts

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { RadioGroup as RadioGroupPrimitives } from "radix-ui";
 import type { RadioItemParams, RadioItemFormatted } from "../domains/index.js";
+/**
+ * Radio Group Root
+ */
+declare const RadioGroupRoot: ({ className, ...props }: RadioGroupPrimitives.RadioGroupProps) => React.JSX.Element;
 /**
  * Radio Group Renderer
  */
@@ -33,5 +37,5 @@ declare const RadioGroupPrimitive: (props: RadioGroupPrimitiveProps) => React.JS
  * It is marked as deprecated because nesting `Radio` components inside `RadioGroup` is no longer the recommended approach.
  * Instead, we now pass an array of `RadioItemDto` directly to `RadioGroup` for better maintainability.
  */
-declare const DeprecatedRadioGroup: ({ className, ...props }: RadioGroupPrimitives.RadioGroupProps) => React.JSX.Element;
+declare const DeprecatedRadioGroup: typeof RadioGroupRoot;
 export { RadioGroupPrimitive, RadioGroupRenderer, DeprecatedRadioGroup, type RadioGroupPrimitiveProps, type RadioGroupVm };

package/RangeSlider/RangeSlider.d.ts

@@ -5,21 +5,22 @@ type RangeSliderProps = RangeSliderPrimitiveProps & FormComponentProps & {
     label: React.ReactNode;
     valueConverter?: (value: number) => string;
 };
-declare const RangeSlider: (({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element) & {
-    original: ({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+declare const DecoratableRangeSlider: ({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+declare const RangeSlider: typeof DecoratableRangeSlider & {
+    original: typeof DecoratableRangeSlider;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element) & {
-        original: ({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+    original: typeof DecoratableRangeSlider & {
+        original: typeof DecoratableRangeSlider;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element) & {
-        original: ({ description, note, hint, validation, ...props }: RangeSliderProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableRangeSlider & {
+        original: typeof DecoratableRangeSlider;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/SegmentedControl/SegmentedControl.d.ts

@@ -2,27 +2,28 @@ import React from "react";
 import type { SegmentedControlPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type SegmentedControlProps = SegmentedControlPrimitiveProps & FormComponentProps;
-declare const SegmentedControl: (({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element;
+declare const DecoratableSegmentedControl: ({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element;
+declare const SegmentedControl: typeof DecoratableSegmentedControl & {
+    original: typeof DecoratableSegmentedControl;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element;
+    original: typeof DecoratableSegmentedControl & {
+        original: typeof DecoratableSegmentedControl;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSegmentedControl & {
+        original: typeof DecoratableSegmentedControl;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
     Tabs: (({ children, variant, defaultValue, className }: import("./SegmentedControlTabs.js").SegmentedControlTabsProps) => React.JSX.Element) & {
-        Tab: (props: import("./SegmentedControlTab.js").SegmentedControlTabProps) => null;
+        Tab: typeof import("./SegmentedControlTab.js").SegmentedControlTab;
     };
 };
 export { SegmentedControl, type SegmentedControlProps };

package/SegmentedControl/SegmentedControlTabs.d.ts

@@ -1,11 +1,14 @@
 import React from "react";
 import type { SegmentedControlPrimitiveProps } from "./primitives/index.js";
+import { SegmentedControlTab } from "./SegmentedControlTab.js";
 export interface SegmentedControlTabsProps {
     children: React.ReactNode;
     variant?: SegmentedControlPrimitiveProps["variant"];
     defaultValue?: string;
     className?: string;
 }
-export declare const SegmentedControlTabs: (({ children, variant, defaultValue, className }: SegmentedControlTabsProps) => React.JSX.Element) & {
-    Tab: (props: import("./SegmentedControlTab.js").SegmentedControlTabProps) => null;
+declare const BaseSegmentedControlTabs: ({ children, variant, defaultValue, className }: SegmentedControlTabsProps) => React.JSX.Element;
+export declare const SegmentedControlTabs: typeof BaseSegmentedControlTabs & {
+    Tab: typeof SegmentedControlTab;
 };
+export {};

package/SegmentedControl/primitives/SegmentedControlPrimitive.d.ts

@@ -5,7 +5,7 @@ import type { SegmentedControlItemParams, SegmentedControlItemFormatted } from "
  * Segmented Control Item Button
  */
 declare const segmentedControlItemVariants: (props?: ({
-    variant?: "ghost" | "dimmed" | "light" | null | undefined;
+    variant?: "dimmed" | "ghost" | "light" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Segmented Control Primitive

package/Select/Select.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { SelectPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type SelectProps = SelectPrimitiveProps & FormComponentProps;
-declare const Select: (({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+declare const DecoratableSelect: ({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+declare const Select: typeof DecoratableSelect & {
+    original: typeof DecoratableSelect;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+    original: typeof DecoratableSelect & {
+        original: typeof DecoratableSelect;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: SelectProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSelect & {
+        original: typeof DecoratableSelect;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Select/primitives/components/SelectContent.js

@@ -5,7 +5,7 @@ import { SelectScrollDownButton } from "./SelectScrollDownButton.js";
 import * as __rspack_external_react from "react";
 const SelectContent = ({ className, children, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Select.Portal, null, /*#__PURE__*/ __rspack_external_react.createElement(Select.Content, {
         className: cn([
-            "relative z-popover max-h-96 min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong",
+            "relative z-popover max-h-[250px] min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong",
             "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1"
         ], className),

package/Select/primitives/components/SelectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select/primitives/components/SelectContent.js","sources":["../../../../src/Select/primitives/components/SelectContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select as SelectPrimitives } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { SelectScrollUpButton } from \"./SelectScrollUpButton.js\";\nimport { SelectScrollDownButton } from \"./SelectScrollDownButton.js\";\n\ntype SelectContentProps = SelectPrimitives.SelectContentProps;\n\nconst SelectContent = ({ className, children, ...props }: SelectContentProps) => (\n    <SelectPrimitives.Portal>\n        <SelectPrimitives.Content\n            className={cn(\n                [\n                    \"relative z-popover max-h-96 min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\"\n                ],\n                className\n            )}\n            position={\"popper\"}\n            {...props}\n        >\n            <SelectScrollUpButton />\n            <SelectPrimitives.Viewport\n                className={cn([\n                    \"py-xs\",\n                    \"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)\"\n                ])}\n            >\n                {children}\n            </SelectPrimitives.Viewport>\n            <SelectScrollDownButton />\n        </SelectPrimitives.Content>\n    </SelectPrimitives.Portal>\n);\n\nexport { SelectContent, type SelectContentProps };\n"],"names":["SelectContent","className","children","props","SelectPrimitives","cn","SelectScrollUpButton","SelectScrollDownButton"],"mappings":";;;;;AAQA,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAA2B,iBACxE,sCAACC,OAAAA,MAAuB,sBACpB,sCAACA,OAAAA,OAAwB;QACrB,WAAWC,GACP;YACI;YACA;YACA;SACH,EACDJ;QAEJ,UAAU;QACT,GAAGE,KAAK;qBAET,sCAACG,sBAAoBA,OAAAA,WAAAA,GACrB,sCAACF,OAAAA,QAAyB;QACtB,WAAWC,GAAG;YACV;YACA;SACH;OAEAH,WAAAA,WAAAA,GAEL,sCAACK,wBAAsBA"}
+{"version":3,"file":"Select/primitives/components/SelectContent.js","sources":["../../../../src/Select/primitives/components/SelectContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select as SelectPrimitives } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { SelectScrollUpButton } from \"./SelectScrollUpButton.js\";\nimport { SelectScrollDownButton } from \"./SelectScrollDownButton.js\";\n\ntype SelectContentProps = SelectPrimitives.SelectContentProps;\n\nconst SelectContent = ({ className, children, ...props }: SelectContentProps) => (\n    <SelectPrimitives.Portal>\n        <SelectPrimitives.Content\n            className={cn(\n                [\n                    \"relative z-popover max-h-[250px] min-w-56 shadow-lg py-sm overflow-hidden rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\"\n                ],\n                className\n            )}\n            position={\"popper\"}\n            {...props}\n        >\n            <SelectScrollUpButton />\n            <SelectPrimitives.Viewport\n                className={cn([\n                    \"py-xs\",\n                    \"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)\"\n                ])}\n            >\n                {children}\n            </SelectPrimitives.Viewport>\n            <SelectScrollDownButton />\n        </SelectPrimitives.Content>\n    </SelectPrimitives.Portal>\n);\n\nexport { SelectContent, type SelectContentProps };\n"],"names":["SelectContent","className","children","props","SelectPrimitives","cn","SelectScrollUpButton","SelectScrollDownButton"],"mappings":";;;;;AAQA,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,OAA2B,iBACxE,sCAACC,OAAAA,MAAuB,sBACpB,sCAACA,OAAAA,OAAwB;QACrB,WAAWC,GACP;YACI;YACA;YACA;SACH,EACDJ;QAEJ,UAAU;QACT,GAAGE,KAAK;qBAET,sCAACG,sBAAoBA,OAAAA,WAAAA,GACrB,sCAACF,OAAAA,QAAyB;QACtB,WAAWC,GAAG;YACV;YACA;SACH;OAEAH,WAAAA,WAAAA,GAEL,sCAACK,wBAAsBA"}

package/Select/primitives/components/SelectTrigger.d.ts

@@ -2,8 +2,8 @@ import * as React from "react";
 import { Select as SelectPrimitives } from "radix-ui";
 import { type VariantProps } from "../../../utils.js";
 declare const selectTriggerVariants: (props?: ({
-    variant?: "primary" | "secondary" | "ghost" | "ghost-negative" | null | undefined;
-    size?: "md" | "lg" | "xl" | null | undefined;
+    variant?: "ghost" | "ghost-negative" | "primary" | "secondary" | null | undefined;
+    size?: "lg" | "md" | "xl" | null | undefined;
     invalid?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SelectTriggerProps extends SelectPrimitives.SelectTriggerProps, VariantProps<typeof selectTriggerVariants> {

package/Separator/Separator.d.ts

@@ -2,30 +2,31 @@ import * as React from "react";
 import { Separator as SeparatorPrimitive } from "radix-ui";
 import { type VariantProps } from "../utils.js";
 declare const separatorVariants: (props?: ({
-    margin?: "sm" | "md" | "none" | "lg" | "xl" | "xs" | null | undefined;
+    margin?: "lg" | "md" | "none" | "sm" | "xl" | "xs" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
-    variant?: "accent" | "base" | "strong" | "transparent" | "dimmed" | "muted" | null | undefined;
+    variant?: "accent" | "base" | "dimmed" | "muted" | "strong" | "transparent" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SeparatorPosition = "start" | "middle" | "end";
 type SeparatorProps = Omit<SeparatorPrimitive.SeparatorProps, "children"> & VariantProps<typeof separatorVariants> & {
     children?: React.ReactNode;
     labelPosition?: SeparatorPosition;
 };
-declare const Separator: (({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element) & {
-    original: ({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element;
+declare const SeparatorBase: ({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element;
+declare const Separator: typeof SeparatorBase & {
+    original: typeof SeparatorBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element) & {
-        original: ({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element;
+    original: typeof SeparatorBase & {
+        original: typeof SeparatorBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element) & {
-        original: ({ className, orientation, margin, variant, decorative, children, labelPosition, ...props }: SeparatorProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof SeparatorBase & {
+        original: typeof SeparatorBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;