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

package/components/switch-group/types.d.ts

@@ -0,0 +1,72 @@
+import { ComponentProps } from 'react';
+import { ValueOf } from '../../types/helpers.js';
+import { StylingProps } from '../../types/styles.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Context props.
+ */
+type SwitchGroupState = {
+    /** Adds a value to the set of selected values. */
+    addValue(value: string): void;
+    /** Whether the switch group is disabled or not. */
+    readonly isDisabled: boolean;
+    /** Whether the switch group is read only or not. */
+    readonly isReadOnly: boolean;
+    /** Removes a value from the set of selected values. */
+    removeValue(value: string): void;
+    /** Sets the selected values. */
+    setValue(value: string[]): void;
+    /** Current selected values. */
+    readonly value: readonly string[];
+};
+/**
+ * Component orientation.
+ */
+declare const SwitchGroupOrientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+type SwitchGroupOrientation = ValueOf<typeof SwitchGroupOrientation>;
+/**
+ * Component props.
+ */
+interface SwitchGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {
+    /**
+     * Default selected values.
+     * Used for uncontrolled version.
+     */
+    defaultValues?: string[];
+    /** Description of the switch group. */
+    description?: string;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is invalid or not. */
+    isInvalid?: boolean;
+    /** Whether the component is read only or not. */
+    isReadOnly?: boolean;
+    /** Whether the component is required or not. */
+    isRequired?: boolean;
+    /** Label of the switch group. */
+    label?: string;
+    /** Method to handle component change. */
+    onChange?(values: string[]): void;
+    /** Method to handle component change. */
+    orientation?: SwitchGroupOrientation;
+    /** Theme. */
+    theme?: Theme;
+    /**
+     * Currently selected values.
+     * Used for controlled version.
+     */
+    value?: string[];
+}
+type StyledSwitchGroupProps = Omit<SwitchGroupProps, 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'isRequired'> & {
+    $isDisabled: SwitchGroupProps['isDisabled'];
+    $isInvalid: SwitchGroupProps['isInvalid'];
+    $isReadOnly: SwitchGroupProps['isReadOnly'];
+    $orientation: SwitchGroupProps['orientation'];
+    $theme: SwitchGroupProps['theme'];
+};
+
+export { StyledSwitchGroupProps, SwitchGroupOrientation, SwitchGroupProps, SwitchGroupState };

package/components/switch-group/types.js

@@ -0,0 +1,18 @@
+/**
+ * Context props.
+ */
+
+/**
+ * Component orientation.
+ */
+const SwitchGroupOrientation = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
+
+/**
+ * Component props.
+ */
+
+export { SwitchGroupOrientation };
+//# sourceMappingURL=types.js.map

package/components/switch-group/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/switch-group/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ValueOf, StylingProps, Theme } from '../../types';\n\n/**\n * Context props.\n */\nexport type SwitchGroupState = {\n  /** Adds a value to the set of selected values. */\n  addValue(value: string): void;\n  /** Whether the switch group is disabled or not. */\n  readonly isDisabled: boolean;\n  /** Whether the switch group is read only or not. */\n  readonly isReadOnly: boolean;\n  /** Removes a value from the set of selected values. */\n  removeValue(value: string): void;\n  /** Sets the selected values. */\n  setValue(value: string[]): void;\n  /** Current selected values. */\n  readonly value: readonly string[];\n};\n\n/**\n * Component orientation.\n */\nexport const SwitchGroupOrientation = {\n  horizontal: 'horizontal',\n  vertical: 'vertical',\n} as const;\nexport type SwitchGroupOrientation = ValueOf<typeof SwitchGroupOrientation>;\n\n/**\n * Component props.\n */\nexport interface SwitchGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n  /**\n   * Default selected values.\n   * Used for uncontrolled version.\n   */\n  defaultValues?: string[];\n  /** Description of the switch group. */\n  description?: string;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is invalid or not. */\n  isInvalid?: boolean;\n  /** Whether the component is read only or not. */\n  isReadOnly?: boolean;\n  /** Whether the component is required or not. */\n  isRequired?: boolean;\n  /** Label of the switch group. */\n  label?: string;\n  /** Method to handle component change. */\n  onChange?(values: string[]): void;\n  /** Method to handle component change. */\n  orientation?: SwitchGroupOrientation;\n  /** Theme. */\n  theme?: Theme;\n  /**\n   * Currently selected values.\n   * Used for controlled version.\n   */\n  value?: string[];\n}\n\nexport type StyledSwitchGroupProps = Omit<\n  SwitchGroupProps,\n  'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'isRequired'\n> & {\n  $isDisabled: SwitchGroupProps['isDisabled'];\n  $isInvalid: SwitchGroupProps['isInvalid'];\n  $isReadOnly: SwitchGroupProps['isReadOnly'];\n  $orientation: SwitchGroupProps['orientation'];\n  $theme: SwitchGroupProps['theme'];\n};\n"],"names":["SwitchGroupOrientation","horizontal","vertical"],"mappings":"AAGA;AACA;AACA;;AAgBA;AACA;AACA;AACO,MAAMA,sBAAsB,GAAG;AACpCC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;;;"}

