sid-ui 0.0.0-stage → 0.1.0

package/src/components/places-search.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Link } from "./Action";
+import { Text } from "./Primitives";
+
+import type { SearchableItem, SearchSource } from "./DataInput";
+import type { Address } from "./places";
+
+/** Wait until a few characters are typed, then ask Geoapify once. */
+export const PLACES_MIN_QUERY = 3;
+export const PLACES_DEBOUNCE_MS = 300;
+export const PLACES_PATH = "/api/places";
+export const GEOAPIFY_ATTRIBUTION_HREF = "https://www.geoapify.com/";
+
+export type PlaceHit = Address & {
+  id: string;
+  label: string;
+};
+
+type PlaceItem = SearchableItem<Address>;
+
+/** Geoapify autocomplete, proxied by the app so the API key stays on the server. */
+export function placeSearch(
+  kind: "city" | "address" | "country" | "location",
+): SearchSource<PlaceItem> {
+  let controller: AbortController | null = null;
+  return {
+    bootstrap: () => [],
+    cancel() {
+      controller?.abort();
+    },
+    async search(query) {
+      controller?.abort();
+      controller = new AbortController();
+      const signal = controller.signal;
+      const params = new URLSearchParams({ kind, text: query });
+      try {
+        const response = await fetch(`${PLACES_PATH}?${params}`, { signal });
+        if (!response.ok) return [];
+        const body = (await response.json()) as { results?: PlaceHit[] };
+        return (body.results ?? []).map((hit) => ({
+          id: hit.id,
+          label: hit.label,
+          auxiliaryData: {
+            line1: hit.line1,
+            city: hit.city,
+            state: hit.state,
+            postalCode: hit.postalCode,
+            country: hit.country,
+          },
+        }));
+      } catch (error) {
+        if (error instanceof DOMException && error.name === "AbortError") throw error;
+        return [];
+      }
+    },
+  };
+}
+
+export function placeItem(label: string, address?: Address): PlaceItem | null {
+  const text = label.trim();
+  if (!text) return null;
+  return { id: text, label: text, auxiliaryData: address };
+}
+
+/** Free Geoapify plans require a visible credit. */
+export function PlacesCredit() {
+  return (
+    <Text type="supporting" color="secondary">
+      Address data © <Link href={GEOAPIFY_ATTRIBUTION_HREF}>Geoapify</Link>
+    </Text>
+  );
+}

package/src/components/places.ts

