@ecohouse/ui 0.1.62 → 0.1.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/Avatar/Avatar.tsx

@@ -87,6 +87,17 @@ const triggerWebBlurStyle: ViewStyle =
       } as ViewStyle)
     : {};
 
+// Fades the light/dark switch (e.g. a header changing variant on scroll) instead of snapping.
+const variantWebTransitionStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        transitionProperty:
+          "background-color, border-color, box-shadow, backdrop-filter, -webkit-backdrop-filter",
+        transitionDuration: "200ms",
+        transitionTimingFunction: "ease",
+      } as ViewStyle)
+    : {};
+
 const menuWebBlurStyle: ViewStyle =
   Platform.OS === "web"
     ? ({
@@ -219,6 +230,7 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
         }
         style={[
           styles.root,
+          variantWebTransitionStyle,
           isLightVariant ? styles.rootLight : styles.rootDark,
           isLightVariant && triggerWebBlurStyle,
           disabled && styles.disabled,
@@ -275,6 +287,7 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
         <View
           style={[
             styles.menu,
+            variantWebTransitionStyle,
             isLightVariant ? styles.menuLight : styles.menuDark,
             isLightVariant && menuWebBlurStyle,
             menuWidth != null && { right: undefined, width: menuWidth },
@@ -292,13 +305,8 @@ export const Avatar = forwardRef<ComponentRef<typeof View>, AvatarProps>(functio
                 hoverColor={item.hoverColor ?? (isLightVariant ? colors.whiteAlpha7 : undefined)}
                 labelStyle={item.labelStyle}
                 onPress={() => handleItemPress(item)}
-                style={
-                  isLightVariant
-                    ? item.backgroundColor
-                      ? styles.emphasizedMenuItem
-                      : styles.menuItem
-                    : undefined
-                }
+                // Same size in both variants so the menu keeps its height when the variant changes.
+                style={item.backgroundColor ? styles.emphasizedMenuItem : styles.menuItem}
               />
             );
           })}
@@ -409,6 +417,9 @@ const styles = 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: {

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -76,6 +76,18 @@ const bookingRange = {
 const formatBookingDate = (date: Date) =>
   `${String(date.getDate()).padStart(2, "0")}/${String(date.getMonth() + 1).padStart(2, "0")}/${date.getFullYear()}`;
 
+/** Unavailable days: dimmed number on a filled circle, not selectable. */
+export const RangeWithUnavailableDates: Story = {
+  args: {
+    range: true,
+    placeholder: "Select dates",
+    defaultValue: { start: new Date(2026, 5, 15), end: new Date(2026, 5, 24) },
+    unavailableDates: [new Date(2026, 5, 8), new Date(2026, 5, 9)],
+    blockUnavailableDates: true,
+    defaultOpen: true,
+  },
+};
+
 export const RangeHorizontal: Story = {
   args: {
     range: true,

package/src/components/DatePicker/DatePicker.tsx

@@ -695,7 +695,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                               style={[
                                 styles.dayCircle,
                                 isSelectedEndpoint && styles.dayCircleSelected,
-                                dayUnavailable && styles.dayCircleBooked,
+                                dayUnavailable && styles.dayCircleUnavailable,
                                 isHovered && styles.dayCircleHovered,
                               ]}
                             >
@@ -703,7 +703,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
                                 style={[
                                   styles.dayText,
                                   { color: dayTextColor },
-                                  dayUnavailable && styles.dayTextBooked,
+                                  dayUnavailable && styles.dayTextUnavailable,
                                 ]}
                               >
                                 {day.getDate()}
@@ -1012,13 +1012,14 @@ const styles = 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,

package/src/components/VerificationCodeInput/VerificationCodeInput.test.ts

@@ -32,6 +32,20 @@ describe("updateVerificationCells", () => {
     });
   });
 
+  it("lays a whole pasted code out from the start when a later cell has focus", () => {
+    expect(updateVerificationCells(toVerificationCells("", 6), 4, "123456", 6)).toEqual({
+      cells: ["1", "2", "3", "4", "5", "6"],
+      nextFocus: 5,
+    });
+  });
+
+  it("still fills forward when the pasted digits fit from the focused cell", () => {
+    expect(updateVerificationCells(toVerificationCells("12", 6), 2, "3456", 6)).toEqual({
+      cells: ["1", "2", "3", "4", "5", "6"],
+      nextFocus: 5,
+    });
+  });
+
   it("replaces a selected digit without growing the code", () => {
     expect(updateVerificationCells(toVerificationCells("123456", 6), 2, "9", 6)).toEqual({
       cells: ["1", "2", "9", "4", "5", "6"],

package/src/components/VerificationCodeInput/VerificationCodeInput.utils.ts

@@ -51,11 +51,16 @@ export function updateVerificationCells(
   length: number,
 ): VerificationCellsUpdate {
   const safeLength = Math.max(1, length);
-  const safeIndex = Math.min(Math.max(0, index), safeLength - 1);
+  const focusedIndex = Math.min(Math.max(0, index), safeLength - 1);
   const cells = Array.from({ length: safeLength }, (_, cellIndex) => {
     const cell = currentCells[cellIndex] ?? "";
     return /^\d$/.test(cell) ? cell : "";
   });
+  // A paste that does not fit from the focused cell (typically a whole code pasted while a
+  // later cell has focus) is laid out from the first cell instead of being cut to the tail.
+  const pastedDigits = input.replace(/\D/g, "");
+  const safeIndex =
+    pastedDigits.length > 1 && pastedDigits.length > safeLength - focusedIndex ? 0 : focusedIndex;
   const insertedDigits = normalizeVerificationCode(input, safeLength - safeIndex);
 
   if (!insertedDigits) {