@scripso-homepad/ui 0.4.12 → 0.4.14

package/dist/index.d.cts

@@ -40,13 +40,15 @@ interface InputProps extends TextInputProps {
     /** Styles merged into the bordered field container. */
     fieldStyle?: StyleProp<ViewStyle>;
     labelClassName?: string;
+    /** Styles merged into the field label. */
+    labelStyles?: StyleProp<TextStyle>;
     inputClassName?: string;
     errorClassName?: string;
     hintClassName?: string;
     /** When `secureTextEntry` is set, show a toggleable eye icon. Pass `false` to disable. */
     showPasswordToggle?: boolean;
 }
-declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
+declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -96,11 +98,13 @@ interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     style?: StyleProp<TextStyle>;
     className?: string;
     labelClassName?: string;
+    /** Styles merged into the field label. */
+    labelStyles?: StyleProp<TextStyle>;
     inputClassName?: string;
     errorClassName?: string;
     hintClassName?: string;
 }
-declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, ...props }: PhoneInputProps): react.JSX.Element;
+declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, ...props }: PhoneInputProps): react.JSX.Element;
 
 type Country = {
     code: string;
@@ -428,6 +432,37 @@ declare const fontSize: {
     readonly xl: 24;
     readonly xxl: 32;
 };
+/**
+ * Canonical Homepad type scale (matches `.typography-*` in `src/web/styles/typography.css`).
+ * font-size / line-height pairs:
+ * 12/16 · 14/19 · 18/24 · 20/27 · 24/25 · 32/34
+ */
+declare const typographyScale: {
+    readonly 12: {
+        readonly fontSize: 12;
+        readonly lineHeight: 16;
+    };
+    readonly 14: {
+        readonly fontSize: 14;
+        readonly lineHeight: 19;
+    };
+    readonly 18: {
+        readonly fontSize: 18;
+        readonly lineHeight: 24;
+    };
+    readonly 20: {
+        readonly fontSize: 20;
+        readonly lineHeight: 27;
+    };
+    readonly 24: {
+        readonly fontSize: 24;
+        readonly lineHeight: 25;
+    };
+    readonly 32: {
+        readonly fontSize: 32;
+        readonly lineHeight: 34;
+    };
+};
 declare const fontWeight: {
     regular: "400";
     medium: "500";
@@ -437,12 +472,12 @@ declare const fontWeight: {
 declare const fonts: {
     readonly sans: "Noto Sans Armenian";
 };
-/** Input label typography — matches Figma (Medium, 100% line-height). */
+/** Input label typography — Medium, typography-12 scale. */
 declare const labelTypography: {
     readonly fontFamily: "Noto Sans Armenian";
     readonly fontSize: 12;
     readonly fontWeight: "500";
-    readonly lineHeight: 12;
+    readonly lineHeight: 16;
     readonly letterSpacing: 0;
 };
 /** Button label typography — SemiBold. */
@@ -485,4 +520,4 @@ declare const shadows: {
     };
 };
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, useCalendarLocale };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, typographyScale, useCalendarLocale };

package/dist/index.d.ts

@@ -40,13 +40,15 @@ interface InputProps extends TextInputProps {
     /** Styles merged into the bordered field container. */
     fieldStyle?: StyleProp<ViewStyle>;
     labelClassName?: string;
+    /** Styles merged into the field label. */
+    labelStyles?: StyleProp<TextStyle>;
     inputClassName?: string;
     errorClassName?: string;
     hintClassName?: string;
     /** When `secureTextEntry` is set, show a toggleable eye icon. Pass `false` to disable. */
     showPasswordToggle?: boolean;
 }
-declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
+declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -96,11 +98,13 @@ interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     style?: StyleProp<TextStyle>;
     className?: string;
     labelClassName?: string;
+    /** Styles merged into the field label. */
+    labelStyles?: StyleProp<TextStyle>;
     inputClassName?: string;
     errorClassName?: string;
     hintClassName?: string;
 }
-declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, ...props }: PhoneInputProps): react.JSX.Element;
+declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, ...props }: PhoneInputProps): react.JSX.Element;
 
 type Country = {
     code: string;
@@ -428,6 +432,37 @@ declare const fontSize: {
     readonly xl: 24;
     readonly xxl: 32;
 };
+/**
+ * Canonical Homepad type scale (matches `.typography-*` in `src/web/styles/typography.css`).
+ * font-size / line-height pairs:
+ * 12/16 · 14/19 · 18/24 · 20/27 · 24/25 · 32/34
+ */
+declare const typographyScale: {
+    readonly 12: {
+        readonly fontSize: 12;
+        readonly lineHeight: 16;
+    };
+    readonly 14: {
+        readonly fontSize: 14;
+        readonly lineHeight: 19;
+    };
+    readonly 18: {
+        readonly fontSize: 18;
+        readonly lineHeight: 24;
+    };
+    readonly 20: {
+        readonly fontSize: 20;
+        readonly lineHeight: 27;
+    };
+    readonly 24: {
+        readonly fontSize: 24;
+        readonly lineHeight: 25;
+    };
+    readonly 32: {
+        readonly fontSize: 32;
+        readonly lineHeight: 34;
+    };
+};
 declare const fontWeight: {
     regular: "400";
     medium: "500";
@@ -437,12 +472,12 @@ declare const fontWeight: {
 declare const fonts: {
     readonly sans: "Noto Sans Armenian";
 };
-/** Input label typography — matches Figma (Medium, 100% line-height). */
+/** Input label typography — Medium, typography-12 scale. */
 declare const labelTypography: {
     readonly fontFamily: "Noto Sans Armenian";
     readonly fontSize: 12;
     readonly fontWeight: "500";
-    readonly lineHeight: 12;
+    readonly lineHeight: 16;
     readonly letterSpacing: 0;
 };
 /** Button label typography — SemiBold. */
@@ -485,4 +520,4 @@ declare const shadows: {
     };
 };
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, useCalendarLocale };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, typographyScale, useCalendarLocale };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-YSDLHEJ7.js';
-export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray } from './chunk-YSDLHEJ7.js';
+import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-ANDWP4YU.js';
+export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-ANDWP4YU.js';
 import { createContext, useRef, useState, useMemo, useEffect, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
 import { Platform, StyleSheet, Animated, Easing, View, Pressable, Text, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
 import Svg2, { Path } from 'react-native-svg';
@@ -757,12 +757,12 @@ var styles = StyleSheet.create({
   },
   error: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.inputError
   },
   hint: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.stormGray300
   }
 });