package/components/text/Text.d.ts

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

package/components/text/Text.js

@@ -0,0 +1,51 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledText } from './styles.js';
+import { FontFamily } from '../../types/fonts.js';
+import { useTheme } from '../theme/useTheme.js';
+
+const _excluded = ["as", "children", "className", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "noWrap", "theme", "variant"];
+const COMPONENT_NAME = 'Text';
+const CLASSNAME = 'redsift-text';
+
+/**
+ * The Text component.
+ */
+const Text = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      color,
+      fontFamily = FontFamily.poppins,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      noWrap,
+      theme: propsTheme,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(StyledText, _extends({
+    as: as
+  }, forwardedProps, {
+    className: classNames(Text.className, className),
+    ref: ref,
+    $as: as,
+    $color: color,
+    $fontFamily: fontFamily,
+    $fontSize: fontSize,
+    $fontWeight: fontWeight,
+    $lineHeight: lineHeight,
+    $noWrap: noWrap,
+    $theme: theme,
+    $variant: variant
+  }), children);
+});
+Text.className = CLASSNAME;
+Text.displayName = COMPONENT_NAME;
+
+export { Text };
+//# sourceMappingURL=Text.js.map

package/components/text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, FontFamily } from '../../types';\nimport { StyledText } from './styles';\nimport { TextProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Text';\nconst CLASSNAME = 'redsift-text';\n\n/**\n * The Text component.\n */\nexport const Text: Comp<TextProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    as,\n    children,\n    className,\n    color,\n    fontFamily = FontFamily.poppins,\n    fontSize,\n    fontWeight,\n    lineHeight,\n    noWrap,\n    theme: propsTheme,\n    variant,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledText\n      as={as}\n      {...forwardedProps}\n      className={classNames(Text.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $as={as}\n      $color={color}\n      $fontFamily={fontFamily}\n      $fontSize={fontSize}\n      $fontWeight={fontWeight}\n      $lineHeight={lineHeight}\n      $noWrap={noWrap}\n      $theme={theme}\n      $variant={variant}\n    >\n      {children}\n    </StyledText>\n  );\n});\nText.className = CLASSNAME;\nText.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Text","forwardRef","props","ref","as","children","className","color","fontFamily","FontFamily","poppins","fontSize","fontWeight","lineHeight","noWrap","theme","propsTheme","variant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledText","_extends","classNames","$as","$color","$fontFamily","$fontSize","$fontWeight","$lineHeight","$noWrap","$theme","$variant","displayName"],"mappings":";;;;;;;;AAOA,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,EAAE;MACFC,QAAQ;MACRC,SAAS;MACTC,KAAK;MACLC,UAAU,GAAGC,UAAU,CAACC,OAAO;MAC/BC,QAAQ;MACRC,UAAU;MACVC,UAAU;MACVC,MAAM;AACNC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,OAAAA;AAEF,KAAC,GAAGf,KAAK;AADJgB,IAAAA,cAAc,GAAAC,wBAAA,CACfjB,KAAK,EAAAkB,SAAA,CAAA,CAAA;AAET,EAAA,MAAML,KAAK,GAAGM,QAAQ,CAACL,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEM,cAAA,CAAAC,aAAA,CAACC,UAAU,EAAAC,QAAA,CAAA;AACTrB,IAAAA,EAAE,EAAEA,EAAAA;AAAG,GAAA,EACHc,cAAc,EAAA;IAClBZ,SAAS,EAAEoB,UAAU,CAAC1B,IAAI,CAACM,SAAS,EAAEA,SAAS,CAAE;AACjDH,IAAAA,GAAG,EAAEA,GAAiC;AACtCwB,IAAAA,GAAG,EAAEvB,EAAG;AACRwB,IAAAA,MAAM,EAAErB,KAAM;AACdsB,IAAAA,WAAW,EAAErB,UAAW;AACxBsB,IAAAA,SAAS,EAAEnB,QAAS;AACpBoB,IAAAA,WAAW,EAAEnB,UAAW;AACxBoB,IAAAA,WAAW,EAAEnB,UAAW;AACxBoB,IAAAA,OAAO,EAAEnB,MAAO;AAChBoB,IAAAA,MAAM,EAAEnB,KAAM;AACdoB,IAAAA,QAAQ,EAAElB,OAAAA;AAAQ,GAAA,CAAA,EAEjBZ,QACS,CAAC,CAAA;AAEjB,CAAC,EAAC;AACFL,IAAI,CAACM,SAAS,GAAGP,SAAS,CAAA;AAC1BC,IAAI,CAACoC,WAAW,GAAGtC,cAAc;;;;"}

package/components/text/styles.js

@@ -0,0 +1,112 @@
+import styled, { css } from 'styled-components';
+import { TextComponent, TextVariant } from './types.js';
+import { NotificationsColorPalette, NeutralColorPalette, ProductColorPalette } from '../../types/colors.js';
+import { baseStyling } from '../shared/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledText = styled.span`
+  ${baseStyling}
+
+  ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return $color && $color === 'radar' ? css`
+          background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
+          background-clip: text;
+          color: transparent;
+        ` : Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-notifications-${$color}-primary);
+        ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-neutral-${$color});
+        ` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
+          color: var(--redsift-color-product-${$color});
+        ` : css`
+          color: ${$color || css`inherit`};
+        `;
+}}
+
+  ${_ref2 => {
+  let {
+    $as
+  } = _ref2;
+  return css`
+    ${$as === TextComponent.i || $as === TextComponent.cite || $as === TextComponent.em ? css`
+          font-style: italic;
+        ` : $as === TextComponent.sub ? css`
+          vertical-align: sub;
+        ` : $as === TextComponent.sup ? css`
+          vertical-align: super;
+        ` : $as === TextComponent.mark ? css`
+          color: var(--redsift-color-neutral-x-dark-grey);
+        ` : ''}
+  `;
+}}
+
+  ${_ref3 => {
+  let {
+    $as,
+    $fontFamily,
+    $fontSize,
+    $fontWeight,
+    $lineHeight,
+    $variant
+  } = _ref3;
+  return !$variant ? css`
+          ${$fontFamily ? css`
+                font-family: var(--redsift-typography-font-family-${$fontFamily});
+              ` : ''}
+          ${$fontSize ? css`
+                font-size: ${$fontSize};
+              ` : ''}
+          ${$fontWeight ? css`
+                font-weight: ${$fontWeight};
+              ` : ''}
+          ${$lineHeight ? css`
+                line-height: ${$lineHeight};
+              ` : ''}
+          ${$as === TextComponent.b ? css`
+                font-weight: ${$fontWeight ? $fontWeight : 'var(--redsift-typography-font-weight-bold)'};
+              ` : $as === TextComponent.sup || $as === TextComponent.sub ? css`
+                font-size: ${$fontSize ? $fontSize : '12px'};
+              ` : ''}
+        ` : $variant === TextVariant.inherit ? css`
+          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`inherit`};
+          font-size: ${$fontSize ? $fontSize : $as === TextComponent.sup || $as === TextComponent.sub ? '12px' : css`inherit`};
+          font-weight: ${$fontWeight ? $fontWeight : $as === TextComponent.b ? 'var(--redsift-typography-font-weight-bold)' : 'inherit'};
+          line-height: ${$lineHeight ? $lineHeight : css`inherit`};
+          text-transform: inherit;
+        ` : css`
+          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`var(--redsift-typography-${$variant}-font-family)`};
+          font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant}-font-size)`};
+          font-weight: ${$fontWeight ? $fontWeight : css`var(--redsift-typography-${$variant}-font-weight)`};
+          line-height: ${$lineHeight ? $lineHeight : css`var(--redsift-typography-${$variant}-line-height)`};
+          text-transform: var(--redsift-typography-${$variant}-text-transform);
+        `;
+}}
+  
+  ${_ref4 => {
+  let {
+    $noWrap
+  } = _ref4;
+  return $noWrap ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        ` : '';
+}}
+
+  ${_ref5 => {
+  let {
+    wordBreak
+  } = _ref5;
+  return wordBreak ? css`
+          word-break: ${wordBreak};
+        ` : '';
+}}
+`;
+
+export { StyledText };
+//# sourceMappingURL=styles.js.map

package/components/text/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/text/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { NotificationsColorPalette, NeutralColorPalette, ProductColorPalette } from '../../types';\nimport { baseStyling } from '../shared';\nimport { StyledTextProps, TextComponent, TextVariant } from './types';\n\n/**\n * Component style.\n */\nexport const StyledText = styled.span<StyledTextProps>`\n  ${baseStyling}\n\n  ${({ $color }) =>\n    $color && $color === 'radar'\n      ? css`\n          background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);\n          background-clip: text;\n          color: transparent;\n        `\n      : Object.keys(NotificationsColorPalette).indexOf($color!) !== -1\n      ? css`\n          color: var(--redsift-color-notifications-${$color}-primary);\n        `\n      : Object.keys(NeutralColorPalette).indexOf($color!) !== -1\n      ? css`\n          color: var(--redsift-color-neutral-${$color});\n        `\n      : Object.keys(ProductColorPalette).indexOf($color!) !== -1\n      ? css`\n          color: var(--redsift-color-product-${$color});\n        `\n      : css`\n          color: ${$color || css`inherit`};\n        `}\n\n  ${({ $as }) => css`\n    ${$as === TextComponent.i || $as === TextComponent.cite || $as === TextComponent.em\n      ? css`\n          font-style: italic;\n        `\n      : $as === TextComponent.sub\n      ? css`\n          vertical-align: sub;\n        `\n      : $as === TextComponent.sup\n      ? css`\n          vertical-align: super;\n        `\n      : $as === TextComponent.mark\n      ? css`\n          color: var(--redsift-color-neutral-x-dark-grey);\n        `\n      : ''}\n  `}\n\n  ${({ $as, $fontFamily, $fontSize, $fontWeight, $lineHeight, $variant }) =>\n    !$variant\n      ? css`\n          ${$fontFamily\n            ? css`\n                font-family: var(--redsift-typography-font-family-${$fontFamily});\n              `\n            : ''}\n          ${$fontSize\n            ? css`\n                font-size: ${$fontSize};\n              `\n            : ''}\n          ${$fontWeight\n            ? css`\n                font-weight: ${$fontWeight};\n              `\n            : ''}\n          ${$lineHeight\n            ? css`\n                line-height: ${$lineHeight};\n              `\n            : ''}\n          ${$as === TextComponent.b\n            ? css`\n                font-weight: ${$fontWeight ? $fontWeight : 'var(--redsift-typography-font-weight-bold)'};\n              `\n            : $as === TextComponent.sup || $as === TextComponent.sub\n            ? css`\n                font-size: ${$fontSize ? $fontSize : '12px'};\n              `\n            : ''}\n        `\n      : $variant === TextVariant.inherit\n      ? css`\n          font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`inherit`};\n          font-size: ${$fontSize\n            ? $fontSize\n            : $as === TextComponent.sup || $as === TextComponent.sub\n            ? '12px'\n            : css`inherit`};\n          font-weight: ${$fontWeight\n            ? $fontWeight\n            : $as === TextComponent.b\n            ? 'var(--redsift-typography-font-weight-bold)'\n            : 'inherit'};\n          line-height: ${$lineHeight ? $lineHeight : css`inherit`};\n          text-transform: inherit;\n        `\n      : css`\n          font-family: ${$fontFamily\n            ? css`var(--redsift-typography-font-family-${$fontFamily})`\n            : css`var(--redsift-typography-${$variant}-font-family)`};\n          font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant}-font-size)`};\n          font-weight: ${$fontWeight ? $fontWeight : css`var(--redsift-typography-${$variant}-font-weight)`};\n          line-height: ${$lineHeight ? $lineHeight : css`var(--redsift-typography-${$variant}-line-height)`};\n          text-transform: var(--redsift-typography-${$variant}-text-transform);\n        `}\n  \n  ${({ $noWrap }) =>\n    $noWrap\n      ? css`\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        `\n      : ''}\n\n  ${({ wordBreak }) =>\n    wordBreak\n      ? css`\n          word-break: ${wordBreak};\n        `\n      : ''}\n`;\n"],"names":["StyledText","styled","span","baseStyling","_ref","$color","css","Object","keys","NotificationsColorPalette","indexOf","NeutralColorPalette","ProductColorPalette","_ref2","$as","TextComponent","i","cite","em","sub","sup","mark","_ref3","$fontFamily","$fontSize","$fontWeight","$lineHeight","$variant","b","TextVariant","inherit","_ref4","$noWrap","_ref5","wordBreak"],"mappings":"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"}

