@purpurds/countdown 8.12.2 → 8.13.0

package/dist/countdown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"countdown.es.js","sources":["../../paragraph/dist/paragraph.es.js","../../visually-hidden/dist/visually-hidden.es.js","../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/utils.ts","../src/counter.tsx","../src/countdown.tsx"],"sourcesContent":["import { jsx as l } from \"react/jsx-runtime\";\nfunction d(p) {\n  return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, \"default\") ? p.default : p;\n}\nvar h = { exports: {} };\nvar s;\nfunction _() {\n  return s || (s = 1, (function(p) {\n    (function() {\n      var n = {}.hasOwnProperty;\n      function u() {\n        for (var r = \"\", a = 0; a < arguments.length; a++) {\n          var e = arguments[a];\n          e && (r = i(r, o.call(this, e)));\n        }\n        return r;\n      }\n      function o(r) {\n        if (typeof r == \"string\" || typeof r == \"number\")\n          return this && this[r] || r;\n        if (typeof r != \"object\")\n          return \"\";\n        if (Array.isArray(r))\n          return u.apply(this, r);\n        if (r.toString !== Object.prototype.toString && !r.toString.toString().includes(\"[native code]\"))\n          return r.toString();\n        var a = \"\";\n        for (var e in r)\n          n.call(r, e) && r[e] && (a = i(a, this && this[e] || e));\n        return a;\n      }\n      function i(r, a) {\n        return a ? r ? r + \" \" + a : r + a : r;\n      }\n      p.exports ? (u.default = u, p.exports = u) : window.classNames = u;\n    })();\n  })(h)), h.exports;\n}\nvar g = _();\nconst v = /* @__PURE__ */ d(g), c = {\n  \"purpur-paragraph\": \"_purpur-paragraph_1vz75_1\",\n  \"purpur-paragraph--disabled\": \"_purpur-paragraph--disabled_1vz75_7\",\n  \"purpur-paragraph--hyphens\": \"_purpur-paragraph--hyphens_1vz75_10\",\n  \"purpur-paragraph--negative\": \"_purpur-paragraph--negative_1vz75_13\",\n  \"purpur-paragraph--paragraph-100\": \"_purpur-paragraph--paragraph-100_1vz75_16\",\n  \"purpur-paragraph--paragraph-100-medium\": \"_purpur-paragraph--paragraph-100-medium_1vz75_22\",\n  \"purpur-paragraph--paragraph-100-bold\": \"_purpur-paragraph--paragraph-100-bold_1vz75_29\",\n  \"purpur-paragraph--paragraph-200\": \"_purpur-paragraph--paragraph-200_1vz75_36\",\n  \"purpur-paragraph--preamble-100\": \"_purpur-paragraph--preamble-100_1vz75_42\",\n  \"purpur-paragraph--preamble-200\": \"_purpur-paragraph--preamble-200_1vz75_48\",\n  \"purpur-paragraph--additional-100\": \"_purpur-paragraph--additional-100_1vz75_54\",\n  \"purpur-paragraph--additional-100-medium\": \"_purpur-paragraph--additional-100-medium_1vz75_60\",\n  \"purpur-paragraph--additional-100-bold\": \"_purpur-paragraph--additional-100-bold_1vz75_67\",\n  \"purpur-paragraph--overline-100\": \"_purpur-paragraph--overline-100_1vz75_74\",\n  \"purpur-paragraph--overline-200\": \"_purpur-paragraph--overline-200_1vz75_82\"\n}, f = v.bind(c), m = {\n  PARAGRAPH100: \"paragraph-100\",\n  PARAGRAPH100MEDIUM: \"paragraph-100-medium\",\n  PARAGRAPH100BOLD: \"paragraph-100-bold\",\n  PARAGRAPH200: \"paragraph-200\",\n  PREAMBLE100: \"preamble-100\",\n  PREAMBLE200: \"preamble-200\",\n  ADDITIONAL100: \"additional-100\",\n  ADDITIONAL100MEDIUM: \"additional-100-medium\",\n  ADDITIONAL100BOLD: \"additional-100-bold\",\n  OVERLINE100: \"overline-100\",\n  OVERLINE200: \"overline-200\"\n}, t = \"purpur-paragraph\", A = ({\n  children: p,\n  className: n,\n  disabled: u,\n  enableHyphenation: o = !1,\n  negative: i = !1,\n  variant: r = m.PARAGRAPH100,\n  ...a\n}) => {\n  const e = f(n, t, `${t}--${r}`, {\n    [`${t}--hyphens`]: o,\n    [`${t}--disabled`]: u,\n    [`${t}--negative`]: i\n  });\n  return /* @__PURE__ */ l(\"p\", { ...a, className: e, children: p });\n};\nA.displayName = \"Paragraph\";\nexport {\n  A as Paragraph,\n  m as ParagraphVariant\n};\n//# sourceMappingURL=paragraph.es.js.map\n","import { jsx as u } from \"react/jsx-runtime\";\nimport * as l from \"react\";\nimport \"react-dom\";\nfunction d(e, n) {\n  if (typeof e == \"function\")\n    return e(n);\n  e != null && (e.current = n);\n}\nfunction h(...e) {\n  return (n) => {\n    let r = !1;\n    const i = e.map((t) => {\n      const o = d(t, n);\n      return !r && typeof o == \"function\" && (r = !0), o;\n    });\n    if (r)\n      return () => {\n        for (let t = 0; t < i.length; t++) {\n          const o = i[t];\n          typeof o == \"function\" ? o() : d(e[t], null);\n        }\n      };\n  };\n}\n// @__NO_SIDE_EFFECTS__\nfunction g(e) {\n  const n = /* @__PURE__ */ v(e), r = l.forwardRef((i, t) => {\n    const { children: o, ...a } = i, s = l.Children.toArray(o), c = s.find(S);\n    if (c) {\n      const f = c.props.children, y = s.map((p) => p === c ? l.Children.count(f) > 1 ? l.Children.only(null) : l.isValidElement(f) ? f.props.children : null : p);\n      return /* @__PURE__ */ u(n, { ...a, ref: t, children: l.isValidElement(f) ? l.cloneElement(f, void 0, y) : null });\n    }\n    return /* @__PURE__ */ u(n, { ...a, ref: t, children: o });\n  });\n  return r.displayName = `${e}.Slot`, r;\n}\n// @__NO_SIDE_EFFECTS__\nfunction v(e) {\n  const n = l.forwardRef((r, i) => {\n    const { children: t, ...o } = r;\n    if (l.isValidElement(t)) {\n      const a = E(t), s = C(o, t.props);\n      return t.type !== l.Fragment && (s.ref = i ? h(i, a) : a), l.cloneElement(t, s);\n    }\n    return l.Children.count(t) > 1 ? l.Children.only(null) : null;\n  });\n  return n.displayName = `${e}.SlotClone`, n;\n}\nvar w = Symbol(\"radix.slottable\");\nfunction S(e) {\n  return l.isValidElement(e) && typeof e.type == \"function\" && \"__radixId\" in e.type && e.type.__radixId === w;\n}\nfunction C(e, n) {\n  const r = { ...n };\n  for (const i in n) {\n    const t = e[i], o = n[i];\n    /^on[A-Z]/.test(i) ? t && o ? r[i] = (...s) => {\n      o(...s), t(...s);\n    } : t && (r[i] = t) : i === \"style\" ? r[i] = { ...t, ...o } : i === \"className\" && (r[i] = [t, o].filter(Boolean).join(\" \"));\n  }\n  return { ...e, ...r };\n}\nfunction E(e) {\n  let n = Object.getOwnPropertyDescriptor(e.props, \"ref\")?.get, r = n && \"isReactWarning\" in n && n.isReactWarning;\n  return r ? e.ref : (n = Object.getOwnPropertyDescriptor(e, \"ref\")?.get, r = n && \"isReactWarning\" in n && n.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);\n}\nvar R = [\n  \"a\",\n  \"button\",\n  \"div\",\n  \"form\",\n  \"h2\",\n  \"h3\",\n  \"img\",\n  \"input\",\n  \"label\",\n  \"li\",\n  \"nav\",\n  \"ol\",\n  \"p\",\n  \"span\",\n  \"svg\",\n  \"ul\"\n], b = R.reduce((e, n) => {\n  const r = /* @__PURE__ */ g(`Primitive.${n}`), i = l.forwardRef((t, o) => {\n    const { asChild: a, ...s } = t, c = a ? r : n;\n    return typeof window < \"u\" && (window[Symbol.for(\"radix-ui\")] = !0), /* @__PURE__ */ u(c, { ...s, ref: o });\n  });\n  return i.displayName = `Primitive.${n}`, { ...e, [n]: i };\n}, {}), N = \"VisuallyHidden\", m = l.forwardRef(\n  (e, n) => /* @__PURE__ */ u(\n    b.span,\n    {\n      ...e,\n      ref: n,\n      style: {\n        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n        position: \"absolute\",\n        border: 0,\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: \"hidden\",\n        clip: \"rect(0, 0, 0, 0)\",\n        whiteSpace: \"nowrap\",\n        wordWrap: \"normal\",\n        ...e.style\n      }\n    }\n  )\n);\nm.displayName = N;\nvar P = m;\nconst O = ({ asChild: e, children: n, ...r }) => /* @__PURE__ */ u(P, { asChild: e, ...r, children: n });\nexport {\n  O as VisuallyHidden\n};\n//# sourceMappingURL=visually-hidden.es.js.map\n","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","export function getDiffs(endtime: number) {\n  const now = new Date().getTime();\n  const diffInMs = Math.abs(endtime - now);\n\n  let seconds = 0,\n    minutes = 0,\n    hours = 0,\n    days = 0;\n\n  if (diffInMs >= inMs.day) {\n    days = Math.floor(diffInMs / inMs.day);\n  }\n  if (diffInMs >= inMs.hour) {\n    hours = Math.floor((diffInMs % inMs.day) / inMs.hour);\n  }\n  if (diffInMs >= inMs.minute) {\n    minutes = Math.floor((diffInMs % inMs.hour) / inMs.minute);\n  }\n  if (diffInMs >= inMs.second) {\n    seconds = Math.floor((diffInMs % inMs.minute) / inMs.second);\n  }\n\n  return {\n    seconds,\n    minutes,\n    hours,\n    days,\n  };\n}\n\nexport function getNext(time: number, tag: string) {\n  let r = 0;\n  if (tag === \"seconds\") r = time - 1 >= 0 ? time - 1 : 59;\n  if (tag === \"minutes\") r = time - 1 >= 0 ? time - 1 : 59;\n  if (tag === \"hours\") r = time - 1 >= 0 ? time - 1 : 23;\n  if (tag === \"days\") r = time - 1 >= 0 ? time - 1 : 0;\n  return r;\n}\n\nexport const inMs = {\n  day: 24 * 60 * 60 * 1000,\n  hour: 60 * 60 * 1000,\n  minute: 60 * 1000,\n  second: 1000,\n};\n","import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Paragraph } from \"@purpurds/paragraph\";\nimport c from \"classnames/bind\";\n\nimport { type CounterLabels } from \"./countdown.types\";\nimport styles from \"./counter.module.scss\";\nimport { getDiffs, getNext, inMs } from \"./utils\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-countdown-counter\";\n\ninterface CounterProps {\n  end: number;\n  size: \"md\" | \"lg\";\n  tag: \"days\" | \"hours\" | \"minutes\" | \"seconds\";\n  counterLabels: CounterLabels;\n}\n\nconst intervals: Map<string, ReturnType<typeof setInterval>> = new Map();\n\nexport const Counter = ({ tag, size, end, counterLabels }: CounterProps) => {\n  const ref = useRef<HTMLHeadingElement>(null);\n  const id = `${tag}-interval`;\n\n  const [currentTime, setCurrentTime] = useState(0);\n  const [nextTime, setNextTime] = useState(0);\n  const [animationKey, setAnimationKey] = useState(0);\n\n  const checktime = useCallback(() => {\n    const diffs = getDiffs(end);\n    const next = getNext(diffs[tag], tag);\n\n    setNextTime(next);\n    setCurrentTime(diffs[tag]);\n  }, [end, tag]);\n\n  useEffect(() => {\n    checktime();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    intervals.set(id, setInterval(checktime, inMs.second));\n    return () => clearInterval(intervals.get(id)!);\n  }, [checktime, id]);\n\n  useEffect(() => {\n    setAnimationKey((prev) => prev + 1);\n  }, [currentTime]);\n\n  const counterTag = counterLabels[tag];\n  const counterTagAbbr = counterLabels[`${tag}Abbr`];\n\n  return (\n    <div\n      className={cx(rootClassName)}\n      role=\"group\"\n      aria-hidden=\"true\"\n      data-testid={`counter-${tag}`}\n    >\n      <Paragraph\n        className={cx(`${rootClassName}__number`, `${rootClassName}__number--size-${size}`)}\n        ref={ref}\n        data-tick={nextTime}\n        key={animationKey}\n      >\n        {currentTime}\n      </Paragraph>\n      {counterTagAbbr && (\n        <Paragraph className={cx(`${rootClassName}__label`, `${rootClassName}__label--abbr`)}>\n          <abbr title={counterTag}>{counterTagAbbr}</abbr>\n        </Paragraph>\n      )}\n      <Paragraph\n        className={cx(`${rootClassName}__label`, {\n          [`${rootClassName}__label--full`]: !!counterTagAbbr,\n        })}\n      >\n        {counterTag}\n      </Paragraph>\n    </div>\n  );\n};\n","import React, { type ForwardedRef, forwardRef, useId } from \"react\";\nimport { Paragraph } from \"@purpurds/paragraph\";\nimport { VisuallyHidden } from \"@purpurds/visually-hidden\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./countdown.module.scss\";\nimport { type CountdownProps } from \"./countdown.types\";\nimport { Counter } from \"./counter\";\nimport { getDiffs } from \"./utils\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-countdown\";\n\nconst now = new Date();\n\n/**\n * Countdown component to display a countdown timer.\n * @param props - CountdownProps\n * @returns A React component that displays a countdown timer.\n */\n\nexport const Countdown = forwardRef(\n  (\n    { renderAfterEnd, renderBeforeStart, ...props }: CountdownProps,\n    ref: ForwardedRef<HTMLButtonElement>\n  ) => {\n    const id = useId();\n\n    const {\n      size = \"lg\",\n      fullWidth = false,\n      negative = false,\n      showDays = true,\n      variant = \"primary\",\n      className,\n      counterLabels,\n      useMediaQueries = false,\n    } = props;\n\n    const start = new Date(props.starttime).getTime();\n    const end = new Date(props.endtime).getTime();\n\n    const hasNotStarted = start > now.getTime();\n    const hasEnded = end < now.getTime();\n\n    if (hasNotStarted) return renderBeforeStart ? renderBeforeStart(props) : null;\n    if (hasEnded) return renderAfterEnd ? renderAfterEnd(props) : null;\n\n    const getCounters = () => {\n      const counterProps = { size, end, counterLabels };\n\n      return (\n        <>\n          {showDays && <Counter tag=\"days\" {...counterProps} />}\n          <Counter tag=\"hours\" {...counterProps} />\n          <Counter tag=\"minutes\" {...counterProps} />\n          <Counter tag=\"seconds\" {...counterProps} />\n        </>\n      );\n    };\n\n    // Create a single announcement of the current time (only once)\n\n    const renderAnnouncer = () => {\n      const getTimeAnnouncement = () => {\n        const { days, hours, minutes, seconds } = getDiffs(end);\n\n        const parts = [];\n\n        if (showDays) parts.push(`${days} ${counterLabels.days}`);\n        parts.push(`${hours} ${counterLabels.hours}`);\n        parts.push(`${minutes} ${counterLabels.minutes}`);\n        parts.push(`${seconds} ${counterLabels.seconds}`);\n\n        return parts.join(\", \");\n      };\n\n      return (\n        <VisuallyHidden\n          data-testid=\"live-region\"\n          aria-live=\"polite\"\n          aria-label={props[\"aria-label\"]}\n        >\n          {getTimeAnnouncement()}\n        </VisuallyHidden>\n      );\n    };\n\n    const counters = getCounters();\n\n    const classes = cx(\n      rootClassName,\n      `${rootClassName}--size-${size}`,\n      `${rootClassName}--variant-${variant}`,\n      {\n        [`${rootClassName}--full-width`]: fullWidth,\n        [`${rootClassName}--negative`]: negative,\n        [`${rootClassName}--show-days`]: showDays,\n        [`${rootClassName}--use-media-queries`]: useMediaQueries,\n        [`${rootClassName}--use-container-queries`]: !useMediaQueries,\n      },\n      className\n    );\n\n    return (\n      <section\n        id={id}\n        className={classes}\n        ref={ref}\n        role=\"timer\"\n        data-testid={props[\"data-testid\"]}\n      >\n        {/* Visually hidden live region that announces time only once */}\n        {renderAnnouncer()}\n        {props.label && (\n          <Paragraph className={cx(`${rootClassName}__label`)} variant=\"paragraph-100-medium\">\n            {props.label}\n          </Paragraph>\n        )}\n        <div className={cx(`${rootClassName}__counter-container`)}>{counters}</div>\n      </section>\n    );\n  }\n);\n\nCountdown.displayName = \"Countdown\";\n"],"names":["d","p","h","s","_","n","u","r","e","i","g","v","c","f","m","t","A","l","o","S","y","E","C","w","R","b","N","P","O","hasOwn","classNames","classes","arg","appendClass","parseValue","key","value","newClass","module","getDiffs","endtime","now","diffInMs","seconds","minutes","hours","days","inMs","getNext","time","tag","cx","styles","rootClassName","intervals","Counter","size","end","counterLabels","ref","useRef","id","currentTime","setCurrentTime","useState","nextTime","setNextTime","animationKey","setAnimationKey","checktime","useCallback","diffs","next","useEffect","prev","counterTag","counterTagAbbr","jsxs","jsx","Paragraph","Countdown","forwardRef","renderAfterEnd","renderBeforeStart","props","useId","fullWidth","negative","showDays","variant","className","useMediaQueries","start","hasNotStarted","hasEnded","getCounters","counterProps","Fragment","renderAnnouncer","getTimeAnnouncement","parts","VisuallyHidden","counters"],"mappings":"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","x_google_ignoreList":[2]}
+{"version":3,"file":"countdown.es.js","sources":["../../paragraph/dist/paragraph.es.js","../../visually-hidden/dist/visually-hidden.es.js","../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../src/counter.tsx","../src/utils.ts","../src/countdown.tsx"],"sourcesContent":["import { jsx as l } from \"react/jsx-runtime\";\nfunction d(p) {\n  return p && p.__esModule && Object.prototype.hasOwnProperty.call(p, \"default\") ? p.default : p;\n}\nvar h = { exports: {} };\nvar s;\nfunction _() {\n  return s || (s = 1, (function(p) {\n    (function() {\n      var n = {}.hasOwnProperty;\n      function u() {\n        for (var r = \"\", a = 0; a < arguments.length; a++) {\n          var e = arguments[a];\n          e && (r = i(r, o.call(this, e)));\n        }\n        return r;\n      }\n      function o(r) {\n        if (typeof r == \"string\" || typeof r == \"number\")\n          return this && this[r] || r;\n        if (typeof r != \"object\")\n          return \"\";\n        if (Array.isArray(r))\n          return u.apply(this, r);\n        if (r.toString !== Object.prototype.toString && !r.toString.toString().includes(\"[native code]\"))\n          return r.toString();\n        var a = \"\";\n        for (var e in r)\n          n.call(r, e) && r[e] && (a = i(a, this && this[e] || e));\n        return a;\n      }\n      function i(r, a) {\n        return a ? r ? r + \" \" + a : r + a : r;\n      }\n      p.exports ? (u.default = u, p.exports = u) : window.classNames = u;\n    })();\n  })(h)), h.exports;\n}\nvar g = _();\nconst v = /* @__PURE__ */ d(g), c = {\n  \"purpur-paragraph\": \"_purpur-paragraph_1vz75_1\",\n  \"purpur-paragraph--disabled\": \"_purpur-paragraph--disabled_1vz75_7\",\n  \"purpur-paragraph--hyphens\": \"_purpur-paragraph--hyphens_1vz75_10\",\n  \"purpur-paragraph--negative\": \"_purpur-paragraph--negative_1vz75_13\",\n  \"purpur-paragraph--paragraph-100\": \"_purpur-paragraph--paragraph-100_1vz75_16\",\n  \"purpur-paragraph--paragraph-100-medium\": \"_purpur-paragraph--paragraph-100-medium_1vz75_22\",\n  \"purpur-paragraph--paragraph-100-bold\": \"_purpur-paragraph--paragraph-100-bold_1vz75_29\",\n  \"purpur-paragraph--paragraph-200\": \"_purpur-paragraph--paragraph-200_1vz75_36\",\n  \"purpur-paragraph--preamble-100\": \"_purpur-paragraph--preamble-100_1vz75_42\",\n  \"purpur-paragraph--preamble-200\": \"_purpur-paragraph--preamble-200_1vz75_48\",\n  \"purpur-paragraph--additional-100\": \"_purpur-paragraph--additional-100_1vz75_54\",\n  \"purpur-paragraph--additional-100-medium\": \"_purpur-paragraph--additional-100-medium_1vz75_60\",\n  \"purpur-paragraph--additional-100-bold\": \"_purpur-paragraph--additional-100-bold_1vz75_67\",\n  \"purpur-paragraph--overline-100\": \"_purpur-paragraph--overline-100_1vz75_74\",\n  \"purpur-paragraph--overline-200\": \"_purpur-paragraph--overline-200_1vz75_82\"\n}, f = v.bind(c), m = {\n  PARAGRAPH100: \"paragraph-100\",\n  PARAGRAPH100MEDIUM: \"paragraph-100-medium\",\n  PARAGRAPH100BOLD: \"paragraph-100-bold\",\n  PARAGRAPH200: \"paragraph-200\",\n  PREAMBLE100: \"preamble-100\",\n  PREAMBLE200: \"preamble-200\",\n  ADDITIONAL100: \"additional-100\",\n  ADDITIONAL100MEDIUM: \"additional-100-medium\",\n  ADDITIONAL100BOLD: \"additional-100-bold\",\n  OVERLINE100: \"overline-100\",\n  OVERLINE200: \"overline-200\"\n}, t = \"purpur-paragraph\", A = ({\n  children: p,\n  className: n,\n  disabled: u,\n  enableHyphenation: o = !1,\n  negative: i = !1,\n  variant: r = m.PARAGRAPH100,\n  ...a\n}) => {\n  const e = f(n, t, `${t}--${r}`, {\n    [`${t}--hyphens`]: o,\n    [`${t}--disabled`]: u,\n    [`${t}--negative`]: i\n  });\n  return /* @__PURE__ */ l(\"p\", { ...a, className: e, children: p });\n};\nA.displayName = \"Paragraph\";\nexport {\n  A as Paragraph,\n  m as ParagraphVariant\n};\n//# sourceMappingURL=paragraph.es.js.map\n","import { jsx as u } from \"react/jsx-runtime\";\nimport * as l from \"react\";\nimport \"react-dom\";\nfunction d(e, n) {\n  if (typeof e == \"function\")\n    return e(n);\n  e != null && (e.current = n);\n}\nfunction h(...e) {\n  return (n) => {\n    let r = !1;\n    const i = e.map((t) => {\n      const o = d(t, n);\n      return !r && typeof o == \"function\" && (r = !0), o;\n    });\n    if (r)\n      return () => {\n        for (let t = 0; t < i.length; t++) {\n          const o = i[t];\n          typeof o == \"function\" ? o() : d(e[t], null);\n        }\n      };\n  };\n}\n// @__NO_SIDE_EFFECTS__\nfunction g(e) {\n  const n = /* @__PURE__ */ v(e), r = l.forwardRef((i, t) => {\n    const { children: o, ...a } = i, s = l.Children.toArray(o), c = s.find(S);\n    if (c) {\n      const f = c.props.children, y = s.map((p) => p === c ? l.Children.count(f) > 1 ? l.Children.only(null) : l.isValidElement(f) ? f.props.children : null : p);\n      return /* @__PURE__ */ u(n, { ...a, ref: t, children: l.isValidElement(f) ? l.cloneElement(f, void 0, y) : null });\n    }\n    return /* @__PURE__ */ u(n, { ...a, ref: t, children: o });\n  });\n  return r.displayName = `${e}.Slot`, r;\n}\n// @__NO_SIDE_EFFECTS__\nfunction v(e) {\n  const n = l.forwardRef((r, i) => {\n    const { children: t, ...o } = r;\n    if (l.isValidElement(t)) {\n      const a = E(t), s = C(o, t.props);\n      return t.type !== l.Fragment && (s.ref = i ? h(i, a) : a), l.cloneElement(t, s);\n    }\n    return l.Children.count(t) > 1 ? l.Children.only(null) : null;\n  });\n  return n.displayName = `${e}.SlotClone`, n;\n}\nvar w = Symbol(\"radix.slottable\");\nfunction S(e) {\n  return l.isValidElement(e) && typeof e.type == \"function\" && \"__radixId\" in e.type && e.type.__radixId === w;\n}\nfunction C(e, n) {\n  const r = { ...n };\n  for (const i in n) {\n    const t = e[i], o = n[i];\n    /^on[A-Z]/.test(i) ? t && o ? r[i] = (...s) => {\n      o(...s), t(...s);\n    } : t && (r[i] = t) : i === \"style\" ? r[i] = { ...t, ...o } : i === \"className\" && (r[i] = [t, o].filter(Boolean).join(\" \"));\n  }\n  return { ...e, ...r };\n}\nfunction E(e) {\n  let n = Object.getOwnPropertyDescriptor(e.props, \"ref\")?.get, r = n && \"isReactWarning\" in n && n.isReactWarning;\n  return r ? e.ref : (n = Object.getOwnPropertyDescriptor(e, \"ref\")?.get, r = n && \"isReactWarning\" in n && n.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);\n}\nvar R = [\n  \"a\",\n  \"button\",\n  \"div\",\n  \"form\",\n  \"h2\",\n  \"h3\",\n  \"img\",\n  \"input\",\n  \"label\",\n  \"li\",\n  \"nav\",\n  \"ol\",\n  \"p\",\n  \"span\",\n  \"svg\",\n  \"ul\"\n], b = R.reduce((e, n) => {\n  const r = /* @__PURE__ */ g(`Primitive.${n}`), i = l.forwardRef((t, o) => {\n    const { asChild: a, ...s } = t, c = a ? r : n;\n    return typeof window < \"u\" && (window[Symbol.for(\"radix-ui\")] = !0), /* @__PURE__ */ u(c, { ...s, ref: o });\n  });\n  return i.displayName = `Primitive.${n}`, { ...e, [n]: i };\n}, {}), N = \"VisuallyHidden\", m = l.forwardRef(\n  (e, n) => /* @__PURE__ */ u(\n    b.span,\n    {\n      ...e,\n      ref: n,\n      style: {\n        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n        position: \"absolute\",\n        border: 0,\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: \"hidden\",\n        clip: \"rect(0, 0, 0, 0)\",\n        whiteSpace: \"nowrap\",\n        wordWrap: \"normal\",\n        ...e.style\n      }\n    }\n  )\n);\nm.displayName = N;\nvar P = m;\nconst O = ({ asChild: e, children: n, ...r }) => /* @__PURE__ */ u(P, { asChild: e, ...r, children: n });\nexport {\n  O as VisuallyHidden\n};\n//# sourceMappingURL=visually-hidden.es.js.map\n","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport { Paragraph } from \"@purpurds/paragraph\";\nimport c from \"classnames/bind\";\n\nimport { type CounterLabels } from \"./countdown.types\";\nimport styles from \"./counter.module.scss\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-countdown-counter\";\n\ninterface CounterProps {\n  numbers: string[];\n  size: \"md\" | \"lg\";\n  tag: \"days\" | \"hours\" | \"minutes\" | \"seconds\";\n  counterLabels: CounterLabels;\n}\n\nexport const Counter = ({ tag, size, numbers, counterLabels }: CounterProps) => {\n  const renderLabel = () => {\n    const label = counterLabels[tag];\n    const abbreviatedLabel = counterLabels[`${tag}Abbr`];\n\n    return (\n      <>\n        {abbreviatedLabel && (\n          <Paragraph className={cx(`${rootClassName}__label`, `${rootClassName}__label--abbr`)}>\n            <abbr title={label}>{abbreviatedLabel}</abbr>\n          </Paragraph>\n        )}\n        <Paragraph\n          className={cx(`${rootClassName}__label`, {\n            [`${rootClassName}__label--full`]: !!abbreviatedLabel,\n          })}\n        >\n          {label}\n        </Paragraph>\n      </>\n    );\n  };\n\n  return (\n    <div\n      className={cx(rootClassName, `${rootClassName}--size-${size}`)}\n      role=\"group\"\n      aria-hidden=\"true\"\n      data-testid={`counter-${tag}`}\n    >\n      <div className={cx(`${rootClassName}__number-list-container`)}>\n        {numbers.map((number, index) => {\n          return (\n            <ul\n              key={index}\n              className={cx(`${rootClassName}__number-list`)}\n              style={\n                {\n                  \"--offset\": number,\n                } as React.CSSProperties\n              }\n            >\n              {digits.map((d, i) => {\n                const selected = d === number;\n\n                return (\n                  <li\n                    key={i}\n                    className={cx(`${rootClassName}__number`, {\n                      [`${rootClassName}__number--selected`]: selected,\n                    })}\n                  >\n                    {d}\n                  </li>\n                );\n              })}\n            </ul>\n          );\n        })}\n      </div>\n\n      {renderLabel()}\n    </div>\n  );\n};\n\nconst digits = [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"];\n","export function getDiffs(endtime: number) {\n  const now = new Date().getTime();\n\n  const totalSeconds = Math.max(0, endtime - now);\n\n  const _days = Math.floor(totalSeconds / inMs.day);\n  const _hours = Math.floor((totalSeconds % inMs.day) / inMs.hour);\n  const _minutes = Math.floor((totalSeconds % inMs.hour) / inMs.minute);\n  const _seconds = Math.floor((totalSeconds % inMs.minute) / inMs.second);\n\n  const days = splitDigits(_days);\n  const hours = splitDigits(_hours);\n  const minutes = splitDigits(_minutes);\n  const seconds = splitDigits(_seconds);\n\n  return {\n    seconds,\n    minutes,\n    hours,\n    days,\n  };\n}\n\nexport const inMs = {\n  second: 1000,\n  minute: 60 * 1000,\n  hour: 60 * 60 * 1000,\n  day: 24 * 60 * 60 * 1000,\n};\n\nexport function toDate(t: string | number | Date) {\n  return t instanceof Date ? t : new Date(t);\n}\n\nexport function splitDigits(value: number) {\n  const s = String(value).padStart(2, \"0\");\n  return s.split(\"\");\n}\n","import React, { type ForwardedRef, forwardRef, useEffect, useId, useMemo, useState } from \"react\";\nimport { Paragraph } from \"@purpurds/paragraph\";\nimport { VisuallyHidden } from \"@purpurds/visually-hidden\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./countdown.module.scss\";\nimport { type CountdownProps } from \"./countdown.types\";\nimport { Counter } from \"./counter\";\nimport { getDiffs, toDate } from \"./utils\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-countdown\";\n\n/**\n * Countdown component to display a countdown timer.\n * @param props - CountdownProps\n * @returns A React component that displays a countdown timer.\n */\n\nexport const Countdown = forwardRef(\n  (\n    { renderAfterEnd, renderBeforeStart, ...props }: CountdownProps,\n    ref: ForwardedRef<HTMLButtonElement>\n  ) => {\n    const nowInit = new Date();\n    const id = useId();\n\n    const {\n      size = \"lg\",\n      fullWidth = false,\n      negative = false,\n      showDays = true,\n      variant = \"primary\",\n      className,\n      counterLabels,\n      useMediaQueries = false,\n    } = props;\n\n    const [now, setNow] = useState<Date>(nowInit);\n\n    const start = useMemo(() => toDate(props.starttime), [props.starttime]);\n    const end = useMemo(() => toDate(props.endtime), [props.endtime]);\n    const { days, hours, minutes, seconds } = useMemo(() => getDiffs(end.getTime()), [now]);\n\n    useEffect(() => {\n      if (now < start || now > end) return;\n      const t = setInterval(() => setNow(new Date()), 1000);\n      return () => clearInterval(t);\n    }, [start, end, now]);\n\n    const hasNotStarted = start > now;\n    const hasEnded = end < now;\n\n    // don't render if before start or after end\n    if (hasNotStarted) return renderBeforeStart ? renderBeforeStart(props) : null;\n    if (hasEnded) return renderAfterEnd ? renderAfterEnd(props) : null;\n\n    const getCounters = () => {\n      const counterProps = { size, counterLabels };\n\n      return (\n        <>\n          {showDays && <Counter numbers={days} tag=\"days\" {...counterProps} />}\n          <Counter numbers={hours} tag=\"hours\" {...counterProps} />\n          <Counter numbers={minutes} tag=\"minutes\" {...counterProps} />\n          <Counter numbers={seconds} tag=\"seconds\" {...counterProps} />\n        </>\n      );\n    };\n\n    // Create a single announcement of the current time (only once)\n\n    const renderAnnouncer = () => {\n      const getTimeAnnouncement = () => {\n        const parts = [];\n\n        if (showDays) parts.push(`${days.join(\"\")} ${counterLabels.days}`);\n        parts.push(`${hours.join(\"\")} ${counterLabels.hours}`);\n        parts.push(`${minutes.join(\"\")} ${counterLabels.minutes}`);\n        parts.push(`${seconds.join(\"\")} ${counterLabels.seconds}`);\n\n        return parts.join(\", \");\n      };\n\n      return (\n        <VisuallyHidden\n          data-testid=\"live-region\"\n          aria-live=\"polite\"\n          aria-label={props[\"aria-label\"]}\n        >\n          {getTimeAnnouncement()}\n        </VisuallyHidden>\n      );\n    };\n\n    const counters = getCounters();\n\n    const classes = cx(\n      rootClassName,\n      `${rootClassName}--size-${size}`,\n      `${rootClassName}--variant-${variant}`,\n      {\n        [`${rootClassName}--full-width`]: fullWidth,\n        [`${rootClassName}--negative`]: negative,\n        [`${rootClassName}--show-days`]: showDays,\n        [`${rootClassName}--use-media-queries`]: useMediaQueries,\n        [`${rootClassName}--use-container-queries`]: !useMediaQueries,\n      },\n      className\n    );\n\n    return (\n      <section\n        id={id}\n        className={classes}\n        ref={ref}\n        role=\"timer\"\n        data-testid={props[\"data-testid\"]}\n      >\n        {/* Visually hidden live region that announces time only once */}\n        {renderAnnouncer()}\n        {props.label && (\n          <Paragraph className={cx(`${rootClassName}__label`)} variant=\"paragraph-100-medium\">\n            {props.label}\n          </Paragraph>\n        )}\n        <div className={cx(`${rootClassName}__counter-container`)}>{counters}</div>\n      </section>\n    );\n  }\n);\n\nCountdown.displayName = \"Countdown\";\n"],"names":["d","p","h","s","_","n","u","a","e","i","g","v","c","f","m","t","A","l","r","o","S","y","E","C","w","R","b","N","P","O","hasOwn","classNames","classes","arg","appendClass","parseValue","key","value","newClass","module","cx","styles","rootClassName","Counter","tag","size","numbers","counterLabels","renderLabel","label","abbreviatedLabel","jsxs","Fragment","Paragraph","jsx","number","index","digits","selected","getDiffs","endtime","now","totalSeconds","_days","inMs","_hours","_minutes","_seconds","days","splitDigits","hours","minutes","toDate","Countdown","forwardRef","renderAfterEnd","renderBeforeStart","props","ref","nowInit","id","useId","fullWidth","negative","showDays","variant","className","useMediaQueries","setNow","useState","start","useMemo","end","seconds","useEffect","hasNotStarted","hasEnded","getCounters","counterProps","renderAnnouncer","getTimeAnnouncement","parts","VisuallyHidden","counters"],"mappings":"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","x_google_ignoreList":[2]}

package/dist/counter.d.ts

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

package/dist/counter.d.ts.map

@@ -1 +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,sBA8DtE,CAAC"}
+{"version":3,"file":"counter.d.ts","sourceRoot":"","sources":["../src/counter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOvD,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAC9C,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,eAAO,MAAM,OAAO,GAAI,uCAAuC,YAAY,sBAgE1E,CAAC"}

package/dist/styles.css

@@ -1 +1 @@
-._purpur-countdown--size-md_ytnsp_1{--counter-height: calc(56 * var(--purpur-spacing-10));--counter-width: calc(56 * var(--purpur-spacing-10))}._purpur-countdown--size-lg_ytnsp_5{--counter-height: calc(72 * var(--purpur-spacing-10));--counter-width: 1fr}@container countdown (min-width: 600px){._purpur-countdown--size-lg_ytnsp_5._purpur-countdown--use-container-queries_ytnsp_10 ._purpur-countdown__counter-container_ytnsp_10{gap:var(--purpur-spacing-200)}}@container countdown (min-width: 320px){._purpur-countdown--size-lg_ytnsp_5._purpur-countdown--use-container-queries_ytnsp_10:not(._purpur-countdown--full-width_ytnsp_15) ._purpur-countdown__counter-container_ytnsp_10{--counter-width: calc(72 * var(--purpur-spacing-10))}}@container countdown (min-width: 600px){._purpur-countdown--size-lg_ytnsp_5._purpur-countdown--use-container-queries_ytnsp_10:not(._purpur-countdown--full-width_ytnsp_15) ._purpur-countdown__counter-container_ytnsp_10{--counter-width: calc(80 * var(--purpur-spacing-10))}}@media(min-width:350px){._purpur-countdown--size-lg_ytnsp_5._purpur-countdown--use-media-queries_ytnsp_25:not(._purpur-countdown--full-width_ytnsp_15){--counter-width: calc(72 * var(--purpur-spacing-10))}}@media(min-width:600px){._purpur-countdown--size-lg_ytnsp_5._purpur-countdown--use-media-queries_ytnsp_25:not(._purpur-countdown--full-width_ytnsp_15){--counter-width: calc(80 * var(--purpur-spacing-10))}._purpur-countdown--size-lg_ytnsp_5._purpur-countdown--use-media-queries_ytnsp_25 ._purpur-countdown__counter-container_ytnsp_10{gap:var(--purpur-spacing-200)}}._purpur-countdown_ytnsp_1{--text-color: var(--purpur-color-text-default)}._purpur-countdown--variant-primary_ytnsp_40{--bg-color: var(--purpur-color-background-primary)}._purpur-countdown--variant-secondary_ytnsp_43{--bg-color: var(--purpur-color-background-secondary)}._purpur-countdown--negative_ytnsp_46{--text-color: var(--purpur-color-text-default-negative);--bg-color: var(--purpur-color-background-interactive-read-only-negative)}._purpur-countdown--full-width_ytnsp_15{--counter-width: 1fr}._purpur-countdown_ytnsp_1{--counter-count: 3}._purpur-countdown--show-days_ytnsp_56{--counter-count: 4}._purpur-countdown_ytnsp_1{display:grid;gap:var(--purpur-spacing-150);color:var(--text-color)}._purpur-countdown--use-container-queries_ytnsp_10{container:countdown/inline-size}._purpur-countdown__counter-container_ytnsp_10{display:grid;grid:var(--counter-height)/repeat(var(--counter-count),var(--counter-width));gap:var(--purpur-spacing-100)}._purpur-countdown__label_ytnsp_72{color:inherit}._purpur-countdown-counter_19zid_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_19zid_1>._purpur-countdown-counter__number--size-lg_19zid_11{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_19zid_1>._purpur-countdown-counter__number--size-md_19zid_17{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_19zid_1>._purpur-countdown-counter__number_19zid_11{position:relative;width:100%;color:inherit;text-align:center}@media(prefers-reduced-motion:no-preference){._purpur-countdown-counter_19zid_1>._purpur-countdown-counter__number_19zid_11[data-tick]{text-align:center;animation:_tick-animation_19zid_1 .15s ease-out forwards}._purpur-countdown-counter_19zid_1>._purpur-countdown-counter__number_19zid_11[data-tick]:after{content:attr(data-tick);position:absolute;bottom:100%;inset-inline:0;color:inherit;animation:_tick-animation-pseudo_19zid_1 .25s forwards}}._purpur-countdown-counter_19zid_1>._purpur-countdown-counter__label_19zid_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}._purpur-countdown-counter_19zid_1>._purpur-countdown-counter__label--abbr_19zid_51 abbr{text-decoration:none}._purpur-countdown-counter_19zid_1>._purpur-countdown-counter__label--full_19zid_54{display:none}@container countdown (min-width: 600px){[class*=purpur-countdown--use-container-queries] ._purpur-countdown-counter_19zid_1>._purpur-countdown-counter__label--abbr_19zid_51{display:none}[class*=purpur-countdown--use-container-queries] ._purpur-countdown-counter_19zid_1>._purpur-countdown-counter__label--full_19zid_54{display:block}}@media(min-width:600px){[class*=purpur-countdown--use-media-queries] ._purpur-countdown-counter_19zid_1>._purpur-countdown-counter__label--abbr_19zid_51{display:none}[class*=purpur-countdown--use-media-queries] ._purpur-countdown-counter_19zid_1>._purpur-countdown-counter__label--full_19zid_54{display:block}}@keyframes _tick-animation_19zid_1{0%{transform:translateY(100%);color:transparent}to{transform:translateY(0);color:var(--text-color)}}@keyframes _tick-animation-pseudo_19zid_1{0%{color:var(--text-color)}to{color:transparent}}
+._purpur-countdown--size-md_ytnsp_1{--counter-height: calc(56 * var(--purpur-spacing-10));--counter-width: calc(56 * var(--purpur-spacing-10))}._purpur-countdown--size-lg_ytnsp_5{--counter-height: calc(72 * var(--purpur-spacing-10));--counter-width: 1fr}@container countdown (min-width: 600px){._purpur-countdown--size-lg_ytnsp_5._purpur-countdown--use-container-queries_ytnsp_10 ._purpur-countdown__counter-container_ytnsp_10{gap:var(--purpur-spacing-200)}}@container countdown (min-width: 320px){._purpur-countdown--size-lg_ytnsp_5._purpur-countdown--use-container-queries_ytnsp_10:not(._purpur-countdown--full-width_ytnsp_15) ._purpur-countdown__counter-container_ytnsp_10{--counter-width: calc(72 * var(--purpur-spacing-10))}}@container countdown (min-width: 600px){._purpur-countdown--size-lg_ytnsp_5._purpur-countdown--use-container-queries_ytnsp_10:not(._purpur-countdown--full-width_ytnsp_15) ._purpur-countdown__counter-container_ytnsp_10{--counter-width: calc(80 * var(--purpur-spacing-10))}}@media (min-width: 350px){._purpur-countdown--size-lg_ytnsp_5._purpur-countdown--use-media-queries_ytnsp_25:not(._purpur-countdown--full-width_ytnsp_15){--counter-width: calc(72 * var(--purpur-spacing-10))}}@media (min-width: 600px){._purpur-countdown--size-lg_ytnsp_5._purpur-countdown--use-media-queries_ytnsp_25:not(._purpur-countdown--full-width_ytnsp_15){--counter-width: calc(80 * var(--purpur-spacing-10))}._purpur-countdown--size-lg_ytnsp_5._purpur-countdown--use-media-queries_ytnsp_25 ._purpur-countdown__counter-container_ytnsp_10{gap:var(--purpur-spacing-200)}}._purpur-countdown_ytnsp_1{--text-color: var(--purpur-color-text-default)}._purpur-countdown--variant-primary_ytnsp_40{--bg-color: var(--purpur-color-background-primary)}._purpur-countdown--variant-secondary_ytnsp_43{--bg-color: var(--purpur-color-background-secondary)}._purpur-countdown--negative_ytnsp_46{--text-color: var(--purpur-color-text-default-negative);--bg-color: var(--purpur-color-background-interactive-read-only-negative)}._purpur-countdown--full-width_ytnsp_15{--counter-width: 1fr}._purpur-countdown_ytnsp_1{--counter-count: 3}._purpur-countdown--show-days_ytnsp_56{--counter-count: 4}._purpur-countdown_ytnsp_1{display:grid;gap:var(--purpur-spacing-150);color:var(--text-color)}._purpur-countdown--use-container-queries_ytnsp_10{container:countdown/inline-size}._purpur-countdown__counter-container_ytnsp_10{display:grid;grid:var(--counter-height)/repeat(var(--counter-count),var(--counter-width));gap:var(--purpur-spacing-100)}._purpur-countdown__label_ytnsp_72{color:inherit}._purpur-countdown-counter_23fbu_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)}._purpur-countdown-counter--size-lg_23fbu_10{--digit-height: calc(1.1*clamp(var(--purpur-typography-scale-400), 3cqw, var(--purpur-typography-scale-600))) }._purpur-countdown-counter--size-lg_23fbu_10 ._purpur-countdown-counter__number_23fbu_15{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_23fbu_21{--digit-height: calc(1.1*clamp(var(--purpur-typography-scale-150), 3cqw, var(--purpur-typography-scale-200))) }._purpur-countdown-counter--size-md_23fbu_21 ._purpur-countdown-counter__number_23fbu_15{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_23fbu_1{--digit-width: calc(var(--digit-height) * .7)}._purpur-countdown-counter_23fbu_1>._purpur-countdown-counter__number-list-container_23fbu_35{display:flex;height:var(--digit-height);overflow:hidden}._purpur-countdown-counter_23fbu_1>._purpur-countdown-counter__number-list-container_23fbu_35>._purpur-countdown-counter__number-list_23fbu_35{list-style:none;margin:0;padding:0;display:grid;grid:repeat(10,auto)/1fr;transform:translateY(calc(var(--digit-height) * var(--offset) * -1))}@media (prefers-reduced-motion: no-preference){._purpur-countdown-counter_23fbu_1>._purpur-countdown-counter__number-list-container_23fbu_35>._purpur-countdown-counter__number-list_23fbu_35{transition:transform .6666666667s cubic-bezier(.68,-.55,.265,1.55)}}._purpur-countdown-counter_23fbu_1>._purpur-countdown-counter__number-list-container_23fbu_35>._purpur-countdown-counter__number-list_23fbu_35>._purpur-countdown-counter__number_23fbu_15{height:var(--digit-height);width:var(--digit-width);display:grid;place-items:center}._purpur-countdown-counter_23fbu_1>._purpur-countdown-counter__label_23fbu_64{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}._purpur-countdown-counter_23fbu_1>._purpur-countdown-counter__label--abbr_23fbu_71 abbr{text-decoration:none}._purpur-countdown-counter_23fbu_1>._purpur-countdown-counter__label--full_23fbu_74{display:none}@container countdown (min-width: 600px){[class*=purpur-countdown--use-container-queries] ._purpur-countdown-counter_23fbu_1>._purpur-countdown-counter__label--abbr_23fbu_71{display:none}[class*=purpur-countdown--use-container-queries] ._purpur-countdown-counter_23fbu_1>._purpur-countdown-counter__label--full_23fbu_74{display:block}}@media (min-width: 600px){[class*=purpur-countdown--use-media-queries] ._purpur-countdown-counter_23fbu_1>._purpur-countdown-counter__label--abbr_23fbu_71{display:none}[class*=purpur-countdown--use-media-queries] ._purpur-countdown-counter_23fbu_1>._purpur-countdown-counter__label--full_23fbu_74{display:block}}

package/dist/utils.d.ts

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

package/dist/utils.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM;;;;;EAqBvC;AAED,eAAO,MAAM,IAAI;;;;;CAKhB,CAAC;AAEF,wBAAgB,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,QAE/C;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,YAGxC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/countdown",
-  "version": "8.12.2",
+  "version": "8.13.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/countdown.cjs.js",
   "types": "./dist/countdown.d.ts",
@@ -16,28 +16,27 @@
   "source": "src/countdown.tsx",
   "dependencies": {
     "classnames": "~2.5.1",
-    "@purpurds/heading": "8.12.2",
-    "@purpurds/tokens": "8.12.2",
-    "@purpurds/paragraph": "8.12.2",
-    "@purpurds/visually-hidden": "8.12.2"
+    "@purpurds/heading": "8.13.0",
+    "@purpurds/paragraph": "8.13.0",
+    "@purpurds/visually-hidden": "8.13.0",
+    "@purpurds/tokens": "8.13.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
-    "@storybook/react": "^10.0.8",
-    "@telia/react-rig": "*",
+    "@storybook/react": "10.1.11",
     "@testing-library/dom": "~10.4.1",
     "@testing-library/jest-dom": "~6.9.1",
     "@testing-library/react": "~16.3.0",
     "@types/node": "22.17",
     "@types/react-dom": "^19.2.3",
     "@types/react": "^19.2.6",
-    "eslint": "9.39.1",
+    "eslint": "9.39.2",
     "jsdom": "~27.2.0",
     "lint-staged": "16.2.6",
     "prettier": "~2.8.8",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
-    "storybook": "^10.0.8",
+    "storybook": "10.1.11",
     "typescript": "^5.9.3",
     "vite": "^7.2.2",
     "vitest": "^4.0.10",

package/src/countdown.module.scss

@@ -57,7 +57,6 @@ $root: ".purpur-countdown";
   &--variant-primary {
     --bg-color: var(--purpur-color-background-primary);
   }
-
   &--variant-secondary {
     --bg-color: var(--purpur-color-background-secondary);
   }

package/src/countdown.tsx

@@ -1,4 +1,4 @@
-import React, { type ForwardedRef, forwardRef, useId } from "react";
+import React, { type ForwardedRef, forwardRef, useEffect, useId, useMemo, useState } from "react";
 import { Paragraph } from "@purpurds/paragraph";
 import { VisuallyHidden } from "@purpurds/visually-hidden";
 import c from "classnames/bind";
@@ -6,14 +6,12 @@ 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";
+import { getDiffs, toDate } 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
@@ -25,6 +23,7 @@ export const Countdown = forwardRef(
     { renderAfterEnd, renderBeforeStart, ...props }: CountdownProps,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
+    const nowInit = new Date();
     const id = useId();
 
     const {
@@ -38,24 +37,34 @@ export const Countdown = forwardRef(
       useMediaQueries = false,
     } = props;
 
-    const start = new Date(props.starttime).getTime();
-    const end = new Date(props.endtime).getTime();
+    const [now, setNow] = useState<Date>(nowInit);
+
+    const start = useMemo(() => toDate(props.starttime), [props.starttime]);
+    const end = useMemo(() => toDate(props.endtime), [props.endtime]);
+    const { days, hours, minutes, seconds } = useMemo(() => getDiffs(end.getTime()), [now]);
 
-    const hasNotStarted = start > now.getTime();
-    const hasEnded = end < now.getTime();
+    useEffect(() => {
+      if (now < start || now > end) return;
+      const t = setInterval(() => setNow(new Date()), 1000);
+      return () => clearInterval(t);
+    }, [start, end, now]);
 
+    const hasNotStarted = start > now;
+    const hasEnded = end < now;
+
+    // don't render if before start or after end
     if (hasNotStarted) return renderBeforeStart ? renderBeforeStart(props) : null;
     if (hasEnded) return renderAfterEnd ? renderAfterEnd(props) : null;
 
     const getCounters = () => {
-      const counterProps = { size, end, counterLabels };
+      const counterProps = { size, counterLabels };
 
       return (
         <>
-          {showDays && <Counter tag="days" {...counterProps} />}
-          <Counter tag="hours" {...counterProps} />
-          <Counter tag="minutes" {...counterProps} />
-          <Counter tag="seconds" {...counterProps} />
+          {showDays && <Counter numbers={days} tag="days" {...counterProps} />}
+          <Counter numbers={hours} tag="hours" {...counterProps} />
+          <Counter numbers={minutes} tag="minutes" {...counterProps} />
+          <Counter numbers={seconds} tag="seconds" {...counterProps} />
         </>
       );
     };
@@ -64,14 +73,12 @@ export const Countdown = forwardRef(
 
     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}`);
+        if (showDays) parts.push(`${days.join("")} ${counterLabels.days}`);
+        parts.push(`${hours.join("")} ${counterLabels.hours}`);
+        parts.push(`${minutes.join("")} ${counterLabels.minutes}`);
+        parts.push(`${seconds.join("")} ${counterLabels.seconds}`);
 
         return parts.join(", ");
       };

package/src/counter.module.scss

@@ -9,44 +9,71 @@ $root: ".purpur-countdown-counter";
 
 @mixin size {
   &--size-lg {
-    @include heading.purpur-display-15();
+    --digit-height: calc(
+      1.1 * clamp(var(--purpur-typography-scale-400), 3cqw, var(--purpur-typography-scale-600))
+    );
+
+    & #{$root}__number {
+      @include heading.purpur-display-15();
+    }
   }
   &--size-md {
-    @include heading.purpur-display-5();
+    --digit-height: calc(
+      1.1 * clamp(var(--purpur-typography-scale-150), 3cqw, var(--purpur-typography-scale-200))
+    );
+    & #{$root}__number {
+      @include heading.purpur-display-5();
+    }
   }
+
+  --digit-width: calc(var(--digit-height) * 0.7);
 }
 
 #{$root} {
   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 {
-    @include size();
+  @include size();
 
-    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}__number-list-container {
+    display: flex;
+
+    height: var(--digit-height);
+    overflow: hidden;
+
+    & > #{$root}__number-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      display: grid;
+
+      grid: repeat(10, auto) / 1fr;
+
+      transform: translateY(calc(var(--digit-height) * var(--offset) * -1));
+
+      /* Respect reduced motion preferences */
+      @media (prefers-reduced-motion: no-preference) {
+        /* transition-timing-function makes the digit snap into place */
+        transition: transform calc((1s / 3) * 2) cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+
+      & > #{$root}__number {
+        height: var(--digit-height);
+        width: var(--digit-width);
+
+        display: grid;
+        place-items: center;
+
+        &--selected {
+          /* Do whatever feels right, when the time is right */
         }
       }
     }
@@ -88,23 +115,3 @@ $root: ".purpur-countdown-counter";
     }
   }
 }
-
-@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;
-  }
-}

package/src/counter.tsx

@@ -1,84 +1,85 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React from "react";
 import { Paragraph } from "@purpurds/paragraph";
 import c from "classnames/bind";
 
 import { type CounterLabels } from "./countdown.types";
 import styles from "./counter.module.scss";
-import { getDiffs, getNext, inMs } from "./utils";
 
 const cx = c.bind(styles);
 
 const rootClassName = "purpur-countdown-counter";
 
 interface CounterProps {
-  end: number;
+  numbers: string[];
   size: "md" | "lg";
   tag: "days" | "hours" | "minutes" | "seconds";
   counterLabels: CounterLabels;
 }
 
-const intervals: Map<string, ReturnType<typeof setInterval>> = new Map();
+export const Counter = ({ tag, size, numbers, counterLabels }: CounterProps) => {
+  const renderLabel = () => {
+    const label = counterLabels[tag];
+    const abbreviatedLabel = counterLabels[`${tag}Abbr`];
 
-export const Counter = ({ tag, size, end, counterLabels }: CounterProps) => {
-  const ref = useRef<HTMLHeadingElement>(null);
-  const id = `${tag}-interval`;
-
-  const [currentTime, setCurrentTime] = useState(0);
-  const [nextTime, setNextTime] = useState(0);
-  const [animationKey, setAnimationKey] = useState(0);
-
-  const checktime = useCallback(() => {
-    const diffs = getDiffs(end);
-    const next = getNext(diffs[tag], tag);
-
-    setNextTime(next);
-    setCurrentTime(diffs[tag]);
-  }, [end, tag]);
-
-  useEffect(() => {
-    checktime();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    intervals.set(id, setInterval(checktime, inMs.second));
-    return () => clearInterval(intervals.get(id)!);
-  }, [checktime, id]);
-
-  useEffect(() => {
-    setAnimationKey((prev) => prev + 1);
-  }, [currentTime]);
-
-  const counterTag = counterLabels[tag];
-  const counterTagAbbr = counterLabels[`${tag}Abbr`];
+    return (
+      <>
+        {abbreviatedLabel && (
+          <Paragraph className={cx(`${rootClassName}__label`, `${rootClassName}__label--abbr`)}>
+            <abbr title={label}>{abbreviatedLabel}</abbr>
+          </Paragraph>
+        )}
+        <Paragraph
+          className={cx(`${rootClassName}__label`, {
+            [`${rootClassName}__label--full`]: !!abbreviatedLabel,
+          })}
+        >
+          {label}
+        </Paragraph>
+      </>
+    );
+  };
 
   return (
     <div
-      className={cx(rootClassName)}
+      className={cx(rootClassName, `${rootClassName}--size-${size}`)}
       role="group"
       aria-hidden="true"
       data-testid={`counter-${tag}`}
     >
-      <Paragraph
-        className={cx(`${rootClassName}__number`, `${rootClassName}__number--size-${size}`)}
-        ref={ref}
-        data-tick={nextTime}
-        key={animationKey}
-      >
-        {currentTime}
-      </Paragraph>
-      {counterTagAbbr && (
-        <Paragraph className={cx(`${rootClassName}__label`, `${rootClassName}__label--abbr`)}>
-          <abbr title={counterTag}>{counterTagAbbr}</abbr>
-        </Paragraph>
-      )}
-      <Paragraph
-        className={cx(`${rootClassName}__label`, {
-          [`${rootClassName}__label--full`]: !!counterTagAbbr,
+      <div className={cx(`${rootClassName}__number-list-container`)}>
+        {numbers.map((number, index) => {
+          return (
+            <ul
+              key={index}
+              className={cx(`${rootClassName}__number-list`)}
+              style={
+                {
+                  "--offset": number,
+                } as React.CSSProperties
+              }
+            >
+              {digits.map((d, i) => {
+                const selected = d === number;
+
+                return (
+                  <li
+                    key={i}
+                    className={cx(`${rootClassName}__number`, {
+                      [`${rootClassName}__number--selected`]: selected,
+                    })}
+                  >
+                    {d}
+                  </li>
+                );
+              })}
+            </ul>
+          );
         })}
-      >
-        {counterTag}
-      </Paragraph>
+      </div>
+
+      {renderLabel()}
     </div>
   );
 };
+
+const digits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];