@purpurds/countdown 0.0.1

package/dist/countdown.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown.types.d.ts","sourceRoot":"","sources":["../src/countdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,cAAc,GAAG;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAC;IAEjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,EAAE,IAAI,GAAG,MAAM,CAAC;IAEvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAClB,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,mBAAmB,GAAG,gBAAgB,CAAC,KAChE,SAAS,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,CACf,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,mBAAmB,GAAG,gBAAgB,CAAC,KAChE,SAAS,CAAC;IAEf;;;OAGG;IACH,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/dist/counter.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { CounterLabels } from './countdown.types';
+
+interface CounterProps {
+    end: number;
+    size: "md" | "lg";
+    tag: "days" | "hours" | "minutes" | "seconds";
+    counterLabels: CounterLabels;
+}
+export declare const Counter: ({ tag, size, end, counterLabels }: CounterProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=counter.d.ts.map

package/dist/counter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter.d.ts","sourceRoot":"","sources":["../src/counter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAQvD,UAAU,YAAY;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAC9C,aAAa,EAAE,aAAa,CAAC;CAC9B;AAID,eAAO,MAAM,OAAO,GAAI,mCAAmC,YAAY,sBA6CtE,CAAC"}

package/dist/metadata.js

@@ -0,0 +1,6 @@
+module.exports = {
+  "moduleName": "countdown",
+  "exports": [
+    "Countdown"
+  ]
+};

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-countdown--size-md_1ljp4_1{--counter-height: calc(56 * var(--purpur-spacing-10));--counter-width: calc(56 * var(--purpur-spacing-10))}._purpur-countdown--size-lg_1ljp4_5{--counter-height: calc(72 * var(--purpur-spacing-10));--counter-width: calc(80 * var(--purpur-spacing-10))}._purpur-countdown_1ljp4_1{--text-color: var(--purpur-color-text-default)}._purpur-countdown--variant-primary_1ljp4_12{--bg-color: var(--purpur-color-background-primary)}._purpur-countdown--variant-secondary_1ljp4_15{--bg-color: var(--purpur-color-background-secondary)}._purpur-countdown--negative_1ljp4_18{--text-color: var(--purpur-color-text-default-negative);--bg-color: var(--purpur-color-background-interactive-read-only-negative)}._purpur-countdown--fullwidth_1ljp4_22{--counter-width: 1fr}._purpur-countdown_1ljp4_1{--counter-count: 3}._purpur-countdown--showdays_1ljp4_28{--counter-count: 4}._purpur-countdown_1ljp4_1{display:grid;gap:var(--purpur-spacing-150);color:var(--text-color)}._purpur-countdown_1ljp4_1>._purpur-countdown__counter-container_1ljp4_36{display:grid;grid:var(--counter-height)/repeat(var(--counter-count),var(--counter-width));gap:var(--purpur-spacing-200)}._purpur-countdown_1ljp4_1>._purpur-countdown__label_1ljp4_41{color:inherit}._purpur-countdown-counter--size-lg_vx98f_1{font-family:var(--purpur-typography-family-display);font-weight:var(--purpur-typography-weight-normal);font-size:clamp(var(--purpur-typography-scale-400),3cqw,var(--purpur-typography-scale-600));line-height:var(--purpur-typography-line-height-snug)}._purpur-countdown-counter--size-md_vx98f_7{font-family:var(--purpur-typography-family-display);font-weight:var(--purpur-typography-weight-normal);font-size:clamp(var(--purpur-typography-scale-150),3cqw,var(--purpur-typography-scale-200));line-height:var(--purpur-typography-line-height-snug)}._purpur-countdown-counter_vx98f_1{display:grid;justify-items:center;align-items:center;padding:var(--purpur-spacing-100);border-radius:var(--purpur-border-radius-md);background-color:var(--bg-color);color:var(--text-color);overflow:hidden}._purpur-countdown-counter_vx98f_1>._purpur-countdown-counter__number_vx98f_23{position:relative;width:100%;color:inherit;text-align:center}@media (prefers-reduced-motion: no-preference){._purpur-countdown-counter_vx98f_1>._purpur-countdown-counter__number_vx98f_23[data-tick]{text-align:center;animation:_tick-animation_vx98f_1 .15s ease-out forwards}._purpur-countdown-counter_vx98f_1>._purpur-countdown-counter__number_vx98f_23[data-tick]:after{content:attr(data-tick);position:absolute;bottom:100%;inset-inline:0;color:inherit;animation:_tick-animation-pseudo_vx98f_1 .25s forwards}}._purpur-countdown-counter_vx98f_1>._purpur-countdown-counter__label_vx98f_44{font-family:var(--purpur-typography-family-default);font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-75);line-height:var(--purpur-typography-line-height-loose);color:inherit}@keyframes _tick-animation_vx98f_1{0%{transform:translateY(100%);color:transparent}to{transform:translateY(0);color:var(--text-color)}}@keyframes _tick-animation-pseudo_vx98f_1{0%{color:var(--text-color)}to{color:transparent}}

