@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/Number2.js

@@ -1,69 +1,111 @@
-import { b as TextProps } from './types28.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { S as StyledText } from './styles5.js';
+import { u as useNumberFormatter } from './useNumberFormatter.js';
+import { u as useTheme } from './useTheme.js';
 
-interface NumberFormatOptions {
-}
 /**
- * Component props.
+ * Component style.
  */
-interface NumberProps extends TextProps {
-    /** Value. */
-    value: number;
-    /** The formatting style to use. */
-    type?: 'decimal' | 'currency' | 'percent' | 'unit';
-    /** Only used when notation is 'compact'. */
-    compactDisplay?: 'short' | 'long';
-    /** The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB */
-    currency?: string;
-    /** How to display the currency in currency formatting. */
-    currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name';
-    /** In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. */
-    currencySign?: 'standard' | 'accounting';
-    /** The locale matching algorithm to use. */
-    localeMatcher?: 'best fit' | 'lookup';
-    /** The formatting that should be displayed for the number. */
-    notation?: 'standard' | 'scientific' | 'engineering' | 'compact';
-    /** Overrides default numbering system for the current locale. */
-    numberingSystem?: string;
-    /** When to display the sign for the number. */
-    signDisplay?: 'auto' | 'always' | 'exceptZero' | 'never';
-    /** The unit to use in unit formatting. */
-    unit?: string;
-    /** The unit formatting style to use in unit formatting. */
-    unitDisplay?: 'long' | 'short' | 'narrow';
-    /** Whether to use grouping separators. */
-    useGrouping?: boolean;
-    /** Options for rounding modes. */
-    roundingMode?: 'ceil' | 'floor' | 'expand' | 'trunc' | 'halfCeil' | 'halfFloor' | 'halfExpand' | 'halfTrunc' | 'halfEven';
-    /** Specify how rounding conflicts will be resolved. */
-    roundingPriority?: 'auto' | 'morePrecision' | 'lessPrecision';
-    /** Specifies the rounding-increment precision. */
-    roundingIncrement?: 1 | 2 | 5 | 10 | 20 | 25 | 50 | 100 | 200 | 250 | 500 | 1000 | 2000 | 2500 | 5000;
-    /** A string expressing the strategy for displaying trailing zeros on whole numbers. */
-    trailingZeroDisplay?: 'auto' | 'stripIfInteger';
-    /** The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will be left-padded with zeros (to the specified length) when formatted. */
-    minimumIntegerDigits?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21;
-    /** The minimum number of fraction digits to use. */
-    minimumFractionDigits?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20;
-    /** The maximum number of fraction digits to use. */
-    maximumFractionDigits?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20;
-    /** The minimum number of significant digits to use. */
-    minimumSignificantDigits?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21;
-    /** The maximum number of significant digits to use. */
-    maximumSignificantDigits?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21;
-}
-type StyledNumberProps = Omit<NumberProps, 'as' | 'color' | 'fontFamily' | 'fontSize' | 'value' | 'variant'> & {
-    $color: NumberProps['color'];
-    $fontFamily: NumberProps['fontFamily'];
-    $fontSize: NumberProps['fontSize'];
-    $fontWeight: NumberProps['fontWeight'];
-    $variant: NumberProps['variant'];
-    $theme: NumberProps['theme'];
-};
+const StyledNumber = styled(StyledText)``;
+
+const _excluded = ["as", "className", "color", "compactDisplay", "currency", "currencyDisplay", "currencySign", "fontSize", "fontFamily", "fontWeight", "lineHeight", "localeMatcher", "maximumFractionDigits", "maximumSignificantDigits", "minimumFractionDigits", "minimumIntegerDigits", "minimumSignificantDigits", "notation", "noWrap", "numberingSystem", "roundingIncrement", "roundingMode", "roundingPriority", "signDisplay", "theme", "trailingZeroDisplay", "type", "unit", "unitDisplay", "useGrouping", "value", "variant"];
+const COMPONENT_NAME = 'Number';
+const CLASSNAME = 'redsift-number';
 
 /**
  * The Number component.
  */
-declare const Number: Comp<NumberProps, HTMLDivElement>;
+const Number = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      className,
+      color,
+      compactDisplay = 'short',
+      currency,
+      currencyDisplay = 'symbol',
+      currencySign = 'standard',
+      fontSize,
+      fontFamily,
+      fontWeight,
+      lineHeight,
+      localeMatcher = 'best fit',
+      maximumFractionDigits,
+      maximumSignificantDigits,
+      minimumFractionDigits,
+      minimumIntegerDigits,
+      minimumSignificantDigits,
+      notation = 'standard',
+      noWrap,
+      numberingSystem,
+      roundingIncrement,
+      roundingMode = 'halfExpand',
+      roundingPriority = 'auto',
+      signDisplay = 'auto',
+      theme: propsTheme,
+      trailingZeroDisplay = 'auto',
+      type = 'decimal',
+      unit,
+      unitDisplay = 'short',
+      useGrouping,
+      value,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const formatter = useNumberFormatter(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+    compactDisplay,
+    currency,
+    currencyDisplay,
+    currencySign,
+    localeMatcher
+  }, maximumFractionDigits !== undefined && {
+    maximumFractionDigits
+  }), maximumSignificantDigits !== undefined && {
+    maximumSignificantDigits
+  }), minimumFractionDigits !== undefined && {
+    minimumFractionDigits
+  }), minimumIntegerDigits !== undefined && {
+    minimumIntegerDigits
+  }), minimumSignificantDigits !== undefined && {
+    minimumSignificantDigits
+  }), {}, {
+    notation,
+    numberingSystem,
+    // @ts-ignore
+    roundingIncrement,
+    // @ts-ignore
+    roundingMode,
+    // @ts-ignore
+    roundingPriority,
+    signDisplay,
+    style: type,
+    // @ts-ignore
+    trailingZeroDisplay,
+    unit,
+    unitDisplay,
+    useGrouping
+  }));
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(StyledNumber, _extends({
+    as: as
+  }, forwardedProps, {
+    $as: as,
+    className: classNames(Number.className, className),
+    ref: ref,
+    $color: color,
+    $lineHeight: lineHeight,
+    $fontSize: fontSize,
+    $fontFamily: fontFamily,
+    $fontWeight: fontWeight,
+    $noWrap: noWrap,
+    $theme: theme,
+    $variant: variant
+  }), formatter.format(value));
+});
+Number.className = CLASSNAME;
+Number.displayName = COMPONENT_NAME;
 
-export { NumberFormatOptions as N, StyledNumberProps as S, NumberProps as a, Number as b };
+export { Number as N };
+//# sourceMappingURL=Number2.js.map