@parrot-co/parrot-ui 0.1.1 → 0.1.3

package/dist/main.js

@@ -54,6 +54,8 @@ $parcel$export(module.exports, "Modal", () => $1278141024f0bc4d$export$2b77a92f1
 $parcel$export(module.exports, "useModal", () => $1278141024f0bc4d$export$33ffd74ebf07f060);
 $parcel$export(module.exports, "Space", () => $eae337549f49a5a2$export$eef1e68107c58ef2);
 $parcel$export(module.exports, "TagInput", () => $0cdc620c9e9fb79f$export$39299b56cfd4e361);
+$parcel$export(module.exports, "TagGroup", () => $d26053f02b9f370b$export$67ea30858aaf75e3);
+$parcel$export(module.exports, "TagGroupItem", () => $d26053f02b9f370b$export$a79147a60006308c);
 $parcel$export(module.exports, "ThemeProvider", () => $f2fd0cbe11b7f0dd$export$d8964aec282183a3);
 $parcel$export(module.exports, "useTheme", () => $f2fd0cbe11b7f0dd$export$93d4e7f90805808f);
 
@@ -496,6 +498,11 @@ const $d9ffc65197682590$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$int
                     })
                 ]
             }),
+            error && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
+                validationStatus: validationStatus,
+                ...errorMessageProps,
+                children: error
+            }),
             description && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
                 as: "div",
                 variant: "light",
@@ -504,11 +511,6 @@ const $d9ffc65197682590$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$int
                 lineHeight: "base",
                 ...descriptionProps,
                 children: description
-            }),
-            error && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
-                validationStatus: validationStatus,
-                ...errorMessageProps,
-                children: error
             })
         ]
     });
@@ -673,6 +675,7 @@ const $5a6f28f3fd58ff6e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$int
     const Comp = as;
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)(Comp, {
         style: style,
+        "data-is-toggle": isToggle,
         "data-pressed": isPressed,
         "data-radius": radius,
         "data-icon-button": isIconButton,
@@ -880,6 +883,10 @@ const $491b98ef80f40f98$export$379139ebc1c2b235 = /*#__PURE__*/ (0, ($parcel$int
                 "data-appearance": appearance,
                 ...inputProps
             }),
+            error && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
+                ...errorMessageProps,
+                children: error
+            }),
             description && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
                 lineHeight: "base",
                 ...descriptionProps,
@@ -887,10 +894,6 @@ const $491b98ef80f40f98$export$379139ebc1c2b235 = /*#__PURE__*/ (0, ($parcel$int
                 as: "div",
                 size: "sm",
                 children: description
-            }),
-            error && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
-                ...errorMessageProps,
-                children: error
             })
         ]
     });
@@ -2860,7 +2863,7 @@ function $43de550aebbf1320$export$50e381fea3a45244(props) {
 
 
 
-const $fedef2bba4e6812a$export$ea98c603db73aee7 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).forwardRef(({ variant: variant = "outline", color: color = "violet", padded: padded = true, gap: gap = "sm", radius: radius, ...props }, ref)=>{
+const $fedef2bba4e6812a$export$ea98c603db73aee7 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).forwardRef(({ variant: variant = "outline", color: color = "violet", padded: padded = true, gap: gap = "sm", radius: radius, children: children, ...props }, ref)=>{
     const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
         "data-radius": radius ?? theme?.radius ?? "lg",
@@ -2872,7 +2875,8 @@ const $fedef2bba4e6812a$export$ea98c603db73aee7 = /*#__PURE__*/ (0, ($parcel$int
         "data-color": color,
         ref: ref,
         gap: gap,
-        ...props
+        ...props,
+        children: children
     });
 });
 $fedef2bba4e6812a$export$ea98c603db73aee7.displayName = "Sticker";
@@ -3008,11 +3012,14 @@ function $1278141024f0bc4d$var$Dialog({ width: width = 400, title: title, onCanc
                             })
                         ]
                     }),
