@parrot-co/parrot-ui 0.1.9 → 0.1.11

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) {
@@ -148,6 +150,211 @@ function $62f1c614c0962470$export$c9058316764c140e(...refs) {
         }
     };
 }
+const $62f1c614c0962470$var$validDOMProperties = new Set([
+    // Common HTML attributes
+    "accept",
+    "acceptCharset",
+    "accessKey",
+    "action",
+    "allowFullScreen",
+    "allowTransparency",
+    "alt",
+    "async",
+    "autoComplete",
+    "autoFocus",
+    "autoPlay",
+    "capture",
+    "cellPadding",
+    "cellSpacing",
+    "challenge",
+    "charSet",
+    "checked",
+    "cite",
+    "classID",
+    "className",
+    "colSpan",
+    "cols",
+    "content",
+    "contentEditable",
+    "contextMenu",
+    "controls",
+    "coords",
+    "crossOrigin",
+    "data",
+    "dateTime",
+    "default",
+    "defer",
+    "dir",
+    "disabled",
+    "download",
+    "draggable",
+    "encType",
+    "form",
+    "formAction",
+    "formEncType",
+    "formMethod",
+    "formNoValidate",
+    "formTarget",
+    "frameBorder",
+    "headers",
+    "height",
+    "hidden",
+    "high",
+    "href",
+    "hrefLang",
+    "htmlFor",
+    "httpEquiv",
+    "icon",
+    "id",
+    "inputMode",
+    "integrity",
+    "is",
+    "keyParams",
+    "keyType",
+    "kind",
+    "label",
+    "lang",
+    "list",
+    "loop",
+    "low",
+    "manifest",
+    "marginHeight",
+    "marginWidth",
+    "max",
+    "maxLength",
+    "media",
+    "mediaGroup",
+    "method",
+    "min",
+    "minLength",
+    "multiple",
+    "muted",
+    "name",
+    "noValidate",
+    "nonce",
+    "open",
+    "optimum",
+    "pattern",
+    "placeholder",
+    "poster",
+    "preload",
+    "profile",
+    "radioGroup",
+    "readOnly",
+    "referrerPolicy",
+    "rel",
+    "required",
+    "reversed",
+    "role",
+    "rowSpan",
+    "rows",
+    "sandbox",
+    "scope",
+    "scoped",
+    "scrolling",
+    "seamless",
+    "selected",
+    "shape",
+    "size",
+    "sizes",
+    "span",
+    "spellCheck",
+    "src",
+    "srcDoc",
+    "srcLang",
+    "srcSet",
+    "start",
+    "step",
+    "style",
+    "summary",
+    "tabIndex",
+    "target",
+    "title",
+    "type",
+    "useMap",
+    "value",
+    "width",
+    "wmode",
+    "wrap",
+    // Event handlers
+    "onCopy",
+    "onCut",
+    "onPaste",
+    "onCompositionEnd",
+    "onCompositionStart",
+    "onCompositionUpdate",
+    "onKeyDown",
+    "onKeyPress",
+    "onKeyUp",
+    "onFocus",
+    "onBlur",
+    "onChange",
+    "onInput",
+    "onInvalid",
+    "onSubmit",
+    "onClick",
+    "onContextMenu",
+    "onDoubleClick",
+    "onDrag",
+    "onDragEnd",
+    "onDragEnter",
+    "onDragExit",
+    "onDragLeave",
+    "onDragOver",
+    "onDragStart",
+    "onDrop",
+    "onMouseDown",
+    "onMouseEnter",
+    "onMouseLeave",
+    "onMouseMove",
+    "onMouseOut",
+    "onMouseOver",
+    "onMouseUp",
+    "onSelect",
+    "onTouchCancel",
+    "onTouchEnd",
+    "onTouchMove",
+    "onTouchStart",
+    "onScroll",
+    "onWheel",
+    "onAbort",
+    "onCanPlay",
+    "onCanPlayThrough",
+    "onDurationChange",
+    "onEmptied",
+    "onEncrypted",
+    "onEnded",
+    "onError",
+    "onLoadedData",
+    "onLoadedMetadata",
+    "onLoadStart",
+    "onPause",
+    "onPlay",
+    "onPlaying",
+    "onProgress",
+    "onRateChange",
+    "onSeeked",
+    "onSeeking",
+    "onStalled",
+    "onSuspend",
+    "onTimeUpdate",
+    "onVolumeChange",
+    "onWaiting",
+    "onLoad",
+    "onAnimationStart",
+    "onAnimationEnd",
+    "onAnimationIteration",
+    "onTransitionEnd",
+    "onToggle"
+]);
+function $62f1c614c0962470$export$457c3d6518dd4c6f(props) {
+    const newProps = {};
+    for(const key in props){
+        if (!key.startsWith("data-") && !$62f1c614c0962470$var$validDOMProperties.has(key)) continue;
+        newProps[key] = props[key];
+    }
+    return newProps;
+}
 
 
 const $eb8f27c3596a0e6b$export$23c260ee8e4dfaad = ({ stretchX: stretchX, stretchY: stretchY, stretchXY: stretchXY, children: children, className: className, position: position, as: as = "div", ...props }, ref)=>{
@@ -295,7 +502,7 @@ const $c3a954a7c0cb5109$export$21ee1313e2afe36c = (props, ref)=>{
         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,
-        ...otherProps,
+        ...(0, $62f1c614c0962470$export$457c3d6518dd4c6f)(otherProps),
         children: props.children
     });
 };
