@parrot-co/parrot-ui 0.1.21 → 0.1.23

package/dist/main.js

@@ -29,6 +29,7 @@ $parcel$export(module.exports, "IconButton", () => $3af04cd154cf4de1$export$c25a
 $parcel$export(module.exports, "ButtonGroup", () => $7f70742e736041ff$export$69b1032f2ecdf404);
 $parcel$export(module.exports, "Checkbox", () => $f88e10ca2ba68239$export$48513f6b9f8ce62d);
 $parcel$export(module.exports, "CheckboxGroup", () => $0f8ef6f4acac1766$export$4aa08d5625cb8ead);
+$parcel$export(module.exports, "CheckboxItem", () => $c31ad898a2916b00$export$16ce288f89fa631c);
 $parcel$export(module.exports, "DropdownMenu", () => $3b903582a5253460$export$e44a253a59704894);
 $parcel$export(module.exports, "ComboBox", () => $d67a8dc6cbdaa7ed$export$72b9695b8216309a);
 $parcel$export(module.exports, "Radio", () => $e158c5cf7e190200$export$d7b12c4107be0d61);
@@ -494,9 +495,10 @@ $df66c26cdcece32b$export$faaf771f35016530.displayName = "GridItem";
 
 
 const $c3a954a7c0cb5109$export$21ee1313e2afe36c = (props, ref)=>{
-    const { justify: justify, align: align, direction: direction, gap: gap = "sm", columnGap: columnGap, rowGap: rowGap, inline: inline, wrap: wrap, stack: stack, className: className, ...otherProps } = props;
+    const { justify: justify, align: align, direction: direction, gap: gap = "sm", columnGap: columnGap, rowGap: rowGap, inline: inline, wrap: wrap, stack: stack, className: className, as: as, ...otherProps } = props;
     const flexDirection = stack ? "column" : direction ?? "row";
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $eb8f27c3596a0e6b$export$e71c4d32a2263218), {
+        as: as,
         className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, inline ? "display-inline-flex" : "display-flex", `flex-direction-${flexDirection}`, wrap && `flex-${wrap}`, justify && `flex-justify-${justify}`, align && `flex-align-${align}`, (0, $4af7da5c7dd0b9c2$export$2db1d02db18b2d82)("gap", gap), (0, $4af7da5c7dd0b9c2$export$2db1d02db18b2d82)("column-gap", columnGap), (0, $4af7da5c7dd0b9c2$export$2db1d02db18b2d82)("row-gap", rowGap)),
         // TODO - Fix types here - seems to work just fine though
         ref: ref,
@@ -655,6 +657,7 @@ function $f2fd0cbe11b7f0dd$export$d8964aec282183a3(props) {
         value: themeProps,
         children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
             id: "parrot-theme-provider",
+            "data-gray-variant": themeProps.grayVariant,
             "data-radius": themeProps.radius,
             "data-color": themeProps.color,
             "data-scaling": scaling,
@@ -700,6 +703,7 @@ function $ec2376a5dd0d13e6$export$a455218a85c89869({ label: label, description:
                 children: label
             }),
             !replaceDefaultControlWrapper && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+                align: "center",
                 className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(space.classNames, "p-input-control"),
                 "data-has-error": !!error,
                 "data-appearance": appearance,
@@ -813,14 +817,10 @@ $a28e128499dd0b02$export$3b0d6d7590275603.displayName = "Loader";
 
 
 function $ff6fce0e059b3a1a$export$30a06c8d3562193f(object, keys) {
+    const keySet = new Set(keys);
     return Object.keys(object).reduce((obj, key)=>{
-        if (keys.includes(key)) return {
-            ...obj
-        };
-        return {
-            ...obj,
-            [key]: object[key]
-        };
+        if (!keySet.has(key)) obj[key] = object[key];
+        return obj;
     }, {});
 }
 function $ff6fce0e059b3a1a$export$357523c63a2253b9(object, keys) {
@@ -1309,6 +1309,43 @@ $f88e10ca2ba68239$export$48513f6b9f8ce62d.displayName = "checkbox";
 
 
 
+function $c31ad898a2916b00$export$16ce288f89fa631c({ className: className, classNames: classNames, styles: styles, style: style, ...props }) {
+    const ctx = (0, ($parcel$interopDefault($8zHUo$react))).useContext((0, $0f8ef6f4acac1766$export$f9c6924e160136d1));
+    if (!ctx) throw new Error("CheckboxItem must be used within a CheckboxGroup");
+    const ref = (0, ($parcel$interopDefault($8zHUo$react))).useRef(null);
+    const { inputProps: inputProps } = (0, $8zHUo$reactaria.useCheckboxGroupItem)(props, ctx.state, ref);
+    const isSelected = ctx.state.isSelected(props.value);
+    const isDisabled = ctx.state.isDisabled || props.isDisabled;
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("label", {
+        style: {
+            ...style,
+            ...styles?.wrapper
+        },
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, "p-checkbox-item", classNames?.wrapper),
+        "data-disabled": isDisabled,
+        "data-checked": isSelected,
+        children: [
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $8zHUo$reactaria.VisuallyHidden), {
+                children: [
+                    " ",
+                    /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+                        type: "checkbox",
+                        ref: ref,
+                        ...inputProps
+                    })
+                ]
+            }),
+            props.children
+        ]
+    });
+}
+
+
+
+
+
+
+
 
 
 
