@webiny/admin-ui 6.3.0 → 6.4.0-beta.1

package/MultiSelect/primitives/MultiSelectPrimitive.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { type VariantProps } from "../../utils.js";
+import { selectTriggerVariants } from "../../Select/primitives/components/index.js";
+interface MultiSelectOptionDto {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface MultiSelectPrimitiveProps {
+    options?: MultiSelectOptionDto[];
+    value?: string[];
+    onChange?: (values: string[]) => void;
+    onValueReset?: () => void;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    displayResetAction?: boolean;
+    /**
+     * When `true`, shows "{count} items selected" in the trigger instead of the full
+     * comma-separated label list.
+     */
+    showSelectionCount?: boolean;
+    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;
+    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;
+        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;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { MultiSelectPrimitive, type MultiSelectPrimitiveProps, type MultiSelectOptionDto };

package/MultiSelect/primitives/MultiSelectPrimitive.js

@@ -0,0 +1,126 @@
+import react, { useCallback, useMemo } from "react";
+import { Popover } from "radix-ui";
+import { ReactComponent } from "@webiny/icons/keyboard_arrow_down.svg";
+import { ReactComponent as close_svg_ReactComponent } from "@webiny/icons/close.svg";
+import { cn, makeDecoratable } from "../../utils.js";
+import { CheckboxPrimitiveRenderer } from "../../Checkbox/index.js";
+import { Icon } from "../../Icon/index.js";
+import { IconButton } from "../../Button/index.js";
+import { selectTriggerVariants } from "../../Select/primitives/components/index.js";
+const MultiSelectTrigger = ({ displayValue, hasValue, placeholder, displayResetAction, disabled, invalid, size, variant, onValueReset })=>{
+    const resetButton = useMemo(()=>{
+        if (!hasValue || !displayResetAction) return;
+        return /*#__PURE__*/ react.createElement(IconButton, {
+            onPointerDown: (event)=>{
+                event.stopPropagation();
+                onValueReset();
+            },
+            icon: /*#__PURE__*/ react.createElement("span", null, /*#__PURE__*/ react.createElement(Icon, {
+                icon: /*#__PURE__*/ react.createElement(close_svg_ReactComponent, null),
+                label: "Reset",
+                color: "ghost-negative" === variant ? "neutral-negative" : "inherit"
+            })),
+            size: "xs",
+            variant: "ghost-negative" === variant ? "ghost-negative" : "secondary",
+            disabled: disabled,
+            asChild: true
+        });
+    }, [
+        hasValue,
+        displayResetAction,
+        onValueReset,
+        variant,
+        disabled
+    ]);
+    return /*#__PURE__*/ react.createElement(Popover.Trigger, {
+        className: cn(selectTriggerVariants({
+            variant,
+            size,
+            invalid
+        })),
+        disabled: disabled
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 text-left truncate"
+    }, hasValue ? displayValue : /*#__PURE__*/ react.createElement("span", {
+        className: "text-neutral-disabled"
+    }, placeholder)), resetButton, /*#__PURE__*/ react.createElement("span", {
+        className: "h-md w-md shrink-0 fill-neutral-xstrong"
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        className: "h-md w-md"
+    })));
+};
+const MultiSelectContent = ({ options, value, onToggle })=>/*#__PURE__*/ react.createElement(Popover.Portal, null, /*#__PURE__*/ react.createElement(Popover.Content, {
+        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)"
+        },
+        align: "start",
+        sideOffset: 4
+    }, options.map((option)=>/*#__PURE__*/ react.createElement("div", {
+            key: option.value,
+            className: cn("rounded-sm p-sm mx-sm cursor-pointer", "hover:bg-neutral-dimmed", option.disabled && "opacity-50 pointer-events-none"),
+            onClick: ()=>onToggle(option.value)
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "pointer-events-none"
+        }, /*#__PURE__*/ react.createElement(CheckboxPrimitiveRenderer, {
+            id: option.value,
+            label: option.label,
+            value: option.value,
+            checked: value.includes(option.value),
+            disabled: option.disabled ?? false,
+            indeterminate: false,
+            hasLabel: true,
+            changeChecked: ()=>{}
+        }))))));
+const DecoratableMultiSelectPrimitive = ({ options = [], value = [], onChange, onValueReset, placeholder = "Select options", disabled, invalid, displayResetAction = true, showSelectionCount, size, variant })=>{
+    const displayValue = useMemo(()=>{
+        if (0 === value.length) return "";
+        if (showSelectionCount) return `${value.length} items selected`;
+        const labelMap = new Map(options.map((o)=>[
+                o.value,
+                o.label
+            ]));
+        return value.map((v)=>labelMap.get(v) ?? v).join(", ");
+    }, [
+        value,
+        options,
+        showSelectionCount
+    ]);
+    const toggle = useCallback((optionValue)=>{
+        const next = value.includes(optionValue) ? value.filter((v)=>v !== optionValue) : [
+            ...value,
+            optionValue
+        ];
+        onChange?.(next);
+    }, [
+        value,
+        onChange
+    ]);
+    const reset = useCallback(()=>{
+        onChange?.([]);
+        onValueReset?.();
+    }, [
+        onChange,
+        onValueReset
+    ]);
+    return /*#__PURE__*/ react.createElement(Popover.Root, null, /*#__PURE__*/ react.createElement(MultiSelectTrigger, {
+        displayValue: displayValue,
+        hasValue: value.length > 0,
+        placeholder: placeholder,
+        displayResetAction: displayResetAction,
+        disabled: disabled,
+        invalid: invalid,
+        size: size,
+        variant: variant,
+        onValueReset: reset
+    }), /*#__PURE__*/ react.createElement(MultiSelectContent, {
+        options: options,
+        value: value,
+        onToggle: toggle
+    }));
+};
+const MultiSelectPrimitive = makeDecoratable("MultiSelectPrimitive", DecoratableMultiSelectPrimitive);
+export { MultiSelectPrimitive };
+
+//# sourceMappingURL=MultiSelectPrimitive.js.map

