@webiny/admin-ui 0.0.0-unstable.a4f3e4ea8b → 0.0.0-unstable.a85ef555b2

package/AutoComplete/primitives/AutoCompletePrimitive.d.ts

@@ -74,6 +74,12 @@ interface AutoCompletePrimitiveProps {
      * Refer to `InputPrimitiveProps["size"]` for possible values.
      */
     size?: InputPrimitiveProps["size"];
+    /**
+     * Filter the options by the typed text on the client. Defaults to `true`.
+     * Set to `false` when `onValueSearch` already returns the matching options,
+     * so options matched on data other than their label are not dropped.
+     */
+    shouldFilter?: boolean;
     /**
      * Icon to be displayed at the start of the input field.
      */

package/AutoComplete/primitives/AutoCompletePrimitive.js

@@ -31,6 +31,7 @@ const DecoratableAutoCompletePrimitive = (props)=>{
         onOpenChange: ()=>setListOpenState(true)
     }, /*#__PURE__*/ react.createElement(Command, {
         label: String(props.label),
+        shouldFilter: props.shouldFilter,
         onKeyDown: handleKeyDown
     }, /*#__PURE__*/ react.createElement(PopoverPrimitive.Trigger, {
         asChild: true

package/AutoComplete/primitives/AutoCompletePrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete/primitives/AutoCompletePrimitive.js","sources":["../../../src/AutoComplete/primitives/AutoCompletePrimitive.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport React from \"react\";\nimport { Command } from \"~/Command/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { useAutoComplete } from \"./useAutoComplete.js\";\nimport { AutoCompleteInputIcons, AutoCompleteList } from \"./components/index.js\";\nimport type { AutoCompleteOption } from \"../domains/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { Icon } from \"~/Icon/index.js\";\n\ninterface AutoCompletePrimitiveProps {\n    /**\n     * Indicates if the reset action should be displayed.\n     */\n    displayResetAction?: boolean;\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Message to display when there are no options.\n     */\n    emptyMessage?: React.ReactNode;\n    /**\n     * Message to display when there are no options loaded or selected.\n     * Use it to invite the user to interact with the autocomplete by typing a value.\n     */\n    initialMessage?: React.ReactNode;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: string;\n    /**\n     * Indicates if the autocomplete is loading options.\n     */\n    loading?: boolean;\n    /**\n     * Message to display while loading options.\n     */\n    loadingMessage?: React.ReactNode;\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered to reset the value.\n     */\n    onValueReset?: () => void;\n    /**\n     * Callback triggered when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onValueChange: (value: string) => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: AutoCompleteOption[];\n    /**\n     * Custom renderer for the options.\n     */\n    optionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected item.\n     */\n    value?: string;\n}\n\nconst DecoratableAutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        resetSelectedOption,\n        showSelectedOption\n    } = useAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            } else {\n                setListOpenState(true);\n            }\n        },\n        [props.disabled, setListOpenState]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleOnBlur = React.useCallback(() => {\n        setListOpenState(false);\n        showSelectedOption();\n    }, [setListOpenState]);\n\n    return (\n        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n            <Command label={String(props.label)} onKeyDown={handleKeyDown}>\n                <PopoverPrimitive.Trigger asChild>\n                    <span>\n                        <Command.Input\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            onValueChange={searchOption}\n                            placeholder={vm.inputVm.placeholder}\n                            size={props.size}\n                            variant={props.variant}\n                            disabled={props.disabled}\n                            invalid={props.invalid}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <AutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    inputVariant={props.variant}\n                                    displayResetAction={vm.inputVm.displayResetAction}\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOption}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                            onBlur={handleOnBlur}\n                            onFocus={() => setListOpenState(true)}\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ minWidth: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <AutoCompleteList\n                        options={vm.optionsListVm.options}\n                        onOptionSelect={handleSelectOption}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        optionRenderer={props.optionRenderer}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst AutoCompletePrimitive = makeDecoratable(\n    \"AutoCompletePrimitive\",\n    DecoratableAutoCompletePrimitive\n);\n\nexport { AutoCompletePrimitive, type AutoCompletePrimitiveProps };\n"],"names":["DecoratableAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","resetSelectedOption","showSelectedOption","useAutoComplete","handleKeyDown","React","event","handleSelectOption","value","handleOnBlur","PopoverPrimitive","Command","String","AutoCompleteInputIcons","e","AutoCompleteList","AutoCompletePrimitive","makeDecoratable"],"mappings":";;;;;;AAkGA,MAAMA,mCAAmC,CAACC;IACtC,MAAM,EACFC,EAAE,EACFC,gBAAgB,EAChBC,iBAAiB,EACjBC,YAAY,EACZC,mBAAmB,EACnBC,kBAAkB,EACrB,GAAGC,gBAAgBP;IAEpB,MAAMQ,gBAAgBC,MAAAA,WAAiB,CACnC,CAACC;QACG,IAAIV,MAAM,QAAQ,EACd;QAG4B,aAA5BU,MAAM,GAAG,CAAC,WAAW,KACrBR,iBAAiB,SAEjBA,iBAAiB;IAEzB,GACA;QAACF,MAAM,QAAQ;QAAEE;KAAiB;IAGtC,MAAMS,qBAAqBF,MAAAA,WAAiB,CACxC,CAACG;QACGT,kBAAkBS;QAClBV,iBAAiB;IACrB,GACA;QAACC;QAAmBD;KAAiB;IAGzC,MAAMW,eAAeJ,MAAAA,WAAiB,CAAC;QACnCP,iBAAiB;QACjBI;IACJ,GAAG;QAACJ;KAAiB;IAErB,OAAO,WAAP,GACI,oBAACY,kBAAgBA;QAAC,MAAMb,GAAG,aAAa,CAAC,IAAI;QAAE,cAAc,IAAMC,iBAAiB;qBAChF,oBAACa,SAAOA;QAAC,OAAOC,OAAOhB,MAAM,KAAK;QAAG,WAAWQ;qBAC5C,oBAACM,iBAAiB,OAAO;QAAC;qBACtB,oBAAC,4BACG,oBAACC,QAAQ,KAAK;QACV,UAAUf,MAAM,QAAQ;QACxB,OAAOC,GAAG,OAAO,CAAC,KAAK;QACvB,eAAeG;QACf,aAAaH,GAAG,OAAO,CAAC,WAAW;QACnC,MAAMD,MAAM,IAAI;QAChB,SAASA,MAAM,OAAO;QACtB,UAAUA,MAAM,QAAQ;QACxB,SAASA,MAAM,OAAO;QACtB,WAAWA,MAAM,SAAS;QAC1B,uBACI,oBAACiB,wBAAsBA;YACnB,WAAWjB,MAAM,IAAI;YACrB,cAAcA,MAAM,OAAO;YAC3B,oBAAoBC,GAAG,OAAO,CAAC,kBAAkB;YACjD,UAAUD,MAAM,QAAQ;YACxB,SAASA,MAAM,OAAO;YACtB,cAAcK;YACd,cAAc,IAAMH,iBAAiB,CAACD,GAAG,aAAa,CAAC,IAAI;;QAGnE,QAAQY;QACR,SAAS,IAAMX,iBAAiB;wBAI5C,oBAACY,iBAAiB,OAAO;QACrB,OAAO;YAAE,UAAU;QAAqC;QACxD,iBAAiBI,CAAAA,IAAKA,EAAE,cAAc;qBAEtC,oBAACC,kBAAgBA;QACb,SAASlB,GAAG,aAAa,CAAC,OAAO;QACjC,gBAAgBU;QAChB,OAAOV,GAAG,aAAa,CAAC,KAAK;QAC7B,SAASD,MAAM,OAAO;QACtB,gBAAgBC,GAAG,aAAa,CAAC,cAAc;QAC/C,cAAcA,GAAG,aAAa,CAAC,YAAY;QAC3C,gBAAgBD,MAAM,cAAc;;AAM5D;AAEA,MAAMoB,wBAAwBC,gBAC1B,yBACAtB"}
+{"version":3,"file":"AutoComplete/primitives/AutoCompletePrimitive.js","sources":["../../../src/AutoComplete/primitives/AutoCompletePrimitive.tsx"],"sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport React from \"react\";\nimport { Command } from \"~/Command/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { useAutoComplete } from \"./useAutoComplete.js\";\nimport { AutoCompleteInputIcons, AutoCompleteList } from \"./components/index.js\";\nimport type { AutoCompleteOption } from \"../domains/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { Icon } from \"~/Icon/index.js\";\n\ninterface AutoCompletePrimitiveProps {\n    /**\n     * Indicates if the reset action should be displayed.\n     */\n    displayResetAction?: boolean;\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Message to display when there are no options.\n     */\n    emptyMessage?: React.ReactNode;\n    /**\n     * Message to display when there are no options loaded or selected.\n     * Use it to invite the user to interact with the autocomplete by typing a value.\n     */\n    initialMessage?: React.ReactNode;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: string;\n    /**\n     * Indicates if the autocomplete is loading options.\n     */\n    loading?: boolean;\n    /**\n     * Message to display while loading options.\n     */\n    loadingMessage?: React.ReactNode;\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered to reset the value.\n     */\n    onValueReset?: () => void;\n    /**\n     * Callback triggered when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onValueChange: (value: string) => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: AutoCompleteOption[];\n    /**\n     * Custom renderer for the options.\n     */\n    optionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Filter the options by the typed text on the client. Defaults to `true`.\n     * Set to `false` when `onValueSearch` already returns the matching options,\n     * so options matched on data other than their label are not dropped.\n     */\n    shouldFilter?: boolean;\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected item.\n     */\n    value?: string;\n}\n\nconst DecoratableAutoCompletePrimitive = (props: AutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        resetSelectedOption,\n        showSelectedOption\n    } = useAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            } else {\n                setListOpenState(true);\n            }\n        },\n        [props.disabled, setListOpenState]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleOnBlur = React.useCallback(() => {\n        setListOpenState(false);\n        showSelectedOption();\n    }, [setListOpenState]);\n\n    return (\n        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n            <Command\n                label={String(props.label)}\n                shouldFilter={props.shouldFilter}\n                onKeyDown={handleKeyDown}\n            >\n                <PopoverPrimitive.Trigger asChild>\n                    <span>\n                        <Command.Input\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            onValueChange={searchOption}\n                            placeholder={vm.inputVm.placeholder}\n                            size={props.size}\n                            variant={props.variant}\n                            disabled={props.disabled}\n                            invalid={props.invalid}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <AutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    inputVariant={props.variant}\n                                    displayResetAction={vm.inputVm.displayResetAction}\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOption}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                            onBlur={handleOnBlur}\n                            onFocus={() => setListOpenState(true)}\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ minWidth: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <AutoCompleteList\n                        options={vm.optionsListVm.options}\n                        onOptionSelect={handleSelectOption}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        optionRenderer={props.optionRenderer}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst AutoCompletePrimitive = makeDecoratable(\n    \"AutoCompletePrimitive\",\n    DecoratableAutoCompletePrimitive\n);\n\nexport { AutoCompletePrimitive, type AutoCompletePrimitiveProps };\n"],"names":["DecoratableAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","resetSelectedOption","showSelectedOption","useAutoComplete","handleKeyDown","React","event","handleSelectOption","value","handleOnBlur","PopoverPrimitive","Command","String","AutoCompleteInputIcons","e","AutoCompleteList","AutoCompletePrimitive","makeDecoratable"],"mappings":";;;;;;AAwGA,MAAMA,mCAAmC,CAACC;IACtC,MAAM,EACFC,EAAE,EACFC,gBAAgB,EAChBC,iBAAiB,EACjBC,YAAY,EACZC,mBAAmB,EACnBC,kBAAkB,EACrB,GAAGC,gBAAgBP;IAEpB,MAAMQ,gBAAgBC,MAAAA,WAAiB,CACnC,CAACC;QACG,IAAIV,MAAM,QAAQ,EACd;QAG4B,aAA5BU,MAAM,GAAG,CAAC,WAAW,KACrBR,iBAAiB,SAEjBA,iBAAiB;IAEzB,GACA;QAACF,MAAM,QAAQ;QAAEE;KAAiB;IAGtC,MAAMS,qBAAqBF,MAAAA,WAAiB,CACxC,CAACG;QACGT,kBAAkBS;QAClBV,iBAAiB;IACrB,GACA;QAACC;QAAmBD;KAAiB;IAGzC,MAAMW,eAAeJ,MAAAA,WAAiB,CAAC;QACnCP,iBAAiB;QACjBI;IACJ,GAAG;QAACJ;KAAiB;IAErB,OAAO,WAAP,GACI,oBAACY,kBAAgBA;QAAC,MAAMb,GAAG,aAAa,CAAC,IAAI;QAAE,cAAc,IAAMC,iBAAiB;qBAChF,oBAACa,SAAOA;QACJ,OAAOC,OAAOhB,MAAM,KAAK;QACzB,cAAcA,MAAM,YAAY;QAChC,WAAWQ;qBAEX,oBAACM,iBAAiB,OAAO;QAAC;qBACtB,oBAAC,4BACG,oBAACC,QAAQ,KAAK;QACV,UAAUf,MAAM,QAAQ;QACxB,OAAOC,GAAG,OAAO,CAAC,KAAK;QACvB,eAAeG;QACf,aAAaH,GAAG,OAAO,CAAC,WAAW;QACnC,MAAMD,MAAM,IAAI;QAChB,SAASA,MAAM,OAAO;QACtB,UAAUA,MAAM,QAAQ;QACxB,SAASA,MAAM,OAAO;QACtB,WAAWA,MAAM,SAAS;QAC1B,uBACI,oBAACiB,wBAAsBA;YACnB,WAAWjB,MAAM,IAAI;YACrB,cAAcA,MAAM,OAAO;YAC3B,oBAAoBC,GAAG,OAAO,CAAC,kBAAkB;YACjD,UAAUD,MAAM,QAAQ;YACxB,SAASA,MAAM,OAAO;YACtB,cAAcK;YACd,cAAc,IAAMH,iBAAiB,CAACD,GAAG,aAAa,CAAC,IAAI;;QAGnE,QAAQY;QACR,SAAS,IAAMX,iBAAiB;wBAI5C,oBAACY,iBAAiB,OAAO;QACrB,OAAO;YAAE,UAAU;QAAqC;QACxD,iBAAiBI,CAAAA,IAAKA,EAAE,cAAc;qBAEtC,oBAACC,kBAAgBA;QACb,SAASlB,GAAG,aAAa,CAAC,OAAO;QACjC,gBAAgBU;QAChB,OAAOV,GAAG,aAAa,CAAC,KAAK;QAC7B,SAASD,MAAM,OAAO;QACtB,gBAAgBC,GAAG,aAAa,CAAC,cAAc;QAC/C,cAAcA,GAAG,aAAa,CAAC,YAAY;QAC3C,gBAAgBD,MAAM,cAAc;;AAM5D;AAEA,MAAMoB,wBAAwBC,gBAC1B,yBACAtB"}

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+export interface BreadcrumbsItem {
+    /**
+     * Text label of the breadcrumb. Omitted for the leading home item, which is icon-only.
+     */
+    label?: string;
+    /**
+     * Leading icon. Used by the home item; other items typically render text only. Sized and
+     * colored by the breadcrumb — pass the raw icon component (e.g. `<HomeIcon />`).
+     */
+    icon?: React.ReactNode;
+    /**
+     * Full, untruncated text used as the item's `title` (native tooltip). Defaults to `label`.
+     */
+    title?: string;
+    /**
+     * Navigates when the item is activated. Omitted (or on the current item) renders a
+     * non-interactive item.
+     */
+    onClick?: () => void;
+    /**
+     * Marks the current location — the last item in the trail. Rendered with stronger text
+     * and never interactive, per the design system's breadcrumb guidelines.
+     */
+    current?: boolean;
+}
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+    items: BreadcrumbsItem[];
+}
+declare const BreadcrumbsBase: ({ items, className, ...props }: BreadcrumbsProps) => React.JSX.Element | null;
+declare const Breadcrumbs: typeof BreadcrumbsBase & {
+    original: typeof BreadcrumbsBase;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof BreadcrumbsBase & {
+        original: typeof BreadcrumbsBase;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BreadcrumbsBase & {
+        original: typeof BreadcrumbsBase;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+/**
+ * Convenience factory for the leading, icon-only home entry.
+ */
+export declare const createHomeBreadcrumbItem: (onClick?: () => void) => BreadcrumbsItem;
+export { Breadcrumbs };

package/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,66 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/home.svg";
+import { ReactComponent as keyboard_arrow_right_svg_ReactComponent } from "@webiny/icons/keyboard_arrow_right.svg";
+import { cn, makeDecoratable } from "../utils.js";
+const itemTextClassName = "block max-w-[150px] truncate text-sm tracking-normal whitespace-nowrap";
+const glyphClassName = "size-md shrink-0 fill-current";
+const renderGlyph = (icon)=>{
+    if (!/*#__PURE__*/ react.isValidElement(icon)) return icon;
+    const element = icon;
+    return /*#__PURE__*/ react.cloneElement(element, {
+        className: cn(glyphClassName, element.props.className)
+    });
+};
+const BreadcrumbItem = ({ item })=>{
+    const interactive = Boolean(item.onClick) && !item.current;
+    const title = item.title ?? item.label;
+    const content = /*#__PURE__*/ react.createElement("span", {
+        className: "flex items-center gap-xs"
+    }, item.icon ? renderGlyph(item.icon) : null, item.label ? /*#__PURE__*/ react.createElement("span", {
+        className: itemTextClassName
+    }, item.label) : null);
+    if (!interactive) return /*#__PURE__*/ react.createElement("span", {
+        "aria-current": item.current ? "page" : void 0,
+        title: title,
+        className: cn("flex items-center rounded-sm px-xs py-xxs", item.current ? "text-neutral-primary" : "text-neutral-muted")
+    }, content);
+    return /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        onClick: item.onClick,
+        title: title,
+        className: cn("flex items-center rounded-sm px-xs py-xxs", "cursor-pointer text-neutral-muted transition-colors", "hover:bg-neutral-dimmed hover:text-neutral-primary", "focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed")
+    }, content);
+};
+const BreadcrumbSeparator = ()=>/*#__PURE__*/ react.createElement("span", {
+        "aria-hidden": "true",
+        className: "flex items-center text-neutral-muted"
+    }, /*#__PURE__*/ react.createElement(keyboard_arrow_right_svg_ReactComponent, {
+        className: glyphClassName
+    }));
+const BreadcrumbsBase = ({ items, className, ...props })=>{
+    if (0 === items.length) return null;
+    return /*#__PURE__*/ react.createElement("nav", {
+        "aria-label": "Breadcrumb",
+        className: cn("flex items-center", className),
+        ...props
+    }, /*#__PURE__*/ react.createElement("ol", {
+        className: "flex items-center gap-none"
+    }, items.map((item, index)=>{
+        const key = `${item.label ?? "home"}-${index}`;
+        return /*#__PURE__*/ react.createElement("li", {
+            key: key,
+            className: "flex items-center"
+        }, index > 0 ? /*#__PURE__*/ react.createElement(BreadcrumbSeparator, null) : null, /*#__PURE__*/ react.createElement(BreadcrumbItem, {
+            item: item
+        }));
+    })));
+};
+const Breadcrumbs = makeDecoratable("Breadcrumbs", BreadcrumbsBase);
+const createHomeBreadcrumbItem = (onClick)=>({
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        title: "Home",
+        onClick
+    });
+export { Breadcrumbs, createHomeBreadcrumbItem };
+
+//# sourceMappingURL=Breadcrumbs.js.map

package/Breadcrumbs/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs/Breadcrumbs.js","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { ReactComponent as SeparatorIcon } from \"@webiny/icons/keyboard_arrow_right.svg\";\nimport { cn } from \"~/utils.js\";\nimport { makeDecoratable } from \"~/utils.js\";\n\nexport interface BreadcrumbsItem {\n    /**\n     * Text label of the breadcrumb. Omitted for the leading home item, which is icon-only.\n     */\n    label?: string;\n    /**\n     * Leading icon. Used by the home item; other items typically render text only. Sized and\n     * colored by the breadcrumb — pass the raw icon component (e.g. `<HomeIcon />`).\n     */\n    icon?: React.ReactNode;\n    /**\n     * Full, untruncated text used as the item's `title` (native tooltip). Defaults to `label`.\n     */\n    title?: string;\n    /**\n     * Navigates when the item is activated. Omitted (or on the current item) renders a\n     * non-interactive item.\n     */\n    onClick?: () => void;\n    /**\n     * Marks the current location — the last item in the trail. Rendered with stronger text\n     * and never interactive, per the design system's breadcrumb guidelines.\n     */\n    current?: boolean;\n}\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {\n    items: BreadcrumbsItem[];\n}\n\nconst itemTextClassName = \"block max-w-[150px] truncate text-sm tracking-normal whitespace-nowrap\";\n\n// The material glyphs default their `fill` to `currentColor`, so the surrounding text color\n// (muted / primary / hover) drives the icon color too.\nconst glyphClassName = \"size-md shrink-0 fill-current\";\n\nconst renderGlyph = (icon: React.ReactNode) => {\n    if (!React.isValidElement(icon)) {\n        return icon;\n    }\n    const element = icon as React.ReactElement<{ className?: string }>;\n    return React.cloneElement(element, {\n        className: cn(glyphClassName, element.props.className)\n    });\n};\n\nconst BreadcrumbItem = ({ item }: { item: BreadcrumbsItem }) => {\n    const interactive = Boolean(item.onClick) && !item.current;\n    const title = item.title ?? item.label;\n\n    const content = (\n        <span className=\"flex items-center gap-xs\">\n            {item.icon ? renderGlyph(item.icon) : null}\n            {item.label ? <span className={itemTextClassName}>{item.label}</span> : null}\n        </span>\n    );\n\n    // The current (active) item and any item without an action render as plain text.\n    if (!interactive) {\n        return (\n            <span\n                aria-current={item.current ? \"page\" : undefined}\n                title={title}\n                className={cn(\n                    \"flex items-center rounded-sm px-xs py-xxs\",\n                    item.current ? \"text-neutral-primary\" : \"text-neutral-muted\"\n                )}\n            >\n                {content}\n            </span>\n        );\n    }\n\n    return (\n        <button\n            type=\"button\"\n            onClick={item.onClick}\n            title={title}\n            className={cn(\n                \"flex items-center rounded-sm px-xs py-xxs\",\n                \"cursor-pointer text-neutral-muted transition-colors\",\n                \"hover:bg-neutral-dimmed hover:text-neutral-primary\",\n                \"focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed\"\n            )}\n        >\n            {content}\n        </button>\n    );\n};\n\nconst BreadcrumbSeparator = () => {\n    return (\n        <span aria-hidden=\"true\" className=\"flex items-center text-neutral-muted\">\n            <SeparatorIcon className={glyphClassName} />\n        </span>\n    );\n};\n\nconst BreadcrumbsBase = ({ items, className, ...props }: BreadcrumbsProps) => {\n    if (items.length === 0) {\n        return null;\n    }\n\n    return (\n        <nav aria-label=\"Breadcrumb\" className={cn(\"flex items-center\", className)} {...props}>\n            <ol className=\"flex items-center gap-none\">\n                {items.map((item, index) => {\n                    // A stable-enough key: labels are unique within a trail; index breaks ties.\n                    const key = `${item.label ?? \"home\"}-${index}`;\n                    return (\n                        <li key={key} className=\"flex items-center\">\n                            {index > 0 ? <BreadcrumbSeparator /> : null}\n                            <BreadcrumbItem item={item} />\n                        </li>\n                    );\n                })}\n            </ol>\n        </nav>\n    );\n};\n\nconst Breadcrumbs = makeDecoratable(\"Breadcrumbs\", BreadcrumbsBase);\n\n/**\n * Convenience factory for the leading, icon-only home entry.\n */\nexport const createHomeBreadcrumbItem = (onClick?: () => void): BreadcrumbsItem => ({\n    icon: <HomeIcon />,\n    title: \"Home\",\n    onClick\n});\n\nexport { Breadcrumbs };\n"],"names":["itemTextClassName","glyphClassName","renderGlyph","icon","React","element","cn","BreadcrumbItem","item","interactive","Boolean","title","content","undefined","BreadcrumbSeparator","SeparatorIcon","BreadcrumbsBase","items","className","props","index","key","Breadcrumbs","makeDecoratable","createHomeBreadcrumbItem","onClick","HomeIcon"],"mappings":";;;;AAoCA,MAAMA,oBAAoB;AAI1B,MAAMC,iBAAiB;AAEvB,MAAMC,cAAc,CAACC;IACjB,IAAI,CAAC,WAAD,GAACC,MAAAA,cAAoB,CAACD,OACtB,OAAOA;IAEX,MAAME,UAAUF;IAChB,OAAO,WAAP,GAAOC,MAAAA,YAAkB,CAACC,SAAS;QAC/B,WAAWC,GAAGL,gBAAgBI,QAAQ,KAAK,CAAC,SAAS;IACzD;AACJ;AAEA,MAAME,iBAAiB,CAAC,EAAEC,IAAI,EAA6B;IACvD,MAAMC,cAAcC,QAAQF,KAAK,OAAO,KAAK,CAACA,KAAK,OAAO;IAC1D,MAAMG,QAAQH,KAAK,KAAK,IAAIA,KAAK,KAAK;IAEtC,MAAMI,UAAU,WAAVA,GACF,oBAAC;QAAK,WAAU;OACXJ,KAAK,IAAI,GAAGN,YAAYM,KAAK,IAAI,IAAI,MACrCA,KAAK,KAAK,GAAG,WAAH,GAAG,oBAAC;QAAK,WAAWR;OAAoBQ,KAAK,KAAK,IAAW;IAKhF,IAAI,CAACC,aACD,OAAO,WAAP,GACI,oBAAC;QACG,gBAAcD,KAAK,OAAO,GAAG,SAASK;QACtC,OAAOF;QACP,WAAWL,GACP,6CACAE,KAAK,OAAO,GAAG,yBAAyB;OAG3CI;IAKb,OAAO,WAAP,GACI,oBAAC;QACG,MAAK;QACL,SAASJ,KAAK,OAAO;QACrB,OAAOG;QACP,WAAWL,GACP,6CACA,uDACA,sDACA;OAGHM;AAGb;AAEA,MAAME,sBAAsB,IACjB,WAAP,GACI,oBAAC;QAAK,eAAY;QAAO,WAAU;qBAC/B,oBAACC,yCAAaA;QAAC,WAAWd;;AAKtC,MAAMe,kBAAkB,CAAC,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,OAAyB;IACrE,IAAIF,AAAiB,MAAjBA,MAAM,MAAM,EACZ,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,cAAW;QAAa,WAAWX,GAAG,qBAAqBY;QAAa,GAAGC,KAAK;qBACjF,oBAAC;QAAG,WAAU;OACTF,MAAM,GAAG,CAAC,CAACT,MAAMY;QAEd,MAAMC,MAAM,GAAGb,KAAK,KAAK,IAAI,OAAO,CAAC,EAAEY,OAAO;QAC9C,OAAO,WAAP,GACI,oBAAC;YAAG,KAAKC;YAAK,WAAU;WACnBD,QAAQ,IAAI,WAAJ,GAAI,oBAACN,qBAAmBA,QAAM,oBACvC,oBAACP,gBAAcA;YAAC,MAAMC;;IAGlC;AAIhB;AAEA,MAAMc,cAAcC,gBAAgB,eAAeP;AAK5C,MAAMQ,2BAA2B,CAACC,UAA2C;QAChF,MAAM,WAAN,GAAM,oBAACC,gBAAQA;QACf,OAAO;QACPD;IACJ"}