package/dist/utils.d.ts

@@ -0,0 +1,14 @@
+export declare function getDiffs(endtime: number): {
+    seconds: number;
+    minutes: number;
+    hours: number;
+    days: number;
+};
+export declare function getNext(time: number, tag: string): number;
+export declare const inMs: {
+    day: number;
+    hour: number;
+    minute: number;
+    second: number;
+};
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM;;;;;EA4BvC;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,UAOhD;AAED,eAAO,MAAM,IAAI;;;;;CAKhB,CAAC"}

package/eslint.config.mjs

@@ -0,0 +1,2 @@
+import purpurCommon from "@purpurds/component-rig/eslint.config.mjs";
+export default purpurCommon;

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@purpurds/countdown",
+  "version": "0.0.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/countdown.cjs.js",
+  "types": "./dist/countdown.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/countdown.cjs.js",
+      "types": "./dist/countdown.d.ts",
+      "default": "./dist/countdown.es.js"
+    },
+    "./styles": "./dist/styles.css",
+    "./metadata": "./dist/metadata.js"
+  },
+  "source": "src/countdown.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/heading": "8.7.0",
+    "@purpurds/paragraph": "8.7.0",
+    "@purpurds/tokens": "8.7.0",
+    "@purpurds/visually-hidden": "8.7.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/react": "^9.0.18",
+    "@telia/react-rig": "*",
+    "@testing-library/dom": "~10.4.0",
+    "@testing-library/jest-dom": "~6.4.0",
+    "@testing-library/react": "~16.2.0",
+    "@types/node": "22.17",
+    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.0.10",
+    "eslint": "9.24.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "15.5.0",
+    "prettier": "~2.8.8",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^9.0.18",
+    "typescript": "^5.6.3",
+    "vite": "^6.2.1",
+    "vitest": "^3.1.2",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/src/countdown.module.scss

@@ -0,0 +1,60 @@
+$root: ".purpur-countdown";
+
+@mixin size {
+  &--size-md {
+    --counter-height: calc(56 * var(--purpur-spacing-10));
+    --counter-width: calc(56 * var(--purpur-spacing-10));
+  }
+  &--size-lg {
+    --counter-height: calc(72 * var(--purpur-spacing-10));
+    --counter-width: calc(80 * var(--purpur-spacing-10));
+  }
+}
+@mixin variant {
+  --text-color: var(--purpur-color-text-default);
+
+  &--variant-primary {
+    --bg-color: var(--purpur-color-background-primary);
+  }
+  &--variant-secondary {
+    --bg-color: var(--purpur-color-background-secondary);
+  }
+
+  &--negative {
+    --text-color: var(--purpur-color-text-default-negative);
+    --bg-color: var(--purpur-color-background-interactive-read-only-negative);
+  }
+}
+@mixin fullwidth {
+  &--fullwidth {
+    --counter-width: 1fr;
+  }
+}
+@mixin showdays {
+  --counter-count: 3;
+
+  &--showdays {
+    --counter-count: 4;
+  }
+}
+
+#{$root} {
+  @include size();
+  @include variant();
+  @include fullwidth();
+  @include showdays();
+
+  display: grid;
+  gap: var(--purpur-spacing-150);
+  color: var(--text-color);
+
+  & > #{$root}__counter-container {
+    display: grid;
+    grid: var(--counter-height) / repeat(var(--counter-count), var(--counter-width));
+    gap: var(--purpur-spacing-200);
+  }
+
+  & > #{$root}__label {
+    color: inherit;
+  }
+}