package/MultiSelect/primitives/MultiSelectPrimitive.js.map

@@ -0,0 +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"}

package/MultiSelect/primitives/index.d.ts

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

package/MultiSelect/primitives/index.js

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

package/Popover/Popover.js

@@ -1,26 +1,17 @@
-import * as React from "react";
 import { PopoverPrimitive } from "./primitives/index.js";
 import { makeDecoratable } from "../utils.js";
-const DecoratablePopover = ({
-  align,
-  arrow,
-  close,
-  content,
-  side,
-  trigger,
-  variant,
-  ...props
-}) => /*#__PURE__*/React.createElement(PopoverPrimitive, props, /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, {
-  asChild: true
-}, trigger), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
-  align: align,
-  className: "px-sm-extra py-sm",
-  arrow: arrow,
-  side: side,
-  variant: variant
-}, content, close && /*#__PURE__*/React.createElement(PopoverPrimitive.Close, null), arrow && /*#__PURE__*/React.createElement(PopoverPrimitive.Arrow, {
-  variant: variant
-})));
+import * as __rspack_external_react from "react";
+const DecoratablePopover = ({ align, arrow, close, content, side, trigger, variant, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(PopoverPrimitive, props, /*#__PURE__*/ __rspack_external_react.createElement(PopoverPrimitive.Trigger, {
+        asChild: true
+    }, trigger), /*#__PURE__*/ __rspack_external_react.createElement(PopoverPrimitive.Content, {
+        align: align,
+        className: "px-sm-extra py-sm",
+        arrow: arrow,
+        side: side,
+        variant: variant
+    }, content, close && /*#__PURE__*/ __rspack_external_react.createElement(PopoverPrimitive.Close, null), arrow && /*#__PURE__*/ __rspack_external_react.createElement(PopoverPrimitive.Arrow, {
+        variant: variant
+    })));
 const Popover = makeDecoratable("Popover", DecoratablePopover);
 export { Popover };
 

package/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","PopoverPrimitive","makeDecoratable","DecoratablePopover","align","arrow","close","content","side","trigger","variant","props","createElement","Trigger","asChild","Content","className","Close","Arrow","Popover"],"sources":["Popover.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n    PopoverPrimitive,\n    type PopoverPrimitiveProps,\n    type PopoverPrimitiveContentProps\n} from \"./primitives/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface PopoverProps extends PopoverPrimitiveProps, Omit<PopoverPrimitiveProps, \"children\"> {\n    align?: PopoverPrimitiveContentProps[\"align\"];\n    content: React.ReactNode;\n    arrow?: boolean;\n    close?: boolean;\n    side?: PopoverPrimitiveContentProps[\"side\"];\n    trigger: React.ReactNode;\n    variant?: PopoverPrimitiveContentProps[\"variant\"];\n}\n\nconst DecoratablePopover = ({\n    align,\n    arrow,\n    close,\n    content,\n    side,\n    trigger,\n    variant,\n    ...props\n}: PopoverProps) => (\n    <PopoverPrimitive {...props}>\n        <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Content\n            align={align}\n            className={\"px-sm-extra py-sm\"}\n            arrow={arrow}\n            side={side}\n            variant={variant}\n        >\n            {content}\n            {close && <PopoverPrimitive.Close />}\n            {arrow && <PopoverPrimitive.Arrow variant={variant} />}\n        </PopoverPrimitive.Content>\n    </PopoverPrimitive>\n);\n\nconst Popover = makeDecoratable(\"Popover\", DecoratablePopover);\n\nexport { Popover, type PopoverProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACIC,gBAAgB;AAIpB,SAASC,eAAe;AAYxB,MAAMC,kBAAkB,GAAGA,CAAC;EACxBC,KAAK;EACLC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,IAAI;EACJC,OAAO;EACPC,OAAO;EACP,GAAGC;AACO,CAAC,kBACXX,KAAA,CAAAY,aAAA,CAACX,gBAAgB,EAAKU,KAAK,eACvBX,KAAA,CAAAY,aAAA,CAACX,gBAAgB,CAACY,OAAO;EAACC,OAAO;AAAA,GAAEL,OAAkC,CAAC,eACtET,KAAA,CAAAY,aAAA,CAACX,gBAAgB,CAACc,OAAO;EACrBX,KAAK,EAAEA,KAAM;EACbY,SAAS,EAAE,mBAAoB;EAC/BX,KAAK,EAAEA,KAAM;EACbG,IAAI,EAAEA,IAAK;EACXE,OAAO,EAAEA;AAAQ,GAEhBH,OAAO,EACPD,KAAK,iBAAIN,KAAA,CAAAY,aAAA,CAACX,gBAAgB,CAACgB,KAAK,MAAE,CAAC,EACnCZ,KAAK,iBAAIL,KAAA,CAAAY,aAAA,CAACX,gBAAgB,CAACiB,KAAK;EAACR,OAAO,EAAEA;AAAQ,CAAE,CAC/B,CACZ,CACrB;AAED,MAAMS,OAAO,GAAGjB,eAAe,CAAC,SAAS,EAAEC,kBAAkB,CAAC;AAE9D,SAASgB,OAAO","ignoreList":[]}
+{"version":3,"file":"Popover/Popover.js","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n    PopoverPrimitive,\n    type PopoverPrimitiveProps,\n    type PopoverPrimitiveContentProps\n} from \"./primitives/index.js\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface PopoverProps extends PopoverPrimitiveProps, Omit<PopoverPrimitiveProps, \"children\"> {\n    align?: PopoverPrimitiveContentProps[\"align\"];\n    content: React.ReactNode;\n    arrow?: boolean;\n    close?: boolean;\n    side?: PopoverPrimitiveContentProps[\"side\"];\n    trigger: React.ReactNode;\n    variant?: PopoverPrimitiveContentProps[\"variant\"];\n}\n\nconst DecoratablePopover = ({\n    align,\n    arrow,\n    close,\n    content,\n    side,\n    trigger,\n    variant,\n    ...props\n}: PopoverProps) => (\n    <PopoverPrimitive {...props}>\n        <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Content\n            align={align}\n            className={\"px-sm-extra py-sm\"}\n            arrow={arrow}\n            side={side}\n            variant={variant}\n        >\n            {content}\n            {close && <PopoverPrimitive.Close />}\n            {arrow && <PopoverPrimitive.Arrow variant={variant} />}\n        </PopoverPrimitive.Content>\n    </PopoverPrimitive>\n);\n\nconst Popover = makeDecoratable(\"Popover\", DecoratablePopover);\n\nexport { Popover, type PopoverProps };\n"],"names":["DecoratablePopover","align","arrow","close","content","side","trigger","variant","props","PopoverPrimitive","Popover","makeDecoratable"],"mappings":";;;AAkBA,MAAMA,qBAAqB,CAAC,EACxBC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,OAAO,EACPC,IAAI,EACJC,OAAO,EACPC,OAAO,EACP,GAAGC,OACQ,iBACX,sCAACC,kBAAqBD,OAAAA,WAAAA,GAClB,sCAACC,iBAAiB,OAAO;QAAC;OAASH,UAAAA,WAAAA,GACnC,sCAACG,iBAAiB,OAAO;QACrB,OAAOR;QACP,WAAW;QACX,OAAOC;QACP,MAAMG;QACN,SAASE;OAERH,SACAD,SAAS,WAATA,GAAS,sCAACM,iBAAiB,KAAK,SAChCP,SAAS,WAATA,GAAS,sCAACO,iBAAiB,KAAK;QAAC,SAASF;;AAKvD,MAAMG,UAAUC,gBAAgB,WAAWX"}

