@scripso-homepad/ui 0.4.1 → 0.4.3

package/src/icons/LockIcon.tsx

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

package/src/icons/LockIcon.web.tsx

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

package/src/icons/calendarIconPaths.ts

@@ -0,0 +1,2 @@
+export const CALENDAR_ICON_BODY_PATH =
+  "M6.66667 1.6665V4.99984M13.3333 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z";

package/src/icons/chevronDownPath.ts

@@ -1 +1,2 @@
 export const CHEVRON_DOWN_PATH = "M4 6L8 10L12 6";
+export const CHEVRON_DOWN_PATH_20 = "M5 7.5L10 12.5L15 7.5";

package/src/icons/chevronNavPaths.ts

@@ -0,0 +1,2 @@
+export const CHEVRON_LEFT_PATH = "M12.5 15L7.5 10L12.5 5";
+export const CHEVRON_RIGHT_PATH = "M7.5 15L12.5 10L7.5 5";

package/src/icons/lockIconPaths.ts

@@ -0,0 +1,2 @@
+export const LOCK_ICON_PATH =
+  "M5.83333 8.33317V5.83317C5.83333 4.7281 6.27232 3.66829 7.05372 2.88689C7.83512 2.10549 8.89493 1.6665 10 1.6665C11.1051 1.6665 12.1649 2.10549 12.9463 2.88689C13.7277 3.66829 14.1667 4.7281 14.1667 5.83317V8.33317M10.8333 13.3332C10.8333 13.7934 10.4602 14.1665 10 14.1665C9.53976 14.1665 9.16667 13.7934 9.16667 13.3332C9.16667 12.8729 9.53976 12.4998 10 12.4998C10.4602 12.4998 10.8333 12.8729 10.8333 13.3332ZM4.16667 8.33317H15.8333C16.7538 8.33317 17.5 9.07936 17.5 9.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V9.99984C2.5 9.07936 3.24619 8.33317 4.16667 8.33317Z";

package/src/index.ts

