@synerise/ds-core 1.5.1 → 1.6.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.6.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-core@1.5.2...@synerise/ds-core@1.6.0) (2025-09-25)
+
+
+### Features
+
+* **table:** cell with tags list ([109820e](https://github.com/synerise/synerise-design/commit/109820ed06f931a178580633277a7643aebe1072))
+
+
+
+
+
+## [1.5.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-core@1.5.1...@synerise/ds-core@1.5.2) (2025-09-16)
+
+**Note:** Version bump only for package @synerise/ds-core
+
+
+
+
+
 ## [1.5.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-core@1.5.0...@synerise/ds-core@1.5.1) (2025-08-28)
 
 

package/README.md

@@ -26,3 +26,184 @@ Bunch of components to bootstrap application.
 | defaultMessages  | Object with fallback translations                                        | object           |             |
 | dataFormatConfig | Object with data (dates/numbers) notations                               | DataFormatConfig | EU notation |
 | includeToaster   | Opt out of rendering a Toaster component for rendering toasts (messages) | boolean          | true        |
+
+# Data formatting
+
+## Usage
+
+### For function components:
+
+```tsx harmony
+import React, { FC } from 'react';
+
+import {
+  FormattedDate,
+  FormattedDateTime,
+  FormattedNumber,
+  FormattedTime,
+  useDataFormat,
+} from '@synerise/ds-core';
+
+const DATE = new Date('2023-06-25T15:40:00');
+const DATE_TO_FORMAT = DATE; // moment(DATE) // dayjs(DATE)
+
+export const FunctionComponent: FC = (): JSX.Element => {
+  const {
+    firstDayOfWeek,
+    isSundayFirstWeekDay,
+    is12HoursClock,
+    formatValue,
+    formatMultipleValues,
+    getConstants,
+    thousandDelimiter,
+    decimalDelimiter,
+  } = useDataFormat();
+
+  firstDayOfWeek; // Sunday = 0 // Monday = 1
+  isSundayFirstWeekDay; // true // false
+  is12HoursClock; // true // false
+
+  formatValue(1234567);
+  formatValue(DATE_TO_FORMAT);
+  formatValue(DATE_TO_FORMAT, { targetFormat: 'date' });
+  formatValue(DATE_TO_FORMAT, { targetFormat: 'time' });
+  formatValue(DATE_TO_FORMAT, { targetFormat: 'datetime' });
+
+  formatMultipleValues([1234567, 1234567]);
+  formatMultipleValues([DATE_TO_FORMAT, DATE_TO_FORMAT], {
+    targetFormat: 'datetime',
+  });
+
+  getConstants('months-long');
+  getConstants('months-short');
+  getConstants('weekdays-long');
+  getConstants('weekdays-short');
+  getConstants(
+    'months-long',
+    { namingConvention: 'lowerCase' },
+    new Date(2022, 10),
+    new Date(2023, 2),
+    'month',
+  );
+
+  thousandDelimiter; // "," // " "
+  decimalDelimiter; // "." // ","
+
+  return (
+    <>
+      <FormattedNumber value={1234567} options={{ unit: 'percent' }} />
+      <FormattedDate value={DATE_TO_FORMAT} options={{ month: 'long' }} />
+      <FormattedTime value={DATE_TO_FORMAT} options={{ second: 'numeric' }} />
+      <FormattedDateTime
+        value={DATE_TO_FORMAT}
+        options={{
+          dateOptions: { month: 'long' },
+          timeOptions: { second: 'numeric' },
+        }}
+      />
+    </>
+  );
+};
+```
+
+For class components:
+
+```tsx harmony
+import React, { Component, FC } from 'react';
+import { withDataFormat, WithDataFormatProps } from '@synerise/ds-core';
+
+type ClassComponentProps = {
+  ...
+} & WithDataFormatProps;
+
+class ClassComponent extends Component<ClassComponentProps> {
+  constructor(props: ClassComponentProps) {
+    super(props);
+  }
+
+  render() {
+    const {
+      firstDayOfWeek,
+      isSundayFirstWeekDay,
+      is12HoursClock,
+      formatValue,
+      formatMultipleValues,
+      getConstants,
+      thousandDelimiter,
+      decimalDelimiter,
+    } = this.props;
+
+    return (
+      <>
+        <div>{formatValue(1234567)}</div>
+      </>
+    );
+  }
+}
+
+export default withDataFormat(ClassComponent) as FC<ClassComponentProps>;
+```
+
+## Examples
+
+### Number
+
+The `options` object is compatible with https://formatjs.io/docs/react-intl/api#formatnumber
+
+| Code                                                                                                       | EU Notation                     | US Notation                     |
+| ---------------------------------------------------------------------------------------------------------- | ------------------------------- | ------------------------------- |
+| formatValue(1234567)                                                                                       | 1 234 567                       | 1,234,567                       |
+| formatValue(1234567.89)                                                                                    | 1 234 567,89                    | 1,234,567.89                    |
+| formatValue(1234567, { minimumFractionDigits: 2 })                                                         | 1 234 567,00                    | 1,234,567.00                    |
+| formatValue(1234567.89, { maximumFractionDigits: 1 })                                                      | 1 234 567,9                     | 1,234,567.9                     |
+| formatValue(1234567.89, { style: 'currency', currency: 'USD', prefix: 'Salary: ', suffix: ' per month' })) | Salary: $1 234 567,89 per month | Salary: $1,234,567.89 per month |
+| formatValue(1234, { notation: 'compact' }))                                                                | 1,2K (with PL locale: 1,2 tys.) | 1.2K (with PL locale: 1.2 tys.) |
+| formatValue(1, { pluralOptions: { type: 'ordinal' } }))                                                    | one                             | one                             |
+
+### Date
+
+The `options` object is compatible with https://formatjs.io/docs/react-intl/api#formatdate
+
+| Code                                                 | EU Notation  | US Notation   |
+| ---------------------------------------------------- | ------------ | ------------- |
+| formatValue(date)                                    | 25.06.2023   | 6/25/2023     |
+| formatValue(date, { month: 'long' })                 | 25 June 2023 | June 25, 2023 |
+| formatValue(date, { targetFormat: 'weekday-long' })  | Sunday       | Sunday        |
+| formatValue(date, { targetFormat: 'weekday-short' }) | Sun          | Sun           |
+| formatValue(date, { targetFormat: 'month-long' })    | June         | June          |
+| formatValue(date, { targetFormat: 'month-short' })   | Jun          | Jun           |
+
+### Time
+
+The `options` object is compatible with https://formatjs.io/docs/react-intl/api#formatdate
+
+| Code                                                           | EU Notation | US Notation |
+| -------------------------------------------------------------- | ----------- | ----------- |
+| formatValue(date, { targetFormat: 'time' })                    | 15:40       | 3:40 PM     |
+| formatValue(date, { targetFormat: 'time', second: 'numeric' }) | 15:40:00    | 3:40:00 PM  |
+
+### DateTime
+
+The `dateOptions` object and the `timeOptions` object are compatible with https://formatjs.io/docs/react-intl/api#formatdate
+
+| Code                                                                                                                | EU Notation              | US Notation               |
+| ------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------- |
+| formatValue(date, { targetFormat: 'datetime' })                                                                     | 25.06.2023, 15:40        | 6/25/2023, 3:40 PM        |
+| formatValue(date, { targetFormat: 'datetime', dateOptions: { month: 'long' }, timeOptions: { second: 'numeric' } }) | 25 June 2023, 3:40:00 PM | June 25, 2023, 3:40:00 PM |
+
+### formatMultipleValues
+
+| Code                                                                   | EU Notation                      | US Notation                      |
+| ---------------------------------------------------------------------- | -------------------------------- | -------------------------------- |
+| formatMultipleValues([1234567, 1234567], { minimumFractionDigits: 2 }) | ['1 234 567,00', '1 234 567,00'] | ['1,234,567.00', '1,234,567.00'] |
+| formatMultipleValues([date, date], { targetFormat: 'month-long' })     | ['June', 'June']                 | ['June', 'June']                 |
+
+### getConstants
+
+| Code                                                                                        | EU Notation                    | US Notation                    |
+| ------------------------------------------------------------------------------------------- | ------------------------------ | ------------------------------ |
+| getConstants('months-long')                                                                 | ['January', '...', 'December'] | ['January', '...', 'December'] |
+| getConstants('months-short')                                                                | ['Jan', '...', 'Dec']          | ['Jan', '...', 'Dec']          |
+| getConstants('weekdays-long')                                                               | ['Monday', '...', 'Sunday']    | ['Sunday', '...', 'Saturday']  |
+| getConstants('weekdays-short')                                                              | ['Mon', '...', 'Sun']          | ['Sun', '...', 'Sat']          |
+| getConstants('months-long', { namingConvention: 'lowerCase' }, startDate, endDate, 'month') | ['november', '...', 'march']   | ['november', '...', 'march']   |

