@faststore/ui 3.16.0 → 3.18.0

package/dist/cjs/index.d.ts

@@ -1,6 +1,4 @@
 export * from '@faststore/components';
-export { default as TextArea } from './components/atoms/TextArea';
-export type { TextAreaProps } from './components/atoms/TextArea';
 export { default as Incentive } from './components/atoms/Incentive';
 export type { IncentiveProps } from './components/atoms/Incentive';
 export { Tile, Tiles } from './components/organisms/Tiles';

package/dist/cjs/index.js

@@ -1,11 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tiles = exports.Tile = exports.Incentive = exports.TextArea = void 0;
+exports.Tiles = exports.Tile = exports.Incentive = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("@faststore/components"), exports);
-// Atoms
-var TextArea_1 = require("./components/atoms/TextArea");
-Object.defineProperty(exports, "TextArea", { enumerable: true, get: function () { return tslib_1.__importDefault(TextArea_1).default; } });
 var Incentive_1 = require("./components/atoms/Incentive");
 Object.defineProperty(exports, "Incentive", { enumerable: true, get: function () { return tslib_1.__importDefault(Incentive_1).default; } });
 // Organisms

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,gEAAqC;AAErC,QAAQ;AACR,wDAAiE;AAAxD,6HAAA,OAAO,OAAY;AAG5B,0DAAmE;AAA1D,+HAAA,OAAO,OAAa;AAG7B,YAAY;AACZ,sDAA0D;AAAjD,6FAAA,IAAI,OAAA;AAAE,8FAAA,KAAK,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,gEAAqC;AAErC,0DAAmE;AAA1D,+HAAA,OAAO,OAAa;AAG7B,YAAY;AACZ,sDAA0D;AAAjD,6FAAA,IAAI,OAAA;AAAE,8FAAA,KAAK,OAAA"}

package/dist/esm/index.d.ts

@@ -1,6 +1,4 @@
 export * from '@faststore/components';
-export { default as TextArea } from './components/atoms/TextArea';
-export type { TextAreaProps } from './components/atoms/TextArea';
 export { default as Incentive } from './components/atoms/Incentive';
 export type { IncentiveProps } from './components/atoms/Incentive';
 export { Tile, Tiles } from './components/organisms/Tiles';

package/dist/esm/index.js

@@ -1,6 +1,4 @@
 export * from '@faststore/components';
-// Atoms
-export { default as TextArea } from './components/atoms/TextArea';
 export { default as Incentive } from './components/atoms/Incentive';
 // Organisms
 export { Tile, Tiles } from './components/organisms/Tiles';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "3.16.0",
+  "version": "3.18.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -47,7 +47,7 @@
     }
   ],
   "dependencies": {
-    "@faststore/components": "^3.16.0",
+    "@faststore/components": "^3.18.0",
     "include-media": "^1.4.10",
     "modern-normalize": "^1.1.0",
     "react-swipeable": "^7.0.0",
@@ -69,5 +69,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "f8e0fe29267488a76fb8d85c33c3aa2cebf0d0f9"
+  "gitHead": "ba979131660bdfcfb18ed1f144c50f9643b49ecb"
 }

package/src/components/atoms/Textarea/styles.scss