@@ -1032,11 +1032,12 @@ var styles2 = StyleSheet.create({
   },
   flag: {
     fontSize: 18,
-    lineHeight: 22
+    lineHeight: 24
   },
   dialCode: {
     fontSize: fontSize.md,
-    fontWeight: fontWeight.medium
+    fontWeight: fontWeight.medium,
+    lineHeight: 19
   },
   overlay: {
     flex: 1,
@@ -1092,6 +1093,7 @@ function PhoneInput({
   style,
   className,
   labelClassName,
+  labelStyles,
   inputClassName,
   errorClassName,
   hintClassName,
@@ -1124,7 +1126,15 @@ function PhoneInput({
   }
   const helperMessage = error ?? hint;
   return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsx(Label, { disabled: isDisabled, className: labelClassName, children: label }) : null,
+    label ? /* @__PURE__ */ jsx(
+      Label,
+      {
+        disabled: isDisabled,
+        className: labelClassName,
+        style: labelStyles,
+        children: label
+      }
+    ) : null,
     /* @__PURE__ */ jsxs(View, { style: styles3.row, children: [
       /* @__PURE__ */ jsx(
         CountryCodeSelector,
@@ -1135,38 +1145,36 @@ function PhoneInput({
           style: styles3.countrySelector
         }
       ),
-      /* @__PURE__ */ jsxs(View, { style: styles3.phoneColumn, children: [
-        /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles3.phoneOutline], children: /* @__PURE__ */ jsx(
-          View,
-          {
-            style: [
-              inputFieldMetrics.container,
-              phoneFieldStyles.container,
-              styles3.phoneField
-            ],
-            children: /* @__PURE__ */ jsx(
-              TextInput,
-              {
-                ref: inputRef,
-                style: [
-                  inputFieldMetrics.input,
-                  phoneFieldStyles.text,
-                  style
-                ],
-                keyboardType: "phone-pad",
-                placeholderTextColor: phoneFieldStyles.placeholder,
-                editable,
-                onFocus: handleFocus,
-                onBlur: handleBlur,
-                accessibilityState: { disabled: isDisabled },
-                ...props
-              }
-            )
-          }
-        ) }),
-        helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles3.error : styles3.hint, children: helperMessage }) : null
-      ] })
-    ] })
+      /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles3.phoneOutline], children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: [
+            inputFieldMetrics.container,
+            phoneFieldStyles.container,
+            styles3.phoneField
+          ],
+          children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ref: inputRef,
+              style: [
+                inputFieldMetrics.input,
+                phoneFieldStyles.text,
+                style
+              ],
+              keyboardType: "phone-pad",
+              placeholderTextColor: error ? colors.inputError : phoneFieldStyles.placeholder,
+              editable,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              accessibilityState: { disabled: isDisabled },
+              ...props
+            }
+          )
+        }
+      ) })
+    ] }),
+    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles3.error : styles3.hint, children: helperMessage }) : null
   ] });
 }
 var styles3 = StyleSheet.create({
@@ -1183,12 +1191,8 @@ var styles3 = StyleSheet.create({
     flexShrink: 0,
     alignSelf: "flex-start"
   },
-  phoneColumn: {
-    flex: 1,
-    gap: spacing.sm
-  },
   phoneOutline: {
-    width: "100%"
+    flex: 1
   },
   phoneField: {
     flex: 1
@@ -1277,7 +1281,7 @@ var calendarLabelTypography = {
   fontFamily: fonts.sans,
   fontSize: fontSize.sm,
   fontWeight: fontWeight.medium,
-  lineHeight: fontSize.sm,
+  lineHeight: 16,
   letterSpacing: 0,
   color: colors.slateBlue
 };
@@ -1285,7 +1289,7 @@ var calendarFieldTypography = {
   fontFamily: fonts.sans,
   fontSize: fontSize.md,
   fontWeight: fontWeight.regular,
-  lineHeight: fontSize.md,
+  lineHeight: 19,
   letterSpacing: 0,
   textAlign: "left"
 };
@@ -1323,7 +1327,7 @@ var calendarDropdownMetrics = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.bold,
-    lineHeight: 18,
+    lineHeight: 19,
     letterSpacing: 0,
     color: colors.stormGray850
   },
@@ -1364,7 +1368,7 @@ var calendarDropdownMetrics = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: fontSize.sm,
     fontWeight: fontWeight.regular,
-    lineHeight: fontSize.sm,
+    lineHeight: 16,
     letterSpacing: 0,
     textAlign: "center",
     color: colors.stormGray300,
@@ -1406,7 +1410,7 @@ var calendarDropdownMetrics = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.regular,
-    lineHeight: 18,
+    lineHeight: 19,
     letterSpacing: 0,
     textAlign: "center",
     color: colors.navy,
@@ -1477,7 +1481,7 @@ var calendarDropdownMetrics = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.regular,
-    lineHeight: 18,
+    lineHeight: 19,
     letterSpacing: 0,
     textAlign: "center",
     color: colors.navy,
@@ -2508,12 +2512,12 @@ var styles4 = StyleSheet.create({
   },
   error: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.inputError
   },
   hint: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.stormGray300
   }
 });