@parrot-co/parrot-ui 0.0.91 → 0.0.92

package/dist/main.js

@@ -26,6 +26,7 @@ $parcel$export(module.exports, "ButtonGroup", () => $7f70742e736041ff$export$69b
 $parcel$export(module.exports, "Checkbox", () => $f88e10ca2ba68239$export$48513f6b9f8ce62d);
 $parcel$export(module.exports, "CheckboxGroup", () => $0f8ef6f4acac1766$export$4aa08d5625cb8ead);
 $parcel$export(module.exports, "DropdownMenu", () => $3b903582a5253460$export$e44a253a59704894);
+$parcel$export(module.exports, "ComboBox", () => $d67a8dc6cbdaa7ed$export$72b9695b8216309a);
 $parcel$export(module.exports, "Radio", () => $e158c5cf7e190200$export$d7b12c4107be0d61);
 $parcel$export(module.exports, "RadioGroup", () => $e158c5cf7e190200$export$a98f0dcb43a68a25);
 $parcel$export(module.exports, "RadioCard", () => $71fcf48f7e2e9427$export$f8afaea2e9656b91);
@@ -1102,6 +1103,9 @@ function $724eace27ebf345b$var$MenuInner({ menuHeader: menuHeader, menuFooter: m
         "data-color": theme?.color ?? "violet",
         "data-radius": theme?.radius ?? "lg",
         className: "p-list-box-wrapper",
+        style: {
+            minWidth: `max(200px, ${`${props.minWidth}`.replace("px", "")}px)`
+        },
         children: [
             resolvedMenuHeader(),
             /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("ul", {
@@ -1187,92 +1191,13 @@ const $724eace27ebf345b$export$2ce376c2cc3355c8 = (0, $8zHUo$reactstately.Item);
 const $724eace27ebf345b$export$4b1545b4f2016d26 = (0, $8zHUo$reactstately.Section);
 
 
-(0, $724eace27ebf345b$export$e44a253a59704894).Menu = (0, $724eace27ebf345b$export$d9b273488cd8ce6f);
-(0, $724eace27ebf345b$export$e44a253a59704894).Trigger = (0, $724eace27ebf345b$export$e7eb525bc415b4b4);
-(0, $724eace27ebf345b$export$e44a253a59704894).Item = (0, $724eace27ebf345b$export$2ce376c2cc3355c8);
-(0, $724eace27ebf345b$export$e44a253a59704894).Section = (0, $724eace27ebf345b$export$4b1545b4f2016d26);
-const $3b903582a5253460$export$e44a253a59704894 = (0, $724eace27ebf345b$export$e44a253a59704894);
-
-
-
-
-
-
-
-
-
-
-
-const $e158c5cf7e190200$export$b118023277d4a5c3 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createContext(null);
-const $e158c5cf7e190200$export$d7b12c4107be0d61 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).forwardRef((props, ref)=>{
-    const state = (0, ($parcel$interopDefault($8zHUo$react))).useContext($e158c5cf7e190200$export$b118023277d4a5c3);
-    const { size: size = "sm", className: className, style: style, appearance: appearance, color: color, ...otherProps } = props;
-    if (!state) throw new Error("Radio must be used within a RadioGroup");
-    const inputRef = (0, ($parcel$interopDefault($8zHUo$react))).useRef(null);
-    const { inputProps: inputProps } = (0, $8zHUo$reactaria.useRadio)(otherProps, state, inputRef);
-    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("label", {
-        style: style,
-        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)([
-            className,
-            "p-radio"
-        ]),
-        ref: ref,
-        children: [
-            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactaria.VisuallyHidden), {
-                children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
-                    ...inputProps,
-                    ref: inputRef
-                })
-            }),
-            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
-                "data-color": color,
-                className: "p-fake-radio",
-                "data-appearance": appearance,
-                "data-checked": inputProps.checked,
-                "data-size": size
-            }),
-            props.children
-        ]
-    });
-});
-const $e158c5cf7e190200$export$a98f0dcb43a68a25 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).forwardRef(({ stack: stack = true, direction: direction, gap: gap = "xs", rowGap: rowGap, align: align, justify: justify, wrap: wrap, columnGap: columnGap, ...props }, ref)=>{
-    const { children: children, label: label, description: description, errorMessage: errorMessage } = props;
-    const state = (0, $8zHUo$reactstately.useRadioGroupState)(props);
-    const { radioGroupProps: radioGroupProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $8zHUo$reactaria.useRadioGroup)(props, state);
-    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
-        ref: ref,
-        stack: stack,
-        gap: gap,
-        direction: direction,
-        rowGap: rowGap,
-        columnGap: columnGap,
-        align: align,
-        justify: justify,
-        wrap: wrap,
-        ...radioGroupProps,
-        children: [
-            label && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $5a5b41d120374960$export$2e2bcd8739ae039), {
-                ...labelProps,
-                children: label
-            }),
-            description && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
-                variant: "light",
-                ...descriptionProps,
-                children: description
-            }),
-            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($e158c5cf7e190200$export$b118023277d4a5c3.Provider, {
-                value: state,
-                children: children
-            }),
-            errorMessage && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
-                ...errorMessageProps,
-                children: errorMessage
-            })
-        ]
-    });
-});
-$e158c5cf7e190200$export$a98f0dcb43a68a25.displayName = "RadioGroup";
-$e158c5cf7e190200$export$d7b12c4107be0d61.displayName = "Radio";
+const $3b903582a5253460$export$e44a253a59704894 = {
+    Root: (0, $724eace27ebf345b$export$e44a253a59704894),
+    Menu: $724eace27ebf345b$export$d9b273488cd8ce6f,
+    Trigger: (0, $724eace27ebf345b$export$e7eb525bc415b4b4),
+    Item: (0, $724eace27ebf345b$export$2ce376c2cc3355c8),
+    Section: (0, $724eace27ebf345b$export$4b1545b4f2016d26)
+};
 
 
 
