@scripso-homepad/ui 0.4.29 → 0.4.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.29",
+  "version": "0.4.31",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/components/Calendar.tsx

@@ -77,27 +77,20 @@ export type CalendarRangeProps = CalendarBaseProps & {
 export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
 
 function resolveDayCellStyle(day: CalendarDayCell): StyleProp<ViewStyle> {
-  if (day.isDisabled) {
-    return [calendarDropdownMetrics.dayCell];
-  }
-
   if (day.isSelected) {
     return [calendarDropdownMetrics.dayCell, calendarDropdownMetrics.dayCellSelected];
   }
 
+  const useMutedBackground =
+    day.inCurrentMonth && !day.isToday && (day.isPast || day.isDisabled);
+
   return [
     calendarDropdownMetrics.dayCell,
-    day.inCurrentMonth && day.isPast && !day.isToday
-      ? calendarDropdownMetrics.dayCellPast
-      : null,
+    useMutedBackground ? calendarDropdownMetrics.dayCellPast : null,
   ];
 }
 
 function resolveDayLabelStyle(day: CalendarDayCell): StyleProp<TextStyle> {
-  if (day.isDisabled) {
-    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelDisabled];
-  }
-
   if (day.isSelected) {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelSelected];
   }
@@ -110,7 +103,7 @@ function resolveDayLabelStyle(day: CalendarDayCell): StyleProp<TextStyle> {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelToday];
   }
 
-  if (day.isPast) {
+  if (day.isPast || day.isDisabled) {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelMuted];
   }
 
@@ -364,7 +357,9 @@ export function Calendar(props: CalendarProps) {
               >
                 <Text style={resolveDayLabelStyle(day)}>{day.date.getDate()}</Text>
                 {day.isToday && day.inCurrentMonth && !day.isSelected ? (
-                  <View style={calendarDropdownMetrics.todayDot} />
+                  <View style={calendarDropdownMetrics.todayDotWrap}>
+                    <View style={calendarDropdownMetrics.todayDot} />
+                  </View>
                 ) : null}
               </Pressable>
             ))}

package/src/components/CountryCodeSelector.tsx

@@ -42,6 +42,10 @@ export interface CountryCodeSelectorProps {
   /** Country list (defaults to built-in list). */
   options?: Country[];
   disabled?: boolean;
+  /** Outer trigger height. Defaults to shared input height. */
+  height?: number;
+  /** Trigger border color. Defaults to shared input border token. */
+  borderColor?: string;
   style?: StyleProp<ViewStyle>;
   className?: string;
 }
