@redsift/design-system 11.6.0-muiv5-alpha.10 → 11.6.0-muiv5-alpha.11

package/packages/design-system/src/components/listbox/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/listbox/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ListboxVariant, StyledListboxProps } from './types';\nimport { baseContainer } from '../shared';\n\n/**\n * Component style.\n */\nexport const StyledListbox = styled.div<StyledListboxProps>`\n  ${baseContainer}\n  outline: none;\n\n  ${({ $variant, $isDisabled, $isInvalid }) =>\n    $variant === ListboxVariant.standalone\n      ? css`\n          span.redsift-listbox-label {\n            font-family: var(--redsift-typography-body-font-family);\n            font-weight: var(--redsift-typography-body-font-weight);\n            font-size: var(--redsift-typography-body-font-size);\n            line-height: var(--redsift-typography-body-line-height);\n\n            color: var(--redsift-color-neutral-black);\n            ${$isDisabled\n              ? `\n          color: var(--redsift-color-neutral-mid-grey);\n        `\n              : ''}\n            ${$isInvalid\n              ? `\n          color: var(--redsift-color-red-n);\n        `\n              : ''}\n          }\n\n          .redsift-listbox-list {\n            border: 1px solid var(--redsift-color-neutral-mid-grey);\n            padding: 4px;\n            min-width: 200px;\n          }\n        `\n      : ''}\n`;\n"],"names":["StyledListbox","styled","div","baseContainer","_ref","$variant","$isDisabled","$isInvalid","ListboxVariant","standalone","css"],"mappings":";;;;AAIA;AACA;AACA;AACaA,MAAAA,aAAa,GAAGC,MAAM,CAACC,GAAwB,CAAA;AAC5D,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,WAAW;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAH,IAAA,CAAA;AAAA,EAAA,OACtCC,QAAQ,KAAKG,cAAc,CAACC,UAAU,GAClCC,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAA,EAAcJ,WAAW,GACR,CAAA;AACjB;AACA,QAAA,CAAS,GACO,EAAG,CAAA;AACnB,YAAA,EAAcC,UAAU,GACP,CAAA;AACjB;AACA,QAAA,CAAS,GACO,EAAG,CAAA;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;;"}

package/packages/design-system/src/components/listbox/_internal/types.js

@@ -0,0 +1,32 @@
+/**
+ * Component variant.
+ */
+const ListboxSelectionMode = {
+  single: 'single',
+  multiple: 'multiple'
+};
+
+/**
+ * Context props.
+ */
+
+let ListboxActionType = /*#__PURE__*/function (ListboxActionType) {
+  ListboxActionType["TOGGLE"] = "TOGGLE";
+  ListboxActionType["SET"] = "SET";
+  ListboxActionType["UPDATE_OPTIONS"] = "UPDATE_OPTIONS";
+  return ListboxActionType;
+}({});
+/**
+ * Component variant.
+ */
+const ListboxVariant = {
+  standalone: 'standalone',
+  unstyled: 'unstyled'
+};
+
+/**
+ * Component props.
+ */
+
+export { ListboxActionType, ListboxSelectionMode, ListboxVariant };
+//# sourceMappingURL=types.js.map

