acinguiux-ds-react-framework 0.0.1

package/build/esm/components/TextArea/TextArea.consts.js

@@ -0,0 +1,35 @@
+import { Sizes } from 'acinguiux-ds-react-base';
+export const textAreaConsts = {
+    paddingWithoutIcon: {
+        [Sizes.Small]: '4px 10px',
+        [Sizes.Medium]: '8px 12px',
+        [Sizes.Large]: '12px 16px',
+    },
+    paddingWithIcon: {
+        [Sizes.Small]: {
+            left: '4px 10px 4px 32px',
+            right: '4px 32px 4px 10px',
+        },
+        [Sizes.Medium]: {
+            left: '8px 12px 8px 40px',
+            right: '8px 40px 8px 12px',
+        },
+        [Sizes.Large]: {
+            left: '12px 16px 12px 44px',
+            right: '12px 44px 12px 16px',
+        },
+    },
+};
+export const textAreaWrapperConsts = {
+    iconSize: {
+        [Sizes.Small]: '20px',
+        [Sizes.Medium]: '24px',
+        [Sizes.Large]: '24px',
+    },
+    iconOffset: {
+        [Sizes.Small]: '7px',
+        [Sizes.Medium]: '9px',
+        [Sizes.Large]: '13px',
+    },
+};
+//# sourceMappingURL=TextArea.consts.js.map

package/build/esm/components/TextArea/TextArea.consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.consts.js","sourceRoot":"","sources":["../../../../src/components/TextArea/TextArea.consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAehD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,kBAAkB,EAAE;QAClB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,UAAU;QACzB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,UAAU;QAC1B,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,WAAW;KAC3B;IACD,eAAe,EAAE;QACf,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;YACb,IAAI,EAAE,mBAAmB;YACzB,KAAK,EAAE,mBAAmB;SAC3B;QACD,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;YACd,IAAI,EAAE,mBAAmB;YACzB,KAAK,EAAE,mBAAmB;SAC3B;QACD,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;YACb,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,qBAAqB;SAC7B;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAA+B;IAC/D,QAAQ,EAAE;QACR,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM;QACrB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM;QACtB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM;KACtB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK;QACpB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK;QACrB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM;KACtB;CACF,CAAC","sourcesContent":["import { Sizes } from 'acinguiux-ds-react-base';\n\ntype TextAreaWrapperConstsProps = {\n  iconSize: {\n    [Sizes.Small]: string;\n    [Sizes.Medium]: string;\n    [Sizes.Large]: string;\n  };\n  iconOffset: {\n    [Sizes.Small]: string;\n    [Sizes.Medium]: string;\n    [Sizes.Large]: string;\n  };\n};\n\nexport const textAreaConsts = {\n  paddingWithoutIcon: {\n    [Sizes.Small]: '4px 10px',\n    [Sizes.Medium]: '8px 12px',\n    [Sizes.Large]: '12px 16px',\n  },\n  paddingWithIcon: {\n    [Sizes.Small]: {\n      left: '4px 10px 4px 32px',\n      right: '4px 32px 4px 10px',\n    },\n    [Sizes.Medium]: {\n      left: '8px 12px 8px 40px',\n      right: '8px 40px 8px 12px',\n    },\n    [Sizes.Large]: {\n      left: '12px 16px 12px 44px',\n      right: '12px 44px 12px 16px',\n    },\n  },\n};\n\nexport const textAreaWrapperConsts: TextAreaWrapperConstsProps = {\n  iconSize: {\n    [Sizes.Small]: '20px',\n    [Sizes.Medium]: '24px',\n    [Sizes.Large]: '24px',\n  },\n  iconOffset: {\n    [Sizes.Small]: '7px',\n    [Sizes.Medium]: '9px',\n    [Sizes.Large]: '13px',\n  },\n};\n"]}

package/build/esm/components/TextArea/TextArea.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ITextAreaProps } from './TextArea.types';
+declare const TextArea: React.ForwardRefExoticComponent<Omit<ITextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;
+//# sourceMappingURL=TextArea.d.ts.map

package/build/esm/components/TextArea/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAMxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,QAAQ,yGAuCb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build/esm/components/TextArea/TextArea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+import { Sizes, Positions, TEXT_AREA_CLASS } from 'acinguiux-ds-react-base';
+import * as Styled from './TextArea.styles';
+const TextArea = forwardRef(({ className, size = Sizes.Medium, icon = null, iconPosition = Positions.Left, invalid = false, disabled = false, resize = 'both', wrapperProps, tabIndex = 0, ...rest }, ref) => (_jsxs(Styled.TextAreaWrapper, { className: classNames(TEXT_AREA_CLASS, className), size: size, iconPosition: iconPosition, disabled: disabled, tabIndex: tabIndex, ...wrapperProps, children: [iconPosition === Positions.Left && icon, _jsx(Styled.TextArea, { ref: ref, size: size, invalid: invalid, disabled: disabled, resize: resize, icon: icon, iconPosition: iconPosition, "aria-invalid": invalid, ...rest }), iconPosition === Positions.Right && icon] })));
+export default TextArea;
+//# sourceMappingURL=TextArea.js.map

package/build/esm/components/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAG5C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EACE,SAAS,EACT,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,IAAI,GAAG,IAAI,EACX,YAAY,GAAG,SAAS,CAAC,IAAI,EAC7B,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,MAAM,EACf,YAAY,EACZ,QAAQ,GAAG,CAAC,EACZ,GAAG,IAAI,EACQ,EACjB,GAAsC,EACtC,EAAE,CAAC,CACH,MAAC,MAAM,CAAC,eAAe,IACrB,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,EACjD,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,YAAY,aAEf,YAAY,KAAK,SAAS,CAAC,IAAI,IAAI,IAAI,EACxC,KAAC,MAAM,CAAC,QAAQ,IACd,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,kBACZ,OAAO,KACjB,IAAI,GACR,EACD,YAAY,KAAK,SAAS,CAAC,KAAK,IAAI,IAAI,IAClB,CAC1B,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, Positions, TEXT_AREA_CLASS } from 'acinguiux-ds-react-base';\n\nimport * as Styled from './TextArea.styles';\nimport { ITextAreaProps } from './TextArea.types';\n\nconst TextArea = forwardRef(\n  (\n    {\n      className,\n      size = Sizes.Medium,\n      icon = null,\n      iconPosition = Positions.Left,\n      invalid = false,\n      disabled = false,\n      resize = 'both',\n      wrapperProps,\n      tabIndex = 0,\n      ...rest\n    }: ITextAreaProps,\n    ref: ForwardedRef<HTMLTextAreaElement>,\n  ) => (\n    <Styled.TextAreaWrapper\n      className={classNames(TEXT_AREA_CLASS, className)}\n      size={size}\n      iconPosition={iconPosition}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      {...wrapperProps}\n    >\n      {iconPosition === Positions.Left && icon}\n      <Styled.TextArea\n        ref={ref}\n        size={size}\n        invalid={invalid}\n        disabled={disabled}\n        resize={resize}\n        icon={icon}\n        iconPosition={iconPosition}\n        aria-invalid={invalid}\n        {...rest}\n      />\n      {iconPosition === Positions.Right && icon}\n    </Styled.TextAreaWrapper>\n  ),\n);\n\nexport default TextArea;\n"]}

