@scripso-homepad/ui 0.4.23 → 0.4.25

package/dist/index.d.cts

@@ -70,6 +70,8 @@ interface SelectBaseProps {
     fieldClassName?: string;
     menuClassName?: string;
     labelClassName?: string;
+    /** Styles merged into the field label. */
+    labelStyles?: StyleProp<TextStyle>;
     errorClassName?: string;
     hintClassName?: string;
     /** Shorter option rows for compact filter-style dropdowns. */
@@ -91,7 +93,7 @@ interface MultipleSelectProps extends SelectBaseProps {
     onValueChange?: (value: string[]) => void;
 }
 type SelectProps = SingleSelectProps | MultipleSelectProps;
-declare function Select({ label, placeholder, value, onValueChange, options, leftIcon, multiple, disabled, error, invalid, hint, containerStyle, fieldStyle, className, fieldClassName, menuClassName, labelClassName, errorClassName, hintClassName, compact, allowDeselect, }: SelectProps): react.JSX.Element;
+declare function Select({ label, placeholder, value, onValueChange, options, leftIcon, multiple, disabled, error, invalid, hint, containerStyle, fieldStyle, className, fieldClassName, menuClassName, labelClassName, labelStyles, errorClassName, hintClassName, compact, allowDeselect, }: SelectProps): react.JSX.Element;
 
 interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     label?: string;
@@ -522,21 +524,21 @@ declare const shadows: {
         readonly shadowColor: "#082640";
         readonly shadowOffset: {
             readonly width: 0;
-            readonly height: 4;
+            readonly height: 1;
         };
-        readonly shadowOpacity: 0.05;
-        readonly shadowRadius: 20;
-        readonly elevation: 2;
+        readonly shadowOpacity: 0.06;
+        readonly shadowRadius: 4;
+        readonly elevation: 1;
     };
     readonly cardLg: {
         readonly shadowColor: "#082640";
         readonly shadowOffset: {
             readonly width: 0;
-            readonly height: 4;
+            readonly height: 2;
         };
-        readonly shadowOpacity: 0.1;
-        readonly shadowRadius: 20;
-        readonly elevation: 4;
+        readonly shadowOpacity: 0.08;
+        readonly shadowRadius: 6;
+        readonly elevation: 2;
     };
 };
 

package/dist/index.d.ts

