@appinternalleads/ui 0.2.0

package/src/core/ColorSwatch.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { HUE, blockRadii, useDs } from '../tokens';
+import { Box } from './Box';
+import { Pressable } from './Pressable';
+import { Sheet } from './Sheet';
+import { Text } from './Text';
+import type { ColorSwatchProps } from './ColorSwatch.types';
+
+export type { ColorSwatchProps } from './ColorSwatch.types';
+
+/** The native picker's choices: every Solarium hue, mid and deep — tokens, never literals. */
+const PALETTE = Array.from(new Set(Object.values(HUE).flatMap(h => [h.h, h.hd])));
+
+/**
+ * The native half: React Native has no colour picker, so the swatch opens a sheet of the Solarium
+ * hues (`core/Sheet`: scrim, tap-outside dismiss). Picking one closes it; any other colour is typed
+ * into the hex field beside the swatch, as before.
+ */
+export function ColorSwatch({ value, label, onPick, disabled, size = 24 }: ColorSwatchProps) {
+  const { colors } = useDs();
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Pressable
+        onPress={() => setOpen(true)}
+        disabled={disabled}
+        aria-label={`${label} — pick a colour`}
+        aria-haspopup="dialog"
+        width={size}
+        height={size}
+        hit={44}
+        style={{ borderRadius: blockRadii.tile, backgroundColor: value, boxShadow: `0 0 0 1px ${colors.hairlineStrong}` }}
+      />
+      <Sheet visible={open} onDismiss={() => setOpen(false)}>
+        <Box gap="s3" p="s4">
+          <Text variant="label" style={{ fontWeight: '600' }}>{`${label} — pick a colour`}</Text>
+          <Box row wrap gap="s2">
+            {PALETTE.map(c => (
+              <Pressable
+                key={c}
+                role="radio"
+                aria-checked={c.toUpperCase() === value.toUpperCase()}
+                aria-label={c}
+                onPress={() => { onPick(c.toUpperCase()); setOpen(false); }}
+                width={44}
+                height={44}
+                style={{
+                  borderRadius: blockRadii.inset, backgroundColor: c,
+                  boxShadow: c.toUpperCase() === value.toUpperCase() ? `0 0 0 2px ${colors.surface1}, 0 0 0 4px ${colors.accentFill}` : `0 0 0 1px ${colors.hairlineStrong}`,
+                }}
+              />
+            ))}
+          </Box>
+        </Box>
+      </Sheet>
+    </>
+  );
+}

package/src/core/ColorSwatch.types.ts

@@ -0,0 +1,17 @@
+/**
+ * **The colour picker behind a hex field's swatch** — `ColorField` (C12) uses it. The web half
+ * opens the browser's own colour picker (`<input type="color">`, the full spectrum, keyboard and
+ * screen-reader support included); the native half opens a sheet of the Solarium hues. Either
+ * way the result is an uppercase `#RRGGBB` — the one form the field accepts — and typing a hex
+ * still works beside it.
+ */
+export type ColorSwatchProps = {
+  /** The colour the swatch paints — a valid `#RRGGBB`. */
+  value: string;
+  /** What the colour is for — "Primary". The picker is named "{label} — pick a colour". */
+  label: string;
+  onPick: (hex: string) => void;
+  disabled?: boolean;
+  /** Default 24. */
+  size?: number;
+};

