@ecohouse/ui 0.1.63 → 0.1.64

package/dist/index.js

@@ -31545,6 +31545,11 @@ var triggerWebBlurStyle = Platform.OS === "web" ? {
   backdropFilter: "blur(40px)",
   WebkitBackdropFilter: "blur(40px)"
 } : {};
+var variantWebTransitionStyle = Platform.OS === "web" ? {
+  transitionProperty: "background-color, border-color, box-shadow, backdrop-filter, -webkit-backdrop-filter",
+  transitionDuration: "200ms",
+  transitionTimingFunction: "ease"
+} : {};
 var menuWebBlurStyle = Platform.OS === "web" ? {
   backdropFilter: "blur(40px)",
   WebkitBackdropFilter: "blur(40px)"
@@ -31650,6 +31655,7 @@ var Avatar = forwardRef(function Avatar2({
         accessibilityState: isInteractive ? { disabled, expanded: hasMenu ? isOpen : void 0 } : void 0,
         style: [
           styles6.root,
+          variantWebTransitionStyle,
           isLightVariant ? styles6.rootLight : styles6.rootDark,
           isLightVariant && triggerWebBlurStyle,
           disabled && styles6.disabled,
@@ -31705,6 +31711,7 @@ var Avatar = forwardRef(function Avatar2({
       {
         style: [
           styles6.menu,
+          variantWebTransitionStyle,
           isLightVariant ? styles6.menuLight : styles6.menuDark,
           isLightVariant && menuWebBlurStyle,
           menuWidth != null && { right: void 0, width: menuWidth }
@@ -31721,7 +31728,7 @@ var Avatar = forwardRef(function Avatar2({
               hoverColor: item.hoverColor ?? (isLightVariant ? colors.whiteAlpha7 : void 0),
               labelStyle: item.labelStyle,
               onPress: () => handleItemPress(item),
-              style: isLightVariant ? item.backgroundColor ? styles6.emphasizedMenuItem : styles6.menuItem : void 0
+              style: item.backgroundColor ? styles6.emphasizedMenuItem : styles6.menuItem
             },
             itemKey
           );
@@ -31831,6 +31838,9 @@ var styles6 = StyleSheet.create({
     overflow: "hidden"
   },
   menuDark: {
+    // Matches menuLight's border so switching variants does not shift the menu by 2px.
+    borderWidth: 1,
+    borderColor: "transparent",
     backgroundColor: colors.grey700,
     ...Platform.select({
       web: {
@@ -35228,7 +35238,7 @@ var DatePicker = forwardRef(
                                               style: [
                                                 styles27.dayCircle,
                                                 isSelectedEndpoint && styles27.dayCircleSelected,
-                                                dayUnavailable && styles27.dayCircleBooked,
+                                                dayUnavailable && styles27.dayCircleUnavailable,
                                                 isHovered && styles27.dayCircleHovered
                                               ],
                                               children: /* @__PURE__ */ jsx(
@@ -35237,7 +35247,7 @@ var DatePicker = forwardRef(
                                                   style: [
                                                     styles27.dayText,
                                                     { color: dayTextColor },
-                                                    dayUnavailable && styles27.dayTextBooked
+                                                    dayUnavailable && styles27.dayTextUnavailable
                                                   ],
                                                   children: day.getDate()
                                                 }
@@ -35553,13 +35563,14 @@ var styles27 = StyleSheet.create({
     borderRadius: 22,
     overflow: "hidden"
   },
-  dayCircleBooked: {
-    backgroundColor: colors.grey700,
+  /** Unavailable day: filled circle a step lighter than the calendar, dimmed number. */
+  dayCircleUnavailable: {
+    backgroundColor: colors.grey600,
     borderRadius: 22,
     overflow: "hidden"
   },
-  dayTextBooked: {
-    textDecorationLine: "line-through"
+  dayTextUnavailable: {
+    color: colors.grey200
   },
   dayCircleHovered: {
     backgroundColor: colors.grey600