package/components/text/types.d.ts

@@ -0,0 +1,73 @@
+import { ComponentProps } from 'react';
+import { ValueOf } from '../../types/helpers.js';
+import { StylingProps } from '../../types/styles.js';
+import { NotificationsColorPalette, NeutralColorPalette, Theme } from '../../types/colors.js';
+import { FontFamily } from '../../types/fonts.js';
+
+/**
+ * Component variant.
+ */
+declare const TextVariant: {
+    readonly body: "body";
+    readonly button: "button";
+    readonly caption: "caption";
+    readonly helper: "helper";
+    readonly inherit: "inherit";
+};
+type TextVariant = ValueOf<typeof TextVariant>;
+declare const TextComponent: {
+    readonly p: "p";
+    readonly b: "b";
+    readonly i: "i";
+    readonly u: "u";
+    readonly abbr: "abbr";
+    readonly cite: "cite";
+    readonly del: "del";
+    readonly em: "em";
+    readonly ins: "ins";
+    readonly kbd: "kbd";
+    readonly mark: "mark";
+    readonly s: "s";
+    readonly samp: "samp";
+    readonly sub: "sub";
+    readonly sup: "sup";
+};
+type TextComponent = ValueOf<typeof TextComponent>;
+/**
+ * Component props.
+ */
+interface TextProps extends ComponentProps<'span'>, StylingProps {
+    /** Override component. */
+    as?: TextComponent;
+    /** Color variant. Either from color palette or hex or rgb strings. */
+    color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});
+    /** Font family. */
+    fontFamily?: FontFamily;
+    /** Font size. */
+    fontSize?: string;
+    /** Font weight. */
+    fontWeight?: string;
+    /** Line height. */
+    lineHeight?: string;
+    /** Whether the text will truncate with a text overflow ellipsis or wrap. */
+    noWrap?: boolean;
+    /** Theme. */
+    theme?: Theme;
+    /** Variant. */
+    variant?: TextVariant;
+    /** Word break CSS properties */
+    wordBreak?: string;
+}
+type StyledTextProps = Omit<TextProps, 'as' | 'color' | 'fontFamily' | 'fontSize' | 'lineHeight' | 'noWrap' | 'variant'> & {
+    $as: TextProps['as'];
+    $color: TextProps['color'];
+    $fontFamily?: TextProps['fontFamily'];
+    $fontSize: TextProps['fontSize'];
+    $fontWeight: TextProps['fontWeight'];
+    $lineHeight: TextProps['lineHeight'];
+    $noWrap: TextProps['noWrap'];
+    $variant: TextProps['variant'];
+    $theme: TextProps['theme'];
+};
+
+export { StyledTextProps, TextComponent, TextProps, TextVariant };

