@stamprally/ui 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 nitta-a
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,250 @@
+'use strict';
+
+var core = require('@stamprally/core');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/index.tsx
+function StampSlot({
+  stamp,
+  record,
+  isNext = false,
+  slotNumber = 1,
+  presentation = {},
+  isAnimating = false,
+  disabled = false,
+  slotShape = "rounded",
+  locale = "ja",
+  onSelect
+}) {
+  const status = record === void 0 ? isNext ? "available" : "locked" : "stamped";
+  const name = core.resolveLocalizedText(stamp.name, locale);
+  const label = presentation.label ?? stamp.condition.type;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick: onSelect,
+      "aria-label": `${slotNumber}. ${name} (${status})`,
+      "data-status": status,
+      "data-shape": slotShape,
+      className: `stamp-slot stamp-slot--${status}${isAnimating ? " stamp-slot--animating" : ""}`,
+      style: { "--stamp-primary": "var(--stamprally-primary, #9e551e)" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: presentation.icon ?? "\u2726" }),
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx("small", { children: label }),
+        record !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: record.acquiredAt, children: record.acquiredAt })
+      ]
+    }
+  );
+}
+function StampSheet({
+  title,
+  config,
+  state = null,
+  progress,
+  presentations = {},
+  animatedStampId = null,
+  disabled = false,
+  locale = "ja",
+  theme = config.theme ?? core.DEFAULT_SHEET_THEME,
+  onStampSelect
+}) {
+  const acquired = new Set(state?.records.map((record) => record.stampId) ?? []);
+  const next = new Set(progress?.nextAvailableStamps.map((stamp) => stamp.id) ?? []);
+  const count = progress?.acquired ?? acquired.size;
+  const total = progress?.total ?? config.stamps.length;
+  const percentage = progress?.percentage ?? (total === 0 ? 0 : count / total * 100);
+  const style = {
+    "--stamprally-primary": theme.primaryColor,
+    "--stamprally-background": theme.backgroundColor ?? "transparent",
+    "--stamprally-card": theme.cardBackgroundColor,
+    "--stamprally-text": theme.textColor,
+    "--stamprally-columns": String(theme.gridColumns)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: "stamprally-sheet",
+      style,
+      "aria-label": core.resolveLocalizedText(title, locale) || config.id,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { children: core.resolveLocalizedText(title, locale) || config.id }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-live": "polite", children: [
+            count,
+            " / ",
+            total
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "progressbar",
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(percentage),
+            "aria-label": "Rally progress",
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "block", width: `${percentage}%` } })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "stamprally-sheet__grid", children: config.stamps.map((stamp, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          StampSlot,
+          {
+            stamp,
+            ...state?.records.find((record) => record.stampId === stamp.id) === void 0 ? {} : { record: state?.records.find((record) => record.stampId === stamp.id) },
+            isNext: next.has(stamp.id),
+            slotNumber: index + 1,
+            ...presentations[stamp.id] === void 0 ? {} : { presentation: presentations[stamp.id] },
+            isAnimating: animatedStampId === stamp.id,
+            disabled,
+            slotShape: theme.slotShape,
+            locale,
+            onSelect: () => onStampSelect?.(stamp.id)
+          },
+          stamp.id
+        )) })
+      ]
+    }
+  );
+}
+function StampModal({
+  open,
+  stamp,
+  record,
+  isAvailable = true,
+  isPending = false,
+  locale = "ja",
+  onClose,
+  onAcquire,
+  onCheckIn,
+  onNotify
+}) {
+  const [token, setToken] = react.useState("");
+  react.useEffect(() => {
+    if (!open) setToken("");
+  }, [open]);
+  if (!open || stamp === null) return null;
+  const submit = async (context) => {
+    if (!isAvailable || record !== void 0) return;
+    const handler = onAcquire ?? onCheckIn;
+    if (handler === void 0) return;
+    const feedback = await handler(stamp.id, context);
+    onNotify?.(feedback);
+    if (feedback.ok) onClose();
+  };
+  const name = core.resolveLocalizedText(stamp.name, locale);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "stamprally-modal-title",
+      className: "stamprally-modal",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stamprally-modal__panel", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, disabled: isPending, children: "\xD7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "stamprally-modal-title", children: name }),
+        record !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Already claimed." }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: core.resolveLocalizedText(stamp.description, locale) }),
+        stamp.condition.type === "token" ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "form",
+          {
+            onSubmit: (event) => {
+              event.preventDefault();
+              void submit({ type: "token", token });
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                "Passcode ",
+                /* @__PURE__ */ jsxRuntime.jsx("input", { value: token, onChange: (event) => setToken(event.target.value) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: !isAvailable || isPending, children: "Claim stamp" })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => void submit({ type: "instant" }),
+            disabled: !isAvailable || isPending,
+            children: "Claim stamp"
+          }
+        )
+      ] })
+    }
+  );
+}
+function RewardPanel({
+  rewards,
+  states,
+  locale = "ja",
+  isPending = false,
+  onRedeem,
+  onNotify
+}) {
+  const [passcodes, setPasscodes] = react.useState({});
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-labelledby": "stamprally-rewards-title", className: "stamprally-rewards", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+        "article",
+        {
+          className: `stamprally-reward stamprally-reward--${state?.status ?? "LOCKED"}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { children: core.resolveLocalizedText(reward.title, locale) }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { children: core.resolveLocalizedText(reward.description, locale) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: state?.status ?? "LOCKED" }),
+            reward.redemptionMethod === "staff_passcode" && /* @__PURE__ */ jsxRuntime.jsxs(
+              "form",
+              {
+                onSubmit: (event) => {
+                  event.preventDefault();
+                  void redeem({ passcode: passcodes[reward.id] ?? "" });
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                    "Staff passcode",
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "password",
+                        value: passcodes[reward.id] ?? "",
+                        onChange: (event) => setPasscodes((current) => ({ ...current, [reward.id]: event.target.value }))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: !available || isPending, children: "Redeem" })
+                ]
+              }
+            ),
+            reward.redemptionMethod !== "staff_passcode" && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                disabled: !available || isPending,
+                onClick: () => void redeem(),
+                children: "Redeem"
+              }
+            )
+          ]
+        },
+        reward.id
+      );
+    })
+  ] });
+}
+
+exports.RewardPanel = RewardPanel;
+exports.StampModal = StampModal;
+exports.StampSheet = StampSheet;
+exports.StampSlot = StampSlot;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["resolveLocalizedText","jsxs","jsx","DEFAULT_SHEET_THEME","useState","useEffect"],"mappings":"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","file":"index.cjs","sourcesContent":["import {\n  type ConsumeResult,\n  DEFAULT_SHEET_THEME,\n  type LocalizedText,\n  type RallyConfig,\n  type RewardItem,\n  type RewardState,\n  resolveLocalizedText,\n  type SheetTheme,\n  type SlotShape,\n  type SpotItem,\n  type StampRallyProgress,\n  type StampRallyState,\n  type SupportedLocale,\n  type VerificationContext,\n} from \"@stamprally/core\";\nimport type { CSSProperties, FormEvent } from \"react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface StampPresentation {\n  readonly label?: string;\n  readonly icon?: string;\n  readonly ink?: \"vermilion\" | \"indigo\";\n}\n\nexport interface StampSlotProps {\n  readonly stamp: SpotItem;\n  readonly record?: StampRallyState[\"records\"][number] | undefined;\n  readonly isNext?: boolean;\n  readonly slotNumber?: number;\n  readonly presentation?: StampPresentation | undefined;\n  readonly isAnimating?: boolean;\n  readonly disabled?: boolean;\n  readonly slotShape?: SlotShape;\n  readonly locale?: SupportedLocale;\n  readonly onSelect?: () => void;\n}\n\nexport function StampSlot({\n  stamp,\n  record,\n  isNext = false,\n  slotNumber = 1,\n  presentation = {},\n  isAnimating = false,\n  disabled = false,\n  slotShape = \"rounded\",\n  locale = \"ja\",\n  onSelect,\n}: StampSlotProps) {\n  const status = record === undefined ? (isNext ? \"available\" : \"locked\") : \"stamped\";\n  const name = resolveLocalizedText(stamp.name, locale);\n  const label = presentation.label ?? stamp.condition.type;\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      onClick={onSelect}\n      aria-label={`${slotNumber}. ${name} (${status})`}\n      data-status={status}\n      data-shape={slotShape}\n      className={`stamp-slot stamp-slot--${status}${isAnimating ? \" stamp-slot--animating\" : \"\"}`}\n      style={{ \"--stamp-primary\": \"var(--stamprally-primary, #9e551e)\" } as CSSProperties}\n    >\n      <span aria-hidden=\"true\">{presentation.icon ?? \"✦\"}</span>\n      <strong>{name}</strong>\n      <small>{label}</small>\n      {record !== undefined && <time dateTime={record.acquiredAt}>{record.acquiredAt}</time>}\n    </button>\n  );\n}\n\nexport interface StampSheetProps {\n  readonly title?: LocalizedText;\n  readonly config: RallyConfig;\n  readonly state?: StampRallyState | null;\n  readonly progress?: StampRallyProgress;\n  readonly presentations?: Readonly<Record<string, StampPresentation>>;\n  readonly animatedStampId?: string | null;\n  readonly disabled?: boolean;\n  readonly locale?: SupportedLocale;\n  readonly theme?: SheetTheme;\n  readonly onStampSelect?: (stampId: string) => void;\n}\n\nexport function StampSheet({\n  title,\n  config,\n  state = null,\n  progress,\n  presentations = {},\n  animatedStampId = null,\n  disabled = false,\n  locale = \"ja\",\n  theme = config.theme ?? DEFAULT_SHEET_THEME,\n  onStampSelect,\n}: StampSheetProps) {\n  const acquired = new Set(state?.records.map((record) => record.stampId) ?? []);\n  const next = new Set(progress?.nextAvailableStamps.map((stamp) => stamp.id) ?? []);\n  const count = progress?.acquired ?? acquired.size;\n  const total = progress?.total ?? config.stamps.length;\n  const percentage = progress?.percentage ?? (total === 0 ? 0 : (count / total) * 100);\n  const style = {\n    \"--stamprally-primary\": theme.primaryColor,\n    \"--stamprally-background\": theme.backgroundColor ?? \"transparent\",\n    \"--stamprally-card\": theme.cardBackgroundColor,\n    \"--stamprally-text\": theme.textColor,\n    \"--stamprally-columns\": String(theme.gridColumns),\n  } as CSSProperties;\n  return (\n    <section\n      className=\"stamprally-sheet\"\n      style={style}\n      aria-label={resolveLocalizedText(title, locale) || config.id}\n    >\n      <header>\n        <h2>{resolveLocalizedText(title, locale) || config.id}</h2>\n        <span aria-live=\"polite\">\n          {count} / {total}\n        </span>\n      </header>\n      <div\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={Math.round(percentage)}\n        aria-label=\"Rally progress\"\n      >\n        <span style={{ display: \"block\", width: `${percentage}%` }} />\n      </div>\n      <div className=\"stamprally-sheet__grid\">\n        {config.stamps.map((stamp, index) => (\n          <StampSlot\n            key={stamp.id}\n            stamp={stamp}\n            {...(state?.records.find((record) => record.stampId === stamp.id) === undefined\n              ? {}\n              : { record: state?.records.find((record) => record.stampId === stamp.id) })}\n            isNext={next.has(stamp.id)}\n            slotNumber={index + 1}\n            {...(presentations[stamp.id] === undefined\n              ? {}\n              : { presentation: presentations[stamp.id] })}\n            isAnimating={animatedStampId === stamp.id}\n            disabled={disabled}\n            slotShape={theme.slotShape}\n            locale={locale}\n            onSelect={() => onStampSelect?.(stamp.id)}\n          />\n        ))}\n      </div>\n    </section>\n  );\n}\n\nexport interface AcquisitionFeedback {\n  readonly ok: boolean;\n  readonly message: string;\n}\nexport interface StampModalProps {\n  readonly open: boolean;\n  readonly stamp: SpotItem | null;\n  readonly record?: StampRallyState[\"records\"][number] | undefined;\n  readonly presentation?: StampPresentation | null;\n  readonly requiredStampName?: string | null;\n  readonly isAvailable?: boolean;\n  readonly isPending?: boolean;\n  readonly isCompleted?: boolean;\n  readonly locale?: SupportedLocale;\n  readonly onClose: () => void;\n  readonly onAcquire?: (\n    stampId: string,\n    context: VerificationContext,\n  ) => Promise<AcquisitionFeedback>;\n  readonly onCheckIn?: (\n    stampId: string,\n    context: VerificationContext,\n  ) => Promise<AcquisitionFeedback>;\n  readonly onNotify?: (feedback: AcquisitionFeedback) => void;\n}\n\nexport function StampModal({\n  open,\n  stamp,\n  record,\n  isAvailable = true,\n  isPending = false,\n  locale = \"ja\",\n  onClose,\n  onAcquire,\n  onCheckIn,\n  onNotify,\n}: StampModalProps) {\n  const [token, setToken] = useState(\"\");\n  useEffect(() => {\n    if (!open) setToken(\"\");\n  }, [open]);\n  if (!open || stamp === null) return null;\n  const submit = async (context: VerificationContext): Promise<void> => {\n    if (!isAvailable || record !== undefined) return;\n    const handler = onAcquire ?? onCheckIn;\n    if (handler === undefined) return;\n    const feedback = await handler(stamp.id, context);\n    onNotify?.(feedback);\n    if (feedback.ok) onClose();\n  };\n  const name = resolveLocalizedText(stamp.name, locale);\n  return (\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"stamprally-modal-title\"\n      className=\"stamprally-modal\"\n    >\n      <div className=\"stamprally-modal__panel\">\n        <button type=\"button\" aria-label=\"Close\" onClick={onClose} disabled={isPending}>\n          ×\n        </button>\n        <h2 id=\"stamprally-modal-title\">{name}</h2>\n        {record !== undefined ? (\n          <p>Already claimed.</p>\n        ) : (\n          <p>{resolveLocalizedText(stamp.description, locale)}</p>\n        )}\n        {stamp.condition.type === \"token\" ? (\n          <form\n            onSubmit={(event: FormEvent<HTMLFormElement>) => {\n              event.preventDefault();\n              void submit({ type: \"token\", token });\n            }}\n          >\n            <label>\n              Passcode <input value={token} onChange={(event) => setToken(event.target.value)} />\n            </label>\n            <button type=\"submit\" disabled={!isAvailable || isPending}>\n              Claim stamp\n            </button>\n          </form>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={() => void submit({ type: \"instant\" })}\n            disabled={!isAvailable || isPending}\n          >\n            Claim stamp\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport interface RewardPanelProps {\n  readonly rewards: ReadonlyArray<RewardItem>;\n  readonly states: ReadonlyArray<RewardState>;\n  readonly locale?: SupportedLocale;\n  readonly isPending?: boolean;\n  readonly onRedeem: (\n    rewardId: string,\n    options?: { readonly passcode?: string; readonly staffId?: string },\n  ) => Promise<ConsumeResult>;\n  readonly onNotify?: (ok: boolean, message: string) => void;\n}\n\nexport function RewardPanel({\n  rewards,\n  states,\n  locale = \"ja\",\n  isPending = false,\n  onRedeem,\n  onNotify,\n}: RewardPanelProps) {\n  const [passcodes, setPasscodes] = useState<Readonly<Record<string, string>>>({});\n  return (\n    <section aria-labelledby=\"stamprally-rewards-title\" className=\"stamprally-rewards\">\n      <h2 id=\"stamprally-rewards-title\">Rewards</h2>\n      {rewards.map((reward) => {\n        const state = states.find((item) => item.rewardId === reward.id);\n        const available = state?.status === \"AVAILABLE\";\n        const redeem = async (options?: { readonly passcode?: string }): Promise<void> => {\n          const result = await onRedeem(reward.id, options);\n          onNotify?.(result.ok, result.ok ? \"Reward claimed.\" : result.error.code);\n        };\n        return (\n          <article\n            key={reward.id}\n            className={`stamprally-reward stamprally-reward--${state?.status ?? \"LOCKED\"}`}\n          >\n            <h3>{resolveLocalizedText(reward.title, locale)}</h3>\n            <p>{resolveLocalizedText(reward.description, locale)}</p>\n            <span>{state?.status ?? \"LOCKED\"}</span>\n            {reward.redemptionMethod === \"staff_passcode\" && (\n              <form\n                onSubmit={(event) => {\n                  event.preventDefault();\n                  void redeem({ passcode: passcodes[reward.id] ?? \"\" });\n                }}\n              >\n                <label>\n                  Staff passcode{\" \"}\n                  <input\n                    type=\"password\"\n                    value={passcodes[reward.id] ?? \"\"}\n                    onChange={(event) =>\n                      setPasscodes((current) => ({ ...current, [reward.id]: event.target.value }))\n                    }\n                  />\n                </label>\n                <button type=\"submit\" disabled={!available || isPending}>\n                  Redeem\n                </button>\n              </form>\n            )}\n            {reward.redemptionMethod !== \"staff_passcode\" && (\n              <button\n                type=\"button\"\n                disabled={!available || isPending}\n                onClick={() => void redeem()}\n              >\n                Redeem\n              </button>\n            )}\n          </article>\n        );\n      })}\n    </section>\n  );\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,68 @@
+import * as react from 'react';
+import { RewardItem, RewardState, SupportedLocale, ConsumeResult, SpotItem, StampRallyState, VerificationContext, LocalizedText, RallyConfig, StampRallyProgress, SheetTheme, SlotShape } from '@stamprally/core';
+
+interface StampPresentation {
+    readonly label?: string;
+    readonly icon?: string;
+    readonly ink?: "vermilion" | "indigo";
+}
+interface StampSlotProps {
+    readonly stamp: SpotItem;
+    readonly record?: StampRallyState["records"][number] | undefined;
+    readonly isNext?: boolean;
+    readonly slotNumber?: number;
+    readonly presentation?: StampPresentation | undefined;
+    readonly isAnimating?: boolean;
+    readonly disabled?: boolean;
+    readonly slotShape?: SlotShape;
+    readonly locale?: SupportedLocale;
+    readonly onSelect?: () => void;
+}
+declare function StampSlot({ stamp, record, isNext, slotNumber, presentation, isAnimating, disabled, slotShape, locale, onSelect, }: StampSlotProps): react.JSX.Element;
+interface StampSheetProps {
+    readonly title?: LocalizedText;
+    readonly config: RallyConfig;
+    readonly state?: StampRallyState | null;
+    readonly progress?: StampRallyProgress;
+    readonly presentations?: Readonly<Record<string, StampPresentation>>;
+    readonly animatedStampId?: string | null;
+    readonly disabled?: boolean;
+    readonly locale?: SupportedLocale;
+    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;
+interface AcquisitionFeedback {
+    readonly ok: boolean;
+    readonly message: string;
+}
+interface StampModalProps {
+    readonly open: boolean;
+    readonly stamp: SpotItem | 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 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>;
+    readonly states: ReadonlyArray<RewardState>;
+    readonly locale?: SupportedLocale;
+    readonly isPending?: boolean;
+    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;
+
+export { type AcquisitionFeedback, RewardPanel, type RewardPanelProps, StampModal, type StampModalProps, type StampPresentation, StampSheet, type StampSheetProps, StampSlot, type StampSlotProps };

package/dist/index.d.ts

@@ -0,0 +1,68 @@
+import * as react from 'react';
+import { RewardItem, RewardState, SupportedLocale, ConsumeResult, SpotItem, StampRallyState, VerificationContext, LocalizedText, RallyConfig, StampRallyProgress, SheetTheme, SlotShape } from '@stamprally/core';
+
+interface StampPresentation {
+    readonly label?: string;
+    readonly icon?: string;
+    readonly ink?: "vermilion" | "indigo";
+}
+interface StampSlotProps {
+    readonly stamp: SpotItem;
+    readonly record?: StampRallyState["records"][number] | undefined;
+    readonly isNext?: boolean;
+    readonly slotNumber?: number;
+    readonly presentation?: StampPresentation | undefined;
+    readonly isAnimating?: boolean;
+    readonly disabled?: boolean;
+    readonly slotShape?: SlotShape;
+    readonly locale?: SupportedLocale;
+    readonly onSelect?: () => void;
+}
+declare function StampSlot({ stamp, record, isNext, slotNumber, presentation, isAnimating, disabled, slotShape, locale, onSelect, }: StampSlotProps): react.JSX.Element;
+interface StampSheetProps {
+    readonly title?: LocalizedText;
+    readonly config: RallyConfig;
+    readonly state?: StampRallyState | null;
+    readonly progress?: StampRallyProgress;
+    readonly presentations?: Readonly<Record<string, StampPresentation>>;
+    readonly animatedStampId?: string | null;
+    readonly disabled?: boolean;
+    readonly locale?: SupportedLocale;
+    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;
+interface AcquisitionFeedback {
+    readonly ok: boolean;
+    readonly message: string;
+}
+interface StampModalProps {
+    readonly open: boolean;
+    readonly stamp: SpotItem | 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 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>;
+    readonly states: ReadonlyArray<RewardState>;
+    readonly locale?: SupportedLocale;
+    readonly isPending?: boolean;
+    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;
+
+export { type AcquisitionFeedback, RewardPanel, type RewardPanelProps, StampModal, type StampModalProps, type StampPresentation, StampSheet, type StampSheetProps, StampSlot, type StampSlotProps };

package/dist/index.js

@@ -0,0 +1,245 @@
+import { resolveLocalizedText, DEFAULT_SHEET_THEME } from '@stamprally/core';
+import { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+function StampSlot({
+  stamp,
+  record,
+  isNext = false,
+  slotNumber = 1,
+  presentation = {},
+  isAnimating = false,
+  disabled = false,
+  slotShape = "rounded",
+  locale = "ja",
+  onSelect
+}) {
+  const status = record === void 0 ? isNext ? "available" : "locked" : "stamped";
+  const name = resolveLocalizedText(stamp.name, locale);
+  const label = presentation.label ?? stamp.condition.type;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick: onSelect,
+      "aria-label": `${slotNumber}. ${name} (${status})`,
+      "data-status": status,
+      "data-shape": slotShape,
+      className: `stamp-slot stamp-slot--${status}${isAnimating ? " stamp-slot--animating" : ""}`,
+      style: { "--stamp-primary": "var(--stamprally-primary, #9e551e)" },
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: presentation.icon ?? "\u2726" }),
+        /* @__PURE__ */ jsx("strong", { children: name }),
+        /* @__PURE__ */ jsx("small", { children: label }),
+        record !== void 0 && /* @__PURE__ */ jsx("time", { dateTime: record.acquiredAt, children: record.acquiredAt })
+      ]
+    }
+  );
+}
+function StampSheet({
+  title,
+  config,
+  state = null,
+  progress,
+  presentations = {},
+  animatedStampId = null,
+  disabled = false,
+  locale = "ja",
+  theme = config.theme ?? DEFAULT_SHEET_THEME,
+  onStampSelect
+}) {
+  const acquired = new Set(state?.records.map((record) => record.stampId) ?? []);
+  const next = new Set(progress?.nextAvailableStamps.map((stamp) => stamp.id) ?? []);
+  const count = progress?.acquired ?? acquired.size;
+  const total = progress?.total ?? config.stamps.length;
+  const percentage = progress?.percentage ?? (total === 0 ? 0 : count / total * 100);
+  const style = {
+    "--stamprally-primary": theme.primaryColor,
+    "--stamprally-background": theme.backgroundColor ?? "transparent",
+    "--stamprally-card": theme.cardBackgroundColor,
+    "--stamprally-text": theme.textColor,
+    "--stamprally-columns": String(theme.gridColumns)
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "stamprally-sheet",
+      style,
+      "aria-label": resolveLocalizedText(title, locale) || config.id,
+      children: [
+        /* @__PURE__ */ jsxs("header", { children: [
+          /* @__PURE__ */ jsx("h2", { children: resolveLocalizedText(title, locale) || config.id }),
+          /* @__PURE__ */ jsxs("span", { "aria-live": "polite", children: [
+            count,
+            " / ",
+            total
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "progressbar",
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(percentage),
+            "aria-label": "Rally progress",
+            children: /* @__PURE__ */ jsx("span", { style: { display: "block", width: `${percentage}%` } })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "stamprally-sheet__grid", children: config.stamps.map((stamp, index) => /* @__PURE__ */ jsx(
+          StampSlot,
+          {
+            stamp,
+            ...state?.records.find((record) => record.stampId === stamp.id) === void 0 ? {} : { record: state?.records.find((record) => record.stampId === stamp.id) },
+            isNext: next.has(stamp.id),
+            slotNumber: index + 1,
+            ...presentations[stamp.id] === void 0 ? {} : { presentation: presentations[stamp.id] },
+            isAnimating: animatedStampId === stamp.id,
+            disabled,
+            slotShape: theme.slotShape,
+            locale,
+            onSelect: () => onStampSelect?.(stamp.id)
+          },
+          stamp.id
+        )) })
+      ]
+    }
+  );
+}
+function StampModal({
+  open,
+  stamp,
+  record,
+  isAvailable = true,
+  isPending = false,
+  locale = "ja",
+  onClose,
+  onAcquire,
+  onCheckIn,
+  onNotify
+}) {
+  const [token, setToken] = useState("");
+  useEffect(() => {
+    if (!open) setToken("");
+  }, [open]);
+  if (!open || stamp === null) return null;
+  const submit = async (context) => {
+    if (!isAvailable || record !== void 0) return;
+    const handler = onAcquire ?? onCheckIn;
+    if (handler === void 0) return;
+    const feedback = await handler(stamp.id, context);
+    onNotify?.(feedback);
+    if (feedback.ok) onClose();
+  };
+  const name = resolveLocalizedText(stamp.name, locale);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "dialog",
+      "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" }),
+        /* @__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) }),
+        stamp.condition.type === "token" ? /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: (event) => {
+              event.preventDefault();
+              void submit({ type: "token", token });
+            },
+            children: [
+              /* @__PURE__ */ jsxs("label", { children: [
+                "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: "button",
+            onClick: () => void submit({ type: "instant" }),
+            disabled: !isAvailable || isPending,
+            children: "Claim stamp"
+          }
+        )
+      ] })
+    }
+  );
+}
+function RewardPanel({
+  rewards,
+  states,
+  locale = "ja",
+  isPending = false,
+  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
+      );
+    })
+  ] });
+}
+
+export { RewardPanel, StampModal, StampSheet, StampSlot };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import {\n  type ConsumeResult,\n  DEFAULT_SHEET_THEME,\n  type LocalizedText,\n  type RallyConfig,\n  type RewardItem,\n  type RewardState,\n  resolveLocalizedText,\n  type SheetTheme,\n  type SlotShape,\n  type SpotItem,\n  type StampRallyProgress,\n  type StampRallyState,\n  type SupportedLocale,\n  type VerificationContext,\n} from \"@stamprally/core\";\nimport type { CSSProperties, FormEvent } from \"react\";\nimport { useEffect, useState } from \"react\";\n\nexport interface StampPresentation {\n  readonly label?: string;\n  readonly icon?: string;\n  readonly ink?: \"vermilion\" | \"indigo\";\n}\n\nexport interface StampSlotProps {\n  readonly stamp: SpotItem;\n  readonly record?: StampRallyState[\"records\"][number] | undefined;\n  readonly isNext?: boolean;\n  readonly slotNumber?: number;\n  readonly presentation?: StampPresentation | undefined;\n  readonly isAnimating?: boolean;\n  readonly disabled?: boolean;\n  readonly slotShape?: SlotShape;\n  readonly locale?: SupportedLocale;\n  readonly onSelect?: () => void;\n}\n\nexport function StampSlot({\n  stamp,\n  record,\n  isNext = false,\n  slotNumber = 1,\n  presentation = {},\n  isAnimating = false,\n  disabled = false,\n  slotShape = \"rounded\",\n  locale = \"ja\",\n  onSelect,\n}: StampSlotProps) {\n  const status = record === undefined ? (isNext ? \"available\" : \"locked\") : \"stamped\";\n  const name = resolveLocalizedText(stamp.name, locale);\n  const label = presentation.label ?? stamp.condition.type;\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      onClick={onSelect}\n      aria-label={`${slotNumber}. ${name} (${status})`}\n      data-status={status}\n      data-shape={slotShape}\n      className={`stamp-slot stamp-slot--${status}${isAnimating ? \" stamp-slot--animating\" : \"\"}`}\n      style={{ \"--stamp-primary\": \"var(--stamprally-primary, #9e551e)\" } as CSSProperties}\n    >\n      <span aria-hidden=\"true\">{presentation.icon ?? \"✦\"}</span>\n      <strong>{name}</strong>\n      <small>{label}</small>\n      {record !== undefined && <time dateTime={record.acquiredAt}>{record.acquiredAt}</time>}\n    </button>\n  );\n}\n\nexport interface StampSheetProps {\n  readonly title?: LocalizedText;\n  readonly config: RallyConfig;\n  readonly state?: StampRallyState | null;\n  readonly progress?: StampRallyProgress;\n  readonly presentations?: Readonly<Record<string, StampPresentation>>;\n  readonly animatedStampId?: string | null;\n  readonly disabled?: boolean;\n  readonly locale?: SupportedLocale;\n  readonly theme?: SheetTheme;\n  readonly onStampSelect?: (stampId: string) => void;\n}\n\nexport function StampSheet({\n  title,\n  config,\n  state = null,\n  progress,\n  presentations = {},\n  animatedStampId = null,\n  disabled = false,\n  locale = \"ja\",\n  theme = config.theme ?? DEFAULT_SHEET_THEME,\n  onStampSelect,\n}: StampSheetProps) {\n  const acquired = new Set(state?.records.map((record) => record.stampId) ?? []);\n  const next = new Set(progress?.nextAvailableStamps.map((stamp) => stamp.id) ?? []);\n  const count = progress?.acquired ?? acquired.size;\n  const total = progress?.total ?? config.stamps.length;\n  const percentage = progress?.percentage ?? (total === 0 ? 0 : (count / total) * 100);\n  const style = {\n    \"--stamprally-primary\": theme.primaryColor,\n    \"--stamprally-background\": theme.backgroundColor ?? \"transparent\",\n    \"--stamprally-card\": theme.cardBackgroundColor,\n    \"--stamprally-text\": theme.textColor,\n    \"--stamprally-columns\": String(theme.gridColumns),\n  } as CSSProperties;\n  return (\n    <section\n      className=\"stamprally-sheet\"\n      style={style}\n      aria-label={resolveLocalizedText(title, locale) || config.id}\n    >\n      <header>\n        <h2>{resolveLocalizedText(title, locale) || config.id}</h2>\n        <span aria-live=\"polite\">\n          {count} / {total}\n        </span>\n      </header>\n      <div\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={Math.round(percentage)}\n        aria-label=\"Rally progress\"\n      >\n        <span style={{ display: \"block\", width: `${percentage}%` }} />\n      </div>\n      <div className=\"stamprally-sheet__grid\">\n        {config.stamps.map((stamp, index) => (\n          <StampSlot\n            key={stamp.id}\n            stamp={stamp}\n            {...(state?.records.find((record) => record.stampId === stamp.id) === undefined\n              ? {}\n              : { record: state?.records.find((record) => record.stampId === stamp.id) })}\n            isNext={next.has(stamp.id)}\n            slotNumber={index + 1}\n            {...(presentations[stamp.id] === undefined\n              ? {}\n              : { presentation: presentations[stamp.id] })}\n            isAnimating={animatedStampId === stamp.id}\n            disabled={disabled}\n            slotShape={theme.slotShape}\n            locale={locale}\n            onSelect={() => onStampSelect?.(stamp.id)}\n          />\n        ))}\n      </div>\n    </section>\n  );\n}\n\nexport interface AcquisitionFeedback {\n  readonly ok: boolean;\n  readonly message: string;\n}\nexport interface StampModalProps {\n  readonly open: boolean;\n  readonly stamp: SpotItem | null;\n  readonly record?: StampRallyState[\"records\"][number] | undefined;\n  readonly presentation?: StampPresentation | null;\n  readonly requiredStampName?: string | null;\n  readonly isAvailable?: boolean;\n  readonly isPending?: boolean;\n  readonly isCompleted?: boolean;\n  readonly locale?: SupportedLocale;\n  readonly onClose: () => void;\n  readonly onAcquire?: (\n    stampId: string,\n    context: VerificationContext,\n  ) => Promise<AcquisitionFeedback>;\n  readonly onCheckIn?: (\n    stampId: string,\n    context: VerificationContext,\n  ) => Promise<AcquisitionFeedback>;\n  readonly onNotify?: (feedback: AcquisitionFeedback) => void;\n}\n\nexport function StampModal({\n  open,\n  stamp,\n  record,\n  isAvailable = true,\n  isPending = false,\n  locale = \"ja\",\n  onClose,\n  onAcquire,\n  onCheckIn,\n  onNotify,\n}: StampModalProps) {\n  const [token, setToken] = useState(\"\");\n  useEffect(() => {\n    if (!open) setToken(\"\");\n  }, [open]);\n  if (!open || stamp === null) return null;\n  const submit = async (context: VerificationContext): Promise<void> => {\n    if (!isAvailable || record !== undefined) return;\n    const handler = onAcquire ?? onCheckIn;\n    if (handler === undefined) return;\n    const feedback = await handler(stamp.id, context);\n    onNotify?.(feedback);\n    if (feedback.ok) onClose();\n  };\n  const name = resolveLocalizedText(stamp.name, locale);\n  return (\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"stamprally-modal-title\"\n      className=\"stamprally-modal\"\n    >\n      <div className=\"stamprally-modal__panel\">\n        <button type=\"button\" aria-label=\"Close\" onClick={onClose} disabled={isPending}>\n          ×\n        </button>\n        <h2 id=\"stamprally-modal-title\">{name}</h2>\n        {record !== undefined ? (\n          <p>Already claimed.</p>\n        ) : (\n          <p>{resolveLocalizedText(stamp.description, locale)}</p>\n        )}\n        {stamp.condition.type === \"token\" ? (\n          <form\n            onSubmit={(event: FormEvent<HTMLFormElement>) => {\n              event.preventDefault();\n              void submit({ type: \"token\", token });\n            }}\n          >\n            <label>\n              Passcode <input value={token} onChange={(event) => setToken(event.target.value)} />\n            </label>\n            <button type=\"submit\" disabled={!isAvailable || isPending}>\n              Claim stamp\n            </button>\n          </form>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={() => void submit({ type: \"instant\" })}\n            disabled={!isAvailable || isPending}\n          >\n            Claim stamp\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport interface RewardPanelProps {\n  readonly rewards: ReadonlyArray<RewardItem>;\n  readonly states: ReadonlyArray<RewardState>;\n  readonly locale?: SupportedLocale;\n  readonly isPending?: boolean;\n  readonly onRedeem: (\n    rewardId: string,\n    options?: { readonly passcode?: string; readonly staffId?: string },\n  ) => Promise<ConsumeResult>;\n  readonly onNotify?: (ok: boolean, message: string) => void;\n}\n\nexport function RewardPanel({\n  rewards,\n  states,\n  locale = \"ja\",\n  isPending = false,\n  onRedeem,\n  onNotify,\n}: RewardPanelProps) {\n  const [passcodes, setPasscodes] = useState<Readonly<Record<string, string>>>({});\n  return (\n    <section aria-labelledby=\"stamprally-rewards-title\" className=\"stamprally-rewards\">\n      <h2 id=\"stamprally-rewards-title\">Rewards</h2>\n      {rewards.map((reward) => {\n        const state = states.find((item) => item.rewardId === reward.id);\n        const available = state?.status === \"AVAILABLE\";\n        const redeem = async (options?: { readonly passcode?: string }): Promise<void> => {\n          const result = await onRedeem(reward.id, options);\n          onNotify?.(result.ok, result.ok ? \"Reward claimed.\" : result.error.code);\n        };\n        return (\n          <article\n            key={reward.id}\n            className={`stamprally-reward stamprally-reward--${state?.status ?? \"LOCKED\"}`}\n          >\n            <h3>{resolveLocalizedText(reward.title, locale)}</h3>\n            <p>{resolveLocalizedText(reward.description, locale)}</p>\n            <span>{state?.status ?? \"LOCKED\"}</span>\n            {reward.redemptionMethod === \"staff_passcode\" && (\n              <form\n                onSubmit={(event) => {\n                  event.preventDefault();\n                  void redeem({ passcode: passcodes[reward.id] ?? \"\" });\n                }}\n              >\n                <label>\n                  Staff passcode{\" \"}\n                  <input\n                    type=\"password\"\n                    value={passcodes[reward.id] ?? \"\"}\n                    onChange={(event) =>\n                      setPasscodes((current) => ({ ...current, [reward.id]: event.target.value }))\n                    }\n                  />\n                </label>\n                <button type=\"submit\" disabled={!available || isPending}>\n                  Redeem\n                </button>\n              </form>\n            )}\n            {reward.redemptionMethod !== \"staff_passcode\" && (\n              <button\n                type=\"button\"\n                disabled={!available || isPending}\n                onClick={() => void redeem()}\n              >\n                Redeem\n              </button>\n            )}\n          </article>\n        );\n      })}\n    </section>\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@stamprally/ui",
+  "version": "0.2.1",
+  "description": "Accessible participant UI components for stamp rallies.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nitta-a/stamprally-core-app.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/nitta-a/stamprally-core-app/issues"
+  },
+  "homepage": "https://github.com/nitta-a/stamprally-core-app#readme",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src/styles.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./src/styles.css"
+  },
+  "dependencies": {
+    "@stamprally/core": "0.2.1",
+    "@stamprally/react": "0.2.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.18",
+    "jsdom": "^30.0.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.11"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json"
+  }
+}

package/src/styles.css

@@ -0,0 +1,45 @@
+:where(.stamprally-sheet, .stamprally-rewards) {
+  color: var(--stamprally-text, #352f25);
+  background: var(--stamprally-background, transparent);
+}
+.stamprally-sheet__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--stamprally-columns, 3), minmax(0, 1fr));
+  gap: 1rem;
+}
+.stamp-slot {
+  display: grid;
+  gap: 0.35rem;
+  min-height: 8rem;
+  padding: 1rem;
+  color: var(--stamprally-text, #352f25);
+  background: var(--stamprally-card, #fff);
+  border: 2px solid var(--stamprally-primary, #9e551e);
+  cursor: pointer;
+}
+.stamp-slot--locked {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.stamp-slot--animating {
+  animation: stamprally-stamp-press 0.5s ease-out;
+}
+.stamprally-modal {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: #0008;
+}
+.stamprally-modal__panel {
+  max-width: 32rem;
+  width: 100%;
+  padding: 1.5rem;
+  background: var(--stamprally-card, #fff);
+}
+@keyframes stamprally-stamp-press {
+  50% {
+    transform: scale(0.96) rotate(-2deg);
+  }
+}