@atlure/ui 0.4.0 → 0.6.0

package/src/lib/calendar.ts

@@ -0,0 +1,204 @@
+export type IsoDate = string;
+export type YearMonth = string;
+
+const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+const YEAR_MONTH_PATTERN = /^\d{4}-\d{2}$/;
+const MS_PER_DAY = 86_400_000;
+
+const SUNDAY_FIRST_REGIONS: ReadonlySet<string> = new Set([
+  "US",
+  "CA",
+  "MX",
+  "JP",
+  "KR",
+  "PH",
+  "BR",
+  "IL",
+  "SA",
+  "AE",
+  "EG",
+  "AU",
+]);
+
+export function parseIsoDate(iso: IsoDate): { year: number; month: number; day: number } {
+  if (!ISO_DATE_PATTERN.test(iso)) {
+    throw new Error(`Invalid ISO date: ${iso}`);
+  }
+  const parts = iso.split("-");
+  return {
+    year: Number(parts[0]),
+    month: Number(parts[1]),
+    day: Number(parts[2]),
+  };
+}
+
+export function parseYearMonth(yearMonth: YearMonth): { year: number; month: number } {
+  if (!YEAR_MONTH_PATTERN.test(yearMonth)) {
+    throw new Error(`Invalid year-month: ${yearMonth}`);
+  }
+  const parts = yearMonth.split("-");
+  return {
+    year: Number(parts[0]),
+    month: Number(parts[1]),
+  };
+}
+
+export function toIsoDate(year: number, month: number, day: number): IsoDate {
+  return `${String(year).padStart(4, "0")}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+}
+
+export function toYearMonth(year: number, month: number): YearMonth {
+  return `${String(year).padStart(4, "0")}-${String(month).padStart(2, "0")}`;
+}
+
+export function yearMonthOf(iso: IsoDate): YearMonth {
+  const { year, month } = parseIsoDate(iso);
+  return toYearMonth(year, month);
+}
+
+export function daysInMonth(year: number, month: number): number {
+  return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+
+export function dayOfWeek(iso: IsoDate): number {
+  const { year, month, day } = parseIsoDate(iso);
+  return new Date(Date.UTC(year, month - 1, day)).getUTCDay();
+}
+
+export function addMonths(yearMonth: YearMonth, delta: number): YearMonth {
+  const { year, month } = parseYearMonth(yearMonth);
+  const totalMonths = year * 12 + (month - 1) + delta;
+  const nextYear = Math.floor(totalMonths / 12);
+  const nextMonth = ((totalMonths % 12) + 12) % 12 + 1;
+  return toYearMonth(nextYear, nextMonth);
+}
+
+export function daysBetween(startIso: IsoDate, endIso: IsoDate): number {
+  const start = parseIsoDate(startIso);
+  const end = parseIsoDate(endIso);
+  const startUtc = Date.UTC(start.year, start.month - 1, start.day);
+  const endUtc = Date.UTC(end.year, end.month - 1, end.day);
+  return Math.round((endUtc - startUtc) / MS_PER_DAY);
+}
+
+export function firstDayOfWeek(locale: string): number {
+  try {
+    const loc = new Intl.Locale(locale);
+    const info =
+      (loc as unknown as { getWeekInfo?: () => { firstDay?: number } }).getWeekInfo?.() ??
+      (loc as unknown as { weekInfo?: { firstDay?: number } }).weekInfo;
+    if (info && typeof info.firstDay === "number") {
+      return info.firstDay === 7 ? 0 : info.firstDay;
+    }
+    const region = loc.maximize().region;
+    return region !== undefined && SUNDAY_FIRST_REGIONS.has(region) ? 0 : 1;
+  } catch {
+    return 1;
+  }
+}
+
+export interface MonthGridCell {
+  iso: IsoDate;
+  dayNumber: number;
+  isCurrentMonth: boolean;
+}
+
+export function buildMonthGrid(yearMonth: YearMonth, firstDow: number): MonthGridCell[][] {
+  const { year, month } = parseYearMonth(yearMonth);
+  const firstOfMonthDow = dayOfWeek(toIsoDate(year, month, 1));
+  const leading = (firstOfMonthDow - firstDow + 7) % 7;
+  const inThisMonth = daysInMonth(year, month);
+  const totalCells = Math.ceil((leading + inThisMonth) / 7) * 7;
+
+  const previousYearMonth = addMonths(yearMonth, -1);
+  const { year: prevY, month: prevM } = parseYearMonth(previousYearMonth);
+  const previousMonthDays = daysInMonth(prevY, prevM);
+  const nextYearMonth = addMonths(yearMonth, 1);
+  const { year: nextY, month: nextM } = parseYearMonth(nextYearMonth);
+
+  const cells: MonthGridCell[] = [];
+  for (let cellIndex = 0; cellIndex < totalCells; cellIndex++) {
+    const offset = cellIndex - leading;
+    if (offset < 0) {
+      const day = previousMonthDays + offset + 1;
+      cells.push({ iso: toIsoDate(prevY, prevM, day), dayNumber: day, isCurrentMonth: false });
+    } else if (offset < inThisMonth) {
+      const day = offset + 1;
+      cells.push({ iso: toIsoDate(year, month, day), dayNumber: day, isCurrentMonth: true });
+    } else {
+      const day = offset - inThisMonth + 1;
+      cells.push({ iso: toIsoDate(nextY, nextM, day), dayNumber: day, isCurrentMonth: false });
+    }
+  }
+
+  const weeks: MonthGridCell[][] = [];
+  for (let start = 0; start < cells.length; start += 7) {
+    weeks.push(cells.slice(start, start + 7));
+  }
+  return weeks;
+}
+
+export function isDateInRange(iso: IsoDate, minDate?: IsoDate, maxDate?: IsoDate): boolean {
+  if (minDate !== undefined && iso < minDate) return false;
+  if (maxDate !== undefined && iso > maxDate) return false;
+  return true;
+}
+
+export function formatMonthLabel(yearMonth: YearMonth, locale: string): string {
+  const { year, month } = parseYearMonth(yearMonth);
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "long",
+    timeZone: "UTC",
+  }).format(new Date(Date.UTC(year, month - 1, 1, 12, 0, 0)));
+}
+
+const SUNDAY_ANCHOR_UTC = Date.UTC(2024, 0, 7);
+
+export function formatWeekdayShort(dayOfWeekIndex: number, locale: string): string {
+  const date = new Date(SUNDAY_ANCHOR_UTC + dayOfWeekIndex * MS_PER_DAY);
+  return new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" }).format(date);
+}
+
+export function formatFullDate(iso: IsoDate, locale: string): string {
+  const { year, month, day } = parseIsoDate(iso);
+  return new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(
+    new Date(Date.UTC(year, month - 1, day, 12, 0, 0)),
+  );
+}
+
+export function isLocaleHour12(locale: string): boolean {
+  const parts = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    minute: "numeric",
+    timeZone: "UTC",
+  }).formatToParts(new Date(Date.UTC(2024, 0, 1, 13, 0, 0)));
+  return parts.some((part) => part.type === "dayPeriod");
+}
+
+export function formatHourLabel(hour24: number, hour12Mode: boolean, locale: string): string {
+  const date = new Date(Date.UTC(2024, 0, 1, hour24, 0, 0));
+  return new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    hour12: hour12Mode,
+    timeZone: "UTC",
+  }).format(date);
+}
+
+export function padTwoDigits(value: number): string {
+  return String(value).padStart(2, "0");
+}
+
+export function formatTimeValue(hour24: number, minute: number): string {
+  return `${padTwoDigits(hour24)}:${padTwoDigits(minute)}`;
+}
+
+export function parseTimeValue(value: string): { hour: number; minute: number } | undefined {
+  const match = /^(\d{2}):(\d{2})$/.exec(value);
+  if (match === null) return undefined;
+  const hour = Number(match[1]);
+  const minute = Number(match[2]);
+  if (Number.isNaN(hour) || Number.isNaN(minute)) return undefined;
+  if (hour < 0 || hour > 23 || minute < 0 || minute > 59) return undefined;
+  return { hour, minute };
+}

package/src/lib/format/date.ts

@@ -0,0 +1,46 @@
+export type DateStyle = "short" | "medium" | "long";
+
+const millisecondsPerSecond = 1000;
+
+const relativeThresholds: ReadonlyArray<{ unit: Intl.RelativeTimeFormatUnit; seconds: number }> = [
+  { unit: "year", seconds: 60 * 60 * 24 * 365 },
+  { unit: "month", seconds: 60 * 60 * 24 * 30 },
+  { unit: "day", seconds: 60 * 60 * 24 },
+  { unit: "hour", seconds: 60 * 60 },
+  { unit: "minute", seconds: 60 },
+];
+
+export function formatDate(isoDateTime: string, locale: string, dateStyle: DateStyle = "medium") {
+  return new Intl.DateTimeFormat(locale, { dateStyle }).format(new Date(isoDateTime));
+}
+
+export function formatDateRange(
+  startIsoDateTime: string,
+  endIsoDateTime: string,
+  locale: string,
+  dateStyle: DateStyle = "medium",
+): string {
+  return new Intl.DateTimeFormat(locale, { dateStyle }).formatRange(
+    new Date(startIsoDateTime),
+    new Date(endIsoDateTime),
+  );
+}
+
+export function formatRelativeDate(
+  isoDateTime: string,
+  locale: string,
+  now: Date = new Date(),
+): string {
+  const deltaSeconds =
+    (new Date(isoDateTime).getTime() - now.getTime()) / millisecondsPerSecond;
+  const formatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  const magnitude = Math.abs(deltaSeconds);
+
+  const threshold = relativeThresholds.find(({ seconds }) => magnitude >= seconds);
+
+  if (threshold === undefined) {
+    return formatter.format(Math.trunc(deltaSeconds), "second");
+  }
+
+  return formatter.format(Math.trunc(deltaSeconds / threshold.seconds), threshold.unit);
+}

package/src/lib/format/distance.ts

@@ -0,0 +1,36 @@
+export type MeasurementSystem = "metric" | "imperial";
+
+const metersPerKilometer = 1000;
+const metersPerMile = 1609.344;
+
+function unitFormatter(
+  locale: string,
+  unit: string,
+  fractionDigits: number,
+): Intl.NumberFormat {
+  return new Intl.NumberFormat(locale, {
+    style: "unit",
+    unit,
+    unitDisplay: "short",
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  });
+}
+
+export function formatDistance(
+  meters: number,
+  locale: string,
+  measurementSystem: MeasurementSystem,
+): string {
+  const distance = Math.max(0, meters);
+
+  if (measurementSystem === "imperial") {
+    return unitFormatter(locale, "mile", 1).format(distance / metersPerMile);
+  }
+
+  if (distance < metersPerKilometer) {
+    return unitFormatter(locale, "meter", 0).format(distance);
+  }
+
+  return unitFormatter(locale, "kilometer", 1).format(distance / metersPerKilometer);
+}

package/src/lib/format/duration.ts

@@ -0,0 +1,28 @@
+const minutesPerHour = 60;
+
+function unitFormatter(locale: string, unit: "hour" | "minute"): Intl.NumberFormat {
+  return new Intl.NumberFormat(locale, {
+    style: "unit",
+    unit,
+    unitDisplay: "short",
+    maximumFractionDigits: 0,
+  });
+}
+
+export function formatDuration(minutes: number, locale: string): string {
+  const wholeMinutes = Math.max(0, Math.round(minutes));
+
+  if (wholeMinutes < minutesPerHour) {
+    return unitFormatter(locale, "minute").format(wholeMinutes);
+  }
+
+  const hours = Math.floor(wholeMinutes / minutesPerHour);
+  const remainingMinutes = wholeMinutes % minutesPerHour;
+  const formattedHours = unitFormatter(locale, "hour").format(hours);
+
+  if (remainingMinutes === 0) {
+    return formattedHours;
+  }
+
+  return `${formattedHours} ${unitFormatter(locale, "minute").format(remainingMinutes)}`;
+}

package/src/lib/format/money.ts

@@ -0,0 +1,20 @@
+import type { Money } from "@atlure/types";
+
+export type RateUnit = "hour" | "night" | "walk";
+
+const fallbackCurrencyFractionDigits = 2;
+
+function currencyFormatter(locale: string, currency: Money["currency"]): Intl.NumberFormat {
+  return new Intl.NumberFormat(locale, { style: "currency", currency });
+}
+
+export function formatMoney(money: Money, locale: string): string {
+  const formatter = currencyFormatter(locale, money.currency);
+  const { maximumFractionDigits = fallbackCurrencyFractionDigits } = formatter.resolvedOptions();
+
+  return formatter.format(money.amountMinor / 10 ** maximumFractionDigits);
+}
+
+export function formatMoneyRate(money: Money, locale: string, per: RateUnit): string {
+  return `${formatMoney(money, locale)} per ${per}`;
+}

package/src/lib/locale.tsx

@@ -0,0 +1,36 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+import type { MeasurementSystem } from "./format/distance";
+
+export interface LocalePreferences {
+  locale: string;
+  measurementSystem: MeasurementSystem;
+}
+
+export const defaultLocalePreferences: LocalePreferences = {
+  locale: "en-IE",
+  measurementSystem: "metric",
+};
+
+const LocaleContext = createContext<LocalePreferences>(defaultLocalePreferences);
+
+export function LocaleProvider({
+  locale,
+  measurementSystem = "metric",
+  children,
+}: {
+  locale: string;
+  measurementSystem?: MeasurementSystem;
+  children: ReactNode;
+}) {
+  const preferences = useMemo(() => ({ locale, measurementSystem }), [locale, measurementSystem]);
+
+  return <LocaleContext.Provider value={preferences}>{children}</LocaleContext.Provider>;
+}
+
+export function useLocale(): LocalePreferences {
+  return useContext(LocaleContext);
+}
+
+export type { MeasurementSystem };
+export { LocaleContext };

package/src/lib/portal.tsx

@@ -0,0 +1,54 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+export interface PortalRegistry {
+  activeOverlayId: string | null;
+  requestSlot: (id: string) => void;
+  releaseSlot: (id: string) => void;
+}
+
+const PortalContext = createContext<PortalRegistry | null>(null);
+
+const MISSING_HOST_MESSAGE =
+  "No <PortalHost> found. Render <PortalHost> once at the app root, above the navigator, so overlays can queue and paint above the tab bar.";
+
+export function PortalHost({ children }: { children: ReactNode }) {
+  const [queuedIds, setQueuedIds] = useState<string[]>([]);
+
+  const requestSlot = useCallback((id: string) => {
+    setQueuedIds((currentIds) => (currentIds.includes(id) ? currentIds : [...currentIds, id]));
+  }, []);
+
+  const releaseSlot = useCallback((id: string) => {
+    setQueuedIds((currentIds) => currentIds.filter((queuedId) => queuedId !== id));
+  }, []);
+
+  const registry = useMemo(
+    () => ({ activeOverlayId: queuedIds[0] ?? null, requestSlot, releaseSlot }),
+    [queuedIds, requestSlot, releaseSlot],
+  );
+
+  return <PortalContext.Provider value={registry}>{children}</PortalContext.Provider>;
+}
+
+export function usePortalRegistry(): PortalRegistry {
+  const registry = useContext(PortalContext);
+
+  if (registry === null) {
+    throw new Error(MISSING_HOST_MESSAGE);
+  }
+
+  return registry;
+}
+
+export function Portal({ children }: { children: ReactNode }) {
+  usePortalRegistry();
+
+  return <>{children}</>;
+}

package/src/lib/touch-target.ts

@@ -4,6 +4,10 @@ export const MIN_TOUCH_TARGET_SIZE = 44;
 
 export type ControlSize = keyof typeof controlHeight;
 
+export function touchTargetHitSlopForSize(sizePx: number): number {
+  return Math.max(0, Math.ceil((MIN_TOUCH_TARGET_SIZE - sizePx) / 2));
+}
+
 export function touchTargetHitSlop(size: ControlSize): number {
-  return Math.max(0, Math.ceil((MIN_TOUCH_TARGET_SIZE - controlHeight[size]) / 2));
+  return touchTargetHitSlopForSize(controlHeight[size]);
 }

package/src/lib/use-sheet.ts

@@ -0,0 +1,18 @@
+import { useCallback, useMemo, useState } from "react";
+
+export interface SheetControl {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+}
+
+export function useSheet(isInitiallyOpen = false): SheetControl {
+  const [isOpen, setIsOpen] = useState(isInitiallyOpen);
+
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const toggle = useCallback(() => setIsOpen((wasOpen) => !wasOpen), []);
+
+  return useMemo(() => ({ isOpen, open, close, toggle }), [isOpen, open, close, toggle]);
+}

package/src/lib/use-toast.ts

@@ -0,0 +1,17 @@
+import { useContext } from "react";
+
+import {
+  MISSING_TOAST_PROVIDER_MESSAGE,
+  ToastContext,
+  type ToastQueue,
+} from "../components/toast/toast-context";
+
+export function useToast(): ToastQueue {
+  const queue = useContext(ToastContext);
+
+  if (queue === null) {
+    throw new Error(MISSING_TOAST_PROVIDER_MESSAGE);
+  }
+
+  return queue;
+}

package/src/variants/avatar-variants.ts

@@ -1,40 +1,93 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
-export const avatarVariants = cva(
-  "items-center justify-center overflow-hidden rounded-full bg-muted",
+export const avatarRootVariants = cva("relative self-start");
+
+export const avatarVariants = cva("items-center justify-center overflow-hidden bg-muted", {
+  variants: {
+    size: {
+      xs: "h-6 w-6",
+      sm: "h-8 w-8",
+      md: "h-10 w-10",
+      lg: "h-12 w-12",
+      xl: "h-16 w-16",
+    },
+    shape: {
+      circle: "rounded-full",
+      rounded: "rounded-lg",
+    },
+    hasRing: {
+      true: "border-2 border-primary",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "circle",
+    hasRing: false,
+  },
+});
+
+export const avatarFallbackVariants = cva("font-semibold uppercase text-muted-foreground", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base",
+      xl: "text-xl",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const avatarPresenceVariants = cva(
+  "absolute bottom-0 right-0 rounded-full border-2 border-background",
   {
     variants: {
       size: {
-        sm: "h-8 w-8",
-        md: "h-10 w-10",
-        lg: "h-12 w-12",
-        xl: "h-16 w-16",
+        xs: "h-2 w-2",
+        sm: "h-2.5 w-2.5",
+        md: "h-3 w-3",
+        lg: "h-3.5 w-3.5",
+        xl: "h-4 w-4",
       },
-      hasRing: {
-        true: "border-2 border-primary",
-        false: "",
+      presence: {
+        online: "bg-primary",
+        offline: "bg-muted-foreground",
       },
     },
     defaultVariants: {
       size: "md",
-      hasRing: false,
+      presence: "offline",
     },
   },
 );
 
-export const avatarFallbackVariants = cva("font-semibold uppercase text-muted-foreground", {
+export const avatarGroupVariants = cva("flex-row items-center");
+
+export const avatarGroupItemVariants = cva("", {
   variants: {
     size: {
-      sm: "text-xs",
-      md: "text-sm",
-      lg: "text-base",
-      xl: "text-xl",
+      xs: "-ml-2",
+      sm: "-ml-2.5",
+      md: "-ml-3",
+      lg: "-ml-4",
+      xl: "-ml-5",
+    },
+    isFirst: {
+      true: "ml-0",
+      false: "",
     },
   },
   defaultVariants: {
     size: "md",
+    isFirst: false,
   },
 });
 
 export type AvatarVariantProps = VariantProps<typeof avatarVariants>;
 export type AvatarFallbackVariantProps = VariantProps<typeof avatarFallbackVariants>;
+export type AvatarPresenceVariantProps = VariantProps<typeof avatarPresenceVariants>;
+export type AvatarGroupItemVariantProps = VariantProps<typeof avatarGroupItemVariants>;

package/src/variants/badge-variants.ts

@@ -4,14 +4,18 @@ export const badgeVariants = cva("flex-row items-center justify-center self-star
   variants: {
     variant: {
       primary: "bg-primary",
+      default: "bg-primary",
       secondary: "bg-secondary",
       outline: "border border-border/20 bg-transparent",
+      success: "bg-success",
+      warning: "bg-warning",
       destructive: "bg-destructive",
       muted: "bg-muted",
     },
     size: {
       sm: "px-sm py-xs",
       md: "px-md py-xs",
+      default: "px-md py-xs",
     },
   },
   defaultVariants: {
@@ -24,14 +28,18 @@ export const badgeLabelVariants = cva("font-medium", {
   variants: {
     variant: {
       primary: "text-primary-foreground",
+      default: "text-primary-foreground",
       secondary: "text-secondary-foreground",
       outline: "text-foreground",
+      success: "text-success-foreground",
+      warning: "text-warning-foreground",
       destructive: "text-destructive-foreground",
       muted: "text-muted-foreground",
     },
     size: {
       sm: "text-xs",
       md: "text-sm",
+      default: "text-sm",
     },
   },
   defaultVariants: {

package/src/variants/calendar-variants.ts

@@ -0,0 +1,26 @@
+export const calendarContainerClassName = "w-full px-md";
+export const calendarHeaderClassName = "flex-row items-center justify-between py-md";
+export const calendarMonthLabelClassName = "text-base font-medium text-foreground";
+export const calendarNavButtonClassName = "px-md py-sm";
+export const calendarWeekdayRowClassName = "flex-row";
+export const calendarWeekdayCellClassName = "flex-1 items-center py-xs";
+export const calendarWeekdayLabelClassName = "text-xs uppercase text-muted-foreground";
+export const calendarWeekRowClassName = "flex-row";
+export const calendarDayCellClassName =
+  "flex-1 aspect-square items-center justify-center rounded-full";
+export const calendarDayCellSelectedClassName = "bg-primary";
+export const calendarDayCellInRangeClassName = "rounded-none bg-primary/20";
+export const calendarDayCellRangeStartClassName = "rounded-l-full rounded-r-none bg-primary";
+export const calendarDayCellRangeEndClassName = "rounded-l-none rounded-r-full bg-primary";
+export const calendarDayCellDisabledClassName = "opacity-40";
+export const calendarDayLabelClassName = "text-sm text-foreground";
+export const calendarDayLabelOutsideMonthClassName = "text-muted-foreground/50";
+export const calendarDayLabelSelectedClassName = "text-primary-foreground";
+export const calendarMarkerDotClassName = "absolute bottom-1 h-1 w-1 rounded-full bg-primary";
+export const dateRangePickerContainerClassName = "w-full";
+export const dateRangePickerSummaryClassName = "px-md pb-md text-sm text-foreground";
+export const timePickerBodyClassName = "flex-row py-md";
+export const timePickerColumnClassName = "flex-1";
+export const timePickerOptionClassName = "items-center py-sm";
+export const timePickerOptionSelectedClassName = "bg-primary/10";
+export const timePickerOptionLabelClassName = "text-base text-foreground";