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

package/components/text-area/styles.js

@@ -0,0 +1,240 @@
+import styled, { css } from 'styled-components';
+import { TextAreaVariant } from './types.js';
+import { baseStyling } from '../shared/styles.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component style.
+ */
+const StyledTextArea = 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 {
+    label,
+    $hasLeftIcon,
+    $hasContent,
+    $isFocused,
+    $isDisabled,
+    $isInvalid,
+    $color,
+    $isGradient,
+    $theme,
+    $variant
+  } = _ref;
+  return css`
+    ${$isDisabled ? css`
+          pointer-events: none;
+        ` : ''}
+
+    .redsift-text-area__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' : '-6px'};
+      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);
+            transform: translate(${$variant === TextAreaVariant.underline ? '0px' : '14px'}, 16px) scale(1);
+          ` : css`
+            max-width: calc(133% - 32px);
+            transform: translate(${$variant === TextAreaVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);
+          `}
+
+      ${!$isGradient ? css`
+            color: var(
+              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid ? 'error' : $isFocused ? $color : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}
+            );
+          ` : css`
+            background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'});
+            ${$variant !== TextAreaVariant.underline ? css`
+                  padding-right: 7px;
+                  padding-left: 5px;
+                ` : ''}
+            > span {
+              background: var(
+                --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid ? 'error' : $isFocused ? $color : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}
+              );
+              background-clip: text;
+              color: transparent;
+            }
+          `}
+    }
+
+    .redsift-text-area__text-area-wrapper {
+      align-items: flex-start;
+      box-sizing: border-box;
+      cursor: text;
+      display: inline-flex;
+      min-height: 42px;
+      position: relative;
+      width: 100%;
+    }
+
+    .redsift-text-area-text-area-wrapper__text-area {
+      textarea {
+        background: transparent;
+        display: block;
+        border: none;
+        outline: none;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+        box-sizing: content-box;
+        font-family: var(--redsift-typography-input-text-font-family);
+        font-size: 14px;
+        font-weight: var(--redsift-typography-input-text-font-weight);
+        line-height: var(--redsift-typography-input-text-line-height);
+        resize: none;
+
+        ${$isDisabled ? css`
+              color: var(--redsift-color-neutral-light-grey);
+            ` : css`
+              color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+            `}
+      }
+
+      flex: 1 1 auto;
+      padding-bottom: 9px;
+      ${$variant !== TextAreaVariant.underline && !$hasLeftIcon ? css`
+            padding-left: 16px;
+          ` : ''}
+      padding-top: ${label ? '10px' : '9px'};
+      padding-right: 8px;
+    }
+
+    .redsift-text-area-text-area-wrapper-pills-and-text-area__text-area::placeholder {
+      color: var(--redsift-color-neutral-mid-grey);
+    }
+
+    .redsift-text-area-text-area-wrapper-pills-and-text-area__text-area:focus {
+      outline: 0;
+    }
+
+    .redsift-text-area-text-area-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;
+
+      ${!$isGradient || $isDisabled || !$isFocused || $isInvalid ? css`
+            ${$variant === TextAreaVariant.underline ? css`
+                  border-bottom-width: 2px;
+                ` : css`
+                  border-radius: 4px;
+                  border-width: 2px;
+                `}
+            border-color: var(
+              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid ? 'error' : $isFocused ? $color : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}
+            );
+          ` : css`
+            ${$variant === TextAreaVariant.underline ? css`
+                  border-bottom: 2px solid transparent;
+                ` : css`
+                  border: 2px solid transparent;
+                  border-radius: 4px;
+                `}
+            background: transparent;
+            background-clip: padding-box, border-box;
+            background-origin: border-box;
+            background-image: linear-gradient(
+                90deg,
+                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'}),
+                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'})
+              ),
+              var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-default);
+          `}
+    }
+
+    .redsift-text-area-text-area-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: 100%;
+            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;
+          `}
+    }
+
+    .redsift-text-area-text-area-wrapper-fieldset__legend > span {
+      display: inline-block;
+      opacity: 0;
+      padding-left: 5px;
+      padding-right: 5px;
+      visibility: visible;
+    }
+
+    .redsift-text-area-text-area-wrapper__toolbar {
+      position: relative;
+      top: 7px;
+    }
+
+    .redsift-icon-button {
+      padding: 2px;
+      height: 28px;
+      width: 28px;
+    }
+
+    ${$variant !== TextAreaVariant.underline ? css`
+          .redsift-icon.left {
+            padding-left: 12px;
+            padding-right: 8px;
+            line-height: 28px;
+            top: 10px;
+          }
+
+          .redsift-text-area-text-area-wrapper__toolbar {
+            padding-right: 8px;
+          }
+        ` : css`
+          .redsift-icon.left {
+            padding-right: 8px;
+            top: 10px;
+          }
+        `}
+  `;
+}}
+`;
+
+export { StyledTextArea };
+//# sourceMappingURL=styles.js.map

package/components/text-area/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/text-area/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledTextAreaProps, TextAreaVariant } from './types';\nimport { Theme } from '@redsift/design-system/types';\n\n/**\n * Component style.\n */\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\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  ${({\n    label,\n    $hasLeftIcon,\n    $hasContent,\n    $isFocused,\n    $isDisabled,\n    $isInvalid,\n    $color,\n    $isGradient,\n    $theme,\n    $variant,\n  }) => css`\n    ${$isDisabled\n      ? css`\n          pointer-events: none;\n        `\n      : ''}\n\n    .redsift-text-area__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' : '-6px'};\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);\n            transform: translate(${$variant === TextAreaVariant.underline ? '0px' : '14px'}, 16px) scale(1);\n          `\n        : css`\n            max-width: calc(133% - 32px);\n            transform: translate(${$variant === TextAreaVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);\n          `}\n\n      ${!$isGradient\n        ? css`\n            color: var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n                  ? 'error'\n                  : $isFocused\n                  ? $color\n                  : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n            );\n          `\n        : css`\n            background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'});\n            ${$variant !== TextAreaVariant.underline\n              ? css`\n                  padding-right: 7px;\n                  padding-left: 5px;\n                `\n              : ''}\n            > span {\n              background: var(\n                --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n                    ? 'error'\n                    : $isFocused\n                    ? $color\n                    : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n              );\n              background-clip: text;\n              color: transparent;\n            }\n          `}\n    }\n\n    .redsift-text-area__text-area-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-text-area-text-area-wrapper__text-area {\n      textarea {\n        background: transparent;\n        display: block;\n        border: none;\n        outline: none;\n        width: 100%;\n        padding: 0;\n        margin: 0;\n        box-sizing: content-box;\n        font-family: var(--redsift-typography-input-text-font-family);\n        font-size: 14px;\n        font-weight: var(--redsift-typography-input-text-font-weight);\n        line-height: var(--redsift-typography-input-text-line-height);\n        resize: none;\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      flex: 1 1 auto;\n      padding-bottom: 9px;\n      ${$variant !== TextAreaVariant.underline && !$hasLeftIcon\n        ? css`\n            padding-left: 16px;\n          `\n        : ''}\n      padding-top: ${label ? '10px' : '9px'};\n      padding-right: 8px;\n    }\n\n    .redsift-text-area-text-area-wrapper-pills-and-text-area__text-area::placeholder {\n      color: var(--redsift-color-neutral-mid-grey);\n    }\n\n    .redsift-text-area-text-area-wrapper-pills-and-text-area__text-area:focus {\n      outline: 0;\n    }\n\n    .redsift-text-area-text-area-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      ${!$isGradient || $isDisabled || !$isFocused || $isInvalid\n        ? css`\n            ${$variant === TextAreaVariant.underline\n              ? css`\n                  border-bottom-width: 2px;\n                `\n              : css`\n                  border-radius: 4px;\n                  border-width: 2px;\n                `}\n            border-color: var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n              ? 'error'\n              : $isFocused\n              ? $color\n              : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n            );\n          `\n        : css`\n            ${$variant === TextAreaVariant.underline\n              ? css`\n                  border-bottom: 2px solid transparent;\n                `\n              : css`\n                  border: 2px solid transparent;\n                  border-radius: 4px;\n                `}\n            background: transparent;\n            background-clip: padding-box, border-box;\n            background-origin: border-box;\n            background-image: linear-gradient(\n                90deg,\n                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'}),\n                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'})\n              ),\n              var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-default);\n          `}\n    }\n\n    .redsift-text-area-text-area-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: 100%;\n            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;\n          `}\n    }\n\n    .redsift-text-area-text-area-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-text-area-text-area-wrapper__toolbar {\n      position: relative;\n      top: 7px;\n    }\n\n    .redsift-icon-button {\n      padding: 2px;\n      height: 28px;\n      width: 28px;\n    }\n\n    ${$variant !== TextAreaVariant.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          .redsift-text-area-text-area-wrapper__toolbar {\n            padding-right: 8px;\n          }\n        `\n      : css`\n          .redsift-icon.left {\n            padding-right: 8px;\n            top: 10px;\n          }\n        `}\n  `}\n`;\n"],"names":["StyledTextArea","styled","div","baseStyling","_ref","label","$hasLeftIcon","$hasContent","$isFocused","$isDisabled","$isInvalid","$color","$isGradient","$theme","$variant","css","TextAreaVariant","underline","Theme","dark"],"mappings":";;;;;AAKA;AACA;AACA;AACaA,MAAAA,cAAc,GAAGC,MAAM,CAACC,GAAyB,CAAA;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IACDC,KAAK;IACLC,YAAY;IACZC,WAAW;IACXC,UAAU;IACVC,WAAW;IACXC,UAAU;IACVC,MAAM;IACNC,WAAW;IACXC,MAAM;AACNC,IAAAA,QAAAA;AACF,GAAC,GAAAV,IAAA,CAAA;AAAA,EAAA,OAAKW,GAAI,CAAA;AACZ,IAAMN,EAAAA,WAAW,GACTM,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACD,EAAG,CAAA;AACX;AACA;AACA;AACA;AACA;AACA;AACA,YAAA,EAAcT,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,GACVQ,GAAI,CAAA;AACd;AACA,iCAAmCD,EAAAA,QAAQ,KAAKE,eAAe,CAACC,SAAS,GAAG,KAAK,GAAG,MAAO,CAAA;AAC3F,UAAA,CAAW,GACDF,GAAI,CAAA;AACd;AACA,iCAAmCD,EAAAA,QAAQ,KAAKE,eAAe,CAACC,SAAS,GAAG,KAAK,GAAG,MAAO,CAAA;AAC3F,UAAY,CAAA,CAAA;AACZ;AACA,MAAQ,EAAA,CAACL,WAAW,GACVG,GAAI,CAAA;AACd;AACA,8BAAA,EAAgCF,MAAO,CAAuCH,qCAAAA,EAAAA,UAAU,GACpE,OAAO,GACPF,UAAU,GACVG,MAAM,GACN,MAAO,CAAQF,MAAAA,EAAAA,WAAW,GAAG,UAAU,GAAG,SAAU,CAAA;AACxE;AACA,UAAA,CAAW,GACDM,GAAI,CAAA;AACd,0DAA4DF,EAAAA,MAAM,KAAKK,KAAK,CAACC,IAAI,GAAG,aAAa,GAAG,OAAQ,CAAA;AAC5G,YAAA,EAAcL,QAAQ,KAAKE,eAAe,CAACC,SAAS,GACpCF,GAAI,CAAA;AACpB;AACA;AACA,gBAAA,CAAiB,GACD,EAAG,CAAA;AACnB;AACA;AACA,gCAAA,EAAkCF,MAAO,CAAuCH,qCAAAA,EAAAA,UAAU,GACpE,OAAO,GACPF,UAAU,GACVG,MAAM,GACN,MAAO,CAAQF,MAAAA,EAAAA,WAAW,GAAG,UAAU,GAAG,SAAU,CAAA;AAC1E;AACA;AACA;AACA;AACA,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;AACA,QAAUA,EAAAA,WAAW,GACTM,GAAI,CAAA;AAChB;AACA,YAAA,CAAa,GACDA,GAAI,CAAA;AAChB,iDAAmDF,EAAAA,MAAM,KAAKK,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AACnG,YAAc,CAAA,CAAA;AACd;AACA;AACA;AACA;AACA,MAAQL,EAAAA,QAAQ,KAAKE,eAAe,CAACC,SAAS,IAAI,CAACX,YAAY,GACrDS,GAAI,CAAA;AACd;AACA,UAAA,CAAW,GACD,EAAG,CAAA;AACb,mBAAA,EAAqBV,KAAK,GAAG,MAAM,GAAG,KAAM,CAAA;AAC5C;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,MAAQ,EAAA,CAACO,WAAW,IAAIH,WAAW,IAAI,CAACD,UAAU,IAAIE,UAAU,GACtDK,GAAI,CAAA;AACd,YAAA,EAAcD,QAAQ,KAAKE,eAAe,CAACC,SAAS,GACpCF,GAAI,CAAA;AACpB;AACA,gBAAA,CAAiB,GACDA,GAAI,CAAA;AACpB;AACA;AACA,gBAAkB,CAAA,CAAA;AAClB;AACA,8BAAA,EAAgCF,MAAO,CAAuCH,qCAAAA,EAAAA,UAAU,GACxE,OAAO,GACPF,UAAU,GACVG,MAAM,GACN,MAAO,CAAQF,MAAAA,EAAAA,WAAW,GAAG,UAAU,GAAG,SAAU,CAAA;AACpE;AACA,UAAA,CAAW,GACDM,GAAI,CAAA;AACd,YAAA,EAAcD,QAAQ,KAAKE,eAAe,CAACC,SAAS,GACpCF,GAAI,CAAA;AACpB;AACA,gBAAA,CAAiB,GACDA,GAAI,CAAA;AACpB;AACA;AACA,gBAAkB,CAAA,CAAA;AAClB;AACA;AACA;AACA;AACA;AACA,4CAA8CF,EAAAA,MAAM,KAAKK,KAAK,CAACC,IAAI,GAAG,aAAa,GAAG,OAAQ,CAAA;AAC9F,4CAA8CN,EAAAA,MAAM,KAAKK,KAAK,CAACC,IAAI,GAAG,aAAa,GAAG,OAAQ,CAAA;AAC9F;AACA,kCAAoCN,EAAAA,MAAO,wCAAuCF,MAAO,CAAA;AACzF,UAAY,CAAA,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAQ,EAAA,CAACJ,WAAW,GACVQ,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;AACA;AACA;AACA,IAAA,EAAMD,QAAQ,KAAKE,eAAe,CAACC,SAAS,GACpCF,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;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/text-area/types.d.ts

@@ -0,0 +1,28 @@
+import { MutableRefObject, ComponentProps, ChangeEvent } from 'react';
+import { TextFieldProps, StyledTextFieldProps } from '../text-field/types.js';
+import { ValueOf } from '../../types/helpers.js';
+
+/**
+ * Component variant.
+ */
+declare const TextAreaVariant: {
+    readonly default: "default";
+    readonly underline: "underline";
+};
+type TextAreaVariant = ValueOf<typeof TextAreaVariant>;
+/**
+ * Component props.
+ */
+interface TextAreaProps extends Omit<TextFieldProps, 'onChange' | 'inputRef' | 'inputProps' | 'pills' | 'internal' | 'hasClearButton' | 'onClear'> {
+    /** Custom ref object to pass to the textarea element. */
+    textareaRef?: MutableRefObject<HTMLTextAreaElement>;
+    /** Custom props to pass to the textarea element. */
+    textareaProps?: ComponentProps<'textarea'>;
+    /** Method to handle component change. */
+    onChange?(value?: string, name?: string, event?: ChangeEvent<HTMLTextAreaElement>): void;
+    /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */
+    minimumRows?: number;
+}
+type StyledTextAreaProps = StyledTextFieldProps;
+
+export { StyledTextAreaProps, TextAreaProps, TextAreaVariant };

package/components/text-area/types.js

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

package/components/text-area/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/text-area/types.ts"],"sourcesContent":["import { ChangeEvent, ComponentProps, MutableRefObject } from 'react';\nimport { ValueOf } from '../../types';\nimport { StyledTextFieldProps, TextFieldProps } from '../text-field';\n\n/**\n * Component variant.\n */\nexport const TextAreaVariant = {\n  default: 'default',\n  underline: 'underline',\n} as const;\nexport type TextAreaVariant = ValueOf<typeof TextAreaVariant>;\n\n/**\n * Component props.\n */\nexport interface TextAreaProps\n  extends Omit<\n    TextFieldProps,\n    'onChange' | 'inputRef' | 'inputProps' | 'pills' | 'internal' | 'hasClearButton' | 'onClear'\n  > {\n  /** Custom ref object to pass to the textarea element. */\n  textareaRef?: MutableRefObject<HTMLTextAreaElement>;\n  /** Custom props to pass to the textarea element. */\n  textareaProps?: ComponentProps<'textarea'>;\n  /** Method to handle component change. */\n  onChange?(value?: string, name?: string, event?: ChangeEvent<HTMLTextAreaElement>): void;\n  /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */\n  minimumRows?: number;\n}\n\nexport type StyledTextAreaProps = StyledTextFieldProps;\n"],"names":["TextAreaVariant","default","underline"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,eAAe,GAAG;AAC7BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAA;AACb,EAAU;;AAGV;AACA;AACA;;;;"}

package/components/text-field/TextField.d.ts

@@ -0,0 +1,10 @@
+import { TextFieldProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The TextField component.
+ * Can be used as controlled or uncontrolled.
+ */
+declare const TextField: Comp<TextFieldProps, HTMLDivElement>;
+
+export { TextField };

package/components/text-field/TextField.js

@@ -0,0 +1,197 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState, useCallback } from 'react';
+import classNames from 'classnames';
+import { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound.js';
+import { TextFieldVariant } from './types.js';
+import { StyledTextField } from './styles.js';
+import { mdiClose } from '@redsift/icons';
+import intlMessages from './intl/index.js';
+import { useMessageFormatter } from '../../react-aria/react-aria/i18n/useMessageFormatter.js';
+import { useFocusRing } from '../../react-aria/react-aria/focus/useFocusRing.js';
+import { useFocusWithin } from '../../react-aria/react-aria/interactions/useFocusWithin.js';
+import { useTheme } from '../theme/useTheme.js';
+import { ButtonsColorPalette } from '../../types/colors.js';
+import { useId } from '../../utils/useId.js';
+import { Icon } from '../icon/Icon.js';
+import { Pill } from '../pill/Pill.js';
+import { Flexbox } from '../flexbox/Flexbox.js';
+import { IconButton } from '../icon-button/IconButton.js';
+
+const _excluded = ["aria-label", "aria-labelledby", "after", "autoFocus", "className", "color", "defaultValue", "forceColor", "hasClearButton", "inputProps", "inputRef", "internal", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "pills", "placeholder", "theme", "type", "value", "variant"];
+const COMPONENT_NAME = 'TextField';
+const CLASSNAME = 'redsift-text-field';
+
+/**
+ * The TextField component.
+ * Can be used as controlled or uncontrolled.
+ */
+const TextField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      after,
+      autoFocus,
+      className,
+      color: propsColor,
+      defaultValue = '',
+      forceColor,
+      hasClearButton,
+      inputProps,
+      inputRef,
+      internal,
+      isColored = true,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      leftIcon,
+      name,
+      onBlur: onBlurProps,
+      onChange,
+      onClear,
+      onFocus: onFocusProps,
+      pills,
+      placeholder,
+      theme: propsTheme,
+      type,
+      value: propsValue,
+      variant = TextFieldVariant.default
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : isColored ? 'primary' : 'grey';
+  const isGradient = color === ButtonsColorPalette.radar;
+  const format = useMessageFormatter(intlMessages);
+  const {
+    isFocusVisible,
+    isFocused,
+    focusProps: {
+      onFocus,
+      onBlur
+    }
+  } = useFocusRing({
+    autoFocus
+  });
+  const [isFocusWithin, setFocusWithin] = useState(Boolean(autoFocus));
+  const {
+    focusWithinProps
+  } = useFocusWithin({
+    onFocusWithinChange: isFocusWithin => setFocusWithin(isFocusWithin)
+  });
+  const [value, setValue] = useState(defaultValue);
+  const isControlled = propsValue !== null && propsValue !== undefined;
+  const [labelId] = useId();
+  warnIfNoAccessibleLabelFound(props, [label], 'TextField');
+  const handleChange = useCallback(event => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (onChange) {
+      onChange(event.target.value, name, event);
+    } else {
+      setValue(event.target.value);
+    }
+  }, [onChange]);
+  const handleClear = useCallback(() => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (onChange) {
+      onChange('');
+    }
+    if (onClear) {
+      onClear();
+    }
+    if (hasClearButton && hasClearButton !== true && hasClearButton.onClick) {
+      hasClearButton.onClick({});
+    }
+    setValue('');
+  }, [onChange]);
+  return /*#__PURE__*/React__default.createElement(StyledTextField, _extends({}, focusWithinProps, forwardedProps, {
+    $hasContent: isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder) || Boolean(pills && pills.length > 0),
+    $hasLeftIcon: Boolean(leftIcon),
+    $color: color,
+    $isGradient: isGradient,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !(isControlled ? propsValue : value),
+    $isRequired: isRequired,
+    $isFocused: Boolean(isFocused || forceColor),
+    $theme: theme,
+    $variant: variant,
+    className: classNames(TextField.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("fieldset", {
+    "aria-hidden": "true",
+    className: `${TextField.className}-input-wrapper__fieldset`
+  }, /*#__PURE__*/React__default.createElement("legend", {
+    id: labelId,
+    className: `${TextField.className}-input-wrapper-fieldset__legend`
+  }, label ? /*#__PURE__*/React__default.createElement("span", null, label) : null)), label ? /*#__PURE__*/React__default.createElement("label", {
+    className: `${TextField.className}__label`
+  }, /*#__PURE__*/React__default.createElement("span", null, label)) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: `${TextField.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("div", {
+    className: `${TextField.className}-input-wrapper__pills-and-input`
+  }, /*#__PURE__*/React__default.createElement("input", _extends({}, inputProps, {
+    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);
+    },
+    "aria-disabled": isDisabled,
+    "aria-invalid": isInvalid || isRequired && !(isControlled ? propsValue : value),
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby || (label ? labelId : undefined),
+    "aria-readonly": isReadOnly,
+    "aria-required": isRequired,
+    autoFocus: autoFocus,
+    className: `${TextField.className}-input-wrapper-pills-and-input__input`,
+    disabled: isDisabled,
+    name: name,
+    onChange: handleChange,
+    placeholder: placeholder,
+    ref: inputRef,
+    type: type,
+    value: isControlled ? propsValue : value
+  })), /*#__PURE__*/React__default.createElement("div", null, pills === null || pills === void 0 ? void 0 : pills.map((pill, index) => /*#__PURE__*/React__default.createElement(Pill, _extends({
+    theme: theme,
+    key: `${labelId}-pill-${index}`,
+    color: "blue",
+    size: "small"
+  }, pill))))), hasClearButton || internal || after ? /*#__PURE__*/React__default.createElement(Flexbox, {
+    className: `${TextField.className}-input-wrapper__toolbar`,
+    gap: "8px"
+  }, hasClearButton ? /*#__PURE__*/React__default.createElement(IconButton, _extends({
+    theme: theme,
+    "aria-label": label ? format('clear-field', {
+      label
+    }) : format('clear'),
+    color: "grey",
+    isDisabled: isDisabled,
+    icon: mdiClose
+  }, hasClearButton !== true && hasClearButton, {
+    onClick: handleClear,
+    className: "right clear"
+  })) : null, typeof internal === 'function' ? internal(isControlled ? propsValue : value, isDisabled, isInvalid || isRequired && !(isControlled ? propsValue : value), isRequired) : internal, (hasClearButton || internal) && after ? /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      borderLeft: '1px solid var(--redsift-color-neutral-mid-grey)',
+      position: 'relative',
+      top: '-2px'
+    }
+  }) : null, typeof after === 'function' ? after(isControlled ? propsValue : value, isDisabled, isInvalid || isRequired && !(isControlled ? propsValue : value), isRequired) : after) : null));
+});
+TextField.className = CLASSNAME;
+TextField.displayName = COMPONENT_NAME;
+
+export { TextField };
+//# sourceMappingURL=TextField.js.map

