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

package/components/number-field/styles.js

@@ -1,240 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,74 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,9 +0,0 @@
-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

@@ -1,93 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { 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.Children.forEach(children, (child, index) => {
-    const currentClassName = React.Children.count(children) === 1 ? 'first last' : index === 0 ? 'first' : index === React.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.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.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.isValidElement(child)) {
-      var _key2;
-      childArray.push( /*#__PURE__*/React.cloneElement(child, {
-        key: (_key2 = child.key) !== null && _key2 !== void 0 ? _key2 : index,
-        className: currentClassName
-      }));
-    } else if (typeof child === 'string') {
-      childArray.push( /*#__PURE__*/React.createElement(Text, {
-        key: index,
-        className: currentClassName
-      }, child));
-    } else if (typeof child === 'number') {
-      childArray.push( /*#__PURE__*/React.createElement(Number, {
-        key: index,
-        className: currentClassName,
-        value: child
-      }));
-    } else {
-      childArray.push(child);
-    }
-  });
-  return /*#__PURE__*/React.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

@@ -1 +0,0 @@
-{"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":";;;;;;;;;;;;AAUA,MAAMA,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;;AAEhC;AACA;AACA;AACO,MAAMC,IAAqC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC9E,MAAM;MACJC,SAAS;MACTC,WAAW;MACXC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,aAAa;MACbC,UAAU;MACVC,UAAU;AACVC,MAAAA,IAAI,EAAEC,SAAS;AACfC,MAAAA,KAAK,EAAEC,UAAAA;AAET,KAAC,GAAGd,KAAK;AADJe,IAAAA,cAAc,GAAAC,wBAAA,CACfhB,KAAK,EAAAiB,SAAA,CAAA,CAAA;AAET,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAClC,EAAA,MAAMR,KAAK,GAAGC,UAAU,IAAIY,wBAAwB,CAACC,IAAI,CAAA;AACzD,EAAA,MAAMT,IAAI,GAAGC,SAAS,IAAIS,QAAQ,CAACC,KAAK,CAAA;EAExC,MAAMC,UAAuB,GAAG,EAAE,CAAA;EAClCC,KAAK,CAACC,QAAQ,CAACC,OAAO,CAACtB,QAAQ,EAAE,CAACuB,KAAK,EAAEC,KAAK,KAAK;AACjD,IAAA,MAAMC,gBAAgB,GACpBL,KAAK,CAACC,QAAQ,CAACK,KAAK,CAAC1B,QAAQ,CAAC,KAAK,CAAC,GAChC,YAAY,GACZwB,KAAK,KAAK,CAAC,GACX,OAAO,GACPA,KAAK,KAAKJ,KAAK,CAACC,QAAQ,CAACK,KAAK,CAAC1B,QAAQ,CAAC,GAAG,CAAC,GAC5C,MAAM,GACN,QAAQ,CAAA;AAEd,IAAA,IACE2B,WAAW,CAAC,YAAY,CAAC,CAACJ,KAAK,CAAC,IAChCI,WAAW,CAAC,QAAQ,CAAC,CAACJ,KAAK,CAAC,IAC5BI,WAAW,CAAC,QAAQ,CAAC,CAACJ,KAAK,CAAC,IAC5BI,WAAW,CAAC,SAAS,CAAC,CAACJ,KAAK,CAAC,IAC7BI,WAAW,CAAC,SAAS,CAAC,CAACJ,KAAK,CAAC,EAC7B;AAAA,MAAA,IAAAK,UAAA,CAAA;MACAT,UAAU,CAACU,IAAI,eACbT,KAAK,CAACU,YAAY,CAACP,KAAK,EAAE;QACxBQ,GAAG,EAAA,CAAAH,UAAA,GAAEL,KAAK,CAACQ,GAAG,MAAA,IAAA,IAAAH,UAAA,KAAA,KAAA,CAAA,GAAAA,UAAA,GAAIJ,KAAK;AACvBQ,QAAAA,gBAAgB,EAAEP,gBAAgB;AAClCQ,QAAAA,OAAO,EAAE,UAAU;AACnB/B,QAAAA,KAAK,EAAEqB,KAAK,CAAC3B,KAAK,CAACM,KAAK,GAAGqB,KAAK,CAAC3B,KAAK,CAACM,KAAK,GAAGgC,mCAAmC,CAAChC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAA;AAC5G,OAAC,CACH,CAAC,CAAA;KACF,MAAM,IAAIyB,WAAW,CAAC,YAAY,CAAC,CAACJ,KAAK,CAAC,IAAII,WAAW,CAAC,QAAQ,CAAC,CAACJ,KAAK,CAAC,IAAII,WAAW,CAAC,YAAY,CAAC,CAACJ,KAAK,CAAC,EAAE;AAAA,MAAA,IAAAY,IAAA,CAAA;MAC/GhB,UAAU,CAACU,IAAI,eACbT,KAAK,CAACU,YAAY,CAACP,KAAK,EAAE;QACxBQ,GAAG,EAAA,CAAAI,IAAA,GAAGZ,KAAK,CAAwEQ,GAAG,MAAA,IAAA,IAAAI,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAIX,KAAK;AAC/FvB,QAAAA,SAAS,EAAEwB,gBAAgB;AAC3BQ,QAAAA,OAAO,EAAE,UAAU;AACnB/B,QAAAA,KAAK,EAAEqB,KAAK,CAAC3B,KAAK,CAACM,KAAK,GAAGqB,KAAK,CAAC3B,KAAK,CAACM,KAAK,GAAGgC,mCAAmC,CAAChC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAA;AAC5G,OAAC,CACH,CAAC,CAAA;KACF,MAAM,kBAAIkB,KAAK,CAACgB,cAAc,CAACb,KAAK,CAAC,EAAE;AAAA,MAAA,IAAAc,KAAA,CAAA;MACtClB,UAAU,CAACU,IAAI,eACbT,KAAK,CAACU,YAAY,CAACP,KAAK,EAAE;QACxBQ,GAAG,EAAA,CAAAM,KAAA,GAAGd,KAAK,CAAwEQ,GAAG,MAAA,IAAA,IAAAM,KAAA,KAAA,KAAA,CAAA,GAAAA,KAAA,GAAIb,KAAK;AAC/FvB,QAAAA,SAAS,EAAEwB,gBAAAA;AACb,OAAQ,CACV,CAAC,CAAA;AACH,KAAC,MAAM,IAAI,OAAOF,KAAK,KAAK,QAAQ,EAAE;AACpCJ,MAAAA,UAAU,CAACU,IAAI,eACbT,KAAA,CAAAkB,aAAA,CAACC,IAAI,EAAA;AAACR,QAAAA,GAAG,EAAEP,KAAM;AAACvB,QAAAA,SAAS,EAAEwB,gBAAAA;OAC1BF,EAAAA,KACG,CACR,CAAC,CAAA;AACH,KAAC,MAAM,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;AACpCJ,MAAAA,UAAU,CAACU,IAAI,eAACT,KAAA,CAAAkB,aAAA,CAACE,MAAM,EAAA;AAACT,QAAAA,GAAG,EAAEP,KAAM;AAACvB,QAAAA,SAAS,EAAEwB,gBAAiB;AAACgB,QAAAA,KAAK,EAAElB,KAAAA;AAAM,OAAE,CAAC,CAAC,CAAA;AACpF,KAAC,MAAM;AACLJ,MAAAA,UAAU,CAACU,IAAI,CAACN,KAAK,CAAC,CAAA;AACxB,KAAA;AACF,GAAC,CAAC,CAAA;EAEF,oBACEH,KAAA,CAAAkB,aAAA,CAACI,UAAU,EAAAC,QAAA,KACLhC,cAAc,EAAA;AAClBiC,IAAAA,UAAU,EAAE9C,SAAU;AACtB+C,IAAAA,YAAY,EAAE9C,WAAY;AAC1B+C,IAAAA,MAAM,EAAE5C,KAAM;AACd6C,IAAAA,cAAc,EAAE3C,aAAc;AAC9B4C,IAAAA,WAAW,EAAE3C,UAAW;AACxB4C,IAAAA,WAAW,EAAE3C,UAAW;AACxB4C,IAAAA,KAAK,EAAE3C,IAAK;AACZ4C,IAAAA,MAAM,EAAE1C,KAAM;IACdR,SAAS,EAAEmD,UAAU,CAAC1D,IAAI,CAACO,SAAS,EAAEA,SAAS,CAAE;AACjDJ,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EAErCsB,UACS,CAAC,CAAA;AAEjB,CAAC,EAAC;AACFzB,IAAI,CAACO,SAAS,GAAGR,SAAS,CAAA;AAC1BC,IAAI,CAAC2D,WAAW,GAAG7D,cAAc;;;;"}