@scripso-homepad/ui 0.4.6 → 0.4.8

package/dist/index.d.cts

@@ -70,6 +70,8 @@ interface SelectBaseProps {
     labelClassName?: string;
     errorClassName?: string;
     hintClassName?: string;
+    /** Shorter option rows for compact filter-style dropdowns. */
+    compact?: boolean;
 }
 interface SingleSelectProps extends SelectBaseProps {
     multiple?: false;
@@ -82,7 +84,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, }: SelectProps): react.JSX.Element;
+declare function Select({ label, placeholder, value, onValueChange, options, leftIcon, multiple, disabled, error, invalid, hint, containerStyle, fieldStyle, className, fieldClassName, menuClassName, labelClassName, errorClassName, hintClassName, compact, }: SelectProps): react.JSX.Element;
 
 interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     label?: string;
@@ -257,18 +259,18 @@ declare const stormGray: {
 type StormGrayStep = keyof typeof stormGray;
 /** Navy scale — Figma steps 0 → 8.5 */
 declare const navy: {
-    readonly "0": "#f8f9fb";
-    readonly "0.5": "#e5e9ef";
-    readonly "1": "#cdd3df";
-    readonly "1.5": "#b4bece";
-    readonly "2": "#9ca8be";
-    readonly "3": "#6a7d9e";
-    readonly "4": "#39527d";
-    readonly "5": "#08275d";
-    readonly "6": "#061f4a";
-    readonly "7": "#051738";
-    readonly "8": "#031025";
-    readonly "8.5": "#020c1c";
+    readonly "0": "#f6fafe";
+    readonly "0.5": "#dee5eb";
+    readonly "1": "#c6d0d8";
+    readonly "1.5": "#afbac5";
+    readonly "2": "#97a5b2";
+    readonly "3": "#677b8c";
+    readonly "4": "#385066";
+    readonly "5": "#082640";
+    readonly "6": "#061e33";
+    readonly "7": "#051726";
+    readonly "8": "#030f1a";
+    readonly "8.5": "#020b13";
 };
 type NavyStep = keyof typeof navy;
 /** Ruby Red scale — Figma steps 0 → 8.5 */
@@ -307,7 +309,7 @@ type EmeraldGreenStep = keyof typeof emeraldGreen;
 declare const brand: {
     readonly slateBlue: "#182e3c";
     readonly stormGray: "#455765";
-    readonly navy: "#08275d";
+    readonly navy: "#082640";
     readonly rubyRed: "#ae0011";
     readonly emeraldGreen: "#279d54";
 };
@@ -341,20 +343,20 @@ declare const colors: {
     readonly rubyRed850: "#340005";
     /** Primary brand ruby red — Figma Ruby Red 5 */
     readonly rubyRed: "#ae0011";
-    readonly navy0: "#f8f9fb";
-    readonly navy50: "#e5e9ef";
-    readonly navy100: "#cdd3df";
-    readonly navy150: "#b4bece";
-    readonly navy200: "#9ca8be";
-    readonly navy300: "#6a7d9e";
-    readonly navy400: "#39527d";
-    readonly navy500: "#08275d";
-    readonly navy600: "#061f4a";
-    readonly navy700: "#051738";
-    readonly navy800: "#031025";
-    readonly navy850: "#020c1c";
+    readonly navy0: "#f6fafe";
+    readonly navy50: "#dee5eb";
+    readonly navy100: "#c6d0d8";
+    readonly navy150: "#afbac5";
+    readonly navy200: "#97a5b2";
+    readonly navy300: "#677b8c";
+    readonly navy400: "#385066";
+    readonly navy500: "#082640";
+    readonly navy600: "#061e33";
+    readonly navy700: "#051726";
+    readonly navy800: "#030f1a";
+    readonly navy850: "#020b13";
     /** Primary brand navy — Figma Navy 5 */
-    readonly navy: "#08275d";
+    readonly navy: "#082640";
     readonly stormGray0: "#fbfcfc";
     readonly stormGray50: "#eceef0";
     readonly stormGray100: "#dadde0";
@@ -390,7 +392,7 @@ declare const colors: {
     readonly errorLight: "#fee2e2";
     /** @deprecated Use `rubyRed` */
     readonly inputError: "#ae0011";
-    readonly inputOutlineFocus: "#e5e9ef";
+    readonly inputOutlineFocus: "#dee5eb";
     readonly inputOutlineError: "#f7dddf";
     readonly warning: "#92400e";
     readonly warningBg: "#fef3c7";
@@ -441,13 +443,13 @@ declare const labelTypography: {
     readonly lineHeight: 12;
     readonly letterSpacing: 0;
 };
-/** Button label typography — SemiBold; line-height slightly above 100% for RN clipping. */
+/** Button label typography — SemiBold. */
 declare const buttonTypography: {
     readonly lg: {
         readonly fontFamily: "Noto Sans Armenian";
         readonly fontSize: 14;
         readonly fontWeight: "600";
-        readonly lineHeight: 18;
+        readonly lineHeight: 19;
         readonly letterSpacing: 0;
     };
     readonly sm: {
@@ -460,7 +462,7 @@ declare const buttonTypography: {
 };
 declare const shadows: {
     readonly card: {
-        readonly shadowColor: "#08275d";
+        readonly shadowColor: "#082640";
         readonly shadowOffset: {
             readonly width: 0;
             readonly height: 4;
@@ -470,7 +472,7 @@ declare const shadows: {
         readonly elevation: 2;
     };
     readonly cardLg: {
-        readonly shadowColor: "#08275d";
+        readonly shadowColor: "#082640";
         readonly shadowOffset: {
             readonly width: 0;
             readonly height: 4;

package/dist/index.d.ts

@@ -70,6 +70,8 @@ interface SelectBaseProps {
     labelClassName?: string;
     errorClassName?: string;
     hintClassName?: string;
+    /** Shorter option rows for compact filter-style dropdowns. */
+    compact?: boolean;
 }
 interface SingleSelectProps extends SelectBaseProps {
     multiple?: false;
@@ -82,7 +84,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, }: SelectProps): react.JSX.Element;
+declare function Select({ label, placeholder, value, onValueChange, options, leftIcon, multiple, disabled, error, invalid, hint, containerStyle, fieldStyle, className, fieldClassName, menuClassName, labelClassName, errorClassName, hintClassName, compact, }: SelectProps): react.JSX.Element;
 
 interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     label?: string;
@@ -257,18 +259,18 @@ declare const stormGray: {
 type StormGrayStep = keyof typeof stormGray;
 /** Navy scale — Figma steps 0 → 8.5 */
 declare const navy: {
-    readonly "0": "#f8f9fb";
-    readonly "0.5": "#e5e9ef";
-    readonly "1": "#cdd3df";
-    readonly "1.5": "#b4bece";
-    readonly "2": "#9ca8be";
-    readonly "3": "#6a7d9e";
-    readonly "4": "#39527d";
-    readonly "5": "#08275d";
-    readonly "6": "#061f4a";
-    readonly "7": "#051738";
-    readonly "8": "#031025";
-    readonly "8.5": "#020c1c";
+    readonly "0": "#f6fafe";
+    readonly "0.5": "#dee5eb";
+    readonly "1": "#c6d0d8";
+    readonly "1.5": "#afbac5";
+    readonly "2": "#97a5b2";
+    readonly "3": "#677b8c";
+    readonly "4": "#385066";
+    readonly "5": "#082640";
+    readonly "6": "#061e33";
+    readonly "7": "#051726";
+    readonly "8": "#030f1a";
+    readonly "8.5": "#020b13";
 };
 type NavyStep = keyof typeof navy;
 /** Ruby Red scale — Figma steps 0 → 8.5 */
@@ -307,7 +309,7 @@ type EmeraldGreenStep = keyof typeof emeraldGreen;
 declare const brand: {
     readonly slateBlue: "#182e3c";
     readonly stormGray: "#455765";
-    readonly navy: "#08275d";
+    readonly navy: "#082640";
     readonly rubyRed: "#ae0011";
     readonly emeraldGreen: "#279d54";
 };
@@ -341,20 +343,20 @@ declare const colors: {
     readonly rubyRed850: "#340005";
     /** Primary brand ruby red — Figma Ruby Red 5 */
     readonly rubyRed: "#ae0011";
-    readonly navy0: "#f8f9fb";
-    readonly navy50: "#e5e9ef";
-    readonly navy100: "#cdd3df";
-    readonly navy150: "#b4bece";
-    readonly navy200: "#9ca8be";
-    readonly navy300: "#6a7d9e";
-    readonly navy400: "#39527d";
-    readonly navy500: "#08275d";
-    readonly navy600: "#061f4a";
-    readonly navy700: "#051738";
-    readonly navy800: "#031025";
-    readonly navy850: "#020c1c";
+    readonly navy0: "#f6fafe";
+    readonly navy50: "#dee5eb";
+    readonly navy100: "#c6d0d8";
+    readonly navy150: "#afbac5";
+    readonly navy200: "#97a5b2";
+    readonly navy300: "#677b8c";
+    readonly navy400: "#385066";
+    readonly navy500: "#082640";
+    readonly navy600: "#061e33";
+    readonly navy700: "#051726";
+    readonly navy800: "#030f1a";
+    readonly navy850: "#020b13";
     /** Primary brand navy — Figma Navy 5 */
-    readonly navy: "#08275d";
+    readonly navy: "#082640";
     readonly stormGray0: "#fbfcfc";
     readonly stormGray50: "#eceef0";
     readonly stormGray100: "#dadde0";
@@ -390,7 +392,7 @@ declare const colors: {
     readonly errorLight: "#fee2e2";
     /** @deprecated Use `rubyRed` */
     readonly inputError: "#ae0011";
-    readonly inputOutlineFocus: "#e5e9ef";
+    readonly inputOutlineFocus: "#dee5eb";
     readonly inputOutlineError: "#f7dddf";
     readonly warning: "#92400e";
     readonly warningBg: "#fef3c7";
@@ -441,13 +443,13 @@ declare const labelTypography: {
     readonly lineHeight: 12;
     readonly letterSpacing: 0;
 };
-/** Button label typography — SemiBold; line-height slightly above 100% for RN clipping. */
+/** Button label typography — SemiBold. */
 declare const buttonTypography: {
     readonly lg: {
         readonly fontFamily: "Noto Sans Armenian";
         readonly fontSize: 14;
         readonly fontWeight: "600";
-        readonly lineHeight: 18;
+        readonly lineHeight: 19;
         readonly letterSpacing: 0;
     };
     readonly sm: {
@@ -460,7 +462,7 @@ declare const buttonTypography: {
 };
 declare const shadows: {
     readonly card: {
-        readonly shadowColor: "#08275d";
+        readonly shadowColor: "#082640";
         readonly shadowOffset: {
             readonly width: 0;
             readonly height: 4;
@@ -470,7 +472,7 @@ declare const shadows: {
         readonly elevation: 2;
     };
     readonly cardLg: {
-        readonly shadowColor: "#08275d";
+        readonly shadowColor: "#082640";
         readonly shadowOffset: {
             readonly width: 0;
             readonly height: 4;

package/dist/index.js

@@ -1,6 +1,6 @@
-import { colors, buttonTypography, spacing, fontSize, fontWeight, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-Y7I7LA2K.js';
-export { Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray } from './chunk-Y7I7LA2K.js';
-import { createContext, useRef, useState, useEffect, useMemo, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
+import { colors, buttonTypography, spacing, fontSize, fontWeight, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-DAOLVE64.js';
+export { Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray } from './chunk-DAOLVE64.js';
+import { createContext, useRef, useState, useMemo, useEffect, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
 import { StyleSheet, Platform, TouchableOpacity, Text, View, Animated, Easing, Pressable, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
 import Svg3, { Path } from 'react-native-svg';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -9,7 +9,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 var ARROW_UP_RIGHT_PATH = "M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668";
 function ArrowUpRightIcon({
   size = 20,
-  color = "#08275d",
+  color = "#082640",
   strokeWidth = 2
 }) {
   return /* @__PURE__ */ jsx(Svg3, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
@@ -229,10 +229,12 @@ var SELECT_DROPDOWN_GAP = spacing.sm;
 var SELECT_DROPDOWN_PADDING = spacing.sm;
 var SELECT_DROPDOWN_MAX_HEIGHT = 317;
 var SELECT_OPTION_HEIGHT = 43;
+var SELECT_OPTION_HEIGHT_COMPACT = 36;
 var SELECT_OPTION_GAP = spacing.sm;
 var SELECT_CHEVRON_SIZE = 20;
 var SELECT_CHEVRON_COLOR = colors.stormGray150;
 var SELECT_CHEVRON_ROTATION_MS = 200;
+var SELECT_TEXT_LINE_HEIGHT = 19;
 var selectLabelTypography = {
   fontFamily: fonts.sans,
   fontSize: fontSize.sm,
@@ -245,7 +247,7 @@ var selectValueTypography = {
   fontFamily: fonts.sans,
   fontSize: fontSize.md,
   fontWeight: fontWeight.regular,
-  lineHeight: fontSize.md,
+  lineHeight: SELECT_TEXT_LINE_HEIGHT,
   letterSpacing: 0,
   textAlign: "left"
 };
@@ -263,8 +265,8 @@ function createOutlineStyle(ringColor) {
   };
 }
 var defaultOutline = {
-  borderRadius: radii.lg,
-  borderWidth: 0,
+  borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
+  borderWidth: INPUT_OUTLINE_WIDTH,
   borderColor: colors.transparent,
   padding: 0,
   backgroundColor: colors.transparent,
@@ -386,7 +388,7 @@ var selectDropdownMetrics = StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.regular,
-    lineHeight: fontSize.md,
+    lineHeight: SELECT_TEXT_LINE_HEIGHT,
     letterSpacing: 0,
     textAlign: "left",
     color: colors.slateBlue,
@@ -409,10 +411,13 @@ var selectDropdownMetrics = StyleSheet.create({
     backgroundColor: colors.stormGray0
   }
 });
-function resolveSelectDropdownHeight(optionCount) {
-  const contentHeight = optionCount * SELECT_OPTION_HEIGHT + Math.max(0, optionCount - 1) * SELECT_OPTION_GAP + SELECT_DROPDOWN_PADDING * 2;
+function resolveSelectDropdownHeight(optionCount, optionHeight = SELECT_OPTION_HEIGHT) {
+  const contentHeight = optionCount * optionHeight + Math.max(0, optionCount - 1) * SELECT_OPTION_GAP + SELECT_DROPDOWN_PADDING * 2;
   return Math.min(contentHeight, SELECT_DROPDOWN_MAX_HEIGHT);
 }
+function resolveSelectDropdownContentHeight(optionCount, optionHeight = SELECT_OPTION_HEIGHT) {
+  return optionCount * optionHeight + Math.max(0, optionCount - 1) * SELECT_OPTION_GAP;
+}
 function resolveSelectDropdownTop(anchor, dropdownHeight) {
   const windowHeight = Dimensions.get("window").height;
   const spaceBelow = windowHeight - (anchor.y + anchor.height + SELECT_DROPDOWN_GAP);
@@ -583,7 +588,8 @@ function Select({
   menuClassName,
   labelClassName,
   errorClassName,
-  hintClassName
+  hintClassName,
+  compact = false
 }) {
   const wrapperRef = useRef(null);
   const triggerRef = useRef(null);
@@ -595,10 +601,15 @@ function Select({
   const [anchor, setAnchor] = useState(null);
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const [valueContainerWidth, setValueContainerWidth] = useState(0);
+  const optionHeight = compact ? SELECT_OPTION_HEIGHT_COMPACT : SELECT_OPTION_HEIGHT;
+  const needsScroll = useMemo(
+    () => resolveSelectDropdownContentHeight(options.length, optionHeight) > SELECT_DROPDOWN_MAX_HEIGHT - SELECT_DROPDOWN_PADDING * 2,
+    [compact, optionHeight, options.length]
+  );
   useApplyWebClassName(wrapperRef, className);
   useApplyWebClassName(triggerRef, fieldClassName);
   useApplyWebClassName(menuRef, menuClassName);
-  useApplyWebClassName(scrollRef, SELECT_DROPDOWN_SCROLL_CLASS, open && Boolean(anchor));
+  useApplyWebClassName(scrollRef, SELECT_DROPDOWN_SCROLL_CLASS, open && Boolean(anchor) && needsScroll);
   useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
   useIsomorphicLayoutEffect(() => {
     ensureSelectDropdownScrollStyles();
@@ -654,7 +665,7 @@ function Select({
     return formatMultiSelectDisplay(selectedLabels, valueContainerWidth);
   }, [multiple, placeholder, selectedLabels, valueContainerWidth]);
   const isPlaceholder = selectedLabels.length === 0;
-  const dropdownHeight = resolveSelectDropdownHeight(options.length);
+  const dropdownHeight = resolveSelectDropdownHeight(options.length, optionHeight);
   const helperMessage = error ?? hint;
   function closeMenu() {
     setOpen(false);
@@ -706,7 +717,10 @@ function Select({
         },
         style: [
           selectDropdownMetrics.option,
+          compact && styles2.optionCompact,
+          { height: optionHeight, minHeight: optionHeight, maxHeight: optionHeight },
           isSelected && selectDropdownMetrics.optionSelected,
+          compact && isSelected && styles2.optionSelectedCompact,
           isHighlighted && !isSelected && !option.disabled ? selectDropdownMetrics.optionHighlighted : null,
           !isLast && styles2.optionSpacing,
           option.disabled && styles2.optionDisabled
@@ -793,7 +807,7 @@ function Select({
             height: dropdownHeight
           }
         ],
-        children: /* @__PURE__ */ jsx(
+        children: needsScroll ? /* @__PURE__ */ jsx(
           ScrollView,
           {
             ref: scrollRef,
@@ -805,7 +819,7 @@ function Select({
             nestedScrollEnabled: true,
             children: optionList
           }
-        )
+        ) : /* @__PURE__ */ jsx(View, { style: styles2.dropdownContent, children: optionList })
       }
     ) : null }) })
   ] });
@@ -846,6 +860,14 @@ var styles2 = StyleSheet.create({
   optionSpacing: {
     marginBottom: SELECT_OPTION_GAP
   },
+  optionCompact: {
+    paddingTop: 8,
+    paddingBottom: 8
+  },
+  optionSelectedCompact: {
+    paddingTop: 8,
+    paddingBottom: 8
+  },
   optionDisabled: {
     opacity: 0.5
   },