@scripso-homepad/ui 0.4.29 → 0.4.31

package/dist/index.d.cts

@@ -101,6 +101,8 @@ 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;
@@ -111,7 +113,7 @@ interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     errorClassName?: string;
     hintClassName?: string;
 }
-declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, onChangeText, ...props }: PhoneInputProps): react.JSX.Element;
+declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, height, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, onChangeText, ...props }: PhoneInputProps): react.JSX.Element;
 
 type Country = {
     code: string;
@@ -128,10 +130,14 @@ 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;
 }
-declare function CountryCodeSelector({ value, onValueChange, options, disabled, style, className, }: CountryCodeSelectorProps): react.JSX.Element;
+declare function CountryCodeSelector({ value, onValueChange, options, disabled, height, borderColor, style, className, }: CountryCodeSelectorProps): react.JSX.Element;
 
 type CountryFlagProps = {
     code: string;

package/dist/index.d.ts

@@ -101,6 +101,8 @@ 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;
@@ -111,7 +113,7 @@ interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     errorClassName?: string;
     hintClassName?: string;
 }
-declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, onChangeText, ...props }: PhoneInputProps): react.JSX.Element;
+declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, height, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, onChangeText, ...props }: PhoneInputProps): react.JSX.Element;
 
 type Country = {
     code: string;
@@ -128,10 +130,14 @@ 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;
 }
-declare function CountryCodeSelector({ value, onValueChange, options, disabled, style, className, }: CountryCodeSelectorProps): react.JSX.Element;
+declare function CountryCodeSelector({ value, onValueChange, options, disabled, height, borderColor, style, className, }: CountryCodeSelectorProps): react.JSX.Element;
 
 type CountryFlagProps = {
     code: string;

package/dist/index.js

@@ -945,6 +945,8 @@ function CountryCodeSelector({
   onValueChange,
   options = countries,
   disabled = false,
+  height = TRIGGER_HEIGHT,
+  borderColor = colors.stormGray50,
   style,
   className
 }) {
@@ -970,8 +972,8 @@ function CountryCodeSelector({
   }
   function handleOpen() {
     if (disabled) return;
-    triggerRef.current?.measureInWindow((x, y, width, height) => {
-      setAnchor({ x, y, width, height });
+    triggerRef.current?.measureInWindow((x, y, width, height2) => {
+      setAnchor({ x, y, width, height: height2 });
       setOpen(true);
     });
   }
@@ -1024,6 +1026,7 @@ function CountryCodeSelector({
         onPress: handleOpen,
         style: [
           styles3.trigger,
+          { height, borderColor },
           disabled ? styles3.triggerDisabled : styles3.triggerEnabled,
           Platform.OS === "web" ? styles3.triggerWeb : null
         ],
@@ -1073,15 +1076,14 @@ var styles3 = 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: {
@@ -1152,6 +1154,7 @@ function PhoneInput({
   onCountryCodeChange,
   error,
   hint,
+  height = INPUT_HEIGHT,
   containerStyle,
   style,
   className,
@@ -1209,6 +1212,7 @@ function PhoneInput({
           value: countryCode,
           onValueChange: onCountryCodeChange,
           disabled: isDisabled,
+          height,
           style: styles4.countrySelector
         }
       ) }),
@@ -1218,6 +1222,7 @@ function PhoneInput({
           style: [
             inputFieldMetrics.containerBase,
             inputFieldMetrics.container,
+            { height },
             phoneFieldStyles.container,
             styles4.phoneField
           ],
@@ -1343,7 +1348,7 @@ var CALENDAR_NAV_ICON_COLOR = colors.stormGray850;
 var CALENDAR_FIELD_ICON_SIZE = 20;
 var CALENDAR_FIELD_WIDTH = CALENDAR_PANEL_WIDTH;
 var CALENDAR_FIELD_HEIGHT = 52;
-var CALENDAR_FIELD_PADDING = spacing.lg;
+var CALENDAR_FIELD_PADDING = 14;
 var CALENDAR_FIELD_GAP = spacing.sm;
 var CALENDAR_FIELD_PLACEHOLDER_COLOR = colors.stormGray200;
 var CALENDAR_PANEL_TOTAL_HEIGHT = CALENDAR_PANEL_PADDING * 2 + CALENDAR_HEADER_HEIGHT + CALENDAR_PANEL_GAP * 2 + CALENDAR_WEEKDAY_CELL_SIZE + CALENDAR_DAY_GRID_HEIGHT;
@@ -1505,19 +1510,20 @@ var calendarDropdownMetrics = StyleSheet.create({
     color: colors.stormGray300
   },
   dayLabelDisabled: {
-    color: colors.stormGray300,
-    opacity: 0.5
+    color: colors.stormGray300
   },
-  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,
-    backgroundColor: CALENDAR_TODAY_DOT_COLOR,
-    marginLeft: -1.5,
-    zIndex: 1
+    borderRadius: CALENDAR_DAY_DOT_SIZE / 2,
+    backgroundColor: CALENDAR_TODAY_DOT_COLOR
   },
   pickerBody: {
     width: CALENDAR_DAY_GRID_WIDTH,
@@ -1618,7 +1624,8 @@ var calendarFieldMetrics = StyleSheet.create({
     paddingVertical: 0,
     paddingHorizontal: 0,
     margin: 0,
-    ...Platform.OS === "android" ? { includeFontPadding: false } : null,
+    includeFontPadding: false,
+    ...Platform.OS === "android" ? { textAlignVertical: "center" } : null,
     ...Platform.OS === "web" ? {
       outlineStyle: "none"
     } : null
@@ -2005,21 +2012,16 @@ function useCalendarLocale(locale) {
   );
 }
 function resolveDayCellStyle(day) {
-  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) {
-  if (day.isDisabled) {
-    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelDisabled];
-  }
   if (day.isSelected) {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelSelected];
   }
@@ -2029,7 +2031,7 @@ function resolveDayLabelStyle(day) {
   if (day.isToday) {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelToday];
   }
-  if (day.isPast) {
+  if (day.isPast || day.isDisabled) {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelMuted];
   }
   return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelFuture];
@@ -2220,7 +2222,7 @@ function Calendar(props) {
           style: resolveDayCellStyle(day),
           children: [
             /* @__PURE__ */ jsx(Text, { style: resolveDayLabelStyle(day), children: day.date.getDate() }),
-            day.isToday && day.inCurrentMonth && !day.isSelected ? /* @__PURE__ */ jsx(View, { style: calendarDropdownMetrics.todayDot }) : null
+            day.isToday && day.inCurrentMonth && !day.isSelected ? /* @__PURE__ */ jsx(View, { style: calendarDropdownMetrics.todayDotWrap, children: /* @__PURE__ */ jsx(View, { style: calendarDropdownMetrics.todayDot }) }) : null
           ]
         },
         day.date.toISOString()