package/packages/design-system/src/components/listbox/_internal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../../../../src/components/listbox/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ContainerProps, ValueOf } from '../../types';\nimport { FocusWithinGroupOptions, UseFocusWithinGroupProps } from '../focus-within-group';\n\n/**\n * Component variant.\n */\nexport const ListboxSelectionMode = {\n  single: 'single',\n  multiple: 'multiple',\n} as const;\nexport type ListboxSelectionMode = ValueOf<typeof ListboxSelectionMode>;\n\n/**\n * Context props.\n */\n\nexport type ListboxState = Readonly<{\n  isDisabled: boolean;\n  isReadOnly: boolean;\n  selectedValues: string[];\n  selectionMode: ListboxSelectionMode;\n  activedescendant?: [string, string];\n}>;\n\nexport enum ListboxActionType {\n  TOGGLE = 'TOGGLE',\n  SET = 'SET',\n  UPDATE_OPTIONS = 'UPDATE_OPTIONS',\n}\n\nexport type ListboxAction =\n  | {\n      type: ListboxActionType.TOGGLE;\n      payload: { value: string; activedescendant?: [string, string] };\n    }\n  | {\n      type: ListboxActionType.SET;\n      payload: { values: string[]; activedescendant?: [string, string] };\n    }\n  | {\n      type: ListboxActionType.UPDATE_OPTIONS;\n      payload: { isDisabled: boolean };\n    };\n\nexport type UseListboxItemProps = UseFocusWithinGroupProps & {\n  isSelected?: boolean;\n  isDisabled?: boolean;\n};\n\nexport type ListboxContextProps = {\n  state: ListboxState;\n  dispatch: React.Dispatch<ListboxAction>;\n};\n\n/**\n * Component variant.\n */\nexport const ListboxVariant = {\n  standalone: 'standalone',\n  unstyled: 'unstyled',\n} as const;\nexport type ListboxVariant = ValueOf<typeof ListboxVariant>;\n\n/**\n * Component props.\n */\nexport interface ListboxProps extends Omit<ComponentProps<'div'>, 'onChange'>, ContainerProps, FocusWithinGroupOptions {\n  /**\n   * Default selected values.\n   * Used for uncontrolled version.\n   */\n  defaultValues?: string[];\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is invalid or not. */\n  isInvalid?: boolean;\n  /** Whether the component is read only or not. */\n  isReadOnly?: boolean;\n  /** Whether the component is required or not. */\n  isRequired?: boolean;\n  /** Label of the switch group. */\n  label?: string;\n  /** Method to handle component change. */\n  onChange?(values: string[]): void;\n  /** Whether the listbox allows multiple selections or single ones. */\n  selectionMode?: 'single' | 'multiple';\n  /**\n   * Currently selected values.\n   * Used for controlled version.\n   */\n  values?: string[];\n  /** Whether the Listbox is used as standalone or is unstyled within another component. */\n  variant?: ListboxVariant;\n}\n\nexport type StyledListboxProps = Omit<ListboxProps, 'onChange'> & {\n  $isDisabled: ListboxProps['isDisabled'];\n  $isInvalid: ListboxProps['isInvalid'];\n  $isReadOnly: ListboxProps['isReadOnly'];\n  $variant: ListboxProps['variant'];\n};\n"],"names":["ListboxSelectionMode","single","multiple","ListboxActionType","ListboxVariant","standalone","unstyled"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,oBAAoB,GAAG;AAClCC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;AAUYC,IAAAA,iBAAiB,0BAAjBA,iBAAiB,EAAA;EAAjBA,iBAAiB,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAjBA,iBAAiB,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;EAAjBA,iBAAiB,CAAA,gBAAA,CAAA,GAAA,gBAAA,CAAA;AAAA,EAAA,OAAjBA,iBAAiB,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AA8B7B;AACA;AACA;AACO,MAAMC,cAAc,GAAG;AAC5BC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;;;"}

package/packages/design-system/src/components/listbox/_internal/useListboxItem.js

@@ -0,0 +1,90 @@
+import { useContext, useCallback, useEffect } from 'react';
+import { ListboxContext } from './context.js';
+import { ListboxActionType } from './types.js';
+import { useFocusOnListItem } from '../../focus-within-group/_internal/useFocusOnListItem.js';
+
+function useListboxItem(props) {
+  var _context$state, _context$state$select;
+  const {
+    domElementRef,
+    value,
+    id,
+    isDisabled,
+    propsIsSelected
+  } = props;
+  const {
+    tabIndex,
+    isFocused,
+    handleKeyDown: handleFocusKeyDown,
+    handleClick: handleFocusClick
+  } = useFocusOnListItem({
+    domElementRef,
+    isDisabled: isDisabled,
+    id,
+    value
+  });
+  const context = useContext(ListboxContext);
+  const handleKeyDown = useCallback(event => {
+    handleFocusKeyDown(event);
+    const code = event.code;
+    if (code === 'Enter' || code === 'Space') {
+      if (context.state.selectionMode === 'multiple') {
+        context.dispatch({
+          type: ListboxActionType.TOGGLE,
+          payload: {
+            value,
+            activedescendant: [id, value]
+          }
+        });
+      } else {
+        context.dispatch({
+          type: ListboxActionType.SET,
+          payload: {
+            values: [value],
+            activedescendant: [id, value]
+          }
+        });
+      }
+    }
+  }, []);
+  const handleClick = useCallback(() => {
+    handleFocusClick();
+    if (context.state.selectionMode === 'multiple') {
+      if (value) {
+        context.dispatch({
+          type: ListboxActionType.TOGGLE,
+          payload: {
+            value,
+            activedescendant: [id, value]
+          }
+        });
+      }
+    } else {
+      context.dispatch({
+        type: ListboxActionType.SET,
+        payload: {
+          values: [value],
+          activedescendant: [id, value]
+        }
+      });
+    }
+  }, [value]);
+  const isSelected = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : (context === null || context === void 0 ? void 0 : (_context$state = context.state) === null || _context$state === void 0 ? void 0 : (_context$state$select = _context$state.selectedValues) === null || _context$state$select === void 0 ? void 0 : _context$state$select.find(selectedValue => selectedValue === value)) !== undefined;
+  useEffect(() => {
+    if (isFocused && domElementRef.current) {
+      var _current;
+      (_current = domElementRef.current) === null || _current === void 0 ? void 0 : _current.focus();
+    }
+  }, [isFocused]);
+  return {
+    tabIndex,
+    isFocused,
+    isSelected,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  };
+}
+
+export { useListboxItem };
+//# sourceMappingURL=useListboxItem.js.map

