@scripso-homepad/ui 0.3.7 → 0.3.9

package/README.md

@@ -55,8 +55,13 @@ export default defineConfig({
     }),
   ],
   resolve: {
+    dedupe: ["react", "react-dom", "react-native", "react-native-web"],
     alias: {
       "react-native": "react-native-web",
+      react: path.resolve(__dirname, "node_modules/react"),
+      "react-dom": path.resolve(__dirname, "node_modules/react-dom"),
+      "react/jsx-runtime": path.resolve(__dirname, "node_modules/react/jsx-runtime"),
+      "react/jsx-dev-runtime": path.resolve(__dirname, "node_modules/react/jsx-dev-runtime"),
       "@scripso-homepad/ui": resolveUiPackageEntry(),
     },
     extensions: [
@@ -71,8 +76,8 @@ export default defineConfig({
     ],
   },
   optimizeDeps: {
-    include: ["react-native-web", "@scripso-homepad/ui"],
-    exclude: ["react-native-svg"],
+    include: ["react", "react-dom", "react/jsx-runtime", "react-native-web"],
+    exclude: ["react-native-svg", "@scripso-homepad/ui"],
     esbuildOptions: {
       resolveExtensions: [
         ".web.js",

package/dist/index.cjs

@@ -233,14 +233,14 @@ var buttonTypography = {
     fontFamily: fonts.sans,
     fontSize: 14,
     fontWeight: fontWeight.semibold,
-    lineHeight: 14,
+    lineHeight: 18,
     letterSpacing: 0
   },
   sm: {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: fontWeight.semibold,
-    lineHeight: 12,
+    lineHeight: 16,
     letterSpacing: 0
   }
 };
@@ -365,8 +365,9 @@ function Button({
   useApplyWebClassName(textRef, textClassName);
   const label = typeof children !== "undefined" ? children : title;
   const hasCustomChildren = typeof children !== "undefined";
-  const hasIcon = showIcon || icon != null;
-  const iconNode = icon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowUpRightIcon, { size: metrics.iconSize, color: preset.iconColor });
+  const customIcon = icon != null && typeof icon !== "boolean" ? icon : void 0;
+  const hasIcon = showIcon || icon === true || customIcon != null;
+  const iconNode = customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowUpRightIcon, { size: metrics.iconSize, color: preset.iconColor });
   const containerStyle = [
     styles.base,
     {
@@ -386,6 +387,7 @@ function Button({
     styles.label,
     metrics.text,
     { color: preset.textColor },
+    reactNative.Platform.OS === "android" ? styles.labelAndroid : null,
     !hasIcon && styles.labelCentered,
     hasIcon && styles.labelWithIcon,
     textStyle
@@ -438,6 +440,9 @@ var styles = reactNative.StyleSheet.create({
     opacity: 0.6
   },
   label: {},
+  labelAndroid: {
+    includeFontPadding: false
+  },
   labelCentered: {
     textAlign: "center"
   },
@@ -452,6 +457,55 @@ var styles = reactNative.StyleSheet.create({
     flexShrink: 0
   }
 });
+
+// src/icons/eyeIconPaths.ts
+var EYE_OPEN_OUTLINE_PATH = "M1.71835 10.2898C1.6489 10.1027 1.6489 9.89691 1.71835 9.70981C2.39476 8.06969 3.54294 6.66735 5.01732 5.68056C6.4917 4.69378 8.22588 4.16699 10 4.16699C11.7741 4.16699 13.5083 4.69378 14.9827 5.68056C16.4571 6.66735 17.6053 8.06969 18.2817 9.70981C18.3511 9.89691 18.3511 10.1027 18.2817 10.2898C17.6053 11.9299 16.4571 13.3323 14.9827 14.3191C13.5083 15.3058 11.7741 15.8326 10 15.8326C8.22588 15.8326 6.4917 15.3058 5.01732 14.3191C3.54294 13.3323 2.39476 11.9299 1.71835 10.2898Z";
+var EYE_OPEN_PUPIL_PATH = "M10 12.4998C11.3807 12.4998 12.5 11.3805 12.5 9.99981C12.5 8.6191 11.3807 7.49981 10 7.49981C8.6193 7.49981 7.50001 8.6191 7.50001 9.99981C7.50001 11.3805 8.6193 12.4998 10 12.4998Z";
+var EYE_OFF_PATH = "M10.733 5.076C13.0624 4.7984 15.4186 5.29082 17.4419 6.47805C19.4651 7.66528 21.0442 9.48208 21.938 11.651C22.0213 11.8755 22.0213 12.1225 21.938 12.347C21.5705 13.238 21.0848 14.0755 20.494 14.837M14.084 14.158C13.5182 14.7045 12.7604 15.0069 11.9738 15C11.1872 14.9932 10.4348 14.6777 9.87854 14.1215C9.32232 13.5652 9.00681 12.8128 8.99998 12.0262C8.99314 11.2396 9.29553 10.4818 9.842 9.916M17.479 17.499C16.1525 18.2848 14.6725 18.776 13.1394 18.9394C11.6063 19.1028 10.056 18.9345 8.59363 18.4459C7.13131 17.9573 5.79119 17.1599 4.66421 16.1077C3.53723 15.0556 2.64975 13.7734 2.062 12.348C1.97866 12.1235 1.97866 11.8765 2.062 11.652C2.94863 9.50186 4.50867 7.69725 6.508 6.509M2 2L22 22";
+function EyeIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Svg.Path,
+      {
+        d: EYE_OPEN_OUTLINE_PATH,
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Svg.Path,
+      {
+        d: EYE_OPEN_PUPIL_PATH,
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function EyeOffIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.Path,
+    {
+      d: EYE_OFF_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 var INPUT_HEIGHT = 52;
 var INPUT_ICON_SIZE = 20;
 var INPUT_ICON_GAP = 10;
@@ -466,17 +520,30 @@ function resolveInputVisualState({
   if (focused) return "focused";
   return "default";
 }
-function getInputFieldStyles(state) {
-  const outlineBase = {
+function createOutlineStyle(ringColor) {
+  return {
     borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
-    padding: INPUT_OUTLINE_WIDTH,
-    backgroundColor: colors.transparent
+    borderWidth: INPUT_OUTLINE_WIDTH,
+    borderColor: ringColor,
+    padding: 0,
+    backgroundColor: colors.transparent,
+    width: "100%",
+    alignSelf: "stretch",
+    ...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
+  };
+}
+var defaultOutline = createOutlineStyle(colors.transparent);
+function getInputFieldStyles(state) {
+  const containerBase = {
+    borderRadius: radii.lg,
+    ...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
   };
   switch (state) {
     case "disabled":
       return {
-        outline: outlineBase,
+        outline: defaultOutline,
         container: {
+          ...containerBase,
           borderWidth: 1,
           borderColor: colors.stormGray50,
           backgroundColor: colors.stormGray50
@@ -487,11 +554,9 @@ function getInputFieldStyles(state) {
       };
     case "error":
       return {
-        outline: {
-          ...outlineBase,
-          backgroundColor: colors.inputOutlineError
-        },
+        outline: createOutlineStyle(colors.inputOutlineError),
         container: {
+          ...containerBase,
           borderWidth: 1,
           borderColor: colors.inputError,
           backgroundColor: colors.white
@@ -502,11 +567,9 @@ function getInputFieldStyles(state) {
       };
     case "focused":
       return {
-        outline: {
-          ...outlineBase,
-          backgroundColor: colors.inputOutlineFocus
-        },
+        outline: createOutlineStyle(colors.inputOutlineFocus),
         container: {
+          ...containerBase,
           borderWidth: 1,
           borderColor: colors.navy,
           backgroundColor: colors.white
@@ -517,8 +580,9 @@ function getInputFieldStyles(state) {
       };
     default:
       return {
-        outline: outlineBase,
+        outline: defaultOutline,
         container: {
+          ...containerBase,
           borderWidth: 1,
           borderColor: colors.stormGray50,
           backgroundColor: colors.white
@@ -547,12 +611,13 @@ var inputFieldMetrics = reactNative.StyleSheet.create({
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.medium,
-    lineHeight: fontSize.md,
+    lineHeight: reactNative.Platform.OS === "web" ? fontSize.md : 20,
     paddingVertical: 0,
     paddingHorizontal: 0,
     margin: 0,
     borderWidth: 0,
     backgroundColor: colors.transparent,
+    ...reactNative.Platform.OS === "android" ? { includeFontPadding: false } : null,
     ...reactNative.Platform.OS === "web" ? {
       height: "100%",
       minHeight: 0,
@@ -615,23 +680,32 @@ function Input({
   containerStyle,
   style,
   className,
+  fieldClassName,
+  fieldStyle,
   labelClassName,
   inputClassName,
   errorClassName,
   hintClassName,
   editable = true,
+  secureTextEntry,
+  showPasswordToggle,
   onFocus,
   onBlur,
   ...props
 }) {
   const wrapperRef = react.useRef(null);
+  const fieldRef = react.useRef(null);
   const inputRef = react.useRef(null);
   const helperRef = react.useRef(null);
   const [focused, setFocused] = react.useState(false);
+  const [passwordVisible, setPasswordVisible] = react.useState(false);
   useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(fieldRef, fieldClassName);
   useApplyWebClassName(inputRef, inputClassName);
   useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
   const isDisabled = editable === false;
+  const passwordToggleEnabled = secureTextEntry === true && showPasswordToggle !== false && rightIcon == null;
+  const effectiveSecureTextEntry = passwordToggleEnabled ? !passwordVisible : secureTextEntry;
   const visualState = resolveInputVisualState({
     focused,
     error: Boolean(error),
@@ -648,29 +722,57 @@ function Input({
     onBlur?.(event);
   }
   const helperMessage = error ?? hint;
+  function togglePasswordVisibility() {
+    if (!isDisabled) {
+      setPasswordVisible((visible) => !visible);
+    }
+  }
+  const trailingIcon = passwordToggleEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      onPress: togglePasswordVisibility,
+      disabled: isDisabled,
+      accessibilityRole: "button",
+      accessibilityLabel: passwordVisible ? "Hide password" : "Show password",
+      hitSlop: 8,
+      style: styles3.iconPressable,
+      children: renderInputIcon(
+        passwordVisible ? /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {}),
+        iconColor
+      )
+    }
+  ) : rightIcon ? renderInputIcon(rightIcon, iconColor) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles3.wrapper, containerStyle], children: [
     label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled: isDisabled, className: labelClassName, children: label }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: fieldStyles.outline, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [inputFieldMetrics.container, fieldStyles.container], children: [
-      leftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.iconSlot, children: renderInputIcon(leftIcon, iconColor) }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.TextInput,
-        {
-          ref: inputRef,
-          style: [
-            inputFieldMetrics.input,
-            fieldStyles.text,
-            style
-          ],
-          placeholderTextColor: fieldStyles.placeholder,
-          editable,
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          accessibilityState: { disabled: isDisabled },
-          ...props
-        }
-      ),
-      rightIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.iconSlot, children: renderInputIcon(rightIcon, iconColor) }) : null
-    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: fieldStyles.outline, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        ref: fieldRef,
+        style: [inputFieldMetrics.container, fieldStyles.container, fieldStyle],
+        children: [
+          leftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.iconSlot, children: renderInputIcon(leftIcon, iconColor) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TextInput,
+            {
+              ref: inputRef,
+              style: [
+                inputFieldMetrics.input,
+                fieldStyles.text,
+                style
+              ],
+              placeholderTextColor: fieldStyles.placeholder,
+              editable,
+              secureTextEntry: effectiveSecureTextEntry,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              accessibilityState: { disabled: isDisabled },
+              ...props
+            }
+          ),
+          trailingIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.iconSlot, children: trailingIcon }) : null
+        ]
+      }
+    ) }),
     helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles3.error : styles3.hint, children: helperMessage }) : null
   ] });
 }
@@ -686,14 +788,20 @@ var styles3 = reactNative.StyleSheet.create({
     justifyContent: "center",
     flexShrink: 0
   },
+  iconPressable: {
+    width: INPUT_ICON_SIZE,
+    height: INPUT_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   error: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.inputError
   },
   hint: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.stormGray300
   }
 });
@@ -1190,12 +1298,12 @@ var styles5 = reactNative.StyleSheet.create({
   },
   error: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.inputError
   },
   hint: {
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 16,
     color: colors.stormGray300
   }
 });