package/build/esm/components/TextArea/TextArea.stories.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { Sizes, Positions } from 'acinguiux-ds-react-base';
+import { ITextAreaProps } from './TextArea.types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<ITextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+    parameters: {
+        storyLink: string;
+    };
+    argTypes: {
+        className: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        invalid: {
+            control: string;
+        };
+        icon: {
+            options: string[];
+            control: {
+                type: string;
+            };
+            mapping: {
+                PersonCircle: import("react/jsx-runtime").JSX.Element;
+                PersonSolid: import("react/jsx-runtime").JSX.Element;
+            };
+        };
+        iconPosition: {
+            control: string;
+            options: Positions[];
+        };
+        placeholder: {
+            control: string;
+        };
+        readOnly: {
+            control: string;
+        };
+        resize: {
+            control: string;
+            options: string[];
+        };
+        size: {
+            control: string;
+            options: Sizes[];
+        };
+        value: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: StoryFn<ITextAreaProps>;
+export declare const Disabled: StoryFn<ITextAreaProps>;
+export declare const Invalid: StoryFn<ITextAreaProps>;
+export declare const DifferentSizes: StoryFn<ITextAreaProps>;
+export declare const Resize: StoryFn<ITextAreaProps>;
+export declare const WithDefaultValue: StoryFn<ITextAreaProps>;
+export declare const Rows: StoryFn<ITextAreaProps>;
+export declare const ManagedInput: StoryFn<ITextAreaProps>;
+export declare const WithIcon: StoryFn<ITextAreaProps>;
+//# sourceMappingURL=TextArea.stories.d.ts.map

package/build/esm/components/TextArea/TextArea.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAK3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKlD,wBAyBE;AAEF,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,cAAc,CAAkD,CAAC;AAE/F,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,cAAc,CAE5C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,cAAc,CAE3C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,cAAc,CAMlD,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,OAAO,CAAC,cAAc,CAO1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,cAAc,CAEpD,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,OAAO,CAAC,cAAc,CAExC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,cAAc,CAahD,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,cAAc,CAM5C,CAAC"}

package/build/esm/components/TextArea/TextArea.stories.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Sizes, Positions } from 'acinguiux-ds-react-base';
+import Grid from '../Grid/Grid';
+import { PersonCircle, PersonSolid } from '../Icon/components';
+import TextArea from './TextArea';
+import { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';
+const icons = { PersonCircle: _jsx(PersonCircle, {}), PersonSolid: _jsx(PersonSolid, {}) };
+export default {
+    title: 'Data Input/Text Area',
+    component: TextArea,
+    parameters: {
+        storyLink: `${GITHUB_COMPONENT_BASE_URL}/TextArea/TextArea.stories.tsx`,
+    },
+    argTypes: {
+        className: { control: 'text' },
+        disabled: { control: 'boolean' },
+        invalid: { control: 'boolean' },
+        icon: {
+            options: Object.keys(icons),
+            control: { type: 'select' },
+            mapping: icons,
+        },
+        iconPosition: {
+            control: 'radio',
+            options: [Positions.Left, Positions.Right],
+        },
+        placeholder: { control: 'text' },
+        readOnly: { control: 'boolean' },
+        resize: { control: 'radio', options: ['inherit', 'none', 'both', 'horizontal', 'vertical', 'initial'] },
+        size: { control: 'radio', options: [Sizes.Small, Sizes.Medium, Sizes.Large] },
+        value: { control: 'text' },
+    },
+};
+export const Default = (args) => _jsx(TextArea, { ...args });
+export const Disabled = (args) => (_jsx(TextArea, { placeholder: "Placeholder", disabled: true, ...args }));
+export const Invalid = (args) => (_jsx(TextArea, { placeholder: "Placeholder", invalid: true, ...args }));
+export const DifferentSizes = (args) => (_jsxs(Grid, { children: [_jsx(TextArea, { placeholder: "Size: small", ...args, size: Sizes.Small }), _jsx(TextArea, { placeholder: "Size: medium (default)", ...args, size: Sizes.Medium }), _jsx(TextArea, { placeholder: "Size: large", ...args, size: Sizes.Large })] }));
+export const Resize = (args) => (_jsxs(Grid, { children: [_jsx(TextArea, { placeholder: "Resize: both (default)", ...args }), _jsx(TextArea, { placeholder: "Resize: vertical", resize: "vertical", ...args }), _jsx(TextArea, { placeholder: "Resize: horizontal", resize: "horizontal", ...args }), _jsx(TextArea, { placeholder: "Resize: none", resize: "none", ...args })] }));
+export const WithDefaultValue = (args) => (_jsx(TextArea, { defaultValue: "This is a default value", ...args }));
+export const Rows = (args) => (_jsx(TextArea, { placeholder: "Rows: 10", rows: 10, ...args }));
+export const ManagedInput = ({ value, ...args }) => {
+    const [newValue, setNewValue] = useState(value);
+    const onChange = useCallback((e) => {
+        setNewValue(e.target.value);
+    }, []);
+    return (_jsxs(Grid, { gap: "8px", children: [_jsx(TextArea, { ...args, onChange: onChange, value: newValue }), _jsxs("span", { children: ["Value: ", newValue] })] }));
+};
+export const WithIcon = (args) => (_jsxs(Grid, { rowGap: "24px", children: [_jsx(TextArea, { placeholder: "Text area with icon", icon: _jsx(PersonSolid, { width: 24, height: 24 }), rows: 1, ...args }), _jsx(TextArea, { placeholder: "Text area with icon", icon: _jsx(PersonSolid, { width: 24, height: 24 }), ...args }), _jsx(TextArea, { placeholder: "Text area with icon", icon: _jsx(PersonSolid, { width: 24, height: 24 }), rows: 10, ...args })] }));
+//# sourceMappingURL=TextArea.stories.js.map

package/build/esm/components/TextArea/TextArea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../src/components/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ChangeEventHandler, ReactElement, useCallback, useState } from 'react';\n\nimport { StoryFn } from '@storybook/react';\nimport { Sizes, Positions } from 'acinguiux-ds-react-base';\n\nimport Grid from '../Grid/Grid';\nimport { PersonCircle, PersonSolid } from '../Icon/components';\nimport TextArea from './TextArea';\nimport { ITextAreaProps } from './TextArea.types';\nimport { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';\n\nconst icons = { PersonCircle: <PersonCircle />, PersonSolid: <PersonSolid /> };\n\nexport default {\n  title: 'Data Input/Text Area',\n  component: TextArea,\n  parameters: {\n    storyLink: `${GITHUB_COMPONENT_BASE_URL}/TextArea/TextArea.stories.tsx`,\n  },\n  argTypes: {\n    className: { control: 'text' },\n    disabled: { control: 'boolean' },\n    invalid: { control: 'boolean' },\n    icon: {\n      options: Object.keys(icons),\n      control: { type: 'select' },\n      mapping: icons,\n    },\n    iconPosition: {\n      control: 'radio',\n      options: [Positions.Left, Positions.Right],\n    },\n    placeholder: { control: 'text' },\n    readOnly: { control: 'boolean' },\n    resize: { control: 'radio', options: ['inherit', 'none', 'both', 'horizontal', 'vertical', 'initial'] },\n    size: { control: 'radio', options: [Sizes.Small, Sizes.Medium, Sizes.Large] },\n    value: { control: 'text' },\n  },\n};\n\nexport const Default: StoryFn<ITextAreaProps> = (args): ReactElement => <TextArea {...args} />;\n\nexport const Disabled: StoryFn<ITextAreaProps> = (args): ReactElement => (\n  <TextArea placeholder=\"Placeholder\" disabled {...args} />\n);\n\nexport const Invalid: StoryFn<ITextAreaProps> = (args): ReactElement => (\n  <TextArea placeholder=\"Placeholder\" invalid {...args} />\n);\n\nexport const DifferentSizes: StoryFn<ITextAreaProps> = (args): ReactElement => (\n  <Grid>\n    <TextArea placeholder=\"Size: small\" {...args} size={Sizes.Small} />\n    <TextArea placeholder=\"Size: medium (default)\" {...args} size={Sizes.Medium} />\n    <TextArea placeholder=\"Size: large\" {...args} size={Sizes.Large} />\n  </Grid>\n);\n\nexport const Resize: StoryFn<ITextAreaProps> = (args): ReactElement => (\n  <Grid>\n    <TextArea placeholder=\"Resize: both (default)\" {...args} />\n    <TextArea placeholder=\"Resize: vertical\" resize=\"vertical\" {...args} />\n    <TextArea placeholder=\"Resize: horizontal\" resize=\"horizontal\" {...args} />\n    <TextArea placeholder=\"Resize: none\" resize=\"none\" {...args} />\n  </Grid>\n);\n\nexport const WithDefaultValue: StoryFn<ITextAreaProps> = (args): ReactElement => (\n  <TextArea defaultValue=\"This is a default value\" {...args} />\n);\n\nexport const Rows: StoryFn<ITextAreaProps> = (args): ReactElement => (\n  <TextArea placeholder=\"Rows: 10\" rows={10} {...args} />\n);\n\nexport const ManagedInput: StoryFn<ITextAreaProps> = ({ value, ...args }): ReactElement => {\n  const [newValue, setNewValue] = useState(value);\n\n  const onChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback((e) => {\n    setNewValue(e.target.value);\n  }, []);\n\n  return (\n    <Grid gap=\"8px\">\n      <TextArea {...args} onChange={onChange} value={newValue} />\n      <span>Value: {newValue}</span>\n    </Grid>\n  );\n};\n\nexport const WithIcon: StoryFn<ITextAreaProps> = (args): ReactElement => (\n  <Grid rowGap=\"24px\">\n    <TextArea placeholder=\"Text area with icon\" icon={<PersonSolid width={24} height={24} />} rows={1} {...args} />\n    <TextArea placeholder=\"Text area with icon\" icon={<PersonSolid width={24} height={24} />} {...args} />\n    <TextArea placeholder=\"Text area with icon\" icon={<PersonSolid width={24} height={24} />} rows={10} {...args} />\n  </Grid>\n);\n"]}

package/build/esm/components/TextArea/TextArea.styles.d.ts

@@ -0,0 +1,7 @@
+import { ITextAreaProps } from './TextArea.types';
+type TextAreaWrapperPropsRequired = 'size' | 'iconPosition' | 'disabled';
+type TextAreaPropsRequired = 'invalid' | 'size' | 'icon' | 'iconPosition' | 'resize';
+declare const TextAreaWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Required<Pick<ITextAreaProps, TextAreaWrapperPropsRequired>>, never>;
+declare const TextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, Required<Pick<ITextAreaProps, TextAreaPropsRequired>>, never>;
+export { TextArea, TextAreaWrapper };
+//# sourceMappingURL=TextArea.styles.d.ts.map

package/build/esm/components/TextArea/TextArea.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,KAAK,4BAA4B,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,CAAC;AACzE,KAAK,qBAAqB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,cAAc,GAAG,QAAQ,CAAC;AAErF,QAAA,MAAM,eAAe,mKAkBpB,CAAC;AAEF,QAAA,MAAM,QAAQ,iKAyCb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC"}

package/build/esm/components/TextArea/TextArea.styles.js

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components';
+import { Sizes, Positions } from 'acinguiux-ds-react-base';
+import { textAreaConsts, textAreaWrapperConsts } from './TextArea.consts';
+const TextAreaWrapper = styled.div `
+  display: inline-block;
+  position: relative;
+  width: 100%;
+
+  ${({ iconPosition, size, disabled, theme }) => css `
+    svg {
+      width: ${textAreaWrapperConsts.iconSize[size]};
+      height: ${textAreaWrapperConsts.iconSize[size]};
+      position: absolute;
+      left: ${iconPosition === Positions.Left ? textAreaWrapperConsts.iconOffset[size] : null};
+      right: ${iconPosition === Positions.Right ? textAreaWrapperConsts.iconOffset[size] : null};
+      top: ${textAreaWrapperConsts.iconOffset[size]};
+
+      ${disabled && `fill: ${theme.text.onSurface.inactive}`}
+      ${!disabled && `fill: ${theme.text.onSurface.subtle}`}
+    }
+  `}
+`;
+const TextArea = styled.textarea `
+  ${({ iconPosition, size, invalid, icon, disabled, resize, theme }) => css `
+    ${(size === Sizes.Small || size === Sizes.Medium) && theme.paragraph.small.normal};
+    ${size === Sizes.Large && theme.paragraph.medium.normal};
+    border: 1px solid ${invalid ? theme.system.strong.negative : theme.border.medium};
+    border-radius: 2px;
+    width: 100%;
+    color: ${theme.text.onSurface.strong};
+    background-color: ${theme.background.surface};
+    padding: ${icon ? textAreaConsts.paddingWithIcon[size][iconPosition] : textAreaConsts.paddingWithoutIcon[size]};
+    transition: box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+    resize: ${resize};
+
+    &::placeholder {
+      color: ${disabled ? theme.text.onSurface.inactive : theme.text.onSurface.subtle};
+      font-style: italic;
+    }
+
+    &:hover {
+      ${!invalid &&
+    css `
+        border-color: ${theme.focus.strong};
+      `}
+    }
+
+    &:focus {
+      ${!invalid &&
+    css `
+        border: 1px solid ${theme.focus.strong};
+      `}
+      outline: 0;
+      box-shadow: 0 0 0 3px ${theme.focus.medium};
+    }
+
+    &:disabled {
+      background-color: ${theme.background.inactive};
+      color: ${theme.text.onSurface.inactive};
+      border-color: ${theme.border.subtle};
+      cursor: not-allowed;
+    }
+  `}
+`;
+export { TextArea, TextAreaWrapper };
+//# sourceMappingURL=TextArea.styles.js.map

package/build/esm/components/TextArea/TextArea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAA8D;;;;;IAK5F,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;eAErC,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACnC,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC;;cAEtC,YAAY,KAAK,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;eAC9E,YAAY,KAAK,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,qBAAqB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;aAClF,qBAAqB,CAAC,UAAU,CAAC,IAAI,CAAC;;QAE3C,QAAQ,IAAI,SAAS,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE;QACpD,CAAC,QAAQ,IAAI,SAAS,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;;GAExD;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAuD;IACnF,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MACrE,CAAC,IAAI,KAAK,KAAK,CAAC,KAAK,IAAI,IAAI,KAAK,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM;MAC/E,IAAI,KAAK,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM;wBACnC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;aAGvE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM;wBAChB,KAAK,CAAC,UAAU,CAAC,OAAO;eACjC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,kBAAkB,CAAC,IAAI,CAAC;;cAEpG,MAAM;;;eAGL,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM;;;;;QAK7E,CAAC,OAAO;IACV,GAAG,CAAA;wBACe,KAAK,CAAC,KAAK,CAAC,MAAM;OACnC;;;;QAIC,CAAC,OAAO;IACV,GAAG,CAAA;4BACmB,KAAK,CAAC,KAAK,CAAC,MAAM;OACvC;;8BAEuB,KAAK,CAAC,KAAK,CAAC,MAAM;;;;0BAItB,KAAK,CAAC,UAAU,CAAC,QAAQ;eACpC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ;sBACtB,KAAK,CAAC,MAAM,CAAC,MAAM;;;GAGtC;CACF,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Sizes, Positions } from 'acinguiux-ds-react-base';\n\nimport { textAreaConsts, textAreaWrapperConsts } from './TextArea.consts';\nimport { ITextAreaProps } from './TextArea.types';\n\ntype TextAreaWrapperPropsRequired = 'size' | 'iconPosition' | 'disabled';\ntype TextAreaPropsRequired = 'invalid' | 'size' | 'icon' | 'iconPosition' | 'resize';\n\nconst TextAreaWrapper = styled.div<Required<Pick<ITextAreaProps, TextAreaWrapperPropsRequired>>>`\n  display: inline-block;\n  position: relative;\n  width: 100%;\n\n  ${({ iconPosition, size, disabled, theme }) => css`\n    svg {\n      width: ${textAreaWrapperConsts.iconSize[size]};\n      height: ${textAreaWrapperConsts.iconSize[size]};\n      position: absolute;\n      left: ${iconPosition === Positions.Left ? textAreaWrapperConsts.iconOffset[size] : null};\n      right: ${iconPosition === Positions.Right ? textAreaWrapperConsts.iconOffset[size] : null};\n      top: ${textAreaWrapperConsts.iconOffset[size]};\n\n      ${disabled && `fill: ${theme.text.onSurface.inactive}`}\n      ${!disabled && `fill: ${theme.text.onSurface.subtle}`}\n    }\n  `}\n`;\n\nconst TextArea = styled.textarea<Required<Pick<ITextAreaProps, TextAreaPropsRequired>>>`\n  ${({ iconPosition, size, invalid, icon, disabled, resize, theme }) => css`\n    ${(size === Sizes.Small || size === Sizes.Medium) && theme.paragraph.small.normal};\n    ${size === Sizes.Large && theme.paragraph.medium.normal};\n    border: 1px solid ${invalid ? theme.system.strong.negative : theme.border.medium};\n    border-radius: 2px;\n    width: 100%;\n    color: ${theme.text.onSurface.strong};\n    background-color: ${theme.background.surface};\n    padding: ${icon ? textAreaConsts.paddingWithIcon[size][iconPosition] : textAreaConsts.paddingWithoutIcon[size]};\n    transition: box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1);\n    resize: ${resize};\n\n    &::placeholder {\n      color: ${disabled ? theme.text.onSurface.inactive : theme.text.onSurface.subtle};\n      font-style: italic;\n    }\n\n    &:hover {\n      ${!invalid &&\n      css`\n        border-color: ${theme.focus.strong};\n      `}\n    }\n\n    &:focus {\n      ${!invalid &&\n      css`\n        border: 1px solid ${theme.focus.strong};\n      `}\n      outline: 0;\n      box-shadow: 0 0 0 3px ${theme.focus.medium};\n    }\n\n    &:disabled {\n      background-color: ${theme.background.inactive};\n      color: ${theme.text.onSurface.inactive};\n      border-color: ${theme.border.subtle};\n      cursor: not-allowed;\n    }\n  `}\n`;\n\nexport { TextArea, TextAreaWrapper };\n"]}