package/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta } from "@storybook/react";
+import type { StoryObj } from "@storybook/react";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+declare const meta: Meta<typeof Breadcrumbs>;
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
+export declare const Default: Story;
+export declare const DeepTrail: Story;
+export declare const HomeOnly: Story;

package/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,71 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/home.svg";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+const meta = {
+    title: "Components/Breadcrumbs",
+    component: Breadcrumbs,
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "w-[850px] rounded-sm bg-neutral-base px-md py-xs-plus"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const Breadcrumbs_stories = meta;
+const noop = ()=>void 0;
+const Default = {
+    args: {
+        items: [
+            {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                title: "Home",
+                onClick: noop
+            },
+            {
+                label: "Page Builder",
+                onClick: noop
+            },
+            {
+                label: "Articles",
+                current: true
+            }
+        ]
+    }
+};
+const DeepTrail = {
+    args: {
+        items: [
+            {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                title: "Home",
+                onClick: noop
+            },
+            {
+                label: "Headless CMS",
+                onClick: noop
+            },
+            {
+                label: "Articles",
+                onClick: noop
+            },
+            {
+                label: "The best article ever written about breadcrumbs",
+                current: true
+            }
+        ]
+    }
+};
+const HomeOnly = {
+    args: {
+        items: [
+            {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                title: "Home",
+                current: true
+            }
+        ]
+    }
+};
+export default Breadcrumbs_stories;
+export { DeepTrail, Default, HomeOnly };
+
+//# sourceMappingURL=Breadcrumbs.stories.js.map