package/components/text/types.js

@@ -0,0 +1,34 @@
+/**
+ * Component variant.
+ */
+const TextVariant = {
+  body: 'body',
+  button: 'button',
+  caption: 'caption',
+  helper: 'helper',
+  inherit: 'inherit'
+};
+const TextComponent = {
+  p: 'p',
+  b: 'b',
+  i: 'i',
+  u: 'u',
+  abbr: 'abbr',
+  cite: 'cite',
+  del: 'del',
+  em: 'em',
+  ins: 'ins',
+  kbd: 'kbd',
+  mark: 'mark',
+  s: 's',
+  samp: 'samp',
+  sub: 'sub',
+  sup: 'sup'
+};
+
+/**
+ * Component props.
+ */
+
+export { TextComponent, TextVariant };
+//# sourceMappingURL=types.js.map

package/components/text/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/text/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { NotificationsColorPalette, FontFamily, NeutralColorPalette, StylingProps, ValueOf, Theme } from '../../types';\n\n/**\n * Component variant.\n */\nexport const TextVariant = {\n  body: 'body',\n  button: 'button',\n  caption: 'caption',\n  helper: 'helper',\n  inherit: 'inherit',\n} as const;\nexport type TextVariant = ValueOf<typeof TextVariant>;\n\nexport const TextComponent = {\n  p: 'p',\n  b: 'b',\n  i: 'i',\n  u: 'u',\n  abbr: 'abbr',\n  cite: 'cite',\n  del: 'del',\n  em: 'em',\n  ins: 'ins',\n  kbd: 'kbd',\n  mark: 'mark',\n  s: 's',\n  samp: 'samp',\n  sub: 'sub',\n  sup: 'sup',\n} as const;\nexport type TextComponent = ValueOf<typeof TextComponent>;\n\n/**\n * Component props.\n */\nexport interface TextProps extends ComponentProps<'span'>, StylingProps {\n  /** Override component. */\n  as?: TextComponent;\n  /** Color variant. Either from color palette or hex or rgb strings. */\n  color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});\n  /** Font family. */\n  fontFamily?: FontFamily;\n  /** Font size. */\n  fontSize?: string;\n  /** Font weight. */\n  fontWeight?: string;\n  /** Line height. */\n  lineHeight?: string;\n  /** Whether the text will truncate with a text overflow ellipsis or wrap. */\n  noWrap?: boolean;\n  /** Theme. */\n  theme?: Theme;\n  /** Variant. */\n  variant?: TextVariant;\n  /** Word break CSS properties */\n  wordBreak?: string;\n}\n\nexport type StyledTextProps = Omit<\n  TextProps,\n  'as' | 'color' | 'fontFamily' | 'fontSize' | 'lineHeight' | 'noWrap' | 'variant'\n> & {\n  $as: TextProps['as'];\n  $color: TextProps['color'];\n  $fontFamily?: TextProps['fontFamily'];\n  $fontSize: TextProps['fontSize'];\n  $fontWeight: TextProps['fontWeight'];\n  $lineHeight: TextProps['lineHeight'];\n  $noWrap: TextProps['noWrap'];\n  $variant: TextProps['variant'];\n  $theme: TextProps['theme'];\n};\n"],"names":["TextVariant","body","button","caption","helper","inherit","TextComponent","p","b","i","u","abbr","cite","del","em","ins","kbd","mark","s","samp","sub","sup"],"mappings":"AAGA;AACA;AACA;AACO,MAAMA,WAAW,GAAG;AACzBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAGH,MAAMC,aAAa,GAAG;AAC3BC,EAAAA,CAAC,EAAE,GAAG;AACNC,EAAAA,CAAC,EAAE,GAAG;AACNC,EAAAA,CAAC,EAAE,GAAG;AACNC,EAAAA,CAAC,EAAE,GAAG;AACNC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,CAAC,EAAE,GAAG;AACNC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,GAAG,EAAE,KAAA;AACP,EAAU;;AAGV;AACA;AACA;;;;"}