package/packages/design-system/src/components/listbox/_internal/useListboxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListboxItem.js","sources":["../../../../../../../src/components/listbox/useListboxItem.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, RefObject, KeyboardEvent } from 'react';\nimport { ListboxContext } from './context';\nimport { ListboxActionType, UseListboxItemProps } from './types';\nimport { useFocusOnListItem } from '../focus-within-group';\n\nexport function useListboxItem(props: {\n  domElementRef: RefObject<Element>;\n  value: string;\n  id?: string;\n  isDisabled?: boolean;\n  propsIsSelected?: boolean;\n}): UseListboxItemProps {\n  const { domElementRef, value, id, isDisabled, propsIsSelected } = props;\n\n  const {\n    tabIndex,\n    isFocused,\n    handleKeyDown: handleFocusKeyDown,\n    handleClick: handleFocusClick,\n  } = useFocusOnListItem({ domElementRef, isDisabled: isDisabled!, id, value });\n\n  const context = useContext(ListboxContext);\n\n  const handleKeyDown = useCallback((event: KeyboardEvent) => {\n    handleFocusKeyDown(event);\n    const code = event.code;\n    if (code === 'Enter' || code === 'Space') {\n      if (context.state.selectionMode === 'multiple') {\n        context.dispatch({\n          type: ListboxActionType.TOGGLE,\n          payload: { value, activedescendant: [id!, value] },\n        });\n      } else {\n        context.dispatch({\n          type: ListboxActionType.SET,\n          payload: {\n            values: [value],\n            activedescendant: [id!, value],\n          },\n        });\n      }\n    }\n  }, []);\n\n  const handleClick = useCallback(() => {\n    handleFocusClick();\n    if (context.state.selectionMode === 'multiple') {\n      if (value) {\n        context.dispatch({\n          type: ListboxActionType.TOGGLE,\n          payload: { value, activedescendant: [id!, value] },\n        });\n      }\n    } else {\n      context.dispatch({\n        type: ListboxActionType.SET,\n        payload: {\n          values: [value],\n          activedescendant: [id!, value],\n        },\n      });\n    }\n  }, [value]);\n\n  const isSelected =\n    propsIsSelected ?? context?.state?.selectedValues?.find((selectedValue) => selectedValue === value) !== undefined;\n\n  useEffect(() => {\n    if (isFocused && domElementRef.current) {\n      (domElementRef as RefObject<SVGElement | HTMLElement>).current?.focus();\n    }\n  }, [isFocused]);\n\n  return {\n    tabIndex,\n    isFocused,\n    isSelected,\n    isDisabled,\n    handleKeyDown,\n    handleClick,\n  };\n}\n"],"names":["useListboxItem","props","_context$state","_context$state$select","domElementRef","value","id","isDisabled","propsIsSelected","tabIndex","isFocused","handleKeyDown","handleFocusKeyDown","handleClick","handleFocusClick","useFocusOnListItem","context","useContext","ListboxContext","useCallback","event","code","state","selectionMode","dispatch","type","ListboxActionType","TOGGLE","payload","activedescendant","SET","values","isSelected","selectedValues","find","selectedValue","undefined","useEffect","current","_current","focus"],"mappings":"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"}

package/packages/design-system/src/components/number/_internal/Number2.js

@@ -0,0 +1,105 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledNumber } from './styles.js';
+import { useNumberFormatter } from '../../../react-aria/react-aria/i18n/_internal/useNumberFormatter.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+
+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.
+ */
+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 { Number };
+//# sourceMappingURL=Number2.js.map