@@ -0,0 +1,209 @@
+/** US places shared by the city, state, and address selectors. */
+
+export type State = {
+  name: string;
+  abbreviation: string;
+};
+
+export type City = {
+  name: string;
+  state: string;
+};
+
+export type Address = {
+  line1: string;
+  city: string;
+  state: string;
+  postalCode: string;
+  country: string;
+};
+
+export const LOCATION_SEPARATOR = " · ";
+
+export const US_STATES: State[] = [
+  { name: "Alabama", abbreviation: "AL" },
+  { name: "Alaska", abbreviation: "AK" },
+  { name: "Arizona", abbreviation: "AZ" },
+  { name: "Arkansas", abbreviation: "AR" },
+  { name: "California", abbreviation: "CA" },
+  { name: "Colorado", abbreviation: "CO" },
+  { name: "Connecticut", abbreviation: "CT" },
+  { name: "Delaware", abbreviation: "DE" },
+  { name: "District of Columbia", abbreviation: "DC" },
+  { name: "Florida", abbreviation: "FL" },
+  { name: "Georgia", abbreviation: "GA" },
+  { name: "Hawaii", abbreviation: "HI" },
+  { name: "Idaho", abbreviation: "ID" },
+  { name: "Illinois", abbreviation: "IL" },
+  { name: "Indiana", abbreviation: "IN" },
+  { name: "Iowa", abbreviation: "IA" },
+  { name: "Kansas", abbreviation: "KS" },
+  { name: "Kentucky", abbreviation: "KY" },
+  { name: "Louisiana", abbreviation: "LA" },
+  { name: "Maine", abbreviation: "ME" },
+  { name: "Maryland", abbreviation: "MD" },
+  { name: "Massachusetts", abbreviation: "MA" },
+  { name: "Michigan", abbreviation: "MI" },
+  { name: "Minnesota", abbreviation: "MN" },
+  { name: "Mississippi", abbreviation: "MS" },
+  { name: "Missouri", abbreviation: "MO" },
+  { name: "Montana", abbreviation: "MT" },
+  { name: "Nebraska", abbreviation: "NE" },
+  { name: "Nevada", abbreviation: "NV" },
+  { name: "New Hampshire", abbreviation: "NH" },
+  { name: "New Jersey", abbreviation: "NJ" },
+  { name: "New Mexico", abbreviation: "NM" },
+  { name: "New York", abbreviation: "NY" },
+  { name: "North Carolina", abbreviation: "NC" },
+  { name: "North Dakota", abbreviation: "ND" },
+  { name: "Ohio", abbreviation: "OH" },
+  { name: "Oklahoma", abbreviation: "OK" },
+  { name: "Oregon", abbreviation: "OR" },
+  { name: "Pennsylvania", abbreviation: "PA" },
+  { name: "Rhode Island", abbreviation: "RI" },
+  { name: "South Carolina", abbreviation: "SC" },
+  { name: "South Dakota", abbreviation: "SD" },
+  { name: "Tennessee", abbreviation: "TN" },
+  { name: "Texas", abbreviation: "TX" },
+  { name: "Utah", abbreviation: "UT" },
+  { name: "Vermont", abbreviation: "VT" },
+  { name: "Virginia", abbreviation: "VA" },
+  { name: "Washington", abbreviation: "WA" },
+  { name: "West Virginia", abbreviation: "WV" },
+  { name: "Wisconsin", abbreviation: "WI" },
+  { name: "Wyoming", abbreviation: "WY" },
+];
+
+export const US_CITIES: City[] = [
+  { name: "New York", state: "NY" },
+  { name: "Los Angeles", state: "CA" },
+  { name: "Chicago", state: "IL" },
+  { name: "Houston", state: "TX" },
+  { name: "Phoenix", state: "AZ" },
+  { name: "Philadelphia", state: "PA" },
+  { name: "San Antonio", state: "TX" },
+  { name: "San Diego", state: "CA" },
+  { name: "Dallas", state: "TX" },
+  { name: "Austin", state: "TX" },
+  { name: "San Jose", state: "CA" },
+  { name: "Fort Worth", state: "TX" },
+  { name: "Jacksonville", state: "FL" },
+  { name: "Columbus", state: "OH" },
+  { name: "Charlotte", state: "NC" },
+  { name: "Indianapolis", state: "IN" },
+  { name: "San Francisco", state: "CA" },
+  { name: "Seattle", state: "WA" },
+  { name: "Denver", state: "CO" },
+  { name: "Washington", state: "DC" },
+  { name: "Nashville", state: "TN" },
+  { name: "Oklahoma City", state: "OK" },
+  { name: "Boston", state: "MA" },
+  { name: "Portland", state: "OR" },
+  { name: "Las Vegas", state: "NV" },
+  { name: "Detroit", state: "MI" },
+  { name: "Memphis", state: "TN" },
+  { name: "Louisville", state: "KY" },
+  { name: "Baltimore", state: "MD" },
+  { name: "Milwaukee", state: "WI" },
+  { name: "Albuquerque", state: "NM" },
+  { name: "Tucson", state: "AZ" },
+  { name: "Fresno", state: "CA" },
+  { name: "Sacramento", state: "CA" },
+  { name: "Atlanta", state: "GA" },
+  { name: "Miami", state: "FL" },
+  { name: "Minneapolis", state: "MN" },
+  { name: "Cleveland", state: "OH" },
+  { name: "New Orleans", state: "LA" },
+  { name: "Tampa", state: "FL" },
+  { name: "Pittsburgh", state: "PA" },
+  { name: "Cincinnati", state: "OH" },
+  { name: "Orlando", state: "FL" },
+  { name: "St. Louis", state: "MO" },
+  { name: "Kansas City", state: "MO" },
+  { name: "Raleigh", state: "NC" },
+  { name: "Omaha", state: "NE" },
+  { name: "Oakland", state: "CA" },
+  { name: "Honolulu", state: "HI" },
+  { name: "Anchorage", state: "AK" },
+];
+
+export function cityLabel(city: City) {
+  return city.name;
+}
+
+export function joinLocations(cities: string[]) {
+  return cities
+    .map((city) => city.trim())
+    .filter(Boolean)
+    .join(LOCATION_SEPARATOR);
+}
+
+export function splitLocations(value: string) {
+  return value
+    .split("·")
+    .map((city) => city.trim())
+    .filter(Boolean);
+}
+
+export function formatAddress(address: Address) {
+  const cityState = [address.city.trim(), address.state.trim()].filter(Boolean).join(", ");
+  const place = [cityState, address.postalCode.trim()].filter(Boolean).join(" ");
+  return [address.line1.trim(), place, address.country.trim()].filter(Boolean).join(", ");
+}
+
+const US_STATE_TOKEN = /^([A-Za-z .]+?)(?:\s+(\d{5}(?:-\d{4})?))?$/;
+/** A trailing postal code has a digit and no lowercase: "75001", "SW1A 1AA", "M5V 2T6". */
+const TRAILING_POSTAL = /^(.*?\S)\s+((?=[A-Z0-9 -]*\d)[A-Z0-9][A-Z0-9 -]{1,9})$/;
+
+/** "FL", "fl", or "Florida" → "FL"; anything else → null. */
+function usStateCode(value: string) {
+  const text = value.trim().toLowerCase();
+  const state = US_STATES.find(
+    (item) => item.abbreviation.toLowerCase() === text || item.name.toLowerCase() === text,
+  );
+  return state?.abbreviation ?? null;
+}
+
+/**
+ * Reads back what formatAddress wrote — "street, City, ST 12345, Country" — with any part
+ * missing: "Miami, FL, United States", "Seattle, WA 98101", "1 Rue X, Paris 75001, France".
+ */
+export function parseAddress(value: string): Address {
+  const parts = value
+    .split(",")
+    .map((part) => part.trim())
+    .filter(Boolean);
+  const address = emptyAddress();
+  if (parts.length === 0) return address;
+
+  // A US state, with or without a ZIP, sits right after the city.
+  for (let index = parts.length - 1; index >= 1; index -= 1) {
+    const match = parts[index].match(US_STATE_TOKEN);
+    const code = match ? usStateCode(match[1]) : null;
+    if (!match || !code) continue;
+    return {
+      line1: parts.slice(0, index - 1).join(", "),
+      city: parts[index - 1],
+      state: code,
+      postalCode: match[2] ?? "",
+      country: parts.slice(index + 1).join(", "),
+    };
+  }
+
+  // Elsewhere: street…, City [postal], Country.
+  if (parts.length === 1) return { ...address, line1: parts[0] };
+  const country = parts[parts.length - 1];
+  const place = parts[parts.length - 2];
+  const postal = place.match(TRAILING_POSTAL);
+  return {
+    line1: parts.slice(0, -2).join(", "),
+    city: postal ? postal[1] : place,
+    state: "",
+    postalCode: postal ? postal[2] : "",
+    country,
+  };
+}
+
+export function emptyAddress(): Address {
+  return { line1: "", city: "", state: "", postalCode: "", country: "" };
+}