package/build/esm/components/TextArea/TextArea.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TextArea.test.d.ts.map

package/build/esm/components/TextArea/TextArea.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.test.d.ts","sourceRoot":"","sources":["../../../../src/components/TextArea/TextArea.test.tsx"],"names":[],"mappings":""}

package/build/esm/components/TextArea/TextArea.test.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Sizes, Positions } from 'acinguiux-ds-react-base';
+import { render, screen, fireEvent, describe, it, expect, vi } from '../../utils/viTestUtils';
+import TextArea from './TextArea';
+const Icon = () => _jsx("svg", { "data-testid": "svg-icon" });
+const INITIAL_VALUE = 'Initial value';
+describe('TextArea component', () => {
+    it('should render', () => {
+        render(_jsx(TextArea, {}));
+        const textArea = screen.getByRole('textbox');
+        expect(textArea).toBeInTheDocument();
+    });
+    it('should accept a value prop', () => {
+        render(_jsx(TextArea, { value: INITIAL_VALUE }));
+        expect(screen.getByDisplayValue(INITIAL_VALUE)).toBeInTheDocument();
+    });
+    it('updates the value when onChange is called', () => {
+        const handleChange = vi.fn();
+        render(_jsx(TextArea, { onChange: handleChange }));
+        const textArea = screen.getByRole('textbox');
+        fireEvent.change(textArea, { target: { value: 'new text' } });
+        expect(handleChange).toHaveBeenCalledTimes(1);
+        expect(handleChange).toHaveBeenCalledWith(expect.objectContaining({ target: expect.objectContaining({ value: 'new text' }) }));
+    });
+    it('displays the new value when controlled', () => {
+        const Component = () => {
+            const [value, setValue] = useState('');
+            return _jsx(TextArea, { value: value, onChange: (e) => setValue(e.target.value) });
+        };
+        render(_jsx(Component, {}));
+        const textArea = screen.getByRole('textbox');
+        fireEvent.change(textArea, { target: { value: 'new text' } });
+        expect(textArea.value).toBe('new text');
+    });
+    it('should accept a className prop', () => {
+        const { container } = render(_jsx(TextArea, { className: "custom-class-name" }));
+        expect(container.querySelector('.custom-class-name')).toBeInTheDocument();
+    });
+    describe('Sizes with Icon', () => {
+        const sizesWithIconPositionAndPadding = [
+            [Sizes.Small, Positions.Left, 1, '4px 10px 4px 32px'],
+            [Sizes.Small, Positions.Right, 0, '4px 32px 4px 10px'],
+            [Sizes.Medium, Positions.Left, 1, '8px 12px 8px 40px'],
+            [Sizes.Medium, Positions.Right, 0, '8px 40px 8px 12px'],
+            [Sizes.Large, Positions.Left, 1, '12px 16px 12px 44px'],
+            [Sizes.Large, Positions.Right, 0, '12px 44px 12px 16px'],
+        ];
+        it.each(sizesWithIconPositionAndPadding)('should have %s size with icon on %s', (size, iconPosition, iconIndex) => {
+            render(_jsx(TextArea, { icon: _jsx(Icon, {}), iconPosition: iconPosition, size: size, "data-testid": "textarea", wrapperProps: { title: 'wrapper' } }));
+            const textarea = screen.getByTestId('textarea');
+            const icon = screen.getByTestId('svg-icon');
+            const wrapperDiv = screen.getByTitle('wrapper');
+            expect(wrapperDiv.children).toHaveLength(2);
+            expect(wrapperDiv.children[iconIndex]).toEqual(textarea);
+            expect(icon).toBeInTheDocument();
+        });
+    });
+    it('should render invalid', () => {
+        render(_jsx(TextArea, { "data-testid": "textarea", invalid: true }));
+        expect(screen.getByTestId('textarea')).toBeInTheDocument();
+    });
+    it('should render disabled', () => {
+        render(_jsx(TextArea, { "data-testid": "textarea", disabled: true }));
+        expect(screen.getByTestId('textarea')).toBeInTheDocument();
+    });
+    it('should render resize vertical', () => {
+        render(_jsx(TextArea, { "data-testid": "textarea", resize: "vertical" }));
+        expect(screen.getByTestId('textarea')).toBeInTheDocument();
+    });
+    it('should render resize horizontal', () => {
+        render(_jsx(TextArea, { "data-testid": "textarea", resize: "horizontal" }));
+        expect(screen.getByTestId('textarea')).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=TextArea.test.js.map

package/build/esm/components/TextArea/TextArea.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.test.js","sourceRoot":"","sources":["../../../../src/components/TextArea/TextArea.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\n\nimport { Sizes, Positions } from 'acinguiux-ds-react-base';\n\nimport { render, screen, fireEvent, describe, it, expect, vi } from '../../utils/viTestUtils';\nimport TextArea from './TextArea';\nimport { TextAreaIconPosition, TextAreaSize } from './TextArea.types';\n\nconst Icon = () => <svg data-testid=\"svg-icon\" />;\n\nconst INITIAL_VALUE = 'Initial value';\n\ndescribe('TextArea component', () => {\n  it('should render', () => {\n    render(<TextArea />);\n    const textArea = screen.getByRole('textbox');\n    expect(textArea).toBeInTheDocument();\n  });\n\n  it('should accept a value prop', () => {\n    render(<TextArea value={INITIAL_VALUE} />);\n    expect(screen.getByDisplayValue(INITIAL_VALUE)).toBeInTheDocument();\n  });\n\n  it('updates the value when onChange is called', () => {\n    const handleChange = vi.fn();\n    render(<TextArea onChange={handleChange} />);\n\n    const textArea = screen.getByRole('textbox');\n    fireEvent.change(textArea, { target: { value: 'new text' } });\n\n    expect(handleChange).toHaveBeenCalledTimes(1);\n    expect(handleChange).toHaveBeenCalledWith(\n      expect.objectContaining({ target: expect.objectContaining({ value: 'new text' }) }),\n    );\n  });\n\n  it('displays the new value when controlled', () => {\n    const Component = () => {\n      const [value, setValue] = useState('');\n\n      return <TextArea value={value} onChange={(e) => setValue(e.target.value)} />;\n    };\n\n    render(<Component />);\n\n    const textArea: HTMLTextAreaElement = screen.getByRole('textbox');\n    fireEvent.change(textArea, { target: { value: 'new text' } });\n\n    expect(textArea.value).toBe('new text');\n  });\n\n  it('should accept a className prop', () => {\n    const { container } = render(<TextArea className=\"custom-class-name\" />);\n    expect(container.querySelector('.custom-class-name')).toBeInTheDocument();\n  });\n\n  describe('Sizes with Icon', () => {\n    const sizesWithIconPositionAndPadding: [TextAreaSize, TextAreaIconPosition, number, string][] = [\n      [Sizes.Small, Positions.Left, 1, '4px 10px 4px 32px'],\n      [Sizes.Small, Positions.Right, 0, '4px 32px 4px 10px'],\n      [Sizes.Medium, Positions.Left, 1, '8px 12px 8px 40px'],\n      [Sizes.Medium, Positions.Right, 0, '8px 40px 8px 12px'],\n      [Sizes.Large, Positions.Left, 1, '12px 16px 12px 44px'],\n      [Sizes.Large, Positions.Right, 0, '12px 44px 12px 16px'],\n    ];\n\n    it.each(sizesWithIconPositionAndPadding)('should have %s size with icon on %s', (size, iconPosition, iconIndex) => {\n      render(\n        <TextArea\n          icon={<Icon />}\n          iconPosition={iconPosition}\n          size={size}\n          data-testid=\"textarea\"\n          wrapperProps={{ title: 'wrapper' }}\n        />,\n      );\n      const textarea = screen.getByTestId('textarea');\n      const icon = screen.getByTestId('svg-icon');\n      const wrapperDiv = screen.getByTitle('wrapper');\n      expect(wrapperDiv.children).toHaveLength(2);\n      expect(wrapperDiv.children[iconIndex]).toEqual(textarea);\n      expect(icon).toBeInTheDocument();\n    });\n  });\n\n  it('should render invalid', () => {\n    render(<TextArea data-testid=\"textarea\" invalid />);\n    expect(screen.getByTestId('textarea')).toBeInTheDocument();\n  });\n\n  it('should render disabled', () => {\n    render(<TextArea data-testid=\"textarea\" disabled />);\n    expect(screen.getByTestId('textarea')).toBeInTheDocument();\n  });\n\n  it('should render resize vertical', () => {\n    render(<TextArea data-testid=\"textarea\" resize=\"vertical\" />);\n    expect(screen.getByTestId('textarea')).toBeInTheDocument();\n  });\n\n  it('should render resize horizontal', () => {\n    render(<TextArea data-testid=\"textarea\" resize=\"horizontal\" />);\n    expect(screen.getByTestId('textarea')).toBeInTheDocument();\n  });\n});\n"]}

package/build/esm/components/TextArea/TextArea.types.d.ts

@@ -0,0 +1,20 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from 'react';
+import { WithConditionalCssProp, Sizes, Positions } from 'acinguiux-ds-react-base';
+import * as Types from '../../types/types';
+/**
+ * @deprecated DeprecatedSize prop has been deprecated, please use TextSize
+ */
+type DeprecatedSize = Types.SmallSize | Types.MediumSize | Types.LargeSize;
+export type TextAreaSize = Sizes.Small | Sizes.Medium | Sizes.Large | DeprecatedSize;
+export type TextAreaIconPosition = Positions.Left | Positions.Right | Types.DeprecatedHorizontalPositions;
+export type TextAreaResize = 'none' | 'vertical' | 'horizontal' | 'both' | 'initial' | 'inherit';
+export interface ITextAreaProps extends Omit<WithConditionalCssProp<ComponentPropsWithRef<'textarea'>>, 'size'> {
+    size?: TextAreaSize;
+    icon?: ReactNode;
+    iconPosition?: TextAreaIconPosition;
+    invalid?: boolean;
+    wrapperProps?: ComponentPropsWithoutRef<'div'>;
+    resize?: TextAreaResize;
+}
+export {};
+//# sourceMappingURL=TextArea.types.d.ts.map

package/build/esm/components/TextArea/TextArea.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.types.d.ts","sourceRoot":"","sources":["../../../../src/components/TextArea/TextArea.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,sBAAsB,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEnF,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAE3C;;GAEG;AACH,KAAK,cAAc,GAAG,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC;AAC3E,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC;AAErF,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC,6BAA6B,CAAC;AAC1G,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjG,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,sBAAsB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,EAAE,MAAM,CAAC;IAC7G,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,wBAAwB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB"}

package/build/esm/components/TextArea/TextArea.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TextArea.types.js.map

package/build/esm/components/TextArea/TextArea.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.types.js","sourceRoot":"","sources":["../../../../src/components/TextArea/TextArea.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { WithConditionalCssProp, Sizes, Positions } from 'acinguiux-ds-react-base';\n\nimport * as Types from '../../types/types';\n\n/**\n * @deprecated DeprecatedSize prop has been deprecated, please use TextSize\n */\ntype DeprecatedSize = Types.SmallSize | Types.MediumSize | Types.LargeSize;\nexport type TextAreaSize = Sizes.Small | Sizes.Medium | Sizes.Large | DeprecatedSize;\n\nexport type TextAreaIconPosition = Positions.Left | Positions.Right | Types.DeprecatedHorizontalPositions;\nexport type TextAreaResize = 'none' | 'vertical' | 'horizontal' | 'both' | 'initial' | 'inherit';\n\nexport interface ITextAreaProps extends Omit<WithConditionalCssProp<ComponentPropsWithRef<'textarea'>>, 'size'> {\n  size?: TextAreaSize;\n  icon?: ReactNode;\n  iconPosition?: TextAreaIconPosition;\n  invalid?: boolean;\n  wrapperProps?: ComponentPropsWithoutRef<'div'>;\n  resize?: TextAreaResize;\n}\n"]}

package/build/esm/components/TextArea/__tests__/TextArea.avt.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TextArea.avt.test.d.ts.map

package/build/esm/components/TextArea/__tests__/TextArea.avt.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.avt.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextArea/__tests__/TextArea.avt.test.tsx"],"names":[],"mappings":""}

package/build/esm/components/TextArea/__tests__/TextArea.avt.test.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TextArea from '../TextArea';
+import { runAxeAccessibilityValidationTest } from '../../../utils/viTestUtils';
+describe('AVT', () => {
+    it('should not have Accessibility violations for DEFAULT <TextArea />', async () => {
+        await runAxeAccessibilityValidationTest(_jsx(TextArea, { placeholder: "Test TextArea", "aria-label": "test-text-area" }));
+    });
+});
+//# sourceMappingURL=TextArea.avt.test.js.map

package/build/esm/components/TextArea/__tests__/TextArea.avt.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.avt.test.js","sourceRoot":"","sources":["../../../../../src/components/TextArea/__tests__/TextArea.avt.test.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;AAE/E,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE;IACnB,EAAE,CAAC,mEAAmE,EAAE,KAAK,IAAI,EAAE;QACjF,MAAM,iCAAiC,CAAC,KAAC,QAAQ,IAAC,WAAW,EAAC,eAAe,gBAAY,gBAAgB,GAAG,CAAC,CAAC;IAChH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import TextArea from '../TextArea';\nimport { runAxeAccessibilityValidationTest } from '../../../utils/viTestUtils';\n\ndescribe('AVT', () => {\n  it('should not have Accessibility violations for DEFAULT <TextArea />', async () => {\n    await runAxeAccessibilityValidationTest(<TextArea placeholder=\"Test TextArea\" aria-label=\"test-text-area\" />);\n  });\n});\n"]}

package/build/esm/components/TextInput/TextInput.consts.d.ts

@@ -0,0 +1,28 @@
+import { Sizes } from 'acinguiux-ds-react-base';
+type TextInputWrapperConstsProps = {
+    iconSize: {
+        [Sizes.Small]: string;
+        [Sizes.Medium]: string;
+        [Sizes.Large]: string;
+    };
+    affixPadding: {
+        [Sizes.Small]: string;
+        [Sizes.Medium]: string;
+        [Sizes.Large]: string;
+    };
+};
+export declare const textInputConsts: {
+    padding: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    paddingWithTransparentAffix: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+};
+export declare const textInputWrapperConsts: TextInputWrapperConstsProps;
+export {};
+//# sourceMappingURL=TextInput.consts.d.ts.map

package/build/esm/components/TextInput/TextInput.consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.consts.d.ts","sourceRoot":"","sources":["../../../../src/components/TextInput/TextInput.consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE;QACR,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QACtB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QACvB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,YAAY,EAAE;QACZ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QACtB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QACvB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;CAW3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,2BAWpC,CAAC"}

package/build/esm/components/TextInput/TextInput.consts.js

@@ -0,0 +1,26 @@
+import { Sizes } from 'acinguiux-ds-react-base';
+export const textInputConsts = {
+    padding: {
+        [Sizes.Small]: '4px 10px',
+        [Sizes.Medium]: '8px 12px',
+        [Sizes.Large]: '11px 16px',
+    },
+    paddingWithTransparentAffix: {
+        [Sizes.Small]: '8px',
+        [Sizes.Medium]: '8px',
+        [Sizes.Large]: '12px',
+    },
+};
+export const textInputWrapperConsts = {
+    iconSize: {
+        [Sizes.Small]: '16px',
+        [Sizes.Medium]: '20px',
+        [Sizes.Large]: '24px',
+    },
+    affixPadding: {
+        [Sizes.Small]: '8px',
+        [Sizes.Medium]: '12px',
+        [Sizes.Large]: '16px',
+    },
+};
+//# sourceMappingURL=TextInput.consts.js.map

package/build/esm/components/TextInput/TextInput.consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.consts.js","sourceRoot":"","sources":["../../../../src/components/TextInput/TextInput.consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAehD,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE;QACP,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,UAAU;QACzB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,UAAU;QAC1B,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,WAAW;KAC3B;IACD,2BAA2B,EAAE;QAC3B,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK;QACpB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK;QACrB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM;KACtB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAgC;IACjE,QAAQ,EAAE;QACR,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM;QACrB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM;QACtB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM;KACtB;IACD,YAAY,EAAE;QACZ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK;QACpB,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM;QACtB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM;KACtB;CACF,CAAC","sourcesContent":["import { Sizes } from 'acinguiux-ds-react-base';\n\ntype TextInputWrapperConstsProps = {\n  iconSize: {\n    [Sizes.Small]: string;\n    [Sizes.Medium]: string;\n    [Sizes.Large]: string;\n  };\n  affixPadding: {\n    [Sizes.Small]: string;\n    [Sizes.Medium]: string;\n    [Sizes.Large]: string;\n  };\n};\n\nexport const textInputConsts = {\n  padding: {\n    [Sizes.Small]: '4px 10px',\n    [Sizes.Medium]: '8px 12px',\n    [Sizes.Large]: '11px 16px',\n  },\n  paddingWithTransparentAffix: {\n    [Sizes.Small]: '8px',\n    [Sizes.Medium]: '8px',\n    [Sizes.Large]: '12px',\n  },\n};\n\nexport const textInputWrapperConsts: TextInputWrapperConstsProps = {\n  iconSize: {\n    [Sizes.Small]: '16px',\n    [Sizes.Medium]: '20px',\n    [Sizes.Large]: '24px',\n  },\n  affixPadding: {\n    [Sizes.Small]: '8px',\n    [Sizes.Medium]: '12px',\n    [Sizes.Large]: '16px',\n  },\n};\n"]}

package/build/esm/components/TextInput/TextInput.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ITextInputProps } from './TextInput.types';
+declare const TextInput: React.ForwardRefExoticComponent<Omit<ITextInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default TextInput;
+//# sourceMappingURL=TextInput.d.ts.map

package/build/esm/components/TextInput/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,QAAA,MAAM,SAAS,uGAiGd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/build/esm/components/TextInput/TextInput.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import classNames from 'classnames';
+import { Sizes, Variants, TEXT_INPUT_CLASS } from 'acinguiux-ds-react-base';
+import { InputWrapper } from '../../styles/InputStyles';
+import { Cross } from '../Icon/components';
+import * as Styled from './TextInput.styles';
+const TextInput = forwardRef(({ className = '', size = Sizes.Medium, invalid = false, disabled = false, clearable = false, wrapperProps, prefix, suffix, onChange, onClear, value, ...rest }, ref) => {
+    const controlled = value !== undefined;
+    const [showClear, setShowClear] = useState(controlled && value !== '' && clearable);
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    const onClearClick = (mouseEvent) => {
+        var _a;
+        if (innerRef.current && !controlled) {
+            innerRef.current.value = '';
+            const nativeInputValueSetter = (_a = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')) === null || _a === void 0 ? void 0 : _a.set;
+            nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : nativeInputValueSetter.call(innerRef.current, '');
+            const event = new Event('input', { bubbles: true });
+            innerRef.current.dispatchEvent(event);
+            setShowClear(false);
+        }
+        if (onClear)
+            onClear(mouseEvent);
+    };
+    const handleOnChange = (event) => {
+        var _a;
+        if (onChange)
+            onChange(event);
+        if (clearable && !disabled) {
+            if (((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.value) === '' && showClear) {
+                setShowClear(false);
+            }
+            else if (!showClear) {
+                setShowClear(true);
+            }
+        }
+    };
+    useEffect(() => {
+        if (value === '' && showClear) {
+            setShowClear(false);
+        }
+        if (value && value !== '' && clearable) {
+            setShowClear(true);
+        }
+    }, [value, showClear]);
+    return (_jsxs(InputWrapper, { className: classNames(TEXT_INPUT_CLASS, className), disabled: disabled, invalid: invalid, ...wrapperProps, children: [prefix && (_jsx(Styled.Affix, { size: size, transparent: prefix.transparent, disabled: disabled, type: "prefix", children: prefix.node })), _jsx(Styled.TextInput, { ref: innerRef, className: `${TEXT_INPUT_CLASS}-input`, disabled: disabled, inputSize: size, onChange: handleOnChange, value: value, transparentPrefix: prefix === null || prefix === void 0 ? void 0 : prefix.transparent, transparentSuffix: suffix === null || suffix === void 0 ? void 0 : suffix.transparent, "aria-invalid": invalid, ...rest }), showClear && (_jsx(Styled.ClearButton, { size: size, variant: Variants.Transparent, icon: _jsx(Cross, {}), iconOnly: true, onClick: onClearClick })), suffix && (_jsx(Styled.Affix, { size: size, transparent: suffix.transparent, disabled: disabled, type: "suffix", children: suffix.node }))] }));
+});
+export default TextInput;
+//# sourceMappingURL=TextInput.js.map

package/build/esm/components/TextInput/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/components/TextInput/TextInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  ChangeEvent,\n  ForwardedRef,\n  MouseEvent,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, Variants, TEXT_INPUT_CLASS } from 'acinguiux-ds-react-base';\n\nimport { InputWrapper } from '../../styles/InputStyles';\nimport { Cross } from '../Icon/components';\nimport * as Styled from './TextInput.styles';\nimport { ITextInputProps } from './TextInput.types';\n\nconst TextInput = forwardRef(\n  (\n    {\n      className = '',\n      size = Sizes.Medium,\n      invalid = false,\n      disabled = false,\n      clearable = false,\n      wrapperProps,\n      prefix,\n      suffix,\n      onChange,\n      onClear,\n      value,\n      ...rest\n    }: ITextInputProps,\n    ref: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const controlled = value !== undefined;\n    const [showClear, setShowClear] = useState(controlled && value !== '' && clearable);\n    const innerRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);\n\n    const onClearClick = (mouseEvent: MouseEvent<HTMLButtonElement>) => {\n      if (innerRef.current && !controlled) {\n        innerRef.current.value = '';\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;\n        nativeInputValueSetter?.call(innerRef.current, '');\n        const event = new Event('input', { bubbles: true });\n        innerRef.current.dispatchEvent(event);\n        setShowClear(false);\n      }\n      if (onClear) onClear(mouseEvent);\n    };\n\n    const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (onChange) onChange(event);\n      if (clearable && !disabled) {\n        if (innerRef.current?.value === '' && showClear) {\n          setShowClear(false);\n        } else if (!showClear) {\n          setShowClear(true);\n        }\n      }\n    };\n\n    useEffect(() => {\n      if (value === '' && showClear) {\n        setShowClear(false);\n      }\n\n      if (value && value !== '' && clearable) {\n        setShowClear(true);\n      }\n    }, [value, showClear]);\n\n    return (\n      <InputWrapper\n        className={classNames(TEXT_INPUT_CLASS, className)}\n        disabled={disabled}\n        invalid={invalid}\n        {...wrapperProps}\n      >\n        {prefix && (\n          <Styled.Affix size={size} transparent={prefix.transparent} disabled={disabled} type=\"prefix\">\n            {prefix.node}\n          </Styled.Affix>\n        )}\n        <Styled.TextInput\n          ref={innerRef}\n          className={`${TEXT_INPUT_CLASS}-input`}\n          disabled={disabled}\n          inputSize={size}\n          onChange={handleOnChange}\n          value={value}\n          transparentPrefix={prefix?.transparent}\n          transparentSuffix={suffix?.transparent}\n          aria-invalid={invalid}\n          {...rest}\n        />\n        {showClear && (\n          <Styled.ClearButton\n            size={size}\n            variant={Variants.Transparent}\n            icon={<Cross />}\n            iconOnly\n            onClick={onClearClick}\n          />\n        )}\n        {suffix && (\n          <Styled.Affix size={size} transparent={suffix.transparent} disabled={disabled} type=\"suffix\">\n            {suffix.node}\n          </Styled.Affix>\n        )}\n      </InputWrapper>\n    );\n  },\n);\n\nexport default TextInput;\n"]}