@parrot-co/parrot-ui 0.1.8 → 0.1.10

package/dist/main.js

@@ -71,6 +71,7 @@ $parcel$export(module.exports, "ColorField", () => $ca14d49a10ed918f$export$b865
 $parcel$export(module.exports, "ColorPicker", () => $b4c448f742efa2a7$export$9feb1bc2e5f1ccb3);
 $parcel$export(module.exports, "ColorSlider", () => $7796dcb4fe09bf12$export$44fd664bcca5b6fb);
 $parcel$export(module.exports, "ColorSwatchPicker", () => $799f02b9b0e744b9$export$b46792416e3d8515);
+$parcel$export(module.exports, "parseColor", () => $e93fd810053d36a8$export$6e865ea70d7724f);
 
 
 function $d99c85a751d7ffbd$export$7e4aa119212bc614(value) {
@@ -147,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)=>{
@@ -294,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
     });
 };
@@ -558,7 +764,6 @@ function $d9ffc65197682590$export$f5b8910cec6cf069({ className: className, class
         })
     });
 }
-$d9ffc65197682590$export$f5b8910cec6cf069.displayName = "Input";
 
 
 
@@ -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,
@@ -852,10 +1061,10 @@ function $77c71203b3212c65$export$6bf0cd3a219bbade({ appearance: appearance = "o
 
 
 
-const $868b95cd1882a2c1$export$b28585a458fee016 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).forwardRef((props, ref)=>{
+function $868b95cd1882a2c1$export$b28585a458fee016({ wrapperRef: wrapperRef, ...props }) {
     const [showPassword, setShowPassword] = (0, ($parcel$interopDefault($8zHUo$react))).useState(false);
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $d9ffc65197682590$export$f5b8910cec6cf069), {
-        ref: ref,
+        wrapperRef: wrapperRef,
         ...props,
         type: showPassword ? "text" : "password",
         append: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
@@ -867,8 +1076,7 @@ const $868b95cd1882a2c1$export$b28585a458fee016 = /*#__PURE__*/ (0, ($parcel$int
             })
         })
     });
-});
-$868b95cd1882a2c1$export$b28585a458fee016.displayName = "PasswordInput";
+}
 
 
 
@@ -1532,10 +1740,12 @@ function $dcfc4542aa84c062$var$ListOption({ state: state, item: item }) {
         ...optionProps,
         ...otherProps,
         ref: optionRef,
+        "data-text-value": textValue,
+        "data-title": title,
         children: [
             item.rendered,
             isSelected && showSelectionIndicator && (renderSelectionIndicator?.(item) ?? /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
-                children: "x"
+                children: "/"
             }))
         ]
     });
@@ -1899,7 +2109,7 @@ $cfadb0728cf907ff$export$3288d34c523a1192.displayName = "Tag";
 
 
 
-function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode: selectionMode = "single", appearance: appearance = "outline", renderValue: renderValue, color: color = "gray", error: error, description: description, size: size = "sm", radius: radius, listBoxColor: listBoxColor, className: className, value: value, defaultValue: defaultValue, onChange: onChange, onSelectionChange: onSelectionChange, style: style, classNames: classNames, styles: styles, showSectionSeparator: showSectionSeparator = true, showSelectionIndicator: showSelectionIndicator = true, ...props }) {
+function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode: selectionMode = "single", appearance: appearance = "outline", renderValue: renderValue, color: color = "gray", error: error, description: description, size: size = "sm", radius: radius, listBoxColor: listBoxColor, className: className, value: value, onChange: onChange, onSelectionChange: onSelectionChange, style: style, classNames: classNames, styles: styles, showSectionSeparator: showSectionSeparator = true, showSelectionIndicator: showSelectionIndicator = true, ...props }) {
     const isMultiple = selectionMode === "multiple";
     const _value = $8zHUo$react.useMemo(()=>{
         if (!value) return null;
@@ -2150,20 +2360,6 @@ function $9bce4a3d5b18599c$export$b4085f3d3ede4716(array, keys) {
 }
 
 
-const $284d30e280d297d3$var$monthsByIndex = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "Septemper",
-    "October",
-    "November",
-    "December"
-];
 const $284d30e280d297d3$export$e1aef45b828286de = /*#__PURE__*/ $8zHUo$react.forwardRef(({ numberOfMonths: numberOfMonths = 1, color: color, ...props }, ref)=>{
     const { locale: locale } = (0, $8zHUo$reactaria.useLocale)();
     const state = (0, $8zHUo$reactstately.useCalendarState)({
@@ -2846,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)({
@@ -2859,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,
@@ -2873,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: {
@@ -2912,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,
@@ -3621,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) {