@@ -1281,59 +1206,6 @@ $e158c5cf7e190200$export$d7b12c4107be0d61.displayName = "Radio";
 
 
 
-const $71fcf48f7e2e9427$export$f8afaea2e9656b91 = /*#__PURE__*/ $8zHUo$react.forwardRef(({ title: title, description: description, children: children, appearance: appearance, showIndicator: showIndicator = true, color: color, ...props }, ref)=>{
-    const state = $8zHUo$react.useContext((0, $e158c5cf7e190200$export$b118023277d4a5c3));
-    if (!state) throw new Error("RadioCard must be used within a RadioGroup");
-    const inputRef = $8zHUo$react.useRef(null);
-    const { inputProps: inputProps } = (0, $8zHUo$reactaria.useRadio)(props, state, inputRef);
-    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("label", {
-        "data-radius": "lg",
-        className: "p-radio-card",
-        "data-color": color,
-        "data-appearance": appearance,
-        "data-checked": inputProps.checked,
-        ref: ref,
-        children: [
-            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactaria.VisuallyHidden), {
-                children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
-                    ...inputProps,
-                    ref: inputRef
-                })
-            }),
-            showIndicator && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
-                className: "p-fake-radio",
-                "data-size": "sm",
-                "data-checked": inputProps.checked
-            }),
-            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
-                stack: true,
-                gap: "xs",
-                children: [
-                    (title || description) && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
-                        gap: "4xs",
-                        stack: true,
-                        children: [
-                            title && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
-                                color: color,
-                                size: "sm",
-                                children: title
-                            }),
-                            description && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
-                                color: color,
-                                lineHeight: "tall",
-                                size: "xs",
-                                variant: "lighter",
-                                children: description
-                            })
-                        ]
-                    }),
-                    children
-                ]
-            })
-        ]
-    });
-});
-$71fcf48f7e2e9427$export$f8afaea2e9656b91.displayName = "RadioCard";
 
 
 