package/components/text-field/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["import React, { MouseEvent, ComponentProps, forwardRef, MutableRefObject, useCallback, useState } from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { useFocusWithin } from '../../react-aria/react-aria/interactions';\nimport { ButtonsColorPalette, Comp } from '../../types';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { TextFieldProps, TextFieldVariant } from './types';\nimport { StyledTextField } from './styles';\nimport { Icon } from '../../components/icon';\nimport { mdiClose } from '@redsift/icons';\nimport { Flexbox } from '../flexbox';\nimport { IconButton } from '../icon-button';\nimport { Pill } from '../pill';\nimport { useTheme } from '../theme';\nimport { useMessageFormatter } from '@redsift/design-system/react-aria/react-aria/i18n';\nimport { useId } from '../../utils';\n\nimport intlMessages from './intl';\n\nconst COMPONENT_NAME = 'TextField';\nconst CLASSNAME = 'redsift-text-field';\n\n/**\n * The TextField component.\n * Can be used as controlled or uncontrolled.\n */\nexport const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    after,\n    autoFocus,\n    className,\n    color: propsColor,\n    defaultValue = '',\n    forceColor,\n    hasClearButton,\n    inputProps,\n    inputRef,\n    internal,\n    isColored = true,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    leftIcon,\n    name,\n    onBlur: onBlurProps,\n    onChange,\n    onClear,\n    onFocus: onFocusProps,\n    pills,\n    placeholder,\n    theme: propsTheme,\n    type,\n    value: propsValue,\n    variant = TextFieldVariant.default,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n  const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : isColored ? 'primary' : 'grey';\n  const isGradient = color === ButtonsColorPalette.radar;\n\n  const format = useMessageFormatter(intlMessages);\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  const [value, setValue] = useState(defaultValue);\n  const isControlled = propsValue !== null && propsValue !== undefined;\n\n  const [labelId] = useId();\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [label], 'TextField');\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled || isReadOnly) {\n        return;\n      }\n\n      if (onChange) {\n        onChange(event.target.value, name, event);\n      } else {\n        setValue(event.target.value);\n      }\n    },\n    [onChange]\n  );\n\n  const handleClear = useCallback(() => {\n    if (isDisabled || isReadOnly) {\n      return;\n    }\n\n    if (onChange) {\n      onChange('');\n    }\n    if (onClear) {\n      onClear();\n    }\n    if (hasClearButton && hasClearButton !== true && hasClearButton.onClick) {\n      hasClearButton.onClick({} as MouseEvent<HTMLButtonElement>);\n    }\n    setValue('');\n  }, [onChange]);\n\n  return (\n    <StyledTextField\n      {...focusWithinProps}\n      {...forwardedProps}\n      $hasContent={\n        isFocusWithin ||\n        Boolean(isControlled ? propsValue : value) ||\n        Boolean(placeholder) ||\n        Boolean(pills && pills.length > 0)\n      }\n      $hasLeftIcon={Boolean(leftIcon)}\n      $color={color}\n      $isGradient={isGradient}\n      $isDisabled={isDisabled}\n      $isFocusVisible={isFocusVisible}\n      $isInvalid={isInvalid || (isRequired && !(isControlled ? propsValue : value))}\n      $isRequired={isRequired}\n      $isFocused={Boolean(isFocused || forceColor)}\n      $theme={theme}\n      $variant={variant}\n      className={classNames(TextField.className, className)}\n      ref={ref as MutableRefObject<HTMLDivElement>}\n    >\n      <fieldset aria-hidden=\"true\" className={`${TextField.className}-input-wrapper__fieldset`}>\n        <legend id={labelId} className={`${TextField.className}-input-wrapper-fieldset__legend`}>\n          {label ? <span>{label}</span> : null}\n        </legend>\n      </fieldset>\n      {label ? (\n        <label className={`${TextField.className}__label`}>\n          <span>{label}</span>\n        </label>\n      ) : null}\n      <div className={`${TextField.className}__input-wrapper`}>\n        {leftIcon ? (\n          <Icon color={isDisabled ? 'question' : 'black'} {...leftIcon} aria-hidden=\"true\" className=\"left\" />\n        ) : null}\n        <div className={`${TextField.className}-input-wrapper__pills-and-input`}>\n          <input\n            {...inputProps}\n            onBlur={(event) => {\n              onBlur?.(event);\n              onBlurProps?.(event);\n            }}\n            onFocus={(event) => {\n              onFocus?.(event);\n              onFocusProps?.(event);\n            }}\n            aria-disabled={isDisabled}\n            aria-invalid={isInvalid || (isRequired && !(isControlled ? propsValue : value))}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby || (label ? labelId : undefined)}\n            aria-readonly={isReadOnly}\n            aria-required={isRequired}\n            autoFocus={autoFocus}\n            className={`${TextField.className}-input-wrapper-pills-and-input__input`}\n            disabled={isDisabled}\n            name={name}\n            onChange={handleChange}\n            placeholder={placeholder}\n            ref={inputRef as MutableRefObject<HTMLInputElement>}\n            type={type}\n            value={isControlled ? propsValue : value}\n          />\n          <div>\n            {pills?.map((pill, index) => (\n              <Pill theme={theme} key={`${labelId}-pill-${index}`} color=\"blue\" size=\"small\" {...pill} />\n            ))}\n          </div>\n        </div>\n        {hasClearButton || internal || after ? (\n          <Flexbox className={`${TextField.className}-input-wrapper__toolbar`} gap=\"8px\">\n            {hasClearButton ? (\n              <IconButton\n                theme={theme}\n                aria-label={label ? format('clear-field', { label }) : format('clear')}\n                color=\"grey\"\n                isDisabled={isDisabled}\n                icon={mdiClose}\n                {...(hasClearButton !== true && hasClearButton)}\n                onClick={handleClear}\n                className=\"right clear\"\n              />\n            ) : null}\n            {typeof internal === 'function'\n              ? internal(\n                  isControlled ? propsValue : value,\n                  isDisabled,\n                  isInvalid || (isRequired && !(isControlled ? propsValue : value)),\n                  isRequired\n                )\n              : internal}\n            {(hasClearButton || internal) && after ? (\n              <span\n                style={{\n                  borderLeft: '1px solid var(--redsift-color-neutral-mid-grey)',\n                  position: 'relative',\n                  top: '-2px',\n                }}\n              />\n            ) : null}\n            {typeof after === 'function'\n              ? after(\n                  isControlled ? propsValue : value,\n                  isDisabled,\n                  isInvalid || (isRequired && !(isControlled ? propsValue : value)),\n                  isRequired\n                )\n              : after}\n          </Flexbox>\n        ) : null}\n      </div>\n    </StyledTextField>\n  );\n});\nTextField.className = CLASSNAME;\nTextField.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","TextField","forwardRef","props","ref","ariaLabel","ariaLabelledby","after","autoFocus","className","color","propsColor","defaultValue","forceColor","hasClearButton","inputProps","inputRef","internal","isColored","isDisabled","isInvalid","isReadOnly","isRequired","label","leftIcon","name","onBlur","onBlurProps","onChange","onClear","onFocus","onFocusProps","pills","placeholder","theme","propsTheme","type","value","propsValue","variant","TextFieldVariant","default","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","isGradient","radar","format","useMessageFormatter","intlMessages","isFocusVisible","isFocused","focusProps","useFocusRing","isFocusWithin","setFocusWithin","useState","Boolean","focusWithinProps","useFocusWithin","onFocusWithinChange","setValue","isControlled","undefined","labelId","useId","warnIfNoAccessibleLabelFound","handleChange","useCallback","event","target","handleClear","onClick","React","createElement","StyledTextField","_extends","$hasContent","length","$hasLeftIcon","$color","$isGradient","$isDisabled","$isFocusVisible","$isInvalid","$isRequired","$isFocused","$theme","$variant","classNames","id","Icon","disabled","map","pill","index","Pill","key","size","Flexbox","gap","IconButton","icon","mdiClose","style","borderLeft","position","top","displayName"],"mappings":"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"}