@@ -8,12 +8,53 @@ export type {
 export { Input } from "./components/Input";
 export type { InputProps } from "./components/Input";
 
+export { Select } from "./components/Select";
+export type {
+  MultipleSelectProps,
+  SelectOption,
+  SelectProps,
+  SingleSelectProps,
+} from "./components/Select";
+
 export { PhoneInput } from "./components/PhoneInput";
 export type { PhoneInputProps } from "./components/PhoneInput";
 
 export { CountryCodeSelector } from "./components/CountryCodeSelector";
 export type { CountryCodeSelectorProps } from "./components/CountryCodeSelector";
 
+export { Calendar } from "./components/Calendar";
+export type {
+  CalendarLabels,
+  CalendarProps,
+  CalendarRangeProps,
+  CalendarSingleProps,
+  DateRange,
+} from "./components/Calendar";
+export { CalendarLocaleProvider, useCalendarLocale } from "./utils/calendarLocaleContext";
+export {
+  calendarTranslations,
+  formatLocalizedCalendarMonthYear,
+  getCalendarMonthLabels,
+  getCalendarTranslations,
+  resolveCalendarLocale,
+  resolveWeekdayLabels,
+} from "./utils/calendarLocalization";
+export type { CalendarLocaleProviderProps } from "./utils/calendarLocaleContext";
+export type {
+  CalendarLocale,
+  CalendarTranslations,
+  CalendarTranslationKey,
+} from "./utils/calendarLocalization";
+
+export { DatePicker } from "./components/DatePicker";
+export type {
+  DatePickerProps,
+  DatePickerRangeProps,
+  DatePickerSingleProps,
+} from "./components/DatePicker";
+
+export { CalendarIcon } from "./icons/CalendarIcon";
+
 export {
   countries,
   defaultCountry,
@@ -24,6 +65,8 @@ export type { Country } from "./data/countries";
 export { Label } from "./components/Label";
 export type { LabelProps } from "./components/Label";
 
+export { LockIcon } from "./icons/LockIcon";
+
 export {
   colors,
   brand,

package/src/theme/calendar.ts

@@ -0,0 +1,357 @@
+import { Dimensions, Platform, StyleSheet, type TextStyle, type ViewStyle } from "react-native";
+import { colors, fonts, fontSize, fontWeight, radii, spacing } from "./tokens";
+
+export const CALENDAR_DROPDOWN_GAP = spacing.sm;
+export const CALENDAR_PANEL_WIDTH = 296;
+export const CALENDAR_PANEL_PADDING = spacing.md;
+export const CALENDAR_PANEL_GAP = spacing.md;
+export const CALENDAR_CONTENT_WIDTH =
+  CALENDAR_PANEL_WIDTH - CALENDAR_PANEL_PADDING * 2;
+export const CALENDAR_HEADER_HEIGHT = 20;
+export const CALENDAR_WEEKDAY_CELL_SIZE = 32;
+export const CALENDAR_WEEKDAY_GAP = spacing.sm;
+export const CALENDAR_WEEKDAY_RADIUS = 6;
+export const CALENDAR_DAY_SIZE = CALENDAR_WEEKDAY_CELL_SIZE;
+export const CALENDAR_DAY_GRID_WIDTH = CALENDAR_CONTENT_WIDTH;
+export const CALENDAR_DAY_GAP_X = spacing.sm;
+export const CALENDAR_DAY_GAP_Y = spacing.lg;
+export const CALENDAR_DAY_ROWS = 6;
+export const CALENDAR_DAY_GRID_HEIGHT =
+  CALENDAR_DAY_SIZE * CALENDAR_DAY_ROWS + CALENDAR_DAY_GAP_Y * (CALENDAR_DAY_ROWS - 1);
+export const CALENDAR_PICKER_COLUMNS = 3;
+export const CALENDAR_PICKER_ROWS = 4;
+export const CALENDAR_YEARS_PER_PAGE = 12;
+export const CALENDAR_PICKER_CELL_WIDTH =
+  (CALENDAR_DAY_GRID_WIDTH - CALENDAR_DAY_GAP_X * (CALENDAR_PICKER_COLUMNS - 1)) /
+  CALENDAR_PICKER_COLUMNS;
+export const CALENDAR_PICKER_CELL_HEIGHT = 36;
+export const CALENDAR_PICKER_BODY_HEIGHT =
+  CALENDAR_WEEKDAY_CELL_SIZE + CALENDAR_WEEKDAY_GAP + CALENDAR_DAY_GRID_HEIGHT;
+export const CALENDAR_DAY_DOT_SIZE = 3;
+export const CALENDAR_TODAY_TEXT_COLOR = "#082640";
+export const CALENDAR_TODAY_DOT_COLOR = "#0033A0";
+export const CALENDAR_NAV_ICON_SIZE = 20;
+export const CALENDAR_NAV_ICON_COLOR = colors.stormGray850;
+export const CALENDAR_FIELD_ICON_SIZE = 20;
+export const CALENDAR_FIELD_WIDTH = CALENDAR_PANEL_WIDTH;
+export const CALENDAR_FIELD_HEIGHT = 52;
+export const CALENDAR_FIELD_PADDING = spacing.lg;
+export const CALENDAR_FIELD_GAP = spacing.sm;
+export const CALENDAR_FIELD_PLACEHOLDER_COLOR = colors.stormGray200;
+
+/** @deprecated Use `CALENDAR_PANEL_WIDTH` */
+export const CALENDAR_PANEL_MIN_WIDTH = CALENDAR_PANEL_WIDTH;
+
+export const CALENDAR_PANEL_TOTAL_HEIGHT =
+  CALENDAR_PANEL_PADDING * 2 +
+  CALENDAR_HEADER_HEIGHT +
+  CALENDAR_PANEL_GAP * 2 +
+  CALENDAR_WEEKDAY_CELL_SIZE +
+  CALENDAR_DAY_GRID_HEIGHT;
+export const CALENDAR_PANEL_HEIGHT = CALENDAR_PANEL_TOTAL_HEIGHT;
+
+export const calendarLabelTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.sm,
+  fontWeight: fontWeight.medium,
+  lineHeight: fontSize.sm,
+  letterSpacing: 0,
+  color: colors.slateBlue,
+} as const;
+
+export const calendarFieldTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.md,
+  fontWeight: fontWeight.regular,
+  lineHeight: fontSize.md,
+  letterSpacing: 0,
+  textAlign: "left",
+} as const;
+
+export const calendarFieldPlaceholderTypography = {
+  ...calendarFieldTypography,
+  color: CALENDAR_FIELD_PLACEHOLDER_COLOR,
+} as const;
+
+export const calendarDropdownMetrics = StyleSheet.create({
+  panel: {
+    width: CALENDAR_PANEL_WIDTH,
+    height: CALENDAR_PANEL_HEIGHT,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.white,
+    padding: CALENDAR_PANEL_PADDING,
+    gap: CALENDAR_PANEL_GAP,
+    overflow: "hidden",
+    flexDirection: "column",
+    opacity: 1,
+    ...(Platform.OS === "web"
+      ? ({
+          boxSizing: "border-box",
+        } as ViewStyle)
+      : null),
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    height: CALENDAR_HEADER_HEIGHT,
+    minHeight: CALENDAR_HEADER_HEIGHT,
+    maxHeight: CALENDAR_HEADER_HEIGHT,
+  },
+  headerTitle: {
+    textAlign: "center",
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.bold,
+    lineHeight: 18,
+    letterSpacing: 0,
+    color: colors.stormGray850,
+  },
+  headerTitlePressable: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: CALENDAR_HEADER_HEIGHT,
+  },
+  navButton: {
+    width: CALENDAR_NAV_ICON_SIZE,
+    height: CALENDAR_NAV_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  weekdayRow: {
+    flexDirection: "row",
+    gap: CALENDAR_WEEKDAY_GAP,
+    height: CALENDAR_WEEKDAY_CELL_SIZE,
+    minHeight: CALENDAR_WEEKDAY_CELL_SIZE,
+    maxHeight: CALENDAR_WEEKDAY_CELL_SIZE,
+    opacity: 1,
+  },
+  weekdayCell: {
+    width: CALENDAR_WEEKDAY_CELL_SIZE,
+    height: CALENDAR_WEEKDAY_CELL_SIZE,
+    borderRadius: CALENDAR_WEEKDAY_RADIUS,
+    padding: spacing.xs,
+    backgroundColor: colors.stormGray0,
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: 1,
+    ...(Platform.OS === "web"
+      ? ({
+          boxSizing: "border-box",
+        } as ViewStyle)
+      : null),
+  },
+  weekdayLabel: {
+    fontFamily: fonts.sans,
+    fontSize: fontSize.sm,
+    fontWeight: fontWeight.regular,
+    lineHeight: fontSize.sm,
+    letterSpacing: 0,
+    textAlign: "center",
+    color: colors.stormGray300,
+    textTransform: "uppercase",
+  },
+  dayGrid: {
+    width: CALENDAR_DAY_GRID_WIDTH,
+    height: CALENDAR_DAY_GRID_HEIGHT,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: CALENDAR_DAY_GAP_X,
+    rowGap: CALENDAR_DAY_GAP_Y,
+    alignContent: "flex-start",
+    opacity: 1,
+  },
+  dayCell: {
+    width: CALENDAR_DAY_SIZE,
+    height: CALENDAR_DAY_SIZE,
+    minHeight: CALENDAR_DAY_SIZE,
+    maxHeight: CALENDAR_DAY_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: CALENDAR_WEEKDAY_RADIUS,
+    padding: spacing.xs,
+    backgroundColor: colors.white,
+    opacity: 1,
+    position: "relative",
+    ...(Platform.OS === "web"
+      ? ({
+          boxSizing: "border-box",
+        } as ViewStyle)
+      : null),
+  },
+  dayCellPast: {
+    backgroundColor: colors.stormGray50,
+  },
+  dayCellSelected: {
+    backgroundColor: colors.navy,
+  },
+  dayLabel: {
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.regular,
+    lineHeight: 18,
+    letterSpacing: 0,
+    textAlign: "center",
+    color: colors.navy,
+    includeFontPadding: false,
+    textAlignVertical: "center",
+  },
+  dayLabelToday: {
+    color: CALENDAR_TODAY_TEXT_COLOR,
+  },
+  dayLabelSelected: {
+    fontWeight: fontWeight.semibold,
+    color: colors.white,
+  },
+  dayLabelFuture: {
+    color: colors.navy,
+  },
+  dayLabelMuted: {
+    color: colors.stormGray300,
+  },
+  dayLabelOutsideMonth: {
+    color: colors.stormGray300,
+  },
+  dayLabelDisabled: {
+    color: colors.stormGray300,
+    opacity: 0.5,
+  },
+  todayDot: {
+    position: "absolute",
+    bottom: 5,
+    left: "50%",
+    width: CALENDAR_DAY_DOT_SIZE,
+    height: CALENDAR_DAY_DOT_SIZE,
+    borderRadius: 15,
+    backgroundColor: CALENDAR_TODAY_DOT_COLOR,
+    marginLeft: -(CALENDAR_DAY_DOT_SIZE / 2),
+    zIndex: 1,
+  },
+  pickerBody: {
+    width: CALENDAR_DAY_GRID_WIDTH,
+    height: CALENDAR_PICKER_BODY_HEIGHT,
+    justifyContent: "center",
+  },
+  pickerGrid: {
+    width: CALENDAR_DAY_GRID_WIDTH,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: CALENDAR_DAY_GAP_X,
+    rowGap: CALENDAR_DAY_GAP_Y,
+    alignContent: "flex-start",
+  },
+  pickerCell: {
+    width: CALENDAR_PICKER_CELL_WIDTH,
+    minHeight: CALENDAR_PICKER_CELL_HEIGHT,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: CALENDAR_WEEKDAY_RADIUS,
+    paddingHorizontal: spacing.xs,
+    paddingVertical: spacing.xs,
+    backgroundColor: colors.white,
+    ...(Platform.OS === "web"
+      ? ({
+          boxSizing: "border-box",
+        } as ViewStyle)
+      : null),
+  },
+  pickerCellSelected: {
+    backgroundColor: colors.navy,
+  },
+  pickerLabel: {
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.regular,
+    lineHeight: 18,
+    letterSpacing: 0,
+    textAlign: "center",
+    color: colors.navy,
+    includeFontPadding: false,
+    ...(Platform.OS === "android" ? { textAlignVertical: "center" as const } : null),
+  },
+  pickerLabelSelected: {
+    fontWeight: fontWeight.semibold,
+    color: colors.white,
+  },
+  pickerLabelDisabled: {
+    color: colors.stormGray300,
+    opacity: 0.5,
+  },
+  pickerLabelCurrent: {
+    color: CALENDAR_TODAY_TEXT_COLOR,
+  },
+});
+
+export function resolveCalendarDropdownTop(
+  anchor: { y: number; height: number },
+  panelHeight: number = CALENDAR_PANEL_HEIGHT,
+): number {
+  const windowHeight = Dimensions.get("window").height;
+  const spaceBelow = windowHeight - (anchor.y + anchor.height + CALENDAR_DROPDOWN_GAP);
+  const spaceAbove = anchor.y - CALENDAR_DROPDOWN_GAP;
+  const topBelow = anchor.y + anchor.height + CALENDAR_DROPDOWN_GAP;
+  const topAbove = anchor.y - CALENDAR_DROPDOWN_GAP - panelHeight;
+
+  if (spaceBelow >= panelHeight) {
+    return topBelow;
+  }
+
+  if (spaceAbove >= panelHeight) {
+    return topAbove;
+  }
+
+  if (spaceAbove > spaceBelow) {
+    return Math.max(0, topAbove);
+  }
+
+  return Math.max(0, Math.min(topBelow, windowHeight - panelHeight));
+}
+
+export function resolveCalendarDropdownLeft(
+  anchor: { x: number },
+  panelWidth: number = CALENDAR_PANEL_WIDTH,
+): number {
+  const windowWidth = Dimensions.get("window").width;
+  const maxLeft = Math.max(0, windowWidth - panelWidth);
+
+  return Math.max(0, Math.min(anchor.x, maxLeft));
+}
+
+export const calendarFieldMetrics = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: CALENDAR_FIELD_WIDTH,
+    minWidth: CALENDAR_FIELD_WIDTH,
+    maxWidth: CALENDAR_FIELD_WIDTH,
+    height: CALENDAR_FIELD_HEIGHT,
+    minHeight: CALENDAR_FIELD_HEIGHT,
+    maxHeight: CALENDAR_FIELD_HEIGHT,
+    borderRadius: radii.lg,
+    padding: CALENDAR_FIELD_PADDING,
+    gap: CALENDAR_FIELD_GAP,
+    opacity: 1,
+    ...(Platform.OS === "web"
+      ? ({
+          boxSizing: "border-box",
+        } as ViewStyle)
+      : null),
+  },
+  value: {
+    flex: 1,
+    minWidth: 0,
+    ...calendarFieldTypography,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    margin: 0,
+    ...(Platform.OS === "android" ? { includeFontPadding: false } : null),
+    ...(Platform.OS === "web"
+      ? ({
+          outlineStyle: "none",
+        } as TextStyle)
+      : null),
+  },
+});