package/src/core/ColorSwatch.web.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { blockRadii, focusRingFor, useDs } from '../tokens';
+import { isKeyboardModality } from './focusVisible';
+import type { ColorSwatchProps } from './ColorSwatch.types';
+
+export type { ColorSwatchProps } from './ColorSwatch.types';
+
+/**
+ * The web half: the swatch IS the browser's colour input, laid invisibly over the painted square —
+ * so a click (or Enter / Space when it has focus) opens the platform picker, and nothing about the
+ * picker has to be re-drawn. The coral ring shows on keyboard focus only.
+ */
+export function ColorSwatch({ value, label, onPick, disabled, size = 24 }: ColorSwatchProps) {
+  const { colors } = useDs();
+  const [focused, setFocused] = useState(false);
+  return (
+    <span
+      style={{
+        position: 'relative', display: 'block', width: size, height: size, flexShrink: 0, borderRadius: blockRadii.tile,
+        backgroundColor: value, boxShadow: focused && isKeyboardModality() ? focusRingFor(colors) : `0 0 0 1px ${colors.hairlineStrong}`,
+        opacity: disabled ? 0.45 : 1, cursor: disabled ? 'not-allowed' : 'pointer',
+      }}>
+      <input
+        type="color"
+        value={value.toLowerCase()}
+        disabled={disabled}
+        aria-label={`${label} — pick a colour`}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        onChange={e => onPick(e.target.value.toUpperCase())}
+        style={{
+          position: 'absolute', inset: 0, width: '100%', height: '100%', margin: 0, padding: 0, border: 0, opacity: 0,
+          cursor: disabled ? 'not-allowed' : 'pointer', outline: 'none',
+        }}
+      />
+    </span>
+  );
+}

package/src/core/DatePicker.tsx