package/dist/i18n/en.json

@@ -469,6 +469,16 @@
     },
     "PLACEHOLDER": {
       "CHOOSE-CONDITION": "Choose type of condition below"
+    },
+    "TAG": {
+      "SEARCH-PLACEHOLDER": "Search",
+      "ADD-BUTTON-LABEL": "Add tag",
+      "MANAGE-LINK-LABEL": "Manage tags",
+      "CREATE-TAG-LABEL": "Create tag",
+      "NO-TAGS": "No data",
+      "CLEAR-TOOLTIP": "Clear",
+      "DELETE-TOOLTIP": "Delete",
+      "NO-SEARCH-RESULTS": "No tags found"
     }
   }
-}
+}

package/dist/i18n/es.json

@@ -176,7 +176,6 @@
       "TITLE": "Administrar columnas",
       "SEARCH-PLACEHOLDER": "Buscar",
       "SEARCH-RESULTS": "Resultados de búsqueda",
-      "NO-RESULTS": "Sin resultados",
       "VISIBLE": "Visible",
       "HIDDEN": "Oculto",
       "SAVE-VIEW": "Guardar vista",
@@ -469,6 +468,16 @@
     },
     "PLACEHOLDER": {
       "CHOOSE-CONDITION": "Elige el tipo de condición abajo"
+    },
+    "TAG": {
+      "SEARCH-PLACEHOLDER": "Buscar",
+      "ADD-BUTTON-LABEL": "Agregar etiqueta",
+      "MANAGE-LINK-LABEL": "Administrar etiquetas",
+      "CREATE-TAG-LABEL": "Crear etiqueta",
+      "NO-TAGS": "Sin datos",
+      "CLEAR-TOOLTIP": "Borrar",
+      "DELETE-TOOLTIP": "Eliminar",
+      "NO-SEARCH-RESULTS": "No se encontraron etiquetas"
     }
   }
 }