package/src/countdown.stories.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { Paragraph } from "@purpurds/paragraph";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Countdown } from "./countdown";
+
+const meta = {
+  title: "Feedback Indicators/Countdown",
+  component: Countdown,
+  parameters: {
+    design: [
+      {
+        name: "Countdown",
+        type: "figma",
+        url: "https://www.figma.com/design/I93mUmNJbRz0ev4kpenxZl/Countdown?node-id=184-11979&p=f&t=JFmTvsUyZ3jAKGH0-0",
+      },
+    ],
+  },
+} satisfies Meta<typeof Countdown>;
+
+export default meta;
+type Story = StoryObj<typeof Countdown>;
+
+const bg = {
+  primary: (negative: boolean) =>
+    negative
+      ? "var(--purpur-color-background-primary-negative)"
+      : "var(--purpur-color-background-secondary)",
+  secondary: (negative: boolean) =>
+    negative
+      ? "var(--purpur-color-background-secondary-negative)"
+      : "var(--purpur-color-background-primary)",
+} as const;
+
+export const Showcase: Story = {
+  decorators: [
+    (Story, ctx) => {
+      return (
+        <div
+          style={{
+            padding: "var(--purpur-spacing-800)",
+            backgroundColor: bg[ctx.args.variant](!!ctx.args.negative),
+          }}
+        >
+          <Story
+            args={{
+              ...ctx.args,
+              counterLabels: {
+                days: "Days",
+                hours: "Hours",
+                minutes: ctx.args.size === "lg" ? "Minutes" : "Min",
+                seconds: ctx.args.size === "lg" ? "Seconds" : "Sec",
+              },
+            }}
+          />
+        </div>
+      );
+    },
+  ],
+  argTypes: {
+    starttime: { control: "date" },
+    endtime: { control: "date" },
+  },
+  args: {
+    variant: "primary",
+    negative: false,
+    fullWidth: true,
+    showDays: true,
+    size: "lg",
+    label: "Time left until Christmas",
+
+    starttime: new Date(),
+    get endtime() {
+      const now = new Date();
+      const christmas = new Date(`${now.getFullYear()}-12-24T00:00:00`);
+      return christmas > now ? christmas : new Date(`${now.getFullYear() + 1}-12-24T00:00:00`);
+    },
+
+    "aria-label": "Time remaining for special sale offer",
+    renderAfterEnd(props) {
+      return (
+        <Paragraph negative={props.negative}>
+          🎉 The wait is over! Happy Holidays! 🎉 {props.variant}
+        </Paragraph>
+      );
+    },
+    renderBeforeStart(props) {
+      return (
+        <Paragraph negative={props.negative}>
+          🎄 Countdown to Christmas has not started yet! 🎄 {props.variant}
+        </Paragraph>
+      );
+    },
+    "data-testid": "countdown",
+  },
+};