@@ -0,0 +1,217 @@
+import { useState } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Pressable } from './Pressable';
+import { Sheet } from './Sheet';
+import { Text } from './Text';
+import { fieldEdge, useDs } from '../tokens';
+import type { DatePickerProps } from './DatePicker.types';
+
+export type { DatePickerProps };
+
+/**
+ * **The native half of the 9th primitive, built from primitives.**
+ *
+ * It used to wrap `@react-native-community/datetimepicker` as an *optional* peer. The word was
+ * wrong: a barrel export is a static import, so Metro resolved the module on the first import of
+ * anything from this package and a fresh app died on `Unable to resolve module` before rendering.
+ * `@comppack/ui/native` still exports the OS-backed control for an app that wants the platform wheel.
+ *
+ * **The trigger is a field, so it takes the field edge and never lifts** — a hole showing the
+ * current answer, not a button. The calendar above it is a dialog and takes the sheet's own
+ * elevation.
+ *
+ * The value is ISO in and ISO out, and the conversion lives here rather than at each call site:
+ * `Date` is a lossy round trip for a date-only field, which is why the grid works in parts and
+ * only ever assembles a string.
+ */
+
+const WEEKDAYS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+const MONTHS = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+];
+
+const pad = (n: number) => String(n).padStart(2, '0');
+const iso = (y: number, m: number, d: number) => `${y}-${pad(m + 1)}-${pad(d)}`;
+
+/** Days in a month, leap years included — `new Date(y, m + 1, 0)` is the day before the 1st. */
+const daysIn = (y: number, m: number) => new Date(y, m + 1, 0).getDate();
+
+/**
+ * Monday-first offset. `getDay()` is Sunday-first, and a European calendar that starts on Sunday
+ * puts every date in the wrong column — the kind of error that looks like a rendering glitch
+ * rather than a bug.
+ */
+const firstColumn = (y: number, m: number) => (new Date(y, m, 1).getDay() + 6) % 7;
+
+export function DatePicker({
+  value, onChange, mode, min, max, error, testID,
+  'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy,
+}: DatePickerProps) {
+  const { colors } = useDs();
+  const [open, setOpen] = useState(false);
+
+  const selected = value ? new Date(value) : undefined;
+  const today = new Date();
+  const [cursor, setCursor] = useState(() => ({
+    y: (selected ?? today).getFullYear(),
+    m: (selected ?? today).getMonth(),
+  }));
+  const [time, setTime] = useState(() => (value && mode === 'datetime' ? value.slice(11, 16) : '10:00'));
+
+  const total = daysIn(cursor.y, cursor.m);
+  const offset = firstColumn(cursor.y, cursor.m);
+  const rows = Math.ceil((offset + total) / 7);
+
+  /** A day outside `min`/`max` stays visible and stops responding — the month has to stay readable. */
+  const outOfRange = (d: number) => {
+    const day = iso(cursor.y, cursor.m, d);
+    if (min && day < min.slice(0, 10)) return true;
+    if (max && day > max.slice(0, 10)) return true;
+    return false;
+  };
+
+  const pick = (d: number) => {
+    const day = iso(cursor.y, cursor.m, d);
+    onChange(mode === 'datetime' ? `${day}T${time}` : day);
+    setOpen(false);
+  };
+
+  const shift = (by: number) => {
+    setCursor(c => {
+      const m = c.m + by;
+      if (m < 0) return { y: c.y - 1, m: 11 };
+      if (m > 11) return { y: c.y + 1, m: 0 };
+      return { y: c.y, m };
+    });
+  };
+
+  const selectedIso = selected
+    ? iso(selected.getFullYear(), selected.getMonth(), selected.getDate())
+    : undefined;
+
+  return (
+    <>
+      <Pressable
+        onPress={() => setOpen(true)}
+        row
+        align="center"
+        justify="flex-start"
+        px="s3"
+        py="s3"
+        radius="field"
+        bg="surface1"
+        testID={testID}
+        aria-label={ariaLabel}
+        /* `Pressable` only knows the outline edge, and a field is not an outline. The hairline
+           comes from the same token the web half uses, so both platforms draw one border. */
+        style={{ minHeight: 44, boxShadow: error ? fieldEdge.error : fieldEdge.default }}>
+        <Box>
+          <Text color={value ? 'textPrimary' : 'textTertiary'}>
+            {value ?? (mode === 'datetime' ? 'Pick a date and time' : 'Pick a date')}
+          </Text>
+        </Box>
+      </Pressable>
+
+      <Sheet visible={open} onDismiss={() => setOpen(false)} testID={`${testID}-sheet`}>
+        <Box row align="center" justify="space-between" style={{ minHeight: 44 }}>
+          <Pressable
+            onPress={() => shift(-1)}
+            radius="pill"
+            width={44}
+            height={44}
+            aria-label="Previous month">
+            <Icon name="chev-l" size={16} color={colors.textPrimary} />
+          </Pressable>
+          <Text variant="heading" aria-label={ariaLabelledBy}>
+            {`${MONTHS[cursor.m]} ${cursor.y}`}
+          </Text>
+          <Pressable
+            onPress={() => shift(1)}
+            radius="pill"
+            width={44}
+            height={44}
+            aria-label="Next month">
+            <Icon name="chev-r" size={16} color={colors.textPrimary} />
+          </Pressable>
+        </Box>
+
+        <Box row>
+          {WEEKDAYS.map((d, i) => (
+            <Box key={i} flex={1} align="center" style={{ paddingBottom: 4 }}>
+              <Text variant="caption" color="textTertiary" uppercase>{d}</Text>
+            </Box>
+          ))}
+        </Box>
+
+        <Box gap="s1">
+          {Array.from({ length: rows }, (_, r) => (
+            <Box key={r} row gap="s1">
+              {Array.from({ length: 7 }, (_, c) => {
+                const d = r * 7 + c - offset + 1;
+                if (d < 1 || d > total) return <Box key={c} flex={1} height={44} />;
+                const day = iso(cursor.y, cursor.m, d);
+                const on = day === selectedIso;
+                const blocked = outOfRange(d);
+                return (
+                  <Pressable
+                    key={c}
+                    onPress={blocked ? undefined : () => pick(d)}
+                    flex={1}
+                    height={44}
+                    radius="field"
+                    bg={on ? 'accentFill' : undefined}
+                    aria-label={`${MONTHS[cursor.m]} ${d}`}
+                    aria-disabled={blocked}>
+                    <Text
+                      numeric
+                      color={on ? 'textOnAccent' : blocked ? 'textDisabled' : 'textPrimary'}>
+                      {d}
+                    </Text>
+                  </Pressable>
+                );
+              })}
+            </Box>
+          ))}
+        </Box>
+
+        {/* A `datetime` needs a time, and a wheel is not available without the native module.
+            Two steppers on a 30-minute grid cover what a form actually asks for. */}
+        {mode === 'datetime' ? (
+          <Box row align="center" justify="space-between" style={{ minHeight: 44 }}>
+            <Text variant="caption" color="textSecondary">Time</Text>
+            <Box row align="center" gap="s2">
+              <Pressable
+                onPress={() => setTime(t => shiftTime(t, -30))}
+                radius="pill"
+                width={44}
+                height={44}
+                bg="surfaceSunken"
+                aria-label="Earlier">
+                <Icon name="minus" size={14} color={colors.textPrimary} />
+              </Pressable>
+              <Text numeric>{time}</Text>
+              <Pressable
+                onPress={() => setTime(t => shiftTime(t, 30))}
+                radius="pill"
+                width={44}
+                height={44}
+                bg="surfaceSunken"
+                aria-label="Later">
+                <Icon name="plus" size={14} color={colors.textPrimary} />
+              </Pressable>
+            </Box>
+          </Box>
+        ) : null}
+      </Sheet>
+    </>
+  );
+}
+
+/** Wraps within the day rather than rolling the date — the grid owns which day it is. */
+function shiftTime(t: string, minutes: number): string {
+  const [h, m] = t.split(':').map(Number);
+  const total = (((h ?? 0) * 60 + (m ?? 0) + minutes) % 1440 + 1440) % 1440;
+  return `${pad(Math.floor(total / 60))}:${pad(total % 60)}`;
+}