package/dist/i18n/index.d.ts

@@ -412,6 +412,16 @@ declare const _default: {
             PLACEHOLDER: {
                 "CHOOSE-CONDITION": string;
             };
+            TAG: {
+                "SEARCH-PLACEHOLDER": string;
+                "ADD-BUTTON-LABEL": string;
+                "MANAGE-LINK-LABEL": string;
+                "CREATE-TAG-LABEL": string;
+                "NO-TAGS": string;
+                "CLEAR-TOOLTIP": string;
+                "DELETE-TOOLTIP": string;
+                "NO-SEARCH-RESULTS": string;
+            };
         };
     };
     en: {
@@ -886,6 +896,16 @@ declare const _default: {
             PLACEHOLDER: {
                 "CHOOSE-CONDITION": string;
             };
+            TAG: {
+                "SEARCH-PLACEHOLDER": string;
+                "ADD-BUTTON-LABEL": string;
+                "MANAGE-LINK-LABEL": string;
+                "CREATE-TAG-LABEL": string;
+                "NO-TAGS": string;
+                "CLEAR-TOOLTIP": string;
+                "DELETE-TOOLTIP": string;
+                "NO-SEARCH-RESULTS": string;
+            };
         };
     };
     es: {
@@ -1066,7 +1086,6 @@ declare const _default: {
                 TITLE: string;
                 "SEARCH-PLACEHOLDER": string;
                 "SEARCH-RESULTS": string;
-                "NO-RESULTS": string;
                 VISIBLE: string;
                 HIDDEN: string;
                 "SAVE-VIEW": string;
@@ -1096,6 +1115,7 @@ declare const _default: {
                 TO: string;
                 REMOVE: string;
                 ADD_RANGE: string;
+                "NO-RESULTS": string;
                 ERROR_EMPTY_RANGE: string;
                 ERROR_EMPTY_FROM_FIELD: string;
                 ERROR_EMPTY_TO_FIELD: string;
@@ -1359,6 +1379,16 @@ declare const _default: {
             PLACEHOLDER: {
                 "CHOOSE-CONDITION": string;
             };
+            TAG: {
+                "SEARCH-PLACEHOLDER": string;
+                "ADD-BUTTON-LABEL": string;
+                "MANAGE-LINK-LABEL": string;
+                "CREATE-TAG-LABEL": string;
+                "NO-TAGS": string;
+                "CLEAR-TOOLTIP": string;
+                "DELETE-TOOLTIP": string;
+                "NO-SEARCH-RESULTS": string;
+            };
         };
     };
     pt: {
@@ -1834,6 +1864,16 @@ declare const _default: {
             PLACEHOLDER: {
                 "CHOOSE-CONDITION": string;
             };
+            TAG: {
+                "SEARCH-PLACEHOLDER": string;
+                "ADD-BUTTON-LABEL": string;
+                "MANAGE-LINK-LABEL": string;
+                "CREATE-TAG-LABEL": string;
+                "NO-TAGS": string;
+                "CLEAR-TOOLTIP": string;
+                "DELETE-TOOLTIP": string;
+                "NO-SEARCH-RESULTS": string;
+            };
         };
     };
     default: {
@@ -2308,6 +2348,16 @@ declare const _default: {
             PLACEHOLDER: {
                 "CHOOSE-CONDITION": string;
             };
+            TAG: {
+                "SEARCH-PLACEHOLDER": string;
+                "ADD-BUTTON-LABEL": string;
+                "MANAGE-LINK-LABEL": string;
+                "CREATE-TAG-LABEL": string;
+                "NO-TAGS": string;
+                "CLEAR-TOOLTIP": string;
+                "DELETE-TOOLTIP": string;
+                "NO-SEARCH-RESULTS": string;
+            };
         };
     };
 };

package/dist/i18n/pl.json

@@ -410,6 +410,16 @@
     },
     "PLACEHOLDER": {
       "CHOOSE-CONDITION": "Wybierz rodzaj warunku"
+    },
+    "TAG": {
+      "SEARCH-PLACEHOLDER": "Szukaj",
+      "ADD-BUTTON-LABEL": "Dodaj tag",
+      "MANAGE-LINK-LABEL": "Zarządzaj tagami",
+      "CREATE-TAG-LABEL": "Utwórz tag",
+      "NO-TAGS": "Brak danych",
+      "CLEAR-TOOLTIP": "Wyczyść",
+      "DELETE-TOOLTIP": "Usuń",
+      "NO-SEARCH-RESULTS": "Nie znaleziono tagów"
     }
   }