@@ -0,0 +1,86 @@
+[data-fs-textarea] {
+  // --------------------------------------------------------
+  // Design Tokens for Textarea
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-textarea-padding                                           : var(--fs-spacing-1) var(--fs-spacing-2);
+  --fs-textarea-height                                            : calc(var(--fs-control-tap-size) * 3);
+
+  --fs-textarea-bkg-color                                         : var(--fs-color-body-bkg);
+  --fs-textarea-box-shadow                                        : none;
+  --fs-textarea-box-shadow-hover                                  : 0 0 0 var(--fs-border-width) var(--fs-border-color-active);
+
+  --fs-textarea-border-radius                                     : var(--fs-border-radius);
+  --fs-textarea-border-width                                      : var(--fs-border-width);
+  --fs-textarea-border-color                                      : var(--fs-border-color);
+  --fs-textarea-border-color-hover                                : var(--fs-border-color-active);
+
+  --fs-textarea-text-color                                        : var(--fs-color-text);
+  --fs-textarea-text-size                                         : var(--fs-text-size-body);
+
+  --fs-textarea-line-height                                       : 1.25;
+
+  --fs-textarea-transition-function                               : var(--fs-transition-function);
+  --fs-textarea-transition-property                               : var(--fs-transition-property);
+  --fs-textarea-transition-timing                                 : var(--fs-transition-timing);
+
+  // Disabled properties
+  --fs-textarea-disabled-bkg-color                                : var(--fs-color-disabled-bkg);
+  --fs-textarea-disabled-border-width                             : var(--fs-border-width);
+  --fs-textarea-disabled-text-color                               : var(--fs-color-disabled-text);
+  --fs-textarea-disabled-border-color                             : var(--fs-border-color);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: 100%;
+  height: var(--fs-textarea-height);
+  padding: var(--fs-textarea-padding);
+  font-size: var(--fs-textarea-text-size);
+  line-height: var(--fs-textarea-line-height);
+  color: var(--fs-textarea-text-color);
+  background-color: var(--fs-textarea-bkg-color);
+  border: var(--fs-textarea-border-width) solid var(--fs-textarea-border-color);
+  border-radius: var(--fs-textarea-border-radius);
+  box-shadow: var(--fs-textarea-box-shadow);
+  transition:
+    var(--fs-textarea-transition-property) var(--fs-textarea-transition-timing) var(--fs-textarea-transition-function),
+    width 0s,
+    height 0s;
+
+  @include input-focus-ring;
+
+  &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+    border-color: var(--fs-textarea-border-color-hover);
+    box-shadow: var(--fs-textarea-box-shadow-hover);
+  }
+
+  &:disabled {
+    color: var(--fs-textarea-disabled-text-color);
+    cursor: not-allowed;
+    background-color: var(--fs-textarea-disabled-bkg-color);
+    border: var(--fs-textarea-disabled-border-width) solid var(--fs-textarea-disabled-border-color);
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-textarea-resize="none"] {
+    resize: none;
+  }
+
+  &[data-fs-textarea-resize="vertical"] {
+    resize: vertical;
+  }
+
+  &[data-fs-textarea-resize="horizontal"] {
+    resize: horizontal;
+  }
+
+  &[data-fs-textarea-resize="both"] {
+    resize: both;
+  }
+}

package/src/components/molecules/Modal/styles.scss

@@ -42,6 +42,12 @@
   // Body
   --fs-modal-body-padding                          : var(--fs-spacing-1) var(--fs-spacing-4) var(--fs-spacing-5);
 
+  // Footer
+  --fs-modal-footer-padding                        : var(--fs-spacing-3) 0 var(--fs-spacing-3);
+  --fs-modal-footer-box-shadow                     : 0 -1px 15px 0 rgb(0 0 0 / 10.2%);
+  --fs-modal-footer-actions-padding                : var(--fs-spacing-1) var(--fs-spacing-4);
+  --fs-modal-footer-actions-gap                    : var(--fs-spacing-3);
+
   position: fixed;
   top: var(--fs-modal-position-top);
   right: var(--fs-modal-position-right);
@@ -94,4 +100,31 @@
   [data-fs-modal-body] {
     padding: var(--fs-modal-body-padding);
   }
+
+  [data-fs-modal-footer] {
+    padding: var(--fs-modal-footer-padding);
+    box-shadow: var(--fs-modal-footer-box-shadow);
+
+    [data-fs-modal-footer-actions] {
+      display: flex;
+      gap: var(--fs-modal-footer-actions-gap);
+      align-items: center;
+      justify-content: flex-end;
+      padding: var(--fs-modal-footer-actions-padding);
+
+      > * {
+        flex-shrink: 0;
+      }
+
+      &[data-fs-modal-footer-actions-direction="vertical"] {
+        flex-direction: column;
+        align-items: flex-end;
+        justify-content: center;
+      }
+
+      &[data-fs-modal-footer-actions-wrap="true"] {
+        flex-wrap: wrap;
+      }
+    }
+  }
 }

package/src/index.ts

@@ -1,9 +1,5 @@
 export * from '@faststore/components'
 
-// Atoms
-export { default as TextArea } from './components/atoms/TextArea'
-export type { TextAreaProps } from './components/atoms/TextArea'
-
 export { default as Incentive } from './components/atoms/Incentive'
 export type { IncentiveProps } from './components/atoms/Incentive'
 

package/src/styles/components.scss

@@ -4,6 +4,7 @@
 @import "../components/atoms/Checkbox/styles";
 @import "../components/atoms/Icon/styles";
 @import "../components/atoms/Input/styles";
+@import "../components/atoms/Textarea/styles";
 @import "../components/atoms/Link/styles";
 @import "../components/atoms/List/styles";
 @import "../components/atoms/Loader/styles";

package/dist/cjs/components/atoms/TextArea/TextArea.d.ts

@@ -1,14 +0,0 @@
-import type { TextareaHTMLAttributes } from 'react';
-import React from 'react';
-export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
-    /**
-     * Current variant of the input.
-     */
-    variant?: 'success' | 'error';
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-}
-declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export default TextArea;

