@parrot-co/parrot-ui 0.0.87 → 0.0.89

package/dist/main.js

@@ -29,8 +29,8 @@ $parcel$export(module.exports, "Radio", () => $e158c5cf7e190200$export$d7b12c410
 $parcel$export(module.exports, "RadioGroup", () => $e158c5cf7e190200$export$a98f0dcb43a68a25);
 $parcel$export(module.exports, "RadioCard", () => $71fcf48f7e2e9427$export$f8afaea2e9656b91);
 $parcel$export(module.exports, "Select", () => $e37831ebf64d8e7d$export$ef9b1a59e592288f);
-$parcel$export(module.exports, "DatePicker", () => $64d5f0f4b10da15c$export$5109c6dd95d8fb00);
-$parcel$export(module.exports, "Calendar", () => $7f850fc45f6bb29f$export$e1aef45b828286de);
+$parcel$export(module.exports, "DateInput", () => $e0a58c83d4c36e4e$export$7edc06cf1783b30f);
+$parcel$export(module.exports, "Calendar", () => $284d30e280d297d3$export$e1aef45b828286de);
 $parcel$export(module.exports, "Avatar", () => $2fdd5844efb4cca1$export$e2255cf6045e8d47);
 $parcel$export(module.exports, "FileUploader", () => $5f87818f4e8f8603$export$1a5cb5295a7d2749);
 $parcel$export(module.exports, "Separator", () => $9e8a15ca4065ce60$export$1ff3c3f08ae963c0);
@@ -581,7 +581,7 @@ const $5a6f28f3fd58ff6e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$int
     const space = (0, $eae337549f49a5a2$export$450c36e0b0e62ccd)();
     const buttonGroupProps = (0, $7f70742e736041ff$export$749e21be8b14b968)();
     const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
-    const { color: color = theme?.color ?? "violet", variant: variant = "solid", append: append, prepend: prepend, size: size = "md", children: children, as: as = "button", className: className, isLoading: isLoading, radius: radius = "full", isToggle: isToggle, activeColor: activeColor = "violet", activeVariant: activeVariant = "solid", idleColor: idleColor = "gray", idleVariant: idleVariant = "outline", isIconButton: isIconButton, appearance: appearance, style: style, ...otherProps } = {
+    const { color: color = theme?.color ?? "violet", variant: variant = "solid", append: append, prepend: prepend, size: size = "md", children: children, as: as = "button", className: className, isLoading: isLoading, radius: radius = "full", isToggle: isToggle, activeColor: activeColor = "violet", activeVariant: activeVariant = "solid", idleColor: idleColor = "gray", idleVariant: idleVariant = "outline", isIconButton: isIconButton, style: style, ...otherProps } = {
         ...buttonGroupProps,
         ...props
     };
@@ -593,18 +593,6 @@ const $5a6f28f3fd58ff6e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$int
         ...otherProps,
         elementType: as
     }, state, buttonRef);