@@ -70,6 +70,8 @@ interface SelectBaseProps {
     fieldClassName?: string;
     menuClassName?: string;
     labelClassName?: string;
+    /** Styles merged into the field label. */
+    labelStyles?: StyleProp<TextStyle>;
     errorClassName?: string;
     hintClassName?: string;
     /** Shorter option rows for compact filter-style dropdowns. */
@@ -91,7 +93,7 @@ interface MultipleSelectProps extends SelectBaseProps {
     onValueChange?: (value: string[]) => void;
 }
 type SelectProps = SingleSelectProps | MultipleSelectProps;
-declare function Select({ label, placeholder, value, onValueChange, options, leftIcon, multiple, disabled, error, invalid, hint, containerStyle, fieldStyle, className, fieldClassName, menuClassName, labelClassName, errorClassName, hintClassName, compact, allowDeselect, }: SelectProps): react.JSX.Element;
+declare function Select({ label, placeholder, value, onValueChange, options, leftIcon, multiple, disabled, error, invalid, hint, containerStyle, fieldStyle, className, fieldClassName, menuClassName, labelClassName, labelStyles, errorClassName, hintClassName, compact, allowDeselect, }: SelectProps): react.JSX.Element;
 
 interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     label?: string;
@@ -522,21 +524,21 @@ declare const shadows: {
         readonly shadowColor: "#082640";
         readonly shadowOffset: {
             readonly width: 0;
-            readonly height: 4;
+            readonly height: 1;
         };
-        readonly shadowOpacity: 0.05;
-        readonly shadowRadius: 20;
-        readonly elevation: 2;
+        readonly shadowOpacity: 0.06;
+        readonly shadowRadius: 4;
+        readonly elevation: 1;
     };
     readonly cardLg: {
         readonly shadowColor: "#082640";
         readonly shadowOffset: {
             readonly width: 0;
-            readonly height: 4;
+            readonly height: 2;
         };
-        readonly shadowOpacity: 0.1;
-        readonly shadowRadius: 20;
-        readonly elevation: 4;
+        readonly shadowOpacity: 0.08;
+        readonly shadowRadius: 6;
+        readonly elevation: 2;
     };
 };
 

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-KJYQA5OY.js';
-export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-KJYQA5OY.js';
+import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_HEIGHT, INPUT_OUTLINE_WIDTH, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-N73KHOZ4.js';
+export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-N73KHOZ4.js';
 import { createContext, useRef, useState, useMemo, useEffect, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
 import { Platform, StyleSheet, Animated, Easing, View, Pressable, Text, Modal, ScrollView, Image, TextInput, Dimensions } from 'react-native';
 import Svg2, { Path } from 'react-native-svg';
@@ -65,11 +65,11 @@ var selectValueTypography = {
   letterSpacing: 0,
   textAlign: "left"
 };
-var INPUT_OUTLINE_WIDTH = 2;
+var INPUT_OUTLINE_WIDTH2 = 2;
 function createOutlineStyle(ringColor) {
   return {
-    borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
-    borderWidth: INPUT_OUTLINE_WIDTH,
+    borderRadius: radii.lg + INPUT_OUTLINE_WIDTH2,
+    borderWidth: INPUT_OUTLINE_WIDTH2,
     borderColor: ringColor,
     padding: 0,
     backgroundColor: colors.transparent,
@@ -79,8 +79,8 @@ function createOutlineStyle(ringColor) {
   };
 }
 var defaultOutline = {
-  borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
-  borderWidth: INPUT_OUTLINE_WIDTH,
+  borderRadius: radii.lg + INPUT_OUTLINE_WIDTH2,
+  borderWidth: INPUT_OUTLINE_WIDTH2,
   borderColor: colors.transparent,
   padding: 0,
   backgroundColor: colors.transparent,
@@ -481,6 +481,7 @@ function Select({
   fieldClassName,
   menuClassName,
   labelClassName,
+  labelStyles,
   errorClassName,
   hintClassName,
   compact = false,
@@ -620,7 +621,15 @@ function Select({
   });
   const dropdownTop = anchor ? resolveSelectDropdownTop(anchor, dropdownHeight) : 0;
   return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsx(Label, { disabled: isEffectivelyDisabled, style: styles.label, className: labelClassName, children: label }) : null,
+    label ? /* @__PURE__ */ jsx(
+      Label,
+      {
+        disabled: isEffectivelyDisabled,
+        style: [styles.label, labelStyles],
+        className: labelClassName,
+        children: label
+      }
+    ) : null,
     /* @__PURE__ */ jsx(View, { style: fieldStyles.outline, children: /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -920,7 +929,7 @@ var DROPDOWN_HEIGHT = 186;
 var DROPDOWN_PADDING = 8;
 var OPTION_GAP = 10;
 var OPTION_HEIGHT = 35;
-var TRIGGER_HEIGHT = 52;
+var TRIGGER_HEIGHT = INPUT_HEIGHT;
 var CHEVRON_SIZE = 16;
 function resolveDropdownTop(anchor) {
   const windowHeight = Dimensions.get("window").height;
@@ -1127,6 +1136,13 @@ var styles3 = StyleSheet.create({
     color: colors.slateBlue
   }
 });
+var countryOutlineSlot = {
+  borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
+  borderWidth: INPUT_OUTLINE_WIDTH,
+  borderColor: colors.transparent,
+  padding: 0,
+  backgroundColor: colors.transparent
+};
 function sanitizePhoneDigits(value) {
   return value.replace(/\D/g, "");
 }
@@ -1187,7 +1203,7 @@ function PhoneInput({
       }
     ) : null,
     /* @__PURE__ */ jsxs(View, { style: styles4.row, children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(View, { style: [countryOutlineSlot, styles4.countryOutline], children: /* @__PURE__ */ jsx(
         CountryCodeSelector,
         {
           value: countryCode,
@@ -1195,7 +1211,7 @@ function PhoneInput({
           disabled: isDisabled,
           style: styles4.countrySelector
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles4.phoneOutline], children: /* @__PURE__ */ jsx(
         View,
         {
@@ -1237,12 +1253,14 @@ var styles4 = StyleSheet.create({
   },
   row: {
     flexDirection: "row",
-    alignItems: "flex-start",
+    alignItems: "center",
     gap: INPUT_ICON_GAP
   },
+  countryOutline: {
+    flexShrink: 0
+  },
   countrySelector: {
-    flexShrink: 0,
-    alignSelf: "flex-start"
+    flexShrink: 0
   },
   phoneOutline: {
     flex: 1