package/Popover/Popover.stories.js

@@ -1,109 +1,136 @@
-import React from "react";
+import react from "react";
 import { Popover } from "./Popover.js";
 const meta = {
-  title: "Components/Popover",
-  component: Popover,
-  parameters: {
-    layout: "padded"
-  },
-  argTypes: {
-    align: {
-      control: "select",
-      options: ["start", "center", "end"]
+    title: "Components/Popover",
+    component: Popover,
+    parameters: {
+        layout: "padded"
     },
-    side: {
-      control: "select",
-      options: ["top", "bottom", "left", "right"]
-    }
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]"
-  }, /*#__PURE__*/React.createElement(Story, null))]
-};
-export default meta;
-export const Default = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Popover trigger"),
-    content: /*#__PURE__*/React.createElement("div", {
-      className: "w-[260px]"
-    }, /*#__PURE__*/React.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Morbi lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.")
-  }
-};
-export const AccentVariant = {
-  args: {
-    ...Default.args,
-    variant: "accent"
-  }
+    argTypes: {
+        align: {
+            control: "select",
+            options: [
+                "start",
+                "center",
+                "end"
+            ]
+        },
+        side: {
+            control: "select",
+            options: [
+                "top",
+                "bottom",
+                "left",
+                "right"
+            ]
+        }
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
 };
-export const WithArrowAccentVariant = {
-  args: {
-    ...AccentVariant.args,
-    arrow: true
-  }
+const Popover_stories = meta;
+const Default = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement("p", null, "Popover trigger"),
+        content: /*#__PURE__*/ react.createElement("div", {
+            className: "w-[260px]"
+        }, /*#__PURE__*/ react.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Morbi lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.")
+    }
 };
-export const SubtleVariant = {
-  args: {
-    ...Default.args,
-    variant: "subtle"
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]"
-  }, /*#__PURE__*/React.createElement(Story, null))]
+const AccentVariant = {
+    args: {
+        ...Default.args,
+        variant: "accent"
+    }
 };
