@liveblocks/react-ui 3.5.3 → 3.5.4

package/dist/primitives/Duration.cjs

@@ -1,195 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var react = require('react');
-var intl = require('../utils/intl.cjs');
-var useInterval = require('../utils/use-interval.cjs');
-var useRerender = require('../utils/use-rerender.cjs');
-
-
-const RENDER_INTERVAL = 0.5 * 1e3;
-const DURATION_NAME = "Duration";
-function getDurationParts(duration) {
-  let remaining = Math.max(duration, 0);
-  const milliseconds = remaining % 1e3;
-  remaining = Math.floor(remaining / 1e3);
-  const seconds = remaining % 60;
-  remaining = Math.floor(remaining / 60);
-  const minutes = remaining % 60;
-  remaining = Math.floor(remaining / 60);
-  const hours = remaining % 24;
-  remaining = Math.floor(remaining / 24);
-  const days = remaining % 7;
-  const weeks = Math.floor(remaining / 7);
-  return { weeks, days, hours, minutes, seconds, milliseconds };
-}
-const durationPartsToNumberFormatOptions = {
-  weeks: "week",
-  days: "day",
-  hours: "hour",
-  minutes: "minute",
-  seconds: "second",
-  milliseconds: "millisecond"
-};
-function formatShortDuration(duration, locale) {
-  let resolvedLocale;
-  if (locale) {
-    resolvedLocale = locale;
-  } else {
-    const formatter = intl.numberFormat();
-    resolvedLocale = formatter.resolvedOptions().locale;
-  }
-  const parts = getDurationParts(duration);
-  const formattedParts = [];
-  for (const [unit, value] of Object.entries(parts)) {
-    if (value === 0 || unit === "milliseconds") {
-      continue;
-    }
-    const formatter = intl.numberFormat(resolvedLocale, {
-      style: "unit",
-      unit: durationPartsToNumberFormatOptions[unit],
-      unitDisplay: "narrow"
-    });
-    formattedParts.push(formatter.format(value));
-  }
-  if (!formattedParts.length) {
-    formattedParts.push(
-      intl.numberFormat(resolvedLocale, {
-        style: "unit",
-        unit: "second",
-        unitDisplay: "narrow"
-      }).format(0)
-    );
-  }
-  return formattedParts.join(" ");
-}
-function formatVerboseDuration(duration, locale) {
-  let resolvedLocale;
-  if (locale) {
-    resolvedLocale = locale;
-  } else {
-    const formatter = intl.numberFormat();
-    resolvedLocale = formatter.resolvedOptions().locale;
-  }
-  const parts = getDurationParts(duration);
-  const formattedParts = [];
-  for (const [unit, value] of Object.entries(parts)) {
-    if (value === 0 || unit === "milliseconds") {
-      continue;
-    }
-    const formatter = intl.numberFormat(resolvedLocale, {
-      style: "unit",
-      unit: durationPartsToNumberFormatOptions[unit],
-      unitDisplay: "long"
-    });
-    formattedParts.push(formatter.format(value));
-  }
-  if (!formattedParts.length) {
-    formattedParts.push(
-      intl.numberFormat(resolvedLocale, {
-        style: "unit",
-        unit: "second",
-        unitDisplay: "long"
-      }).format(0)
-    );
-  }
-  return formattedParts.join(" ");
-}
-function formatIso8601Duration(duration) {
-  const normalizedDuration = Math.max(duration, 0);
-  if (normalizedDuration === 0) {
-    return "PT0S";
-  }
-  const { weeks, days, hours, minutes, seconds, milliseconds } = getDurationParts(normalizedDuration);
-  let isoDuration = "P";
-  if (weeks > 0) {
-    isoDuration += `${weeks}W`;
-  }
-  if (days > 0) {
-    isoDuration += `${days}D`;
-  }
-  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {
-    isoDuration += "T";
-    if (hours > 0) {
-      isoDuration += `${hours}H`;
-    }
-    if (minutes > 0) {
-      isoDuration += `${minutes}M`;
-    }
-    if (seconds > 0 || milliseconds > 0) {
-      if (milliseconds > 0) {
-        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, "0").replace(/0+$/, "")}S`;
-      } else {
-        isoDuration += `${seconds}S`;
-      }
-    }
-  }
-  return isoDuration;
-}
-function getDateTime(date) {
-  if (date instanceof Date) {
-    return date.getTime();
-  }
-  return new Date(date).getTime();
-}
-function getDuration(from, to) {
-  return getDateTime(to) - getDateTime(from);
-}
-const Duration = react.forwardRef(
-  ({
-    duration,
-    from,
-    to,
-    locale,
-    dateTime,
-    title: renderTitle = formatVerboseDuration,
-    children: renderChildren = formatShortDuration,
-    interval = RENDER_INTERVAL,
-    asChild,
-    ...props
-  }, forwardedRef) => {
-    const Component = asChild ? reactSlot.Slot : "time";
-    const [rerender, key] = useRerender.useRerender();
-    const resolvedDuration = react.useMemo(() => {
-      if (duration !== void 0) {
-        return duration;
-      }
-      if (from !== void 0) {
-        return getDuration(from, to ?? Date.now());
-      }
-      return 0;
-    }, [duration, from, to, key]);
-    const normalizedDuration = react.useMemo(
-      () => formatIso8601Duration(resolvedDuration),
-      [resolvedDuration]
-    );
-    const title = react.useMemo(
-      () => typeof renderTitle === "function" ? renderTitle(resolvedDuration, locale) : renderTitle,
-      [renderTitle, resolvedDuration, locale]
-    );
-    const children = react.useMemo(
-      () => typeof renderChildren === "function" ? renderChildren(resolvedDuration, locale) : renderChildren,
-      [renderChildren, resolvedDuration, locale]
-    );
-    useInterval.useInterval(
-      rerender,
-      from !== void 0 && to === void 0 ? interval : false
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-      ...props,
-      ref: forwardedRef,
-      dateTime: dateTime ?? normalizedDuration,
-      title,
-      children
-    });
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  Duration.displayName = DURATION_NAME;
-}
-
-exports.Duration = Duration;
-exports.formatIso8601Duration = formatIso8601Duration;
-//# sourceMappingURL=Duration.cjs.map

package/dist/primitives/Duration.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Duration.cjs","sources":["../../src/primitives/Duration.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef, type ReactNode, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { numberFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst RENDER_INTERVAL = 0.5 * 1000; // 0.5 second\n\nconst DURATION_NAME = \"Duration\";\n\nexport type DurationProps = Omit<\n  ComponentPropsWithSlot<\"time\">,\n  \"children\" | \"title\"\n> &\n  Relax<\n    | {\n        /**\n         * The duration in milliseconds.\n         * If provided, `from` and `to` will be ignored.\n         */\n        duration: number;\n      }\n    | {\n        /**\n         * The date at which the duration starts.\n         * If provided, `duration` will be ignored.\n         * If provided without `to` it means that the duration is in progress,\n         * and the component will re-render at an interval, customizable with\n         * the `interval` prop.\n         */\n        from: Date | string | number;\n\n        /**\n         * The date at which the duration ends.\n         * If `from` is provided without `to`, `Date.now()` will be used.\n         */\n        to?: Date | string | number;\n      }\n  > & {\n    /**\n     * A function to format the displayed duration.\n     */\n    children?: (duration: number, locale?: string) => ReactNode;\n\n    /**\n     * The `title` attribute's value or a function to format it.\n     */\n    title?: string | ((duration: number, locale?: string) => string);\n\n    /**\n     * The interval in milliseconds at which the component will re-render if\n     * `from` is provided without `to`, meaning that the duration is in progress.\n     * Can be set to `false` to disable re-rendering.\n     */\n    interval?: number | false;\n\n    /**\n     * The locale used when formatting the duration.\n     */\n    locale?: string;\n  };\n\ninterface DurationParts {\n  weeks: number;\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  milliseconds: number;\n}\n\nfunction getDurationParts(duration: number): DurationParts {\n  let remaining = Math.max(duration, 0);\n\n  const milliseconds = remaining % 1000;\n  remaining = Math.floor(remaining / 1000);\n\n  const seconds = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const minutes = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const hours = remaining % 24;\n  remaining = Math.floor(remaining / 24);\n\n  const days = remaining % 7;\n  const weeks = Math.floor(remaining / 7);\n\n  return { weeks, days, hours, minutes, seconds, milliseconds };\n}\n\nconst durationPartsToNumberFormatOptions: Record<\n  keyof DurationParts,\n  Intl.NumberFormatOptions[\"unit\"]\n> = {\n  weeks: \"week\",\n  days: \"day\",\n  hours: \"hour\",\n  minutes: \"minute\",\n  seconds: \"second\",\n  milliseconds: \"millisecond\",\n};\n\n/**\n * Formats a duration in a short format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatShortDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"narrow\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"narrow\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration in a longer format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatVerboseDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"long\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"long\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration as ISO 8601.\n * TODO: Use `Temporal.Duration` when it's better supported.\n */\nexport function formatIso8601Duration(duration: number) {\n  const normalizedDuration = Math.max(duration, 0);\n\n  if (normalizedDuration === 0) {\n    return \"PT0S\";\n  }\n\n  const { weeks, days, hours, minutes, seconds, milliseconds } =\n    getDurationParts(normalizedDuration);\n\n  let isoDuration = \"P\";\n\n  // 1. Weeks\n  if (weeks > 0) {\n    isoDuration += `${weeks}W`;\n  }\n\n  // 2. Days\n  if (days > 0) {\n    isoDuration += `${days}D`;\n  }\n\n  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {\n    isoDuration += \"T\";\n\n    // 3. Hours\n    if (hours > 0) {\n      isoDuration += `${hours}H`;\n    }\n\n    // 4. Minutes\n    if (minutes > 0) {\n      isoDuration += `${minutes}M`;\n    }\n\n    // 5. Seconds and milliseconds\n    if (seconds > 0 || milliseconds > 0) {\n      if (milliseconds > 0) {\n        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, \"0\").replace(/0+$/, \"\")}S`;\n      } else {\n        isoDuration += `${seconds}S`;\n      }\n    }\n  }\n\n  return isoDuration;\n}\n\n/**\n * Converts a Date or Date-like value to a timestamp in milliseconds.\n */\nfunction getDateTime(date: Date | string | number) {\n  if (date instanceof Date) {\n    return date.getTime();\n  }\n\n  return new Date(date).getTime();\n}\n\n/**\n * Get a duration between two Date or Date-like values.\n */\nfunction getDuration(from: Date | string | number, to: Date | string | number) {\n  return getDateTime(to) - getDateTime(from);\n}\n\n/**\n * Displays a formatted duration, and automatically re-renders to if the\n * duration is in progress.\n *\n * @example\n * <Duration duration={3 * 60 * 1000} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />\n */\nexport const Duration = forwardRef<HTMLTimeElement, DurationProps>(\n  (\n    {\n      duration,\n      from,\n      to,\n      locale,\n      dateTime,\n      title: renderTitle = formatVerboseDuration,\n      children: renderChildren = formatShortDuration,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const resolvedDuration = useMemo(() => {\n      if (duration !== undefined) {\n        return duration;\n      }\n\n      if (from !== undefined) {\n        return getDuration(from, to ?? Date.now());\n      }\n\n      return 0;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [duration, from, to, key]);\n    const normalizedDuration = useMemo(\n      () => formatIso8601Duration(resolvedDuration),\n      [resolvedDuration]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(resolvedDuration, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, resolvedDuration, locale]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(resolvedDuration, locale)\n          : renderChildren,\n\n      [renderChildren, resolvedDuration, locale]\n    );\n\n    // Only re-render if the duration is in progress.\n    useInterval(\n      rerender,\n      from !== undefined && to === undefined ? interval : false\n    );\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDuration}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Duration.displayName = DURATION_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAWA;AAEA;AA+DA;AACE;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACF;AAEA;AAGI;AACK;AACD;AACC;AACE;AACA;AAEX;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMO;AACL;AAEA;AACE;AAAO;AAGT;AAGA;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAGpB;AACE;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAIpB;AACE;AACE;AAAuF;AAEvF;AAAkB;AACpB;AACF;AAGF;AACF;AAKA;AACE;AACE;AAAoB;AAGtB;AACF;AAKA;AACE;AACF;AAeO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACqB;AACM;AAChB;AACX;AACG;AAIL;AACA;AACA;AACE;AACE;AAAO;AAGT;AACE;AAAyC;AAG3C;AAAO;AAGT;AAA2B;AACmB;AAC3B;AAEnB;AAAc;AAIN;AAEgC;AAExC;AAAiB;AAIT;AAEmC;AAI3C;AAAA;AACE;AACoD;AAGtD;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;;"}

package/dist/primitives/Duration.js

@@ -1,192 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, useMemo } from 'react';
-import { numberFormat } from '../utils/intl.js';
-import { useInterval } from '../utils/use-interval.js';
-import { useRerender } from '../utils/use-rerender.js';
-
-
-const RENDER_INTERVAL = 0.5 * 1e3;
-const DURATION_NAME = "Duration";
-function getDurationParts(duration) {
-  let remaining = Math.max(duration, 0);
-  const milliseconds = remaining % 1e3;
-  remaining = Math.floor(remaining / 1e3);
-  const seconds = remaining % 60;
-  remaining = Math.floor(remaining / 60);
-  const minutes = remaining % 60;
-  remaining = Math.floor(remaining / 60);
-  const hours = remaining % 24;
-  remaining = Math.floor(remaining / 24);
-  const days = remaining % 7;
-  const weeks = Math.floor(remaining / 7);
-  return { weeks, days, hours, minutes, seconds, milliseconds };
-}
-const durationPartsToNumberFormatOptions = {
-  weeks: "week",
-  days: "day",
-  hours: "hour",
-  minutes: "minute",
-  seconds: "second",
-  milliseconds: "millisecond"
-};
-function formatShortDuration(duration, locale) {
-  let resolvedLocale;
-  if (locale) {
-    resolvedLocale = locale;
-  } else {
-    const formatter = numberFormat();
-    resolvedLocale = formatter.resolvedOptions().locale;
-  }
-  const parts = getDurationParts(duration);
-  const formattedParts = [];
-  for (const [unit, value] of Object.entries(parts)) {
-    if (value === 0 || unit === "milliseconds") {
-      continue;
-    }
-    const formatter = numberFormat(resolvedLocale, {
-      style: "unit",
-      unit: durationPartsToNumberFormatOptions[unit],
-      unitDisplay: "narrow"
-    });
-    formattedParts.push(formatter.format(value));
-  }
-  if (!formattedParts.length) {
-    formattedParts.push(
-      numberFormat(resolvedLocale, {
-        style: "unit",
-        unit: "second",
-        unitDisplay: "narrow"
-      }).format(0)
-    );
-  }
-  return formattedParts.join(" ");
-}
-function formatVerboseDuration(duration, locale) {
-  let resolvedLocale;
-  if (locale) {
-    resolvedLocale = locale;
-  } else {
-    const formatter = numberFormat();
-    resolvedLocale = formatter.resolvedOptions().locale;
-  }
-  const parts = getDurationParts(duration);
-  const formattedParts = [];
-  for (const [unit, value] of Object.entries(parts)) {
-    if (value === 0 || unit === "milliseconds") {
-      continue;
-    }
-    const formatter = numberFormat(resolvedLocale, {
-      style: "unit",
-      unit: durationPartsToNumberFormatOptions[unit],
-      unitDisplay: "long"
-    });
-    formattedParts.push(formatter.format(value));
-  }
-  if (!formattedParts.length) {
-    formattedParts.push(
-      numberFormat(resolvedLocale, {
-        style: "unit",
-        unit: "second",
-        unitDisplay: "long"
-      }).format(0)
-    );
-  }
-  return formattedParts.join(" ");
-}
-function formatIso8601Duration(duration) {
-  const normalizedDuration = Math.max(duration, 0);
-  if (normalizedDuration === 0) {
-    return "PT0S";
-  }
-  const { weeks, days, hours, minutes, seconds, milliseconds } = getDurationParts(normalizedDuration);
-  let isoDuration = "P";
-  if (weeks > 0) {
-    isoDuration += `${weeks}W`;
-  }
-  if (days > 0) {
-    isoDuration += `${days}D`;
-  }
-  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {
-    isoDuration += "T";
-    if (hours > 0) {
-      isoDuration += `${hours}H`;
-    }
-    if (minutes > 0) {
-      isoDuration += `${minutes}M`;
-    }
-    if (seconds > 0 || milliseconds > 0) {
-      if (milliseconds > 0) {
-        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, "0").replace(/0+$/, "")}S`;
-      } else {
-        isoDuration += `${seconds}S`;
-      }
-    }
-  }
-  return isoDuration;
-}
-function getDateTime(date) {
-  if (date instanceof Date) {
-    return date.getTime();
-  }
-  return new Date(date).getTime();
-}
-function getDuration(from, to) {
-  return getDateTime(to) - getDateTime(from);
-}
-const Duration = forwardRef(
-  ({
-    duration,
-    from,
-    to,
-    locale,
-    dateTime,
-    title: renderTitle = formatVerboseDuration,
-    children: renderChildren = formatShortDuration,
-    interval = RENDER_INTERVAL,
-    asChild,
-    ...props
-  }, forwardedRef) => {
-    const Component = asChild ? Slot : "time";
-    const [rerender, key] = useRerender();
-    const resolvedDuration = useMemo(() => {
-      if (duration !== void 0) {
-        return duration;
-      }
-      if (from !== void 0) {
-        return getDuration(from, to ?? Date.now());
-      }
-      return 0;
-    }, [duration, from, to, key]);
-    const normalizedDuration = useMemo(
-      () => formatIso8601Duration(resolvedDuration),
-      [resolvedDuration]
-    );
-    const title = useMemo(
-      () => typeof renderTitle === "function" ? renderTitle(resolvedDuration, locale) : renderTitle,
-      [renderTitle, resolvedDuration, locale]
-    );
-    const children = useMemo(
-      () => typeof renderChildren === "function" ? renderChildren(resolvedDuration, locale) : renderChildren,
-      [renderChildren, resolvedDuration, locale]
-    );
-    useInterval(
-      rerender,
-      from !== void 0 && to === void 0 ? interval : false
-    );
-    return /* @__PURE__ */ jsx(Component, {
-      ...props,
-      ref: forwardedRef,
-      dateTime: dateTime ?? normalizedDuration,
-      title,
-      children
-    });
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  Duration.displayName = DURATION_NAME;
-}
-
-export { Duration, formatIso8601Duration };
-//# sourceMappingURL=Duration.js.map

package/dist/primitives/Duration.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Duration.js","sources":["../../src/primitives/Duration.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef, type ReactNode, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { numberFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst RENDER_INTERVAL = 0.5 * 1000; // 0.5 second\n\nconst DURATION_NAME = \"Duration\";\n\nexport type DurationProps = Omit<\n  ComponentPropsWithSlot<\"time\">,\n  \"children\" | \"title\"\n> &\n  Relax<\n    | {\n        /**\n         * The duration in milliseconds.\n         * If provided, `from` and `to` will be ignored.\n         */\n        duration: number;\n      }\n    | {\n        /**\n         * The date at which the duration starts.\n         * If provided, `duration` will be ignored.\n         * If provided without `to` it means that the duration is in progress,\n         * and the component will re-render at an interval, customizable with\n         * the `interval` prop.\n         */\n        from: Date | string | number;\n\n        /**\n         * The date at which the duration ends.\n         * If `from` is provided without `to`, `Date.now()` will be used.\n         */\n        to?: Date | string | number;\n      }\n  > & {\n    /**\n     * A function to format the displayed duration.\n     */\n    children?: (duration: number, locale?: string) => ReactNode;\n\n    /**\n     * The `title` attribute's value or a function to format it.\n     */\n    title?: string | ((duration: number, locale?: string) => string);\n\n    /**\n     * The interval in milliseconds at which the component will re-render if\n     * `from` is provided without `to`, meaning that the duration is in progress.\n     * Can be set to `false` to disable re-rendering.\n     */\n    interval?: number | false;\n\n    /**\n     * The locale used when formatting the duration.\n     */\n    locale?: string;\n  };\n\ninterface DurationParts {\n  weeks: number;\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  milliseconds: number;\n}\n\nfunction getDurationParts(duration: number): DurationParts {\n  let remaining = Math.max(duration, 0);\n\n  const milliseconds = remaining % 1000;\n  remaining = Math.floor(remaining / 1000);\n\n  const seconds = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const minutes = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const hours = remaining % 24;\n  remaining = Math.floor(remaining / 24);\n\n  const days = remaining % 7;\n  const weeks = Math.floor(remaining / 7);\n\n  return { weeks, days, hours, minutes, seconds, milliseconds };\n}\n\nconst durationPartsToNumberFormatOptions: Record<\n  keyof DurationParts,\n  Intl.NumberFormatOptions[\"unit\"]\n> = {\n  weeks: \"week\",\n  days: \"day\",\n  hours: \"hour\",\n  minutes: \"minute\",\n  seconds: \"second\",\n  milliseconds: \"millisecond\",\n};\n\n/**\n * Formats a duration in a short format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatShortDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"narrow\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"narrow\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration in a longer format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatVerboseDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"long\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"long\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration as ISO 8601.\n * TODO: Use `Temporal.Duration` when it's better supported.\n */\nexport function formatIso8601Duration(duration: number) {\n  const normalizedDuration = Math.max(duration, 0);\n\n  if (normalizedDuration === 0) {\n    return \"PT0S\";\n  }\n\n  const { weeks, days, hours, minutes, seconds, milliseconds } =\n    getDurationParts(normalizedDuration);\n\n  let isoDuration = \"P\";\n\n  // 1. Weeks\n  if (weeks > 0) {\n    isoDuration += `${weeks}W`;\n  }\n\n  // 2. Days\n  if (days > 0) {\n    isoDuration += `${days}D`;\n  }\n\n  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {\n    isoDuration += \"T\";\n\n    // 3. Hours\n    if (hours > 0) {\n      isoDuration += `${hours}H`;\n    }\n\n    // 4. Minutes\n    if (minutes > 0) {\n      isoDuration += `${minutes}M`;\n    }\n\n    // 5. Seconds and milliseconds\n    if (seconds > 0 || milliseconds > 0) {\n      if (milliseconds > 0) {\n        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, \"0\").replace(/0+$/, \"\")}S`;\n      } else {\n        isoDuration += `${seconds}S`;\n      }\n    }\n  }\n\n  return isoDuration;\n}\n\n/**\n * Converts a Date or Date-like value to a timestamp in milliseconds.\n */\nfunction getDateTime(date: Date | string | number) {\n  if (date instanceof Date) {\n    return date.getTime();\n  }\n\n  return new Date(date).getTime();\n}\n\n/**\n * Get a duration between two Date or Date-like values.\n */\nfunction getDuration(from: Date | string | number, to: Date | string | number) {\n  return getDateTime(to) - getDateTime(from);\n}\n\n/**\n * Displays a formatted duration, and automatically re-renders to if the\n * duration is in progress.\n *\n * @example\n * <Duration duration={3 * 60 * 1000} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />\n */\nexport const Duration = forwardRef<HTMLTimeElement, DurationProps>(\n  (\n    {\n      duration,\n      from,\n      to,\n      locale,\n      dateTime,\n      title: renderTitle = formatVerboseDuration,\n      children: renderChildren = formatShortDuration,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const resolvedDuration = useMemo(() => {\n      if (duration !== undefined) {\n        return duration;\n      }\n\n      if (from !== undefined) {\n        return getDuration(from, to ?? Date.now());\n      }\n\n      return 0;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [duration, from, to, key]);\n    const normalizedDuration = useMemo(\n      () => formatIso8601Duration(resolvedDuration),\n      [resolvedDuration]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(resolvedDuration, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, resolvedDuration, locale]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(resolvedDuration, locale)\n          : renderChildren,\n\n      [renderChildren, resolvedDuration, locale]\n    );\n\n    // Only re-render if the duration is in progress.\n    useInterval(\n      rerender,\n      from !== undefined && to === undefined ? interval : false\n    );\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDuration}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Duration.displayName = DURATION_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;AAWA;AAEA;AA+DA;AACE;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACF;AAEA;AAGI;AACK;AACD;AACC;AACE;AACA;AAEX;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMO;AACL;AAEA;AACE;AAAO;AAGT;AAGA;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAGpB;AACE;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAIpB;AACE;AACE;AAAuF;AAEvF;AAAkB;AACpB;AACF;AAGF;AACF;AAKA;AACE;AACE;AAAoB;AAGtB;AACF;AAKA;AACE;AACF;AAeO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACqB;AACM;AAChB;AACX;AACG;AAIL;AACA;AACA;AACE;AACE;AAAO;AAGT;AACE;AAAyC;AAG3C;AAAO;AAGT;AAA2B;AACmB;AAC3B;AAEnB;AAAc;AAIN;AAEgC;AAExC;AAAiB;AAIT;AAEmC;AAI3C;AAAA;AACE;AACoD;AAGtD;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;"}