package/dist/cjs/components/atoms/TextArea/TextArea.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const TextArea = (0, react_1.forwardRef)(function TextArea({ variant, testId = 'store-textarea', ...otherProps }, ref) {
-    const variants = {
-        'data-success': variant === 'success' || undefined,
-        'data-error': variant === 'error' || undefined,
-    };
-    return (react_1.default.createElement("textarea", { ref: ref, "data-fs-textarea": true, "data-testid": testId, ...variants, ...otherProps }));
-});
-exports.default = TextArea;
-//# sourceMappingURL=TextArea.js.map

package/dist/cjs/components/atoms/TextArea/TextArea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../../src/components/atoms/TextArea/TextArea.tsx"],"names":[],"mappings":";;;AACA,uDAAyC;AAczC,MAAM,QAAQ,GAAG,IAAA,kBAAU,EACzB,SAAS,QAAQ,CACf,EAAE,OAAO,EAAE,MAAM,GAAG,gBAAgB,EAAE,GAAG,UAAU,EAAE,EACrD,GAAG;IAEH,MAAM,QAAQ,GAAG;QACf,cAAc,EAAE,OAAO,KAAK,SAAS,IAAI,SAAS;QAClD,YAAY,EAAE,OAAO,KAAK,OAAO,IAAI,SAAS;KAC/C,CAAA;IAED,OAAO,CACL,4CACE,GAAG,EAAE,GAAG,2CAEK,MAAM,KACf,QAAQ,KACR,UAAU,GACd,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,kBAAe,QAAQ,CAAA"}

package/dist/cjs/components/atoms/TextArea/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './TextArea';
-export type { TextAreaProps } from './TextArea';

package/dist/cjs/components/atoms/TextArea/index.js

@@ -1,9 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var TextArea_1 = require("./TextArea");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(TextArea_1).default; } });
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/atoms/TextArea/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/atoms/TextArea/index.ts"],"names":[],"mappings":";;;;;;AAAA,uCAAoC;AAA3B,oHAAA,OAAO,OAAA"}

package/dist/esm/components/atoms/TextArea/TextArea.d.ts

@@ -1,14 +0,0 @@
-import type { TextareaHTMLAttributes } from 'react';
-import React from 'react';
-export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
-    /**
-     * Current variant of the input.
-     */
-    variant?: 'success' | 'error';
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-}
-declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export default TextArea;

package/dist/esm/components/atoms/TextArea/TextArea.js

@@ -1,10 +0,0 @@
-import React, { forwardRef } from 'react';
-const TextArea = forwardRef(function TextArea({ variant, testId = 'store-textarea', ...otherProps }, ref) {
-    const variants = {
-        'data-success': variant === 'success' || undefined,
-        'data-error': variant === 'error' || undefined,
-    };
-    return (React.createElement("textarea", { ref: ref, "data-fs-textarea": true, "data-testid": testId, ...variants, ...otherProps }));
-});
-export default TextArea;
-//# sourceMappingURL=TextArea.js.map

package/dist/esm/components/atoms/TextArea/TextArea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../../src/components/atoms/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAczC,MAAM,QAAQ,GAAG,UAAU,CACzB,SAAS,QAAQ,CACf,EAAE,OAAO,EAAE,MAAM,GAAG,gBAAgB,EAAE,GAAG,UAAU,EAAE,EACrD,GAAG;IAEH,MAAM,QAAQ,GAAG;QACf,cAAc,EAAE,OAAO,KAAK,SAAS,IAAI,SAAS;QAClD,YAAY,EAAE,OAAO,KAAK,OAAO,IAAI,SAAS;KAC/C,CAAA;IAED,OAAO,CACL,kCACE,GAAG,EAAE,GAAG,2CAEK,MAAM,KACf,QAAQ,KACR,UAAU,GACd,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/esm/components/atoms/TextArea/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './TextArea';
-export type { TextAreaProps } from './TextArea';

package/dist/esm/components/atoms/TextArea/index.js

@@ -1,2 +0,0 @@
-export { default } from './TextArea';
-//# sourceMappingURL=index.js.map

package/dist/esm/components/atoms/TextArea/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/atoms/TextArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}

package/src/components/atoms/TextArea/TextArea.tsx

@@ -1,38 +0,0 @@
-import type { TextareaHTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface TextAreaProps
-  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
-  /**
-   * Current variant of the input.
-   */
-  variant?: 'success' | 'error'
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  function TextArea(
-    { variant, testId = 'store-textarea', ...otherProps },
-    ref
-  ) {
-    const variants = {
-      'data-success': variant === 'success' || undefined,
-      'data-error': variant === 'error' || undefined,
-    }
-
-    return (
-      <textarea
-        ref={ref}
-        data-fs-textarea
-        data-testid={testId}
-        {...variants}
-        {...otherProps}
-      />
-    )
-  }
-)
-
-export default TextArea

package/src/components/atoms/TextArea/index.ts

@@ -1,2 +0,0 @@
-export { default } from './TextArea'
-export type { TextAreaProps } from './TextArea'