package/src/core/DatePicker.types.ts

@@ -0,0 +1,12 @@
+export type DatePickerProps = {
+  /** ISO. `YYYY-MM-DD` for a date, a full ISO timestamp for a datetime. */
+  value: string | undefined;
+  onChange: (next: string) => void;
+  mode: 'date' | 'datetime';
+  min?: string;
+  max?: string;
+  error?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  testID?: string;
+};

package/src/core/DatePicker.web.tsx

@@ -0,0 +1,49 @@
+import { fieldEdge, radii, type as typeScale, useDs } from '../tokens';
+import type { DatePickerProps } from './DatePicker.types';
+
+export type { DatePickerProps };
+
+/**
+ * **The web half of the 9th primitive.**
+ *
+ * `<input type="date">` and `type="datetime-local"` bring the platform's own calendar, keyboard
+ * entry and locale formatting. Routing this through `react-native-web` would have produced a
+ * text box that the user has to type an ISO string into.
+ *
+ * **The value stays ISO on both platforms.** `datetime-local` wants `YYYY-MM-DDTHH:mm` with no
+ * zone and no seconds, so it is trimmed on the way in and passed back out unchanged — the field
+ * owns the format, not the control.
+ */
+export function DatePicker({
+  value, onChange, mode, min, max, error, testID,
+  'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy,
+}: DatePickerProps) {
+  const { colors, fonts } = useDs();
+  const local = mode === 'datetime' ? (value ?? '').slice(0, 16) : (value ?? '').slice(0, 10);
+
+  return (
+    <input
+      type={mode === 'datetime' ? 'datetime-local' : 'date'}
+      data-testid={testID}
+      value={local}
+      min={min}
+      max={max}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-invalid={error || undefined}
+      onChange={e => onChange(e.target.value)}
+      style={{
+        borderRadius: radii.field,
+        backgroundColor: colors.surface1,
+        boxShadow: error ? fieldEdge.error : fieldEdge.default,
+        color: colors.textPrimary,
+        fontFamily: fonts.sans,
+        fontSize: typeScale.caption.fontSize,
+        padding: '9px 11px',
+        border: 'none',
+        width: '100%',
+        boxSizing: 'border-box',
+      }}
+    />
+  );
+}