-}
+}

package/dist/i18n/pt.json

@@ -470,6 +470,16 @@
         },
         "PLACEHOLDER": {
             "CHOOSE-CONDITION": "Escolha o tipo de condição abaixo"
+        },
+        "TAG": {
+            "SEARCH-PLACEHOLDER": "Pesquisar",
+            "ADD-BUTTON-LABEL": "Adicionar tag",
+            "MANAGE-LINK-LABEL": "Gerenciar tags",
+            "CREATE-TAG-LABEL": "Criar tag",
+            "NO-TAGS": "Sem dados",
+            "CLEAR-TOOLTIP": "Limpar",
+            "DELETE-TOOLTIP": "Excluir",
+            "NO-SEARCH-RESULTS": "Nenhuma tag encontrada"
         }
     }
-}
+}

package/dist/js/DSProvider/DSProvider.d.ts

@@ -1,7 +1,7 @@
 import React, { type PropsWithChildren } from 'react';
-import { type DataFormatConfigProviderProps } from '@synerise/ds-data-format';
-import { type ToasterProps } from '@synerise/ds-toaster';
+import { type DataFormatConfigProviderProps } from '../data-format';
 import '../style';
+import { type ToasterProps } from '../toaster';
 import { type LocaleProviderProps } from './LocaleProvider/LocaleProvider.types';
 import { type ThemeProviderProps } from './ThemeProvider/ThemeProvider';
 export type DSProviderProps = PropsWithChildren<LocaleProviderProps & ThemeProviderProps & DataFormatConfigProviderProps & {

package/dist/js/DSProvider/DSProvider.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DataFormatConfigProvider } from '@synerise/ds-data-format';
-import Toaster, { TOASTER_DEFAULTS, ToasterProvider } from '@synerise/ds-toaster';
+import { DataFormatConfigProvider } from '../data-format';
 import '../style';