@@ -1541,6 +1413,261 @@ const $dcfc4542aa84c062$export$6e2c8f0811a474ce = (0, $8zHUo$reactstately.Sectio
 
 
 
+const $d67a8dc6cbdaa7ed$export$acd2d351457d1d82 = ({ label: label, error: error, showDropdownButton: showDropdownButton = true, dropdownArrow: dropdownArrow = /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiSelector), {
+    size: 18
+}), className: className, style: style, color: color = "gray", radius: radius, size: size = "md", appearance: appearance = "outline", listBoxColor: listBoxColor, append: append, prepend: prepend, isLoading: isLoading, ...props }, ref)=>{
+    const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
+    const { contains: contains } = (0, $8zHUo$reactaria.useFilter)({
+        sensitivity: "base"
+    });
+    const state = (0, $8zHUo$reactstately.useComboBoxState)({
+        ...props,
+        children: (0, $fc43ab93aaa777d9$export$3d7d0414f6db67e7)(props),
+        defaultFilter: contains
+    });
+    const inputRef = $8zHUo$react.useRef(null);
+    const buttonRef = $8zHUo$react.useRef(null);
+    const listBoxRef = $8zHUo$react.useRef(null);
+    const popoverRef = $8zHUo$react.useRef(null);
+    const wrapperRef = $8zHUo$react.useRef(null);
+    const { inputProps: inputProps, buttonProps: buttonProps, listBoxProps: listBoxProps } = (0, $8zHUo$reactaria.useComboBox)({
+        inputRef: inputRef,
+        buttonRef: buttonRef,
+        listBoxRef: listBoxRef,
+        popoverRef: popoverRef,
+        ...props
+    }, state);
+    function resolvedDropdownArrow() {
+        if (typeof dropdownArrow === "function") return dropdownArrow({
+            color: "gray",
+            size: "md"
+        });
+        return dropdownArrow;
+    }
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+        "data-color": color ?? theme?.color ?? "gray",
+        "data-size": size,
+        "data-radius": radius ?? theme?.radius ?? "lg",
+        style: style,
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-combo-box p-input-group", className),
+        ref: ref,
+        stack: true,
+        gap: "3xs",
+        stretchX: true,
+        children: [
+            label && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $5a5b41d120374960$export$2e2bcd8739ae039), {
+                children: label
+            }),
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+                position: "relative",
+                gap: "3xs",
+                ref: wrapperRef,
+                align: "center",
+                "data-appearance": appearance,
+                className: "p-input-control p-combo-box-control",
+                children: [
+                    prepend,
+                    /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+                        className: "p-combo-box-input p-text-input-el",
+                        onChange: (e)=>inputProps.onChange?.(e),
+                        ref: inputRef,
+                        "data-has-prepend": !!prepend,
+                        "data-size": "md",
+                        ...(0, $ff6fce0e059b3a1a$export$30a06c8d3562193f)(inputProps, [
+                            "size",
+                            "onChange"
+                        ])
+                    }),
+                    append,
+                    isLoading && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $a28e128499dd0b02$export$3b0d6d7590275603), {
+                        size: "xs"
+                    }),
+                    showDropdownButton && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
+                        ...buttonProps,
+                        variant: "ghost",
+                        color: "gray",
+                        radius: "lg",
+                        className: "p-combo-box-button",
+                        ref: buttonRef,
+                        children: resolvedDropdownArrow()
+                    })
+                ]
+            }),
+            error && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
+                children: error
+            }),
+            state.isOpen && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $0f347092d3465402$export$5b6b19405a83ff9d), {
+                popoverRef: popoverRef,
+                offset: 8,
+                state: state,
+                triggerRef: wrapperRef,
+                children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $dcfc4542aa84c062$export$41f133550aa26f48), {
+                    color: listBoxColor ?? theme?.color ?? "gray",
+                    width: wrapperRef.current?.getBoundingClientRect().width,
+                    listBoxRef: listBoxRef,
+                    state: state,
+                    ...listBoxProps
+                })
+            })
+        ]
+    });
+};
+$d67a8dc6cbdaa7ed$export$acd2d351457d1d82.displayName = "ComboBox";
+const $d67a8dc6cbdaa7ed$export$72b9695b8216309a = /*#__PURE__*/ $8zHUo$react.forwardRef($d67a8dc6cbdaa7ed$export$acd2d351457d1d82);
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $e158c5cf7e190200$export$b118023277d4a5c3 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createContext(null);
+const $e158c5cf7e190200$export$d7b12c4107be0d61 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).forwardRef((props, ref)=>{
+    const state = (0, ($parcel$interopDefault($8zHUo$react))).useContext($e158c5cf7e190200$export$b118023277d4a5c3);
+    const { size: size = "sm", className: className, style: style, appearance: appearance, color: color, ...otherProps } = props;
+    if (!state) throw new Error("Radio must be used within a RadioGroup");
+    const inputRef = (0, ($parcel$interopDefault($8zHUo$react))).useRef(null);
+    const { inputProps: inputProps } = (0, $8zHUo$reactaria.useRadio)(otherProps, state, inputRef);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("label", {
+        style: style,
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)([
+            className,
+            "p-radio"
+        ]),
+        ref: ref,
+        children: [
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactaria.VisuallyHidden), {
+                children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+                    ...inputProps,
+                    ref: inputRef
+                })
+            }),
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+                "data-color": color,
+                className: "p-fake-radio",
+                "data-appearance": appearance,
+                "data-checked": inputProps.checked,
+                "data-size": size
+            }),
+            props.children
+        ]
+    });
+});
+const $e158c5cf7e190200$export$a98f0dcb43a68a25 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).forwardRef(({ stack: stack = true, direction: direction, gap: gap = "xs", rowGap: rowGap, align: align, justify: justify, wrap: wrap, columnGap: columnGap, ...props }, ref)=>{
+    const { children: children, label: label, description: description, errorMessage: errorMessage } = props;
+    const state = (0, $8zHUo$reactstately.useRadioGroupState)(props);
+    const { radioGroupProps: radioGroupProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $8zHUo$reactaria.useRadioGroup)(props, state);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+        ref: ref,
+        stack: stack,
+        gap: gap,
+        direction: direction,
+        rowGap: rowGap,
+        columnGap: columnGap,
+        align: align,
+        justify: justify,
+        wrap: wrap,
+        ...radioGroupProps,
+        children: [
+            label && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $5a5b41d120374960$export$2e2bcd8739ae039), {
+                ...labelProps,
+                children: label
+            }),
+            description && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
+                variant: "light",
+                ...descriptionProps,
+                children: description
+            }),
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($e158c5cf7e190200$export$b118023277d4a5c3.Provider, {
+                value: state,
+                children: children
+            }),
+            errorMessage && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
+                ...errorMessageProps,
+                children: errorMessage
+            })
+        ]
+    });
+});
+$e158c5cf7e190200$export$a98f0dcb43a68a25.displayName = "RadioGroup";
+$e158c5cf7e190200$export$d7b12c4107be0d61.displayName = "Radio";
+
+
+
+
+
+
+
+
+const $71fcf48f7e2e9427$export$f8afaea2e9656b91 = /*#__PURE__*/ $8zHUo$react.forwardRef(({ title: title, description: description, children: children, appearance: appearance, showIndicator: showIndicator = true, color: color, ...props }, ref)=>{
+    const state = $8zHUo$react.useContext((0, $e158c5cf7e190200$export$b118023277d4a5c3));
+    if (!state) throw new Error("RadioCard must be used within a RadioGroup");
+    const inputRef = $8zHUo$react.useRef(null);
+    const { inputProps: inputProps } = (0, $8zHUo$reactaria.useRadio)(props, state, inputRef);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("label", {
+        "data-radius": "lg",
+        className: "p-radio-card",
+        "data-color": color,
+        "data-appearance": appearance,
+        "data-checked": inputProps.checked,
+        ref: ref,
+        children: [
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactaria.VisuallyHidden), {
+                children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+                    ...inputProps,
+                    ref: inputRef
+                })
+            }),
+            showIndicator && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+                className: "p-fake-radio",
+                "data-size": "sm",
+                "data-checked": inputProps.checked
+            }),
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+                stack: true,
+                gap: "xs",
+                children: [
+                    (title || description) && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+                        gap: "4xs",
+                        stack: true,
+                        children: [
+                            title && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
+                                color: color,
+                                size: "sm",
+                                children: title
+                            }),
+                            description && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
+                                color: color,
+                                lineHeight: "tall",
+                                size: "xs",
+                                variant: "lighter",
+                                children: description
+                            })
+                        ]
+                    }),
+                    children
+                ]
+            })
+        ]
+    });
+});
+$71fcf48f7e2e9427$export$f8afaea2e9656b91.displayName = "RadioCard";
+
+
+
+
+
+
+
+
+
+