package/components/text-area/TextArea.d.ts

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

package/components/text-area/TextArea.js

@@ -0,0 +1,165 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
+import classNames from 'classnames';
+import { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound.js';
+import { TextAreaVariant } from './types.js';
+import { StyledTextArea } from './styles.js';
+import { useFocusRing } from '../../react-aria/react-aria/focus/useFocusRing.js';
+import { useFocusWithin } from '../../react-aria/react-aria/interactions/useFocusWithin.js';
+import { useComputeNumberOfRows } from '../../hooks/useComputeNumberOfRows.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 { Flexbox } from '../flexbox/Flexbox.js';
+
+const _excluded = ["aria-label", "aria-labelledby", "after", "autoFocus", "className", "color", "defaultValue", "forceColor", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "minimumRows", "name", "onBlur", "onChange", "onFocus", "placeholder", "textareaProps", "textareaRef", "theme", "value", "variant", "width"];
+const COMPONENT_NAME = 'TextArea';
+const CLASSNAME = 'redsift-text-area';
+
+/**
+ * The TextArea component.
+ * Can be used as controlled or uncontrolled.
+ */
+const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      after,
+      autoFocus,
+      className,
+      color: propsColor,
+      defaultValue = '',
+      forceColor,
+      isColored = true,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      leftIcon,
+      minimumRows,
+      name,
+      onBlur: onBlurProps,
+      onChange,
+      onFocus: onFocusProps,
+      placeholder,
+      textareaProps,
+      textareaRef: propsTextareaRef,
+      theme: propsTheme,
+      value: propsValue,
+      variant = TextAreaVariant.default,
+      width = '100%'
+    } = 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 _textareaRef = React__default.useRef(null);
+  const textareaRef = propsTextareaRef !== null && propsTextareaRef !== void 0 ? propsTextareaRef : _textareaRef;
+  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], 'TextArea');
+  const handleChange = useCallback(event => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (onChange) {
+      onChange(event.target.value, name, event);
+    } else {
+      setValue(event.target.value);
+    }
+  }, [onChange]);
+  const {
+    rows,
+    recomputeNumberOfRows
+  } = useComputeNumberOfRows(minimumRows || 4);
+  useEffect(() => {
+    // Recompute the number of rows for the first rendering
+    if (textareaRef && textareaRef.current) {
+      recomputeNumberOfRows(textareaRef.current);
+    }
+  }, [textareaRef, recomputeNumberOfRows, value]);
+  return /*#__PURE__*/React__default.createElement(StyledTextArea, _extends({
+    width: width
+  }, focusWithinProps, forwardedProps, {
+    $hasContent: isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder),
+    $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(TextArea.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("fieldset", {
+    "aria-hidden": "true",
+    className: `${TextArea.className}-text-area-wrapper__fieldset`
+  }, /*#__PURE__*/React__default.createElement("legend", {
+    id: labelId,
+    className: `${TextArea.className}-text-area-wrapper-fieldset__legend`
+  }, label ? /*#__PURE__*/React__default.createElement("span", null, label) : null)), label ? /*#__PURE__*/React__default.createElement("label", {
+    className: `${TextArea.className}__label`
+  }, /*#__PURE__*/React__default.createElement("span", null, label)) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: `${TextArea.className}__text-area-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: `${TextArea.className}-text-area-wrapper__text-area`
+  }, /*#__PURE__*/React__default.createElement("textarea", _extends({}, textareaProps, {
+    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,
+    disabled: isDisabled,
+    name: name,
+    onChange: handleChange,
+    placeholder: placeholder,
+    ref: textareaRef,
+    value: isControlled ? propsValue : value,
+    rows: rows
+  }))), after ? /*#__PURE__*/React__default.createElement(Flexbox, {
+    className: `${TextArea.className}-text-area-wrapper__toolbar`,
+    gap: "8px"
+  }, typeof after === 'function' ? after(isControlled ? propsValue : value, isDisabled, isInvalid || isRequired && !(isControlled ? propsValue : value), isRequired) : after) : null));
+});
+TextArea.className = CLASSNAME;
+TextArea.displayName = COMPONENT_NAME;
+
+export { TextArea };
+//# sourceMappingURL=TextArea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n  ComponentProps,\n  FocusEvent,\n  forwardRef,\n  MutableRefObject,\n  useCallback,\n  useEffect,\n  useState,\n} 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 { TextAreaProps, TextAreaVariant } from './types';\nimport { StyledTextArea } from './styles';\nimport { Icon } from '../../components/icon';\nimport { useTheme } from '../theme';\nimport { useComputeNumberOfRows } from '../../hooks';\nimport { useId } from '../../utils';\nimport { Flexbox } from '../flexbox';\n\nconst COMPONENT_NAME = 'TextArea';\nconst CLASSNAME = 'redsift-text-area';\n\n/**\n * The TextArea component.\n * Can be used as controlled or uncontrolled.\n */\nexport const TextArea: Comp<TextAreaProps, 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    isColored = true,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    leftIcon,\n    minimumRows,\n    name,\n    onBlur: onBlurProps,\n    onChange,\n    onFocus: onFocusProps,\n    placeholder,\n    textareaProps,\n    textareaRef: propsTextareaRef,\n    theme: propsTheme,\n    value: propsValue,\n    variant = TextAreaVariant.default,\n    width = '100%',\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 _textareaRef = React.useRef(null);\n  const textareaRef = propsTextareaRef ?? _textareaRef;\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], 'TextArea');\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\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 { rows, recomputeNumberOfRows } = useComputeNumberOfRows(minimumRows || 4);\n  useEffect(() => {\n    // Recompute the number of rows for the first rendering\n    if (textareaRef && textareaRef.current) {\n      recomputeNumberOfRows(textareaRef.current);\n    }\n  }, [textareaRef, recomputeNumberOfRows, value]);\n\n  return (\n    <StyledTextArea\n      width={width}\n      {...focusWithinProps}\n      {...forwardedProps}\n      $hasContent={isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder)}\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(TextArea.className, className)}\n      ref={ref as MutableRefObject<HTMLDivElement>}\n    >\n      <fieldset aria-hidden=\"true\" className={`${TextArea.className}-text-area-wrapper__fieldset`}>\n        <legend id={labelId} className={`${TextArea.className}-text-area-wrapper-fieldset__legend`}>\n          {label ? <span>{label}</span> : null}\n        </legend>\n      </fieldset>\n      {label ? (\n        <label className={`${TextArea.className}__label`}>\n          <span>{label}</span>\n        </label>\n      ) : null}\n      <div className={`${TextArea.className}__text-area-wrapper`}>\n        {leftIcon ? (\n          <Icon color={isDisabled ? 'question' : 'black'} {...leftIcon} aria-hidden=\"true\" className=\"left\" />\n        ) : null}\n        <div className={`${TextArea.className}-text-area-wrapper__text-area`}>\n          <textarea\n            {...textareaProps}\n            onBlur={(event) => {\n              onBlur?.(event);\n              onBlurProps?.(event as unknown as FocusEvent<HTMLDivElement, Element>);\n            }}\n            onFocus={(event) => {\n              onFocus?.(event);\n              onFocusProps?.(event as unknown as FocusEvent<HTMLDivElement, Element>);\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            disabled={isDisabled}\n            name={name}\n            onChange={handleChange}\n            placeholder={placeholder}\n            ref={textareaRef as MutableRefObject<HTMLTextAreaElement>}\n            value={isControlled ? propsValue : value}\n            rows={rows}\n          />\n        </div>\n        {after ? (\n          <Flexbox className={`${TextArea.className}-text-area-wrapper__toolbar`} gap=\"8px\">\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    </StyledTextArea>\n  );\n});\nTextArea.className = CLASSNAME;\nTextArea.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","TextArea","forwardRef","props","ref","ariaLabel","ariaLabelledby","after","autoFocus","className","color","propsColor","defaultValue","forceColor","isColored","isDisabled","isInvalid","isReadOnly","isRequired","label","leftIcon","minimumRows","name","onBlur","onBlurProps","onChange","onFocus","onFocusProps","placeholder","textareaProps","textareaRef","propsTextareaRef","theme","propsTheme","value","propsValue","variant","TextAreaVariant","default","width","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","isGradient","radar","_textareaRef","React","useRef","isFocusVisible","isFocused","focusProps","useFocusRing","isFocusWithin","setFocusWithin","useState","Boolean","focusWithinProps","useFocusWithin","onFocusWithinChange","setValue","isControlled","undefined","labelId","useId","warnIfNoAccessibleLabelFound","handleChange","useCallback","event","target","rows","recomputeNumberOfRows","useComputeNumberOfRows","useEffect","current","createElement","StyledTextArea","_extends","$hasContent","$hasLeftIcon","$color","$isGradient","$isDisabled","$isFocusVisible","$isInvalid","$isRequired","$isFocused","$theme","$variant","classNames","id","Icon","disabled","Flexbox","gap","displayName"],"mappings":"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"}