+import Toaster, { TOASTER_DEFAULTS, ToasterProvider } from '../toaster';
 import LocaleProvider from './LocaleProvider';
 import ThemeProvider from './ThemeProvider';
 var DSProvider = function DSProvider(_ref) {

package/dist/js/DSProvider/LocaleProvider/LocaleProvider.utils.d.ts

@@ -178,7 +178,6 @@ export declare const getDSMessages: (lang: string) => {
             TITLE: string;
             "SEARCH-PLACEHOLDER": string;
             "SEARCH-RESULTS": string;
-            "NO-RESULTS": string;
             VISIBLE: string;
             HIDDEN: string;
             "SAVE-VIEW": string;
@@ -208,6 +207,7 @@ export declare const getDSMessages: (lang: string) => {
             TO: string;
             REMOVE: string;
             ADD_RANGE: string;
+            "NO-RESULTS": string;
             ERROR_EMPTY_RANGE: string;
             ERROR_EMPTY_FROM_FIELD: string;
             ERROR_EMPTY_TO_FIELD: string;
@@ -471,6 +471,16 @@ export declare const getDSMessages: (lang: string) => {
         PLACEHOLDER: {
             "CHOOSE-CONDITION": string;
         };
+        TAG: {
+            "SEARCH-PLACEHOLDER": string;
+            "ADD-BUTTON-LABEL": string;
+            "MANAGE-LINK-LABEL": string;
+            "CREATE-TAG-LABEL": string;
+            "NO-TAGS": string;
+            "CLEAR-TOOLTIP": string;
+            "DELETE-TOOLTIP": string;
+            "NO-SEARCH-RESULTS": string;
+        };
     };
 } | {
     DS: {
@@ -885,5 +895,15 @@ export declare const getDSMessages: (lang: string) => {
         PLACEHOLDER: {
             "CHOOSE-CONDITION": string;
         };
+        TAG: {
+            "SEARCH-PLACEHOLDER": string;
+            "ADD-BUTTON-LABEL": string;
+            "MANAGE-LINK-LABEL": string;
+            "CREATE-TAG-LABEL": string;
+            "NO-TAGS": string;
+            "CLEAR-TOOLTIP": string;
+            "DELETE-TOOLTIP": string;
+            "NO-SEARCH-RESULTS": string;
+        };
     };
 };

package/dist/js/DSProvider/ThemeProvider/breakpoints.d.ts

@@ -1,3 +1,7 @@
-import { type BreakpointsData } from '../../mediaQuery/mediaQuery';
+export type BreakpointKey = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+export type BreakpointsData = Record<BreakpointKey, {
+    min: number;
+    max: number;
+}>;
 export declare const breakpoints: BreakpointsData;
 export default breakpoints;

package/dist/js/data-format/components/FormattedDate.d.ts

@@ -0,0 +1,9 @@
+import { type Dayjs } from 'dayjs';
+import { type Moment } from 'moment';
+import React from 'react';
+import { type DateToFormatOptions } from '../types';
+export type FormattedDateProps = {
+    value: Date | Moment | Dayjs;
+    options?: DateToFormatOptions;
+};
+export declare const FormattedDate: React.FC<FormattedDateProps>;

package/dist/js/data-format/components/FormattedDate.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useDataFormat } from '../hooks';
+export var FormattedDate = function FormattedDate(_ref) {
+  var value = _ref.value,
+    options = _ref.options;
+  var _useDataFormat = useDataFormat(),
+    formatValue = _useDataFormat.formatValue;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, formatValue(value, options));
+};

package/dist/js/data-format/components/FormattedDateTime.d.ts

@@ -0,0 +1,9 @@
+import { type Dayjs } from 'dayjs';
+import { type Moment } from 'moment';
+import React from 'react';
+import { type DateToFormatOptions } from '../types';
+export type FormattedTimeProps = {
+    value: Date | Moment | Dayjs;
+    options?: DateToFormatOptions;
+};
+export declare const FormattedDateTime: React.FC<FormattedTimeProps>;

package/dist/js/data-format/components/FormattedDateTime.js

@@ -0,0 +1,13 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { DATETIME } from '../constants';
+import { useDataFormat } from '../hooks';
+export var FormattedDateTime = function FormattedDateTime(_ref) {
+  var value = _ref.value,
+    options = _ref.options;
+  var _useDataFormat = useDataFormat(),
+    formatValue = _useDataFormat.formatValue;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, formatValue(value, _extends({}, options, {
+    targetFormat: DATETIME
+  })));
+};