@@ -70,6 +74,8 @@ export function CountryCodeSelector({
   onValueChange,
   options = countries,
   disabled = false,
+  height = TRIGGER_HEIGHT,
+  borderColor = colors.stormGray50,
   style,
   className,
 }: CountryCodeSelectorProps) {
@@ -157,6 +163,7 @@ export function CountryCodeSelector({
         onPress={handleOpen}
         style={[
           styles.trigger,
+          { height, borderColor },
           disabled ? styles.triggerDisabled : styles.triggerEnabled,
           Platform.OS === "web" ? styles.triggerWeb : null,
         ]}
@@ -207,15 +214,14 @@ const styles = StyleSheet.create({
     height: TRIGGER_HEIGHT,
     borderRadius: radii.lg,
     borderWidth: 1,
-    padding: spacing.lg,
+    paddingHorizontal: spacing.lg,
+    paddingVertical: 0,
     gap: spacing.sm,
   },
   triggerEnabled: {
-    borderColor: colors.stormGray50,
     backgroundColor: colors.white,
   },
   triggerDisabled: {
-    borderColor: colors.stormGray50,
     backgroundColor: colors.stormGray50,
   },
   triggerWeb: {

package/src/components/PhoneInput.tsx

@@ -16,6 +16,7 @@ import { Label } from "./Label";
 import {
   getInputFieldStyles,
   inputFieldMetrics,
+  INPUT_HEIGHT,
   INPUT_ICON_GAP,
   INPUT_OUTLINE_WIDTH,
   resolveInputVisualState,
@@ -38,6 +39,8 @@ export interface PhoneInputProps extends Omit<TextInputProps, "style"> {
   onCountryCodeChange?: (countryCode: string) => void;
   error?: string;
   hint?: string;
+  /** Outer field height for country trigger + national number. Defaults to shared input height. */
+  height?: number;
   containerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<TextStyle>;
   className?: string;
@@ -60,6 +63,7 @@ export function PhoneInput({
   onCountryCodeChange,
   error,
   hint,
+  height = INPUT_HEIGHT,
   containerStyle,
   style,
   className,
@@ -124,6 +128,7 @@ export function PhoneInput({
             value={countryCode}
             onValueChange={onCountryCodeChange}
             disabled={isDisabled}
+            height={height}
             style={styles.countrySelector}
           />
         </View>
@@ -132,6 +137,7 @@ export function PhoneInput({
             style={[
               inputFieldMetrics.containerBase,
               inputFieldMetrics.container,
+              { height },
               phoneFieldStyles.container,
               styles.phoneField,
             ]}

package/src/theme/calendar.ts

@@ -35,7 +35,7 @@ export const CALENDAR_NAV_ICON_COLOR = colors.stormGray850;
 export const CALENDAR_FIELD_ICON_SIZE = 20;
 export const CALENDAR_FIELD_WIDTH = CALENDAR_PANEL_WIDTH;
 export const CALENDAR_FIELD_HEIGHT = 52;
-export const CALENDAR_FIELD_PADDING = spacing.lg;
+export const CALENDAR_FIELD_PADDING = 14;
 export const CALENDAR_FIELD_GAP = spacing.sm;
 export const CALENDAR_FIELD_PLACEHOLDER_COLOR = colors.stormGray200;
 
@@ -217,18 +217,19 @@ export const calendarDropdownMetrics = StyleSheet.create({
   },
   dayLabelDisabled: {
     color: colors.stormGray300,
-    opacity: 0.5,
   },
-  todayDot: {
+  todayDotWrap: {
     position: "absolute",
-    bottom: 5,
-    left: "50%",
+    bottom: 4,
+    left: 0,
+    right: 0,
+    alignItems: "center",
+  },
+  todayDot: {
     width: CALENDAR_DAY_DOT_SIZE,
     height: CALENDAR_DAY_DOT_SIZE,
-    borderRadius: 15,
+    borderRadius: CALENDAR_DAY_DOT_SIZE / 2,
     backgroundColor: CALENDAR_TODAY_DOT_COLOR,
-    marginLeft: -(CALENDAR_DAY_DOT_SIZE / 2),
-    zIndex: 1,
   },
   pickerBody: {
     width: CALENDAR_DAY_GRID_WIDTH,
@@ -347,7 +348,8 @@ export const calendarFieldMetrics = StyleSheet.create({
     paddingVertical: 0,
     paddingHorizontal: 0,
     margin: 0,
-    ...(Platform.OS === "android" ? { includeFontPadding: false } : null),
+    includeFontPadding: false,
+    ...(Platform.OS === "android" ? { textAlignVertical: "center" as const } : null),
     ...(Platform.OS === "web"
       ? ({
           outlineStyle: "none",

package/src/web/layout/SidebarNavItem.tsx

@@ -38,7 +38,9 @@ export function SidebarNavItem({ item, isOpen, isActive, onNavigate }: SidebarNa
         'relative flex items-center rounded-xl px-4 py-3 transition-[background-color,color,gap,padding] duration-300 ease-in-out',
         isOpen ? 'w-full gap-4' : 'w-full justify-center gap-0 px-3',
         item.disabled && 'pointer-events-none opacity-50',
-        isActive ? 'bg-black/12 text-white shadow-none' : 'text-navy-100 shadow-none hover:bg-white/5',
+        isActive
+          ? 'bg-black/12 text-white shadow-none'
+          : 'text-navy-100 shadow-none hover:bg-white/5',
       )}
     >
       <span