@parrot-co/parrot-ui 0.0.84 → 0.0.85

package/dist/main.js

@@ -205,15 +205,16 @@ $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011.displayName = "Flex";
 
 
 const $c46ecb47aa6f4da1$export$5f1af8db9871e1d6 = (props)=>{
-    const { size: size , weight: weight , color: color = "gray" , variant: variant = "default" , highlight: highlight , align: align , lineHeight: lineHeight , underline: underline , italic: italic , as: Tag = "span" , textRef: textRef , className: className , ...rest } = props;
-    return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)(Tag, {
+    const { textCase: textCase , size: size , weight: weight , color: color = "gray" , variant: variant = "default" , highlight: highlight , align: align , lineHeight: lineHeight , underline: underline , italic: italic , as: Comp = "span" , textRef: textRef , className: className , ...rest } = props;
+    return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)(Comp, {
         className: (0, $5d3f3512fadee416$export$a274e22fb40f762e)({
             [`text-highlight`]: !!highlight,
             "p-text": true,
             [`text-size-${size}`]: !!size,
             [`text-weight-${weight}`]: !!weight,
-            [`text-alight-${align}`]: !!align,
+            [`text-align-${align}`]: !!align,
             [`text-line-height-${lineHeight}`]: !!lineHeight,
+            [`text-transform-${textCase}`]: !!textCase,
             [`${className}`]: !!className
         }),
         "data-underline": underline,
@@ -608,7 +609,8 @@ const $50596a59d1a82779$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$int
             prepend,
             /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)("span", {
                 style: {
-                    padding: isIconButton ? undefined : "0 6px"
+                    padding: isIconButton ? undefined : "0 6px",
+                    lineHeight: 0
                 },
                 children: children
             }),
@@ -889,12 +891,12 @@ const $8e816824e7d3bbe8$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, ($parcel$int
                 className: "fake-checkbox",
                 "data-focused": isFocusVisible,
                 "aria-hidden": "true",
-                "data-checked": isSelected,
+                "data-checked": isSelected && !props.isIndeterminate,
                 "data-indeterminate": props.isIndeterminate,
                 "data-size": resolvedSize,
                 "data-appearance": resolvedAppearance,
                 children: [
-                    isSelected && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)("svg", {
+                    isSelected && !props.isIndeterminate && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)("svg", {
                         stroke: "white",
                         width: "0.75rem",
                         height: "0.75rem",
@@ -912,7 +914,7 @@ const $8e816824e7d3bbe8$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, ($parcel$int
                     }),
                     props.isIndeterminate && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $f9c6775c22423d58$export$e71c4d32a2263218), {
                         style: {
-                            background: "$gray11",
+                            background: "var(--color-12)",
                             width: "70%",
                             height: 2,
                             borderRadius: 4
@@ -1103,7 +1105,26 @@ function $d14b866db34f150f$export$3d7d0414f6db67e7({ children: children , render
 
 
 
-function $895088a96d07d13e$export$41f133550aa26f48({ state: state , color: color , width: width = 300 , ...props }) {
+
+
+
+const $7815c8512dae20d4$var$ListBoxContext = /*#__PURE__*/ $4Lhmj$react.createContext(null);
+function $7815c8512dae20d4$export$1e60abce570c2b01(props) {
+    return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)($7815c8512dae20d4$var$ListBoxContext.Provider, {
+        value: {
+            props: props
+        },
+        children: props.children
+    });
+}
+function $7815c8512dae20d4$export$961f16f221737ce2() {
+    const context = $4Lhmj$react.useContext($7815c8512dae20d4$var$ListBoxContext);
+    if (!context) throw new Error("ListBox components must be rendered within the ListBoxProvider");
+    return context;
+}
+
+
+function $895088a96d07d13e$export$41f133550aa26f48({ state: state , color: color , width: width = 300 , showSelectedMarker: showSelectedMarker = true , ...props }) {
     const internalState = (0, $4Lhmj$reactstately.useListState)({
         ...props,
         children: (0, $d14b866db34f150f$export$3d7d0414f6db67e7)(props)
@@ -1114,23 +1135,18 @@ function $895088a96d07d13e$export$41f133550aa26f48({ state: state , color: color
     const options = [
         ...listState.collection
     ];
-    return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)((0, $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011), {
-        "data-color": color,
-        style: {
-            width: width,
-            minWidth: 300
-        },
-        stack: true,
-        gap: "md",
-        children: [
-            props.label && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $c46ecb47aa6f4da1$export$5f1af8db9871e1d6), {
-                size: "sm",
-                variant: "light",
-                as: "div",
-                ...labelProps,
-                children: props.label
-            }),
-            /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)((0, $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011), {
+    return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $7815c8512dae20d4$export$1e60abce570c2b01), {
+        ...props,
+        showSelectedMarker: showSelectedMarker,
+        children: /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011), {
+            "data-color": color,
+            style: {
+                width: width,
+                minWidth: 300
+            },
+            stack: true,
+            gap: "md",
+            children: /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)((0, $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011), {
                 as: "ul",
                 stack: true,
                 gap: "none",
@@ -1162,7 +1178,7 @@ function $895088a96d07d13e$export$41f133550aa26f48({ state: state , color: color
                     })
                 ]
             })
-        ]
+        })
     });
 }
 function $895088a96d07d13e$var$ListOption({ state: state , item: item  }) {
@@ -1170,7 +1186,8 @@ function $895088a96d07d13e$var$ListOption({ state: state , item: item  }) {
     const { optionProps: optionProps , isDisabled: isDisabled , isFocusVisible: isFocusVisible , isFocused: isFocused , isPressed: isPressed , isSelected: isSelected  } = (0, $4Lhmj$reactaria.useOption)({
         key: item.key
     }, state, optionRef);
-    return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)("li", {
+    const listBoxContext = (0, $7815c8512dae20d4$export$961f16f221737ce2)();
+    return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)("li", {
         className: "list-option",
         "data-disabled": isDisabled,
         "data-focus-visible": isFocusVisible,
@@ -1182,7 +1199,12 @@ function $895088a96d07d13e$var$ListOption({ state: state , item: item  }) {
             "textValue"
         ]),
         ref: optionRef,
-        children: item.rendered
+        children: [
+            item.rendered,
+            isSelected && listBoxContext.props.showSelectedMarker && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $4Lhmj$reacticonshi.HiCheck), {
+                className: "selected-marker"
+            })
+        ]
     });
 }
 function $895088a96d07d13e$var$ListSection({ state: state , section: section  }) {
@@ -1190,40 +1212,50 @@ function $895088a96d07d13e$var$ListSection({ state: state , section: section  })
         heading: section?.rendered,
         "aria-label": section["aria-label"]
     });
+    const listBoxContext = (0, $7815c8512dae20d4$export$961f16f221737ce2)();
     function getChildren() {
         if (state.collection.getChildren) return [
             ...state.collection.getChildren(section.key)
         ];
         return [];
     }
-    return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011), {
+    return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)((0, $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011), {
         gap: "sm",
         stack: true,
         className: "list-section",
-        children: /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)((0, $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011), {
-            gap: "sm",
-            stack: true,
-            as: "li",
-            ...itemProps,
-            children: [
-                section.rendered && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $c46ecb47aa6f4da1$export$5f1af8db9871e1d6), {
-                    size: "sm",
-                    as: "div",
-                    variant: "light",
-                    ...headingProps,
-                    children: section.rendered
-                }),
-                /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)("ul", {
-                    ...groupProps,
-                    children: getChildren().map((node)=>{
-                        return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)($895088a96d07d13e$var$ListOption, {
-                            item: node,
-                            state: state
-                        }, node.key);
+        children: [
+            section.key !== state.collection.getFirstKey() && listBoxContext.props.showSeparator && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)("li", {
+                className: "list-separator"
+            }),
+            /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)((0, $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011), {
+                gap: "none",
+                stack: true,
+                as: "li",
+                ...itemProps,
+                children: [
+                    section.rendered && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)("div", {
+                        className: "list-section-header",
+                        children: /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $c46ecb47aa6f4da1$export$5f1af8db9871e1d6), {
+                            weight: "regular",
+                            size: "xs",
+                            as: "div",
+                            variant: "light",
+                            ...headingProps,
+                            children: section.rendered
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)("ul", {
+                        ...groupProps,
+                        children: getChildren().map((node)=>{
+                            return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)($895088a96d07d13e$var$ListOption, {
+                                item: node,
+                                state: state
+                            }, node.key);
+                        })
                     })
-                })
-            ]
-        })
+                ]
+            })
+        ]
     });
 }
 const $895088a96d07d13e$export$36d18380658d5d20 = (0, $4Lhmj$reactstately.Item);
