@astronox/core 0.5.13 → 0.5.14

package/src/patterns/RewardCalendar/RewardCalendar.css

@@ -0,0 +1,406 @@
+.reward-calendar {
+  --reward-ribbon: var(--nox-reward-ribbon);
+
+  min-inline-size: 0;
+}
+
+.reward-calendar__status {
+  margin-block-end: var(--nox-space-4);
+  color: var(--nox-text-muted);
+}
+
+.reward-calendar__days {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: var(--nox-space-3);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.reward-calendar__days > li {
+  min-inline-size: 0;
+}
+
+.reward-calendar__door,
+.reward-calendar__reward {
+  --reward-color: var(--nox-reward-green);
+  --reward-paper: var(--reward-color);
+  --reward-ink: color-mix(
+    in srgb,
+    var(--reward-color) 75%,
+    var(--nox-theme-text-base)
+  );
+}
+
+.reward-calendar__door[data-reward-color='red'],
+.reward-calendar__reward[data-reward-color='red'] {
+  --reward-color: var(--nox-reward-red);
+}
+
+.reward-calendar__door[data-reward-color='gold'],
+.reward-calendar__reward[data-reward-color='gold'] {
+  --reward-color: var(--nox-reward-gold);
+}
+
+.reward-calendar__door {
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  inline-size: 100%;
+  min-block-size: 10rem;
+  height: 100%;
+  overflow: hidden;
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-surface-strong);
+  color: var(--nox-text);
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+  padding: 0;
+}
+
+.reward-calendar__door:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-focus-ring);
+  outline-offset: var(--nox-focus-ring-offset);
+}
+
+.reward-calendar__door[aria-disabled='true'] {
+  cursor: default;
+}
+
+.reward-calendar__door[data-state='locked'] {
+  --reward-paper: color-mix(
+    in srgb,
+    var(--nox-text-muted) 22%,
+    var(--nox-surface)
+  );
+  --reward-ribbon: color-mix(
+    in srgb,
+    var(--nox-text-muted) 60%,
+    var(--nox-surface)
+  );
+}
+
+.reward-calendar__contents {
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: var(--nox-space-2);
+  padding: 2.5rem var(--nox-space-2) var(--nox-space-3);
+  opacity: 0;
+}
+
+.reward-calendar__preview {
+  --nox-currency-icon-color: var(--reward-ink);
+
+  display: grid;
+  place-items: center;
+  inline-size: 3.75rem;
+  aspect-ratio: 1;
+  padding: var(--nox-space-2);
+  border-radius: 50%;
+  border: var(--nox-border-width) solid
+    color-mix(in srgb, var(--reward-color) 65%, var(--nox-border));
+  background: var(--nox-surface-muted);
+  color: var(--reward-ink);
+  font-size: 2rem;
+  font-weight: var(--nox-font-weight-strong);
+  line-height: 1;
+}
+
+.reward-calendar__preview > [data-widget='media'] {
+  inline-size: 100%;
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+.reward-calendar__preview-icon {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.reward-calendar__reward-name {
+  font-size: var(--nox-font-size-xs);
+  overflow-wrap: anywhere;
+}
+
+.reward-calendar__paper {
+  position: absolute;
+  inset-block: 0;
+  inline-size: 51%;
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--reward-paper) 82%, white),
+    var(--reward-paper) 60%,
+    color-mix(in srgb, var(--reward-paper) 85%, black)
+  );
+  box-shadow: inset 0 1px color-mix(in srgb, white 25%, transparent);
+  pointer-events: none;
+}
+
+.reward-calendar__paper--left {
+  inset-inline-start: 0;
+  --paper-shift: -115%;
+  --paper-turn: -12deg;
+}
+
+.reward-calendar__paper--right {
+  inset-inline-end: 0;
+  --paper-shift: 115%;
+  --paper-turn: 12deg;
+}
+
+.reward-calendar__ribbon {
+  position: absolute;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--reward-ribbon) 80%, black),
+    var(--reward-ribbon) 20% 75%,
+    color-mix(in srgb, var(--reward-ribbon) 85%, white)
+  );
+  box-shadow: 0 2px 3px color-mix(in srgb, black 18%, transparent);
+  pointer-events: none;
+}
+
+.reward-calendar__ribbon--vertical {
+  inset-block: 0;
+  inset-inline-start: 43%;
+  inline-size: 14%;
+}
+
+.reward-calendar__ribbon--horizontal {
+  inset-inline: 0;
+  inset-block-start: 46%;
+  block-size: 13%;
+}
+
+.reward-calendar__bow {
+  position: absolute;
+  inset-inline-start: 50%;
+  inset-block-start: 50%;
+  inline-size: 1rem;
+  block-size: 1rem;
+  transform: translate(-50%, -50%);
+  border-radius: 30%;
+  background: var(--reward-ribbon);
+  box-shadow: 0 2px 3px color-mix(in srgb, black 22%, transparent);
+  pointer-events: none;
+}
+
+.reward-calendar__bow::before,
+.reward-calendar__bow::after {
+  content: '';
+  position: absolute;
+  inset-block-end: 45%;
+  inline-size: 1.7rem;
+  block-size: 1.15rem;
+  border: 0.32rem solid var(--reward-ribbon);
+  box-shadow:
+    inset 0 1px color-mix(in srgb, white 40%, transparent),
+    0 2px 2px color-mix(in srgb, black 18%, transparent);
+}
+
+.reward-calendar__bow::before {
+  inset-inline-end: 55%;
+  border-radius: 60% 65% 15% 60%;
+  transform: rotate(20deg);
+}
+
+.reward-calendar__bow::after {
+  inset-inline-start: 55%;
+  border-radius: 65% 60% 60% 15%;
+  transform: rotate(-20deg);
+}
+
+.reward-calendar__number {
+  position: absolute;
+  inset-block-start: var(--nox-space-2);
+  inset-inline-start: var(--nox-space-2);
+  display: grid;
+  place-items: center;
+  min-inline-size: 2.25rem;
+  block-size: 2.25rem;
+  padding-inline: var(--nox-space-1);
+  border-radius: var(--nox-radius-sm);
+  background: var(--nox-surface);
+  color: var(--nox-text);
+  font-size: 1.5rem;
+  font-weight: var(--nox-font-weight-strong);
+  font-variant-numeric: lining-nums tabular-nums;
+  line-height: 1;
+}
+
+.reward-calendar__number > span {
+  /* Center the visible digits, excluding the font's ascender/descender space. */
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
+}
+
+@supports not (text-box-trim: trim-both) {
+  .reward-calendar__number > span {
+    transform: translateY(-0.05em);
+  }
+}
+
+.reward-calendar__glow {
+  position: absolute;
+  inset: -30%;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    white 0%,
+    color-mix(in srgb, var(--reward-ribbon) 85%, white) 20%,
+    transparent 65%
+  );
+  opacity: 0;
+  pointer-events: none;
+}
+
+.reward-calendar__door:is([data-state='revealed'], [data-state='generated'])
+  :is(
+    .reward-calendar__paper,
+    .reward-calendar__ribbon,
+    .reward-calendar__bow
+  ) {
+  display: none;
+}
+
+.reward-calendar__door:is([data-state='revealed'], [data-state='generated'])
+  .reward-calendar__contents {
+  opacity: 1;
+}
+
+.reward-calendar__reward {
+  display: grid;
+  justify-items: center;
+  gap: var(--nox-space-3);
+  padding: var(--nox-space-5);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-surface-strong);
+  text-align: center;
+}
+
+.reward-calendar__reward .reward-calendar__preview {
+  inline-size: 6rem;
+  font-size: 3rem;
+}
+
+.reward-calendar__reward h3 {
+  margin: 0;
+  font-size: var(--nox-font-size-md);
+}
+
+.reward-calendar__feedback:empty {
+  display: none;
+}
+
+@media (hover: hover) {
+  .reward-calendar__door:not(:disabled):not([aria-disabled='true']):hover {
+    opacity: 0.85;
+  }
+}
+
+@media (width < 64rem) {
+  .reward-calendar__days {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (width < 36rem) {
+  .reward-calendar__days {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--nox-space-2);
+  }
+}
+
+@media (width < 24rem) {
+  .reward-calendar__days {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .reward-calendar__door {
+    transition: opacity var(--nox-motion-duration-sm)
+      var(--nox-motion-easing-standard);
+  }
+
+  .reward-calendar__door[data-opening] .reward-calendar__paper {
+    animation: reward-unwrap var(--reward-opening-duration) ease-in-out both;
+  }
+
+  .reward-calendar__door[data-opening]
+    :is(.reward-calendar__ribbon, .reward-calendar__bow) {
+    animation: reward-untie var(--reward-opening-duration) ease-in-out both;
+  }
+
+  .reward-calendar__door[data-opening] .reward-calendar__contents {
+    animation: reward-reveal var(--reward-opening-duration) ease-out both;
+  }
+
+  .reward-calendar__door[data-opening] .reward-calendar__glow {
+    animation: reward-glow var(--reward-opening-duration) ease-out both;
+  }
+}
+
+@keyframes reward-unwrap {
+  0%,
+  20% {
+    transform: translateX(0) rotate(0);
+    opacity: 1;
+  }
+
+  65%,
+  100% {
+    transform: translateX(var(--paper-shift)) rotate(var(--paper-turn));
+    opacity: 0;
+  }
+}
+
+@keyframes reward-untie {
+  0%,
+  10% {
+    opacity: 1;
+  }
+
+  35%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes reward-reveal {
+  0%,
+  40% {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+
+  85%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes reward-glow {
+  0%,
+  30%,
+  100% {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+
+  55% {
+    opacity: 0.95;
+    transform: scale(1);
+  }
+
+  80% {
+    opacity: 0;
+    transform: scale(1.3);
+  }
+}

package/src/patterns/RewardCalendar/RewardPreview.astro

@@ -0,0 +1,18 @@
+---
+import type { RewardCalendarVisual } from './contracts';
+import Media from '../../primitives/media/Media/Media.astro';
+
+type Props = { visual: RewardCalendarVisual };
+const { visual } = Astro.props;
+const Icon = visual.kind === 'icon' ? visual.component : null;
+---
+
+<span class="reward-calendar__preview" aria-hidden="true">
+  {
+    visual.kind === 'image' ? (
+      <Media media={visual.media} fit="contain" size="fill" />
+    ) : Icon ? (
+      <Icon class="reward-calendar__preview-icon" />
+    ) : null
+  }
+</span>

package/src/patterns/RewardCalendar/contracts.ts

@@ -0,0 +1,55 @@
+import type { DisplayMedia } from '../../display/contracts';
+import type { AstroComponent } from '../../components/widgetTypes';
+
+export type RewardCalendarColor = 'green' | 'red' | 'gold';
+
+export type RewardCalendarVisual =
+  | { kind: 'icon'; component: AstroComponent }
+  | { kind: 'image'; media: DisplayMedia };
+
+export type RewardCalendarEntry = {
+  id: string;
+  number: number;
+  label: string;
+  title: string;
+  color?: RewardCalendarColor;
+  visual: RewardCalendarVisual;
+};
+
+export type RewardCalendarEntryState =
+  'locked' | 'available' | 'revealed' | 'generated';
+
+export type RewardCalendarSnapshot = {
+  message: string;
+  identity: string;
+  entries: Readonly<Record<string, RewardCalendarEntryState>>;
+};
+
+export type RewardCalendarLabels = {
+  calendar: string;
+  close: string;
+  identity: string;
+  identityPlaceholder: string;
+  generate: string;
+  generating: string;
+  copy: string;
+  copied: string;
+  copyFailed: string;
+  invalidIdentity: string;
+  unavailable: string;
+  failed: string;
+  states: Record<RewardCalendarEntryState, string>;
+};
+
+export type RewardCalendarResult =
+  | { ok: true; code: string }
+  | { ok: false; reason: 'invalidIdentity' | 'unavailable' | 'failed' };
+
+/** The consumer owns availability, identity, persistence and reward delivery. */
+export type RewardCalendarAdapter = {
+  getSnapshot(): RewardCalendarSnapshot;
+  setIdentity(value: string): void;
+  reveal(id: string): boolean;
+  generate(id: string): Promise<RewardCalendarResult>;
+  subscribe(listener: () => void): () => void;
+};