package/Breadcrumbs/Breadcrumbs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs/Breadcrumbs.stories.js","sources":["../../src/Breadcrumbs/Breadcrumbs.stories.tsx"],"sourcesContent":["import type { Meta } from \"@storybook/react\";\nimport type { StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { Breadcrumbs } from \"./Breadcrumbs.js\";\n\nconst meta: Meta<typeof Breadcrumbs> = {\n    title: \"Components/Breadcrumbs\",\n    component: Breadcrumbs,\n    decorators: [\n        Story => (\n            <div className=\"w-[850px] rounded-sm bg-neutral-base px-md py-xs-plus\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Breadcrumbs>;\n\nconst noop = () => undefined;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            { icon: <HomeIcon />, title: \"Home\", onClick: noop },\n            { label: \"Page Builder\", onClick: noop },\n            { label: \"Articles\", current: true }\n        ]\n    }\n};\n\nexport const DeepTrail: Story = {\n    args: {\n        items: [\n            { icon: <HomeIcon />, title: \"Home\", onClick: noop },\n            { label: \"Headless CMS\", onClick: noop },\n            { label: \"Articles\", onClick: noop },\n            { label: \"The best article ever written about breadcrumbs\", current: true }\n        ]\n    }\n};\n\nexport const HomeOnly: Story = {\n    args: {\n        items: [{ icon: <HomeIcon />, title: \"Home\", current: true }]\n    }\n};\n"],"names":["meta","Breadcrumbs","Story","noop","undefined","Default","HomeIcon","DeepTrail","HomeOnly"],"mappings":";;;AAMA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,4BAAeF;AAIf,MAAMG,OAAO,IAAMC;AAEZ,MAAMC,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBAAE,MAAM,WAAN,GAAM,oBAACC,gBAAQA;gBAAK,OAAO;gBAAQ,SAASH;YAAK;YACnD;gBAAE,OAAO;gBAAgB,SAASA;YAAK;YACvC;gBAAE,OAAO;gBAAY,SAAS;YAAK;SACtC;IACL;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,OAAO;YACH;gBAAE,MAAM,WAAN,GAAM,oBAACD,gBAAQA;gBAAK,OAAO;gBAAQ,SAASH;YAAK;YACnD;gBAAE,OAAO;gBAAgB,SAASA;YAAK;YACvC;gBAAE,OAAO;gBAAY,SAASA;YAAK;YACnC;gBAAE,OAAO;gBAAmD,SAAS;YAAK;SAC7E;IACL;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;QACF,OAAO;YAAC;gBAAE,MAAM,WAAN,GAAM,oBAACF,gBAAQA;gBAAK,OAAO;gBAAQ,SAAS;YAAK;SAAE;IACjE;AACJ"}