package/packages/design-system/src/components/number/_internal/Number2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Number2.js","sources":["../../../../../../../src/components/number/Number.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport { useNumberFormatter } from '../../react-aria/react-aria/i18n';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledNumber } from './styles';\nimport { NumberProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Number';\nconst CLASSNAME = 'redsift-number';\n\n/**\n * The Number component.\n */\nexport const Number: Comp<NumberProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    as,\n    className,\n    color,\n    compactDisplay = 'short',\n    currency,\n    currencyDisplay = 'symbol',\n    currencySign = 'standard',\n    fontSize,\n    fontFamily,\n    fontWeight,\n    lineHeight,\n    localeMatcher = 'best fit',\n    maximumFractionDigits,\n    maximumSignificantDigits,\n    minimumFractionDigits,\n    minimumIntegerDigits,\n    minimumSignificantDigits,\n    notation = 'standard',\n    noWrap,\n    numberingSystem,\n    roundingIncrement,\n    roundingMode = 'halfExpand',\n    roundingPriority = 'auto',\n    signDisplay = 'auto',\n    theme: propsTheme,\n    trailingZeroDisplay = 'auto',\n    type = 'decimal',\n    unit,\n    unitDisplay = 'short',\n    useGrouping,\n    value,\n    variant,\n    ...forwardedProps\n  } = props;\n  const formatter = useNumberFormatter({\n    compactDisplay,\n    currency,\n    currencyDisplay,\n    currencySign,\n    localeMatcher,\n    ...(maximumFractionDigits !== undefined && { maximumFractionDigits }),\n    ...(maximumSignificantDigits !== undefined && {\n      maximumSignificantDigits,\n    }),\n    ...(minimumFractionDigits !== undefined && { minimumFractionDigits }),\n    ...(minimumIntegerDigits !== undefined && { minimumIntegerDigits }),\n    ...(minimumSignificantDigits !== undefined && {\n      minimumSignificantDigits,\n    }),\n    notation,\n    numberingSystem,\n    // @ts-ignore\n    roundingIncrement,\n    // @ts-ignore\n    roundingMode,\n    // @ts-ignore\n    roundingPriority,\n    signDisplay,\n    style: type,\n    // @ts-ignore\n    trailingZeroDisplay,\n    unit,\n    unitDisplay,\n    useGrouping,\n  });\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledNumber\n      as={as}\n      {...forwardedProps}\n      $as={as}\n      className={classNames(Number.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $color={color}\n      $lineHeight={lineHeight}\n      $fontSize={fontSize}\n      $fontFamily={fontFamily}\n      $fontWeight={fontWeight}\n      $noWrap={noWrap}\n      $theme={theme}\n      $variant={variant}\n    >\n      {formatter.format(value)}\n    </StyledNumber>\n  );\n});\nNumber.className = CLASSNAME;\nNumber.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Number","forwardRef","props","ref","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","propsTheme","trailingZeroDisplay","type","unit","unitDisplay","useGrouping","value","variant","forwardedProps","_objectWithoutProperties","_excluded","formatter","useNumberFormatter","_objectSpread","undefined","style","useTheme","React","createElement","StyledNumber","_extends","$as","classNames","$color","$lineHeight","$fontSize","$fontFamily","$fontWeight","$noWrap","$theme","$variant","format","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,cAAc,GAAG,QAAQ,CAAA;AAC/B,MAAMC,SAAS,GAAG,gBAAgB,CAAA;;AAElC;AACA;AACA;AACO,MAAMC,MAAyC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;MACJC,EAAE;MACFC,SAAS;MACTC,KAAK;AACLC,MAAAA,cAAc,GAAG,OAAO;MACxBC,QAAQ;AACRC,MAAAA,eAAe,GAAG,QAAQ;AAC1BC,MAAAA,YAAY,GAAG,UAAU;MACzBC,QAAQ;MACRC,UAAU;MACVC,UAAU;MACVC,UAAU;AACVC,MAAAA,aAAa,GAAG,UAAU;MAC1BC,qBAAqB;MACrBC,wBAAwB;MACxBC,qBAAqB;MACrBC,oBAAoB;MACpBC,wBAAwB;AACxBC,MAAAA,QAAQ,GAAG,UAAU;MACrBC,MAAM;MACNC,eAAe;MACfC,iBAAiB;AACjBC,MAAAA,YAAY,GAAG,YAAY;AAC3BC,MAAAA,gBAAgB,GAAG,MAAM;AACzBC,MAAAA,WAAW,GAAG,MAAM;AACpBC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,mBAAmB,GAAG,MAAM;AAC5BC,MAAAA,IAAI,GAAG,SAAS;MAChBC,IAAI;AACJC,MAAAA,WAAW,GAAG,OAAO;MACrBC,WAAW;MACXC,KAAK;AACLC,MAAAA,OAAAA;AAEF,KAAC,GAAGlC,KAAK;AADJmC,IAAAA,cAAc,GAAAC,wBAAA,CACfpC,KAAK,EAAAqC,SAAA,CAAA,CAAA;AACT,EAAA,MAAMC,SAAS,GAAGC,kBAAkB,CAAAC,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA;IAClCnC,cAAc;IACdC,QAAQ;IACRC,eAAe;IACfC,YAAY;AACZK,IAAAA,aAAAA;GACIC,EAAAA,qBAAqB,KAAK2B,SAAS,IAAI;AAAE3B,IAAAA,qBAAAA;AAAsB,GAAC,CAChEC,EAAAA,wBAAwB,KAAK0B,SAAS,IAAI;AAC5C1B,IAAAA,wBAAAA;AACF,GAAC,CACGC,EAAAA,qBAAqB,KAAKyB,SAAS,IAAI;AAAEzB,IAAAA,qBAAAA;AAAsB,GAAC,CAChEC,EAAAA,oBAAoB,KAAKwB,SAAS,IAAI;AAAExB,IAAAA,oBAAAA;AAAqB,GAAC,CAC9DC,EAAAA,wBAAwB,KAAKuB,SAAS,IAAI;AAC5CvB,IAAAA,wBAAAA;GACD,CAAA,EAAA,EAAA,EAAA;IACDC,QAAQ;IACRE,eAAe;AACf;IACAC,iBAAiB;AACjB;IACAC,YAAY;AACZ;IACAC,gBAAgB;IAChBC,WAAW;AACXiB,IAAAA,KAAK,EAAEb,IAAI;AACX;IACAD,mBAAmB;IACnBE,IAAI;IACJC,WAAW;AACXC,IAAAA,WAAAA;AAAW,GAAA,CACZ,CAAC,CAAA;AAEF,EAAA,MAAMN,KAAK,GAAGiB,QAAQ,CAAChB,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEiB,cAAA,CAAAC,aAAA,CAACC,YAAY,EAAAC,QAAA,CAAA;AACX7C,IAAAA,EAAE,EAAEA,EAAAA;AAAG,GAAA,EACHiC,cAAc,EAAA;AAClBa,IAAAA,GAAG,EAAE9C,EAAG;IACRC,SAAS,EAAE8C,UAAU,CAACnD,MAAM,CAACK,SAAS,EAAEA,SAAS,CAAE;AACnDF,IAAAA,GAAG,EAAEA,GAAiC;AACtCiD,IAAAA,MAAM,EAAE9C,KAAM;AACd+C,IAAAA,WAAW,EAAEvC,UAAW;AACxBwC,IAAAA,SAAS,EAAE3C,QAAS;AACpB4C,IAAAA,WAAW,EAAE3C,UAAW;AACxB4C,IAAAA,WAAW,EAAE3C,UAAW;AACxB4C,IAAAA,OAAO,EAAEnC,MAAO;AAChBoC,IAAAA,MAAM,EAAE9B,KAAM;AACd+B,IAAAA,QAAQ,EAAEvB,OAAAA;AAAQ,GAAA,CAAA,EAEjBI,SAAS,CAACoB,MAAM,CAACzB,KAAK,CACX,CAAC,CAAA;AAEnB,CAAC,EAAC;AACFnC,MAAM,CAACK,SAAS,GAAGN,SAAS,CAAA;AAC5BC,MAAM,CAAC6D,WAAW,GAAG/D,cAAc;;;;"}

package/packages/design-system/src/components/number/_internal/number.js

@@ -0,0 +1,2 @@
+export { Number } from './Number2.js';
+//# sourceMappingURL=number.js.map

package/packages/design-system/src/components/number/_internal/styles.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { StyledText } from '../../text/_internal/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledNumber = styled(StyledText)``;
+
+export { StyledNumber };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/number/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/number/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledText } from '../text/styles';\nimport { StyledNumberProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledNumber = styled(StyledText)<StyledNumberProps>``;\n"],"names":["StyledNumber","styled","StyledText"],"mappings":";;;AAIA;AACA;AACA;MACaA,YAAY,GAAGC,MAAM,CAACC,UAAU,CAAqB,CAAC;;;;"}

package/packages/design-system/src/components/number-field/_internal/NumberField.js

@@ -0,0 +1,216 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { warnIfNoAccessibleLabelFound } from '../../../utils/_internal/warnIfNoAccessibleLabelFound.js';
+import { NumberFieldVariant } from './types.js';
+import { StyledNumberField } from './styles.js';
+import { mdiMenuUp, mdiMenuDown } from '@redsift/icons';
+import { StyledIconButton } from '../../icon-button/_internal/styles.js';
+import { useLocale } from '../../../react-aria/react-aria/i18n/_internal/context.js';
+import { useNumberFieldState } from '../../../react-aria/react-stately/numberfield/_internal/useNumberFieldState.js';
+import { useNumberField } from '../../../react-aria/react-aria/numberfield/_internal/useNumberField.js';
+import { useButton } from '../../../react-aria/react-aria/button/_internal/useButton.js';
+import { useFocusRing } from '../../../react-aria/react-aria/focus/_internal/useFocusRing.js';
+import { useFocusWithin } from '../../../react-aria/react-aria/interactions/_internal/useFocusWithin.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { Icon } from '../../icon/_internal/Icon2.js';
+import { Flexbox } from '../../flexbox/_internal/Flexbox2.js';
+
+const _excluded = ["autoFocus", "className", "decrementAriaLabel", "defaultValue", "formatOptions", "id", "incrementAriaLabel", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isWheelDisabled", "label", "leftIcon", "maxValue", "minValue", "onBlur", "onChange", "onFocus", "onFocusChange", "onKeyDown", "onKeyUp", "placeholder", "step", "theme", "value", "variant"];
+const COMPONENT_NAME = 'NumberField';
+const CLASSNAME = 'redsift-number-field';
+
+/**
+ * The NumberField component.
+ * Can be used as controlled or uncontrolled.
+ */
+const NumberField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      autoFocus,
+      className,
+      decrementAriaLabel,
+      defaultValue,
+      formatOptions,
+      id,
+      incrementAriaLabel,
+      inputProps: propsInputProps,
+      inputRef: propsInputRef,
+      isColored = true,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isWheelDisabled,
+      label,
+      leftIcon,
+      maxValue,
+      minValue,
+      onBlur: onBlurProps,
+      onChange: propsOnChange,
+      onFocus: onFocusProps,
+      onFocusChange,
+      onKeyDown,
+      onKeyUp,
+      placeholder,
+      step,
+      theme: propsTheme,
+      value,
+      variant = NumberFieldVariant.default
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const numberFieldProps = {
+    id,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    minValue,
+    maxValue,
+    step,
+    autoFocus,
+    label,
+    formatOptions,
+    onBlur: onBlurProps,
+    onFocus: onFocusProps,
+    onFocusChange,
+    onKeyDown,
+    onKeyUp,
+    value,
+    defaultValue,
+    onChange: propsOnChange
+  };
+  const theme = useTheme(propsTheme);
+  const {
+    locale
+  } = useLocale();
+  const state = useNumberFieldState(_objectSpread2({
+    locale
+  }, numberFieldProps));
+  const _inputRef = React__default.useRef(null);
+  const inputRef = propsInputRef !== null && propsInputRef !== void 0 ? propsInputRef : _inputRef;
+  const {
+    labelProps,
+    groupProps,
+    inputProps,
+    incrementButtonProps,
+    decrementButtonProps
+  } = useNumberField(_objectSpread2({
+    decrementAriaLabel,
+    incrementAriaLabel,
+    isWheelDisabled
+  }, numberFieldProps), state, inputRef);
+  const incrementButtonRef = useRef(null);
+  const {
+    buttonProps: incrementButtonForwardedProps
+  } = useButton(incrementButtonProps, incrementButtonRef);
+  const decrementButtonRef = useRef(null);
+  const {
+    buttonProps: decrementButtonForwardedProps
+  } = useButton(decrementButtonProps, decrementButtonRef);
+  const {
+    isFocusVisible,
+    isFocused,
+    focusProps: {
+      onFocus,
+      onBlur
+    }
+  } = useFocusRing({
+    autoFocus
+  });
+  const [isFocusWithin, setFocusWithin] = useState(Boolean(autoFocus));
+  const {
+    focusWithinProps
+  } = useFocusWithin({
+    onFocusWithinChange: isFocusWithin => setFocusWithin(isFocusWithin)
+  });
+  warnIfNoAccessibleLabelFound(props, [label], 'NumberField');
+  return /*#__PURE__*/React__default.createElement(StyledNumberField, _extends({}, forwardedProps, focusWithinProps, {
+    $hasContent: isFocusWithin || Boolean(inputProps.value !== undefined && inputProps.value !== '') || Boolean(placeholder),
+    $hasLeftIcon: Boolean(leftIcon),
+    $isColored: isColored,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !(inputProps.value !== undefined),
+    $isRequired: isRequired,
+    $isFocused: isFocused,
+    $theme: theme,
+    $variant: variant,
+    className: classNames(NumberField.className, className),
+    ref: ref
+  }), label ? /*#__PURE__*/React__default.createElement("label", _extends({}, labelProps, {
+    className: `${NumberField.className}__label`
+  }), /*#__PURE__*/React__default.createElement("span", null, label)) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: `${NumberField.className}__input-wrapper`
+  }, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    color: isDisabled ? 'question' : 'black'
+  }, leftIcon, {
+    "aria-hidden": "true",
+    className: "left"
+  })) : null, /*#__PURE__*/React__default.createElement(Flexbox, _extends({}, groupProps, {
+    flexDirection: "row",
+    gap: "0",
+    width: "100%"
+  }), /*#__PURE__*/React__default.createElement("input", _extends({}, propsInputProps, inputProps, {
+    onChange: event => {
+      if (propsOnChange) {
+        propsOnChange(Number(event.target.value));
+      } else {
+        var _inputProps$onChange;
+        (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, event);
+      }
+    },
+    onBlur: event => {
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+      onBlurProps === null || onBlurProps === void 0 ? void 0 : onBlurProps(event);
+    },
+    onFocus: event => {
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+      onFocusProps === null || onFocusProps === void 0 ? void 0 : onFocusProps(event);
+    },
+    placeholder: placeholder ? `${placeholder}` : undefined,
+    className: `${NumberField.className}-input-wrapper__input`,
+    ref: inputRef,
+    width: "100%"
+  })), /*#__PURE__*/React__default.createElement(Flexbox, {
+    className: `${NumberField.className}-input-wrapper__toolbar`,
+    flexDirection: "column",
+    gap: "0"
+  }, /*#__PURE__*/React__default.createElement(StyledIconButton, _extends({
+    $color: "grey",
+    $isActive: false,
+    $isDisabled: isDisabled,
+    $isGradient: false,
+    $isHovered: false,
+    $isLoading: false,
+    $variant: variant === NumberFieldVariant.underline ? 'unstyled' : 'secondary',
+    $theme: theme
+  }, incrementButtonForwardedProps, {
+    className: `${NumberField.className}-input-wrapper-toolbar__increment-button`
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiMenuUp,
+    color: isDisabled ? undefined : 'grey'
+  })), /*#__PURE__*/React__default.createElement(StyledIconButton, _extends({
+    $color: "grey",
+    $isActive: false,
+    $isDisabled: isDisabled,
+    $isGradient: false,
+    $isHovered: false,
+    $isLoading: false,
+    $variant: variant === NumberFieldVariant.underline ? 'unstyled' : 'secondary',
+    $theme: theme
+  }, decrementButtonForwardedProps, {
+    className: `${NumberField.className}-input-wrapper-toolbar__decrement-button`
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiMenuDown,
+    color: isDisabled ? undefined : 'grey'
+  })))), /*#__PURE__*/React__default.createElement("fieldset", {
+    "aria-hidden": "true",
+    className: `${NumberField.className}-input-wrapper__fieldset`
+  }, /*#__PURE__*/React__default.createElement("legend", {
+    className: `${NumberField.className}-input-wrapper-fieldset__legend`
+  }, label ? /*#__PURE__*/React__default.createElement("span", null, label) : null))));
+});
+NumberField.className = CLASSNAME;
+NumberField.displayName = COMPONENT_NAME;
+
+export { NumberField };
+//# sourceMappingURL=NumberField.js.map