-                    props.isDismissable && showCloseButton && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
+                    props.isDismissable && showCloseButton && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("button", {
                         color: "gray",
-                        onPress: handleClose,
-                        variant: "ghost",
-                        size: "sm",
+                        onClick: handleClose,
+                        "data-variant": "ghost",
+                        "data-color": "gray",
+                        className: "p-button size-sm",
+                        "data-radius": "full",
+                        "data-icon-button": true,
                         children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiX), {
                             size: 18
                         })
@@ -3254,4 +3261,109 @@ function $0cdc620c9e9fb79f$export$39299b56cfd4e361({ appearance: appearance = "o
 
 
 
+
+
+
+
+
+
+
+
+function $d26053f02b9f370b$var$Tag(props) {
+    const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
+    const { activeColor: activeColor = theme?.color ?? "gray", activeVariant: activeVariant = "solid", idleColor: idleColor = "gray", idleVariant: idleVariant = "outline", item: item, state: state, autoColor: autoColor } = props;
+    const tagRef = $8zHUo$react.useRef(null);
+    const { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $8zHUo$reactaria.useFocusRing)({
+        within: true
+    });
+    const { rowProps: rowProps, gridCellProps: gridCellProps, isSelected: isSelected } = (0, $8zHUo$reactaria.useTag)(props, state, tagRef);
+    const colors = $8zHUo$react.useMemo(()=>{
+        if (autoColor) {
+            const color = (0, $4af7da5c7dd0b9c2$export$e4369cabd7e84cd9)(item.textValue);
+            return {
+                active: color,
+                idle: color
+            };
+        }
+        return {
+            active: activeColor,
+            idle: idleColor
+        };
+    }, [
+        activeColor,
+        idleColor,
+        autoColor
+    ]);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+        ref: tagRef,
+        ...rowProps,
+        ...focusProps,
+        "data-focus-visible": isFocusVisible,
+        "data-is-toggle": true,
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-button", "size-sm"),
+        "data-variant": isSelected ? activeVariant : idleVariant,
+        "data-radius": "full",
+        "data-color": isSelected ? colors.active : colors.idle,
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+            ...gridCellProps,
+            children: item.rendered
+        })
+    });
+}
+function $d26053f02b9f370b$export$67ea30858aaf75e3({ wrap: wrap = "wrap", gap: gap, columnGap: columnGap, rowGap: rowGap, align: align, justify: justify, activeColor: activeColor, activeVariant: activeVariant, idleColor: idleColor, idleVariant: idleVariant, autoColor: autoColor, ...props }) {
+    const { label: label, description: description, errorMessage: errorMessage } = props;
+    const tagGroupRef = $8zHUo$react.useRef(null);
+    const state = (0, $8zHUo$reactstately.useListState)(props);
+    const { gridProps: gridProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $8zHUo$reactaria.useTagGroup)(props, state, tagGroupRef);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+        stack: true,
+        className: "tag-group",
+        children: [
+            label && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $5a5b41d120374960$export$2e2bcd8739ae039), {
+                ...labelProps,
+                children: label
+            }),
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+                wrap: wrap,
+                gap: gap,
+                columnGap: columnGap,
+                rowGap: rowGap,
+                align: align,
+                justify: justify,
+                ref: tagGroupRef,
+                ...gridProps,
+                children: [
+                    ...state.collection
+                ].map((item)=>{
+                    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($d26053f02b9f370b$var$Tag, {
+                        autoColor: autoColor,
+                        activeColor: activeColor,
+                        activeVariant: activeVariant,
+                        idleColor: idleColor,
+                        idleVariant: idleVariant,
+                        state: state,
+                        item: item
+                    }, item.key);
+                })
+            }),
+            errorMessage && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
+                ...errorMessageProps,
+                children: errorMessage
+            }),
+            description && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
+                as: "div",
+                ...descriptionProps,
+                children: description
+            })
+        ]
+    });
+}
+const $d26053f02b9f370b$export$a79147a60006308c = (0, $8zHUo$reactstately.Item);
+
+
+
+
+
+
+
 //# sourceMappingURL=main.js.map