@scripso-homepad/ui 0.4.2 → 0.4.4

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,

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/select.ts

@@ -0,0 +1,247 @@
+import { Dimensions, Platform, StyleSheet, type TextStyle, type ViewStyle } from "react-native";
+import {
+  resolveInputVisualState,
+  type InputStateFlags,
+  type InputVisualState,
+} from "./input";
+import { colors, fonts, fontSize, fontWeight, radii, spacing } from "./tokens";
+
+export const SELECT_HEIGHT = 52;
+export const SELECT_PADDING = 16;
+export const SELECT_INNER_GAP = 10;
+export const SELECT_ICON_SIZE = 20;
+export const SELECT_LABEL_GAP = spacing.sm;
+export const SELECT_DROPDOWN_GAP = spacing.sm;
+export const SELECT_DROPDOWN_PADDING = spacing.sm;
+export const SELECT_DROPDOWN_MAX_HEIGHT = 317;
+export const SELECT_OPTION_HEIGHT = 43;
+export const SELECT_OPTION_GAP = spacing.sm;
+export const SELECT_CHEVRON_SIZE = 20;
+export const SELECT_CHEVRON_COLOR = colors.stormGray150;
+export const SELECT_CHEVRON_ROTATION_MS = 200;
+
+export { resolveInputVisualState };
+export type { InputStateFlags, InputVisualState };
+
+export const selectLabelTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.sm,
+  fontWeight: fontWeight.medium,
+  lineHeight: fontSize.sm,
+  letterSpacing: 0,
+  color: colors.slateBlue,
+} as const;
+
+export const selectValueTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.md,
+  fontWeight: fontWeight.regular,
+  lineHeight: fontSize.md,
+  letterSpacing: 0,
+  textAlign: "left",
+} as const;
+
+interface SelectFieldStyleSet {
+  container: ViewStyle;
+  outline: ViewStyle;
+  value: TextStyle;
+  placeholder: string;
+  icon: string;
+}
+
+const INPUT_OUTLINE_WIDTH = 2;
+
+function createOutlineStyle(ringColor: string): ViewStyle {
+  return {
+    borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
+    borderWidth: INPUT_OUTLINE_WIDTH,
+    borderColor: ringColor,
+    padding: 0,
+    backgroundColor: colors.transparent,
+    width: "100%",
+    alignSelf: "stretch",
+    ...(Platform.OS !== "web" ? { overflow: "hidden" as const } : null),
+  };
+}
+
+const defaultOutline = createOutlineStyle(colors.transparent);
+
+export function getSelectFieldStyles(state: InputVisualState): SelectFieldStyleSet {
+  const containerBase: ViewStyle = {
+    borderRadius: radii.lg,
+    ...(Platform.OS !== "web" ? { overflow: "hidden" as const } : null),
+  };
+
+  const valueBase: TextStyle = {
+    ...selectValueTypography,
+    color: colors.slateBlue,
+  };
+
+  switch (state) {
+    case "disabled":
+      return {
+        outline: defaultOutline,
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.stormGray50,
+        },
+        value: { ...valueBase, color: colors.stormGray300 },
+        placeholder: colors.stormGray300,
+        icon: colors.stormGray150,
+      };
+    case "error":
+      return {
+        outline: createOutlineStyle(colors.inputOutlineError),
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.inputError,
+          backgroundColor: colors.white,
+        },
+        value: { ...valueBase, color: colors.inputError },
+        placeholder: colors.stormGray200,
+        icon: colors.inputError,
+      };
+    case "focused":
+      return {
+        outline: createOutlineStyle(colors.inputOutlineFocus),
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.navy,
+          backgroundColor: colors.white,
+        },
+        value: valueBase,
+        placeholder: colors.stormGray200,
+        icon: colors.navy,
+      };
+    default:
+      return {
+        outline: defaultOutline,
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.white,
+        },
+        value: valueBase,
+        placeholder: colors.stormGray200,
+        icon: colors.stormGray150,
+      };
+  }
+}
+
+export const selectFieldMetrics = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: SELECT_HEIGHT,
+    borderRadius: radii.lg,
+    padding: SELECT_PADDING,
+    gap: SELECT_INNER_GAP,
+    ...(Platform.OS === "web"
+      ? ({
+          boxSizing: "border-box",
+        } as ViewStyle)
+      : null),
+  },
+  value: {
+    flex: 1,
+    minWidth: 0,
+    ...selectValueTypography,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    margin: 0,
+    ...(Platform.OS === "android" ? { includeFontPadding: false } : null),
+    ...(Platform.OS === "web"
+      ? ({
+          outlineStyle: "none",
+        } as TextStyle)
+      : null),
+  },
+});
+
+export const selectDropdownMetrics = StyleSheet.create({
+  menu: {
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.white,
+    padding: SELECT_DROPDOWN_PADDING,
+    overflow: "hidden",
+  },
+  option: {
+    width: "100%",
+    height: SELECT_OPTION_HEIGHT,
+    minHeight: SELECT_OPTION_HEIGHT,
+    maxHeight: SELECT_OPTION_HEIGHT,
+    paddingTop: 12,
+    paddingRight: spacing.sm,
+    paddingBottom: 12,
+    paddingLeft: spacing.sm,
+    justifyContent: "center",
+    alignItems: "flex-start",
+  },
+  optionLabel: {
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.regular,
+    lineHeight: fontSize.md,
+    letterSpacing: 0,
+    textAlign: "left",
+    color: colors.slateBlue,
+    width: "100%",
+  },
+  optionLabelSelected: {
+    fontWeight: fontWeight.medium,
+    color: colors.slateBlue,
+  },
+  optionSelected: {
+    opacity: 1,
+    borderRadius: radii.sm,
+    paddingTop: 12,
+    paddingRight: spacing.sm,
+    paddingBottom: 12,
+    paddingLeft: spacing.sm,
+    backgroundColor: colors.countrySelectorSelectedBg,
+  },
+  optionHighlighted: {
+    backgroundColor: colors.stormGray0,
+  },
+});
+
+export function resolveSelectDropdownHeight(optionCount: number): number {
+  const contentHeight =
+    optionCount * SELECT_OPTION_HEIGHT +
+    Math.max(0, optionCount - 1) * SELECT_OPTION_GAP +
+    SELECT_DROPDOWN_PADDING * 2;
+
+  return Math.min(contentHeight, SELECT_DROPDOWN_MAX_HEIGHT);
+}
+
+export function resolveSelectDropdownTop(
+  anchor: { y: number; height: number },
+  dropdownHeight: number,
+): number {
+  const windowHeight = Dimensions.get("window").height;
+  const spaceBelow = windowHeight - (anchor.y + anchor.height + SELECT_DROPDOWN_GAP);
+  const spaceAbove = anchor.y - SELECT_DROPDOWN_GAP;
+  const topBelow = anchor.y + anchor.height + SELECT_DROPDOWN_GAP;
+  const topAbove = anchor.y - SELECT_DROPDOWN_GAP - dropdownHeight;
+
+  if (spaceBelow >= dropdownHeight) {
+    return topBelow;
+  }
+
+  if (spaceAbove >= dropdownHeight) {
+    return topAbove;
+  }
+
+  if (spaceAbove > spaceBelow) {
+    return Math.max(0, topAbove);
+  }
+
+  return Math.max(0, Math.min(topBelow, windowHeight - dropdownHeight));
+}