package/components/text-field/intl/en-US.json.js

@@ -0,0 +1,8 @@
+var clear = "Clear field";
+var enUS = {
+	clear: clear,
+	"clear-field": "Clear field {label}"
+};
+
+export { clear, enUS as default };
+//# sourceMappingURL=en-US.json.js.map

package/components/text-field/intl/en-US.json.js.map

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

package/components/text-field/intl/fr-FR.json.js

@@ -0,0 +1,8 @@
+var clear = "Nettoyer le champ";
+var frFR = {
+	clear: clear,
+	"clear-field": "Nettoyer le champ {label}"
+};
+
+export { clear, frFR as default };
+//# sourceMappingURL=fr-FR.json.js.map

package/components/text-field/intl/fr-FR.json.js.map

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

package/components/text-field/intl/index.js

@@ -0,0 +1,10 @@
+import enUS from './en-US.json.js';
+import frFR from './fr-FR.json.js';
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+export { intlMessages as default };
+//# sourceMappingURL=index.js.map

package/components/text-field/intl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/text-field/intl/index.ts"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n"],"names":["enUS","frFR"],"mappings":";;;AAGA,mBAAe;AACb,EAAA,OAAO,EAAEA,IAAI;AACb,EAAA,OAAO,EAAEC,IAAAA;AACX,CAAC;;;;"}

package/components/text-field/styles.d.ts

@@ -0,0 +1,22 @@
+import * as styled_components from 'styled-components';
+import { TextFieldProps, TextFieldVariant } from './types.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component style.
+ */
+declare const StyledTextField: styled_components.StyledComponent<"div", any, Omit<TextFieldProps, "color" | "onChange" | "isInvalid" | "isRequired" | "isDisabled" | "isColored"> & {
+    $color: string | undefined;
+    $isGradient: boolean;
+    $hasLeftIcon: boolean;
+    $hasContent: boolean;
+    $isDisabled: boolean | undefined;
+    $isInvalid: boolean | undefined;
+    $isFocused: boolean;
+    $isFocusVisible: boolean;
+    $isRequired: boolean | undefined;
+    $theme: Theme | undefined;
+    $variant: TextFieldVariant | undefined;
+}, never>;
+
+export { StyledTextField };