package/src/countdown.test.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Countdown } from "./countdown";
+import { type CountdownProps } from "./countdown.types";
+
+expect.extend(matchers);
+
+const tags = ["days", "hours", "minutes", "seconds"] as const;
+
+describe("Countdown", () => {
+  const defaultProps: CountdownProps = {
+    "data-testid": "countdown",
+    label: "Countdown Timer",
+    starttime: new Date(Date.now() - 1000), // 1 second ago
+    endtime: new Date(Date.now() + 10000), // 10 seconds from now
+    size: "lg",
+    variant: "primary",
+    fullWidth: true,
+    showDays: true,
+    negative: false,
+    "aria-label": "Countdown timer",
+    counterLabels: {
+      days: "days",
+      hours: "hours",
+      minutes: "minutes",
+      seconds: "seconds",
+    },
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  // Default props testing
+
+  it("renders the countdown component with label", () => {
+    render(<Countdown {...defaultProps} />);
+
+    expect(screen.getByRole("timer")).toBeInTheDocument();
+  });
+
+  it("renders the correct aria-labels", () => {
+    render(<Countdown {...defaultProps} />);
+
+    expect(screen.getByTestId("live-region")).toHaveAttribute(
+      "aria-label",
+      defaultProps["aria-label"]
+    );
+  });
+
+  it("renders the counter labels correctly", () => {
+    render(<Countdown {...defaultProps} />);
+
+    for (const tag of tags) {
+      expect(screen.getByTestId(`counter-${tag}`)).toHaveTextContent(
+        defaultProps.counterLabels[tag]
+      );
+    }
+  });
+
+  it("announces the time remaining in the live region", () => {
+    render(<Countdown {...defaultProps} />);
+
+    expect(screen.getByTestId("live-region")).toHaveAttribute("aria-live", "polite");
+    expect(screen.getByTestId("live-region")).toHaveTextContent(/days|hours|minutes|seconds/);
+  });
+
+  it("applies the correct class names based on props", () => {
+    render(<Countdown {...defaultProps} />);
+
+    const section = screen.getByRole("timer");
+
+    expect(section).toHaveClass("purpur-countdown");
+    expect(section).toHaveClass("purpur-countdown--fullwidth");
+    expect(section).not.toHaveClass("purpur-countdown--negative");
+    expect(section).toHaveClass("purpur-countdown--size-lg");
+    expect(section).toHaveClass("purpur-countdown--variant-primary");
+  });
+
+  // Custom props testing
+
+  it("renders nothing if the countdown has not started and no renderBeforeStart is provided", () => {
+    const props = {
+      ...defaultProps,
+      starttime: new Date(Date.now() + 10000), // 10 seconds from now
+    };
+    const { container } = render(<Countdown {...props} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders the renderBeforeStart content if provided and countdown has not started", () => {
+    const props = {
+      ...defaultProps,
+      starttime: new Date(Date.now() + 10000), // 10 seconds from now
+      renderBeforeStart: () => <div>Countdown not started</div>,
+    };
+    render(<Countdown {...props} />);
+    expect(screen.getByText("Countdown not started")).toBeInTheDocument();
+  });
+
+  it("renders nothing if the countdown has ended and no renderAfterEnd is provided", () => {
+    const props = {
+      ...defaultProps,
+      endtime: new Date(Date.now() - 10000), // 10 seconds ago
+    };
+    const { container } = render(<Countdown {...props} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders the renderAfterEnd content if provided and countdown has ended", () => {
+    const props = {
+      ...defaultProps,
+      endtime: new Date(Date.now() - 10000), // 10 seconds ago
+      renderAfterEnd: () => <div>Countdown ended</div>,
+    };
+    render(<Countdown {...props} />);
+    expect(screen.getByText("Countdown ended")).toBeInTheDocument();
+  });
+});

package/src/countdown.tsx

@@ -0,0 +1,124 @@
+import React, { type ForwardedRef, forwardRef, useId } from "react";
+import { Paragraph } from "@purpurds/paragraph";
+import { VisuallyHidden } from "@purpurds/visually-hidden";
+import c from "classnames/bind";
+
+import styles from "./countdown.module.scss";
+import { type CountdownProps } from "./countdown.types";
+import { Counter } from "./counter";
+import { getDiffs } from "./utils";
+
+const cx = c.bind(styles);
+
+const rootClassName = "purpur-countdown";
+
+const now = new Date();
+
+/**
+ * Countdown component to display a countdown timer.
+ * @param props - CountdownProps
+ * @returns A React component that displays a countdown timer.
+ */
+
+export const Countdown = forwardRef(
+  (
+    { renderAfterEnd, renderBeforeStart, ...props }: CountdownProps,
+    ref: ForwardedRef<HTMLButtonElement>
+  ) => {
+    const id = useId();
+
+    const {
+      size = "lg",
+      fullWidth = false,
+      negative = false,
+      showDays = true,
+      variant = "primary",
+      className,
+      counterLabels,
+    } = props;
+
+    const start = new Date(props.starttime).getTime();
+    const end = new Date(props.endtime).getTime();
+
+    const hasNotStarted = start > now.getTime();
+    const hasEnded = end < now.getTime();
+
+    if (hasNotStarted) return renderBeforeStart ? renderBeforeStart(props) : null;
+    if (hasEnded) return renderAfterEnd ? renderAfterEnd(props) : null;
+
+    const getCounters = () => {
+      const counterProps = { size, end, counterLabels };
+
+      return (
+        <>
+          {showDays && <Counter tag="days" {...counterProps} />}
+          <Counter tag="hours" {...counterProps} />
+          <Counter tag="minutes" {...counterProps} />
+          <Counter tag="seconds" {...counterProps} />
+        </>
+      );
+    };
+
+    // Create a single announcement of the current time (only once)
+
+    const renderAnnouncer = () => {
+      const getTimeAnnouncement = () => {
+        const { days, hours, minutes, seconds } = getDiffs(end);
+
+        const parts = [];
+
+        if (showDays) parts.push(`${days} ${counterLabels.days}`);
+        parts.push(`${hours} ${counterLabels.hours}`);
+        parts.push(`${minutes} ${counterLabels.minutes}`);
+        parts.push(`${seconds} ${counterLabels.seconds}`);
+
+        return parts.join(", ");
+      };
+
+      return (
+        <VisuallyHidden
+          data-testid="live-region"
+          aria-live="polite"
+          aria-label={props["aria-label"]}
+        >
+          {getTimeAnnouncement()}
+        </VisuallyHidden>
+      );
+    };
+
+    const counters = getCounters();
+
+    const classes = cx([
+      rootClassName,
+      `${rootClassName}--size-${size}`,
+      `${rootClassName}--variant-${variant}`,
+      {
+        [`${rootClassName}--fullwidth`]: fullWidth,
+        [`${rootClassName}--negative`]: negative,
+        [`${rootClassName}--showdays`]: showDays,
+      },
+      className,
+    ]);
+
+    return (
+      <section
+        id={id}
+        className={classes}
+        ref={ref}
+        role="timer"
+        data-testid={props["data-testid"]}
+      >
+        {/* Visually hidden live region that announces time only once */}
+        {renderAnnouncer()}
+        {props.label && (
+          <Paragraph className={cx(`${rootClassName}__label`)} variant="paragraph-100-medium">
+            {props.label}
+          </Paragraph>
+        )}
+        <div className={cx(`${rootClassName}__counter-container`)}>{counters}</div>
+      </section>
+    );
+  }
+);
+
+Countdown.displayName = "Countdown";

package/src/countdown.types.ts

@@ -0,0 +1,50 @@
+import { type ReactNode } from "react";
+
+export type CountdownProps = {
+  "data-testid"?: string;
+  "aria-label": string;
+  className?: string;
+  label?: string;
+
+  size: "md" | "lg";
+  variant: "primary" | "secondary";
+
+  fullWidth?: boolean;
+  showDays?: boolean;
+  negative?: boolean;
+
+  /**
+   * Start time of the countdown. Can be a Date object or a timestamp in milliseconds.
+   */
+  starttime: Date | number;
+  /**
+   * End time of the countdown. Can be a Date object or a timestamp in milliseconds.
+   */
+  endtime: Date | number;
+
+  /**
+   * Render a custom element before the countdown starts.
+   */
+  renderBeforeStart?: (
+    props: Omit<CountdownProps, "renderBeforeStart" | "renderAfterEnd">
+  ) => ReactNode;
+  /**
+   * Render a custom element after the countdown ends.
+   */
+  renderAfterEnd?: (
+    props: Omit<CountdownProps, "renderBeforeStart" | "renderAfterEnd">
+  ) => ReactNode;
+
+  /**
+   * Copy for the countdown labels.
+   * Used to customize the text displayed for each time unit.
+   */
+  counterLabels: CounterLabels;
+};
+
+export type CounterLabels = {
+  days: string;
+  hours: string;
+  minutes: string;
+  seconds: string;
+};

package/src/counter.module.scss

@@ -0,0 +1,81 @@
+@use "@purpurds/heading/src/heading.mixins.scss" as heading;
+@use "@purpurds/paragraph/src/paragraph.mixins.scss" as paragraph;
+
+$root: ".purpur-countdown-counter";
+
+@mixin size {
+  &--size-lg {
+    @include heading.purpur-display-15();
+  }
+  &--size-md {
+    @include heading.purpur-display-5();
+  }
+}
+
+#{$root} {
+  @include size();
+
+  display: grid;
+  justify-items: center;
+  align-items: center;
+
+  padding: var(--purpur-spacing-100);
+  border-radius: var(--purpur-border-radius-md);
+  background-color: var(--bg-color);
+  color: var(--text-color);
+
+  overflow: hidden;
+
+  & > #{$root}__number {
+    position: relative;
+
+    width: 100%;
+
+    color: inherit;
+    text-align: center;
+
+    /* Respect reduced motion preferences */
+    @media (prefers-reduced-motion: no-preference) {
+      &[data-tick] {
+        text-align: center;
+        animation: tick-animation 0.15s ease-out forwards;
+
+        &::after {
+          content: attr(data-tick);
+          position: absolute;
+          bottom: 100%;
+          inset-inline: 0;
+
+          color: inherit;
+
+          animation: tick-animation-pseudo 0.25s forwards;
+        }
+      }
+    }
+  }
+  & > #{$root}__label {
+    @include paragraph.purpur-additional-100();
+
+    color: inherit;
+  }
+}
+
+@keyframes tick-animation {
+  0% {
+    transform: translateY(100%);
+    color: transparent;
+  }
+  100% {
+    transform: translateY(0%);
+    color: var(--text-color);
+  }
+}
+
+@keyframes tick-animation-pseudo {
+  0% {
+    color: var(--text-color);
+  }
+  100% {
+    color: transparent;
+  }
+}