@@ -1361,16 +1393,39 @@ function $8c3b8477473df88b$export$5b6b19405a83ff9d({ state: state , children: ch
 
 
 
-function $d9e1022f7af5df7f$export$ef9b1a59e592288f({ label: label , selectionMode: selectionMode = "single" , appearance: appearance = "outline" , append: append , prepend: prepend , renderValue: renderValue , color: color = "gray" , error: error , description: description , size: size = "sm" , shape: shape = "rounded" , listBoxColor: listBoxColor , className: className , ...props }) {
+
+function $d9e1022f7af5df7f$export$ef9b1a59e592288f({ label: label , selectionMode: selectionMode = "single" , appearance: appearance = "outline" , append: append , prepend: prepend , renderValue: renderValue , color: color = "gray" , error: error , description: description , size: size = "sm" , shape: shape = "rounded" , listBoxColor: listBoxColor , className: className , value: value , defaultValue: defaultValue , onChange: onChange , ...props }) {
+    const isMultiple = selectionMode === "multiple";
+    function getValue(value) {
+        if (!value) return null;
+        if (selectionMode === "single") return [
+            value
+        ];
+        if (isMultiple && !(0, $8dceeba61e72d053$export$43bee75e5e14138e)(value)) throw new Error("Select: value must be an array when selectionMode is multiple");
+        return value;
+    }
+    function onSelectionChange(selectedKeys) {
+        onChange?.({
+            target: {
+                value: isMultiple ? selectedKeys : selectedKeys[0],
+                name: props.name
+            }
+        });
+    }
     const space = (0, $951f2dc4112308d0$export$450c36e0b0e62ccd)();
     const [isFocused, setIsFocused] = $4Lhmj$react.useState(false);
     const triggerState = (0, $4Lhmj$reactstately.useMenuTriggerState)({});
     const listState = (0, $4Lhmj$reactstately.useListState)({
         ...props,
+        selectedKeys: getValue(value),
+        defaultSelectedKeys: getValue(defaultValue),
         selectionMode: selectionMode,
         children: (0, $d14b866db34f150f$export$3d7d0414f6db67e7)(props),
-        onSelectionChange () {
-            if (selectionMode === "single") triggerState.close();
+        onSelectionChange (keys) {
+            onSelectionChange([
+                ...keys
+            ]);
+            if (!isMultiple) triggerState.close();
         }
     });
     const triggerRef = $4Lhmj$react.useRef(null);
@@ -1381,7 +1436,6 @@ function $d9e1022f7af5df7f$export$ef9b1a59e592288f({ label: label , selectionMod
         isDisabled: false
     }, triggerState, triggerRef);
     const { pressProps: triggerProps  } = (0, $4Lhmj$reactaria.usePress)(menuTriggerProps);
-    const isMultiple = selectionMode === "multiple";
     const selectedItems = [
         ...listState.selectionManager.selectedKeys
     ].map((item)=>listState.collection.getItem(item));
@@ -1480,8 +1534,11 @@ function $d9e1022f7af5df7f$export$ef9b1a59e592288f({ label: label , selectionMod
                 triggerRef: triggerRef,
                 state: triggerState,
                 children: /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $895088a96d07d13e$export$41f133550aa26f48), {
+                    label: label,
+                    showSeparator: props.showSeparator,
+                    showSelectedMarker: props.showSelectedMarker,
                     width: triggerRef.current?.getBoundingClientRect().width,
-                    color: listBoxColor ?? color,
+                    color: listBoxColor ?? "gray",
                     shouldFocusOnHover: true,
                     state: listState,
                     ...props
@@ -2647,10 +2704,14 @@ function $3dc285189c5cc5d1$export$e6a97ba2cae5bb94({ items: items , render: rend
 
 
 
+
 function $61ad51d3c2a11900$export$c6fdb837b070b4ff({ state: state , children: children , ...props }) {
     const modalRef = $4Lhmj$react.useRef(null);
     const { modalProps: modalProps , underlayProps: underlayProps  } = (0, $4Lhmj$reactaria.useModalOverlay)(props, state, modalRef);
     if (!state.isOpen) return null;
+    // bring back aria-overlay when you find a way for theme provider to affect
+    // portalled elements
+    // aria-overlay handles the focus trap
     return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)("div", {
         className: "modal-underlay parrot-theme",
         ...underlayProps,
@@ -2662,10 +2723,11 @@ function $61ad51d3c2a11900$export$c6fdb837b070b4ff({ state: state , children: ch
         })
     });
 }
-function $61ad51d3c2a11900$var$Dialog({ width: width = 400 , title: title , onCancel: onCancel , onConfirm: onConfirm , confirmLabel: confirmLabel = "Confirm" , cancelLabel: cancelLabel = "Cancel" , description: description , children: children , state: state , confirmButtonProps: confirmButtonProps , cancelButtonProps: cancelButtonProps , variant: variant = "modal"  }) {
+function $61ad51d3c2a11900$var$Dialog({ width: width = 400 , title: title , onCancel: onCancel , onConfirm: onConfirm , confirmLabel: confirmLabel = "Confirm" , cancelLabel: cancelLabel = "Cancel" , description: description , children: children , state: state , confirmButtonProps: confirmButtonProps , cancelButtonProps: cancelButtonProps , variant: variant = "modal" , showCloseButton: showCloseButton = true , ...props }) {
     const dialogRef = $4Lhmj$react.useRef(null);
     const { dialogProps: dialogProps , titleProps: titleProps  } = (0, $4Lhmj$reactaria.useDialog)({
-        role: "alertdialog"
+        role: "dialog",
+        ...props
     }, dialogRef);
     return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)("div", {
         className: "modal-content",
@@ -2680,24 +2742,38 @@ function $61ad51d3c2a11900$var$Dialog({ width: width = 400 , title: title , onCa
                 stack: true,
                 children: [
                     /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)((0, $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011), {
-                        stack: true,
-                        gap: "3xs",
+                        justify: "space-between",
+                        gap: "2xl",
                         className: "modal-head",
                         children: [
-                            title && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $c46ecb47aa6f4da1$export$5f1af8db9871e1d6), {
-                                weight: "medium",
-                                size: "md",
-                                color: "gray",
-                                ...titleProps,
-                                as: "div",
-                                children: title
+                            /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)((0, $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011), {
+                                stack: true,
+                                gap: "3xs",
+                                children: [
+                                    title && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $c46ecb47aa6f4da1$export$5f1af8db9871e1d6), {
+                                        weight: "medium",
+                                        size: "md",
+                                        color: "gray",
+                                        ...titleProps,
+                                        as: "div",
+                                        children: title
+                                    }),
+                                    description && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $c46ecb47aa6f4da1$export$5f1af8db9871e1d6), {
+                                        lineHeight: "base",
+                                        size: "xs",
+                                        variant: "light",
+                                        as: "div",
+                                        children: description
+                                    })
+                                ]
                             }),
-                            description && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $c46ecb47aa6f4da1$export$5f1af8db9871e1d6), {
-                                lineHeight: "base",
-                                size: "xs",
-                                variant: "light",
-                                as: "div",
-                                children: description
+                            props.isDismissable && showCloseButton && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $b3fe2d8492eca72c$export$c25acd513dcc8062), {
+                                onPress: state.close,
+                                variant: "ghost",
+                                size: "sm",
+                                children: /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $4Lhmj$reacticonshi.HiX), {
+                                    size: 18
+                                })
                             })
                         ]
                     }),
@@ -2714,10 +2790,10 @@ function $61ad51d3c2a11900$var$Dialog({ width: width = 400 , title: title , onCa
                 stretchX: true,
                 children: [
                     onCancel && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $50596a59d1a82779$export$353f5b6fc5456de1), {
-                        ...cancelButtonProps,
                         onPress: state.close,
                         variant: "outline",
                         color: "gray",
+                        ...cancelButtonProps,
                         children: cancelLabel
                     }),
                     onConfirm && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $50596a59d1a82779$export$353f5b6fc5456de1), {