@sproutsocial/seeds-react-duration 1.0.31 → 1.0.32

package/dist/duration.css

@@ -0,0 +1,17 @@
+/**
+ * Seeds Duration component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support (consistent with other Seeds
+ * components). font-variant-numeric has no design token, so this rule uses none.
+ *
+ * Usage:
+ *   <span class="seeds-duration">1m 30s</span>
+ */
+
+@layer components {
+  .seeds-duration {
+    font-variant-numeric: tabular-nums;
+  }
+}

package/dist/esm/index.js

@@ -41,6 +41,9 @@ var EM_DASH = "\u2014";
 // src/Duration.tsx
 import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
 
+// src/DurationHybrid.tsx
+import React2 from "react";
+
 // src/styles.ts
 import styled from "styled-components";
 import Text from "@sproutsocial/seeds-react-text";
@@ -48,6 +51,44 @@ var Container = styled(Text)`
   font-variant-numeric: tabular-nums;
 `;
 
+// src/DurationTailwind.tsx
+import React from "react";
+import Text2 from "@sproutsocial/seeds-react-text";
+import { jsx } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var DurationTailwind = React.forwardRef(
+  ({ className, children, ...rest }, ref) => /* @__PURE__ */ jsx(Text2, { className: cn("seeds-duration", className), ...rest, ref, children })
+);
+DurationTailwind.displayName = "DurationTailwind";
+
+// src/DurationHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DurationHybrid = React2.forwardRef(
+  (props, ref) => {
+    if (hasStyledProps(props)) {
+      return /* @__PURE__ */ jsx2(Container, { ref, ...props });
+    }
+    return /* @__PURE__ */ jsx2(DurationTailwind, { ref, ...props });
+  }
+);
+DurationHybrid.displayName = "DurationHybrid";
+
 // src/utils.ts
 var getLowestUnit = (displayUnits) => [...ORDERED_UNITS].reverse().find((unit) => displayUnits[unit]) || UNITS.milliseconds;
 var splitMillisecondsIntoUnits = (milliseconds, displayUnits) => {
@@ -93,7 +134,7 @@ var getDurationMaxDisplayUnits = ({
 };
 
 // src/Duration.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, 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 = {
@@ -137,16 +178,17 @@ var getDuration = ({
     invalidMillisecondsLabel,
     locale = DEFAULT_LOCALE,
     milliseconds = DEFAULT_MILLISECONDS,
-    qa
+    qa,
+    ...rest
   } = 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 })
+        /* @__PURE__ */ jsx3(VisuallyHidden, { children: invalidMillisecondsLabel })
       ) : null,
-      /* @__PURE__ */ jsx(Container, { "aria-hidden": true, ...qa, children: EM_DASH })
+      /* @__PURE__ */ jsx3(DurationHybrid, { ...rest, "aria-hidden": true, ...qa, children: EM_DASH })
     ] });
   }
   const validatedDisplayUnits = Object.keys(displayUnits).length === 0 ? DEFAULT_DISPLAY_UNITS : displayUnits;