package/dist/js/data-format/components/FormattedNumber.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type NumberToFormatOptions } from '../types';
+export type FormattedNumberProps = {
+    value: number;
+    options?: NumberToFormatOptions;
+};
+export declare const FormattedNumber: React.FC<FormattedNumberProps>;

package/dist/js/data-format/components/FormattedNumber.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useDataFormat } from '../hooks';
+export var FormattedNumber = function FormattedNumber(_ref) {
+  var value = _ref.value,
+    options = _ref.options;
+  var _useDataFormat = useDataFormat(),
+    formatValue = _useDataFormat.formatValue;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, formatValue(value, options));
+};

package/dist/js/data-format/components/FormattedRelativeDateTime.d.ts

@@ -0,0 +1,10 @@
+import { type Dayjs } from 'dayjs';
+import { type Moment } from 'moment';
+import { type DateToFormatOptions } from '../types';
+export type FormattedRelativeDateTimeProps = {
+    value: Date | Moment | Dayjs;
+    withoutSuffix?: boolean;
+    options?: DateToFormatOptions;
+};
+export declare const FormattedRelativeDateTimeTo: ({ value, withoutSuffix, options, }: FormattedRelativeDateTimeProps) => JSX.Element;
+export declare const FormattedRelativeDateTimeFrom: ({ value, withoutSuffix, options, }: FormattedRelativeDateTimeProps) => JSX.Element;

package/dist/js/data-format/components/FormattedRelativeDateTime.js

@@ -0,0 +1,24 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { RELATIVE_FROM, RELATIVE_FROM_WITHOUT_SUFFIX, RELATIVE_TO, RELATIVE_TO_WITHOUT_SUFFIX } from '../constants';
+import { useDataFormat } from '../hooks';
+export var FormattedRelativeDateTimeTo = function FormattedRelativeDateTimeTo(_ref) {
+  var value = _ref.value,
+    withoutSuffix = _ref.withoutSuffix,
+    options = _ref.options;
+  var _useDataFormat = useDataFormat(),
+    formatValue = _useDataFormat.formatValue;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, formatValue(value, _extends({}, options, {
+    targetFormat: withoutSuffix ? RELATIVE_TO_WITHOUT_SUFFIX : RELATIVE_TO
+  })));
+};
+export var FormattedRelativeDateTimeFrom = function FormattedRelativeDateTimeFrom(_ref2) {
+  var value = _ref2.value,
+    withoutSuffix = _ref2.withoutSuffix,
+    options = _ref2.options;
+  var _useDataFormat2 = useDataFormat(),
+    formatValue = _useDataFormat2.formatValue;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, formatValue(value, _extends({}, options, {
+    targetFormat: withoutSuffix ? RELATIVE_FROM_WITHOUT_SUFFIX : RELATIVE_FROM
+  })));
+};

package/dist/js/data-format/components/FormattedTime.d.ts

@@ -0,0 +1,9 @@
+import { type Dayjs } from 'dayjs';
+import { type Moment } from 'moment';
+import React from 'react';
+import { type DateToFormatOptions } from '../types';
+export type FormattedTimeProps = {
+    value: Date | Moment | Dayjs;
+    options?: DateToFormatOptions;
+};
+export declare const FormattedTime: React.FC<FormattedTimeProps>;

package/dist/js/data-format/components/FormattedTime.js