package/src/components/size.ts

@@ -0,0 +1,3 @@
+/** Shared control scale for Joined composites (Calendar, pickers, Rating). `md` is the default. */
+export type ControlSize = "sm" | "md" | "lg";
+export type FieldSize = ControlSize;

package/src/components/time.ts

@@ -0,0 +1,83 @@
+/** Time values travel as 24-hour strings: "HH:mm" or "HH:mm:ss". "" means empty. */
+
+export type HourCycle = "12h" | "24h";
+export type MinuteStep = 1 | 5 | 10 | 15 | 30;
+export type Meridiem = "AM" | "PM";
+export type TimeUnit = "hour" | "minute" | "second";
+
+export const MERIDIEMS = ["AM", "PM"] as const;
+export const HOURS_PER_DAY = 24;
+export const HOURS_PER_HALF = 12;
+export const MINUTES_PER_HOUR = 60;
+export const SECONDS_PER_MINUTE = 60;
+
+export interface TimeParts {
+  h: number;
+  m: number;
+  s: number;
+}
+
+export function pad2(n: number) {
+  return String(n).padStart(2, "0");
+}
+
+function wrap(n: number, span: number) {
+  return ((n % span) + span) % span;
+}
+
+export function parseTime(value: string): TimeParts | null {
+  if (!value) return null;
+  const [h = "0", m = "0", s = "0"] = value.split(":");
+  const parts = { h: Number(h), m: Number(m), s: Number(s) };
+  return Number.isFinite(parts.h) && Number.isFinite(parts.m) && Number.isFinite(parts.s)
+    ? parts
+    : null;
+}
+
+export function formatTime({ h, m, s }: TimeParts, withSeconds: boolean) {
+  const base = `${pad2(wrap(h, HOURS_PER_DAY))}:${pad2(wrap(m, MINUTES_PER_HOUR))}`;
+  return withSeconds ? `${base}:${pad2(wrap(s, SECONDS_PER_MINUTE))}` : base;
+}
+
+export function to12(h: number) {
+  const hour = h % HOURS_PER_HALF;
+  return hour === 0 ? HOURS_PER_HALF : hour;
+}
+
+export function meridiemOf(h: number): Meridiem {
+  return h >= HOURS_PER_HALF ? "PM" : "AM";
+}
+
+/** 12-hour clock hour + meridiem → 0–23. */
+export function from12(hour12: number, meridiem: Meridiem) {
+  return (hour12 % HOURS_PER_HALF) + (meridiem === "PM" ? HOURS_PER_HALF : 0);
+}
+
+/** Human label for a value: "9:30 AM" or "21:30". */
+export function displayTime(value: string, hourCycle: HourCycle, withSeconds = false) {
+  const parts = parseTime(value);
+  if (!parts) return "";
+  const tail = `${pad2(parts.m)}${withSeconds ? `:${pad2(parts.s)}` : ""}`;
+  return hourCycle === "12h"
+    ? `${to12(parts.h)}:${tail} ${meridiemOf(parts.h)}`
+    : `${pad2(parts.h)}:${tail}`;
+}
+
+export function range(from: number, to: number, step = 1) {
+  const out: number[] = [];
+  for (let n = from; n <= to; n += step) out.push(n);
+  return out;
+}
+
+/** Minutes since midnight. */
+export function minutesOf(value: string) {
+  const parts = parseTime(value);
+  return parts ? parts.h * MINUTES_PER_HOUR + parts.m : 0;
+}
+
+export function fromMinutes(total: number) {
+  return formatTime(
+    { h: Math.floor(total / MINUTES_PER_HOUR), m: total % MINUTES_PER_HOUR, s: 0 },
+    false,
+  );
+}

