@scripso-homepad/ui 0.3.6 → 0.3.7

package/src/icons/ArrowUpRightIcon.tsx

@@ -0,0 +1,29 @@
+import Svg, { Path } from "react-native-svg";
+import { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+
+export { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+
+interface ArrowUpRightIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Native — react-native-svg (peer dependency). */
+export function ArrowUpRightIcon({
+  size = 20,
+  color = "#08275d",
+  strokeWidth = 2,
+}: ArrowUpRightIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={ARROW_UP_RIGHT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/ArrowUpRightIcon.web.tsx

@@ -0,0 +1,35 @@
+import { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+
+interface ArrowUpRightIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function ArrowUpRightIcon({
+  size = 20,
+  color = "#08275d",
+  strokeWidth = 2,
+}: ArrowUpRightIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={ARROW_UP_RIGHT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";

package/src/icons/ChevronDownIcon.tsx

@@ -0,0 +1,29 @@
+import Svg, { Path } from "react-native-svg";
+import { CHEVRON_DOWN_PATH } from "./chevronDownPath";
+
+export { CHEVRON_DOWN_PATH } from "./chevronDownPath";
+
+interface ChevronDownIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Native — react-native-svg (peer dependency). */
+export function ChevronDownIcon({
+  size = 16,
+  color = "#dadde0",
+  strokeWidth = 2,
+}: ChevronDownIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={CHEVRON_DOWN_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/ChevronDownIcon.web.tsx

@@ -0,0 +1,35 @@
+import { CHEVRON_DOWN_PATH } from "./chevronDownPath";
+
+interface ChevronDownIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function ChevronDownIcon({
+  size = 16,
+  color = "#dadde0",
+  strokeWidth = 2,
+}: ChevronDownIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CHEVRON_DOWN_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CHEVRON_DOWN_PATH } from "./chevronDownPath";

package/src/icons/EyeIcon.tsx

@@ -0,0 +1,48 @@
+import { StyleSheet, View } from "react-native";
+
+interface EyeIconProps {
+  size?: number;
+  color?: string;
+}
+
+/** Minimal eye icon for input fields (no SVG dependency). */
+export function EyeIcon({ size = 20, color = "#c7cdd1" }: EyeIconProps) {
+  const stroke = Math.max(1.5, size * 0.1);
+  const eyeWidth = size * 0.78;
+  const eyeHeight = size * 0.44;
+
+  return (
+    <View style={[styles.root, { width: size, height: size }]}>
+      <View
+        style={{
+          position: "absolute",
+          left: (size - eyeWidth) / 2,
+          top: (size - eyeHeight) / 2,
+          width: eyeWidth,
+          height: eyeHeight,
+          borderRadius: eyeHeight / 2,
+          borderWidth: stroke,
+          borderColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: "absolute",
+          left: size / 2 - size * 0.14,
+          top: size / 2 - size * 0.14,
+          width: size * 0.28,
+          height: size * 0.28,
+          borderRadius: size * 0.14,
+          borderWidth: stroke,
+          borderColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    position: "relative",
+  },
+});

package/src/icons/KeyIcon.tsx

@@ -0,0 +1,36 @@
+import Svg, { Path } from "react-native-svg";
+import { KEY_ICON_BODY_PATH, KEY_ICON_DOT_PATH } from "./keyIconPaths";
+
+export { KEY_ICON_BODY_PATH, KEY_ICON_DOT_PATH } from "./keyIconPaths";
+
+interface KeyIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Native — react-native-svg (peer dependency). */
+export function KeyIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2,
+}: KeyIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 19 19" fill="none">
+      <Path
+        d={KEY_ICON_BODY_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d={KEY_ICON_DOT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/KeyIcon.web.tsx

@@ -0,0 +1,42 @@
+import { KEY_ICON_BODY_PATH, KEY_ICON_DOT_PATH } from "./keyIconPaths";
+
+interface KeyIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function KeyIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2,
+}: KeyIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 19 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={KEY_ICON_BODY_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d={KEY_ICON_DOT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { KEY_ICON_BODY_PATH, KEY_ICON_DOT_PATH } from "./keyIconPaths";

package/src/icons/arrowUpRightPath.ts

@@ -0,0 +1,2 @@
+export const ARROW_UP_RIGHT_PATH =
+  "M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668";

package/src/icons/chevronDownPath.ts

@@ -0,0 +1 @@
+export const CHEVRON_DOWN_PATH = "M4 6L8 10L12 6";

package/src/icons/keyIconPaths.ts

@@ -0,0 +1,5 @@
+export const KEY_ICON_BODY_PATH =
+  "M1.48833 13.8769C1.17575 14.1894 1.00009 14.6132 1 15.0552V16.8652C1 17.0862 1.0878 17.2982 1.24408 17.4545C1.40036 17.6107 1.61232 17.6985 1.83333 17.6985H4.33333C4.55435 17.6985 4.76631 17.6107 4.92259 17.4545C5.07887 17.2982 5.16667 17.0862 5.16667 16.8652V16.0319C5.16667 15.8109 5.25446 15.5989 5.41074 15.4426C5.56702 15.2863 5.77899 15.1985 6 15.1985H6.83333C7.05435 15.1985 7.26631 15.1107 7.42259 14.9545C7.57887 14.7982 7.66667 14.5862 7.66667 14.3652V13.5319C7.66667 13.3109 7.75446 13.0989 7.91074 12.9426C8.06702 12.7863 8.27899 12.6985 8.5 12.6985H8.64333C9.08532 12.6984 9.50918 12.5228 9.82167 12.2102L10.5 11.5319C11.6582 11.9353 12.919 11.9338 14.0762 11.5275C15.2334 11.1212 16.2185 10.3342 16.8703 9.29531C17.5221 8.25638 17.802 7.02702 17.6643 5.80832C17.5265 4.58962 16.9793 3.45375 16.112 2.58651C15.2448 1.71928 14.1089 1.17202 12.8902 1.03428C11.6715 0.896534 10.4422 1.17645 9.40323 1.82824C8.3643 2.48003 7.57733 3.4651 7.17104 4.6223C6.76475 5.77951 6.76321 7.04034 7.16667 8.19854L1.48833 13.8769Z";
+
+export const KEY_ICON_DOT_PATH =
+  "M13.0833 6.03187C13.3135 6.03187 13.5 5.84532 13.5 5.61521C13.5 5.38509 13.3135 5.19854 13.0833 5.19854C12.8532 5.19854 12.6667 5.38509 12.6667 5.61521C12.6667 5.84532 12.8532 6.03187 13.0833 6.03187Z";

package/src/index.ts

@@ -4,3 +4,45 @@ export type {
   ButtonSize,
   ButtonVariant,
 } from "./components/Button";
+
+export { Input } from "./components/Input";
+export type { InputProps } from "./components/Input";
+
+export { PhoneInput } from "./components/PhoneInput";
+export type { PhoneInputProps } from "./components/PhoneInput";
+
+export { CountryCodeSelector } from "./components/CountryCodeSelector";
+export type { CountryCodeSelectorProps } from "./components/CountryCodeSelector";
+
+export {
+  countries,
+  defaultCountry,
+  findCountry,
+} from "./data/countries";
+export type { Country } from "./data/countries";
+
+export { Label } from "./components/Label";
+export type { LabelProps } from "./components/Label";
+
+export {
+  colors,
+  brand,
+  emeraldGreen,
+  navy,
+  rubyRed,
+  stormGray,
+  buttonTypography,
+  labelTypography,
+  fonts,
+  fontSize,
+  fontWeight,
+  radii,
+  shadows,
+  spacing,
+} from "./theme/tokens";
+export type {
+  EmeraldGreenStep,
+  NavyStep,
+  RubyRedStep,
+  StormGrayStep,
+} from "./theme/tokens";

package/src/theme/input.ts

@@ -0,0 +1,139 @@
+import { Platform, StyleSheet, type TextStyle, type ViewStyle } from "react-native";
+import { colors, fonts, fontSize, fontWeight, radii } from "./tokens";
+
+export const INPUT_HEIGHT = 52;
+export const INPUT_ICON_SIZE = 20;
+export const INPUT_ICON_GAP = 10;
+export const INPUT_OUTLINE_WIDTH = 2;
+
+export type InputVisualState =
+  | "default"
+  | "focused"
+  | "error"
+  | "disabled";
+
+export interface InputStateFlags {
+  focused?: boolean;
+  error?: boolean;
+  disabled?: boolean;
+}
+
+export function resolveInputVisualState({
+  focused = false,
+  error = false,
+  disabled = false,
+}: InputStateFlags): InputVisualState {
+  if (disabled) return "disabled";
+  if (error) return "error";
+  if (focused) return "focused";
+  return "default";
+}
+
+interface FieldStyleSet {
+  container: ViewStyle;
+  outline: ViewStyle;
+  text: TextStyle;
+  placeholder: string;
+  icon: string;
+}
+
+export function getInputFieldStyles(state: InputVisualState): FieldStyleSet {
+  const outlineBase: ViewStyle = {
+    borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
+    padding: INPUT_OUTLINE_WIDTH,
+    backgroundColor: colors.transparent,
+  };
+
+  switch (state) {
+    case "disabled":
+      return {
+        outline: outlineBase,
+        container: {
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.stormGray50,
+        },
+        text: { color: colors.stormGray300 },
+        placeholder: colors.stormGray300,
+        icon: colors.stormGray150,
+      };
+    case "error":
+      return {
+        outline: {
+          ...outlineBase,
+          backgroundColor: colors.inputOutlineError,
+        },
+        container: {
+          borderWidth: 1,
+          borderColor: colors.inputError,
+          backgroundColor: colors.white,
+        },
+        text: { color: colors.inputError },
+        placeholder: colors.stormGray200,
+        icon: colors.inputError,
+      };
+    case "focused":
+      return {
+        outline: {
+          ...outlineBase,
+          backgroundColor: colors.inputOutlineFocus,
+        },
+        container: {
+          borderWidth: 1,
+          borderColor: colors.navy,
+          backgroundColor: colors.white,
+        },
+        text: { color: colors.slateBlue },
+        placeholder: colors.stormGray200,
+        icon: colors.navy,
+      };
+    default:
+      return {
+        outline: outlineBase,
+        container: {
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.white,
+        },
+        text: { color: colors.slateBlue },
+        placeholder: colors.stormGray200,
+        icon: colors.stormGray150,
+      };
+  }
+}
+
+export const inputFieldMetrics = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: INPUT_HEIGHT,
+    minHeight: INPUT_HEIGHT,
+    maxHeight: INPUT_HEIGHT,
+    borderRadius: radii.lg,
+    padding: 16,
+    gap: INPUT_ICON_GAP,
+    ...(Platform.OS === "web"
+      ? ({ boxSizing: "border-box" } as ViewStyle)
+      : null),
+  },
+  input: {
+    flex: 1,
+    alignSelf: "stretch",
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.medium,
+    lineHeight: fontSize.md,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    margin: 0,
+    borderWidth: 0,
+    backgroundColor: colors.transparent,
+    ...(Platform.OS === "web"
+      ? ({
+          height: "100%",
+          minHeight: 0,
+          outlineStyle: "none",
+        } as TextStyle)
+      : null),
+  },
+});