@@ -0,0 +1,13 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { TIME } from '../constants';
+import { useDataFormat } from '../hooks';
+export var FormattedTime = function FormattedTime(_ref) {
+  var value = _ref.value,
+    options = _ref.options;
+  var _useDataFormat = useDataFormat(),
+    formatValue = _useDataFormat.formatValue;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, formatValue(value, _extends({}, options, {
+    targetFormat: TIME
+  })));
+};

package/dist/js/data-format/components/index.d.ts

@@ -0,0 +1,5 @@
+export { FormattedDate } from './FormattedDate';
+export { FormattedDateTime } from './FormattedDateTime';
+export { FormattedNumber } from './FormattedNumber';
+export { FormattedTime } from './FormattedTime';
+export { FormattedRelativeDateTimeFrom, FormattedRelativeDateTimeTo, } from './FormattedRelativeDateTime';

package/dist/js/data-format/components/index.js

@@ -0,0 +1,5 @@
+export { FormattedDate } from './FormattedDate';
+export { FormattedDateTime } from './FormattedDateTime';
+export { FormattedNumber } from './FormattedNumber';
+export { FormattedTime } from './FormattedTime';
+export { FormattedRelativeDateTimeFrom, FormattedRelativeDateTimeTo } from './FormattedRelativeDateTime';

package/dist/js/data-format/constants/dataFormat.constants.d.ts

@@ -0,0 +1,36 @@
+import { type FormatDateOptions, type FormatNumberOptions } from 'react-intl';
+import { type DateConstantsTargetFormat, type DateTargetFormat, type Delimiter, type NamingConvention, type NumberTargetFormat } from '../types';
+export declare const DEFAULT_FORMAT_NUMBER_OPTIONS: FormatNumberOptions;
+export declare const DEFAULT_FORMAT_DATE_OPTIONS: FormatDateOptions;
+export declare const DEFAULT_FORMAT_TIME_OPTIONS: FormatDateOptions;
+export declare const DEFAULT_FORMAT_WEEKDAY_LONG_OPTIONS: FormatDateOptions;
+export declare const DEFAULT_FORMAT_WEEKDAY_SHORT_OPTIONS: FormatDateOptions;
+export declare const DEFAULT_FORMAT_MONTH_LONG_OPTIONS: FormatDateOptions;
+export declare const DEFAULT_FORMAT_MONTH_SHORT_OPTIONS: FormatDateOptions;
+export declare const DATE: DateTargetFormat;
+export declare const TIME: DateTargetFormat;
+export declare const DATETIME: DateTargetFormat;
+export declare const RELATIVE_FROM: DateTargetFormat;
+export declare const RELATIVE_TO: DateTargetFormat;
+export declare const RELATIVE_FROM_WITHOUT_SUFFIX: DateTargetFormat;
+export declare const RELATIVE_TO_WITHOUT_SUFFIX: DateTargetFormat;
+export declare const WEEKDAY_LONG: DateTargetFormat;
+export declare const WEEKDAY_SHORT: DateTargetFormat;
+export declare const MONTH_LONG: DateTargetFormat;
+export declare const MONTH_SHORT: DateTargetFormat;
+export declare const COMPACT_LARGER_NUMBER: NumberTargetFormat;
+export declare const COMPACT_DECIMAL_LARGER_NUMBER: NumberTargetFormat;
+export declare const LARGER_NUMBER_LIMIT = 999;
+export declare const UPPER_CASE: NamingConvention;
+export declare const UPPER_FIRST: NamingConvention;
+export declare const LOWER_CASE: NamingConvention;
+export declare const LOWER_FIRST: NamingConvention;
+export declare const US_THOUSAND_DELIMITER: Delimiter;
+export declare const US_DECIMAL_DELIMITER: Delimiter;
+export declare const EU_THOUSAND_DELIMITER: Delimiter;
+export declare const EU_DECIMAL_DELIMITER: Delimiter;
+export declare const DATE_CONSTANTS_TARGET_FORMATS: DateConstantsTargetFormat[];
+export declare const MONTHS_LONG: DateConstantsTargetFormat;
+export declare const MONTHS_SHORT: DateConstantsTargetFormat;
+export declare const WEEKDAYS_LONG: DateConstantsTargetFormat;
+export declare const WEEKDAYS_SHORT: DateConstantsTargetFormat;