@redsift/design-system 11.5.0 → 11.6.0-muiv5-alpha.1

package/components/number-field/styles.js

@@ -0,0 +1,240 @@
+import styled, { css } from 'styled-components';
+import { NumberFieldVariant } from './types.js';
+import { baseStyling } from '../shared/styles.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component style.
+ */
+const StyledNumberField = styled.div`
+  height: fit-content;
+  position: relative;
+  width: fit-content;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  ${baseStyling}
+
+  border: 0;
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: top;
+
+  ${_ref => {
+  let {
+    $hasLeftIcon,
+    $hasContent,
+    $isFocused,
+    $isDisabled,
+    $isInvalid,
+    $isColored,
+    $theme,
+    $variant
+  } = _ref;
+  return css`
+    ${$isDisabled ? css`
+          pointer-events: none;
+        ` : ''}
+
+    .redsift-number-field__label {
+      font-family: var(--redsift-typography-input-text-font-family);
+      font-size: var(--redsift-typography-input-text-font-size);
+      font-weight: var(--redsift-typography-input-text-font-weight);
+      line-height: var(--redsift-typography-input-text-line-height);
+      left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};
+      overflow: hidden;
+      pointer-events: none;
+      position: absolute;
+      text-overflow: ellipsis;
+      top: ${$hasContent ? '-8px' : '-5px'};
+      transform-origin: top left;
+      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+        max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+      white-space: nowrap;
+      z-index: 1;
+
+      ${!$hasContent ? css`
+            max-width: calc(100% - 24px - 42px - ${$variant === NumberFieldVariant.underline ? '0px' : '14px'});
+            transform: translate(${$variant === NumberFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);
+          ` : css`
+            max-width: calc(133% - 32px - 42px - ${$variant === NumberFieldVariant.underline ? '0px' : '14px'});
+            transform: translate(${$variant === NumberFieldVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);
+          `}
+
+      ${$isDisabled ? css`
+            color: var(--redsift-color-neutral-light-grey);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-notifications-error-primary);
+          ` : $isFocused ? css`
+            color: ${$isColored ? 'var(--redsift-color-primary-n)' : 'var(--redsift-color-notifications-question-primary)'};
+          ` : css`
+            color: var(--redsift-color-neutral-${$theme === Theme.light ? 'x-dark-grey' : 'light-grey'});
+          `}
+    }
+
+    .redsift-number-field__input-wrapper {
+      align-items: flex-start;
+      box-sizing: border-box;
+      cursor: text;
+      display: inline-flex;
+      min-height: 42px;
+      position: relative;
+      width: 100%;
+    }
+
+    .redsift-number-field-input-wrapper__input {
+      background: none;
+      border: 0;
+      box-sizing: content-box;
+      display: flex;
+      flex: 1 1 auto;
+      font-family: var(--redsift-typography-input-text-font-family);
+      font-size: var(--redsift-typography-input-text-font-size);
+      font-weight: var(--redsift-typography-input-text-font-weight);
+      line-height: var(--redsift-typography-input-text-line-height);
+      min-width: 0;
+      min-width: 100px;
+      padding: 2px 0;
+      width: auto;
+      padding-bottom: 6px;
+      ${$variant !== NumberFieldVariant.underline && !$hasLeftIcon ? css`
+            padding-left: 16px;
+          ` : ''}
+      padding-top: 10px;
+
+      ${$isDisabled ? css`
+            color: var(--redsift-color-neutral-light-grey);
+          ` : css`
+            color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+          `}
+    }
+
+    .redsift-number-field-input-wrapper__input::placeholder {
+      color: var(--redsift-color-neutral-mid-grey);
+    }
+
+    .redsift-number-field-input-wrapper__input:focus {
+      outline: 0;
+    }
+
+    .redsift-number-field-input-wrapper__fieldset {
+      border-style: solid;
+      bottom: 0;
+      left: 1px;
+      margin: 0;
+      min-width: 0%;
+      overflow: hidden;
+      padding: 0 8px;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+      text-align: left;
+      top: -5px;
+
+      ${$variant === NumberFieldVariant.underline ? css`
+            border-bottom-width: 2px;
+          ` : css`
+            border-radius: 4px;
+            border-width: 2px;
+          `}
+
+      ${$isDisabled ? css`
+            border-color: var(--redsift-color-neutral-light-grey);
+          ` : $isInvalid ? css`
+            border-color: var(--redsift-color-notifications-error-primary);
+          ` : $isFocused ? css`
+            border-color: ${$isColored ? 'var(--redsift-color-primary-n)' : 'var(--redsift-color-notifications-question-primary)'};
+          ` : css`
+            border-color: var(--redsift-color-neutral-mid-grey);
+          `}
+    }
+
+    .redsift-number-field-input-wrapper-fieldset__legend {
+      display: block;
+      float: unset;
+      font-size: 11px;
+      height: 11px;
+      overflow: hidden;
+      padding: 0;
+      visibility: hidden;
+      white-space: nowrap;
+      width: auto;
+
+      ${!$hasContent ? css`
+            max-width: 0.01px;
+            transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+          ` : css`
+            max-width: calc(100% - 42px);
+            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;
+          `}
+    }
+
+    .redsift-number-field-input-wrapper-fieldset__legend > span {
+      display: inline-block;
+      opacity: 0;
+      padding-left: 5px;
+      padding-right: 5px;
+      visibility: visible;
+    }
+
+    .redsift-icon-button {
+      padding: 2px;
+    }
+
+    .redsift-number-field-input-wrapper__toolbar {
+      > button {
+        height: 21px;
+        width: 42px;
+        ${$isDisabled ? css`
+              border-color: var(--redsift-color-neutral-light-grey);
+            ` : $isInvalid ? css`
+              border-color: var(--redsift-color-notifications-error-primary);
+            ` : $isFocused ? css`
+              border-color: ${$isColored ? 'var(--redsift-color-primary-n)' : 'var(--redsift-color-notifications-question-primary)'};
+            ` : css`
+              border-color: var(--redsift-color-neutral-mid-grey);
+            `}
+      }
+
+      .redsift-number-field-input-wrapper-toolbar__increment-button {
+        border-top-width: 0;
+        border-right-width: 0;
+        border-bottom-width: 1px;
+        border-left-width: 2px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      .redsift-number-field-input-wrapper-toolbar__decrement-button {
+        border-top-width: 1px;
+        border-right-width: 0;
+        border-bottom-width: 0;
+        border-left-width: 2px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 4px;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    ${$variant !== NumberFieldVariant.underline ? css`
+          .redsift-icon.left {
+            padding-left: 12px;
+            padding-right: 8px;
+            line-height: 28px;
+            top: 10px;
+          }
+        ` : css`
+          .redsift-icon.left {
+            padding-right: 8px;
+            top: 10px;
+          }
+        `}
+  `;
+}}
+`;
+
+export { StyledNumberField };
+//# sourceMappingURL=styles.js.map

package/components/number-field/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/number-field/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledNumberFieldProps, NumberFieldVariant } from './types';\nimport { Theme } from '@redsift/design-system/types';\n\n/**\n * Component style.\n */\nexport const StyledNumberField = styled.div<StyledNumberFieldProps>`\n  height: fit-content;\n  position: relative;\n  width: fit-content;\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  ${baseStyling}\n\n  border: 0;\n  display: inline-flex;\n  flex-direction: column;\n  vertical-align: top;\n\n  ${({ $hasLeftIcon, $hasContent, $isFocused, $isDisabled, $isInvalid, $isColored, $theme, $variant }) => css`\n    ${$isDisabled\n      ? css`\n          pointer-events: none;\n        `\n      : ''}\n\n    .redsift-number-field__label {\n      font-family: var(--redsift-typography-input-text-font-family);\n      font-size: var(--redsift-typography-input-text-font-size);\n      font-weight: var(--redsift-typography-input-text-font-weight);\n      line-height: var(--redsift-typography-input-text-line-height);\n      left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};\n      overflow: hidden;\n      pointer-events: none;\n      position: absolute;\n      text-overflow: ellipsis;\n      top: ${$hasContent ? '-8px' : '-5px'};\n      transform-origin: top left;\n      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n        max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n      white-space: nowrap;\n      z-index: 1;\n\n      ${!$hasContent\n        ? css`\n            max-width: calc(100% - 24px - 42px - ${$variant === NumberFieldVariant.underline ? '0px' : '14px'});\n            transform: translate(${$variant === NumberFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);\n          `\n        : css`\n            max-width: calc(133% - 32px - 42px - ${$variant === NumberFieldVariant.underline ? '0px' : '14px'});\n            transform: translate(${$variant === NumberFieldVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);\n          `}\n\n      ${$isDisabled\n        ? css`\n            color: var(--redsift-color-neutral-light-grey);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-notifications-error-primary);\n          `\n        : $isFocused\n        ? css`\n            color: ${$isColored\n              ? 'var(--redsift-color-primary-n)'\n              : 'var(--redsift-color-notifications-question-primary)'};\n          `\n        : css`\n            color: var(--redsift-color-neutral-${$theme === Theme.light ? 'x-dark-grey' : 'light-grey'});\n          `}\n    }\n\n    .redsift-number-field__input-wrapper {\n      align-items: flex-start;\n      box-sizing: border-box;\n      cursor: text;\n      display: inline-flex;\n      min-height: 42px;\n      position: relative;\n      width: 100%;\n    }\n\n    .redsift-number-field-input-wrapper__input {\n      background: none;\n      border: 0;\n      box-sizing: content-box;\n      display: flex;\n      flex: 1 1 auto;\n      font-family: var(--redsift-typography-input-text-font-family);\n      font-size: var(--redsift-typography-input-text-font-size);\n      font-weight: var(--redsift-typography-input-text-font-weight);\n      line-height: var(--redsift-typography-input-text-line-height);\n      min-width: 0;\n      min-width: 100px;\n      padding: 2px 0;\n      width: auto;\n      padding-bottom: 6px;\n      ${$variant !== NumberFieldVariant.underline && !$hasLeftIcon\n        ? css`\n            padding-left: 16px;\n          `\n        : ''}\n      padding-top: 10px;\n\n      ${$isDisabled\n        ? css`\n            color: var(--redsift-color-neutral-light-grey);\n          `\n        : css`\n            color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n          `}\n    }\n\n    .redsift-number-field-input-wrapper__input::placeholder {\n      color: var(--redsift-color-neutral-mid-grey);\n    }\n\n    .redsift-number-field-input-wrapper__input:focus {\n      outline: 0;\n    }\n\n    .redsift-number-field-input-wrapper__fieldset {\n      border-style: solid;\n      bottom: 0;\n      left: 1px;\n      margin: 0;\n      min-width: 0%;\n      overflow: hidden;\n      padding: 0 8px;\n      pointer-events: none;\n      position: absolute;\n      right: 0;\n      text-align: left;\n      top: -5px;\n\n      ${$variant === NumberFieldVariant.underline\n        ? css`\n            border-bottom-width: 2px;\n          `\n        : css`\n            border-radius: 4px;\n            border-width: 2px;\n          `}\n\n      ${$isDisabled\n        ? css`\n            border-color: var(--redsift-color-neutral-light-grey);\n          `\n        : $isInvalid\n        ? css`\n            border-color: var(--redsift-color-notifications-error-primary);\n          `\n        : $isFocused\n        ? css`\n            border-color: ${$isColored\n              ? 'var(--redsift-color-primary-n)'\n              : 'var(--redsift-color-notifications-question-primary)'};\n          `\n        : css`\n            border-color: var(--redsift-color-neutral-mid-grey);\n          `}\n    }\n\n    .redsift-number-field-input-wrapper-fieldset__legend {\n      display: block;\n      float: unset;\n      font-size: 11px;\n      height: 11px;\n      overflow: hidden;\n      padding: 0;\n      visibility: hidden;\n      white-space: nowrap;\n      width: auto;\n\n      ${!$hasContent\n        ? css`\n            max-width: 0.01px;\n            transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n          `\n        : css`\n            max-width: calc(100% - 42px);\n            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;\n          `}\n    }\n\n    .redsift-number-field-input-wrapper-fieldset__legend > span {\n      display: inline-block;\n      opacity: 0;\n      padding-left: 5px;\n      padding-right: 5px;\n      visibility: visible;\n    }\n\n    .redsift-icon-button {\n      padding: 2px;\n    }\n\n    .redsift-number-field-input-wrapper__toolbar {\n      > button {\n        height: 21px;\n        width: 42px;\n        ${$isDisabled\n          ? css`\n              border-color: var(--redsift-color-neutral-light-grey);\n            `\n          : $isInvalid\n          ? css`\n              border-color: var(--redsift-color-notifications-error-primary);\n            `\n          : $isFocused\n          ? css`\n              border-color: ${$isColored\n                ? 'var(--redsift-color-primary-n)'\n                : 'var(--redsift-color-notifications-question-primary)'};\n            `\n          : css`\n              border-color: var(--redsift-color-neutral-mid-grey);\n            `}\n      }\n\n      .redsift-number-field-input-wrapper-toolbar__increment-button {\n        border-top-width: 0;\n        border-right-width: 0;\n        border-bottom-width: 1px;\n        border-left-width: 2px;\n        border-top-left-radius: 0;\n        border-top-right-radius: 4px;\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n\n      .redsift-number-field-input-wrapper-toolbar__decrement-button {\n        border-top-width: 1px;\n        border-right-width: 0;\n        border-bottom-width: 0;\n        border-left-width: 2px;\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 4px;\n        border-bottom-left-radius: 0;\n      }\n    }\n\n    ${$variant !== NumberFieldVariant.underline\n      ? css`\n          .redsift-icon.left {\n            padding-left: 12px;\n            padding-right: 8px;\n            line-height: 28px;\n            top: 10px;\n          }\n        `\n      : css`\n          .redsift-icon.left {\n            padding-right: 8px;\n            top: 10px;\n          }\n        `}\n  `}\n`;\n"],"names":["StyledNumberField","styled","div","baseStyling","_ref","$hasLeftIcon","$hasContent","$isFocused","$isDisabled","$isInvalid","$isColored","$theme","$variant","css","NumberFieldVariant","underline","Theme","light","dark"],"mappings":";;;;;AAKA;AACA;AACA;AACaA,MAAAA,iBAAiB,GAAGC,MAAM,CAACC,GAA4B,CAAA;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,YAAY;IAAEC,WAAW;IAAEC,UAAU;IAAEC,WAAW;IAAEC,UAAU;IAAEC,UAAU;IAAEC,MAAM;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAR,IAAA,CAAA;AAAA,EAAA,OAAKS,GAAI,CAAA;AAC9G,IAAML,EAAAA,WAAW,GACTK,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACD,EAAG,CAAA;AACX;AACA;AACA;AACA;AACA;AACA;AACA,YAAA,EAAcR,YAAY,IAAI,CAACC,WAAW,GAAG,MAAM,GAAG,GAAI,CAAA;AAC1D;AACA;AACA;AACA;AACA,WAAA,EAAaA,WAAW,GAAG,MAAM,GAAG,MAAO,CAAA;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA,MAAQ,EAAA,CAACA,WAAW,GACVO,GAAI,CAAA;AACd,iDAAmDD,EAAAA,QAAQ,KAAKE,kBAAkB,CAACC,SAAS,GAAG,KAAK,GAAG,MAAO,CAAA;AAC9G,iCAAmCH,EAAAA,QAAQ,KAAKE,kBAAkB,CAACC,SAAS,GAAG,KAAK,GAAG,MAAO,CAAA;AAC9F,UAAA,CAAW,GACDF,GAAI,CAAA;AACd,iDAAmDD,EAAAA,QAAQ,KAAKE,kBAAkB,CAACC,SAAS,GAAG,KAAK,GAAG,MAAO,CAAA;AAC9G,iCAAmCH,EAAAA,QAAQ,KAAKE,kBAAkB,CAACC,SAAS,GAAG,KAAK,GAAG,MAAO,CAAA;AAC9F,UAAY,CAAA,CAAA;AACZ;AACA,MAAQP,EAAAA,WAAW,GACTK,GAAI,CAAA;AACd;AACA,UAAW,CAAA,GACDJ,UAAU,GACVI,GAAI,CAAA;AACd;AACA,UAAW,CAAA,GACDN,UAAU,GACVM,GAAI,CAAA;AACd,mBAAA,EAAqBH,UAAU,GACf,gCAAgC,GAChC,qDAAsD,CAAA;AACtE,UAAA,CAAW,GACDG,GAAI,CAAA;AACd,+CAAiDF,EAAAA,MAAM,KAAKK,KAAK,CAACC,KAAK,GAAG,aAAa,GAAG,YAAa,CAAA;AACvG,UAAY,CAAA,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAQL,EAAAA,QAAQ,KAAKE,kBAAkB,CAACC,SAAS,IAAI,CAACV,YAAY,GACxDQ,GAAI,CAAA;AACd;AACA,UAAA,CAAW,GACD,EAAG,CAAA;AACb;AACA;AACA,MAAQL,EAAAA,WAAW,GACTK,GAAI,CAAA;AACd;AACA,UAAA,CAAW,GACDA,GAAI,CAAA;AACd,+CAAiDF,EAAAA,MAAM,KAAKK,KAAK,CAACE,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AACjG,UAAY,CAAA,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAA,EAAQN,QAAQ,KAAKE,kBAAkB,CAACC,SAAS,GACvCF,GAAI,CAAA;AACd;AACA,UAAA,CAAW,GACDA,GAAI,CAAA;AACd;AACA;AACA,UAAY,CAAA,CAAA;AACZ;AACA,MAAQL,EAAAA,WAAW,GACTK,GAAI,CAAA;AACd;AACA,UAAW,CAAA,GACDJ,UAAU,GACVI,GAAI,CAAA;AACd;AACA,UAAW,CAAA,GACDN,UAAU,GACVM,GAAI,CAAA;AACd,0BAAA,EAA4BH,UAAU,GACtB,gCAAgC,GAChC,qDAAsD,CAAA;AACtE,UAAA,CAAW,GACDG,GAAI,CAAA;AACd;AACA,UAAY,CAAA,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAQ,EAAA,CAACP,WAAW,GACVO,GAAI,CAAA;AACd;AACA;AACA,UAAA,CAAW,GACDA,GAAI,CAAA;AACd;AACA;AACA,UAAY,CAAA,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAUL,EAAAA,WAAW,GACTK,GAAI,CAAA;AAChB;AACA,YAAa,CAAA,GACDJ,UAAU,GACVI,GAAI,CAAA;AAChB;AACA,YAAa,CAAA,GACDN,UAAU,GACVM,GAAI,CAAA;AAChB,4BAAA,EAA8BH,UAAU,GACtB,gCAAgC,GAChC,qDAAsD,CAAA;AACxE,YAAA,CAAa,GACDG,GAAI,CAAA;AAChB;AACA,YAAc,CAAA,CAAA;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMD,QAAQ,KAAKE,kBAAkB,CAACC,SAAS,GACvCF,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACDA,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA,QAAU,CAAA,CAAA;AACV,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;;;;"}

package/components/number-field/types.d.ts

@@ -0,0 +1,74 @@
+import { FocusEvent, KeyboardEvent, ChangeEvent } from 'react';
+import { TextFieldProps } from '../text-field/types.js';
+import { ValueOf } from '../../types/helpers.js';
+
+/**
+ * Component variant.
+ */
+declare const NumberFieldVariant: {
+    readonly default: "default";
+    readonly underline: "underline";
+};
+type NumberFieldVariant = ValueOf<typeof NumberFieldVariant>;
+/**
+ * Component props.
+ */
+interface NumberFieldProps extends Omit<TextFieldProps, 'defaultValue' | 'onChange' | 'value' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'after' | 'internal' | 'pills' | 'placeholder'> {
+    /** Handler that is called when the element receives focus. */
+    onFocus?: (e: FocusEvent<Element>) => void;
+    /** Handler that is called when the element loses focus. */
+    onBlur?: (e: FocusEvent<Element>) => void;
+    /** Handler that is called when the element's focus status changes. */
+    onFocusChange?: (isFocused: boolean) => void;
+    /** Handler that is called when a key is pressed. */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    /** Handler that is called when a key is released. */
+    onKeyUp?: (e: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Default value.
+     * Used for uncontrolled version.
+     */
+    defaultValue?: number;
+    /** Method to handle component change. */
+    onChange?(value?: number, name?: string, event?: ChangeEvent<HTMLInputElement>): void;
+    /**
+     * Input value.
+     * Used for controlled version.
+     */
+    value?: number;
+    /** Placeholder. */
+    placeholder?: number;
+    /** A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used. */
+    decrementAriaLabel?: string;
+    /** A custom aria-label for the increment button. If not provided, the localized string "Increment" is used. */
+    incrementAriaLabel?: string;
+    /**
+     * Enables or disables changing the value with scroll.
+     */
+    isWheelDisabled?: boolean;
+    /**
+     * Formatting options for the value displayed in the number field.
+     * This also affects what characters are allowed to be typed by the user.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** The smallest value allowed for the input. */
+    minValue?: number;
+    /** The largest value allowed for the input. */
+    maxValue?: number;
+    /** The amount that the input value changes with each increment or decrement "tick". */
+    step?: number;
+}
+type StyledNumberFieldProps = Omit<NumberFieldProps, 'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isRequired' | 'onChange' | 'onBlur' | 'onFocus'> & {
+    $hasLeftIcon: boolean;
+    $hasContent: boolean;
+    $isColored: NumberFieldProps['isColored'];
+    $isDisabled: NumberFieldProps['isDisabled'];
+    $isInvalid: NumberFieldProps['isInvalid'];
+    $isFocused: boolean;
+    $isFocusVisible: boolean;
+    $isRequired: NumberFieldProps['isRequired'];
+    $theme: NumberFieldProps['theme'];
+    $variant: NumberFieldProps['variant'];
+};
+
+export { NumberFieldProps, NumberFieldVariant, StyledNumberFieldProps };

package/components/number-field/types.js

@@ -0,0 +1,14 @@
+/**
+ * Component variant.
+ */
+const NumberFieldVariant = {
+  default: 'default',
+  underline: 'underline'
+};
+
+/**
+ * Component props.
+ */
+
+export { NumberFieldVariant };
+//# sourceMappingURL=types.js.map

package/components/number-field/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/number-field/types.ts"],"sourcesContent":["import { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';\nimport { ValueOf } from '../../types';\nimport { TextFieldProps } from '../text-field';\n\n/**\n * Component variant.\n */\nexport const NumberFieldVariant = {\n  default: 'default',\n  underline: 'underline',\n} as const;\nexport type NumberFieldVariant = ValueOf<typeof NumberFieldVariant>;\n\n/**\n * Component props.\n */\nexport interface NumberFieldProps\n  extends Omit<\n    TextFieldProps,\n    | 'defaultValue'\n    | 'onChange'\n    | 'value'\n    | 'onBlur'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'onKeyUp'\n    | 'after'\n    | 'internal'\n    | 'pills'\n    | 'placeholder'\n  > {\n  /** Handler that is called when the element receives focus. */\n  onFocus?: (e: FocusEvent<Element>) => void;\n  /** Handler that is called when the element loses focus. */\n  onBlur?: (e: FocusEvent<Element>) => void;\n  /** Handler that is called when the element's focus status changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** Handler that is called when a key is pressed. */\n  onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;\n  /** Handler that is called when a key is released. */\n  onKeyUp?: (e: KeyboardEvent<HTMLElement>) => void;\n  /**\n   * Default value.\n   * Used for uncontrolled version.\n   */\n  defaultValue?: number;\n  /** Method to handle component change. */\n  onChange?(value?: number, name?: string, event?: ChangeEvent<HTMLInputElement>): void;\n  /**\n   * Input value.\n   * Used for controlled version.\n   */\n  value?: number;\n  /** Placeholder. */\n  placeholder?: number;\n  /** A custom aria-label for the decrement button. If not provided, the localized string \"Decrement\" is used. */\n  decrementAriaLabel?: string;\n  /** A custom aria-label for the increment button. If not provided, the localized string \"Increment\" is used. */\n  incrementAriaLabel?: string;\n  /**\n   * Enables or disables changing the value with scroll.\n   */\n  isWheelDisabled?: boolean;\n  /**\n   * Formatting options for the value displayed in the number field.\n   * This also affects what characters are allowed to be typed by the user.\n   */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** The smallest value allowed for the input. */\n  minValue?: number;\n  /** The largest value allowed for the input. */\n  maxValue?: number;\n  /** The amount that the input value changes with each increment or decrement \"tick\". */\n  step?: number;\n}\n\nexport type StyledNumberFieldProps = Omit<\n  NumberFieldProps,\n  'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isRequired' | 'onChange' | 'onBlur' | 'onFocus'\n> & {\n  $hasLeftIcon: boolean;\n  $hasContent: boolean;\n  $isColored: NumberFieldProps['isColored'];\n  $isDisabled: NumberFieldProps['isDisabled'];\n  $isInvalid: NumberFieldProps['isInvalid'];\n  $isFocused: boolean;\n  $isFocusVisible: boolean;\n  $isRequired: NumberFieldProps['isRequired'];\n  $theme: NumberFieldProps['theme'];\n  $variant: NumberFieldProps['variant'];\n};\n"],"names":["NumberFieldVariant","default","underline"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,kBAAkB,GAAG;AAChCC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAA;AACb,EAAU;;AAGV;AACA;AACA;;;;"}

package/components/pill/Pill.d.ts

@@ -0,0 +1,9 @@
+import { PillProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The Pill component.
+ */
+declare const Pill: Comp<PillProps, HTMLDivElement>;
+
+export { Pill };

package/components/pill/Pill.js

@@ -0,0 +1,93 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { pickTextColorBasedOnBgColorAdvanced, StyledPill } from './styles.js';
+import { PillSize } from './types.js';
+import { Number } from '../number/Number.js';
+import { useTheme } from '../theme/useTheme.js';
+import { PresentationColorPalette } from '../../types/colors.js';
+import { isComponent } from '../../utils/isComponent.js';
+import { Text } from '../text/Text.js';
+
+const _excluded = ["autoBreak", "borderColor", "children", "className", "color", "disabledColor", "hoverColor", "isDisabled", "size", "theme"];
+const COMPONENT_NAME = 'Pill';
+const CLASSNAME = 'redsift-pill';
+
+/**
+ * The Pill component.
+ */
+const Pill = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      autoBreak,
+      borderColor,
+      children,
+      className,
+      color: propsColor,
+      disabledColor,
+      hoverColor,
+      isDisabled,
+      size: propsSize,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const color = propsColor || PresentationColorPalette.blue;
+  const size = propsSize || PillSize.large;
+  const childArray = [];
+  React__default.Children.forEach(children, (child, index) => {
+    const currentClassName = React__default.Children.count(children) === 1 ? 'first last' : index === 0 ? 'first' : index === React__default.Children.count(children) - 1 ? 'last' : 'middle';
+    if (isComponent('MenuButton')(child) || isComponent('Select')(child) || isComponent('Dialog')(child) || isComponent('Popover')(child) || isComponent('Tooltip')(child)) {
+      var _child$key;
+      childArray.push( /*#__PURE__*/React__default.cloneElement(child, {
+        key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
+        triggerClassName: currentClassName,
+        variant: 'unstyled',
+        color: child.props.color ? child.props.color : pickTextColorBasedOnBgColorAdvanced(color, 'white', 'black')
+      }));
+    } else if (isComponent('IconButton')(child) || isComponent('Button')(child) || isComponent('ButtonLink')(child)) {
+      var _key;
+      childArray.push( /*#__PURE__*/React__default.cloneElement(child, {
+        key: (_key = child.key) !== null && _key !== void 0 ? _key : index,
+        className: currentClassName,
+        variant: 'unstyled',
+        color: child.props.color ? child.props.color : pickTextColorBasedOnBgColorAdvanced(color, 'white', 'black')
+      }));
+    } else if ( /*#__PURE__*/React__default.isValidElement(child)) {
+      var _key2;
+      childArray.push( /*#__PURE__*/React__default.cloneElement(child, {
+        key: (_key2 = child.key) !== null && _key2 !== void 0 ? _key2 : index,
+        className: currentClassName
+      }));
+    } else if (typeof child === 'string') {
+      childArray.push( /*#__PURE__*/React__default.createElement(Text, {
+        key: index,
+        className: currentClassName
+      }, child));
+    } else if (typeof child === 'number') {
+      childArray.push( /*#__PURE__*/React__default.createElement(Number, {
+        key: index,
+        className: currentClassName,
+        value: child
+      }));
+    } else {
+      childArray.push(child);
+    }
+  });
+  return /*#__PURE__*/React__default.createElement(StyledPill, _extends({}, forwardedProps, {
+    $autoBreak: autoBreak,
+    $borderColor: borderColor,
+    $color: color,
+    $disabledColor: disabledColor,
+    $hoverColor: hoverColor,
+    $isDisabled: isDisabled,
+    $size: size,
+    $theme: theme,
+    className: classNames(Pill.className, className),
+    ref: ref
+  }), childArray);
+});
+Pill.className = CLASSNAME;
+Pill.displayName = COMPONENT_NAME;
+
+export { Pill };
+//# sourceMappingURL=Pill.js.map

package/components/pill/Pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.js","sources":["../../../src/components/pill/Pill.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, PresentationColorPalette } from '../../types';\nimport { pickTextColorBasedOnBgColorAdvanced, StyledPill } from './styles';\nimport { PillProps, PillSize } from './types';\nimport { useTheme } from '../theme';\nimport { Text } from '../text';\nimport { Number } from '../number';\nimport { isComponent } from '../../utils';\n\nconst COMPONENT_NAME = 'Pill';\nconst CLASSNAME = 'redsift-pill';\n\n/**\n * The Pill component.\n */\nexport const Pill: Comp<PillProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    autoBreak,\n    borderColor,\n    children,\n    className,\n    color: propsColor,\n    disabledColor,\n    hoverColor,\n    isDisabled,\n    size: propsSize,\n    theme: propsTheme,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n  const color = propsColor || PresentationColorPalette.blue;\n  const size = propsSize || PillSize.large;\n\n  const childArray: ReactNode[] = [];\n  React.Children.forEach(children, (child, index) => {\n    const currentClassName =\n      React.Children.count(children) === 1\n        ? 'first last'\n        : index === 0\n        ? 'first'\n        : index === React.Children.count(children) - 1\n        ? 'last'\n        : 'middle';\n\n    if (\n      isComponent('MenuButton')(child) ||\n      isComponent('Select')(child) ||\n      isComponent('Dialog')(child) ||\n      isComponent('Popover')(child) ||\n      isComponent('Tooltip')(child)\n    ) {\n      childArray.push(\n        React.cloneElement(child, {\n          key: child.key ?? index,\n          triggerClassName: currentClassName,\n          variant: 'unstyled',\n          color: child.props.color ? child.props.color : pickTextColorBasedOnBgColorAdvanced(color, 'white', 'black'),\n        })\n      );\n    } else if (isComponent('IconButton')(child) || isComponent('Button')(child) || isComponent('ButtonLink')(child)) {\n      childArray.push(\n        React.cloneElement(child, {\n          key: (child as React.ReactElement<any, string | React.JSXElementConstructor<any>>).key ?? index,\n          className: currentClassName,\n          variant: 'unstyled',\n          color: child.props.color ? child.props.color : pickTextColorBasedOnBgColorAdvanced(color, 'white', 'black'),\n        })\n      );\n    } else if (React.isValidElement(child)) {\n      childArray.push(\n        React.cloneElement(child, {\n          key: (child as React.ReactElement<any, string | React.JSXElementConstructor<any>>).key ?? index,\n          className: currentClassName,\n        } as any)\n      );\n    } else if (typeof child === 'string') {\n      childArray.push(\n        <Text key={index} className={currentClassName}>\n          {child}\n        </Text>\n      );\n    } else if (typeof child === 'number') {\n      childArray.push(<Number key={index} className={currentClassName} value={child} />);\n    } else {\n      childArray.push(child);\n    }\n  });\n\n  return (\n    <StyledPill\n      {...forwardedProps}\n      $autoBreak={autoBreak}\n      $borderColor={borderColor}\n      $color={color}\n      $disabledColor={disabledColor}\n      $hoverColor={hoverColor}\n      $isDisabled={isDisabled}\n      $size={size}\n      $theme={theme}\n      className={classNames(Pill.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {childArray}\n    </StyledPill>\n  );\n});\nPill.className = CLASSNAME;\nPill.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Pill","forwardRef","props","ref","autoBreak","borderColor","children","className","color","propsColor","disabledColor","hoverColor","isDisabled","size","propsSize","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","PresentationColorPalette","blue","PillSize","large","childArray","React","Children","forEach","child","index","currentClassName","count","isComponent","_child$key","push","cloneElement","key","triggerClassName","variant","pickTextColorBasedOnBgColorAdvanced","_key","isValidElement","_key2","createElement","Text","Number","value","StyledPill","_extends","$autoBreak","$borderColor","$color","$disabledColor","$hoverColor","$isDisabled","$size","$theme","classNames","displayName"],"mappings":"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"}