@eifi1/ui-kit 0.11.0 → 0.12.0

package/src/wizard/wizard-context.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect, useRef } from "react";
 import type { ValidateResult } from "./types";
 
 export interface WizardContextValue {
@@ -36,3 +36,43 @@ export function useWizardContext(): WizardContextValue {
 export function useOptionalWizardContext(): WizardContextValue | null {
   return useContext(WizardContext);
 }
+
+/**
+ * Registers a plain validator for the mounted step — the counterpart to
+ * `useRhfWizardStep` (in `@eifi1/ui-kit/rhf`) for a step that gates on its own state
+ * (a hand-managed list of lines, a sum that has to balance) rather than a form.
+ *
+ * ```tsx
+ * useWizardStepValidate(() => ({ ok: lines.length >= 2, errors: { lines: t("…") } }));
+ * ```
+ *
+ * Next (and Finish) run it with the step's other validators; a `false` or a result
+ * with `ok: false` keeps the wizard where it is. `validate` is read through a ref, so
+ * an inline closure over the latest state registers exactly once. Throws outside a
+ * `<StepperNav>`, like {@link useWizardContext}: a validator with nothing to run it is
+ * a bug to hear about.
+ */
+export function useWizardStepValidate(
+  validate: () => ValidateResult | Promise<ValidateResult>,
+): void {
+  const { registerStepValidate } = useWizardContext();
+  const ref = useRef(validate);
+  useEffect(() => {
+    ref.current = validate;
+  });
+  useEffect(() => registerStepValidate(() => ref.current()), [registerStepValidate]);
+}
+
+/**
+ * Disables the wizard's Next and Skip while `blocked` holds (tenant shares that do not
+ * add up to 100 %). Unlike {@link useWizardStepValidate}, which answers a click, this
+ * greys the button out before one. The gate is lifted again when the step unmounts, so
+ * the next step starts unblocked.
+ */
+export function useWizardNextGate(blocked: boolean): void {
+  const { setNextBlocked } = useWizardContext();
+  useEffect(() => {
+    setNextBlocked(blocked);
+    return () => setNextBlocked(false);
+  }, [blocked, setNextBlocked]);
+}

package/src/wizard/wizard-step.tsx

@@ -1,14 +1,51 @@
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
 
+export interface WizardStepProps {
+  children: ReactNode;
+  className?: string;
+  /**
+   * The step's heading ("Choose a unit"), drawn in the one style every step shares.
+   * kastlan's steps each hand-wrote `<h3 className="text-lg font-semibold">` (about
+   * sixteen of them: lease-picker-step, lease-unit-step, …), and a hand-written
+   * heading is one that drifts — a size here, a colour there. Omitted: no heading.
+   */
+  title?: ReactNode;
+  /** The line under the title: what the step asks for, or why. Rendered only with a
+   *  `title` or on its own when there is none. */
+  description?: ReactNode;
+  /** The heading's level. Default 3: the page has its `h1` and the wizard's own
+   *  chrome sits at `h2` (the review step, the cancel dialog), so a step is under it. */
+  headingLevel?: 2 | 3 | 4;
+}
+
+const HEADING = { 2: "h2", 3: "h3", 4: "h4" } as const;
+
 /** The vertical rhythm one wizard step's content sits on. A component rather
- *  than a class string so every step in every app spaces its fields the same. */
+ *  than a class string so every step in every app spaces its fields the same —
+ *  and, with `title` / `description`, heads them the same. */
 export function WizardStep({
   children,
   className,
-}: {
-  children: ReactNode;
-  className?: string;
-}) {
-  return <div className={cn("space-y-6", className)}>{children}</div>;
+  title,
+  description,
+  headingLevel = 3,
+}: WizardStepProps) {
+  const hasTitle = title !== undefined && title !== null && title !== false && title !== "";
+  const hasDescription =
+    description !== undefined && description !== null && description !== false && description !== "";
+  const Heading = HEADING[headingLevel];
+  return (
+    <div className={cn("space-y-6", className)}>
+      {(hasTitle || hasDescription) && (
+        <div data-slot="wizard-step-header" className="space-y-1">
+          {hasTitle && (
+            <Heading className="text-lg font-semibold text-[var(--text-primary)]">{title}</Heading>
+          )}
+          {hasDescription && <p className="text-sm text-[var(--text-muted)]">{description}</p>}
+        </div>
+      )}
+      {children}
+    </div>
+  );
 }

package/tokens.css

@@ -233,6 +233,18 @@
   --success-bg: rgba(6, 78, 59, 0.25);
 }
 
+/* ── Media ─────────────────────────────────────────────────────────────────
+   Controls drawn ON a photo or a live camera picture (the camera shutter), whose
+   background is the picture, not the page — so they must NOT follow the theme: a
+   dark-mode inverse pair would put a dark ring on a dark viewfinder. The same in both
+   themes, on purpose. */
+:root,
+.dark {
+  --media-ink: #ffffff;
+  --media-scrim: rgb(0 0 0 / 0.35);
+  --media-scrim-hover: rgb(0 0 0 / 0.5);
+}
+
 /* ── Toasts ─────────────────────────────────────────────────────────────────
    The kit `<Toaster>` (components/toast.tsx) paints sonner with the AlertBanner
    tones. These are ALIASES, not new colours, and they exist for one reason: sonner