-export const WithArrowSubtleVariant = {
-  args: {
-    variant: "subtle",
-    trigger: /*#__PURE__*/React.createElement("p", null, "Popover trigger"),
-    arrow: true,
-    content: /*#__PURE__*/React.createElement("div", {
-      className: "w-[260px]"
-    }, /*#__PURE__*/React.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Morbi lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.")
-  },
-  decorators: SubtleVariant.decorators
+const WithArrowAccentVariant = {
+    args: {
+        ...AccentVariant.args,
+        arrow: true
+    }
 };
-export const Documentation = {
-  args: {
-    align: "center",
-    side: "bottom",
-    variant: "subtle",
-    arrow: false,
-    close: false,
-    trigger: /*#__PURE__*/React.createElement("p", null, "Popover trigger"),
-    content: /*#__PURE__*/React.createElement("div", {
-      className: "w-[260px]"
-    }, /*#__PURE__*/React.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Morbi lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.")
-  },
-  argTypes: {
-    trigger: {
-      description: "The element that triggers the popover when clicked. Please refer to the example code for details."
-    },
-    content: {
-      description: "The content to display inside the popover. Please refer to the example code for details."
-    },
-    side: {
-      description: "The side of the trigger where the popover appears.",
-      control: "select",
-      options: ["top", "right", "bottom", "left"]
+const SubtleVariant = {
+    args: {
+        ...Default.args,
+        variant: "subtle"
     },
-    align: {
-      description: "The alignment of the popover relative to the trigger.",
-      control: "select",
-      options: ["start", "center", "end"]
-    },
-    variant: {
-      description: "The visual style variant of the popover.",
-      control: "select",
-      options: ["accent", "subtle"]
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const WithArrowSubtleVariant = {
+    args: {
+        variant: "subtle",
+        trigger: /*#__PURE__*/ react.createElement("p", null, "Popover trigger"),
+        arrow: true,
+        content: /*#__PURE__*/ react.createElement("div", {
+            className: "w-[260px]"
+        }, /*#__PURE__*/ react.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Morbi lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.")
     },
-    arrow: {
-      description: "Whether to show an arrow pointing to the trigger.",
-      control: "boolean"
+    decorators: SubtleVariant.decorators
+};
+const Documentation = {
+    args: {
+        align: "center",
+        side: "bottom",
+        variant: "subtle",
+        arrow: false,
+        close: false,
+        trigger: /*#__PURE__*/ react.createElement("p", null, "Popover trigger"),
+        content: /*#__PURE__*/ react.createElement("div", {
+            className: "w-[260px]"
+        }, /*#__PURE__*/ react.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Morbi lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor tempus.")
     },
-    close: {
-      description: "Whether to show a close button inside the popover.",
-      control: "boolean"
+    argTypes: {
+        trigger: {
+            description: "The element that triggers the popover when clicked. Please refer to the example code for details."
+        },
+        content: {
+            description: "The content to display inside the popover. Please refer to the example code for details."
+        },
+        side: {
+            description: "The side of the trigger where the popover appears.",
+            control: "select",
+            options: [
+                "top",
+                "right",
+                "bottom",
+                "left"
+            ]
+        },
+        align: {
+            description: "The alignment of the popover relative to the trigger.",
+            control: "select",
+            options: [
+                "start",
+                "center",
+                "end"
+            ]
+        },
+        variant: {
+            description: "The visual style variant of the popover.",
+            control: "select",
+            options: [
+                "accent",
+                "subtle"
+            ]
+        },
+        arrow: {
+            description: "Whether to show an arrow pointing to the trigger.",
+            control: "boolean"
+        },
+        close: {
+            description: "Whether to show a close button inside the popover.",
+            control: "boolean"
+        }
     }
-  }
 };
+export default Popover_stories;
+export { AccentVariant, Default, Documentation, SubtleVariant, WithArrowAccentVariant, WithArrowSubtleVariant };
 
 //# sourceMappingURL=Popover.stories.js.map

package/Popover/Popover.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Popover","meta","title","component","parameters","layout","argTypes","align","control","options","side","decorators","Story","createElement","className","Default","args","trigger","content","AccentVariant","variant","WithArrowAccentVariant","arrow","SubtleVariant","WithArrowSubtleVariant","Documentation","close","description"],"sources":["Popover.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Popover } from \"./Popover.js\";\n\nconst meta: Meta<typeof Popover> = {\n    title: \"Components/Popover\",\n    component: Popover,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"bottom\", \"left\", \"right\"]\n        }\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Popover>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const WithArrowAccentVariant: Story = {\n    args: {\n        ...AccentVariant.args,\n        arrow: true\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithArrowSubtleVariant: Story = {\n    args: {\n        variant: \"subtle\",\n        trigger: <p>Popover trigger</p>,\n        arrow: true,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    decorators: SubtleVariant.decorators\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"bottom\",\n        variant: \"subtle\",\n        arrow: false,\n        close: false,\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the popover when clicked. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the popover. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the popover appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the popover relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the popover.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        arrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        },\n        close: {\n            description: \"Whether to show a close button inside the popover.\",\n            control: \"boolean\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Popover/Popover.stories.js","sources":["../../src/Popover/Popover.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Popover } from \"./Popover.js\";\n\nconst meta: Meta<typeof Popover> = {\n    title: \"Components/Popover\",\n    component: Popover,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"bottom\", \"left\", \"right\"]\n        }\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Popover>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const WithArrowAccentVariant: Story = {\n    args: {\n        ...AccentVariant.args,\n        arrow: true\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithArrowSubtleVariant: Story = {\n    args: {\n        variant: \"subtle\",\n        trigger: <p>Popover trigger</p>,\n        arrow: true,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    decorators: SubtleVariant.decorators\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"bottom\",\n        variant: \"subtle\",\n        arrow: false,\n        close: false,\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the popover when clicked. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the popover. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the popover appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the popover relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the popover.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        arrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        },\n        close: {\n            description: \"Whether to show a close button inside the popover.\",\n            control: \"boolean\"\n        }\n    }\n};\n"],"names":["meta","Popover","Story","Default","AccentVariant","WithArrowAccentVariant","SubtleVariant","WithArrowSubtleVariant","Documentation"],"mappings":";;AAIA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAU;gBAAQ;aAAQ;QAC/C;IACJ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,wBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGD,cAAc,IAAI;QACrB,OAAO;IACX;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;IACA,YAAY;QACRD,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMK,yBAAgC;IACzC,MAAM;QACF,SAAS;QACT,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,OAAO;QACP,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,YAAYD,cAAc,UAAU;AACxC;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,MAAM;QACN,SAAS;QACT,OAAO;QACP,OAAO;QACP,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,UAAU;QACN,SAAS;YACL,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAS;gBAAU;aAAO;QAC/C;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}

package/Popover/index.js

@@ -1,4 +1,2 @@
 export * from "./Popover.js";
 export * from "./primitives/index.js";
-
-//# sourceMappingURL=index.js.map

package/Popover/primitives/PopoverPrimitive.js

@@ -1,11 +1,11 @@
-import { PopoverAnchor, PopoverArrow, PopoverContent, PopoverClose, PopoverRoot, PopoverTrigger } from "./components/index.js";
+import { PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger } from "./components/index.js";
 import { withStaticProps } from "../../utils.js";
 const PopoverPrimitive = withStaticProps(PopoverRoot, {
-  Anchor: PopoverAnchor,
-  Arrow: PopoverArrow,
-  Close: PopoverClose,
-  Content: PopoverContent,
-  Trigger: PopoverTrigger
+    Anchor: PopoverAnchor,
+    Arrow: PopoverArrow,
+    Close: PopoverClose,
+    Content: PopoverContent,
+    Trigger: PopoverTrigger
 });
 export { PopoverPrimitive };
 

package/Popover/primitives/PopoverPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["PopoverAnchor","PopoverArrow","PopoverContent","PopoverClose","PopoverRoot","PopoverTrigger","withStaticProps","PopoverPrimitive","Anchor","Arrow","Close","Content","Trigger"],"sources":["PopoverPrimitive.tsx"],"sourcesContent":["import {\n    PopoverAnchor,\n    PopoverArrow,\n    PopoverContent,\n    PopoverClose,\n    PopoverRoot,\n    PopoverTrigger,\n    type PopoverAnchorProps as PopoverPrimitiveAnchorProps,\n    type PopoverArrowProps as PopoverPrimitiveArrowProps,\n    type PopoverCloseProps as PopoverPrimitiveCloseProps,\n    type PopoverContentProps as PopoverPrimitiveContentProps,\n    type PopoverRootProps as PopoverPrimitiveProps,\n    type PopoverTriggerProps as PopoverPrimitiveTriggerProps\n} from \"./components/index.js\";\nimport { withStaticProps } from \"~/utils.js\";\n\nconst PopoverPrimitive = withStaticProps(PopoverRoot, {\n    Anchor: PopoverAnchor,\n    Arrow: PopoverArrow,\n    Close: PopoverClose,\n    Content: PopoverContent,\n    Trigger: PopoverTrigger\n});\n\nexport {\n    PopoverPrimitive,\n    type PopoverPrimitiveProps,\n    type PopoverPrimitiveAnchorProps,\n    type PopoverPrimitiveArrowProps,\n    type PopoverPrimitiveCloseProps,\n    type PopoverPrimitiveContentProps,\n    type PopoverPrimitiveTriggerProps\n};\n"],"mappings":"AAAA,SACIA,aAAa,EACbC,YAAY,EACZC,cAAc,EACdC,YAAY,EACZC,WAAW,EACXC,cAAc;AAQlB,SAASC,eAAe;AAExB,MAAMC,gBAAgB,GAAGD,eAAe,CAACF,WAAW,EAAE;EAClDI,MAAM,EAAER,aAAa;EACrBS,KAAK,EAAER,YAAY;EACnBS,KAAK,EAAEP,YAAY;EACnBQ,OAAO,EAAET,cAAc;EACvBU,OAAO,EAAEP;AACb,CAAC,CAAC;AAEF,SACIE,gBAAgB","ignoreList":[]}
+{"version":3,"file":"Popover/primitives/PopoverPrimitive.js","sources":["../../../src/Popover/primitives/PopoverPrimitive.tsx"],"sourcesContent":["import {\n    PopoverAnchor,\n    PopoverArrow,\n    PopoverContent,\n    PopoverClose,\n    PopoverRoot,\n    PopoverTrigger,\n    type PopoverAnchorProps as PopoverPrimitiveAnchorProps,\n    type PopoverArrowProps as PopoverPrimitiveArrowProps,\n    type PopoverCloseProps as PopoverPrimitiveCloseProps,\n    type PopoverContentProps as PopoverPrimitiveContentProps,\n    type PopoverRootProps as PopoverPrimitiveProps,\n    type PopoverTriggerProps as PopoverPrimitiveTriggerProps\n} from \"./components/index.js\";\nimport { withStaticProps } from \"~/utils.js\";\n\nconst PopoverPrimitive = withStaticProps(PopoverRoot, {\n    Anchor: PopoverAnchor,\n    Arrow: PopoverArrow,\n    Close: PopoverClose,\n    Content: PopoverContent,\n    Trigger: PopoverTrigger\n});\n\nexport {\n    PopoverPrimitive,\n    type PopoverPrimitiveProps,\n    type PopoverPrimitiveAnchorProps,\n    type PopoverPrimitiveArrowProps,\n    type PopoverPrimitiveCloseProps,\n    type PopoverPrimitiveContentProps,\n    type PopoverPrimitiveTriggerProps\n};\n"],"names":["PopoverPrimitive","withStaticProps","PopoverRoot","PopoverAnchor","PopoverArrow","PopoverClose","PopoverContent","PopoverTrigger"],"mappings":";;AAgBA,MAAMA,mBAAmBC,gBAAgBC,aAAa;IAClD,QAAQC;IACR,OAAOC;IACP,OAAOC;IACP,SAASC;IACT,SAASC;AACb"}

package/Popover/primitives/components/PopoverAnchor.js

@@ -1,12 +1,9 @@
-import React from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
-const PopoverAnchor = ({
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement(PopoverPrimitive.Anchor, Object.assign({
-    "data-slot": "popover-anchor"
-  }, props));
-};
+import react from "react";
+import { Popover } from "radix-ui";
+const PopoverAnchor = ({ ...props })=>/*#__PURE__*/ react.createElement(Popover.Anchor, {
+        "data-slot": "popover-anchor",
+        ...props
+    });
 export { PopoverAnchor };
 
 //# sourceMappingURL=PopoverAnchor.js.map

package/Popover/primitives/components/PopoverAnchor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Popover","PopoverPrimitive","PopoverAnchor","props","createElement","Anchor","Object","assign"],"sources":["PopoverAnchor.tsx"],"sourcesContent":["import React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\n\ntype PopoverAnchorProps = PopoverPrimitive.PopoverAnchorProps;\n\nconst PopoverAnchor = ({ ...props }: PopoverAnchorProps) => {\n    return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n};\n\nexport { PopoverAnchor, type PopoverAnchorProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,UAAU;AAItD,MAAMC,aAAa,GAAGA,CAAC;EAAE,GAAGC;AAA0B,CAAC,KAAK;EACxD,oBAAOJ,KAAA,CAAAK,aAAA,CAACH,gBAAgB,CAACI,MAAM,EAAAC,MAAA,CAAAC,MAAA;IAAC,aAAU;EAAgB,GAAKJ,KAAK,CAAG,CAAC;AAC5E,CAAC;AAED,SAASD,aAAa","ignoreList":[]}
+{"version":3,"file":"Popover/primitives/components/PopoverAnchor.js","sources":["../../../../src/Popover/primitives/components/PopoverAnchor.tsx"],"sourcesContent":["import React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\n\ntype PopoverAnchorProps = PopoverPrimitive.PopoverAnchorProps;\n\nconst PopoverAnchor = ({ ...props }: PopoverAnchorProps) => {\n    return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n};\n\nexport { PopoverAnchor, type PopoverAnchorProps };\n"],"names":["PopoverAnchor","props","PopoverPrimitive"],"mappings":";;AAKA,MAAMA,gBAAgB,CAAC,EAAE,GAAGC,OAA2B,GAC5C,WAAP,GAAO,oBAACC,QAAAA,MAAuB;QAAC,aAAU;QAAkB,GAAGD,KAAK"}