@stamprally/ui 0.3.0 → 0.5.0

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { RewardItem, RewardState, SupportedLocale, ConsumeResult, SpotItem, StampRallyState, VerificationContext, LocalizedText, RallyConfig, StampRallyProgress, SheetTheme, SlotShape } from '@stamprally/core';
+import { SupportedLocale, RewardItem, RewardState, LocaleDictionary, ConsumeResult, SpotItem, StampRallyState, VerificationContext, LocalizedText, RallyConfig, StampRallyProgress, SheetTheme, SlotShape } from '@stamprally/core';
+export { LocaleDictionary } from '@stamprally/core';
 
 interface StampPresentation {
     readonly label?: string;
@@ -7,8 +8,8 @@ interface StampPresentation {
     readonly ink?: "vermilion" | "indigo";
     readonly channel?: "instant" | "qr" | "nfc" | "geo";
 }
-interface StampSlotProps {
-    readonly stamp: SpotItem;
+interface StampSlotProps<TLocale extends string = SupportedLocale> {
+    readonly stamp: SpotItem<TLocale>;
     readonly record?: StampRallyState["records"][number] | undefined;
     readonly isNext?: boolean;
     readonly slotNumber?: number;
@@ -16,55 +17,61 @@ interface StampSlotProps {
     readonly isAnimating?: boolean;
     readonly disabled?: boolean;
     readonly slotShape?: SlotShape;
-    readonly locale?: SupportedLocale;
+    readonly locale?: TLocale;
+    readonly dictionary?: LocaleDictionary<TLocale>;
     readonly statusText?: string;
     readonly onSelect?: () => void;
 }
-declare function StampSlot({ stamp, record, isNext, slotNumber, presentation, isAnimating, disabled, slotShape, locale, statusText, onSelect, }: StampSlotProps): react.JSX.Element;
-interface StampSheetProps {
-    readonly title?: LocalizedText;
-    readonly config: RallyConfig;
+declare function StampSlot<TLocale extends string = SupportedLocale>({ stamp, record, isNext, slotNumber, presentation, isAnimating, disabled, slotShape, locale, statusText, onSelect, }: StampSlotProps<TLocale>): react.JSX.Element;
+interface StampSheetProps<TLocale extends string = SupportedLocale> {
+    readonly title?: LocalizedText<TLocale>;
+    readonly config: RallyConfig<TLocale>;
     readonly state?: StampRallyState | null;
     readonly progress?: StampRallyProgress;
     readonly presentations?: Readonly<Record<string, StampPresentation>>;
     readonly animatedStampId?: string | null;
     readonly disabled?: boolean;
-    readonly locale?: SupportedLocale;
+    readonly locale?: TLocale;
+    readonly dictionary?: LocaleDictionary<TLocale>;
     readonly theme?: SheetTheme;
     readonly onStampSelect?: (stampId: string) => void;
 }
-declare function StampSheet({ title, config, state, progress, presentations, animatedStampId, disabled, locale, theme, onStampSelect, }: StampSheetProps): react.JSX.Element;
+declare function StampSheet<TLocale extends string = SupportedLocale>({ title, config, state, progress, presentations, animatedStampId, disabled, locale, dictionary, theme, onStampSelect, }: StampSheetProps<TLocale>): react.JSX.Element;
 interface AcquisitionFeedback {
     readonly ok: boolean;
     readonly message: string;
 }
-interface StampModalProps {
+interface StampModalProps<TLocale extends string = SupportedLocale> {
     readonly open: boolean;
-    readonly stamp: SpotItem | null;
+    readonly stamp: SpotItem<TLocale> | null;
     readonly record?: StampRallyState["records"][number] | undefined;
     readonly presentation?: StampPresentation | null;
     readonly requiredStampName?: string | null;
     readonly isAvailable?: boolean;
     readonly isPending?: boolean;
     readonly isCompleted?: boolean;
-    readonly locale?: SupportedLocale;
+    readonly locale?: TLocale;
+    readonly dictionary?: LocaleDictionary<TLocale>;
     readonly onClose: () => void;
     readonly onAcquire?: (stampId: string, context: VerificationContext) => Promise<AcquisitionFeedback>;
     readonly onCheckIn?: (stampId: string, context: VerificationContext) => Promise<AcquisitionFeedback>;
     readonly onNotify?: (feedback: AcquisitionFeedback) => void;
 }
-declare function StampModal({ open, stamp, record, isAvailable, isPending, locale, onClose, onAcquire, onCheckIn, onNotify, }: StampModalProps): react.JSX.Element | null;
-interface RewardPanelProps {
-    readonly rewards: ReadonlyArray<RewardItem>;
+declare function StampModal<TLocale extends string = SupportedLocale>({ open, stamp, record, isAvailable, isPending, locale, dictionary, onClose, onAcquire, onCheckIn, onNotify, }: StampModalProps<TLocale>): react.JSX.Element | null;
+interface RewardPanelProps<TLocale extends string = SupportedLocale> {
+    readonly rewards: ReadonlyArray<RewardItem<TLocale>>;
     readonly states: ReadonlyArray<RewardState>;
-    readonly locale?: SupportedLocale;
+    readonly locale?: TLocale;
+    readonly dictionary?: LocaleDictionary<TLocale>;
     readonly isPending?: boolean;
+    readonly open?: boolean;
+    readonly onClose?: () => void;
     readonly onRedeem: (rewardId: string, options?: {
         readonly passcode?: string;
         readonly staffId?: string;
     }) => Promise<ConsumeResult>;
     readonly onNotify?: (ok: boolean, message: string) => void;
 }
-declare function RewardPanel({ rewards, states, locale, isPending, onRedeem, onNotify, }: RewardPanelProps): react.JSX.Element;
+declare function RewardPanel<TLocale extends string = SupportedLocale>({ rewards, states, locale, dictionary, isPending, open, onClose, onRedeem, onNotify, }: RewardPanelProps<TLocale>): react.JSX.Element | null;
 
 export { type AcquisitionFeedback, RewardPanel, type RewardPanelProps, StampModal, type StampModalProps, type StampPresentation, StampSheet, type StampSheetProps, StampSlot, type StampSlotProps };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { RewardItem, RewardState, SupportedLocale, ConsumeResult, SpotItem, StampRallyState, VerificationContext, LocalizedText, RallyConfig, StampRallyProgress, SheetTheme, SlotShape } from '@stamprally/core';
+import { SupportedLocale, RewardItem, RewardState, LocaleDictionary, ConsumeResult, SpotItem, StampRallyState, VerificationContext, LocalizedText, RallyConfig, StampRallyProgress, SheetTheme, SlotShape } from '@stamprally/core';
+export { LocaleDictionary } from '@stamprally/core';
 
 interface StampPresentation {
     readonly label?: string;
@@ -7,8 +8,8 @@ interface StampPresentation {
     readonly ink?: "vermilion" | "indigo";
     readonly channel?: "instant" | "qr" | "nfc" | "geo";
 }
-interface StampSlotProps {
-    readonly stamp: SpotItem;
+interface StampSlotProps<TLocale extends string = SupportedLocale> {
+    readonly stamp: SpotItem<TLocale>;
     readonly record?: StampRallyState["records"][number] | undefined;
     readonly isNext?: boolean;
     readonly slotNumber?: number;
@@ -16,55 +17,61 @@ interface StampSlotProps {
     readonly isAnimating?: boolean;
     readonly disabled?: boolean;
     readonly slotShape?: SlotShape;
-    readonly locale?: SupportedLocale;
+    readonly locale?: TLocale;
+    readonly dictionary?: LocaleDictionary<TLocale>;
     readonly statusText?: string;
     readonly onSelect?: () => void;
 }
-declare function StampSlot({ stamp, record, isNext, slotNumber, presentation, isAnimating, disabled, slotShape, locale, statusText, onSelect, }: StampSlotProps): react.JSX.Element;
-interface StampSheetProps {
-    readonly title?: LocalizedText;
-    readonly config: RallyConfig;
+declare function StampSlot<TLocale extends string = SupportedLocale>({ stamp, record, isNext, slotNumber, presentation, isAnimating, disabled, slotShape, locale, statusText, onSelect, }: StampSlotProps<TLocale>): react.JSX.Element;
+interface StampSheetProps<TLocale extends string = SupportedLocale> {
+    readonly title?: LocalizedText<TLocale>;
+    readonly config: RallyConfig<TLocale>;
     readonly state?: StampRallyState | null;
     readonly progress?: StampRallyProgress;
     readonly presentations?: Readonly<Record<string, StampPresentation>>;
     readonly animatedStampId?: string | null;
     readonly disabled?: boolean;
-    readonly locale?: SupportedLocale;
+    readonly locale?: TLocale;
+    readonly dictionary?: LocaleDictionary<TLocale>;
     readonly theme?: SheetTheme;
     readonly onStampSelect?: (stampId: string) => void;
 }
-declare function StampSheet({ title, config, state, progress, presentations, animatedStampId, disabled, locale, theme, onStampSelect, }: StampSheetProps): react.JSX.Element;
+declare function StampSheet<TLocale extends string = SupportedLocale>({ title, config, state, progress, presentations, animatedStampId, disabled, locale, dictionary, theme, onStampSelect, }: StampSheetProps<TLocale>): react.JSX.Element;
 interface AcquisitionFeedback {
     readonly ok: boolean;
     readonly message: string;
 }
-interface StampModalProps {
+interface StampModalProps<TLocale extends string = SupportedLocale> {
     readonly open: boolean;
-    readonly stamp: SpotItem | null;
+    readonly stamp: SpotItem<TLocale> | null;
     readonly record?: StampRallyState["records"][number] | undefined;
     readonly presentation?: StampPresentation | null;
     readonly requiredStampName?: string | null;
     readonly isAvailable?: boolean;
     readonly isPending?: boolean;
     readonly isCompleted?: boolean;
-    readonly locale?: SupportedLocale;
+    readonly locale?: TLocale;
+    readonly dictionary?: LocaleDictionary<TLocale>;
     readonly onClose: () => void;
     readonly onAcquire?: (stampId: string, context: VerificationContext) => Promise<AcquisitionFeedback>;
     readonly onCheckIn?: (stampId: string, context: VerificationContext) => Promise<AcquisitionFeedback>;
     readonly onNotify?: (feedback: AcquisitionFeedback) => void;
 }
-declare function StampModal({ open, stamp, record, isAvailable, isPending, locale, onClose, onAcquire, onCheckIn, onNotify, }: StampModalProps): react.JSX.Element | null;
-interface RewardPanelProps {
-    readonly rewards: ReadonlyArray<RewardItem>;
+declare function StampModal<TLocale extends string = SupportedLocale>({ open, stamp, record, isAvailable, isPending, locale, dictionary, onClose, onAcquire, onCheckIn, onNotify, }: StampModalProps<TLocale>): react.JSX.Element | null;
+interface RewardPanelProps<TLocale extends string = SupportedLocale> {
+    readonly rewards: ReadonlyArray<RewardItem<TLocale>>;
     readonly states: ReadonlyArray<RewardState>;
-    readonly locale?: SupportedLocale;
+    readonly locale?: TLocale;
+    readonly dictionary?: LocaleDictionary<TLocale>;
     readonly isPending?: boolean;
+    readonly open?: boolean;
+    readonly onClose?: () => void;
     readonly onRedeem: (rewardId: string, options?: {
         readonly passcode?: string;
         readonly staffId?: string;
     }) => Promise<ConsumeResult>;
     readonly onNotify?: (ok: boolean, message: string) => void;
 }
-declare function RewardPanel({ rewards, states, locale, isPending, onRedeem, onNotify, }: RewardPanelProps): react.JSX.Element;
+declare function RewardPanel<TLocale extends string = SupportedLocale>({ rewards, states, locale, dictionary, isPending, open, onClose, onRedeem, onNotify, }: RewardPanelProps<TLocale>): react.JSX.Element | null;
 
 export { type AcquisitionFeedback, RewardPanel, type RewardPanelProps, StampModal, type StampModalProps, type StampPresentation, StampSheet, type StampSheetProps, StampSlot, type StampSlotProps };

package/dist/index.js

@@ -1,8 +1,48 @@
 import { resolveLocalizedText, DEFAULT_SHEET_THEME } from '@stamprally/core';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/index.tsx
+function useFocusTrap(active, onClose, closeDisabled = false) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (!active) return;
+    const container = containerRef.current;
+    if (container === null) return;
+    const focusableSelector = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    const focusable = () => Array.from(container.querySelectorAll(focusableSelector));
+    const first = focusable()[0];
+    first?.focus();
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        if (!closeDisabled) {
+          event.preventDefault();
+          onClose?.();
+        }
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const elements = focusable();
+      if (elements.length === 0) {
+        event.preventDefault();
+        container.focus();
+        return;
+      }
+      const firstElement = elements[0];
+      const lastElement = elements[elements.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement?.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [active, closeDisabled, onClose]);
+  return containerRef;
+}
 var FONT_STACKS = {
   "system-ui": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
   serif: 'Georgia, "Times New Roman", "Yu Mincho", serif',
@@ -41,6 +81,7 @@ function StampSlot({
       disabled,
       onClick: onSelect,
       "aria-label": `#${String(slotNumber).padStart(2, "0")} ${name}${statusSeparator}${resolvedStatus}`,
+      "aria-disabled": disabled,
       "data-status": status,
       "data-shape": slotShape,
       className: `stamp-slot stamp-slot--${status} stamp-slot--${presentation.ink ?? "vermilion"} stamp-slot--shape-${slotShape}${isAnimating ? " stamp-slot--animating" : ""}`,
@@ -84,6 +125,7 @@ function StampSheet({
   animatedStampId = null,
   disabled = false,
   locale = "ja",
+  dictionary,
   theme = config.theme ?? DEFAULT_SHEET_THEME,
   onStampSelect
 }) {
@@ -108,18 +150,12 @@ function StampSheet({
     "--stamprally-text": `var(--stamprally-text-override, ${theme.textColor})`,
     "--stamprally-columns": String(theme.gridColumns)
   };
-  const messages = locale === "en" ? {
-    available: "available",
-    locked: "locked",
-    stamped: "stamped",
-    remaining: (value) => `${value} spots remaining`,
-    completed: "RALLY COMPLETED"
-  } : {
-    available: "\u53D6\u5F97\u53EF\u80FD",
-    locked: "\u9806\u5E8F\u5F85\u3061",
-    stamped: "\u53D6\u5F97\u6E08\u307F",
-    remaining: (value) => `\u3042\u3068${value}\u7B87\u6240`,
-    completed: "\u30E9\u30EA\u30FC\u9054\u6210"
+  const messages = {
+    available: dictionary?.[locale]?.available ?? (locale === "en" ? "available" : "\u53D6\u5F97\u53EF\u80FD"),
+    locked: dictionary?.[locale]?.locked ?? (locale === "en" ? "locked" : "\u9806\u5E8F\u5F85\u3061"),
+    stamped: dictionary?.[locale]?.stamped ?? (locale === "en" ? "stamped" : "\u53D6\u5F97\u6E08\u307F"),
+    remaining: (value) => dictionary?.[locale]?.remaining?.replace("{count}", String(value)) ?? (locale === "en" ? `${value} spots remaining` : `\u3042\u3068${value}\u7B87\u6240`),
+    completed: dictionary?.[locale]?.completed ?? (locale === "en" ? "RALLY COMPLETED" : "\u30E9\u30EA\u30FC\u9054\u6210")
   };
   return /* @__PURE__ */ jsxs(
     "section",
@@ -130,7 +166,7 @@ function StampSheet({
       children: [
         /* @__PURE__ */ jsxs("header", { className: "stamp-sheet__header", children: [
           /* @__PURE__ */ jsx("h2", { children: resolveLocalizedText(title, locale) || config.id }),
-          /* @__PURE__ */ jsxs("span", { className: "stamp-sheet__score", "aria-live": "polite", children: [
+          /* @__PURE__ */ jsxs("span", { className: "stamp-sheet__score", role: "status", "aria-live": "polite", children: [
             count,
             " / ",
             total
@@ -175,13 +211,14 @@ function StampSheet({
               disabled,
               slotShape: theme.slotShape,
               locale,
+              ...dictionary === void 0 ? {} : { dictionary },
               statusText: recordForStamp === void 0 ? next.has(stamp.id) ? messages.available : messages.locked : messages.stamped,
               onSelect: () => onStampSelect?.(stamp.id)
             },
             stamp.id
           );
         }) }),
-        percentage >= 100 && /* @__PURE__ */ jsx("div", { className: "stamp-sheet__complete-mark", children: "COMPLETE!!" }),
+        percentage >= 100 && /* @__PURE__ */ jsx("div", { className: "stamp-sheet__complete-mark", role: "status", "aria-live": "polite", children: "COMPLETE!!" }),
         percentage >= 100 && /* @__PURE__ */ jsx("div", { className: "stamp-sheet__complete-message", children: messages.completed })
       ]
     }
@@ -194,12 +231,14 @@ function StampModal({
   isAvailable = true,
   isPending = false,
   locale = "ja",
+  dictionary,
   onClose,
   onAcquire,
   onCheckIn,
   onNotify
 }) {
   const [token, setToken] = useState("");
+  const modalRef = useFocusTrap(open && stamp !== null, onClose, isPending);
   useEffect(() => {
     if (!open) setToken("");
   }, [open]);
@@ -213,6 +252,7 @@ function StampModal({
     if (feedback.ok) onClose();
   };
   const name = resolveLocalizedText(stamp.name, locale);
+  const messages = dictionary?.[locale] ?? {};
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -220,10 +260,20 @@ function StampModal({
       "aria-modal": "true",
       "aria-labelledby": "stamprally-modal-title",
       className: "stamprally-modal",
-      children: /* @__PURE__ */ jsxs("div", { className: "stamprally-modal__panel", children: [
-        /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, disabled: isPending, children: "\xD7" }),
+      children: /* @__PURE__ */ jsxs("div", { className: "stamprally-modal__panel", ref: modalRef, tabIndex: -1, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Close stamp details",
+            "aria-disabled": isPending,
+            onClick: onClose,
+            disabled: isPending,
+            children: "\xD7"
+          }
+        ),
         /* @__PURE__ */ jsx("h2", { id: "stamprally-modal-title", children: name }),
-        record !== void 0 ? /* @__PURE__ */ jsx("p", { children: "Already claimed." }) : /* @__PURE__ */ jsx("p", { children: resolveLocalizedText(stamp.description, locale) }),
+        record !== void 0 ? /* @__PURE__ */ jsx("p", { children: messages.alreadyClaimed ?? "Already claimed." }) : /* @__PURE__ */ jsx("p", { children: resolveLocalizedText(stamp.description, locale) }),
         stamp.condition.type === "token" ? /* @__PURE__ */ jsxs(
           "form",
           {
@@ -233,19 +283,31 @@ function StampModal({
             },
             children: [
               /* @__PURE__ */ jsxs("label", { children: [
-                "Passcode ",
+                messages.passcode ?? "Passcode",
+                " ",
                 /* @__PURE__ */ jsx("input", { value: token, onChange: (event) => setToken(event.target.value) })
               ] }),
-              /* @__PURE__ */ jsx("button", { type: "submit", disabled: !isAvailable || isPending, children: "Claim stamp" })
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "submit",
+                  "aria-label": "Claim stamp",
+                  "aria-disabled": !isAvailable || isPending,
+                  disabled: !isAvailable || isPending,
+                  children: messages.claimStamp ?? "Claim stamp"
+                }
+              )
             ]
           }
         ) : /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
+            "aria-label": "Claim stamp",
+            "aria-disabled": !isAvailable || isPending,
             onClick: () => void submit({ type: "instant" }),
             disabled: !isAvailable || isPending,
-            children: "Claim stamp"
+            children: messages.claimStamp ?? "Claim stamp"
           }
         )
       ] })
@@ -256,67 +318,110 @@ function RewardPanel({
   rewards,
   states,
   locale = "ja",
+  dictionary,
   isPending = false,
+  open = true,
+  onClose,
   onRedeem,
   onNotify
 }) {
   const [passcodes, setPasscodes] = useState({});
-  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": "stamprally-rewards-title", className: "stamprally-rewards", children: [
-    /* @__PURE__ */ jsx("h2", { id: "stamprally-rewards-title", children: "Rewards" }),
-    rewards.map((reward) => {
-      const state = states.find((item) => item.rewardId === reward.id);
-      const available = state?.status === "AVAILABLE";
-      const redeem = async (options) => {
-        const result = await onRedeem(reward.id, options);
-        onNotify?.(result.ok, result.ok ? "Reward claimed." : result.error.code);
-      };
-      return /* @__PURE__ */ jsxs(
-        "article",
-        {
-          className: `stamprally-reward stamprally-reward--${state?.status ?? "LOCKED"}`,
-          children: [
-            /* @__PURE__ */ jsx("h3", { children: resolveLocalizedText(reward.title, locale) }),
-            /* @__PURE__ */ jsx("p", { children: resolveLocalizedText(reward.description, locale) }),
-            /* @__PURE__ */ jsx("span", { children: state?.status ?? "LOCKED" }),
-            reward.redemptionMethod === "staff_passcode" && /* @__PURE__ */ jsxs(
-              "form",
-              {
-                onSubmit: (event) => {
-                  event.preventDefault();
-                  void redeem({ passcode: passcodes[reward.id] ?? "" });
-                },
-                children: [
-                  /* @__PURE__ */ jsxs("label", { children: [
-                    "Staff passcode",
-                    " ",
-                    /* @__PURE__ */ jsx(
-                      "input",
-                      {
-                        type: "password",
-                        value: passcodes[reward.id] ?? "",
-                        onChange: (event) => setPasscodes((current) => ({ ...current, [reward.id]: event.target.value }))
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx("button", { type: "submit", disabled: !available || isPending, children: "Redeem" })
-                ]
-              }
-            ),
-            reward.redemptionMethod !== "staff_passcode" && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                disabled: !available || isPending,
-                onClick: () => void redeem(),
-                children: "Redeem"
-              }
-            )
-          ]
-        },
-        reward.id
-      );
-    })
-  ] });
+  const panelRef = useFocusTrap(open && onClose !== void 0, onClose, isPending);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: panelRef,
+      role: "dialog",
+      "aria-labelledby": "stamprally-rewards-title",
+      "aria-modal": "true",
+      className: "stamprally-rewards",
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "stamprally-rewards__header", children: [
+          /* @__PURE__ */ jsx("h2", { id: "stamprally-rewards-title", children: dictionary?.[locale]?.rewards ?? "Rewards" }),
+          onClose !== void 0 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close rewards",
+              "aria-disabled": isPending,
+              disabled: isPending,
+              onClick: onClose,
+              children: "\xD7"
+            }
+          )
+        ] }),
+        rewards.map((reward) => {
+          const state = states.find((item) => item.rewardId === reward.id);
+          const available = state?.status === "AVAILABLE";
+          const redeem = async (options) => {
+            const result = await onRedeem(reward.id, options);
+            onNotify?.(
+              result.ok,
+              result.ok ? dictionary?.[locale]?.rewardClaimed ?? "Reward claimed." : result.error.code
+            );
+          };
+          return /* @__PURE__ */ jsxs(
+            "article",
+            {
+              className: `stamprally-reward stamprally-reward--${state?.status ?? "LOCKED"}`,
+              children: [
+                /* @__PURE__ */ jsx("h3", { children: resolveLocalizedText(reward.title, locale) }),
+                /* @__PURE__ */ jsx("p", { children: resolveLocalizedText(reward.description, locale) }),
+                /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", children: state?.status ?? "LOCKED" }),
+                reward.redemptionMethod === "staff_passcode" && /* @__PURE__ */ jsxs(
+                  "form",
+                  {
+                    onSubmit: (event) => {
+                      event.preventDefault();
+                      void redeem({ passcode: passcodes[reward.id] ?? "" });
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("label", { children: [
+                        dictionary?.[locale]?.staffPasscode ?? "Staff passcode",
+                        " ",
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "password",
+                            value: passcodes[reward.id] ?? "",
+                            onChange: (event) => setPasscodes((current) => ({ ...current, [reward.id]: event.target.value }))
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "submit",
+                          "aria-label": `Redeem ${resolveLocalizedText(reward.title, locale)}`,
+                          "aria-disabled": !available || isPending,
+                          disabled: !available || isPending,
+                          children: dictionary?.[locale]?.redeem ?? "Redeem"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                reward.redemptionMethod !== "staff_passcode" && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Redeem ${resolveLocalizedText(reward.title, locale)}`,
+                    "aria-disabled": !available || isPending,
+                    disabled: !available || isPending,
+                    onClick: () => void redeem(),
+                    children: dictionary?.[locale]?.redeem ?? "Redeem"
+                  }
+                )
+              ]
+            },
+            reward.id
+          );
+        })
+      ]
+    }
+  );
 }
 
 export { RewardPanel, StampModal, StampSheet, StampSlot };