@parrot-co/parrot-ui 0.1.0 → 0.1.2

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);
 
@@ -3254,4 +3256,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