package/packages/design-system/src/components/number-field/_internal/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sources":["../../../../../../../src/components/number-field/NumberField.tsx"],"sourcesContent":["import React, { ComponentProps, forwardRef, MutableRefObject, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { useFocusWithin } from '../../react-aria/react-aria/interactions';\nimport { useNumberFieldState } from '../../react-aria/react-stately/numberfield';\nimport { useNumberField } from '../../react-aria/react-aria/numberfield';\nimport { useButton } from '../../react-aria/react-aria/button';\nimport { Comp } from '../../types';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { NumberFieldProps, NumberFieldVariant } from './types';\nimport { StyledNumberField } from './styles';\nimport { Icon } from '../../components/icon';\nimport { mdiMenuDown, mdiMenuUp } from '@redsift/icons';\nimport { Flexbox } from '../flexbox';\nimport { useTheme } from '../theme';\nimport { StyledIconButton } from '../icon-button/styles';\nimport { useLocale } from '../../react-aria/react-aria/i18n';\n\nconst COMPONENT_NAME = 'NumberField';\nconst CLASSNAME = 'redsift-number-field';\n\n/**\n * The NumberField component.\n * Can be used as controlled or uncontrolled.\n */\nexport const NumberField: Comp<NumberFieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    autoFocus,\n    className,\n    decrementAriaLabel,\n    defaultValue,\n    formatOptions,\n    id,\n    incrementAriaLabel,\n    inputProps: propsInputProps,\n    inputRef: propsInputRef,\n    isColored = true,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    isWheelDisabled,\n    label,\n    leftIcon,\n    maxValue,\n    minValue,\n    onBlur: onBlurProps,\n    onChange: propsOnChange,\n    onFocus: onFocusProps,\n    onFocusChange,\n    onKeyDown,\n    onKeyUp,\n    placeholder,\n    step,\n    theme: propsTheme,\n    value,\n    variant = NumberFieldVariant.default,\n    ...forwardedProps\n  } = props;\n\n  const numberFieldProps = {\n    id,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    minValue,\n    maxValue,\n    step,\n    autoFocus,\n    label,\n    formatOptions,\n    onBlur: onBlurProps,\n    onFocus: onFocusProps,\n    onFocusChange,\n    onKeyDown,\n    onKeyUp,\n    value,\n    defaultValue,\n    onChange: propsOnChange,\n  };\n\n  const theme = useTheme(propsTheme);\n\n  const { locale } = useLocale();\n  const state = useNumberFieldState({ locale, ...numberFieldProps });\n  const _inputRef = React.useRef(null);\n  const inputRef = propsInputRef ?? _inputRef;\n  const { labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField(\n    {\n      decrementAriaLabel,\n      incrementAriaLabel,\n      isWheelDisabled,\n      ...numberFieldProps,\n    },\n    state,\n    inputRef\n  );\n\n  const incrementButtonRef = useRef<HTMLButtonElement>(null);\n  const { buttonProps: incrementButtonForwardedProps } = useButton(incrementButtonProps, incrementButtonRef);\n  const decrementButtonRef = useRef<HTMLButtonElement>(null);\n  const { buttonProps: decrementButtonForwardedProps } = useButton(decrementButtonProps, decrementButtonRef);\n\n  const {\n    isFocusVisible,\n    isFocused,\n    focusProps: { onFocus, onBlur },\n  } = useFocusRing({\n    autoFocus,\n  });\n  const [isFocusWithin, setFocusWithin] = useState(Boolean(autoFocus));\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocusWithin) => setFocusWithin(isFocusWithin),\n  });\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [label], 'NumberField');\n\n  return (\n    <StyledNumberField\n      {...forwardedProps}\n      {...focusWithinProps}\n      $hasContent={\n        isFocusWithin || Boolean(inputProps.value !== undefined && inputProps.value !== '') || Boolean(placeholder)\n      }\n      $hasLeftIcon={Boolean(leftIcon)}\n      $isColored={isColored}\n      $isDisabled={isDisabled}\n      $isFocusVisible={isFocusVisible}\n      $isInvalid={isInvalid || (isRequired && !(inputProps.value !== undefined))}\n      $isRequired={isRequired}\n      $isFocused={isFocused}\n      $theme={theme}\n      $variant={variant}\n      className={classNames(NumberField.className, className)}\n      ref={ref as MutableRefObject<HTMLDivElement>}\n    >\n      {label ? (\n        <label {...labelProps} className={`${NumberField.className}__label`}>\n          <span>{label}</span>\n        </label>\n      ) : null}\n      <div className={`${NumberField.className}__input-wrapper`}>\n        {leftIcon ? (\n          <Icon color={isDisabled ? 'question' : 'black'} {...leftIcon} aria-hidden=\"true\" className=\"left\" />\n        ) : null}\n        <Flexbox {...groupProps} flexDirection=\"row\" gap=\"0\" width=\"100%\">\n          <input\n            {...propsInputProps}\n            {...inputProps}\n            onChange={(event) => {\n              if (propsOnChange) {\n                propsOnChange(Number(event.target.value));\n              } else {\n                inputProps.onChange?.(event);\n              }\n            }}\n            onBlur={(event) => {\n              onBlur?.(event);\n              onBlurProps?.(event);\n            }}\n            onFocus={(event) => {\n              onFocus?.(event);\n              onFocusProps?.(event);\n            }}\n            placeholder={placeholder ? `${placeholder}` : undefined}\n            className={`${NumberField.className}-input-wrapper__input`}\n            ref={inputRef as MutableRefObject<HTMLInputElement>}\n            width=\"100%\"\n          />\n          <Flexbox className={`${NumberField.className}-input-wrapper__toolbar`} flexDirection=\"column\" gap=\"0\">\n            <StyledIconButton\n              $color=\"grey\"\n              $isActive={false}\n              $isDisabled={isDisabled}\n              $isGradient={false}\n              $isHovered={false}\n              $isLoading={false}\n              $variant={variant === NumberFieldVariant.underline ? 'unstyled' : 'secondary'}\n              $theme={theme}\n              {...incrementButtonForwardedProps}\n              className={`${NumberField.className}-input-wrapper-toolbar__increment-button`}\n            >\n              <Icon icon={mdiMenuUp} color={isDisabled ? undefined : 'grey'} />\n            </StyledIconButton>\n            <StyledIconButton\n              $color=\"grey\"\n              $isActive={false}\n              $isDisabled={isDisabled}\n              $isGradient={false}\n              $isHovered={false}\n              $isLoading={false}\n              $variant={variant === NumberFieldVariant.underline ? 'unstyled' : 'secondary'}\n              $theme={theme}\n              {...decrementButtonForwardedProps}\n              className={`${NumberField.className}-input-wrapper-toolbar__decrement-button`}\n            >\n              <Icon icon={mdiMenuDown} color={isDisabled ? undefined : 'grey'} />\n            </StyledIconButton>\n          </Flexbox>\n        </Flexbox>\n        <fieldset aria-hidden=\"true\" className={`${NumberField.className}-input-wrapper__fieldset`}>\n          <legend className={`${NumberField.className}-input-wrapper-fieldset__legend`}>\n            {label ? <span>{label}</span> : null}\n          </legend>\n        </fieldset>\n      </div>\n    </StyledNumberField>\n  );\n});\nNumberField.className = CLASSNAME;\nNumberField.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","NumberField","forwardRef","props","ref","autoFocus","className","decrementAriaLabel","defaultValue","formatOptions","id","incrementAriaLabel","inputProps","propsInputProps","inputRef","propsInputRef","isColored","isDisabled","isInvalid","isReadOnly","isRequired","isWheelDisabled","label","leftIcon","maxValue","minValue","onBlur","onBlurProps","onChange","propsOnChange","onFocus","onFocusProps","onFocusChange","onKeyDown","onKeyUp","placeholder","step","theme","propsTheme","value","variant","NumberFieldVariant","default","forwardedProps","_objectWithoutProperties","_excluded","numberFieldProps","useTheme","locale","useLocale","state","useNumberFieldState","_objectSpread","_inputRef","React","useRef","labelProps","groupProps","incrementButtonProps","decrementButtonProps","useNumberField","incrementButtonRef","buttonProps","incrementButtonForwardedProps","useButton","decrementButtonRef","decrementButtonForwardedProps","isFocusVisible","isFocused","focusProps","useFocusRing","isFocusWithin","setFocusWithin","useState","Boolean","focusWithinProps","useFocusWithin","onFocusWithinChange","warnIfNoAccessibleLabelFound","createElement","StyledNumberField","_extends","$hasContent","undefined","$hasLeftIcon","$isColored","$isDisabled","$isFocusVisible","$isInvalid","$isRequired","$isFocused","$theme","$variant","classNames","Icon","color","Flexbox","flexDirection","gap","width","event","Number","target","_inputProps$onChange","call","StyledIconButton","$color","$isActive","$isGradient","$isHovered","$isLoading","underline","icon","mdiMenuUp","mdiMenuDown","displayName"],"mappings":"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"}

package/packages/design-system/src/components/number-field/_internal/number-field.js

@@ -0,0 +1,3 @@
+export { NumberFieldVariant } from './types.js';
+export { NumberField } from './NumberField.js';
+//# sourceMappingURL=number-field.js.map

package/packages/design-system/src/components/number-field/_internal/number-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}