package/src/components/useFileDrop.ts

@@ -0,0 +1,104 @@
+"use client";
+
+import { useCallback, useRef, useState, type ClipboardEvent, type DragEvent } from "react";
+
+export interface UseFileDropOptions {
+  onFiles: (files: File[]) => void;
+  isDisabled?: boolean;
+  /** Also accept files pasted from the clipboard while focus is inside the target. */
+  hasPaste?: boolean;
+}
+
+export interface FileDropProps {
+  onDragEnter: (event: DragEvent<HTMLElement>) => void;
+  onDragOver: (event: DragEvent<HTMLElement>) => void;
+  onDragLeave: (event: DragEvent<HTMLElement>) => void;
+  onDrop: (event: DragEvent<HTMLElement>) => void;
+  onPaste?: (event: ClipboardEvent<HTMLElement>) => void;
+}
+
+function carriesFiles(event: DragEvent<HTMLElement>) {
+  return Array.from(event.dataTransfer?.types ?? []).includes("Files");
+}
+
+/**
+ * Turns any element into a file drop target. Spread `dropProps` on it and use
+ * `isDragging` to show a drop state. Nested children don't flicker the state.
+ */
+export function useFileDrop({ onFiles, isDisabled = false, hasPaste = false }: UseFileDropOptions) {
+  const [isDragging, setDragging] = useState(false);
+  const depth = useRef(0);
+
+  const reset = useCallback(() => {
+    depth.current = 0;
+    setDragging(false);
+  }, []);
+
+  const dropProps: FileDropProps = {
+    onDragEnter: (event) => {
+      if (isDisabled || !carriesFiles(event)) return;
+      event.preventDefault();
+      depth.current += 1;
+      setDragging(true);
+    },
+    onDragOver: (event) => {
+      if (isDisabled || !carriesFiles(event)) return;
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "copy";
+    },
+    onDragLeave: () => {
+      if (isDisabled) return;
+      depth.current = Math.max(0, depth.current - 1);
+      if (depth.current === 0) setDragging(false);
+    },
+    onDrop: (event) => {
+      if (isDisabled) return;
+      event.preventDefault();
+      reset();
+      const files: File[] = Array.from(event.dataTransfer.files as ArrayLike<File>);
+      if (files.length) onFiles(files);
+    },
+  };
+
+  if (hasPaste) {
+    dropProps.onPaste = (event) => {
+      if (isDisabled) return;
+      const files: File[] = Array.from(event.clipboardData.files as ArrayLike<File>);
+      if (!files.length) return;
+      event.preventDefault();
+      onFiles(files);
+    };
+  }
+
+  return { isDragging, dropProps };
+}
+
+const KB = 1024;
+const UNITS = ["B", "KB", "MB", "GB"];
+
+/** 1536 → "1.5 KB". */
+export function formatBytes(bytes: number) {
+  let value = bytes;
+  let unit = 0;
+  while (value >= KB && unit < UNITS.length - 1) {
+    value /= KB;
+    unit += 1;
+  }
+  return `${unit === 0 ? value : value.toFixed(value < 10 ? 1 : 0)} ${UNITS[unit]}`;
+}
+
+/** Matches a file against an `accept` string such as ".pdf,image/*". */
+export function matchesAccept(file: File, accept?: string) {
+  if (!accept) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept
+    .split(",")
+    .map((token) => token.trim().toLowerCase())
+    .filter(Boolean)
+    .some((token) => {
+      if (token.startsWith(".")) return name.endsWith(token);
+      if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+      return type === token;
+    });
+}