package/src/core/ExternalLink.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import { Platform, Pressable as RNPressable, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
+import { focusRingFor, useDs } from '../tokens';
+import { isKeyboardModality } from './focusVisible';
+import { openURL } from './linking';
+
+/**
+ * **A link that opens in a new tab** — on the web a real `<a href target="_blank" rel="noopener
+ * noreferrer">` (react-native-web renders `href` / `hrefAttrs` as one), so middle-click, "copy link"
+ * and the browser's own affordances work; on native, `Linking.openURL`. The whole row is the target,
+ * with the well on hover and the coral ring on keyboard focus. The accessible name should end with
+ * "(opens in a new tab)" — pass it as `aria-label` or as visually hidden text inside.
+ */
+export function ExternalLink({
+  href, children, style, onOpen, 'aria-label': ariaLabel, testID,
+}: {
+  href: string;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  /** Called when the link is followed — analytics, a board following along. */
+  onOpen?: () => void;
+  'aria-label'?: string;
+  testID?: string;
+}) {
+  const { colors } = useDs();
+  const web = Platform.OS === 'web';
+  const props = {
+    role: 'link',
+    testID,
+    'aria-label': ariaLabel,
+    ...(web ? { href, hrefAttrs: { target: '_blank', rel: 'noopener noreferrer' } } : null),
+    onPress: () => { onOpen?.(); if (!web) openURL(href); },
+    style: ({ hovered, focused }: { hovered?: boolean; focused?: boolean }) => [
+      style,
+      hovered ? { backgroundColor: colors.surfaceSunken } : null,
+      focused && isKeyboardModality() ? ({ boxShadow: focusRingFor(colors), outlineStyle: 'none' } as unknown as ViewStyle) : ({ outlineStyle: 'none' } as unknown as ViewStyle),
+    ],
+  } as unknown as PressableProps;
+  return <RNPressable {...props}>{children}</RNPressable>;
+}

package/src/core/FileDrop.tsx

@@ -0,0 +1,16 @@
+import type { FileDropProps } from './FileDrop.types';
+
+export type { FileCheck, FileDropApi, FileDropProps, PickedFile } from './FileDrop.types';
+export { checkFile, extOf, formatFileSize } from './FileDrop.types';
+
+/**
+ * The native half: no drag, and "open" is the host's picker. A target without `onPick` is inert
+ * on native — the caller decides whether to render the affordance at all.
+ */
+export function FileDrop({ onFiles, onPick, disabled, children }: FileDropProps) {
+  const open = () => {
+    if (disabled || !onPick) return;
+    void Promise.resolve(onPick()).then(files => { if (files.length > 0) onFiles(files); });
+  };
+  return <>{children({ open, dragging: false })}</>;
+}

package/src/core/FileDrop.types.ts

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+
+/**
+ * **A file as the library sees it once it has been picked or dropped.** `data` is the platform
+ * payload (a web `File`, a native URI) passed through untouched; `previewUri` is an image the UI
+ * may draw (a web object URL for an image file, or the host's own URI on native).
+ */
+export type PickedFile = {
+  name: string;
+  sizeBytes: number;
+  /** Lower-case extension without the dot — `svg`. Empty when the name has none. */
+  ext: string;
+  mimeType?: string;
+  previewUri?: string;
+  data?: unknown;
+};
+
+export type FileDropApi = {
+  /** Open the picker — the web's file dialog, or the host's `onPick` on native. */
+  open: () => void;
+  /** A file is being dragged over the target (web only; always false on native). */
+  dragging: boolean;
+};
+
+export type FileDropProps = {
+  /** Extensions without the dot (`['svg', 'png']`). Narrows the web dialog; it is not validation. */
+  accept?: string[];
+  multiple?: boolean;
+  disabled?: boolean;
+  onFiles: (files: PickedFile[]) => void;
+  /**
+   * **Native: the host's picker.** React Native has no file dialog of its own, and a library that
+   * bundled one would ship a native module every consumer must link — picking stays the host's job,
+   * as it is for `FileUploadWidget`. Ignored on web.
+   */
+  onPick?: () => Promise<PickedFile[]> | PickedFile[];
+  children: (api: FileDropApi) => ReactNode;
+};
+
+export function extOf(name: string): string {
+  const i = name.lastIndexOf('.');
+  return i > 0 ? name.slice(i + 1).toLowerCase() : '';
+}
+
+/** "14 KB", "1.2 MB" — the size line every file row shows. */
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  const mb = bytes / (1024 * 1024);
+  return `${mb >= 10 ? Math.round(mb) : Math.round(mb * 10) / 10} MB`;
+}
+
+export type FileCheck = { ok: true } | { ok: false; reason: 'type' | 'size' };
+
+/** By extension against `accept`, by size against `maxSizeMB` — the onboarding handoff's rule. */
+export function checkFile(file: Pick<PickedFile, 'ext' | 'sizeBytes'>, opts: { accept?: string[]; maxSizeMB?: number }): FileCheck {
+  if (opts.accept && opts.accept.length > 0 && !opts.accept.map(a => a.toLowerCase().replace(/^\./, '')).includes(file.ext)) {
+    return { ok: false, reason: 'type' };
+  }
+  if (opts.maxSizeMB !== undefined && file.sizeBytes > opts.maxSizeMB * 1024 * 1024) return { ok: false, reason: 'size' };
+  return { ok: true };
+}