@@ -1593,13 +1630,6 @@ const $3b903582a5253460$export$e44a253a59704894 = {
 
 
 
-
-
-
-
-
-
-
 
 
 
@@ -1817,107 +1847,75 @@ function $dcfc4542aa84c062$var$ListSection({ state: state, section: section }) {
 
 
 
-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)();
+
+function $d67a8dc6cbdaa7ed$export$72b9695b8216309a({ description: description, descriptionProps: descriptionProps, error: error, errorMessageProps: errorMessageProps, label: label, labelProps: labelProps, selectorIcon: selectorIcon, selectorSize: selectorSize = "sm", style: style, styles: styles, className: className, classNames: classNames, ...props }) {
     const { contains: contains } = (0, $8zHUo$reactaria.useFilter)({
         sensitivity: "base"
     });
+    const children = (0, $fc43ab93aaa777d9$export$4c687b6f1150e71b)(props);
     const state = (0, $8zHUo$reactstately.useComboBoxState)({
         ...props,
-        children: (0, $fc43ab93aaa777d9$export$3d7d0414f6db67e7)(props),
+        children: children,
         defaultFilter: contains
     });
-    const inputRef = $8zHUo$react.useRef(null);
     const buttonRef = $8zHUo$react.useRef(null);
+    const inputRef = $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,
+    const { inputProps: inputProps, buttonProps: buttonProps, listBoxProps: listBoxProps, labelProps: AriaLabelProps } = (0, $8zHUo$reactaria.useComboBox)({
         buttonRef: buttonRef,
+        inputRef: inputRef,
         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,
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $8zHUo$reactjsxruntime.Fragment), {
         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",
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $ec2376a5dd0d13e6$export$a455218a85c89869), {
+                styles: styles,
+                className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, "p-combo-box-field"),
+                classNames: classNames,
+                style: style,
+                wrapperRef: wrapperRef,
+                label: label,
+                labelProps: (0, $8zHUo$reactaria.mergeProps)(labelProps, AriaLabelProps),
+                description: description,
+                descriptionProps: descriptionProps,
+                error: error,
+                errorMessageProps: errorMessageProps,
                 children: [
-                    prepend,
                     /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
-                        className: "p-combo-box-input p-text-input-el",
-                        onChange: (e)=>inputProps.onChange?.(e),
+                        className: "p-text-input-el",
                         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"
+                        type: "text",
+                        ...inputProps
                     }),
-                    showDropdownButton && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
-                        ...buttonProps,
+                    /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
                         variant: "ghost",
                         color: "gray",
-                        radius: "lg",
-                        className: "p-combo-box-button",
-                        ref: buttonRef,
-                        children: resolvedDropdownArrow()
+                        size: selectorSize,
+                        ...buttonProps,
+                        children: selectorIcon
                     })
                 ]
             }),
-            error && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
-                children: error
-            }),
             state.isOpen && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $9a1eb1c261c8b852$export$91527519cfe8e396), {
-                popoverRef: popoverRef,
-                offset: 8,
-                state: state,
+                offset: 6,
                 triggerRef: wrapperRef,
+                state: state,
+                popoverRef: popoverRef,
+                isNonModal: true,
                 children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $dcfc4542aa84c062$export$41f133550aa26f48), {
-                    color: listBoxColor ?? theme?.color ?? "gray",
                     width: wrapperRef.current?.getBoundingClientRect().width,
+                    ...listBoxProps,
                     listBoxRef: listBoxRef,
-                    state: state,
-                    ...listBoxProps
+                    state: state
                 })
             })
         ]
     });
-};
-$d67a8dc6cbdaa7ed$export$acd2d351457d1d82.displayName = "ComboBox";
-const $d67a8dc6cbdaa7ed$export$72b9695b8216309a = /*#__PURE__*/ $8zHUo$react.forwardRef($d67a8dc6cbdaa7ed$export$acd2d351457d1d82);
+}