package/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from "./Breadcrumbs.js";

package/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export * from "./Breadcrumbs.js";

package/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type VariantProps } from "../utils.js";
 declare const buttonVariants: (props?: ({
-    variant?: "ghost" | "ghost-negative" | "primary" | "secondary" | "tertiary" | null | undefined;
+    variant?: "destructive" | "ghost" | "ghost-negative" | "link" | "primary" | "secondary" | "tertiary" | null | undefined;
     size?: "lg" | "md" | "sm" | "xl" | null | undefined;
     contentLayout?: "icon" | "text" | "text-icon-end" | "text-icon-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/Button/Button.js

@@ -22,6 +22,13 @@ const buttonVariants = cva([
                 "aria-disabled:bg-primary-disabled",
                 "focus-visible:ring-lg focus-visible:ring-primary-dimmed"
             ],
+            destructive: [
+                "bg-destructive text-neutral-light fill-neutral-base",
+                "hover:bg-destructive-strong",
+                "active:bg-destructive-xstrong",
+                "aria-disabled:bg-destructive-disabled",
+                "focus-visible:ring-lg focus-visible:ring-destructive-subtle"
+            ],
             secondary: [
                 "bg-neutral-dimmed text-neutral-strong fill-neutral-xstrong",
                 "hover:bg-neutral-muted",
@@ -48,6 +55,13 @@ const buttonVariants = cva([
                 "active:bg-neutral-base/30",
                 "aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-base/50",
                 "focus-visible:border-neutral-base!"
+            ],
+            link: [
+                "bg-transparent text-accent-primary fill-accent-default",
+                "p-0! border-0! rounded-xs",
+                "hover:underline!",
+                "aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong",
+                "focus-visible:ring-lg focus-visible:ring-primary-dimmed"
             ]
         },
         size: {

package/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button/Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst buttonWrapperVariants = cva(\"inline-block\", {\n    variants: {\n        disabled: {\n            true: \"cursor-not-allowed\"\n        }\n    }\n});\n\nconst buttonVariants = cva(\n    [\n        \"border-transparent rounded font-sans inline-flex items-center justify-center whitespace-nowrap ring-offset-background transition-colors no-underline! cursor-pointer\",\n        \"aria-disabled:pointer-events-none\",\n        \"focus-visible:outline-none focus-visible:border-accent-default\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"bg-primary text-neutral-light fill-neutral-base\",\n                    \"hover:bg-primary-strong\",\n                    \"active:bg-primary-xstrong\",\n                    \"aria-disabled:bg-primary-disabled\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                secondary: [\n                    \"bg-neutral-dimmed text-neutral-strong fill-neutral-xstrong\",\n                    \"hover:bg-neutral-muted\",\n                    \"active:bg-neutral-strong\",\n                    \"aria-disabled:bg-neutral-disabled aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                tertiary: [\n                    \"bg-neutral-base text-neutral-strong border-neutral-muted fill-neutral-xstrong\",\n                    \"hover:bg-neutral-light\",\n                    \"active:bg-neutral-muted\",\n                    \"aria-disabled:bg-neutral-disabled aria-disabled:border-neutral-dimmed aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                ghost: [\n                    \"bg-transparent text-neutral-strong fill-neutral-xstrong\",\n                    \"hover:bg-neutral-dimmed\",\n                    \"active:bg-neutral-muted\",\n                    \"aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\"\n                ],\n                \"ghost-negative\": [\n                    \"bg-transparent text-neutral-light fill-neutral-base\",\n                    \"hover:bg-neutral-base/20\",\n                    \"active:bg-neutral-base/30\",\n                    \"aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-base/50\",\n                    \"focus-visible:border-neutral-base!\"\n                ]\n            },\n            size: {\n                sm: [\n                    \"text-sm border-sm rounded-sm [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs)-(var(--border-width-sm)))] px-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n                ],\n                md: [\n                    \"text-md border-sm rounded-md [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ],\n                lg: [\n                    \"text-md border-sm rounded-md [&>svg]:size-md-plus\",\n                    \"py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]\"\n                ],\n                xl: [\n                    \"text-lg font-semibold border-lg rounded-md [&>svg]:size-lg\",\n                    \"py-[calc(theme(padding.md-plus)-(var(--border-width-md)))] px-[calc(var(--padding-md)-(var(--border-width-md)))]\"\n                ]\n            },\n            contentLayout: {\n                text: \"\",\n                icon: \"\",\n                \"text-icon-start\": \"\",\n                \"text-icon-end\": \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"xl\",\n                variant: \"ghost\",\n                className: \"focus-visible:border-md\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-xs)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"text-icon-start\",\n                className: \"pl-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:mr-xs\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"text-icon-end\",\n                className: \"pr-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:ml-xs\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"pl-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:mr-xs\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"pr-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:ml-xs\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"pl-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:mr-xs-plus\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"pr-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:ml-xs-plus\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-md)-(var(--border-width-md)))]\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"pl-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:mr-sm\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"pr-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:ml-sm\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\"\n        }\n    }\n);\n\ninterface ButtonProps\n    extends\n        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\">,\n        VariantProps<typeof buttonVariants> {\n    text?: React.ReactNode;\n    children?: React.ReactNode;\n\n    icon?: React.ReactNode;\n\n    iconPosition?: \"start\" | \"end\";\n\n    asChild?: boolean;\n\n    containerClassName?: string;\n}\n\ntype ContentLayout = \"text\" | \"icon\" | \"text-icon-start\" | \"text-icon-end\";\n\nconst ButtonBase = ({\n    className,\n    variant,\n    size,\n    asChild = false,\n    text,\n    children,\n    icon,\n    iconPosition = \"start\",\n    disabled,\n    containerClassName,\n    ...rest\n}: ButtonProps) => {\n    const Comp = asChild ? Slot.Root : \"button\";\n\n    const contentLayout = useMemo<ContentLayout>(() => {\n        if (!text && !children) {\n            return \"icon\";\n        }\n\n        if (!icon) {\n            return \"text\";\n        }\n\n        return `text-icon-${iconPosition}` as ContentLayout;\n    }, [text, children, icon, iconPosition]);\n\n    const cssClasses = cn(\n        buttonVariants({\n            variant,\n            size,\n            contentLayout\n        }),\n        className\n    );\n\n    return (\n        <span className={cn(buttonWrapperVariants({ disabled }), containerClassName)}>\n            <Comp className={cssClasses} disabled={disabled} aria-disabled={disabled} {...rest}>\n                {iconPosition !== \"end\" && icon}\n                <Slot.Slottable>{text || children || null}</Slot.Slottable>\n                {iconPosition === \"end\" && icon}\n            </Comp>\n        </span>\n    );\n};\n\nconst Button = makeDecoratable(\"Button\", ButtonBase);\n\nexport { Button, type ButtonProps, buttonVariants };\n"],"names":["buttonWrapperVariants","cva","buttonVariants","ButtonBase","className","variant","size","asChild","text","children","icon","iconPosition","disabled","containerClassName","rest","Comp","Slot","contentLayout","useMemo","cssClasses","cn","Button","makeDecoratable"],"mappings":";;;AAIA,MAAMA,wBAAwBC,IAAI,gBAAgB;IAC9C,UAAU;QACN,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAEA,MAAMC,iBAAiBD,IACnB;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;aACH;YACD,WAAW;gBACP;gBACA;gBACA;gBACA;gBACA;aACH;YACD,UAAU;gBACN;gBACA;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;gBACA;aACH;YACD,kBAAkB;gBACd;gBACA;gBACA;gBACA;gBACA;aACH;QACL;QACA,MAAM;YACF,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;QACL;QACA,eAAe;YACX,MAAM;YACN,MAAM;YACN,mBAAmB;YACnB,iBAAiB;QACrB;IACJ;IACA,kBAAkB;QACd;YACI,MAAM;YACN,SAAS;YACT,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;KACH;IACD,iBAAiB;QACb,SAAS;QACT,MAAM;IACV;AACJ;AAqBJ,MAAME,aAAa,CAAC,EAChBC,SAAS,EACTC,OAAO,EACPC,IAAI,EACJC,UAAU,KAAK,EACfC,IAAI,EACJC,QAAQ,EACRC,IAAI,EACJC,eAAe,OAAO,EACtBC,QAAQ,EACRC,kBAAkB,EAClB,GAAGC,MACO;IACV,MAAMC,OAAOR,UAAUS,KAAK,IAAI,GAAG;IAEnC,MAAMC,gBAAgBC,QAAuB;QACzC,IAAI,CAACV,QAAQ,CAACC,UACV,OAAO;QAGX,IAAI,CAACC,MACD,OAAO;QAGX,OAAO,CAAC,UAAU,EAAEC,cAAc;IACtC,GAAG;QAACH;QAAMC;QAAUC;QAAMC;KAAa;IAEvC,MAAMQ,aAAaC,GACflB,eAAe;QACXG;QACAC;QACAW;IACJ,IACAb;IAGJ,OAAO,WAAP,GACI,oBAAC;QAAK,WAAWgB,GAAGpB,sBAAsB;YAAEY;QAAS,IAAIC;qBACrD,oBAACE,MAAAA;QAAK,WAAWI;QAAY,UAAUP;QAAU,iBAAeA;QAAW,GAAGE,IAAI;OAC7EH,AAAiB,UAAjBA,gBAA0BD,MAAAA,WAAAA,GAC3B,oBAACM,KAAK,SAAS,QAAER,QAAQC,YAAY,OACpCE,AAAiB,UAAjBA,gBAA0BD;AAI3C;AAEA,MAAMW,SAASC,gBAAgB,UAAUnB"}
+{"version":3,"file":"Button/Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst buttonWrapperVariants = cva(\"inline-block\", {\n    variants: {\n        disabled: {\n            true: \"cursor-not-allowed\"\n        }\n    }\n});\n\nconst buttonVariants = cva(\n    [\n        \"border-transparent rounded font-sans inline-flex items-center justify-center whitespace-nowrap ring-offset-background transition-colors no-underline! cursor-pointer\",\n        \"aria-disabled:pointer-events-none\",\n        \"focus-visible:outline-none focus-visible:border-accent-default\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"bg-primary text-neutral-light fill-neutral-base\",\n                    \"hover:bg-primary-strong\",\n                    \"active:bg-primary-xstrong\",\n                    \"aria-disabled:bg-primary-disabled\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                destructive: [\n                    \"bg-destructive text-neutral-light fill-neutral-base\",\n                    \"hover:bg-destructive-strong\",\n                    \"active:bg-destructive-xstrong\",\n                    \"aria-disabled:bg-destructive-disabled\",\n                    \"focus-visible:ring-lg focus-visible:ring-destructive-subtle\"\n                ],\n                secondary: [\n                    \"bg-neutral-dimmed text-neutral-strong fill-neutral-xstrong\",\n                    \"hover:bg-neutral-muted\",\n                    \"active:bg-neutral-strong\",\n                    \"aria-disabled:bg-neutral-disabled aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                tertiary: [\n                    \"bg-neutral-base text-neutral-strong border-neutral-muted fill-neutral-xstrong\",\n                    \"hover:bg-neutral-light\",\n                    \"active:bg-neutral-muted\",\n                    \"aria-disabled:bg-neutral-disabled aria-disabled:border-neutral-dimmed aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ],\n                ghost: [\n                    \"bg-transparent text-neutral-strong fill-neutral-xstrong\",\n                    \"hover:bg-neutral-dimmed\",\n                    \"active:bg-neutral-muted\",\n                    \"aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\"\n                ],\n                \"ghost-negative\": [\n                    \"bg-transparent text-neutral-light fill-neutral-base\",\n                    \"hover:bg-neutral-base/20\",\n                    \"active:bg-neutral-base/30\",\n                    \"aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-base/50\",\n                    \"focus-visible:border-neutral-base!\"\n                ],\n                /*\n                 * An action that reads as a link, e.g. a secondary step in a dialog footer. Styled\n                 * like the base `a` rule in theme.css. The `!` overrides undo the padding, border\n                 * and underline rules that every other variant shares.\n                 */\n                link: [\n                    \"bg-transparent text-accent-primary fill-accent-default\",\n                    \"p-0! border-0! rounded-xs\",\n                    \"hover:underline!\",\n                    \"aria-disabled:text-neutral-disabled aria-disabled:fill-neutral-strong\",\n                    \"focus-visible:ring-lg focus-visible:ring-primary-dimmed\"\n                ]\n            },\n            size: {\n                sm: [\n                    \"text-sm border-sm rounded-sm [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs)-(var(--border-width-sm)))] px-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n                ],\n                md: [\n                    \"text-md border-sm rounded-md [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ],\n                lg: [\n                    \"text-md border-sm rounded-md [&>svg]:size-md-plus\",\n                    \"py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]\"\n                ],\n                xl: [\n                    \"text-lg font-semibold border-lg rounded-md [&>svg]:size-lg\",\n                    \"py-[calc(theme(padding.md-plus)-(var(--border-width-md)))] px-[calc(var(--padding-md)-(var(--border-width-md)))]\"\n                ]\n            },\n            contentLayout: {\n                text: \"\",\n                icon: \"\",\n                \"text-icon-start\": \"\",\n                \"text-icon-end\": \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"xl\",\n                variant: \"ghost\",\n                className: \"focus-visible:border-md\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-xs)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"text-icon-start\",\n                className: \"pl-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:mr-xs\"\n            },\n            {\n                size: \"sm\",\n                contentLayout: \"text-icon-end\",\n                className: \"pr-[calc(var(--padding-xs)-(var(--border-width-sm)))] [&>svg]:ml-xs\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"pl-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:mr-xs\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"pr-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] [&>svg]:ml-xs\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"pl-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:mr-xs-plus\"\n            },\n            {\n                size: \"lg\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"pr-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))] [&>svg]:ml-xs-plus\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-md)-(var(--border-width-md)))]\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"text-icon-start\",\n                className:\n                    \"pl-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:mr-sm\"\n            },\n            {\n                size: \"xl\",\n                contentLayout: \"text-icon-end\",\n                className:\n                    \"pr-[calc(var(--padding-sm-extra)-(var(--border-width-md)))] [&>svg]:ml-sm\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\"\n        }\n    }\n);\n\ninterface ButtonProps\n    extends\n        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\">,\n        VariantProps<typeof buttonVariants> {\n    text?: React.ReactNode;\n    children?: React.ReactNode;\n\n    icon?: React.ReactNode;\n\n    iconPosition?: \"start\" | \"end\";\n\n    asChild?: boolean;\n\n    containerClassName?: string;\n}\n\ntype ContentLayout = \"text\" | \"icon\" | \"text-icon-start\" | \"text-icon-end\";\n\nconst ButtonBase = ({\n    className,\n    variant,\n    size,\n    asChild = false,\n    text,\n    children,\n    icon,\n    iconPosition = \"start\",\n    disabled,\n    containerClassName,\n    ...rest\n}: ButtonProps) => {\n    const Comp = asChild ? Slot.Root : \"button\";\n\n    const contentLayout = useMemo<ContentLayout>(() => {\n        if (!text && !children) {\n            return \"icon\";\n        }\n\n        if (!icon) {\n            return \"text\";\n        }\n\n        return `text-icon-${iconPosition}` as ContentLayout;\n    }, [text, children, icon, iconPosition]);\n\n    const cssClasses = cn(\n        buttonVariants({\n            variant,\n            size,\n            contentLayout\n        }),\n        className\n    );\n\n    return (\n        <span className={cn(buttonWrapperVariants({ disabled }), containerClassName)}>\n            <Comp className={cssClasses} disabled={disabled} aria-disabled={disabled} {...rest}>\n                {iconPosition !== \"end\" && icon}\n                <Slot.Slottable>{text || children || null}</Slot.Slottable>\n                {iconPosition === \"end\" && icon}\n            </Comp>\n        </span>\n    );\n};\n\nconst Button = makeDecoratable(\"Button\", ButtonBase);\n\nexport { Button, type ButtonProps, buttonVariants };\n"],"names":["buttonWrapperVariants","cva","buttonVariants","ButtonBase","className","variant","size","asChild","text","children","icon","iconPosition","disabled","containerClassName","rest","Comp","Slot","contentLayout","useMemo","cssClasses","cn","Button","makeDecoratable"],"mappings":";;;AAIA,MAAMA,wBAAwBC,IAAI,gBAAgB;IAC9C,UAAU;QACN,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAEA,MAAMC,iBAAiBD,IACnB;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;aACH;YACD,aAAa;gBACT;gBACA;gBACA;gBACA;gBACA;aACH;YACD,WAAW;gBACP;gBACA;gBACA;gBACA;gBACA;aACH;YACD,UAAU;gBACN;gBACA;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;gBACA;aACH;YACD,kBAAkB;gBACd;gBACA;gBACA;gBACA;gBACA;aACH;YAMD,MAAM;gBACF;gBACA;gBACA;gBACA;gBACA;aACH;QACL;QACA,MAAM;YACF,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;QACL;QACA,eAAe;YACX,MAAM;YACN,MAAM;YACN,mBAAmB;YACnB,iBAAiB;QACrB;IACJ;IACA,kBAAkB;QACd;YACI,MAAM;YACN,SAAS;YACT,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;QACA;YACI,MAAM;YACN,eAAe;YACf,WACI;QACR;KACH;IACD,iBAAiB;QACb,SAAS;QACT,MAAM;IACV;AACJ;AAqBJ,MAAME,aAAa,CAAC,EAChBC,SAAS,EACTC,OAAO,EACPC,IAAI,EACJC,UAAU,KAAK,EACfC,IAAI,EACJC,QAAQ,EACRC,IAAI,EACJC,eAAe,OAAO,EACtBC,QAAQ,EACRC,kBAAkB,EAClB,GAAGC,MACO;IACV,MAAMC,OAAOR,UAAUS,KAAK,IAAI,GAAG;IAEnC,MAAMC,gBAAgBC,QAAuB;QACzC,IAAI,CAACV,QAAQ,CAACC,UACV,OAAO;QAGX,IAAI,CAACC,MACD,OAAO;QAGX,OAAO,CAAC,UAAU,EAAEC,cAAc;IACtC,GAAG;QAACH;QAAMC;QAAUC;QAAMC;KAAa;IAEvC,MAAMQ,aAAaC,GACflB,eAAe;QACXG;QACAC;QACAW;IACJ,IACAb;IAGJ,OAAO,WAAP,GACI,oBAAC;QAAK,WAAWgB,GAAGpB,sBAAsB;YAAEY;QAAS,IAAIC;qBACrD,oBAACE,MAAAA;QAAK,WAAWI;QAAY,UAAUP;QAAU,iBAAeA;QAAW,GAAGE,IAAI;OAC7EH,AAAiB,UAAjBA,gBAA0BD,MAAAA,WAAAA,GAC3B,oBAACM,KAAK,SAAS,QAAER,QAAQC,YAAY,OACpCE,AAAiB,UAAjBA,gBAA0BD;AAI3C;AAEA,MAAMW,SAASC,gBAAgB,UAAUnB"}

