@sproutsocial/seeds-react-duration 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-duration/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     7.43 KB
+CJS dist/index.js.map 12.26 KB
+CJS ⚡️ Build success in 117ms
+ESM dist/esm/index.js     5.42 KB
+ESM dist/esm/index.js.map 12.18 KB
+ESM ⚡️ Build success in 117ms
+DTS Build start
+DTS ⚡️ Build success in 19437ms
+DTS dist/index.d.ts  1.70 KB
+DTS dist/index.d.mts 1.70 KB
+Done in 26.38s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-duration
+
+## 1.0.0
+
+### Major Changes
+
+- b812940: Migrated Duration from Racine to seeds-react-duration

package/dist/esm/index.js

@@ -0,0 +1,176 @@
+// src/Duration.tsx
+import "react";
+import memoize from "lru-memoize";
+
+// src/constants.ts
+var COMPARE_OBJECTS = true;
+var MEMO_CACHE_SIZE = 10;
+var UNITS = {
+  days: "days",
+  hours: "hours",
+  minutes: "minutes",
+  seconds: "seconds",
+  milliseconds: "milliseconds"
+};
+var MILLISECONDS_IN = {
+  [UNITS.days]: 1 * 1e3 * 60 * 60 * 24,
+  [UNITS.hours]: 1 * 1e3 * 60 * 60,
+  [UNITS.minutes]: 1 * 1e3 * 60,
+  [UNITS.seconds]: 1 * 1e3,
+  [UNITS.milliseconds]: 1
+};
+var ORDERED_UNITS = [
+  UNITS.days,
+  UNITS.hours,
+  UNITS.minutes,
+  UNITS.seconds,
+  UNITS.milliseconds
+];
+var DEFAULT_DISPLAY = "narrow";
+var DEFAULT_DISPLAY_UNITS = {
+  [UNITS.days]: true,
+  [UNITS.hours]: true,
+  [UNITS.minutes]: true,
+  [UNITS.seconds]: true,
+  [UNITS.milliseconds]: false
+};
+var DEFAULT_LOCALE = "en-US";
+var DEFAULT_MILLISECONDS = null;
+var EM_DASH = "\u2014";
+
+// src/Duration.tsx
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+
+// src/styles.ts
+import styled from "styled-components";
+import Text from "@sproutsocial/seeds-react-text";
+var Container = styled(Text)`
+  font-variant-numeric: tabular-nums;
+`;
+
+// src/utils.ts
+var getLowestUnit = (displayUnits) => [...ORDERED_UNITS].reverse().find((unit) => displayUnits[unit]) || UNITS.milliseconds;
+var splitMillisecondsIntoUnits = (milliseconds, displayUnits) => {
+  const lowestUnit = getLowestUnit(displayUnits);
+  const remainder = milliseconds % MILLISECONDS_IN[lowestUnit];
+  if (2 * remainder >= MILLISECONDS_IN[lowestUnit]) {
+    milliseconds += MILLISECONDS_IN[lowestUnit] - remainder;
+  }
+  const units = {};
+  ORDERED_UNITS.forEach((unit) => {
+    if (displayUnits[unit]) {
+      units[unit] = Math.floor(milliseconds / MILLISECONDS_IN[unit]);
+      milliseconds -= units[unit] * MILLISECONDS_IN[unit];
+    }
+  });
+  return units;
+};
+var isValidNumber = (value) => typeof value === "number" && isFinite(value);
+var getDurationMaxDisplayUnits = ({
+  milliseconds,
+  maxDisplayUnits = ORDERED_UNITS.length
+}) => {
+  const displayUnits = {};
+  if (!isValidNumber(milliseconds)) {
+    return displayUnits;
+  }
+  for (const unit of ORDERED_UNITS) {
+    if (Object.keys(displayUnits).length >= maxDisplayUnits) {
+      break;
+    }
+    const millisecondsByUnit = splitMillisecondsIntoUnits(milliseconds, {
+      days: true,
+      hours: true,
+      minutes: true,
+      seconds: true,
+      milliseconds: true
+    });
+    if (milliseconds > MILLISECONDS_IN[unit] && millisecondsByUnit[unit] > 0) {
+      displayUnits[unit] = true;
+    }
+  }
+  return displayUnits;
+};
+
+// src/Duration.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var _createDurationFormatter = (locale, unitDisplay, displayUnits) => {
+  const timeUnitFormatter = (locale2, unit, unitDisplay2) => Intl.NumberFormat(locale2, { style: "unit", unit, unitDisplay: unitDisplay2 }).format;
+  const formatterByUnit = {
+    [UNITS.days]: timeUnitFormatter(locale, "day", unitDisplay),
+    [UNITS.hours]: timeUnitFormatter(locale, "hour", unitDisplay),
+    [UNITS.minutes]: timeUnitFormatter(locale, "minute", unitDisplay),
+    [UNITS.seconds]: timeUnitFormatter(locale, "second", unitDisplay),
+    [UNITS.milliseconds]: timeUnitFormatter(locale, "millisecond", unitDisplay)
+  };
+  const formatList = new Intl.ListFormat(locale, {
+    style: "narrow",
+    type: "unit"
+  });
+  return (value) => {
+    const lowestUnit = getLowestUnit(displayUnits);
+    if (value <= 0) {
+      return formatterByUnit[lowestUnit](0);
+    }
+    const millisecondsByUnit = splitMillisecondsIntoUnits(value, displayUnits);
+    const list = [];
+    ORDERED_UNITS.forEach((unit) => {
+      if (unit in millisecondsByUnit) {
+        const unitValue = millisecondsByUnit[unit];
+        if (unitValue !== 0 || unitValue === 0 && unit === lowestUnit && list.length === 0) {
+          list.push(formatterByUnit[unit](millisecondsByUnit[unit]));
+        }
+      }
+    });
+    return formatList.format(list);
+  };
+};
+var memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
+var createDurationFormatter = memoizer(_createDurationFormatter);
+var getDuration = ({
+  returnType,
+  props
+}) => {
+  const {
+    display = DEFAULT_DISPLAY,
+    displayUnits = DEFAULT_DISPLAY_UNITS,
+    invalidMillisecondsLabel,
+    locale = DEFAULT_LOCALE,
+    milliseconds = DEFAULT_MILLISECONDS,
+    qa
+  } = props;
+  const isReturnTypeString = returnType === "string";
+  if (!isValidNumber(milliseconds)) {
+    return isReturnTypeString ? EM_DASH : /* @__PURE__ */ jsxs(Fragment, { children: [
+      invalidMillisecondsLabel ? (
+        // Give screen readers something useful to read off + hide the em dash
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: invalidMillisecondsLabel })
+      ) : null,
+      /* @__PURE__ */ jsx(Container, { "aria-hidden": true, ...qa, children: EM_DASH })
+    ] });
+  }
+  const validatedDisplayUnits = Object.keys(displayUnits).length === 0 ? DEFAULT_DISPLAY_UNITS : displayUnits;
+  const fullText = createDurationFormatter(
+    locale,
+    display,
+    validatedDisplayUnits
+  )(milliseconds);
+  return isReturnTypeString ? fullText : /* @__PURE__ */ jsx(Container, { ...qa, children: fullText });
+};
+var formatDuration = (props) => {
+  return getDuration({ returnType: "string", props });
+};
+var Duration = (props) => {
+  return getDuration({ returnType: "component", props });
+};
+var Duration_default = Duration;
+
+// src/index.ts
+var src_default = Duration_default;
+export {
+  Duration_default as Duration,
+  src_default as default,
+  formatDuration,
+  getDurationMaxDisplayUnits
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Duration.tsx","../../src/constants.ts","../../src/styles.ts","../../src/utils.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\n// @ts-expect-error lru-memoize is not typed\nimport memoize from \"lru-memoize\";\nimport { EM_DASH } from \"./constants\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\n\nimport {\n  COMPARE_OBJECTS,\n  DEFAULT_DISPLAY,\n  DEFAULT_DISPLAY_UNITS,\n  DEFAULT_LOCALE,\n  DEFAULT_MILLISECONDS,\n  MEMO_CACHE_SIZE,\n  ORDERED_UNITS,\n  UNITS,\n} from \"./constants\";\nimport { Container } from \"./styles\";\nimport type {\n  TypeDurationProps,\n  TypeDurationLocale,\n  TypeDurationDisplay,\n  TypeDurationDisplayUnits,\n} from \"./DurationTypes\";\nimport {\n  isValidNumber,\n  getLowestUnit,\n  splitMillisecondsIntoUnits,\n} from \"./utils\";\n\nconst _createDurationFormatter = (\n  locale: TypeDurationLocale,\n  unitDisplay: TypeDurationDisplay,\n  displayUnits: TypeDurationDisplayUnits\n) => {\n  const timeUnitFormatter = (\n    locale: TypeDurationProps[\"locale\"],\n    unit: string,\n    unitDisplay: TypeDurationProps[\"display\"]\n  ) => Intl.NumberFormat(locale, { style: \"unit\", unit, unitDisplay }).format;\n\n  const formatterByUnit = {\n    [UNITS.days]: timeUnitFormatter(locale, \"day\", unitDisplay),\n    [UNITS.hours]: timeUnitFormatter(locale, \"hour\", unitDisplay),\n    [UNITS.minutes]: timeUnitFormatter(locale, \"minute\", unitDisplay),\n    [UNITS.seconds]: timeUnitFormatter(locale, \"second\", unitDisplay),\n    [UNITS.milliseconds]: timeUnitFormatter(locale, \"millisecond\", unitDisplay),\n  };\n\n  const formatList = new Intl.ListFormat(locale, {\n    style: \"narrow\",\n    type: \"unit\",\n  });\n\n  return (value: number) => {\n    const lowestUnit = getLowestUnit(displayUnits);\n\n    // if the value is zero or negative, we just want to return 0 for the lowest unit (ex \"0 minutes\")\n    if (value <= 0) {\n      // @ts-ignore TS error later\n      return formatterByUnit[lowestUnit](0);\n    }\n\n    const millisecondsByUnit = splitMillisecondsIntoUnits(value, displayUnits);\n    const list: string[] = [];\n\n    ORDERED_UNITS.forEach((unit) => {\n      if (unit in millisecondsByUnit) {\n        // @ts-ignore TS error later\n        const unitValue = millisecondsByUnit[unit];\n\n        // we want to add to the list if one of two conditions are met:\n        // 1) the unit has a value greater than 0 OR\n        // 2) the unit has value 0 AND the unit is the lowest unit AND the list is already empty\n        if (\n          unitValue !== 0 ||\n          (unitValue === 0 && unit === lowestUnit && list.length === 0)\n        ) {\n          // @ts-ignore TS error later\n          list.push(formatterByUnit[unit](millisecondsByUnit[unit]));\n        }\n      }\n    });\n\n    return formatList.format(list);\n  };\n};\n\n// Memoize to reduce the energy of creating new instances of Intl.NumberFormat\nconst memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);\nconst createDurationFormatter = memoizer(_createDurationFormatter);\n\nconst getDuration = ({\n  returnType,\n  props,\n}: {\n  returnType: \"string\" | \"component\";\n  props: TypeDurationProps;\n}): string | React.ReactNode => {\n  const {\n    display = DEFAULT_DISPLAY,\n    displayUnits = DEFAULT_DISPLAY_UNITS,\n    invalidMillisecondsLabel,\n    locale = DEFAULT_LOCALE,\n    milliseconds = DEFAULT_MILLISECONDS,\n    qa,\n  } = props;\n  const isReturnTypeString = returnType === \"string\";\n\n  if (!isValidNumber(milliseconds)) {\n    return isReturnTypeString ? (\n      EM_DASH\n    ) : (\n      <>\n        {invalidMillisecondsLabel ? (\n          // Give screen readers something useful to read off + hide the em dash\n          <VisuallyHidden>{invalidMillisecondsLabel}</VisuallyHidden>\n        ) : null}\n        <Container aria-hidden {...qa}>\n          {EM_DASH}\n        </Container>\n      </>\n    );\n  }\n\n  const validatedDisplayUnits =\n    Object.keys(displayUnits).length === 0\n      ? DEFAULT_DISPLAY_UNITS\n      : displayUnits;\n\n  const fullText = createDurationFormatter(\n    locale,\n    display,\n    validatedDisplayUnits\n  )(milliseconds);\n\n  return isReturnTypeString ? (\n    fullText\n  ) : (\n    <Container {...qa}>{fullText}</Container>\n  );\n};\n\nexport const formatDuration = (props: TypeDurationProps): string => {\n  return getDuration({ returnType: \"string\", props }) as string;\n};\n\nconst Duration = (props: TypeDurationProps) => {\n  return getDuration({ returnType: \"component\", props });\n};\n\nexport default Duration;\n","export const COMPARE_OBJECTS = true;\nexport const MEMO_CACHE_SIZE = 10;\n\nexport const UNITS = {\n  days: \"days\",\n  hours: \"hours\",\n  minutes: \"minutes\",\n  seconds: \"seconds\",\n  milliseconds: \"milliseconds\",\n};\n\nexport const MILLISECONDS_IN = {\n  [UNITS.days]: 1 * 1000 * 60 * 60 * 24,\n  [UNITS.hours]: 1 * 1000 * 60 * 60,\n  [UNITS.minutes]: 1 * 1000 * 60,\n  [UNITS.seconds]: 1 * 1000,\n  [UNITS.milliseconds]: 1,\n};\n\nexport const ORDERED_UNITS = [\n  UNITS.days,\n  UNITS.hours,\n  UNITS.minutes,\n  UNITS.seconds,\n  UNITS.milliseconds,\n];\n\n// Duration props defaults\nexport const DEFAULT_DISPLAY = \"narrow\";\nexport const DEFAULT_DISPLAY_UNITS = {\n  [UNITS.days]: true,\n  [UNITS.hours]: true,\n  [UNITS.minutes]: true,\n  [UNITS.seconds]: true,\n  [UNITS.milliseconds]: false,\n};\n\nexport const DEFAULT_LOCALE = \"en-US\";\nexport const DEFAULT_MILLISECONDS = null;\n\nexport const EM_DASH = \"—\"; // shift + option + hyphen on a mac keyboard\n","import styled from \"styled-components\";\nimport Text from \"@sproutsocial/seeds-react-text\";\n\nexport const Container = styled(Text)`\n  font-variant-numeric: tabular-nums;\n`;\n","import type {\n  TypeDurationDisplayUnits,\n  TypeDurationMilliseconds,\n} from \"./DurationTypes\";\nimport { MILLISECONDS_IN, ORDERED_UNITS, UNITS } from \"./constants\";\n\nexport const getLowestUnit = (displayUnits: TypeDurationDisplayUnits) =>\n  [...ORDERED_UNITS]\n    .reverse()\n    .find((unit) => displayUnits[unit as keyof TypeDurationDisplayUnits]) ||\n  UNITS.milliseconds;\n\nexport const splitMillisecondsIntoUnits = (\n  milliseconds: number,\n  displayUnits: TypeDurationDisplayUnits\n): {\n  days?: number;\n  hours?: number;\n  minutes?: number;\n  seconds?: number;\n  milliseconds?: number;\n} => {\n  const lowestUnit = getLowestUnit(displayUnits);\n\n  // @ts-ignore TS error later\n  const remainder = milliseconds % MILLISECONDS_IN[lowestUnit];\n  // @ts-ignore TS error later\n  if (2 * remainder >= MILLISECONDS_IN[lowestUnit]) {\n    // if the remainder is large, add enough seconds to increse the lowest unit\n    // @ts-ignore TS error later\n    milliseconds += MILLISECONDS_IN[lowestUnit] - remainder;\n  }\n\n  const units = {};\n\n  ORDERED_UNITS.forEach((unit) => {\n    // @ts-ignore TS error later\n    if (displayUnits[unit]) {\n      // @ts-ignore TS error later\n      units[unit] = Math.floor(milliseconds / MILLISECONDS_IN[unit]);\n      // @ts-ignore TS error later\n      milliseconds -= units[unit] * MILLISECONDS_IN[unit];\n    }\n  });\n\n  return units;\n};\n\nexport const isValidNumber = (value: unknown): boolean =>\n  typeof value === \"number\" && isFinite(value);\n\nexport interface TypeGetDurationMaxDisplayUnitsProps {\n  milliseconds: TypeDurationMilliseconds;\n  maxDisplayUnits: number;\n}\n\nexport const getDurationMaxDisplayUnits = ({\n  milliseconds,\n  maxDisplayUnits = ORDERED_UNITS.length,\n}: TypeGetDurationMaxDisplayUnitsProps): TypeDurationDisplayUnits => {\n  const displayUnits = {};\n\n  if (!isValidNumber(milliseconds)) {\n    return displayUnits;\n  }\n\n  for (const unit of ORDERED_UNITS) {\n    if (Object.keys(displayUnits).length >= maxDisplayUnits) {\n      break;\n    }\n\n    // @ts-expect-error - stupid typescript isn't smart enough to check the isValidNumber check above ¯\\_(ツ)_/¯\n    const millisecondsByUnit = splitMillisecondsIntoUnits(milliseconds, {\n      days: true,\n      hours: true,\n      minutes: true,\n      seconds: true,\n      milliseconds: true,\n    });\n\n    // @ts-expect-error - stupid typescript isn't smart enough to check the isValidNumber check above ¯\\_(ツ)_/¯\n    if (milliseconds > MILLISECONDS_IN[unit] && millisecondsByUnit[unit] > 0) {\n      // @ts-ignore TS error later\n      displayUnits[unit] = true;\n    }\n  }\n\n  return displayUnits;\n};\n","import Duration, { formatDuration } from \"./Duration\";\nimport {\n  getDurationMaxDisplayUnits,\n  type TypeGetDurationMaxDisplayUnitsProps,\n} from \"./utils\";\n\nexport default Duration;\nexport { Duration };\nexport { formatDuration };\nexport { getDurationMaxDisplayUnits };\nexport type { TypeGetDurationMaxDisplayUnitsProps };\nexport * from \"./DurationTypes\";\n"],"mappings":";AAAA,OAAuB;AAEvB,OAAO,aAAa;;;ACFb,IAAM,kBAAkB;AACxB,IAAM,kBAAkB;AAExB,IAAM,QAAQ;AAAA,EACnB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,cAAc;AAChB;AAEO,IAAM,kBAAkB;AAAA,EAC7B,CAAC,MAAM,IAAI,GAAG,IAAI,MAAO,KAAK,KAAK;AAAA,EACnC,CAAC,MAAM,KAAK,GAAG,IAAI,MAAO,KAAK;AAAA,EAC/B,CAAC,MAAM,OAAO,GAAG,IAAI,MAAO;AAAA,EAC5B,CAAC,MAAM,OAAO,GAAG,IAAI;AAAA,EACrB,CAAC,MAAM,YAAY,GAAG;AACxB;AAEO,IAAM,gBAAgB;AAAA,EAC3B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAGO,IAAM,kBAAkB;AACxB,IAAM,wBAAwB;AAAA,EACnC,CAAC,MAAM,IAAI,GAAG;AAAA,EACd,CAAC,MAAM,KAAK,GAAG;AAAA,EACf,CAAC,MAAM,OAAO,GAAG;AAAA,EACjB,CAAC,MAAM,OAAO,GAAG;AAAA,EACjB,CAAC,MAAM,YAAY,GAAG;AACxB;AAEO,IAAM,iBAAiB;AACvB,IAAM,uBAAuB;AAE7B,IAAM,UAAU;;;ADpCvB,SAAS,sBAAsB;;;AEJ/B,OAAO,YAAY;AACnB,OAAO,UAAU;AAEV,IAAM,YAAY,OAAO,IAAI;AAAA;AAAA;;;ACG7B,IAAM,gBAAgB,CAAC,iBAC5B,CAAC,GAAG,aAAa,EACd,QAAQ,EACR,KAAK,CAAC,SAAS,aAAa,IAAsC,CAAC,KACtE,MAAM;AAED,IAAM,6BAA6B,CACxC,cACA,iBAOG;AACH,QAAM,aAAa,cAAc,YAAY;AAG7C,QAAM,YAAY,eAAe,gBAAgB,UAAU;AAE3D,MAAI,IAAI,aAAa,gBAAgB,UAAU,GAAG;AAGhD,oBAAgB,gBAAgB,UAAU,IAAI;AAAA,EAChD;AAEA,QAAM,QAAQ,CAAC;AAEf,gBAAc,QAAQ,CAAC,SAAS;AAE9B,QAAI,aAAa,IAAI,GAAG;AAEtB,YAAM,IAAI,IAAI,KAAK,MAAM,eAAe,gBAAgB,IAAI,CAAC;AAE7D,sBAAgB,MAAM,IAAI,IAAI,gBAAgB,IAAI;AAAA,IACpD;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEO,IAAM,gBAAgB,CAAC,UAC5B,OAAO,UAAU,YAAY,SAAS,KAAK;AAOtC,IAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA,kBAAkB,cAAc;AAClC,MAAqE;AACnE,QAAM,eAAe,CAAC;AAEtB,MAAI,CAAC,cAAc,YAAY,GAAG;AAChC,WAAO;AAAA,EACT;AAEA,aAAW,QAAQ,eAAe;AAChC,QAAI,OAAO,KAAK,YAAY,EAAE,UAAU,iBAAiB;AACvD;AAAA,IACF;AAGA,UAAM,qBAAqB,2BAA2B,cAAc;AAAA,MAClE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,cAAc;AAAA,IAChB,CAAC;AAGD,QAAI,eAAe,gBAAgB,IAAI,KAAK,mBAAmB,IAAI,IAAI,GAAG;AAExE,mBAAa,IAAI,IAAI;AAAA,IACvB;AAAA,EACF;AAEA,SAAO;AACT;;;AHwBM,mBAGI,KAHJ;AAnFN,IAAM,2BAA2B,CAC/B,QACA,aACA,iBACG;AACH,QAAM,oBAAoB,CACxBA,SACA,MACAC,iBACG,KAAK,aAAaD,SAAQ,EAAE,OAAO,QAAQ,MAAM,aAAAC,aAAY,CAAC,EAAE;AAErE,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAM,IAAI,GAAG,kBAAkB,QAAQ,OAAO,WAAW;AAAA,IAC1D,CAAC,MAAM,KAAK,GAAG,kBAAkB,QAAQ,QAAQ,WAAW;AAAA,IAC5D,CAAC,MAAM,OAAO,GAAG,kBAAkB,QAAQ,UAAU,WAAW;AAAA,IAChE,CAAC,MAAM,OAAO,GAAG,kBAAkB,QAAQ,UAAU,WAAW;AAAA,IAChE,CAAC,MAAM,YAAY,GAAG,kBAAkB,QAAQ,eAAe,WAAW;AAAA,EAC5E;AAEA,QAAM,aAAa,IAAI,KAAK,WAAW,QAAQ;AAAA,IAC7C,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AAED,SAAO,CAAC,UAAkB;AACxB,UAAM,aAAa,cAAc,YAAY;AAG7C,QAAI,SAAS,GAAG;AAEd,aAAO,gBAAgB,UAAU,EAAE,CAAC;AAAA,IACtC;AAEA,UAAM,qBAAqB,2BAA2B,OAAO,YAAY;AACzE,UAAM,OAAiB,CAAC;AAExB,kBAAc,QAAQ,CAAC,SAAS;AAC9B,UAAI,QAAQ,oBAAoB;AAE9B,cAAM,YAAY,mBAAmB,IAAI;AAKzC,YACE,cAAc,KACb,cAAc,KAAK,SAAS,cAAc,KAAK,WAAW,GAC3D;AAEA,eAAK,KAAK,gBAAgB,IAAI,EAAE,mBAAmB,IAAI,CAAC,CAAC;AAAA,QAC3D;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO,WAAW,OAAO,IAAI;AAAA,EAC/B;AACF;AAGA,IAAM,WAAW,QAAQ,iBAAiB,eAAe;AACzD,IAAM,0BAA0B,SAAS,wBAAwB;AAEjE,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AACF,MAGgC;AAC9B,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,eAAe;AAAA,IACf;AAAA,IACA,SAAS;AAAA,IACT,eAAe;AAAA,IACf;AAAA,EACF,IAAI;AACJ,QAAM,qBAAqB,eAAe;AAE1C,MAAI,CAAC,cAAc,YAAY,GAAG;AAChC,WAAO,qBACL,UAEA,iCACG;AAAA;AAAA;AAAA,QAEC,oBAAC,kBAAgB,oCAAyB;AAAA,UACxC;AAAA,MACJ,oBAAC,aAAU,eAAW,MAAE,GAAG,IACxB,mBACH;AAAA,OACF;AAAA,EAEJ;AAEA,QAAM,wBACJ,OAAO,KAAK,YAAY,EAAE,WAAW,IACjC,wBACA;AAEN,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,YAAY;AAEd,SAAO,qBACL,WAEA,oBAAC,aAAW,GAAG,IAAK,oBAAS;AAEjC;AAEO,IAAM,iBAAiB,CAAC,UAAqC;AAClE,SAAO,YAAY,EAAE,YAAY,UAAU,MAAM,CAAC;AACpD;AAEA,IAAM,WAAW,CAAC,UAA6B;AAC7C,SAAO,YAAY,EAAE,YAAY,aAAa,MAAM,CAAC;AACvD;AAEA,IAAO,mBAAQ;;;AIhJf,IAAO,cAAQ;","names":["locale","unitDisplay"]}

package/dist/index.d.mts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { TypeTextProps } from '@sproutsocial/seeds-react-text';
+
+type TypeDurationMilliseconds = number | null;
+type TypeDurationLocale = Intl.LocalesArgument;
+type TypeDurationDisplay = "long" | "narrow";
+interface TypeDurationDisplayUnits {
+    days?: boolean;
+    hours?: boolean;
+    minutes?: boolean;
+    seconds?: boolean;
+    milliseconds?: boolean;
+}
+interface TypeDurationProps extends Omit<TypeTextProps, "children"> {
+    /** The milliseconds to be formatted */
+    milliseconds: TypeDurationMilliseconds;
+    /** Locale to format. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument */
+    locale?: TypeDurationLocale;
+    /** The style of the formatted duration */
+    display?: TypeDurationDisplay;
+    /** The units of the duration to render */
+    displayUnits?: TypeDurationDisplayUnits;
+    /** Text to be read off by screen readers for invalid values (i.e., any value rendered as '—' (em dash)) */
+    invalidMillisecondsLabel?: string;
+    qa?: object;
+}
+
+declare const formatDuration: (props: TypeDurationProps) => string;
+declare const Duration: (props: TypeDurationProps) => React.ReactNode;
+
+interface TypeGetDurationMaxDisplayUnitsProps {
+    milliseconds: TypeDurationMilliseconds;
+    maxDisplayUnits: number;
+}
+declare const getDurationMaxDisplayUnits: ({ milliseconds, maxDisplayUnits, }: TypeGetDurationMaxDisplayUnitsProps) => TypeDurationDisplayUnits;
+
+export { Duration, type TypeDurationDisplay, type TypeDurationDisplayUnits, type TypeDurationLocale, type TypeDurationMilliseconds, type TypeDurationProps, type TypeGetDurationMaxDisplayUnitsProps, Duration as default, formatDuration, getDurationMaxDisplayUnits };

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { TypeTextProps } from '@sproutsocial/seeds-react-text';
+
+type TypeDurationMilliseconds = number | null;
+type TypeDurationLocale = Intl.LocalesArgument;
+type TypeDurationDisplay = "long" | "narrow";
+interface TypeDurationDisplayUnits {
+    days?: boolean;
+    hours?: boolean;
+    minutes?: boolean;
+    seconds?: boolean;
+    milliseconds?: boolean;
+}
+interface TypeDurationProps extends Omit<TypeTextProps, "children"> {
+    /** The milliseconds to be formatted */
+    milliseconds: TypeDurationMilliseconds;
+    /** Locale to format. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument */
+    locale?: TypeDurationLocale;
+    /** The style of the formatted duration */
+    display?: TypeDurationDisplay;
+    /** The units of the duration to render */
+    displayUnits?: TypeDurationDisplayUnits;
+    /** Text to be read off by screen readers for invalid values (i.e., any value rendered as '—' (em dash)) */
+    invalidMillisecondsLabel?: string;
+    qa?: object;
+}
+
+declare const formatDuration: (props: TypeDurationProps) => string;
+declare const Duration: (props: TypeDurationProps) => React.ReactNode;
+
+interface TypeGetDurationMaxDisplayUnitsProps {
+    milliseconds: TypeDurationMilliseconds;
+    maxDisplayUnits: number;
+}
+declare const getDurationMaxDisplayUnits: ({ milliseconds, maxDisplayUnits, }: TypeGetDurationMaxDisplayUnitsProps) => TypeDurationDisplayUnits;
+
+export { Duration, type TypeDurationDisplay, type TypeDurationDisplayUnits, type TypeDurationLocale, type TypeDurationMilliseconds, type TypeDurationProps, type TypeGetDurationMaxDisplayUnitsProps, Duration as default, formatDuration, getDurationMaxDisplayUnits };

package/dist/index.js

@@ -0,0 +1,215 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Duration: () => Duration_default,
+  default: () => src_default,
+  formatDuration: () => formatDuration,
+  getDurationMaxDisplayUnits: () => getDurationMaxDisplayUnits
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Duration.tsx
+var React = require("react");
+var import_lru_memoize = __toESM(require("lru-memoize"));
+
+// src/constants.ts
+var COMPARE_OBJECTS = true;
+var MEMO_CACHE_SIZE = 10;
+var UNITS = {
+  days: "days",
+  hours: "hours",
+  minutes: "minutes",
+  seconds: "seconds",
+  milliseconds: "milliseconds"
+};
+var MILLISECONDS_IN = {
+  [UNITS.days]: 1 * 1e3 * 60 * 60 * 24,
+  [UNITS.hours]: 1 * 1e3 * 60 * 60,
+  [UNITS.minutes]: 1 * 1e3 * 60,
+  [UNITS.seconds]: 1 * 1e3,
+  [UNITS.milliseconds]: 1
+};
+var ORDERED_UNITS = [
+  UNITS.days,
+  UNITS.hours,
+  UNITS.minutes,
+  UNITS.seconds,
+  UNITS.milliseconds
+];
+var DEFAULT_DISPLAY = "narrow";
+var DEFAULT_DISPLAY_UNITS = {
+  [UNITS.days]: true,
+  [UNITS.hours]: true,
+  [UNITS.minutes]: true,
+  [UNITS.seconds]: true,
+  [UNITS.milliseconds]: false
+};
+var DEFAULT_LOCALE = "en-US";
+var DEFAULT_MILLISECONDS = null;
+var EM_DASH = "\u2014";
+
+// src/Duration.tsx
+var import_seeds_react_visually_hidden = require("@sproutsocial/seeds-react-visually-hidden");
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var Container = (0, import_styled_components.default)(import_seeds_react_text.default)`
+  font-variant-numeric: tabular-nums;
+`;
+
+// src/utils.ts
+var getLowestUnit = (displayUnits) => [...ORDERED_UNITS].reverse().find((unit) => displayUnits[unit]) || UNITS.milliseconds;
+var splitMillisecondsIntoUnits = (milliseconds, displayUnits) => {
+  const lowestUnit = getLowestUnit(displayUnits);
+  const remainder = milliseconds % MILLISECONDS_IN[lowestUnit];
+  if (2 * remainder >= MILLISECONDS_IN[lowestUnit]) {
+    milliseconds += MILLISECONDS_IN[lowestUnit] - remainder;
+  }
+  const units = {};
+  ORDERED_UNITS.forEach((unit) => {
+    if (displayUnits[unit]) {
+      units[unit] = Math.floor(milliseconds / MILLISECONDS_IN[unit]);
+      milliseconds -= units[unit] * MILLISECONDS_IN[unit];
+    }
+  });
+  return units;
+};
+var isValidNumber = (value) => typeof value === "number" && isFinite(value);
+var getDurationMaxDisplayUnits = ({
+  milliseconds,
+  maxDisplayUnits = ORDERED_UNITS.length
+}) => {
+  const displayUnits = {};
+  if (!isValidNumber(milliseconds)) {
+    return displayUnits;
+  }
+  for (const unit of ORDERED_UNITS) {
+    if (Object.keys(displayUnits).length >= maxDisplayUnits) {
+      break;
+    }
+    const millisecondsByUnit = splitMillisecondsIntoUnits(milliseconds, {
+      days: true,
+      hours: true,
+      minutes: true,
+      seconds: true,
+      milliseconds: true
+    });
+    if (milliseconds > MILLISECONDS_IN[unit] && millisecondsByUnit[unit] > 0) {
+      displayUnits[unit] = true;
+    }
+  }
+  return displayUnits;
+};
+
+// src/Duration.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var _createDurationFormatter = (locale, unitDisplay, displayUnits) => {
+  const timeUnitFormatter = (locale2, unit, unitDisplay2) => Intl.NumberFormat(locale2, { style: "unit", unit, unitDisplay: unitDisplay2 }).format;
+  const formatterByUnit = {
+    [UNITS.days]: timeUnitFormatter(locale, "day", unitDisplay),
+    [UNITS.hours]: timeUnitFormatter(locale, "hour", unitDisplay),
+    [UNITS.minutes]: timeUnitFormatter(locale, "minute", unitDisplay),
+    [UNITS.seconds]: timeUnitFormatter(locale, "second", unitDisplay),
+    [UNITS.milliseconds]: timeUnitFormatter(locale, "millisecond", unitDisplay)
+  };
+  const formatList = new Intl.ListFormat(locale, {
+    style: "narrow",
+    type: "unit"
+  });
+  return (value) => {
+    const lowestUnit = getLowestUnit(displayUnits);
+    if (value <= 0) {
+      return formatterByUnit[lowestUnit](0);
+    }
+    const millisecondsByUnit = splitMillisecondsIntoUnits(value, displayUnits);
+    const list = [];
+    ORDERED_UNITS.forEach((unit) => {
+      if (unit in millisecondsByUnit) {
+        const unitValue = millisecondsByUnit[unit];
+        if (unitValue !== 0 || unitValue === 0 && unit === lowestUnit && list.length === 0) {
+          list.push(formatterByUnit[unit](millisecondsByUnit[unit]));
+        }
+      }
+    });
+    return formatList.format(list);
+  };
+};
+var memoizer = (0, import_lru_memoize.default)(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
+var createDurationFormatter = memoizer(_createDurationFormatter);
+var getDuration = ({
+  returnType,
+  props
+}) => {
+  const {
+    display = DEFAULT_DISPLAY,
+    displayUnits = DEFAULT_DISPLAY_UNITS,
+    invalidMillisecondsLabel,
+    locale = DEFAULT_LOCALE,
+    milliseconds = DEFAULT_MILLISECONDS,
+    qa
+  } = props;
+  const isReturnTypeString = returnType === "string";
+  if (!isValidNumber(milliseconds)) {
+    return isReturnTypeString ? EM_DASH : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      invalidMillisecondsLabel ? (
+        // Give screen readers something useful to read off + hide the em dash
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_visually_hidden.VisuallyHidden, { children: invalidMillisecondsLabel })
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { "aria-hidden": true, ...qa, children: EM_DASH })
+    ] });
+  }
+  const validatedDisplayUnits = Object.keys(displayUnits).length === 0 ? DEFAULT_DISPLAY_UNITS : displayUnits;
+  const fullText = createDurationFormatter(
+    locale,
+    display,
+    validatedDisplayUnits
+  )(milliseconds);
+  return isReturnTypeString ? fullText : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { ...qa, children: fullText });
+};
+var formatDuration = (props) => {
+  return getDuration({ returnType: "string", props });
+};
+var Duration = (props) => {
+  return getDuration({ returnType: "component", props });
+};
+var Duration_default = Duration;
+
+// src/index.ts
+var src_default = Duration_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Duration,
+  formatDuration,
+  getDurationMaxDisplayUnits
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Duration.tsx","../src/constants.ts","../src/styles.ts","../src/utils.ts"],"sourcesContent":["import Duration, { formatDuration } from \"./Duration\";\nimport {\n  getDurationMaxDisplayUnits,\n  type TypeGetDurationMaxDisplayUnitsProps,\n} from \"./utils\";\n\nexport default Duration;\nexport { Duration };\nexport { formatDuration };\nexport { getDurationMaxDisplayUnits };\nexport type { TypeGetDurationMaxDisplayUnitsProps };\nexport * from \"./DurationTypes\";\n","import * as React from \"react\";\n// @ts-expect-error lru-memoize is not typed\nimport memoize from \"lru-memoize\";\nimport { EM_DASH } from \"./constants\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\n\nimport {\n  COMPARE_OBJECTS,\n  DEFAULT_DISPLAY,\n  DEFAULT_DISPLAY_UNITS,\n  DEFAULT_LOCALE,\n  DEFAULT_MILLISECONDS,\n  MEMO_CACHE_SIZE,\n  ORDERED_UNITS,\n  UNITS,\n} from \"./constants\";\nimport { Container } from \"./styles\";\nimport type {\n  TypeDurationProps,\n  TypeDurationLocale,\n  TypeDurationDisplay,\n  TypeDurationDisplayUnits,\n} from \"./DurationTypes\";\nimport {\n  isValidNumber,\n  getLowestUnit,\n  splitMillisecondsIntoUnits,\n} from \"./utils\";\n\nconst _createDurationFormatter = (\n  locale: TypeDurationLocale,\n  unitDisplay: TypeDurationDisplay,\n  displayUnits: TypeDurationDisplayUnits\n) => {\n  const timeUnitFormatter = (\n    locale: TypeDurationProps[\"locale\"],\n    unit: string,\n    unitDisplay: TypeDurationProps[\"display\"]\n  ) => Intl.NumberFormat(locale, { style: \"unit\", unit, unitDisplay }).format;\n\n  const formatterByUnit = {\n    [UNITS.days]: timeUnitFormatter(locale, \"day\", unitDisplay),\n    [UNITS.hours]: timeUnitFormatter(locale, \"hour\", unitDisplay),\n    [UNITS.minutes]: timeUnitFormatter(locale, \"minute\", unitDisplay),\n    [UNITS.seconds]: timeUnitFormatter(locale, \"second\", unitDisplay),\n    [UNITS.milliseconds]: timeUnitFormatter(locale, \"millisecond\", unitDisplay),\n  };\n\n  const formatList = new Intl.ListFormat(locale, {\n    style: \"narrow\",\n    type: \"unit\",\n  });\n\n  return (value: number) => {\n    const lowestUnit = getLowestUnit(displayUnits);\n\n    // if the value is zero or negative, we just want to return 0 for the lowest unit (ex \"0 minutes\")\n    if (value <= 0) {\n      // @ts-ignore TS error later\n      return formatterByUnit[lowestUnit](0);\n    }\n\n    const millisecondsByUnit = splitMillisecondsIntoUnits(value, displayUnits);\n    const list: string[] = [];\n\n    ORDERED_UNITS.forEach((unit) => {\n      if (unit in millisecondsByUnit) {\n        // @ts-ignore TS error later\n        const unitValue = millisecondsByUnit[unit];\n\n        // we want to add to the list if one of two conditions are met:\n        // 1) the unit has a value greater than 0 OR\n        // 2) the unit has value 0 AND the unit is the lowest unit AND the list is already empty\n        if (\n          unitValue !== 0 ||\n          (unitValue === 0 && unit === lowestUnit && list.length === 0)\n        ) {\n          // @ts-ignore TS error later\n          list.push(formatterByUnit[unit](millisecondsByUnit[unit]));\n        }\n      }\n    });\n\n    return formatList.format(list);\n  };\n};\n\n// Memoize to reduce the energy of creating new instances of Intl.NumberFormat\nconst memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);\nconst createDurationFormatter = memoizer(_createDurationFormatter);\n\nconst getDuration = ({\n  returnType,\n  props,\n}: {\n  returnType: \"string\" | \"component\";\n  props: TypeDurationProps;\n}): string | React.ReactNode => {\n  const {\n    display = DEFAULT_DISPLAY,\n    displayUnits = DEFAULT_DISPLAY_UNITS,\n    invalidMillisecondsLabel,\n    locale = DEFAULT_LOCALE,\n    milliseconds = DEFAULT_MILLISECONDS,\n    qa,\n  } = props;\n  const isReturnTypeString = returnType === \"string\";\n\n  if (!isValidNumber(milliseconds)) {\n    return isReturnTypeString ? (\n      EM_DASH\n    ) : (\n      <>\n        {invalidMillisecondsLabel ? (\n          // Give screen readers something useful to read off + hide the em dash\n          <VisuallyHidden>{invalidMillisecondsLabel}</VisuallyHidden>\n        ) : null}\n        <Container aria-hidden {...qa}>\n          {EM_DASH}\n        </Container>\n      </>\n    );\n  }\n\n  const validatedDisplayUnits =\n    Object.keys(displayUnits).length === 0\n      ? DEFAULT_DISPLAY_UNITS\n      : displayUnits;\n\n  const fullText = createDurationFormatter(\n    locale,\n    display,\n    validatedDisplayUnits\n  )(milliseconds);\n\n  return isReturnTypeString ? (\n    fullText\n  ) : (\n    <Container {...qa}>{fullText}</Container>\n  );\n};\n\nexport const formatDuration = (props: TypeDurationProps): string => {\n  return getDuration({ returnType: \"string\", props }) as string;\n};\n\nconst Duration = (props: TypeDurationProps) => {\n  return getDuration({ returnType: \"component\", props });\n};\n\nexport default Duration;\n","export const COMPARE_OBJECTS = true;\nexport const MEMO_CACHE_SIZE = 10;\n\nexport const UNITS = {\n  days: \"days\",\n  hours: \"hours\",\n  minutes: \"minutes\",\n  seconds: \"seconds\",\n  milliseconds: \"milliseconds\",\n};\n\nexport const MILLISECONDS_IN = {\n  [UNITS.days]: 1 * 1000 * 60 * 60 * 24,\n  [UNITS.hours]: 1 * 1000 * 60 * 60,\n  [UNITS.minutes]: 1 * 1000 * 60,\n  [UNITS.seconds]: 1 * 1000,\n  [UNITS.milliseconds]: 1,\n};\n\nexport const ORDERED_UNITS = [\n  UNITS.days,\n  UNITS.hours,\n  UNITS.minutes,\n  UNITS.seconds,\n  UNITS.milliseconds,\n];\n\n// Duration props defaults\nexport const DEFAULT_DISPLAY = \"narrow\";\nexport const DEFAULT_DISPLAY_UNITS = {\n  [UNITS.days]: true,\n  [UNITS.hours]: true,\n  [UNITS.minutes]: true,\n  [UNITS.seconds]: true,\n  [UNITS.milliseconds]: false,\n};\n\nexport const DEFAULT_LOCALE = \"en-US\";\nexport const DEFAULT_MILLISECONDS = null;\n\nexport const EM_DASH = \"—\"; // shift + option + hyphen on a mac keyboard\n","import styled from \"styled-components\";\nimport Text from \"@sproutsocial/seeds-react-text\";\n\nexport const Container = styled(Text)`\n  font-variant-numeric: tabular-nums;\n`;\n","import type {\n  TypeDurationDisplayUnits,\n  TypeDurationMilliseconds,\n} from \"./DurationTypes\";\nimport { MILLISECONDS_IN, ORDERED_UNITS, UNITS } from \"./constants\";\n\nexport const getLowestUnit = (displayUnits: TypeDurationDisplayUnits) =>\n  [...ORDERED_UNITS]\n    .reverse()\n    .find((unit) => displayUnits[unit as keyof TypeDurationDisplayUnits]) ||\n  UNITS.milliseconds;\n\nexport const splitMillisecondsIntoUnits = (\n  milliseconds: number,\n  displayUnits: TypeDurationDisplayUnits\n): {\n  days?: number;\n  hours?: number;\n  minutes?: number;\n  seconds?: number;\n  milliseconds?: number;\n} => {\n  const lowestUnit = getLowestUnit(displayUnits);\n\n  // @ts-ignore TS error later\n  const remainder = milliseconds % MILLISECONDS_IN[lowestUnit];\n  // @ts-ignore TS error later\n  if (2 * remainder >= MILLISECONDS_IN[lowestUnit]) {\n    // if the remainder is large, add enough seconds to increse the lowest unit\n    // @ts-ignore TS error later\n    milliseconds += MILLISECONDS_IN[lowestUnit] - remainder;\n  }\n\n  const units = {};\n\n  ORDERED_UNITS.forEach((unit) => {\n    // @ts-ignore TS error later\n    if (displayUnits[unit]) {\n      // @ts-ignore TS error later\n      units[unit] = Math.floor(milliseconds / MILLISECONDS_IN[unit]);\n      // @ts-ignore TS error later\n      milliseconds -= units[unit] * MILLISECONDS_IN[unit];\n    }\n  });\n\n  return units;\n};\n\nexport const isValidNumber = (value: unknown): boolean =>\n  typeof value === \"number\" && isFinite(value);\n\nexport interface TypeGetDurationMaxDisplayUnitsProps {\n  milliseconds: TypeDurationMilliseconds;\n  maxDisplayUnits: number;\n}\n\nexport const getDurationMaxDisplayUnits = ({\n  milliseconds,\n  maxDisplayUnits = ORDERED_UNITS.length,\n}: TypeGetDurationMaxDisplayUnitsProps): TypeDurationDisplayUnits => {\n  const displayUnits = {};\n\n  if (!isValidNumber(milliseconds)) {\n    return displayUnits;\n  }\n\n  for (const unit of ORDERED_UNITS) {\n    if (Object.keys(displayUnits).length >= maxDisplayUnits) {\n      break;\n    }\n\n    // @ts-expect-error - stupid typescript isn't smart enough to check the isValidNumber check above ¯\\_(ツ)_/¯\n    const millisecondsByUnit = splitMillisecondsIntoUnits(milliseconds, {\n      days: true,\n      hours: true,\n      minutes: true,\n      seconds: true,\n      milliseconds: true,\n    });\n\n    // @ts-expect-error - stupid typescript isn't smart enough to check the isValidNumber check above ¯\\_(ツ)_/¯\n    if (milliseconds > MILLISECONDS_IN[unit] && millisecondsByUnit[unit] > 0) {\n      // @ts-ignore TS error later\n      displayUnits[unit] = true;\n    }\n  }\n\n  return displayUnits;\n};\n"],"mappings":"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","names":["styled","Text","locale","unitDisplay","memoize"]}

package/jest.config.js

@@ -0,0 +1,13 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-duration",
+  testPathIgnorePatterns: [
+    ...baseConfig.testPathIgnorePatterns,
+    "testDuration.tsx",
+  ],
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@sproutsocial/seeds-react-duration",
+  "version": "1.0.0",
+  "description": "Seeds React Duration",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^*",
+    "@sproutsocial/seeds-react-system-props": "^*",
+    "@sproutsocial/seeds-react-visually-hidden": "*",
+    "@sproutsocial/seeds-react-text": "*",
+    "lru-memoize": "~1.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}