@mlola-ui/registry 1.0.0

package/snapshot/source/packages/components/calendar/calendar.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import * as React from "react";
+import { IconChevronLeft, IconChevronRight } from "@mlola-ui/icons";
+import { cx } from "../_internal/react";
+import {
+  addDays,
+  addMonths,
+  clampDate,
+  daysBetween,
+  endOfWeek,
+  isBetween,
+  isDateBlocked,
+  monthGrid,
+  rangeReach,
+  sameMonth,
+  startOfMonth,
+  startOfWeek,
+  today as todayOf,
+  toTime,
+  type DateMatchers,
+  type ISODate,
+} from "./dates";
+
+export type { DateMatcher, DateMatchers, ISODate, RangeProblem, RangeRules } from "./dates";
+export { addDays, addMonths, isDateBlocked, isValidISODate, matchesDate, rangeProblem, today } from "./dates";
+
+export interface DateRange {
+  from: ISODate;
+  to?: ISODate;
+}
+
+interface BaseProps {
+  /** The month shown first: any date inside it. */
+  month?: ISODate;
+  defaultMonth?: ISODate;
+  onMonthChange?: (month: ISODate) => void;
+  /** One month, or two side by side for ranges. */
+  months?: 1 | 2;
+  min?: ISODate;
+  max?: ISODate;
+  /**
+   * Dates that cannot be picked: single dates, `{ from, to }` ranges,
+   * `{ before }`, `{ after }`, `{ dayOfWeek: [0, 6] }` or a function.
+   */
+  disabledDates?: DateMatchers;
+  /** When given, only these dates can be picked; same forms as `disabledDates`. */
+  enabledDates?: DateMatchers;
+  /** A function form of `disabledDates`, kept for convenience. */
+  isDisabled?: (date: ISODate) => boolean;
+  /** 1 starts weeks on Monday, 0 on Sunday. */
+  weekStart?: 0 | 1;
+  locale?: string;
+  showOutsideDays?: boolean;
+  /** Today's date. Pass it when rendering on the server so both renders agree. */
+  today?: ISODate;
+  label?: string;
+  className?: string;
+}
+
+interface SingleProps {
+  mode?: "single";
+  value?: ISODate | null;
+  defaultValue?: ISODate | null;
+  onValueChange?: (value: ISODate | null) => void;
+}
+
+interface RangeProps {
+  mode: "range";
+  value?: DateRange | null;
+  defaultValue?: DateRange | null;
+  onValueChange?: (value: DateRange | null) => void;
+  /** Shortest range in days, counted inclusively (the 1st to the 3rd is 3 days). */
+  minDays?: number;
+  /** Longest range in days, counted inclusively. */
+  maxDays?: number;
+  /** Let a range pass over disabled dates; by default it stops at the first one. */
+  allowDisabledInRange?: boolean;
+}
+
+interface MultipleProps {
+  mode: "multiple";
+  value?: ISODate[];
+  defaultValue?: ISODate[];
+  onValueChange?: (value: ISODate[]) => void;
+}
+
+export type CalendarProps = BaseProps & (SingleProps | RangeProps | MultipleProps);
+
+type Selection = ISODate | null | DateRange | ISODate[];
+
+/** Where the calendar opens: the selection, else today, clamped to the allowed range. */
+function anchorOf(selection: Selection, fallback: ISODate) {
+  if (typeof selection === "string") return selection;
+  if (Array.isArray(selection)) return selection[0] ?? fallback;
+  return selection?.from ?? fallback;
+}
+
+/**
+ * A month grid for picking one date, a range, or several. Arrow keys move by
+ * day and week, Home and End to the week's edges, Page Up and Page Down by
+ * month (with Shift, by year). Ranges preview as the pointer moves.
+ */
+export function Calendar(props: CalendarProps) {
+  const {
+    month,
+    defaultMonth,
+    onMonthChange,
+    months = 1,
+    min,
+    max,
+    disabledDates,
+    enabledDates,
+    isDisabled,
+    weekStart = 1,
+    locale = "en",
+    showOutsideDays = true,
+    today: todayProp,
+    label = "Calendar",
+    className,
+  } = props;
+  const mode = props.mode ?? "single";
+  const today = todayProp ?? todayOf();
+
+  const [innerValue, setInnerValue] = React.useState<Selection>((props.defaultValue as Selection) ?? (mode === "multiple" ? [] : null));
+  const selection: Selection = props.value !== undefined ? (props.value as Selection) : innerValue;
+  const commit = (next: Selection) => {
+    if (props.value === undefined) setInnerValue(next);
+    (props.onValueChange as ((value: Selection) => void) | undefined)?.(next);
+  };
+
+  const [innerMonth, setInnerMonth] = React.useState(() => startOfMonth(defaultMonth ?? clampDate(anchorOf(selection, today), min, max)));
+  const shownMonth = month ? startOfMonth(month) : innerMonth;
+  const setMonth = (next: ISODate) => {
+    const first = startOfMonth(next);
+    if (!month) setInnerMonth(first);
+    onMonthChange?.(first);
+  };
+
+  const [focused, setFocused] = React.useState<ISODate>(() => clampDate(anchorOf(selection, today), min, max));
+  const [hovered, setHovered] = React.useState<ISODate | null>(null);
+  const moved = React.useRef(false);
+  const buttons = React.useRef(new Map<ISODate, HTMLButtonElement>());
+
+  // Keep the focused day inside what is shown.
+  const visible = Array.from({ length: months }, (_, index) => addMonths(shownMonth, index));
+  const inView = (date: ISODate) => visible.some((first) => sameMonth(first, date));
+  const focusable = inView(focused) ? focused : shownMonth;
+
+  React.useEffect(() => {
+    if (!moved.current) return;
+    moved.current = false;
+    buttons.current.get(focused)?.focus();
+  }, [focused, shownMonth]);
+
+  const blocked = (date: ISODate) => isDateBlocked(date, { min, max, disabled: disabledDates, enabled: enabledDates }) || Boolean(isDisabled?.(date));
+
+  // While a range waits for its end, dates it cannot reach (past a disabled day,
+  // too short or too long) are marked; picking one starts a new range there.
+  const rules = props.mode === "range" ? { minDays: props.minDays, maxDays: props.maxDays, allowBlockedInside: props.allowDisabledInRange } : {};
+  const pending = mode === "range" && selection && !Array.isArray(selection) && typeof selection !== "string" && !selection.to ? selection.from : null;
+  const reach = pending ? rangeReach(pending, blocked, rules) : null;
+  const reachable = (date: ISODate) => {
+    if (!pending || !reach) return true;
+    if (blocked(date) || date < reach.low || date > reach.high) return false;
+    // maxDays is already inside the reach; only the shortest length is left to check.
+    return Math.abs(daysBetween(pending, date)) + 1 >= (rules.minDays ?? 1);
+  };
+
+  const select = (date: ISODate) => {
+    if (blocked(date)) return;
+    if (mode === "single") commit(date === selection ? null : date);
+    else if (mode === "multiple") {
+      const list = Array.isArray(selection) ? selection : [];
+      commit(list.includes(date) ? list.filter((item) => item !== date) : [...list, date].sort());
+    } else {
+      const range = selection as DateRange | null;
+      if (!range || range.to || !reachable(date)) commit({ from: date });
+      else if (date < range.from) commit({ from: date, to: range.from });
+      else commit({ from: range.from, to: date });
+    }
+  };
+
+  const moveTo = (date: ISODate) => {
+    const next = clampDate(date, min, max);
+    moved.current = true;
+    setFocused(next);
+    if (!inView(next)) setMonth(next < shownMonth ? next : addMonths(next, -(months - 1)));
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    const year = event.shiftKey ? 12 : 1;
+    const moves: Record<string, () => ISODate> = {
+      ArrowLeft: () => addDays(focusable, -1),
+      ArrowRight: () => addDays(focusable, 1),
+      ArrowUp: () => addDays(focusable, -7),
+      ArrowDown: () => addDays(focusable, 7),
+      Home: () => startOfWeek(focusable, weekStart),
+      End: () => endOfWeek(focusable, weekStart),
+      PageUp: () => addMonths(focusable, -year),
+      PageDown: () => addMonths(focusable, year),
+    };
+    if (moves[event.key]) {
+      event.preventDefault();
+      moveTo(moves[event.key]());
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      select(focusable);
+    }
+  };
+
+  const range = mode === "range" ? (selection as DateRange | null) : null;
+  const rangeEnd = range ? range.to ?? (hovered && reachable(hovered) ? hovered : undefined) : undefined;
+  const [rangeLow, rangeHigh] = range && rangeEnd ? (range.from <= rangeEnd ? [range.from, rangeEnd] : [rangeEnd, range.from]) : [undefined, undefined];
+  const isSelected = (date: ISODate) =>
+    mode === "single" ? selection === date : mode === "multiple" ? Array.isArray(selection) && selection.includes(date) : Boolean(range && (range.from === date || range.to === date));
+
+  const monthTitle = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" });
+  const weekdayShort = new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" });
+  const weekdayLong = new Intl.DateTimeFormat(locale, { weekday: "long", timeZone: "UTC" });
+  const fullDate = new Intl.DateTimeFormat(locale, { weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC" });
+  const dayNumber = new Intl.DateTimeFormat(locale, { day: "numeric", timeZone: "UTC" });
+  const firstWeek = monthGrid(shownMonth, weekStart)[0];
+  const canPrev = !min || startOfMonth(min) < shownMonth;
+  const canNext = !max || startOfMonth(max) > visible[visible.length - 1];
+
+  return (
+    <div role="group" aria-label={label} className={cx("ml-calendar", className)} data-months={months}>
+      <div className="ml-calendar-months" onKeyDown={onKeyDown} onPointerLeave={() => setHovered(null)}>
+        {visible.map((first, index) => (
+          <div key={first} className="ml-calendar-month">
+            <div className="ml-calendar-caption">
+              {index === 0 ? (
+                <button type="button" className="ml-calendar-nav" aria-label="Previous month" disabled={!canPrev} onClick={() => setMonth(addMonths(shownMonth, -1))}>
+                  <IconChevronLeft aria-hidden="true" size="1em" />
+                </button>
+              ) : (
+                <span aria-hidden="true" />
+              )}
+              <p className="ml-calendar-title" aria-live="polite">
+                {monthTitle.format(new Date(toTime(first)))}
+              </p>
+              {index === visible.length - 1 ? (
+                <button type="button" className="ml-calendar-nav" aria-label="Next month" disabled={!canNext} onClick={() => setMonth(addMonths(shownMonth, 1))}>
+                  <IconChevronRight aria-hidden="true" size="1em" />
+                </button>
+              ) : (
+                <span aria-hidden="true" />
+              )}
+            </div>
+          <div role="grid" aria-label={monthTitle.format(new Date(toTime(first)))} className="ml-calendar-grid">
+            <div role="row" className="ml-calendar-row">
+              {firstWeek.map(({ date }) => (
+                <span key={date} role="columnheader" className="ml-calendar-weekday" aria-label={weekdayLong.format(new Date(toTime(date)))}>
+                  {weekdayShort.format(new Date(toTime(date))).slice(0, 2)}
+                </span>
+              ))}
+            </div>
+            {monthGrid(first, weekStart).map((week) => (
+              <div key={week[0].date} role="row" className="ml-calendar-row">
+                {week.map(({ date, inMonth }) => {
+                  if (!inMonth && (!showOutsideDays || months > 1)) return <span key={date} role="gridcell" className="ml-calendar-cell" aria-hidden="true" />;
+                  const selected = isSelected(date);
+                  const inRange = Boolean(range && rangeEnd && isBetween(date, range.from, rangeEnd));
+                  return (
+                    <span
+                      key={date}
+                      role="gridcell"
+                      aria-selected={selected || inRange || undefined}
+                      className="ml-calendar-cell"
+                      data-range={inRange ? (date === rangeLow ? "start" : date === rangeHigh ? "end" : "middle") : undefined}
+                      data-preview={inRange && !range?.to ? "" : undefined}
+                    >
+                      <button
+                        ref={(element) => {
+                          if (element) buttons.current.set(date, element);
+                          else buttons.current.delete(date);
+                        }}
+                        type="button"
+                        className="ml-calendar-day"
+                        tabIndex={date === focusable && inMonth ? 0 : -1}
+                        aria-label={fullDate.format(new Date(toTime(date)))}
+                        aria-current={date === today ? "date" : undefined}
+                        aria-disabled={blocked(date) || undefined}
+                        data-selected={selected || undefined}
+                        data-unreachable={(!blocked(date) && !reachable(date)) || undefined}
+                        data-outside={!inMonth || undefined}
+                        data-today={date === today || undefined}
+                        onClick={() => {
+                          setFocused(date);
+                          select(date);
+                        }}
+                        onPointerEnter={() => mode === "range" && setHovered(date)}
+                        onFocus={() => setFocused(date)}
+                      >
+                        {dayNumber.format(new Date(toTime(date)))}
+                      </button>
+                    </span>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/snapshot/source/packages/components/calendar/dates.ts

@@ -0,0 +1,163 @@
+/**
+ * Calendar dates as ISO strings (YYYY-MM-DD) in UTC arithmetic: no time of
+ * day, no time zone drift, so "the 1st" is the 1st wherever the reader is.
+ */
+export type ISODate = string;
+
+const DAY = 86_400_000;
+const pad = (value: number) => String(value).padStart(2, "0");
+
+export const toTime = (date: ISODate) => Date.parse(`${date}T00:00:00Z`);
+export const fromTime = (time: number): ISODate => new Date(time).toISOString().slice(0, 10);
+
+/** Today in the reader's own calendar, not UTC's. */
+export function today(now = new Date()): ISODate {
+  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+}
+
+export const addDays = (date: ISODate, days: number) => fromTime(toTime(date) + days * DAY);
+
+/** Months later or earlier, keeping the day where the month allows (31 Jan + 1 month = 28/29 Feb). */
+export function addMonths(date: ISODate, months: number): ISODate {
+  const [year, month, day] = date.split("-").map(Number);
+  const index = year * 12 + (month - 1) + months;
+  const nextYear = Math.floor(index / 12);
+  const nextMonth = index - nextYear * 12;
+  const last = new Date(Date.UTC(nextYear, nextMonth + 1, 0)).getUTCDate();
+  return `${nextYear}-${pad(nextMonth + 1)}-${pad(Math.min(day, last))}`;
+}
+
+export const startOfMonth = (date: ISODate): ISODate => `${date.slice(0, 7)}-01`;
+export const sameMonth = (a: ISODate, b: ISODate) => a.slice(0, 7) === b.slice(0, 7);
+export const weekday = (date: ISODate) => new Date(toTime(date)).getUTCDay();
+
+export function startOfWeek(date: ISODate, weekStart: 0 | 1 = 1): ISODate {
+  return addDays(date, -((weekday(date) - weekStart + 7) % 7));
+}
+
+export const endOfWeek = (date: ISODate, weekStart: 0 | 1 = 1) => addDays(startOfWeek(date, weekStart), 6);
+
+export const compare = (a: ISODate, b: ISODate) => (a < b ? -1 : a > b ? 1 : 0);
+
+/** Inclusive, in either order. */
+export function isBetween(date: ISODate, a: ISODate, b: ISODate) {
+  const [low, high] = a <= b ? [a, b] : [b, a];
+  return date >= low && date <= high;
+}
+
+export const daysBetween = (a: ISODate, b: ISODate) => Math.round((toTime(b) - toTime(a)) / DAY);
+
+/**
+ * Six weeks for the month of `date`, so the grid never changes height as the
+ * reader pages through months.
+ */
+export function monthGrid(date: ISODate, weekStart: 0 | 1 = 1): Array<Array<{ date: ISODate; inMonth: boolean }>> {
+  const first = startOfMonth(date);
+  const start = startOfWeek(first, weekStart);
+  return Array.from({ length: 6 }, (_, week) =>
+    Array.from({ length: 7 }, (_, day) => {
+      const cell = addDays(start, week * 7 + day);
+      return { date: cell, inMonth: sameMonth(cell, first) };
+    }),
+  );
+}
+
+/** Clamp a date into [min, max] where given. */
+export function clampDate(date: ISODate, min?: ISODate, max?: ISODate): ISODate {
+  if (min && date < min) return min;
+  if (max && date > max) return max;
+  return date;
+}
+
+export function isValidISODate(value: string): value is ISODate {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return false;
+  return fromTime(toTime(value)) === value;
+}
+
+/**
+ * Which dates a rule covers: one date, an inclusive range, everything before
+ * or after a date, days of the week (0 is Sunday), or a function.
+ */
+export type DateMatcher =
+  | ISODate
+  | { from: ISODate; to: ISODate }
+  | { before: ISODate }
+  | { after: ISODate }
+  | { dayOfWeek: number[] }
+  | ((date: ISODate) => boolean);
+export type DateMatchers = DateMatcher | DateMatcher[];
+
+export function matchesDate(date: ISODate, matchers?: DateMatchers): boolean {
+  if (matchers === undefined) return false;
+  const list = Array.isArray(matchers) ? matchers : [matchers];
+  return list.some((matcher) => {
+    if (typeof matcher === "function") return matcher(date);
+    if (typeof matcher === "string") return matcher === date;
+    if ("from" in matcher) return isBetween(date, matcher.from, matcher.to);
+    if ("before" in matcher) return date < matcher.before;
+    if ("after" in matcher) return date > matcher.after;
+    return matcher.dayOfWeek.includes(weekday(date));
+  });
+}
+
+export interface DateRules {
+  min?: ISODate;
+  max?: ISODate;
+  /** Dates that cannot be picked. */
+  disabled?: DateMatchers;
+  /** When given, only these dates can be picked (min, max and disabled still apply). */
+  enabled?: DateMatchers;
+}
+
+export function isDateBlocked(date: ISODate, rules: DateRules) {
+  return Boolean(
+    (rules.min && date < rules.min) ||
+      (rules.max && date > rules.max) ||
+      matchesDate(date, rules.disabled) ||
+      (rules.enabled !== undefined && !matchesDate(date, rules.enabled)),
+  );
+}
+
+export interface RangeRules {
+  /** Shortest range, in days counted inclusively (the 1st to the 3rd is 3 days). */
+  minDays?: number;
+  /** Longest range, in days counted inclusively. */
+  maxDays?: number;
+  /** Let a range pass over blocked dates; its two ends must still be free. */
+  allowBlockedInside?: boolean;
+}
+
+export type RangeProblem = "blocked" | "too-short" | "too-long";
+
+/** Why a range cannot be chosen, or null when it can. */
+export function rangeProblem(from: ISODate, to: ISODate, blocked: (date: ISODate) => boolean, rules: RangeRules = {}): RangeProblem | null {
+  const [low, high] = from <= to ? [from, to] : [to, from];
+  if (blocked(low) || blocked(high)) return "blocked";
+  const days = daysBetween(low, high) + 1;
+  if (rules.minDays && days < rules.minDays) return "too-short";
+  if (rules.maxDays && days > rules.maxDays) return "too-long";
+  if (!rules.allowBlockedInside) for (let date = addDays(low, 1); date < high; date = addDays(date, 1)) if (blocked(date)) return "blocked";
+  return null;
+}
+
+/**
+ * How far a range starting at `from` can reach each way: up to the first
+ * blocked date (unless ranges may pass over them) and never past maxDays.
+ * Scans at most `limit` days in each direction.
+ */
+export function rangeReach(from: ISODate, blocked: (date: ISODate) => boolean, rules: RangeRules = {}, limit = 731) {
+  const span = rules.maxDays ? rules.maxDays - 1 : limit;
+  let low = from;
+  let high = from;
+  for (let step = 1; step <= span; step++) {
+    const date = addDays(from, -step);
+    if (!rules.allowBlockedInside && blocked(date)) break;
+    low = date;
+  }
+  for (let step = 1; step <= span; step++) {
+    const date = addDays(from, step);
+    if (!rules.allowBlockedInside && blocked(date)) break;
+    high = date;
+  }
+  return { low, high };
+}

package/snapshot/source/packages/components/card/card.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import * as React from "react";
+import { cx } from "../_internal/react";
+
+export type CardVariant = "default" | "elevated" | "glass" | "specular";
+type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: CardVariant;
+  interactive?: boolean;
+};
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ variant = "default", interactive = false, className, ...props }, ref) => (
+    <div ref={ref} data-variant={variant} data-interactive={interactive ? "" : undefined} className={cx("ml-card", className)} {...props} />
+  )
+);
+Card.displayName = "Card";
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cx("ml-card-header", className)} {...props} />
+);
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => <h3 ref={ref} className={cx("ml-card-title", className)} {...props} />
+);
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => <p ref={ref} className={cx("ml-card-description", className)} {...props} />
+);
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cx("ml-card-content", className)} {...props} />
+);
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cx("ml-card-footer", className)} {...props} />
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };