@parrot-co/parrot-ui 0.1.9 → 0.1.10

package/dist/main.js

@@ -148,6 +148,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 +500,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 +857,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 +872,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 +928,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 +3042,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 +3055,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 +3070,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 +3114,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 +3824,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) {