package/src/core/FileDrop.web.tsx

@@ -0,0 +1,66 @@
+import { useRef, useState, type DragEvent } from 'react';
+import type { FileDropProps, PickedFile } from './FileDrop.types';
+import { extOf } from './FileDrop.types';
+
+export type { FileCheck, FileDropApi, FileDropProps, PickedFile } from './FileDrop.types';
+export { checkFile, extOf, formatFileSize } from './FileDrop.types';
+
+function toPicked(list: FileList | null): PickedFile[] {
+  if (!list) return [];
+  return Array.from(list).map(f => ({
+    name: f.name,
+    sizeBytes: f.size,
+    ext: extOf(f.name),
+    mimeType: f.type || undefined,
+    /* An image the preview can draw. The object URL lives as long as the page; a file picked in an
+       onboarding step is small and seen once, so it is not revoked. */
+    previewUri: f.type.startsWith('image/') && typeof URL.createObjectURL === 'function' ? URL.createObjectURL(f) : undefined,
+    data: f,
+  }));
+}
+
+/**
+ * **The web half: a real `<input type=file>` and HTML5 drag-and-drop.** The input is visually
+ * hidden but stays in the DOM (it is the dialog); the wrapper is `display: contents`, so it takes
+ * part in event dispatch without taking part in layout. Enter/leave are counted, because dragging
+ * across a child fires a leave on the parent.
+ */
+export function FileDrop({ accept, multiple, disabled, onFiles, children }: FileDropProps) {
+  const input = useRef<HTMLInputElement>(null);
+  const depth = useRef(0);
+  const [dragging, setDragging] = useState(false);
+  const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer?.types ?? []).includes('Files');
+
+  return (
+    <div
+      style={{ display: 'contents' }}
+      onDragEnter={e => { if (disabled || !hasFiles(e)) return; e.preventDefault(); depth.current += 1; setDragging(true); }}
+      onDragOver={e => { if (disabled || !hasFiles(e)) return; e.preventDefault(); }}
+      onDragLeave={() => { if (disabled) return; depth.current = Math.max(0, depth.current - 1); if (depth.current === 0) setDragging(false); }}
+      onDrop={e => {
+        if (disabled) return;
+        e.preventDefault();
+        depth.current = 0;
+        setDragging(false);
+        const files = toPicked(e.dataTransfer?.files ?? null);
+        if (files.length > 0) onFiles(multiple ? files : files.slice(0, 1));
+      }}>
+      <input
+        ref={input}
+        type="file"
+        tabIndex={-1}
+        aria-hidden
+        accept={accept?.map(a => `.${a.replace(/^\./, '')}`).join(',')}
+        multiple={multiple}
+        disabled={disabled}
+        style={{ position: 'absolute', width: 1, height: 1, opacity: 0, pointerEvents: 'none', overflow: 'hidden' }}
+        onChange={e => {
+          const files = toPicked(e.currentTarget.files);
+          e.currentTarget.value = '';
+          if (files.length > 0) onFiles(files);
+        }}
+      />
+      {children({ open: () => { if (!disabled) input.current?.click(); }, dragging })}
+    </div>
+  );
+}