package/src/places/geoapify.ts

@@ -0,0 +1,129 @@
+const GEOAPIFY_AUTOCOMPLETE = "https://api.geoapify.com/v1/geocode/autocomplete";
+const PLACES_LIMIT = 8;
+
+/** Wait until a few characters are typed before calling Geoapify. */
+export const PLACES_MIN_TEXT = 3;
+
+export type PlaceKind = "city" | "address" | "country" | "location";
+
+export type PlaceResult = {
+  id: string;
+  label: string;
+  line1: string;
+  city: string;
+  state: string;
+  postalCode: string;
+  country: string;
+};
+
+type GeoResult = {
+  place_id?: string;
+  formatted?: string;
+  address_line1?: string;
+  city?: string;
+  state?: string;
+  state_code?: string;
+  postcode?: string;
+  country?: string;
+  housenumber?: string;
+  street?: string;
+  result_type?: string;
+  lat?: number;
+  lon?: number;
+};
+
+/** Next.js route body. Pass `process.env.GEOAPIFY_API_KEY` so the key stays on the server. */
+export async function placesResponse(
+  request: Request,
+  apiKey: string | undefined,
+): Promise<Response> {
+  const key = apiKey?.trim();
+  if (!key) {
+    return Response.json(
+      { error: "Address search is not configured", results: [] },
+      { status: 503 },
+    );
+  }
+  const url = new URL(request.url);
+  const kind = placeKind(url.searchParams.get("kind"));
+  const text = url.searchParams.get("text")?.trim() ?? "";
+  try {
+    const results = await searchPlaces(key, kind, text);
+    return Response.json({ results });
+  } catch {
+    return Response.json({ error: "Address search failed", results: [] }, { status: 502 });
+  }
+}
+
+/** Geoapify autocomplete. The API key stays on the server that calls this. */
+export async function searchPlaces(
+  apiKey: string,
+  kind: PlaceKind,
+  text: string,
+): Promise<PlaceResult[]> {
+  const query = text.trim();
+  if (query.length < PLACES_MIN_TEXT) return [];
+
+  const upstream = new URL(GEOAPIFY_AUTOCOMPLETE);
+  upstream.searchParams.set("text", query);
+  upstream.searchParams.set("format", "json");
+  upstream.searchParams.set("limit", String(PLACES_LIMIT));
+  upstream.searchParams.set("apiKey", apiKey);
+  if (kind === "city" || kind === "country") upstream.searchParams.set("type", kind);
+
+  const response = await fetch(upstream, { cache: "no-store" });
+  if (!response.ok) {
+    throw new Error("Address search failed");
+  }
+  const body = (await response.json()) as { results?: GeoResult[] };
+  return (body.results ?? [])
+    .filter((hit) => kind !== "location" || isRegion(hit))
+    .map((hit) => toPlace(hit, kind))
+    .filter((hit) => hit.label.length > 0);
+}
+
+function placeKind(value: string | null): PlaceKind {
+  if (value === "city" || value === "country" || value === "location") return value;
+  return "address";
+}
+
+function regionType(hit: GeoResult) {
+  return (hit.result_type ?? "").trim().toLowerCase();
+}
+
+function isRegion(hit: GeoResult) {
+  const type = regionType(hit);
+  return type === "city" || type === "state" || type === "country";
+}
+
+function toPlace(hit: GeoResult, kind: PlaceKind): PlaceResult {
+  const city = hit.city?.trim() ?? "";
+  const state = (hit.state_code || hit.state || "").trim();
+  const street = [hit.housenumber, hit.street].filter(Boolean).join(" ").trim();
+  const line1 = street || hit.address_line1?.trim() || "";
+  const country = hit.country?.trim() || "";
+  const type = regionType(hit);
+  const label =
+    kind === "city"
+      ? [city, state].filter(Boolean).join(", ")
+      : kind === "country"
+        ? country || hit.formatted?.trim() || ""
+        : kind === "location"
+          ? locationLabel(hit, type, city, state, country)
+          : hit.formatted?.trim() || [line1, city, state].filter(Boolean).join(", ");
+  return {
+    id: hit.place_id || `${hit.lat ?? ""},${hit.lon ?? ""},${label}`,
+    label,
+    line1: kind === "city" || kind === "country" || kind === "location" ? "" : line1,
+    city: kind === "country" ? "" : city,
+    state: kind === "country" ? "" : state,
+    postalCode: kind === "country" || kind === "location" ? "" : (hit.postcode?.trim() ?? ""),
+    country: country || (kind === "country" ? label : ""),
+  };
+}
+
+function locationLabel(hit: GeoResult, type: string, city: string, state: string, country: string) {
+  if (type === "country") return country || hit.formatted?.trim() || "";
+  if (type === "state") return [hit.state?.trim() || state, country].filter(Boolean).join(", ");
+  return [city, state].filter(Boolean).join(", ") || hit.formatted?.trim() || "";
+}

package/src/styles/astryx.css

@@ -0,0 +1,5 @@
+/* Astryx foundation: reset, the Astryx component stylesheet, and the
+   Joined theme build (src/theme/theme.css, from `bun run theme:build`). */
+@import "@astryxdesign/core/reset.css";
+@import "@astryxdesign/core/astryx.css";
+@import "../theme/theme.css";