-    const getAppearance = (0, ($parcel$interopDefault($8zHUo$react))).useCallback(()=>{
-        if (theme?.buttonAppearance && appearance) return {
-            color: theme.buttonAppearance[appearance]?.color,
-            variant: theme.buttonAppearance[appearance]?.variant
-        };
-        return {
-            color: color,
-            variant: variant
-        };
-    }, [
-        appearance
-    ]);
     function getColor() {
         if (!state.isSelected && isToggle) return {
             color: idleColor,
@@ -615,14 +603,13 @@ const $5a6f28f3fd58ff6e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$int
             variant: activeVariant
         };
         return {
-            variant: getAppearance().variant,
-            color: getAppearance().color
+            variant: variant,
+            color: color
         };
     }
     const Comp = as;
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)(Comp, {
         style: style,
-        "data-appearance": appearance,
         "data-pressed": isPressed,
         "data-radius": radius,
         "data-icon-button": isIconButton,
@@ -1628,18 +1615,22 @@ function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode
 
 
 
-const $eb05b0a9c6033e00$export$d9781c7894a82487 = /*#__PURE__*/ $8zHUo$react.forwardRef((props, ref)=>{
+function $5a757815ed1b91e3$var$createCalendar() {
+    return new (0, $8zHUo$internationalizeddate.GregorianCalendar)();
+}
+const $5a757815ed1b91e3$export$d9781c7894a82487 = /*#__PURE__*/ $8zHUo$react.forwardRef((props, ref)=>{
     const { locale: locale } = (0, $8zHUo$reactaria.useLocale)();
     const state = (0, $8zHUo$reactstately.useDateFieldState)({
         ...props,
         locale: locale,
-        createCalendar: $8zHUo$internationalizeddate.createCalendar
+        createCalendar: $5a757815ed1b91e3$var$createCalendar
     });
     const fieldRef = $8zHUo$react.useRef(null);
     const { fieldProps: fieldProps } = (0, $8zHUo$reactaria.useDateField)(props, state, fieldRef);
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+        gap: "none",
         style: {
-            padding: 4,
+            padding: "4px 0px",
             flex: 1
         },
         stretchY: true,
@@ -1647,14 +1638,14 @@ const $eb05b0a9c6033e00$export$d9781c7894a82487 = /*#__PURE__*/ $8zHUo$react.for
         inline: true,
         ...fieldProps,
         children: state.segments.map((segment, i)=>{
-            return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($eb05b0a9c6033e00$var$DateSegment, {
+            return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($5a757815ed1b91e3$var$DateSegment, {
                 segment: segment,
                 state: state
             }, i);
         })
     });
 });
-function $eb05b0a9c6033e00$var$DateSegment({ segment: segment, state: state }) {
+function $5a757815ed1b91e3$var$DateSegment({ segment: segment, state: state }) {
     const ref = $8zHUo$react.useRef(null);
     const { segmentProps: segmentProps } = (0, $8zHUo$reactaria.useDateSegment)(segment, state, ref);
     const segmentMaxValue = segment.maxValue ?? 0;
@@ -1664,6 +1655,7 @@ function $eb05b0a9c6033e00$var$DateSegment({ segment: segment, state: state }) {
         justify: "center",
         ref: ref,
         "data-placeholder": segment.isPlaceholder,
+        "data-separator": segment.text === "/",
         style: {
             minWidth: segmentMaxValue.toString().length + "ch",
             color: segment.text == "/" ? "var(--color-6)" : "var(--color-12)"
@@ -1681,7 +1673,6 @@ function $eb05b0a9c6033e00$var$DateSegment({ segment: segment, state: state }) {
                     height: segment.isPlaceholder ? "" : 0,
                     pointerEvents: "none",
                     visibility: segment.isPlaceholder ? undefined : "hidden",
-                    fontStyle: "italic",
                     position: segment.isPlaceholder ? undefined : "absolute"
                 },
                 children: segment.placeholder
@@ -1690,7 +1681,7 @@ function $eb05b0a9c6033e00$var$DateSegment({ segment: segment, state: state }) {
         ]
     });
 }
-$eb05b0a9c6033e00$export$d9781c7894a82487.displayName = "DateField";
+$5a757815ed1b91e3$export$d9781c7894a82487.displayName = "DateField";
 
 
 
@@ -1721,7 +1712,7 @@ function $9bce4a3d5b18599c$export$b4085f3d3ede4716(array, keys) {
 }
 
 
-const $7f850fc45f6bb29f$export$e1aef45b828286de = /*#__PURE__*/ $8zHUo$react.forwardRef(({ numberOfMonths: numberOfMonths = 1, color: color, ...props }, ref)=>{
+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)({
         ...props,
@@ -1738,7 +1729,7 @@ const $7f850fc45f6bb29f$export$e1aef45b828286de = /*#__PURE__*/ $8zHUo$react.for
         gap: "xs",
         direction: "column",
         ref: ref,
-        className: "p-calendar",
+        className: "p-calendar-wrapper",
         ...calendarProps,
         children: [
             /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
@@ -1747,9 +1738,9 @@ const $7f850fc45f6bb29f$export$e1aef45b828286de = /*#__PURE__*/ $8zHUo$react.for
                 className: "header",
                 children: [
                     /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
-                        variant: "ghost",
-                        radius: "md",
-                        size: "xs",
+                        variant: "outline",
+                        radius: "full",
+                        size: "sm",
                         color: "gray",
                         ...prevButtonProps,
                         children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiChevronLeft), {
@@ -1757,16 +1748,16 @@ const $7f850fc45f6bb29f$export$e1aef45b828286de = /*#__PURE__*/ $8zHUo$react.for
                         })
                     }),
                     /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
-                        color: "gray",
+                        color: "black",
                         size: "sm",
-                        weight: "medium",
+                        weight: "regular",
                         as: "h2",
                         children: title
                     }),
                     /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
-                        variant: "ghost",
-                        radius: "md",
-                        size: "xs",
+                        variant: "outline",
+                        radius: "full",
+                        size: "sm",
                         color: "gray",
                         ...nextButtonProps,
                         children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiChevronRight), {
@@ -1778,7 +1769,7 @@ const $7f850fc45f6bb29f$export$e1aef45b828286de = /*#__PURE__*/ $8zHUo$react.for
             /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
                 gap: "xl",
                 children: (0, $9bce4a3d5b18599c$export$d02631cccf789723)(1, numberOfMonths).map((n)=>{
-                    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($7f850fc45f6bb29f$var$CalendarGrid, {
+                    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($284d30e280d297d3$var$CalendarGrid, {
                         color: color,
                         state: state,
                         offset: {
@@ -1790,7 +1781,7 @@ const $7f850fc45f6bb29f$export$e1aef45b828286de = /*#__PURE__*/ $8zHUo$react.for
         ]
     });
 });
-function $7f850fc45f6bb29f$var$CalendarGrid({ state: state, offset: offset = {}, color: color, ...props }) {
+function $284d30e280d297d3$var$CalendarGrid({ state: state, offset: offset = {}, color: color, ...props }) {
     const { locale: locale } = (0, $8zHUo$reactaria.useLocale)();
     const startDate = state.visibleRange.start.add(offset);
     const endDate = (0, $8zHUo$internationalizeddate.endOfMonth)(startDate);
@@ -1811,8 +1802,8 @@ function $7f850fc45f6bb29f$var$CalendarGrid({ state: state, offset: offset = {},
                                 className: "p-date-cell",
                                 children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
                                     size: "sm",
-                                    variant: "lighter",
-                                    weight: "medium",
+                                    variant: "light",
+                                    weight: "regular",
                                     children: day
                                 })
                             })
@@ -1823,7 +1814,7 @@ function $7f850fc45f6bb29f$var$CalendarGrid({ state: state, offset: offset = {},
                 children: [
                     ...new Array(weeksInMonth).keys()
                 ].map((weekIndex)=>/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("tr", {
-                        children: state.getDatesInWeek(weekIndex, startDate).map((date, index)=>date ? /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($7f850fc45f6bb29f$var$CalendarCell, {
+                        children: state.getDatesInWeek(weekIndex, startDate).map((date, index)=>date ? /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($284d30e280d297d3$var$CalendarCell, {
                                 color: color,
                                 state: state,
                                 date: date,
@@ -1834,7 +1825,7 @@ function $7f850fc45f6bb29f$var$CalendarGrid({ state: state, offset: offset = {},
         ]
     });
 }
-function $7f850fc45f6bb29f$var$CalendarCell({ state: state, currentMonth: currentMonth, color: color, ...props }) {
+function $284d30e280d297d3$var$CalendarCell({ state: state, currentMonth: currentMonth, color: color, ...props }) {
     const ref = $8zHUo$react.useRef(null);
     const { cellProps: cellProps, buttonProps: buttonProps, isSelected: isSelected, isDisabled: isDisabled, isUnavailable: isUnavailable, formattedDate: formattedDate } = (0, $8zHUo$reactaria.useCalendarCell)(props, state, ref);
     const { focusProps: focusProps, isFocusVisible: isFocusVisible, isFocused: isFocused } = (0, $8zHUo$reactaria.useFocusRing)();
@@ -1856,7 +1847,7 @@ function $7f850fc45f6bb29f$var$CalendarCell({ state: state, currentMonth: curren
         })
     });
 }
-$7f850fc45f6bb29f$export$e1aef45b828286de.displayName = "Calendar";
+$284d30e280d297d3$export$e1aef45b828286de.displayName = "Calendar";
 
 
 
@@ -1867,45 +1858,30 @@ $7f850fc45f6bb29f$export$e1aef45b828286de.displayName = "Calendar";
 
 
 
-function $965664701ecc5d2a$export$85930906f541ddb8(date) {
-    return new (0, $8zHUo$internationalizeddate.CalendarDate)(date.getFullYear(), date.getMonth() + 1, date.getDate());
-}
 
 
 
-
-const $64d5f0f4b10da15c$export$5109c6dd95d8fb00 = /*#__PURE__*/ $8zHUo$react.forwardRef(({ appearance: appearance = "filled", size: size = "md", color: color, shape: shape, numberOfMonths: numberOfMonths, value: value, onChange: onChange, defaultValue: defaultValue, dropdownIcon: dropdownIcon = /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiOutlineCalendar), {
+const $e0a58c83d4c36e4e$export$7edc06cf1783b30f = /*#__PURE__*/ $8zHUo$react.forwardRef(({ appearance: appearance = "outline", size: size = "md", color: color, numberOfMonths: numberOfMonths, radius: radius, dropdownIcon: dropdownIcon = /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiOutlineCalendar), {
     size: 16
-}), ...props }, ref)=>{
+}), value: value, defaultValue: defaultValue, onChange: onChange, ...props }, ref)=>{
     const space = (0, $eae337549f49a5a2$export$450c36e0b0e62ccd)();
-    function _onChange(date) {
-        onChange?.(new Date(date.year, date.month, date.day), date);
+    function proxyOnChange(date) {
+        onChange?.(date.toString(), date);
     }
-    // convert Date to DateValue
-    const proxyDateValues = $8zHUo$react.useMemo(()=>{
-        return {
-            value: value ? (0, $965664701ecc5d2a$export$85930906f541ddb8)(value) : undefined,
-            defaultValue: defaultValue ? (0, $965664701ecc5d2a$export$85930906f541ddb8)(defaultValue) : undefined
-        };
-    }, [
-        value?.toString(),
-        defaultValue?.toString()
-    ]);
-    const newPropsWithProxies = {
+    const newProps = {
         ...props,
-        onChange: onChange ? _onChange : undefined,
-        value: proxyDateValues.value,
-        defaultValue: proxyDateValues.defaultValue
+        value: value ? (0, $8zHUo$internationalizeddate.parseDate)(value) : undefined,
+        defaultValue: defaultValue ? (0, $8zHUo$internationalizeddate.parseDate)(defaultValue) : undefined,
+        onChange: proxyOnChange
     };
-    const state = (0, $8zHUo$reactstately.useDatePickerState)(newPropsWithProxies);
+    const state = (0, $8zHUo$reactstately.useDatePickerState)(newProps);
     const pickerRef = $8zHUo$react.useRef(null);
-    const { groupProps: groupProps, calendarProps: calendarProps, fieldProps: fieldProps, buttonProps: buttonProps, errorMessageProps: errorMessageProps, labelProps: labelProps } = (0, $8zHUo$reactaria.useDatePicker)(newPropsWithProxies, state, pickerRef);
+    const { groupProps: groupProps, calendarProps: calendarProps, fieldProps: fieldProps, buttonProps: buttonProps, errorMessageProps: errorMessageProps, labelProps: labelProps } = (0, $8zHUo$reactaria.useDatePicker)(newProps, state, pickerRef);
+    const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+        "data-radius": radius ?? theme?.radius ?? "lg",
         "data-size": size,
-        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)({
-            [space.compactItemWrapperAdjust]: true,
-            "p-input-group": true
-        }),
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-input-group", space.compactItemWrapperAdjust),
         stretchX: true,
         stack: true,
         gap: "xs",
@@ -1922,11 +1898,7 @@ const $64d5f0f4b10da15c$export$5109c6dd95d8fb00 = /*#__PURE__*/ $8zHUo$react.for
                 stack: true,
                 children: [
                     /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
-                        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)({
-                            "date-picker-trigger": true,
-                            "p-input": true,
-                            ...space.classNames
-                        }),
+                        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-input-control", "date-picker-trigger", space.classNames),
                         ref: pickerRef,
                         justify: "space-between",
                         align: "center",
@@ -1934,14 +1906,14 @@ const $64d5f0f4b10da15c$export$5109c6dd95d8fb00 = /*#__PURE__*/ $8zHUo$react.for
                         "data-color": color,
                         ...groupProps,
                         children: [
-                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $eb05b0a9c6033e00$export$d9781c7894a82487), {
+                            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $5a757815ed1b91e3$export$d9781c7894a82487), {
                                 appearance: appearance,
                                 size: size,
                                 ...fieldProps
                             }),
                             /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
                                 size: "sm",
-                                variant: "ghost",
+                                variant: "light",
                                 color: color,
                                 ...buttonProps,
                                 children: dropdownIcon
@@ -1953,10 +1925,16 @@ const $64d5f0f4b10da15c$export$5109c6dd95d8fb00 = /*#__PURE__*/ $8zHUo$react.for
                         state: state,
                         triggerRef: pickerRef,
                         placement: "bottom start",
-                        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $7f850fc45f6bb29f$export$e1aef45b828286de), {
-                            color: color,
-                            ...calendarProps,
-                            numberOfMonths: numberOfMonths
+                        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+                            style: {
+                                maxHeight: "auto"
+                            },
+                            "data-radius": radius ?? theme?.radius ?? "lg",
+                            children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $284d30e280d297d3$export$e1aef45b828286de), {
+                                color: color,
+                                ...calendarProps,
+                                numberOfMonths: numberOfMonths
+                            })
                         })
                     })
                 ]
@@ -1968,7 +1946,7 @@ const $64d5f0f4b10da15c$export$5109c6dd95d8fb00 = /*#__PURE__*/ $8zHUo$react.for
         ]
     });
 });
-$64d5f0f4b10da15c$export$5109c6dd95d8fb00.displayName = "DatePicker";
+$e0a58c83d4c36e4e$export$7edc06cf1783b30f.displayName = "DateInput";
 
 
 
@@ -2628,7 +2606,7 @@ function $1278141024f0bc4d$var$Dialog({ width: width = 400, title: title, onCanc
                             title && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
                                 weight: "medium",
                                 size: "md",
-                                color: "gray",
+                                color: "black",
                                 ...titleProps,
                                 as: "div",
                                 children: title
@@ -2643,6 +2621,7 @@ function $1278141024f0bc4d$var$Dialog({ width: width = 400, title: title, onCanc
                         ]
                     }),
                     props.isDismissable && showCloseButton && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $3af04cd154cf4de1$export$c25acd513dcc8062), {
+                        color: "gray",
                         onPress: handleClose,
                         variant: "ghost",
                         size: "sm",