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

package/components/text-field/styles.js

@@ -0,0 +1,252 @@
+import styled, { css } from 'styled-components';
+import { TextFieldVariant } from './types.js';
+import { baseStyling } from '../shared/styles.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component style.
+ */
+const StyledTextField = 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-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' : '-7px'};
+      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 === TextFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);
+          ` : css`
+            max-width: calc(133% - 32px);
+            transform: translate(${$variant === TextFieldVariant.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 !== TextFieldVariant.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-field__input-wrapper {
+      align-items: flex-start;
+      box-sizing: border-box;
+      cursor: text;
+      display: inline-flex;
+      min-height: 42px;
+      position: relative;
+    }
+
+    .redsift-text-field-input-wrapper__pills-and-input {
+      align-items: flex-start;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column-reverse;
+      flex-wrap: wrap;
+      flex: 1 1 auto;
+      padding-bottom: 7px;
+      ${$variant !== TextFieldVariant.underline && !$hasLeftIcon ? css`
+            padding-left: 16px;
+          ` : ''}
+      padding-top: ${label ? '9px' : '7px'};
+
+      .redsift-pill {
+        margin: 3px 6px 3px 0;
+      }
+    }
+
+    .redsift-text-field-input-wrapper-pills-and-input__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: 100%;
+
+      ${$isDisabled ? css`
+            color: var(--redsift-color-grey-l2);
+          ` : css`
+            color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+          `}
+    }
+
+    .redsift-text-field-input-wrapper-pills-and-input__input::placeholder {
+      color: var(--redsift-color-neutral-mid-grey);
+    }
+
+    .redsift-text-field-input-wrapper-pills-and-input__input:focus {
+      outline: 0;
+    }
+
+    .redsift-text-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;
+
+      ${!$isGradient || $isDisabled || !$isFocused || $isInvalid ? css`
+            ${$variant === TextFieldVariant.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 === TextFieldVariant.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-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: 100%;
+            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;
+          `}
+    }
+
+    .redsift-text-field-input-wrapper-fieldset__legend > span {
+      display: inline-block;
+      opacity: 0;
+      padding-left: 5px;
+      padding-right: 5px;
+      visibility: visible;
+    }
+
+    .redsift-text-field-input-wrapper__toolbar {
+      position: relative;
+      top: 9px;
+    }
+
+    .redsift-icon-button:not(.redsift-pill > .redsift-icon-button) {
+      padding: 2px;
+      position: relative;
+      top: -2px;
+      height: 28px;
+      width: 28px;
+    }
+
+    ${$variant !== TextFieldVariant.underline ? css`
+          .redsift-icon.left {
+            padding-left: 12px;
+            padding-right: 8px;
+            line-height: 28px;
+          }
+
+          .redsift-text-field-input-wrapper__toolbar {
+            padding-right: 8px;
+          }
+        ` : css`
+          .redsift-icon.left {
+            padding-right: 8px;
+          }
+        `}
+
+    .redsift-icon.left,
+    .redsift-icon.right {
+      top: 9px;
+    }
+  `;
+}}
+`;
+
+export { StyledTextField };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/text-field/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledTextFieldProps, TextFieldVariant } from './types';\nimport { Theme } from '@redsift/design-system/types';\n\n/**\n * Component style.\n */\nexport const StyledTextField = styled.div<StyledTextFieldProps>`\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-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' : '-7px'};\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 === TextFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);\n          `\n        : css`\n            max-width: calc(133% - 32px);\n            transform: translate(${$variant === TextFieldVariant.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 !== TextFieldVariant.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-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    }\n\n    .redsift-text-field-input-wrapper__pills-and-input {\n      align-items: flex-start;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column-reverse;\n      flex-wrap: wrap;\n      flex: 1 1 auto;\n      padding-bottom: 7px;\n      ${$variant !== TextFieldVariant.underline && !$hasLeftIcon\n        ? css`\n            padding-left: 16px;\n          `\n        : ''}\n      padding-top: ${label ? '9px' : '7px'};\n\n      .redsift-pill {\n        margin: 3px 6px 3px 0;\n      }\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__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: 100%;\n\n      ${$isDisabled\n        ? css`\n            color: var(--redsift-color-grey-l2);\n          `\n        : css`\n            color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n          `}\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input::placeholder {\n      color: var(--redsift-color-neutral-mid-grey);\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input:focus {\n      outline: 0;\n    }\n\n    .redsift-text-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      ${!$isGradient || $isDisabled || !$isFocused || $isInvalid\n        ? css`\n            ${$variant === TextFieldVariant.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 === TextFieldVariant.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-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: 100%;\n            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;\n          `}\n    }\n\n    .redsift-text-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-text-field-input-wrapper__toolbar {\n      position: relative;\n      top: 9px;\n    }\n\n    .redsift-icon-button:not(.redsift-pill > .redsift-icon-button) {\n      padding: 2px;\n      position: relative;\n      top: -2px;\n      height: 28px;\n      width: 28px;\n    }\n\n    ${$variant !== TextFieldVariant.underline\n      ? css`\n          .redsift-icon.left {\n            padding-left: 12px;\n            padding-right: 8px;\n            line-height: 28px;\n          }\n\n          .redsift-text-field-input-wrapper__toolbar {\n            padding-right: 8px;\n          }\n        `\n      : css`\n          .redsift-icon.left {\n            padding-right: 8px;\n          }\n        `}\n\n    .redsift-icon.left,\n    .redsift-icon.right {\n      top: 9px;\n    }\n  `}\n`;\n"],"names":["StyledTextField","styled","div","baseStyling","_ref","label","$hasLeftIcon","$hasContent","$isFocused","$isDisabled","$isInvalid","$color","$isGradient","$theme","$variant","css","TextFieldVariant","underline","Theme","dark"],"mappings":"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"}

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

@@ -0,0 +1,99 @@
+import { ComponentProps, ReactNode, MutableRefObject, ChangeEvent } from 'react';
+import { ValueOf } from '../../types/helpers.js';
+import { ButtonsColorPalette, Theme } from '../../types/colors.js';
+import { StylingProps } from '../../types/styles.js';
+import { IconButtonProps } from '../icon-button/types.js';
+import { IconProps } from '../icon/types.js';
+import { PillProps } from '../pill/types.js';
+
+/**
+ * Component variant.
+ */
+declare const TextFieldVariant: {
+    readonly default: "default";
+    readonly underline: "underline";
+};
+type TextFieldVariant = ValueOf<typeof TextFieldVariant>;
+/**
+ * Component color.
+ */
+type TextFieldColor = ButtonsColorPalette;
+/**
+ * Component props.
+ */
+interface TextFieldProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {
+    /** Whether the component can be autofocused. */
+    autoFocus?: boolean;
+    /** Color variant. */
+    color?: TextFieldColor;
+    /** Force color even when not focused. */
+    forceColor?: boolean;
+    /**
+     * Default value.
+     * Used for uncontrolled version.
+     */
+    defaultValue?: string;
+    /** Whether the clear button is displayed or not. */
+    hasClearButton?: boolean | Omit<Partial<IconButtonProps>, 'ref'>;
+    /** Place for icon buttons between the clear button and the separator. */
+    internal?: ReactNode | ((value?: string, isDisabled?: boolean, isInvalid?: boolean, isRequired?: boolean) => ReactNode);
+    /** Place for icon buttons after the separator. */
+    after?: ReactNode | ((value?: string, isDisabled?: boolean, isInvalid?: boolean, isRequired?: boolean) => ReactNode);
+    /** Custom props to pass to the input element. */
+    inputProps?: ComponentProps<'input'>;
+    /** Custom ref object to pass to the input element. */
+    inputRef?: MutableRefObject<HTMLInputElement>;
+    /** @deprecated Whether the component should use the product colors or shades of grey. */
+    isColored?: boolean;
+    /** 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 */
+    label?: string;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    leftIcon?: Omit<IconProps, 'ref'>;
+    /** Name to pass to the input element. */
+    name?: string;
+    /** Method to handle component change. */
+    onChange?(value?: string, name?: string, event?: ChangeEvent<HTMLInputElement>): void;
+    /** Method to handle component clear. */
+    onClear?(): void;
+    /** List of Pills. */
+    pills?: Omit<PillProps, 'ref'>[];
+    /** Placeholder. */
+    placeholder?: string;
+    /** Theme. */
+    theme?: Theme;
+    /** Input type. */
+    type?: string;
+    /**
+     * Input value.
+     * Used for controlled version.
+     */
+    value?: string;
+    /** TextField variant. */
+    variant?: TextFieldVariant;
+}
+type StyledTextFieldProps = Omit<TextFieldProps, 'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isRequired' | 'onChange'> & {
+    $color: TextFieldProps['color'];
+    $isGradient: boolean;
+    $hasLeftIcon: boolean;
+    $hasContent: boolean;
+    $isDisabled: TextFieldProps['isDisabled'];
+    $isInvalid: TextFieldProps['isInvalid'];
+    $isFocused: boolean;
+    $isFocusVisible: boolean;
+    $isRequired: TextFieldProps['isRequired'];
+    $theme: TextFieldProps['theme'];
+    $variant: TextFieldProps['variant'];
+};
+
+export { StyledTextFieldProps, TextFieldColor, TextFieldProps, TextFieldVariant };

package/components/text-field/types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/text-field/types.ts"],"sourcesContent":["import { ChangeEvent, ComponentProps, MutableRefObject, ReactNode } from 'react';\nimport { ButtonsColorPalette, StylingProps, Theme, ValueOf } from '../../types';\nimport { IconProps } from '../icon';\nimport { IconButtonProps } from '../icon-button';\nimport { PillProps } from '../pill';\n\n/**\n * Component variant.\n */\nexport const TextFieldVariant = {\n  default: 'default',\n  underline: 'underline',\n} as const;\nexport type TextFieldVariant = ValueOf<typeof TextFieldVariant>;\n\n/**\n * Component color.\n */\nexport type TextFieldColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface TextFieldProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n  /** Whether the component can be autofocused. */\n  autoFocus?: boolean;\n  /** Color variant. */\n  color?: TextFieldColor;\n  /** Force color even when not focused. */\n  forceColor?: boolean;\n  /**\n   * Default value.\n   * Used for uncontrolled version.\n   */\n  defaultValue?: string;\n  /** Whether the clear button is displayed or not. */\n  hasClearButton?: boolean | Omit<Partial<IconButtonProps>, 'ref'>;\n  /** Place for icon buttons between the clear button and the separator. */\n  internal?:\n    | ReactNode\n    | ((value?: string, isDisabled?: boolean, isInvalid?: boolean, isRequired?: boolean) => ReactNode);\n  /** Place for icon buttons after the separator. */\n  after?: ReactNode | ((value?: string, isDisabled?: boolean, isInvalid?: boolean, isRequired?: boolean) => ReactNode);\n  /** Custom props to pass to the input element. */\n  inputProps?: ComponentProps<'input'>;\n  /** Custom ref object to pass to the input element. */\n  inputRef?: MutableRefObject<HTMLInputElement>;\n  /** @deprecated Whether the component should use the product colors or shades of grey. */\n  isColored?: boolean;\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 */\n  label?: string;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  leftIcon?: Omit<IconProps, 'ref'>;\n  /** Name to pass to the input element. */\n  name?: string;\n  /** Method to handle component change. */\n  onChange?(value?: string, name?: string, event?: ChangeEvent<HTMLInputElement>): void;\n  /** Method to handle component clear. */\n  onClear?(): void;\n  /** List of Pills. */\n  pills?: Omit<PillProps, 'ref'>[];\n  /** Placeholder. */\n  placeholder?: string;\n  /** Theme. */\n  theme?: Theme;\n  /** Input type. */\n  type?: string;\n  /**\n   * Input value.\n   * Used for controlled version.\n   */\n  value?: string;\n  /** TextField variant. */\n  variant?: TextFieldVariant;\n}\n\nexport type StyledTextFieldProps = Omit<\n  TextFieldProps,\n  'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isRequired' | 'onChange'\n> & {\n  $color: TextFieldProps['color'];\n  $isGradient: boolean;\n  $hasLeftIcon: boolean;\n  $hasContent: boolean;\n  $isDisabled: TextFieldProps['isDisabled'];\n  $isInvalid: TextFieldProps['isInvalid'];\n  $isFocused: boolean;\n  $isFocusVisible: boolean;\n  $isRequired: TextFieldProps['isRequired'];\n  $theme: TextFieldProps['theme'];\n  $variant: TextFieldProps['variant'];\n};\n"],"names":["TextFieldVariant","default","underline"],"mappings":"AAMA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAG;AAC9BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAA;AACb,EAAU;;AAGV;AACA;AACA;;AAGA;AACA;AACA;;;;"}

package/components/theme/context.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Theme } from '../../types/colors.js';
+
+declare const ThemeContext: React.Context<{
+    theme?: Theme | undefined;
+} | null>;
+declare const ThemeProvider: React.Provider<{
+    theme?: Theme | undefined;
+} | null>;
+
+export { ThemeContext, ThemeProvider };

package/components/theme/context.js

@@ -0,0 +1,7 @@
+import React__default from 'react';
+
+const ThemeContext = /*#__PURE__*/React__default.createContext(null);
+const ThemeProvider = ThemeContext.Provider;
+
+export { ThemeContext, ThemeProvider };
+//# sourceMappingURL=context.js.map

package/components/theme/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/components/theme/context.ts"],"sourcesContent":["import React from 'react';\nimport { Theme } from '../../types';\n\nexport const ThemeContext = React.createContext<{ theme?: Theme } | null>(null);\n\nexport const ThemeProvider = ThemeContext.Provider;\n"],"names":["ThemeContext","React","createContext","ThemeProvider","Provider"],"mappings":";;AAGO,MAAMA,YAAY,gBAAGC,cAAK,CAACC,aAAa,CAA2B,IAAI,EAAC;AAElEC,MAAAA,aAAa,GAAGH,YAAY,CAACI;;;;"}

package/components/theme/useTheme.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '../../types/colors.js';
+
+declare function useTheme(theme?: Theme): Theme;
+
+export { useTheme };

package/components/theme/useTheme.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { ThemeContext } from './context.js';
+import { Theme } from '../../types/colors.js';
+
+function useTheme(theme) {
+  var _ref;
+  const themeState = useContext(ThemeContext);
+  const contextTheme = (_ref = theme !== null && theme !== void 0 ? theme : themeState === null || themeState === void 0 ? void 0 : themeState.theme) !== null && _ref !== void 0 ? _ref : Theme.light;
+  return contextTheme;
+}
+
+export { useTheme };
+//# sourceMappingURL=useTheme.js.map

package/components/theme/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","sources":["../../../src/components/theme/useTheme.ts"],"sourcesContent":["import { useContext } from 'react';\nimport { Theme } from '../../types';\nimport { ThemeContext } from './context';\n\nexport function useTheme(theme?: Theme): Theme {\n  const themeState = useContext(ThemeContext);\n  const contextTheme: Theme = theme ?? themeState?.theme ?? Theme.light;\n\n  return contextTheme;\n}\n"],"names":["useTheme","theme","_ref","themeState","useContext","ThemeContext","contextTheme","Theme","light"],"mappings":";;;;AAIO,SAASA,QAAQA,CAACC,KAAa,EAAS;AAAA,EAAA,IAAAC,IAAA,CAAA;AAC7C,EAAA,MAAMC,UAAU,GAAGC,UAAU,CAACC,YAAY,CAAC,CAAA;EAC3C,MAAMC,YAAmB,GAAAJ,CAAAA,IAAA,GAAGD,KAAK,aAALA,KAAK,KAAA,KAAA,CAAA,GAALA,KAAK,GAAIE,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAVA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,UAAU,CAAEF,KAAK,MAAAC,IAAAA,IAAAA,IAAA,cAAAA,IAAA,GAAIK,KAAK,CAACC,KAAK,CAAA;AAErE,EAAA,OAAOF,YAAY,CAAA;AACrB;;;;"}

package/hooks/useBoundingRect.d.ts

@@ -0,0 +1,8 @@
+import { MutableRefObject, DependencyList } from 'react';
+
+/**
+ * Get the bounding rect of a component.
+ */
+declare const useBoundingClientRect: (ref: MutableRefObject<HTMLElement>, deps?: DependencyList) => DOMRect;
+
+export { useBoundingClientRect };

package/hooks/useBoundingRect.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Get the bounding rect of a component.
+ */
+const useBoundingClientRect = (ref, deps) => {
+  const [boundingRect, setBoundingRect] = useState({});
+  useEffect(() => {
+    if (ref.current) {
+      setBoundingRect(ref.current.getBoundingClientRect());
+    }
+  }, deps);
+  return boundingRect;
+};
+
+export { useBoundingClientRect };
+//# sourceMappingURL=useBoundingRect.js.map

package/hooks/useBoundingRect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBoundingRect.js","sources":["../../src/hooks/useBoundingRect.ts"],"sourcesContent":["import { useState, useEffect, MutableRefObject, DependencyList } from 'react';\n\n/**\n * Get the bounding rect of a component.\n */\nexport const useBoundingClientRect = (\n  ref: MutableRefObject<HTMLElement>,\n  deps?: DependencyList\n) => {\n  const [boundingRect, setBoundingRect] = useState<DOMRect>({} as DOMRect);\n\n  useEffect(() => {\n    if (ref.current) {\n      setBoundingRect(ref.current.getBoundingClientRect());\n    }\n  }, deps);\n\n  return boundingRect;\n};\n"],"names":["useBoundingClientRect","ref","deps","boundingRect","setBoundingRect","useState","useEffect","current","getBoundingClientRect"],"mappings":";;AAEA;AACA;AACA;MACaA,qBAAqB,GAAGA,CACnCC,GAAkC,EAClCC,IAAqB,KAClB;EACH,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAAU,EAAa,CAAC,CAAA;AAExEC,EAAAA,SAAS,CAAC,MAAM;IACd,IAAIL,GAAG,CAACM,OAAO,EAAE;MACfH,eAAe,CAACH,GAAG,CAACM,OAAO,CAACC,qBAAqB,EAAE,CAAC,CAAA;AACtD,KAAA;GACD,EAAEN,IAAI,CAAC,CAAA;AAER,EAAA,OAAOC,YAAY,CAAA;AACrB;;;;"}

package/hooks/useComputeNumberOfRows.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Hook that allows to calculate the number of rows needed for a text area.
+ * @param minimumRows Minimum number of rows that we want to display.
+ * @return rows to be used and a callback to recalculate
+ */
+declare const useComputeNumberOfRows: (minimumRows: number) => {
+    /** number of rows to be used on the text area */
+    rows: number;
+    /**
+     * Callback in order to recalculate the number of rows due to a change on the text area
+     */
+    recomputeNumberOfRows(target: Element): void;
+};
+
+export { useComputeNumberOfRows };

package/hooks/useComputeNumberOfRows.js

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+/**
+ * Hook that allows to calculate the number of rows needed for a text area.
+ * @param minimumRows Minimum number of rows that we want to display.
+ * @return rows to be used and a callback to recalculate
+ */
+const useComputeNumberOfRows = minimumRows => {
+  const [rows, setRows] = useState(minimumRows);
+  const recompute = target => {
+    /**
+     * HEAD's UP! This part is a little bit tricky. The idea here is to only
+     * display the necessary rows on the textarea. In order to dynamically adjust
+     * the height on that field, we need to:
+     * 1. Set the current amount of rows to the minimum. That will make the scroll appear.
+     * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content
+     * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height
+     * by the line height.
+     * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to
+     * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)
+     * when we will not see the update and the rows will be resized to the minimum.
+     * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows
+     * on the state in order to allow React to re-render. Therefore, we save them using `useState`
+     */
+    // eslint-disable-next-line no-param-reassign
+    target.rows = minimumRows;
+    let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);
+    currentRows = currentRows >= minimumRows ? currentRows : minimumRows;
+    // eslint-disable-next-line no-param-reassign
+    target.rows = currentRows;
+    setRows(currentRows);
+  };
+  return {
+    recomputeNumberOfRows: recompute,
+    rows
+  };
+};
+
+export { useComputeNumberOfRows };
+//# sourceMappingURL=useComputeNumberOfRows.js.map

package/hooks/useComputeNumberOfRows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComputeNumberOfRows.js","sources":["../../src/hooks/useComputeNumberOfRows.ts"],"sourcesContent":["import { useState } from 'react';\n\n/**\n * Hook that allows to calculate the number of rows needed for a text area.\n * @param minimumRows Minimum number of rows that we want to display.\n * @return rows to be used and a callback to recalculate\n */\nexport const useComputeNumberOfRows = (\n  minimumRows: number\n): {\n  /** number of rows to be used on the text area */\n  rows: number;\n  /**\n   * Callback in order to recalculate the number of rows due to a change on the text area\n   */\n  recomputeNumberOfRows(target: Element): void;\n} => {\n  const [rows, setRows] = useState(minimumRows);\n\n  const recompute = (target: Element) => {\n    /**\n     * HEAD's UP! This part is a little bit tricky. The idea here is to only\n     * display the necessary rows on the textarea. In order to dynamically adjust\n     * the height on that field, we need to:\n     * 1. Set the current amount of rows to the minimum. That will make the scroll appear.\n     * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content\n     * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height\n     * by the line height.\n     * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to\n     * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)\n     * when we will not see the update and the rows will be resized to the minimum.\n     * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows\n     * on the state in order to allow React to re-render. Therefore, we save them using `useState`\n     */\n    // eslint-disable-next-line no-param-reassign\n    (target as HTMLTextAreaElement).rows = minimumRows;\n    let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);\n    currentRows = currentRows >= minimumRows ? currentRows : minimumRows;\n    // eslint-disable-next-line no-param-reassign\n    (target as HTMLTextAreaElement).rows = currentRows;\n\n    setRows(currentRows);\n  };\n\n  return {\n    recomputeNumberOfRows: recompute,\n    rows,\n  };\n};\n"],"names":["useComputeNumberOfRows","minimumRows","rows","setRows","useState","recompute","target","currentRows","scrollHeight","clientHeight","recomputeNumberOfRows"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACaA,MAAAA,sBAAsB,GACjCC,WAAmB,IAQhB;EACH,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAACH,WAAW,CAAC,CAAA;EAE7C,MAAMI,SAAS,GAAIC,MAAe,IAAK;AACrC;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;IACCA,MAAM,CAAyBJ,IAAI,GAAGD,WAAW,CAAA;IAClD,IAAIM,WAAW,GAAGD,MAAM,CAACE,YAAY,IAAIF,MAAM,CAACG,YAAY,GAAGR,WAAW,CAAC,CAAA;AAC3EM,IAAAA,WAAW,GAAGA,WAAW,IAAIN,WAAW,GAAGM,WAAW,GAAGN,WAAW,CAAA;AACpE;IACCK,MAAM,CAAyBJ,IAAI,GAAGK,WAAW,CAAA;IAElDJ,OAAO,CAACI,WAAW,CAAC,CAAA;GACrB,CAAA;EAED,OAAO;AACLG,IAAAA,qBAAqB,EAAEL,SAAS;AAChCH,IAAAA,IAAAA;GACD,CAAA;AACH;;;;"}

package/hooks/useIsLoaded.d.ts

@@ -0,0 +1,5 @@
+declare const useIsLoaded: () => {
+    isLoaded: boolean;
+};
+
+export { useIsLoaded };

package/hooks/useIsLoaded.js

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+
+const useIsLoaded = () => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  useEffect(() => {
+    setIsLoaded(true);
+  });
+  return {
+    isLoaded
+  };
+};
+
+export { useIsLoaded };
+//# sourceMappingURL=useIsLoaded.js.map

package/hooks/useIsLoaded.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsLoaded.js","sources":["../../src/hooks/useIsLoaded.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nexport const useIsLoaded = () => {\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  useEffect(() => {\n    setIsLoaded(true);\n  });\n\n  return {\n    isLoaded,\n  };\n};\n"],"names":["useIsLoaded","isLoaded","setIsLoaded","useState","useEffect"],"mappings":";;AAEaA,MAAAA,WAAW,GAAGA,MAAM;EAC/B,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAE/CC,EAAAA,SAAS,CAAC,MAAM;IACdF,WAAW,CAAC,IAAI,CAAC,CAAA;AACnB,GAAC,CAAC,CAAA;EAEF,OAAO;AACLD,IAAAA,QAAAA;GACD,CAAA;AACH;;;;"}

package/hooks/useWindowSize.d.ts

@@ -0,0 +1,8 @@
+interface WindowSize {
+    height?: number;
+    width?: number;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+declare const useWindowSize: () => WindowSize;
+
+export { useWindowSize };

package/hooks/useWindowSize.js

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+
+const useWindowSize = () => {
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined,
+    size: undefined
+  });
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize(windowSize => {
+        if (window.innerWidth === windowSize.width && window.innerHeight === windowSize.height) {
+          return windowSize;
+        }
+        let size;
+        if (window.innerWidth <= 480) {
+          size = 'xs';
+        } else if (window.innerWidth <= 768) {
+          size = 'sm';
+        } else if (window.innerWidth <= 1024) {
+          size = 'md';
+        } else if (window.innerWidth <= 1200) {
+          size = 'lg';
+        } else {
+          size = 'xl';
+        }
+        return {
+          width: window.innerWidth,
+          height: window.innerHeight,
+          size
+        };
+      });
+    }
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowSize;
+};
+
+export { useWindowSize };
+//# sourceMappingURL=useWindowSize.js.map

package/hooks/useWindowSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowSize.js","sources":["../../src/hooks/useWindowSize.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\ninterface WindowSize {\n  height?: number;\n  width?: number;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport const useWindowSize = () => {\n  const [windowSize, setWindowSize] = useState<WindowSize>({\n    width: undefined,\n    height: undefined,\n    size: undefined,\n  });\n\n  useEffect(() => {\n    function handleResize() {\n      setWindowSize((windowSize) => {\n        if (\n          window.innerWidth === windowSize.width &&\n          window.innerHeight === windowSize.height\n        ) {\n          return windowSize;\n        }\n\n        let size: WindowSize['size'];\n        if (window.innerWidth <= 480) {\n          size = 'xs';\n        } else if (window.innerWidth <= 768) {\n          size = 'sm';\n        } else if (window.innerWidth <= 1024) {\n          size = 'md';\n        } else if (window.innerWidth <= 1200) {\n          size = 'lg';\n        } else {\n          size = 'xl';\n        }\n        return {\n          width: window.innerWidth,\n          height: window.innerHeight,\n          size,\n        };\n      });\n    }\n\n    window.addEventListener('resize', handleResize);\n    handleResize();\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n  return windowSize;\n};\n"],"names":["useWindowSize","windowSize","setWindowSize","useState","width","undefined","height","size","useEffect","handleResize","window","innerWidth","innerHeight","addEventListener","removeEventListener"],"mappings":";;AAQaA,MAAAA,aAAa,GAAGA,MAAM;AACjC,EAAA,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAa;AACvDC,IAAAA,KAAK,EAAEC,SAAS;AAChBC,IAAAA,MAAM,EAAED,SAAS;AACjBE,IAAAA,IAAI,EAAEF,SAAAA;AACR,GAAC,CAAC,CAAA;AAEFG,EAAAA,SAAS,CAAC,MAAM;IACd,SAASC,YAAYA,GAAG;MACtBP,aAAa,CAAED,UAAU,IAAK;AAC5B,QAAA,IACES,MAAM,CAACC,UAAU,KAAKV,UAAU,CAACG,KAAK,IACtCM,MAAM,CAACE,WAAW,KAAKX,UAAU,CAACK,MAAM,EACxC;AACA,UAAA,OAAOL,UAAU,CAAA;AACnB,SAAA;AAEA,QAAA,IAAIM,IAAwB,CAAA;AAC5B,QAAA,IAAIG,MAAM,CAACC,UAAU,IAAI,GAAG,EAAE;AAC5BJ,UAAAA,IAAI,GAAG,IAAI,CAAA;AACb,SAAC,MAAM,IAAIG,MAAM,CAACC,UAAU,IAAI,GAAG,EAAE;AACnCJ,UAAAA,IAAI,GAAG,IAAI,CAAA;AACb,SAAC,MAAM,IAAIG,MAAM,CAACC,UAAU,IAAI,IAAI,EAAE;AACpCJ,UAAAA,IAAI,GAAG,IAAI,CAAA;AACb,SAAC,MAAM,IAAIG,MAAM,CAACC,UAAU,IAAI,IAAI,EAAE;AACpCJ,UAAAA,IAAI,GAAG,IAAI,CAAA;AACb,SAAC,MAAM;AACLA,UAAAA,IAAI,GAAG,IAAI,CAAA;AACb,SAAA;QACA,OAAO;UACLH,KAAK,EAAEM,MAAM,CAACC,UAAU;UACxBL,MAAM,EAAEI,MAAM,CAACE,WAAW;AAC1BL,UAAAA,IAAAA;SACD,CAAA;AACH,OAAC,CAAC,CAAA;AACJ,KAAA;AAEAG,IAAAA,MAAM,CAACG,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC,CAAA;AAC/CA,IAAAA,YAAY,EAAE,CAAA;IAEd,OAAO,MAAMC,MAAM,CAACI,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC,CAAA;GAChE,EAAE,EAAE,CAAC,CAAA;AACN,EAAA,OAAOR,UAAU,CAAA;AACnB;;;;"}