@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Forms/Select.tsx

@@ -0,0 +1,54 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { Field, controlClass, describedBy, useFieldId } from "../Field/Field.tsx";
+import { type SelectProps } from "./Forms.types.ts";
+
+/**
+ * A native select styled to the system. The contract's onChange is a native select change event,
+ * so the control stays a native select, which also gives the platform picker on touch devices.
+ */
+export function Select({
+  label,
+  help,
+  error,
+  value,
+  placeholder: hint,
+  options,
+  disabled,
+  onChange,
+  id,
+  name,
+}: SelectProps): ReactElement {
+  const fieldId = useFieldId(id);
+  return (
+    <Field id={fieldId} label={label} help={help} error={error}>
+      <div className="relative">
+        <select
+          id={fieldId}
+          name={name}
+          className={cx(controlClass, "appearance-none w-full pe-24")}
+          defaultValue={value ?? (hint ? "" : undefined)}
+          disabled={disabled}
+          onChange={onChange}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={describedBy(fieldId, help, error)}
+        >
+          {hint ? (
+            <option value="" disabled>
+              {hint}
+            </option>
+          ) : null}
+          {options.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+        <span className="pointer-events-none absolute inset-y-0 end-8 flex items-center text-text-tertiary">
+          <Icon name="ChevronsUpDown" size={14} />
+        </span>
+      </div>
+    </Field>
+  );
+}

package/src/Forms/Switch.tsx

@@ -0,0 +1,14 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { checkLabelClass } from "./Forms.shared.tsx";
+import { type SwitchProps } from "./Forms.types.ts";
+
+/** An immediate on or off setting; a checkbox input with the switch role. */
+export function Switch({ label, className, ...rest }: SwitchProps): ReactElement {
+  return (
+    <label className={cx(checkLabelClass, className)}>
+      <input type="checkbox" role="switch" {...rest} className="xos-check-input" />
+      {label}
+    </label>
+  );
+}

package/src/Forms/Textarea.tsx

@@ -0,0 +1,30 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { Field, controlClass, describedBy, useFieldId } from "../Field/Field.tsx";
+import { type TextareaProps } from "./Forms.types.ts";
+
+/** A multi-line field; grows by rows and resizes vertically. */
+export function Textarea({
+  label,
+  help,
+  error,
+  id,
+  width,
+  className,
+  rows = 3,
+  ...rest
+}: TextareaProps): ReactElement {
+  const fieldId = useFieldId(id);
+  return (
+    <Field id={fieldId} label={label} help={help} error={error} width={width}>
+      <textarea
+        id={fieldId}
+        rows={rows}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={describedBy(fieldId, help, error)}
+        {...rest}
+        className={cx(controlClass, "h-auto py-6 resize-y leading-normal", className)}
+      />
+    </Field>
+  );
+}

package/src/Gallery/README.md

@@ -0,0 +1,5 @@
+# Gallery
+
+Gallery lays cards on an auto-filling grid for gallery views: opportunities, profiles and media.
+
+- `min` sets the smallest card width; columns fill the space without breakpoints.

package/src/GateLifecycleRail/README.md

@@ -0,0 +1,7 @@
+# GateLifecycleRail
+
+GateLifecycleRail lays out the nine gates in their three acts, each with one criterion from the canon.
+
+The three acts sit side by side from bp-lg and stack below it; gates run top to bottom inside each act, so reading order always matches gate order. Each gate reads "Gate 3 · Advance" beside its phase glyph: the number never stands alone. All text is visible without interaction.
+
+The consumer provides the acts and gates. `evidence` quotes one criterion as the canon writes it (`xpms.dim_gate_criterion`); do not paraphrase a criterion.

package/src/GateReadinessPanel/README.md

@@ -0,0 +1,8 @@
+# GateReadinessPanel
+
+GateReadinessPanel lists a gate's criteria as a checklist with evidence, blocking flags and the action that clears each gap.
+
+- Criteria, statements and blocking flags come from `xpms.dim_gate_criterion` (Bible tab 06, 35 criteria); the panel never defines them.
+- Codes display as stored (`G3.PERMITS_FILED`) beside a plain statement, in numeric gate order.
+- The next-gate button enables the moment the last blocking criterion is met; the database enforces the same rule.
+- The preview shows all five Gate 3 criteria with their Bible statements verbatim, in Bible order. All five are blocking.

package/src/Gateway/AgencySlate.tsx

@@ -0,0 +1,76 @@
+import { useState, type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { Avatar } from "../Avatar/Avatar.tsx";
+import { chipClass } from "../Chips/Chips.tsx";
+import { Card } from "../Surface/Surface.tsx";
+import { type AgencySlateProps } from "./Gateway.types.ts";
+import { ProgressBar } from "./ProgressBar.tsx";
+
+/** Named staff from an agency roster against the positions, with certification status. */
+export function AgencySlate({
+  positions,
+  roster,
+  onChange,
+  onSubmit,
+}: AgencySlateProps): ReactElement {
+  const t = useT();
+  const [selected, setSelected] = useState(roster.filter((r) => r.selected).map((r) => r.name));
+  const toggle = (name: string) => {
+    const next = selected.includes(name) ? selected.filter((n) => n !== name) : [...selected, name];
+    setSelected(next);
+    onChange?.(next);
+  };
+  return (
+    <Card
+      title={t("slate.title")}
+      meta={t("slate.positions", { n: selected.length, total: positions })}
+      footer={
+        <Button
+          variant="primary"
+          disabled={selected.length === 0}
+          onClick={() => onSubmit?.(selected)}
+        >
+          {t("slate.submit")}
+        </Button>
+      }
+    >
+      <ProgressBar
+        label={t("slate.filled")}
+        value={positions ? (selected.length / positions) * 100 : 0}
+      />
+      <ul className="m-0 p-0 list-none">
+        {roster.map((r) => (
+          <li
+            key={r.name}
+            className="flex flex-wrap items-center gap-8 min-h-touch-min border-b border-border-subtle last:border-b-0"
+          >
+            <label className="xos-check inline-flex items-center">
+              <input
+                type="checkbox"
+                className="xos-check-input"
+                checked={selected.includes(r.name)}
+                onChange={() => toggle(r.name)}
+                aria-label={t("slate.include", { name: r.name })}
+              />
+            </label>
+            <Avatar name={r.name} />
+            <div className="flex flex-1 flex-col min-w-0">
+              <strong className="font-semibold">{r.name}</strong>
+              <span className="text-text-secondary">{r.role}</span>
+            </div>
+            {r.certs.map((c) => (
+              <span key={c.label} className={chipClass}>
+                <span className={c.ok ? "text-success" : "text-warning"}>
+                  <Icon name={c.ok ? "BadgeCheck" : "CircleAlert"} size={12} />
+                </span>
+                {c.label}
+              </span>
+            ))}
+          </li>
+        ))}
+      </ul>
+    </Card>
+  );
+}

package/src/Gateway/ApplicationForm.tsx

@@ -0,0 +1,48 @@
+import { type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { Button } from "../Button/Button.tsx";
+import { Card } from "../Surface/Surface.tsx";
+import { Checkbox, Textarea } from "../Forms/Forms.tsx";
+import { type ApplicationFormProps } from "./Gateway.types.ts";
+
+/** What the person shares before applying, the org's questions and availability confirmation. */
+export function ApplicationForm({
+  role,
+  org,
+  shared,
+  questions,
+  onSubmit,
+}: ApplicationFormProps): ReactElement {
+  const t = useT();
+  return (
+    <Card
+      title={t("apply.title", { role })}
+      meta={org}
+      footer={
+        <>
+          <span className="me-auto text-text-secondary">{t("apply.draftSaved")}</span>
+          <Button variant="primary" onClick={onSubmit}>
+            {t("apply.submit")}
+          </Button>
+        </>
+      }
+    >
+      <fieldset className="m-0 p-0 border-0 flex flex-col gap-8">
+        <legend className="mb-8 text-text-12 font-medium text-text-secondary">
+          {t("apply.shared", { org })}
+        </legend>
+        <ul className="grid grid-cols-2 max-sm:grid-cols-1 gap-8 m-0 px-12 py-8 list-none rounded-control bg-bg-surface">
+          {shared.map((s) => (
+            <li key={s.label}>
+              <Checkbox label={s.label} defaultChecked={s.on} />
+            </li>
+          ))}
+        </ul>
+      </fieldset>
+      {questions.map((q) => (
+        <Textarea key={q} label={q} width="100%" rows={2} />
+      ))}
+      <Checkbox label={t("apply.available")} />
+    </Card>
+  );
+}

package/src/Gateway/AvailabilityCalendar.tsx

@@ -0,0 +1,82 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useLocale, usePreferences, useT } from "../lib/context.tsx";
+import { monthCells, monthTitle, parseIso, toIso, weekdayNames } from "../lib/format.ts";
+import { type AvailabilityCalendarProps } from "./Gateway.types.ts";
+
+/** Available and booked days; booked days are struck through as well as colored. */
+export function AvailabilityCalendar({
+  month,
+  available,
+  booked,
+}: AvailabilityCalendarProps): ReactElement {
+  const t = useT();
+  const locale = useLocale();
+  const { weekStart: firstDay } = usePreferences();
+  const { y, m } = parseIso(month);
+  const title = monthTitle(locale, y, m);
+  return (
+    <div className="flex flex-col gap-12 w-(--ui-popover) max-w-full">
+      <strong className="font-semibold">{title}</strong>
+      <table aria-label={title} className="border-collapse">
+        <thead>
+          <tr>
+            {weekdayNames(locale, firstDay).map((d) => (
+              <th
+                key={d}
+                scope="col"
+                className="h-control-sm text-text-11 font-medium text-text-tertiary"
+              >
+                {d}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {monthCells(locale, y, m, firstDay).map((week, wi) => (
+            <tr key={wi}>
+              {week.map((d, di) => {
+                if (d === null) return <td key={di} />;
+                const iso = toIso(y, m, d);
+                const isBooked = booked.includes(iso);
+                const isAvailable = !isBooked && available.includes(iso);
+                return (
+                  <td key={di} className="p-0 text-center">
+                    <span
+                      className={cx(
+                        "inline-grid place-items-center w-(--ui-day-inline) h-(--ui-day-block) rounded-control tabular-nums",
+                        isBooked && "bg-bg-hover text-text-tertiary line-through",
+                        isAvailable && "ring-(length:--ui-hairline-half) ring-inset ring-success",
+                      )}
+                    >
+                      {d}
+                      {isBooked || isAvailable ? (
+                        <span className="sr-only">
+                          {" "}
+                          {isBooked ? t("availability.booked") : t("availability.available")}
+                        </span>
+                      ) : null}
+                    </span>
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="flex flex-wrap items-center gap-8 text-text-secondary">
+        <span className="inline-flex items-center gap-4">
+          <span
+            aria-hidden="true"
+            className="inline-block size-icon-12 rounded-mark ring-(length:--ui-hairline-half) ring-inset ring-success"
+          />
+          {t("availability.available")}
+        </span>
+        <span className="inline-flex items-center gap-4">
+          <span aria-hidden="true" className="inline-block size-icon-12 rounded-mark bg-bg-hover" />
+          {t("availability.booked")}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/Gateway/EPKViewer.tsx

@@ -0,0 +1,77 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { Avatar } from "../Avatar/Avatar.tsx";
+import { chipClass } from "../Chips/Chips.tsx";
+import { linkClass } from "../Link/Link.tsx";
+import { type EPKViewerProps } from "./Gateway.types.ts";
+
+const TILE_SEQ = [cx("bg-viz-seq-9"), cx("bg-viz-seq-8"), cx("bg-viz-seq-7"), cx("bg-viz-seq-6")];
+
+/** An artist's press kit: media grid, bio, verified badges and links. */
+export function EPKViewer({
+  artist,
+  headline,
+  badges,
+  bio,
+  media,
+  links,
+  onMedia,
+}: EPKViewerProps): ReactElement {
+  return (
+    <section aria-label={artist} className="flex flex-col gap-16 max-w-(--layout-form)">
+      <header className="flex flex-wrap items-center gap-8">
+        <Avatar name={artist} size="lg" />
+        <div className="flex flex-col">
+          <h2 className="m-0 text-heading-20 font-semibold">{artist}</h2>
+          <span className="text-text-secondary">{headline}</span>
+        </div>
+        <span className="ms-auto flex flex-wrap gap-4">
+          {badges.map((b) => (
+            <span key={b} className={chipClass}>
+              <span className="text-success">
+                <Icon name="BadgeCheck" size={12} />
+              </span>
+              {b}
+            </span>
+          ))}
+        </span>
+      </header>
+      <div className="grid grid-cols-4 max-sm:grid-cols-2 gap-8">
+        {media.map((m, i) => (
+          <button
+            key={`${m.label}-${i}`}
+            type="button"
+            onClick={() => onMedia?.(m.label)}
+            className={cx(
+              "flex aspect-square flex-col items-center justify-center gap-6 rounded-card border-0 cursor-pointer",
+              "text-accent-text-on font-medium text-text-12",
+              TILE_SEQ[i % 4],
+            )}
+          >
+            <Icon
+              name={m.type === "video" ? "Play" : m.type === "audio" ? "AudioLines" : "Image"}
+              size={20}
+            />
+            <span>{m.label}</span>
+          </button>
+        ))}
+      </div>
+      <p className="m-0 text-text-secondary">{bio}</p>
+      <div className="flex flex-wrap gap-8">
+        {links.map((l) => (
+          <a
+            key={l.label}
+            href={l.href}
+            className={linkClass}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {l.label}
+            <Icon name="ExternalLink" size={12} />
+          </a>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/Gateway/EngagementTimeline.tsx

@@ -0,0 +1,43 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { type EngagementTimelineProps } from "./Gateway.types.ts";
+
+/** The engagement stages and where this engagement is. */
+export function EngagementTimeline({ current, stages }: EngagementTimelineProps): ReactElement {
+  const t = useT();
+  return (
+    <ol aria-label={t("engagement.stages")} className="flex flex-col m-0 p-0 list-none">
+      {stages.map((s, i) => {
+        const state = i < current ? "done" : i === current ? "current" : "todo";
+        return (
+          <li
+            key={s.label}
+            aria-current={state === "current" ? "step" : undefined}
+            className={cx(
+              "relative flex items-start gap-12 py-6 text-text-secondary",
+              state === "current" && "text-text-primary font-medium",
+            )}
+          >
+            <span
+              className={cx(
+                "inline-grid place-items-center flex-none size-icon-20 rounded-full text-text-11 font-semibold tabular-nums",
+                state === "todo" &&
+                  "ring-(length:--stroke-width-hairline) ring-inset ring-border-strong",
+                state === "current" && "bg-accent text-accent-text-on",
+                state === "done" && "bg-bg-hover text-success",
+              )}
+            >
+              {state === "done" ? <Icon name="Check" size={12} /> : i + 1}
+            </span>
+            <div className="flex flex-col">
+              <strong className="font-semibold">{s.label}</strong>
+              <span className="text-text-secondary">{s.date ?? s.owner}</span>
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/Gateway/Gateway.shared.tsx

@@ -0,0 +1,5 @@
+import { cx } from "../lib/cx.ts";
+
+export const panelClass = cx(
+  "flex flex-col box-border max-w-full rounded-dialog border border-border-subtle bg-bg-raised",
+);

package/src/Gateway/Gateway.tsx

@@ -0,0 +1,30 @@
+export {
+  type ProgressBarProps,
+  type OpportunityCardProps,
+  type OpportunityFiltersProps,
+  type ApplicationFormProps,
+  type AgencySlateProps,
+  type ProfileEditorProps,
+  type EPKViewerProps,
+  type AvailabilityCalendarProps,
+  type OnboardingPacketProps,
+  type EngagementTimelineProps,
+  type RatingDialogProps,
+  type PayoutDetailsFormProps,
+  type PaymentTrackerProps,
+  type UpNextCardProps,
+} from "./Gateway.types.ts";
+export { ProgressBar } from "./ProgressBar.tsx";
+export { OpportunityCard } from "./OpportunityCard.tsx";
+export { OpportunityFilters } from "./OpportunityFilters.tsx";
+export { ApplicationForm } from "./ApplicationForm.tsx";
+export { AgencySlate } from "./AgencySlate.tsx";
+export { ProfileEditor } from "./ProfileEditor.tsx";
+export { EPKViewer } from "./EPKViewer.tsx";
+export { AvailabilityCalendar } from "./AvailabilityCalendar.tsx";
+export { OnboardingPacket } from "./OnboardingPacket.tsx";
+export { EngagementTimeline } from "./EngagementTimeline.tsx";
+export { RatingDialog } from "./RatingDialog.tsx";
+export { PayoutDetailsForm } from "./PayoutDetailsForm.tsx";
+export { PaymentTracker } from "./PaymentTracker.tsx";
+export { UpNextCard } from "./UpNextCard.tsx";

package/src/Gateway/Gateway.types.ts

@@ -0,0 +1,69 @@
+import type {
+  AgencySlateProps as ReferenceAgencySlateProps,
+  ApplicationFormProps as ReferenceApplicationFormProps,
+  AvailabilityCalendarProps as ReferenceAvailabilityCalendarProps,
+  EngagementTimelineProps as ReferenceEngagementTimelineProps,
+  EPKViewerProps as ReferenceEPKViewerProps,
+  OnboardingPacketProps as ReferenceOnboardingPacketProps,
+  OpportunityCardProps as ReferenceOpportunityCardProps,
+  OpportunityFiltersProps as ReferenceOpportunityFiltersProps,
+  PaymentTrackerProps as ReferencePaymentTrackerProps,
+  PayoutDetailsFormProps as ReferencePayoutDetailsFormProps,
+  ProfileEditorProps as ReferenceProfileEditorProps,
+  ProgressBarProps as ReferenceProgressBarProps,
+  RatingDialogProps as ReferenceRatingDialogProps,
+  UpNextCardProps as ReferenceUpNextCardProps,
+} from "../types/reference";
+
+export type ProgressBarProps = ReferenceProgressBarProps;
+
+export type OpportunityCardProps = ReferenceOpportunityCardProps & {
+  onApply?: () => void;
+  onSave?: () => void;
+};
+
+export type OpportunityFiltersProps = ReferenceOpportunityFiltersProps & {
+  onSearch?: (query: string) => void;
+  onChipsChange?: (active: string[]) => void;
+  onViewChange?: (view: "cards" | "map") => void;
+};
+
+export type ApplicationFormProps = ReferenceApplicationFormProps & { onSubmit?: () => void };
+
+export type AgencySlateProps = ReferenceAgencySlateProps & {
+  onChange?: (selected: string[]) => void;
+  onSubmit?: (selected: string[]) => void;
+};
+
+export type ProfileEditorProps = ReferenceProfileEditorProps & {
+  onVisibilityChange?: (label: string, visibility: "private" | "application" | "public") => void;
+};
+
+export type EPKViewerProps = ReferenceEPKViewerProps & { onMedia?: (label: string) => void };
+
+export type AvailabilityCalendarProps = ReferenceAvailabilityCalendarProps;
+
+export type OnboardingPacketProps = ReferenceOnboardingPacketProps & {
+  onStart?: (label: string) => void;
+};
+
+export type EngagementTimelineProps = ReferenceEngagementTimelineProps;
+
+export type RatingDialogProps = ReferenceRatingDialogProps & {
+  onSubmit?: (rating: number, comment: string) => void;
+  onLater?: () => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export type PayoutDetailsFormProps = ReferencePayoutDetailsFormProps & {
+  onSave?: (details: { routing: string; account: string; type: string }) => void;
+};
+
+export type PaymentTrackerProps = ReferencePaymentTrackerProps;
+
+export type UpNextCardProps = ReferenceUpNextCardProps & {
+  onDirections?: () => void;
+  onCalendar?: () => void;
+  onWallet?: () => void;
+};

package/src/Gateway/OnboardingPacket.tsx

@@ -0,0 +1,61 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { Tag } from "../Chips/Chips.tsx";
+import { Card } from "../Surface/Surface.tsx";
+import { type OnboardingPacketProps } from "./Gateway.types.ts";
+import { ProgressBar } from "./ProgressBar.tsx";
+
+const PACKET: Record<
+  "verified" | "review" | "todo" | "expired",
+  { icon: string; className: string; key: string }
+> = {
+  verified: { icon: "CircleCheck", className: cx("text-success"), key: "packet.verified" },
+  review: { icon: "Eye", className: cx("text-state-in-review"), key: "packet.review" },
+  todo: { icon: "Circle", className: cx("text-text-tertiary"), key: "packet.todo" },
+  expired: { icon: "CircleAlert", className: cx("text-danger"), key: "packet.expired" },
+};
+
+/** Each onboarding requirement with a time estimate; blocking items gate the engagement. */
+export function OnboardingPacket({ items, onStart }: OnboardingPacketProps): ReactElement {
+  const t = useT();
+  const done = items.filter((i) => i.state === "verified").length;
+  const minutes = items.filter((i) => i.state === "todo").reduce((sum, i) => sum + i.minutes, 0);
+  return (
+    <Card title={t("packet.title")} meta={t("packet.minutesLeft", { n: minutes })}>
+      <ProgressBar
+        label={t("packet.verifiedCount", { n: done, total: items.length })}
+        value={items.length ? (done / items.length) * 100 : 0}
+      />
+      <ul className="flex flex-col m-0 p-0 list-none">
+        {items.map((item) => {
+          const s = PACKET[item.state];
+          return (
+            <li
+              key={item.label}
+              className="flex items-center gap-8 min-h-(--space-40) border-b border-border-subtle last:border-b-0"
+            >
+              <span className={s.className}>
+                <Icon name={s.icon} label={t(s.key)} />
+              </span>
+              <div className="flex flex-1 flex-col min-w-0">
+                <span>{item.label}</span>
+                <span className="text-text-secondary">
+                  {item.note ?? t("packet.minutes", { n: item.minutes })}
+                </span>
+              </div>
+              {item.blocking ? <Tag>{t("packet.required")}</Tag> : null}
+              {item.state === "todo" ? (
+                <Button size="sm" onClick={() => onStart?.(item.label)}>
+                  {item.action ?? t("action.start")}
+                </Button>
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+    </Card>
+  );
+}