package/Button/Button.mdx

@@ -95,6 +95,19 @@ import { Button } from "@webiny/admin-ui";
 ` } }
 />
 
+### Link
+
+For an action that should read as a link, without navigating anywhere. Use the `Link` component when it does navigate.
+
+<Canvas of={ButtonStories.Link}
+        source={ { code:
+                `// Code for a Link button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="link" text={"Button"}></Button>
+
+` } }
+/>
+
 ### With Icon
 
 <Canvas of={ButtonStories.WithIcon} story={ {inline: false}}

package/Button/Button.stories.d.ts

@@ -8,6 +8,7 @@ export declare const Secondary: Story;
 export declare const Tertiary: Story;
 export declare const Ghost: Story;
 export declare const GhostNegative: Story;
+export declare const Link: Story;
 export declare const Small: Story;
 export declare const Medium: Story;
 export declare const Large: Story;

package/Button/Button.stories.js

@@ -10,10 +10,12 @@ const meta = {
             control: "select",
             options: [
                 "primary",
+                "destructive",
                 "secondary",
                 "tertiary",
                 "ghost",
-                "ghost-negative"
+                "ghost-negative",
+                "link"
             ],
             defaultValue: "primary"
         },
@@ -93,6 +95,12 @@ const GhostNegative = {
         variant: "ghost-negative"
     }
 };
+const Link = {
+    args: {
+        ...Primary.args,
+        variant: "link"
+    }
+};
 const Small = {
     args: {
         ...Primary.args,
@@ -149,6 +157,6 @@ const Documentation = {
     }
 };
 export default Button_stories;
-export { Documentation, ExtraLarge, Ghost, GhostNegative, Large, Medium, Primary, Secondary, Small, Tertiary, WithAsChild, WithIcon, WithIconPositionEnd };
+export { Documentation, ExtraLarge, Ghost, GhostNegative, Large, Link, Medium, Primary, Secondary, Small, Tertiary, WithAsChild, WithIcon, WithIconPositionEnd };
 
 //# sourceMappingURL=Button.stories.js.map

package/Button/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button/Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as PencilIcon } from \"@webiny/icons/edit.svg\";\nimport { Button } from \"./Button.js\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta: Meta<typeof Button> = {\n    title: \"Components/Button\",\n    component: Button,\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        text: {\n            description: \"Label\",\n            control: \"text\",\n            defaultValue: \"Button\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the 'With Icon' button example below for details.\"\n        },\n        iconPosition: {\n            description: \"Please refer to the 'With Icon' button example below for details.\",\n            control: \"select\",\n            defaultValue: \"start\",\n            options: [\"start\", \"end\"]\n        },\n        asChild: {\n            description: \"Please refer to the 'As Child' button example below for details.\"\n        },\n        // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Button>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\"\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        (Story: any) => (\n            <div className=\"bg-[#25292e] p-[50px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />\n    }\n};\n\nexport const WithIconPositionEnd: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        text: <span>Button</span>\n    }\n};\n\n/* The Documentation story is created for the Docs page.\n * The description column for the `iconPosition` and `icon` props displays\n * an extra dash (-), and the formatting breaks unless defined in the story.\n * Hence, this Documentation story was created.\n */\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\",\n        size: \"md\",\n        disabled: false,\n        icon: \"\",\n        iconPosition: \"start\",\n        asChild: false\n    }\n};\n"],"names":["meta","Button","Primary","Secondary","Tertiary","Ghost","GhostNegative","Story","Small","Medium","Large","ExtraLarge","WithIcon","PencilIcon","WithIconPositionEnd","WithAsChild","Documentation"],"mappings":";;;AAMA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAY;gBAAS;aAAiB;YACxE,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;QACjB;QACA,cAAc;YACV,aAAa;YACb,SAAS;YACT,cAAc;YACd,SAAS;gBAAC;gBAAS;aAAM;QAC7B;QACA,SAAS;YACL,aAAa;QACjB;QAEA,SAAS;YAAE,QAAQ;QAAU;IACjC;AACJ;AAEA,uBAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,WAAkB;IAC3B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,QAAe;IACxB,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMI,gBAAuB;IAChC,YAAY;QACR,CAACC,QAAAA,WAAAA,GACG,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMM,QAAe;IACxB,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMO,SAAgB;IACzB,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMQ,QAAe;IACxB,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMS,aAAoB;IAC7B,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMU,WAAkB;IAC3B,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACW,gBAAUA;IACrB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACW,gBAAUA;QACjB,cAAc;IAClB;AACJ;AAEO,MAAME,cAAqB;IAC9B,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,SAAS;QACT,MAAM,WAAN,GAAM,oBAAC,cAAK;IAChB;AACJ;AAQO,MAAMc,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,MAAM;QACN,MAAM;QACN,UAAU;QACV,MAAM;QACN,cAAc;QACd,SAAS;IACb;AACJ"}
+{"version":3,"file":"Button/Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as PencilIcon } from \"@webiny/icons/edit.svg\";\nimport { Button } from \"./Button.js\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta: Meta<typeof Button> = {\n    title: \"Components/Button\",\n    component: Button,\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\n                \"primary\",\n                \"destructive\",\n                \"secondary\",\n                \"tertiary\",\n                \"ghost\",\n                \"ghost-negative\",\n                \"link\"\n            ],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        text: {\n            description: \"Label\",\n            control: \"text\",\n            defaultValue: \"Button\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the 'With Icon' button example below for details.\"\n        },\n        iconPosition: {\n            description: \"Please refer to the 'With Icon' button example below for details.\",\n            control: \"select\",\n            defaultValue: \"start\",\n            options: [\"start\", \"end\"]\n        },\n        asChild: {\n            description: \"Please refer to the 'As Child' button example below for details.\"\n        },\n        // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Button>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\"\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        (Story: any) => (\n            <div className=\"bg-[#25292e] p-[50px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const Link: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"link\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />\n    }\n};\n\nexport const WithIconPositionEnd: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        text: <span>Button</span>\n    }\n};\n\n/* The Documentation story is created for the Docs page.\n * The description column for the `iconPosition` and `icon` props displays\n * an extra dash (-), and the formatting breaks unless defined in the story.\n * Hence, this Documentation story was created.\n */\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\",\n        size: \"md\",\n        disabled: false,\n        icon: \"\",\n        iconPosition: \"start\",\n        asChild: false\n    }\n};\n"],"names":["meta","Button","Primary","Secondary","Tertiary","Ghost","GhostNegative","Story","Link","Small","Medium","Large","ExtraLarge","WithIcon","PencilIcon","WithIconPositionEnd","WithAsChild","Documentation"],"mappings":";;;AAMA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;QACjB;QACA,cAAc;YACV,aAAa;YACb,SAAS;YACT,cAAc;YACd,SAAS;gBAAC;gBAAS;aAAM;QAC7B;QACA,SAAS;YACL,aAAa;QACjB;QAEA,SAAS;YAAE,QAAQ;QAAU;IACjC;AACJ;AAEA,uBAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,WAAkB;IAC3B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,QAAe;IACxB,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMI,gBAAuB;IAChC,YAAY;QACR,CAACC,QAAAA,WAAAA,GACG,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMM,OAAc;IACvB,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMO,QAAe;IACxB,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMQ,SAAgB;IACzB,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMS,QAAe;IACxB,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMU,aAAoB;IAC7B,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMW,WAAkB;IAC3B,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACY,gBAAUA;IACrB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACY,gBAAUA;QACjB,cAAc;IAClB;AACJ;AAEO,MAAME,cAAqB;IAC9B,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,SAAS;QACT,MAAM,WAAN,GAAM,oBAAC,cAAK;IAChB;AACJ;AAQO,MAAMe,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,MAAM;QACN,MAAM;QACN,UAAU;QACV,MAAM;QACN,cAAc;QACd,SAAS;IACb;AACJ"}

package/Button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/Button/Button.test.js

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { buttonVariants } from "./Button.js";
+describe("buttonVariants destructive", ()=>{
+    it("uses the destructive colours for the normal, hover, active and disabled states", ()=>{
+        const tokens = buttonVariants({
+            variant: "destructive"
+        }).split(" ");
+        expect(tokens).toContain("bg-destructive");
+        expect(tokens).toContain("hover:bg-destructive-strong");
+        expect(tokens).toContain("active:bg-destructive-xstrong");
+        expect(tokens).toContain("aria-disabled:bg-destructive-disabled");
+    });
+    it("shows a destructive focus ring like the other variants", ()=>{
+        const tokens = buttonVariants({
+            variant: "destructive"
+        }).split(" ");
+        expect(tokens).toContain("focus-visible:ring-lg");
+        expect(tokens).toContain("focus-visible:ring-destructive-subtle");
+    });
+    it("keeps the primary variant free of destructive colours", ()=>{
+        const tokens = buttonVariants({
+            variant: "primary"
+        }).split(" ");
+        expect(tokens).not.toContain("bg-destructive");
+    });
+});
+
+//# sourceMappingURL=Button.test.js.map

package/Button/Button.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button/Button.test.js","sources":["../../src/Button/Button.test.ts"],"sourcesContent":["import { describe } from \"vitest\";\nimport { expect } from \"vitest\";\nimport { it } from \"vitest\";\nimport { buttonVariants } from \"./Button.js\";\n\ndescribe(\"buttonVariants destructive\", () => {\n    it(\"uses the destructive colours for the normal, hover, active and disabled states\", () => {\n        const tokens = buttonVariants({ variant: \"destructive\" }).split(\" \");\n\n        expect(tokens).toContain(\"bg-destructive\");\n        expect(tokens).toContain(\"hover:bg-destructive-strong\");\n        expect(tokens).toContain(\"active:bg-destructive-xstrong\");\n        expect(tokens).toContain(\"aria-disabled:bg-destructive-disabled\");\n    });\n\n    it(\"shows a destructive focus ring like the other variants\", () => {\n        const tokens = buttonVariants({ variant: \"destructive\" }).split(\" \");\n\n        expect(tokens).toContain(\"focus-visible:ring-lg\");\n        expect(tokens).toContain(\"focus-visible:ring-destructive-subtle\");\n    });\n\n    it(\"keeps the primary variant free of destructive colours\", () => {\n        const tokens = buttonVariants({ variant: \"primary\" }).split(\" \");\n\n        expect(tokens).not.toContain(\"bg-destructive\");\n    });\n});\n"],"names":["describe","it","tokens","buttonVariants","expect"],"mappings":";;AAKAA,SAAS,8BAA8B;IACnCC,GAAG,kFAAkF;QACjF,MAAMC,SAASC,eAAe;YAAE,SAAS;QAAc,GAAG,KAAK,CAAC;QAEhEC,OAAOF,QAAQ,SAAS,CAAC;QACzBE,OAAOF,QAAQ,SAAS,CAAC;QACzBE,OAAOF,QAAQ,SAAS,CAAC;QACzBE,OAAOF,QAAQ,SAAS,CAAC;IAC7B;IAEAD,GAAG,0DAA0D;QACzD,MAAMC,SAASC,eAAe;YAAE,SAAS;QAAc,GAAG,KAAK,CAAC;QAEhEC,OAAOF,QAAQ,SAAS,CAAC;QACzBE,OAAOF,QAAQ,SAAS,CAAC;IAC7B;IAEAD,GAAG,yDAAyD;QACxD,MAAMC,SAASC,eAAe;YAAE,SAAS;QAAU,GAAG,KAAK,CAAC;QAE5DC,OAAOF,QAAQ,GAAG,CAAC,SAAS,CAAC;IACjC;AACJ"}

package/Checkbox/primitives/presenters/CheckboxPresenter.js

@@ -1,4 +1,4 @@
-import { makeAutoObservable } from "mobx";
+import { makeAutoObservable, observableRef } from "mobx";
 import { CheckboxItem } from "../../domains/CheckboxItem.js";
 import { CheckboxItemMapper } from "../../domains/CheckboxItemMapper.js";
 class CheckboxPresenter {
@@ -19,7 +19,10 @@ class CheckboxPresenter {
         this.changeChecked = (checked)=>{
             this.params?.onCheckedChange(checked);
         };
-        makeAutoObservable(this);
+        makeAutoObservable(this, {
+            params: observableRef,
+            item: observableRef
+        });
     }
     get vm() {
         return {

package/Checkbox/primitives/presenters/CheckboxPresenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox/primitives/presenters/CheckboxPresenter.js","sources":["../../../../src/Checkbox/primitives/presenters/CheckboxPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { CheckboxPrimitiveVm } from \"../CheckboxPrimitive.js\";\nimport { CheckboxItem } from \"~/Checkbox/domains/CheckboxItem.js\";\nimport { type CheckboxItemDto } from \"~/Checkbox/domains/CheckboxItemDto.js\";\nimport { CheckboxItemMapper } from \"~/Checkbox/domains/CheckboxItemMapper.js\";\n\ntype CheckboxPresenterParams = CheckboxItemDto & {\n    onCheckedChange: (checked: boolean) => void;\n};\n\ninterface ICheckboxPresenter<TParams extends CheckboxPresenterParams = CheckboxPresenterParams> {\n    vm: CheckboxPrimitiveVm;\n    init: (params: TParams) => void;\n    changeChecked: (checked: boolean) => void;\n}\n\nclass CheckboxPresenter implements ICheckboxPresenter {\n    private params?: CheckboxPresenterParams = undefined;\n    private item?: CheckboxItem = undefined;\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init = (params: CheckboxPresenterParams) => {\n        this.params = params;\n        this.item = CheckboxItem.create({\n            id: params.id,\n            label: params.label,\n            value: params.value,\n            checked: params.checked,\n            indeterminate: params.indeterminate,\n            disabled: params.disabled\n        });\n    };\n\n    get vm() {\n        return {\n            item: this.item ? CheckboxItemMapper.toFormatted(this.item) : undefined\n        };\n    }\n\n    public changeChecked = (checked: boolean) => {\n        this.params?.onCheckedChange(checked);\n    };\n}\n\nexport { CheckboxPresenter, type CheckboxPresenterParams, type ICheckboxPresenter };\n"],"names":["CheckboxPresenter","undefined","params","CheckboxItem","checked","makeAutoObservable","CheckboxItemMapper"],"mappings":";;;AAgBA,MAAMA;IAIF,aAAc;aAHN,MAAM,GAA6BC;aACnC,IAAI,GAAkBA;aAMvB,IAAI,GAAG,CAACC;YACX,IAAI,CAAC,MAAM,GAAGA;YACd,IAAI,CAAC,IAAI,GAAGC,aAAa,MAAM,CAAC;gBAC5B,IAAID,OAAO,EAAE;gBACb,OAAOA,OAAO,KAAK;gBACnB,OAAOA,OAAO,KAAK;gBACnB,SAASA,OAAO,OAAO;gBACvB,eAAeA,OAAO,aAAa;gBACnC,UAAUA,OAAO,QAAQ;YAC7B;QACJ;aAQO,aAAa,GAAG,CAACE;YACpB,IAAI,CAAC,MAAM,EAAE,gBAAgBA;QACjC;QAvBIC,mBAAmB,IAAI;IAC3B;IAcA,IAAI,KAAK;QACL,OAAO;YACH,MAAM,IAAI,CAAC,IAAI,GAAGC,mBAAmB,WAAW,CAAC,IAAI,CAAC,IAAI,IAAIL;QAClE;IACJ;AAKJ"}
+{"version":3,"file":"Checkbox/primitives/presenters/CheckboxPresenter.js","sources":["../../../../src/Checkbox/primitives/presenters/CheckboxPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport { observableRef } from \"mobx\";\nimport type { CheckboxPrimitiveVm } from \"../CheckboxPrimitive.js\";\nimport { CheckboxItem } from \"~/Checkbox/domains/CheckboxItem.js\";\nimport { type CheckboxItemDto } from \"~/Checkbox/domains/CheckboxItemDto.js\";\nimport { CheckboxItemMapper } from \"~/Checkbox/domains/CheckboxItemMapper.js\";\n\ntype CheckboxPresenterParams = CheckboxItemDto & {\n    onCheckedChange: (checked: boolean) => void;\n};\n\ninterface ICheckboxPresenter<TParams extends CheckboxPresenterParams = CheckboxPresenterParams> {\n    vm: CheckboxPrimitiveVm;\n    init: (params: TParams) => void;\n    changeChecked: (checked: boolean) => void;\n}\n\nclass CheckboxPresenter implements ICheckboxPresenter {\n    private params?: CheckboxPresenterParams = undefined;\n    private item?: CheckboxItem = undefined;\n\n    constructor() {\n        makeAutoObservable<CheckboxPresenter, \"params\" | \"item\">(this, {\n            params: observableRef,\n            item: observableRef\n        });\n    }\n\n    public init = (params: CheckboxPresenterParams) => {\n        this.params = params;\n        this.item = CheckboxItem.create({\n            id: params.id,\n            label: params.label,\n            value: params.value,\n            checked: params.checked,\n            indeterminate: params.indeterminate,\n            disabled: params.disabled\n        });\n    };\n\n    get vm() {\n        return {\n            item: this.item ? CheckboxItemMapper.toFormatted(this.item) : undefined\n        };\n    }\n\n    public changeChecked = (checked: boolean) => {\n        this.params?.onCheckedChange(checked);\n    };\n}\n\nexport { CheckboxPresenter, type CheckboxPresenterParams, type ICheckboxPresenter };\n"],"names":["CheckboxPresenter","undefined","params","CheckboxItem","checked","makeAutoObservable","observableRef","CheckboxItemMapper"],"mappings":";;;AAiBA,MAAMA;IAIF,aAAc;aAHN,MAAM,GAA6BC;aACnC,IAAI,GAAkBA;aASvB,IAAI,GAAG,CAACC;YACX,IAAI,CAAC,MAAM,GAAGA;YACd,IAAI,CAAC,IAAI,GAAGC,aAAa,MAAM,CAAC;gBAC5B,IAAID,OAAO,EAAE;gBACb,OAAOA,OAAO,KAAK;gBACnB,OAAOA,OAAO,KAAK;gBACnB,SAASA,OAAO,OAAO;gBACvB,eAAeA,OAAO,aAAa;gBACnC,UAAUA,OAAO,QAAQ;YAC7B;QACJ;aAQO,aAAa,GAAG,CAACE;YACpB,IAAI,CAAC,MAAM,EAAE,gBAAgBA;QACjC;QA1BIC,mBAAyD,IAAI,EAAE;YAC3D,QAAQC;YACR,MAAMA;QACV;IACJ;IAcA,IAAI,KAAK;QACL,OAAO;YACH,MAAM,IAAI,CAAC,IAAI,GAAGC,mBAAmB,WAAW,CAAC,IAAI,CAAC,IAAI,IAAIN;QAClE;IACJ;AAKJ"}

package/Checkbox/primitives/presenters/CheckboxPresenter.jsxLabel.test.d.ts

@@ -0,0 +1 @@
+export {};