@@ -652,7 +859,7 @@ function $ff6fce0e059b3a1a$export$d2dae087199d2383(object) {
 
 
 const $7f70742e736041ff$var$ButtonGroupContext = /*#__PURE__*/ $8zHUo$react.createContext({});
-function $7f70742e736041ff$export$69b1032f2ecdf404({ color: color, variant: variant, size: size, compact: compact, radius: radius, gap: gap, children: children, idleColor: idleColor, activeColor: activeColor, idleVariant: idleVariant, activeVariant: activeVariant, isToggle: isToggle }) {
+function $7f70742e736041ff$export$69b1032f2ecdf404({ color: color, variant: variant, size: size, compact: compact, radius: radius, gap: gap, children: children, idleColor: idleColor, activeColor: activeColor, idleVariant: idleVariant, activeVariant: activeVariant, isToggle: isToggle, className: className, classNames: classNames, style: style, styles: styles }) {
     const cleanProps = (0, $ff6fce0e059b3a1a$export$d2dae087199d2383)({
         color: color,
         variant: variant,
@@ -667,6 +874,10 @@ function $7f70742e736041ff$export$69b1032f2ecdf404({ color: color, variant: vari
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($7f70742e736041ff$var$ButtonGroupContext.Provider, {
         value: cleanProps,
         children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $eae337549f49a5a2$export$eef1e68107c58ef2), {
+            className: className,
+            classNames: classNames,
+            style: style,
+            styles: styles,
             gap: gap,
             compact: compact,
             children: children
@@ -719,7 +930,7 @@ const $5a6f28f3fd58ff6e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$int
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)(Comp, {
         style: {
             ...style,
-            ...styles?.base
+            ...styles?.wrapper
         },
         "data-is-toggle": isToggle,
         "data-pressed": isPressed,
@@ -2833,7 +3044,7 @@ $c5c6f63b49c9056a$export$b5d5cf8927ab7262.displayName = "Switch";
 
 
 
-function $a945a7e4eb75da9e$export$472062a354075cee({ className: className, classNames: classNames, style: style, styles: styles, name: name, size: size = "sm", orientation: orientation = "horizontal", ...props }) {
+function $a945a7e4eb75da9e$export$472062a354075cee({ className: className, classNames: classNames, style: style, styles: styles, name: name, size: size = "sm", color: color, orientation: orientation = "horizontal", ...props }) {
     const trackRef = $8zHUo$react.useRef(null);
     const numberFormatter = (0, $8zHUo$reactaria.useNumberFormatter)();
     const state = (0, $8zHUo$reactstately.useSliderState)({
@@ -2846,6 +3057,7 @@ function $a945a7e4eb75da9e$export$472062a354075cee({ className: className, class
     }, state, trackRef);
     const percent = state.getThumbPercent(0);
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
+        "data-color": color,
         "data-size": size,
         style: {
             ...style,
@@ -2860,15 +3072,20 @@ function $a945a7e4eb75da9e$export$472062a354075cee({ className: className, class
                 children: props.label
             }),
             /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
+                ...trackProps,
                 ref: trackRef,
                 className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-slider-track", classNames?.track),
-                ...trackProps,
+                style: {
+                    ...styles?.track,
+                    ...trackProps.style
+                },
                 children: [
                     /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
                         style: {
+                            ...styles?.fill,
                             width: `${percent * 100}%`
                         },
-                        className: "p-slider-track-fill"
+                        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-slider-track-fill", classNames?.fill)
                     }),
                     /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($a945a7e4eb75da9e$var$Thumb, {
                         styles: {
@@ -2899,14 +3116,15 @@ function $a945a7e4eb75da9e$var$Thumb({ state: state, trackRef: trackRef, index:
     }, state);
     const { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $8zHUo$reactaria.useFocusRing)();
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
+        ...thumbProps,
         "data-dragging": isDragging,
         "data-focus-visible": isFocusVisible,
         className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-slider-thumb", className, classNames?.wrapper),
         style: {
+            ...thumbProps.style,
             ...style,
             ...styles?.wrapper
         },
-        ...thumbProps,
         children: [
             /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
                 style: styles?.inner,
@@ -3608,7 +3826,7 @@ const $d26053f02b9f370b$export$a79147a60006308c = (0, $8zHUo$reactstately.Item);
 
 
 
-function $b4c448f742efa2a7$export$9feb1bc2e5f1ccb3({ onChange: onChange, color: colorProp }) {
+function $b4c448f742efa2a7$export$9feb1bc2e5f1ccb3({ onChange: onChange, color: colorProp, styles: styles, classNames: classNames, className: className, style: style }) {
     const [colorSpace, setColorSpace] = $8zHUo$react.useState("hex");
     const [color, setColor] = (0, $c410efc80bcce413$export$40bfa8c7b0832715)(colorProp, (0, $8zHUo$reactstatelycolor.parseColor)("#BB66CC").toFormat("hsla"), onChange);
     function handleChange(color) {
@@ -4105,4 +4323,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