@@ -155,7 +197,7 @@ var getDuration = ({
     display,
     validatedDisplayUnits
   )(milliseconds);
-  return isReturnTypeString ? fullText : /* @__PURE__ */ jsx(Container, { ...qa, children: fullText });
+  return isReturnTypeString ? fullText : /* @__PURE__ */ jsx3(DurationHybrid, { ...rest, ...qa, children: fullText });
 };
 var formatDuration = (props) => {
   return getDuration({ returnType: "string", props });

package/dist/esm/index.js.map

@@ -1 +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,gBAAQ;","names":["locale","unitDisplay"]}
+{"version":3,"sources":["../../src/Duration.tsx","../../src/constants.ts","../../src/DurationHybrid.tsx","../../src/styles.ts","../../src/DurationTailwind.tsx","../../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 { DurationHybrid } from \"./DurationHybrid\";\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    ...rest\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        <DurationHybrid {...rest} aria-hidden {...qa}>\n          {EM_DASH}\n        </DurationHybrid>\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    <DurationHybrid {...rest} {...qa}>\n      {fullText}\n    </DurationHybrid>\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","/**\n * Hybrid Duration Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport React from \"react\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport { Container } from \"./styles\"; // Styled-components version (named export)\nimport { DurationTailwind } from \"./DurationTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const DurationHybrid = React.forwardRef<HTMLSpanElement, TypeTextProps>(\n  (props, ref) => {\n    // styled-system props (e.g. color, fontSize) must render through the\n    // styled-components Container so those styles apply. Everything else uses the\n    // Tailwind path — a styled(Duration) extension still works there because\n    // styled() forwards its generated className onto the rendered element.\n    if (hasStyledProps(props)) {\n      return <Container ref={ref} {...props} />;\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return <DurationTailwind ref={ref} {...props} />;\n  }\n);\n\nDurationHybrid.displayName = \"DurationHybrid\";\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","/**\n * Tailwind CSS implementation of Duration component\n * Uses the Seeds duration CSS class from duration.css\n */\n\nimport React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const DurationTailwind = React.forwardRef<HTMLSpanElement, TypeTextProps>(\n  ({ className, children, ...rest }, ref) => (\n    <Text className={cn(\"seeds-duration\", className)} {...rest} ref={ref}>\n      {children}\n    </Text>\n  )\n);\n\nDurationTailwind.displayName = \"DurationTailwind\";\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":"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","names":["React","Text","jsx","React","jsx","locale","unitDisplay"]}

package/dist/index.js

@@ -38,7 +38,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Duration.tsx
-var React = require("react");
+var React3 = require("react");
 var import_lru_memoize = __toESM(require("lru-memoize"));
 
 // src/constants.ts
@@ -80,6 +80,9 @@ var EM_DASH = "\u2014";
 // src/Duration.tsx
 var import_seeds_react_visually_hidden = require("@sproutsocial/seeds-react-visually-hidden");
 
+// src/DurationHybrid.tsx
+var import_react2 = __toESM(require("react"));
+
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
 var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
@@ -87,6 +90,44 @@ var Container = (0, import_styled_components.default)(import_seeds_react_text.de
   font-variant-numeric: tabular-nums;
 `;
 
+// src/DurationTailwind.tsx
+var import_react = __toESM(require("react"));
+var import_seeds_react_text2 = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var DurationTailwind = import_react.default.forwardRef(
+  ({ className, children, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text2.default, { className: cn("seeds-duration", className), ...rest, ref, children })
+);
+DurationTailwind.displayName = "DurationTailwind";
+
+// src/DurationHybrid.tsx
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DurationHybrid = import_react2.default.forwardRef(
+  (props, ref) => {
+    if ((0, import_seeds_react_system_props.hasStyledProps)(props)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Container, { ref, ...props });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DurationTailwind, { ref, ...props });
+  }
+);
+DurationHybrid.displayName = "DurationHybrid";
+
 // src/utils.ts
 var getLowestUnit = (displayUnits) => [...ORDERED_UNITS].reverse().find((unit) => displayUnits[unit]) || UNITS.milliseconds;
 var splitMillisecondsIntoUnits = (milliseconds, displayUnits) => {
@@ -132,7 +173,7 @@ var getDurationMaxDisplayUnits = ({
 };
 
 // src/Duration.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime3 = 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 = {
@@ -176,16 +217,17 @@ var getDuration = ({
     invalidMillisecondsLabel,
     locale = DEFAULT_LOCALE,
     milliseconds = DEFAULT_MILLISECONDS,
-    qa
+    qa,
+    ...rest
   } = props;
   const isReturnTypeString = returnType === "string";
   if (!isValidNumber(milliseconds)) {
-    return isReturnTypeString ? EM_DASH : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    return isReturnTypeString ? EM_DASH : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.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 })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_visually_hidden.VisuallyHidden, { children: invalidMillisecondsLabel })
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { "aria-hidden": true, ...qa, children: EM_DASH })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DurationHybrid, { ...rest, "aria-hidden": true, ...qa, children: EM_DASH })
     ] });
   }
   const validatedDisplayUnits = Object.keys(displayUnits).length === 0 ? DEFAULT_DISPLAY_UNITS : displayUnits;
@@ -194,7 +236,7 @@ var getDuration = ({
     display,
     validatedDisplayUnits
   )(milliseconds);
-  return isReturnTypeString ? fullText : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { ...qa, children: fullText });
+  return isReturnTypeString ? fullText : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DurationHybrid, { ...rest, ...qa, children: fullText });
 };
 var formatDuration = (props) => {
   return getDuration({ returnType: "string", props });

package/dist/index.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/index.ts","../src/Duration.tsx","../src/constants.ts","../src/DurationHybrid.tsx","../src/styles.ts","../src/DurationTailwind.tsx","../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 { DurationHybrid } from \"./DurationHybrid\";\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    ...rest\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        <DurationHybrid {...rest} aria-hidden {...qa}>\n          {EM_DASH}\n        </DurationHybrid>\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    <DurationHybrid {...rest} {...qa}>\n      {fullText}\n    </DurationHybrid>\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","/**\n * Hybrid Duration Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport React from \"react\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport { Container } from \"./styles\"; // Styled-components version (named export)\nimport { DurationTailwind } from \"./DurationTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const DurationHybrid = React.forwardRef<HTMLSpanElement, TypeTextProps>(\n  (props, ref) => {\n    // styled-system props (e.g. color, fontSize) must render through the\n    // styled-components Container so those styles apply. Everything else uses the\n    // Tailwind path — a styled(Duration) extension still works there because\n    // styled() forwards its generated className onto the rendered element.\n    if (hasStyledProps(props)) {\n      return <Container ref={ref} {...props} />;\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return <DurationTailwind ref={ref} {...props} />;\n  }\n);\n\nDurationHybrid.displayName = \"DurationHybrid\";\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","/**\n * Tailwind CSS implementation of Duration component\n * Uses the Seeds duration CSS class from duration.css\n */\n\nimport React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const DurationTailwind = React.forwardRef<HTMLSpanElement, TypeTextProps>(\n  ({ className, children, ...rest }, ref) => (\n    <Text className={cn(\"seeds-duration\", className)} {...rest} ref={ref}>\n      {children}\n    </Text>\n  )\n);\n\nDurationTailwind.displayName = \"DurationTailwind\";\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":["React","import_react","styled","Text","import_seeds_react_text","React","Text","import_jsx_runtime","React","import_jsx_runtime","locale","unitDisplay","memoize"]}

package/package.json

@@ -1,15 +1,26 @@
 {
   "name": "@sproutsocial/seeds-react-duration",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "description": "Seeds React Duration",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/duration.css": "./dist/duration.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/duration.css dist/duration.css",
+    "build:debug": "tsup --dts --metafile && cp src/duration.css dist/duration.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",

package/.eslintignore

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

package/.eslintrc.js

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

package/.turbo/turbo-build.log

@@ -1,21 +0,0 @@
-yarn run v1.22.22
-$ tsup --dts
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.5.0
-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.44 KB
-CJS dist/index.js.map 12.26 KB
-CJS ⚡️ Build success in 18ms
-ESM dist/esm/index.js     5.43 KB
-ESM dist/esm/index.js.map 12.18 KB
-ESM ⚡️ Build success in 18ms
-DTS Build start
-DTS ⚡️ Build success in 4694ms
-DTS dist/index.d.ts  1.70 KB
-DTS dist/index.d.mts 1.70 KB
-Done in 6.49s.