package/src/theme/input.ts

@@ -5,6 +5,10 @@ export const INPUT_HEIGHT = 52;
 export const INPUT_ICON_SIZE = 20;
 export const INPUT_ICON_GAP = 10;
 export const INPUT_OUTLINE_WIDTH = 2;
+/** Native line box; web uses a taller metric for Noto Sans Armenian descenders. */
+export const INPUT_INNER_LINE_HEIGHT = 20;
+export const INPUT_WEB_INNER_LINE_HEIGHT = 22;
+export const INPUT_WEB_VERTICAL_PADDING = 14;
 
 export type InputVisualState =
   | "default"
@@ -125,16 +129,20 @@ export const inputFieldMetrics = StyleSheet.create({
     padding: 16,
     gap: INPUT_ICON_GAP,
     ...(Platform.OS === "web"
-      ? ({ boxSizing: "border-box" } as ViewStyle)
+      ? ({
+          boxSizing: "border-box",
+          paddingVertical: INPUT_WEB_VERTICAL_PADDING,
+          paddingHorizontal: 16,
+        } as ViewStyle)
       : null),
   },
   input: {
     flex: 1,
-    alignSelf: "stretch",
+    minWidth: 0,
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.medium,
-    lineHeight: Platform.OS === "web" ? fontSize.md : 20,
+    lineHeight: INPUT_INNER_LINE_HEIGHT,
     paddingVertical: 0,
     paddingHorizontal: 0,
     margin: 0,
@@ -145,10 +153,12 @@ export const inputFieldMetrics = StyleSheet.create({
       : null),
     ...(Platform.OS === "web"
       ? ({
-          height: "100%",
-          minHeight: 0,
+          alignSelf: "center",
+          lineHeight: INPUT_WEB_INNER_LINE_HEIGHT,
           outlineStyle: "none",
         } as TextStyle)
-      : null),
+      : {
+          alignSelf: "stretch",
+        }),
   },
 });