@parrot-co/parrot-ui 0.1.10 → 0.1.12

package/dist/main.js

@@ -72,6 +72,8 @@ $parcel$export(module.exports, "ColorPicker", () => $b4c448f742efa2a7$export$9fe
 $parcel$export(module.exports, "ColorSlider", () => $7796dcb4fe09bf12$export$44fd664bcca5b6fb);
 $parcel$export(module.exports, "ColorSwatchPicker", () => $799f02b9b0e744b9$export$b46792416e3d8515);
 $parcel$export(module.exports, "parseColor", () => $e93fd810053d36a8$export$6e865ea70d7724f);
+$parcel$export(module.exports, "Toggle", () => $fcb2cacda3f71fdc$export$bea8ebba691c5813);
+$parcel$export(module.exports, "ToggleGroup", () => $fcb2cacda3f71fdc$export$af3ec21f6cfb5e30);
 
 
 function $d99c85a751d7ffbd$export$7e4aa119212bc614(value) {
@@ -740,10 +742,11 @@ function $ec2376a5dd0d13e6$export$a455218a85c89869({ label: label, description:
 $ec2376a5dd0d13e6$export$a455218a85c89869.displayName = "Field";
 
 
-function $d9ffc65197682590$export$f5b8910cec6cf069({ className: className, classNames: classNames, style: style, styles: styles, inputRef: inputRef, ...props }) {
+function $d9ffc65197682590$export$f5b8910cec6cf069({ className: className, classNames: classNames, style: style, styles: styles, onChange: onChange, inputRef: inputRef, ...props }) {
     const internalInputRef = (0, ($parcel$interopDefault($8zHUo$react))).useRef(null);
     const { labelProps: labelProps, inputProps: inputProps, errorMessageProps: errorMessageProps, descriptionProps: descriptionProps } = (0, $8zHUo$reactaria.useTextField)({
         ...props,
+        onChange: onChange,
         inputElementType: "input"
     }, internalInputRef);
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $ec2376a5dd0d13e6$export$a455218a85c89869), {
@@ -756,7 +759,7 @@ function $d9ffc65197682590$export$f5b8910cec6cf069({ className: className, class
         style: style,
         ...props,
         children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
-            ref: (0, $62f1c614c0962470$export$c9058316764c140e)(internalInputRef, inputRef),
+            ref: (0, $62f1c614c0962470$export$c9058316764c140e)(inputRef, internalInputRef),
             "data-has-left-addon": !!props.prepend,
             "data-has-right-addon": !!props.append,
             className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-text-input-el"),
@@ -987,12 +990,13 @@ $3af04cd154cf4de1$export$c25acd513dcc8062.displayName = "IconButton";
 
 
 
-function $77c71203b3212c65$export$6bf0cd3a219bbade({ appearance: appearance = "outline", size: size = "md", color: color = "gray", classNames: classNames, styles: styles, append: append, prepend: prepend, placeholder: placeholder, showSteppers: showSteppers = false, error: error, label: label, minValue: minValue, maxValue: maxValue, formatOptions: formatOptions, inputRef: inputRef, incrementIcon: incrementIcon, decrementIcon: decrementIcon, ...props }) {
+function $77c71203b3212c65$export$6bf0cd3a219bbade({ appearance: appearance = "outline", size: size = "md", color: color = "gray", classNames: classNames, styles: styles, append: append, prepend: prepend, placeholder: placeholder, showSteppers: showSteppers = false, error: error, label: label, minValue: minValue, maxValue: maxValue, formatOptions: formatOptions, inputRef: inputRef, incrementIcon: incrementIcon, decrementIcon: decrementIcon, onChange: onChange, ...props }) {
     const ariaProps = {
         ...props,
         maxValue: maxValue,
         formatOptions: formatOptions,
         minValue: minValue,
+        onChange: onChange,
         "aria-label": props["aria-label"] ?? "number input"
     };
     const space = (0, $eae337549f49a5a2$export$450c36e0b0e62ccd)();
@@ -4321,4 +4325,175 @@ function $e93fd810053d36a8$export$6e865ea70d7724f(color) {
 
 
 
+
+
+
+
+
+
+const $fcb2cacda3f71fdc$var$ToggleGroupContext = /*#__PURE__*/ $8zHUo$react.createContext(null);
+function $fcb2cacda3f71fdc$export$af3ec21f6cfb5e30({ children: children, mode: mode = "single", value: value, defaultValue: defaultValue, onChange: onChange, validate: validate, styles: styles, classNames: classNames, className: className, style: style, ...props }) {
+    const Wrapper = $8zHUo$react.useMemo(()=>{
+        if (mode === "single") return $fcb2cacda3f71fdc$var$SingleSelectGroup;
+        return $fcb2cacda3f71fdc$var$MultiSelectGroup;
+    }, [
+        mode
+    ]);
+    props = {
+        ...props
+    };
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $ec2376a5dd0d13e6$export$a455218a85c89869), {
+        label: props.label,
+        replaceDefaultControlWrapper: true,
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)(Wrapper, {
+            value: value,
+            defaultValue: defaultValue,
+            onChange: onChange,
+            validate: validate,
+            ...props,
+            children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $eae337549f49a5a2$export$eef1e68107c58ef2), {
+                className: className,
+                styles: styles,
+                classNames: classNames,
+                style: style,
+                ...props,
+                children: children
+            })
+        })
+    });
+}
+function $fcb2cacda3f71fdc$var$SingleSelectGroup({ children: children, orientation: orientation = "horizontal", ...props }) {
+    const state = (0, $8zHUo$reactstately.useRadioGroupState)(props);
+    const { radioGroupProps: radioGroupProps } = (0, $8zHUo$reactaria.useRadioGroup)({
+        ...props,
+        orientation: orientation,
+        "aria-label": "single toggle group"
+    }, state);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+        ...radioGroupProps,
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($fcb2cacda3f71fdc$var$ToggleGroupContext.Provider, {
+            value: {
+                state: state,
+                mode: "single",
+                props: props
+            },
+            children: children
+        })
+    });
+}
+function $fcb2cacda3f71fdc$var$MultiSelectGroup({ children: children, ...props }) {
+    const state = (0, $8zHUo$reactstately.useCheckboxGroupState)(props);
+    const { groupProps: groupProps } = (0, $8zHUo$reactaria.useCheckboxGroup)({
+        ...props,
+        "aria-label": "multiple toggle group"
+    }, state);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+        ...groupProps,
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($fcb2cacda3f71fdc$var$ToggleGroupContext.Provider, {
+            value: {
+                state: state,
+                mode: "multiple",
+                props: props
+            },
+            children: children
+        })
+    });
+}
+function $fcb2cacda3f71fdc$var$SingleToggle({ ...props }) {
+    const ctx = $8zHUo$react.useContext($fcb2cacda3f71fdc$var$ToggleGroupContext);
+    const state = ctx?.state;
+    const ref = $8zHUo$react.useRef(null);
+    if (!ctx) throw new Error("Toggle must be used within a ToggleGroup");
+    const { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $8zHUo$reactaria.useFocusRing)();
+    const isSelected = state.selectedValue === props.value;
+    const { inputProps: inputProps } = (0, $8zHUo$reactaria.useRadio)(props, ctx.state, ref);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)($fcb2cacda3f71fdc$var$ToggleButton, {
+        isSelected: isSelected,
+        isFocusVisible: isFocusVisible,
+        children: [
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactaria.VisuallyHidden), {
+                children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+                    ref: ref,
+                    ...(0, $8zHUo$reactaria.mergeProps)(inputProps, focusProps)
+                })
+            }),
+            props.children
+        ]
+    });
+}
+function $fcb2cacda3f71fdc$var$MultiToggle({ ...props }) {
+    const ctx = $8zHUo$react.useContext($fcb2cacda3f71fdc$var$ToggleGroupContext);
+    const state = ctx?.state;
+    const ref = $8zHUo$react.useRef(null);
+    if (!ctx) throw new Error("Toggle must be used within a ToggleGroup");
+    const { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $8zHUo$reactaria.useFocusRing)();
+    const isSelected = state.isSelected(props.value);
+    const { inputProps: inputProps } = (0, $8zHUo$reactaria.useCheckboxGroupItem)(props, ctx.state, ref);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)($fcb2cacda3f71fdc$var$ToggleButton, {
+        isSelected: isSelected,
+        isFocusVisible: isFocusVisible,
+        children: [
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactaria.VisuallyHidden), {
+                children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("input", {
+                    ref: ref,
+                    ...(0, $8zHUo$reactaria.mergeProps)(inputProps, focusProps)
+                })
+            }),
+            props.children
+        ]
+    });
+}
+const $fcb2cacda3f71fdc$var$ToggleContext = /*#__PURE__*/ $8zHUo$react.createContext(null);
+function $fcb2cacda3f71fdc$export$bea8ebba691c5813({ ...props }) {
+    const ctx = $8zHUo$react.useContext($fcb2cacda3f71fdc$var$ToggleGroupContext);
+    if (!ctx) throw new Error("Toggle must be used within a ToggleGroup");
+    const Wrapper = $8zHUo$react.useMemo(()=>{
+        if (ctx?.mode === "single") return $fcb2cacda3f71fdc$var$SingleToggle;
+        return $fcb2cacda3f71fdc$var$MultiToggle;
+    }, [
+        ctx?.mode
+    ]);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($fcb2cacda3f71fdc$var$ToggleContext.Provider, {
+        value: {
+            props: props
+        },
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)(Wrapper, {
+            value: props.value,
+            children: props.children
+        })
+    });
+}
+function $fcb2cacda3f71fdc$var$ToggleButton({ children: children, isFocusVisible: isFocusVisible, isSelected: isSelected, ...props }) {
+    const ctx = $8zHUo$react.useContext($fcb2cacda3f71fdc$var$ToggleContext)?.props;
+    const groupCtx = $8zHUo$react.useContext($fcb2cacda3f71fdc$var$ToggleGroupContext);
+    if (!ctx || !groupCtx) throw new Error("Toggle must be used within a ToggleGroup");
+    const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
+    const space = (0, $eae337549f49a5a2$export$450c36e0b0e62ccd)();
+    const idleColor = ctx.idleColor ?? groupCtx.props.idleColor ?? "gray";
+    const activeColor = ctx.activeColor ?? groupCtx.props.activeColor ?? theme?.color ?? "gray";
+    const idleVariant = ctx.idleVariant ?? groupCtx.props.idleVariant ?? "light";
+    const activeVariant = ctx.activeVariant ?? groupCtx.props.activeVariant ?? "solid";
+    const color = isSelected ? activeColor : idleColor;
+    const variant = isSelected ? activeVariant : idleVariant;
+    const radius = ctx.radius ?? groupCtx.props.radius ?? "full";
+    const size = ctx.size ?? groupCtx.props.size ?? "md";
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("label", {
+        "data-icon-button": ctx.isIconButton,
+        "data-is-toggle": true,
+        "data-radius": radius,
+        "data-color": color,
+        "data-variant": variant,
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-button", ctx.className, ctx.classNames?.wrapper, `size-${size}`, space.classNames),
+        "data-selected": isSelected,
+        "data-focus-visible": isFocusVisible,
+        ...props,
+        children: children
+    });
+}
+
+
+
+
+
+
 //# sourceMappingURL=main.js.map