@mirohq/design-system-textarea 0.1.5-forms.1 → 0.2.0-forms.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +35 -9
- package/dist/main.js.map +1 -1
- package/dist/module.js +37 -11
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +6 -2
- package/package.json +6 -4
package/dist/main.js
CHANGED
|
@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
|
+
var designSystemUtils = require('@mirohq/design-system-utils');
|
|
7
8
|
var designSystemBaseInput = require('@mirohq/design-system-base-input');
|
|
9
|
+
var utils = require('@react-aria/utils');
|
|
8
10
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
9
11
|
var designSystemStyles = require('@mirohq/design-system-styles');
|
|
10
12
|
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
@@ -14,6 +16,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
14
16
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
17
|
|
|
16
18
|
const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"]';
|
|
19
|
+
const StyledContainer = designSystemStitches.styled("div", {
|
|
20
|
+
position: "relative",
|
|
21
|
+
width: "100%"
|
|
22
|
+
});
|
|
17
23
|
const StyledTextarea = designSystemStitches.styled(designSystemPrimitive.Primitive.textarea, {
|
|
18
24
|
all: "unset",
|
|
19
25
|
display: "block",
|
|
@@ -60,17 +66,37 @@ const StyledTextarea = designSystemStitches.styled(designSystemPrimitive.Primiti
|
|
|
60
66
|
}
|
|
61
67
|
});
|
|
62
68
|
|
|
63
|
-
const Textarea = React__default["default"].forwardRef(({ "aria-disabled": ariaDisabled, ...restProps }, forwardRef) => {
|
|
69
|
+
const Textarea = React__default["default"].forwardRef(({ "aria-disabled": ariaDisabled, label, ...restProps }, forwardRef) => {
|
|
70
|
+
var _a, _b, _c;
|
|
71
|
+
const textareaRef = React__default["default"].useRef(null);
|
|
64
72
|
const elementProps = designSystemBaseInput.useAriaDisabled(restProps, ariaDisabled);
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
);
|
|
73
|
+
const [focused, setFocused] = React__default["default"].useState(false);
|
|
74
|
+
const onFocus = React__default["default"].useCallback(() => {
|
|
75
|
+
setFocused(true);
|
|
76
|
+
}, []);
|
|
77
|
+
const onBlur = React__default["default"].useCallback(() => {
|
|
78
|
+
setFocused(false);
|
|
79
|
+
}, []);
|
|
80
|
+
const inputValue = (_c = (_b = (_a = textareaRef.current) == null ? void 0 : _a.value) != null ? _b : elementProps.value) != null ? _c : elementProps.defaultValue;
|
|
81
|
+
const isPlaceholder = (inputValue === void 0 || inputValue === "") && !focused;
|
|
82
|
+
const focusProps = {
|
|
83
|
+
onBlur,
|
|
84
|
+
onFocus
|
|
85
|
+
};
|
|
86
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(StyledContainer, { children: [
|
|
87
|
+
label !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseInput.FloatingLabel, { floating: !isPlaceholder, asChild: true, children: label }),
|
|
88
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
89
|
+
StyledTextarea,
|
|
90
|
+
{
|
|
91
|
+
"aria-disabled": ariaDisabled,
|
|
92
|
+
...utils.mergeProps(elementProps, focusProps),
|
|
93
|
+
css: label !== void 0 ? { "&::placeholder": { opacity: 0 } } : void 0,
|
|
94
|
+
ref: designSystemUtils.mergeRefs([textareaRef, forwardRef])
|
|
95
|
+
}
|
|
96
|
+
)
|
|
97
|
+
] });
|
|
73
98
|
});
|
|
99
|
+
Textarea[designSystemBaseInput.inputSymbol] = true;
|
|
74
100
|
|
|
75
101
|
exports.Textarea = Textarea;
|
|
76
102
|
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/textarea.styled.tsx","../src/textarea.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styles as baseInputStyles } from '@mirohq/design-system-base-input'\n\nconst disabledAndReadonlySelectors =\n ':read-only, :disabled, [aria-disabled=\"true\"]'\n\nexport const StyledTextarea = styled(Primitive.textarea, {\n all: 'unset',\n display: 'block',\n overflowWrap: 'break-word',\n whiteSpace: 'pre-wrap',\n height: 'max-content',\n boxSizing: 'border-box',\n maxWidth: '100%',\n width: '100%',\n padding: '$100 $150',\n resize: 'auto',\n color: '$text-neutrals',\n\n ...baseInputStyles.variants.idle,\n\n '&:read-only': baseInputStyles.variants.readOnly,\n\n '&[disabled], &[aria-disabled=\"true\"]': {\n ...baseInputStyles.variants.disabled,\n ...baseInputStyles.base.disabled,\n },\n\n [`&:not(${disabledAndReadonlySelectors})`]: {\n _hover: baseInputStyles.variants.hovered,\n },\n\n ...focus.css(baseInputStyles.variants.focused),\n\n '&::placeholder': {\n fontStyle: 'italic',\n },\n\n [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n baseInputStyles.base.placeholder,\n\n variants: {\n valid: {\n true: {\n [`&:not(${disabledAndReadonlySelectors})`]: {\n ...baseInputStyles.variants.valid.idle,\n\n ...focus.css(baseInputStyles.variants.valid.focused),\n\n _hover: baseInputStyles.variants.valid.hovered,\n },\n },\n false: {\n [`&:not(${disabledAndReadonlySelectors})`]: {\n ...baseInputStyles.variants.invalid.idle,\n\n ...focus.css(baseInputStyles.variants.invalid.focused),\n\n _hover: baseInputStyles.variants.invalid.hovered,\n },\n },\n },\n },\n})\n\nexport type StyledTextareaProps = ComponentPropsWithRef<typeof StyledTextarea>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/textarea.styled.tsx","../src/textarea.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styles as baseInputStyles } from '@mirohq/design-system-base-input'\n\nconst disabledAndReadonlySelectors =\n ':read-only, :disabled, [aria-disabled=\"true\"]'\n\nexport const StyledContainer = styled('div', {\n position: 'relative',\n width: '100%',\n})\n\nexport const StyledTextarea = styled(Primitive.textarea, {\n all: 'unset',\n display: 'block',\n overflowWrap: 'break-word',\n whiteSpace: 'pre-wrap',\n height: 'max-content',\n boxSizing: 'border-box',\n maxWidth: '100%',\n width: '100%',\n padding: '$100 $150',\n resize: 'auto',\n color: '$text-neutrals',\n\n ...baseInputStyles.variants.idle,\n\n '&:read-only': baseInputStyles.variants.readOnly,\n\n '&[disabled], &[aria-disabled=\"true\"]': {\n ...baseInputStyles.variants.disabled,\n ...baseInputStyles.base.disabled,\n },\n\n [`&:not(${disabledAndReadonlySelectors})`]: {\n _hover: baseInputStyles.variants.hovered,\n },\n\n ...focus.css(baseInputStyles.variants.focused),\n\n '&::placeholder': {\n fontStyle: 'italic',\n },\n\n [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n baseInputStyles.base.placeholder,\n\n variants: {\n valid: {\n true: {\n [`&:not(${disabledAndReadonlySelectors})`]: {\n ...baseInputStyles.variants.valid.idle,\n\n ...focus.css(baseInputStyles.variants.valid.focused),\n\n _hover: baseInputStyles.variants.valid.hovered,\n },\n },\n false: {\n [`&:not(${disabledAndReadonlySelectors})`]: {\n ...baseInputStyles.variants.invalid.idle,\n\n ...focus.css(baseInputStyles.variants.invalid.focused),\n\n _hover: baseInputStyles.variants.invalid.hovered,\n },\n },\n },\n },\n})\n\nexport type StyledTextareaProps = ComponentPropsWithRef<typeof StyledTextarea>\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { mergeRefs } from '@mirohq/design-system-utils'\nimport {\n FloatingLabel,\n inputSymbol,\n useAriaDisabled,\n} from '@mirohq/design-system-base-input'\nimport { mergeProps } from '@react-aria/utils'\n\nimport { StyledTextarea, StyledContainer } from './textarea.styled'\nimport type { StyledTextareaProps } from './textarea.styled'\n\nexport interface TextareaProps extends StyledTextareaProps {\n /**\n * The textarea's state is indicated by border color.\n * Green border color signifies valid input, while red color denotes\n * invalid input.\n */\n valid?: StyledTextareaProps['valid']\n\n label?: React.ReactNode\n}\n\nexport const Textarea = React.forwardRef<\n ElementRef<typeof StyledTextarea>,\n TextareaProps\n>(({ 'aria-disabled': ariaDisabled, label, ...restProps }, forwardRef) => {\n const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n\n const elementProps = useAriaDisabled(restProps, ariaDisabled)\n\n const [focused, setFocused] = React.useState(false)\n\n const onFocus = React.useCallback(() => {\n setFocused(true)\n }, [])\n const onBlur = React.useCallback(() => {\n setFocused(false)\n }, [])\n\n const inputValue =\n textareaRef.current?.value ??\n elementProps.value ??\n elementProps.defaultValue\n const isPlaceholder =\n (inputValue === undefined || inputValue === '') && !focused\n\n const focusProps = {\n onBlur: onBlur,\n onFocus: onFocus,\n }\n\n return (\n <StyledContainer>\n {label !== undefined && (\n <FloatingLabel floating={!isPlaceholder} asChild>\n {label}\n </FloatingLabel>\n )}\n <StyledTextarea\n aria-disabled={ariaDisabled}\n {...mergeProps(elementProps, focusProps)}\n css={\n label !== undefined ? { '&::placeholder': { opacity: 0 } } : undefined\n }\n ref={mergeRefs([textareaRef, forwardRef])}\n />\n </StyledContainer>\n )\n}) as ForwardRefExoticComponent<TextareaProps> & {\n [inputSymbol]?: boolean\n}\n\nTextarea[inputSymbol] = true\n"],"names":["styled","Primitive","baseInputStyles","focus","React","useAriaDisabled","FloatingLabel","jsx","mergeProps","mergeRefs","inputSymbol"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { mergeRefs } from '@mirohq/design-system-utils';
|
|
4
|
+
import { styles, useAriaDisabled, FloatingLabel, inputSymbol } from '@mirohq/design-system-base-input';
|
|
5
|
+
import { mergeProps } from '@react-aria/utils';
|
|
4
6
|
import { styled } from '@mirohq/design-system-stitches';
|
|
5
7
|
import { focus } from '@mirohq/design-system-styles';
|
|
6
8
|
import { Primitive } from '@mirohq/design-system-primitive';
|
|
7
9
|
|
|
8
10
|
const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"]';
|
|
11
|
+
const StyledContainer = styled("div", {
|
|
12
|
+
position: "relative",
|
|
13
|
+
width: "100%"
|
|
14
|
+
});
|
|
9
15
|
const StyledTextarea = styled(Primitive.textarea, {
|
|
10
16
|
all: "unset",
|
|
11
17
|
display: "block",
|
|
@@ -52,17 +58,37 @@ const StyledTextarea = styled(Primitive.textarea, {
|
|
|
52
58
|
}
|
|
53
59
|
});
|
|
54
60
|
|
|
55
|
-
const Textarea = React.forwardRef(({ "aria-disabled": ariaDisabled, ...restProps }, forwardRef) => {
|
|
61
|
+
const Textarea = React.forwardRef(({ "aria-disabled": ariaDisabled, label, ...restProps }, forwardRef) => {
|
|
62
|
+
var _a, _b, _c;
|
|
63
|
+
const textareaRef = React.useRef(null);
|
|
56
64
|
const elementProps = useAriaDisabled(restProps, ariaDisabled);
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
);
|
|
65
|
+
const [focused, setFocused] = React.useState(false);
|
|
66
|
+
const onFocus = React.useCallback(() => {
|
|
67
|
+
setFocused(true);
|
|
68
|
+
}, []);
|
|
69
|
+
const onBlur = React.useCallback(() => {
|
|
70
|
+
setFocused(false);
|
|
71
|
+
}, []);
|
|
72
|
+
const inputValue = (_c = (_b = (_a = textareaRef.current) == null ? void 0 : _a.value) != null ? _b : elementProps.value) != null ? _c : elementProps.defaultValue;
|
|
73
|
+
const isPlaceholder = (inputValue === void 0 || inputValue === "") && !focused;
|
|
74
|
+
const focusProps = {
|
|
75
|
+
onBlur,
|
|
76
|
+
onFocus
|
|
77
|
+
};
|
|
78
|
+
return /* @__PURE__ */ jsxs(StyledContainer, { children: [
|
|
79
|
+
label !== void 0 && /* @__PURE__ */ jsx(FloatingLabel, { floating: !isPlaceholder, asChild: true, children: label }),
|
|
80
|
+
/* @__PURE__ */ jsx(
|
|
81
|
+
StyledTextarea,
|
|
82
|
+
{
|
|
83
|
+
"aria-disabled": ariaDisabled,
|
|
84
|
+
...mergeProps(elementProps, focusProps),
|
|
85
|
+
css: label !== void 0 ? { "&::placeholder": { opacity: 0 } } : void 0,
|
|
86
|
+
ref: mergeRefs([textareaRef, forwardRef])
|
|
87
|
+
}
|
|
88
|
+
)
|
|
89
|
+
] });
|
|
65
90
|
});
|
|
91
|
+
Textarea[inputSymbol] = true;
|
|
66
92
|
|
|
67
93
|
export { Textarea };
|
|
68
94
|
//# sourceMappingURL=module.js.map
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/textarea.styled.tsx","../src/textarea.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styles as baseInputStyles } from '@mirohq/design-system-base-input'\n\nconst disabledAndReadonlySelectors =\n ':read-only, :disabled, [aria-disabled=\"true\"]'\n\nexport const StyledTextarea = styled(Primitive.textarea, {\n all: 'unset',\n display: 'block',\n overflowWrap: 'break-word',\n whiteSpace: 'pre-wrap',\n height: 'max-content',\n boxSizing: 'border-box',\n maxWidth: '100%',\n width: '100%',\n padding: '$100 $150',\n resize: 'auto',\n color: '$text-neutrals',\n\n ...baseInputStyles.variants.idle,\n\n '&:read-only': baseInputStyles.variants.readOnly,\n\n '&[disabled], &[aria-disabled=\"true\"]': {\n ...baseInputStyles.variants.disabled,\n ...baseInputStyles.base.disabled,\n },\n\n [`&:not(${disabledAndReadonlySelectors})`]: {\n _hover: baseInputStyles.variants.hovered,\n },\n\n ...focus.css(baseInputStyles.variants.focused),\n\n '&::placeholder': {\n fontStyle: 'italic',\n },\n\n [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n baseInputStyles.base.placeholder,\n\n variants: {\n valid: {\n true: {\n [`&:not(${disabledAndReadonlySelectors})`]: {\n ...baseInputStyles.variants.valid.idle,\n\n ...focus.css(baseInputStyles.variants.valid.focused),\n\n _hover: baseInputStyles.variants.valid.hovered,\n },\n },\n false: {\n [`&:not(${disabledAndReadonlySelectors})`]: {\n ...baseInputStyles.variants.invalid.idle,\n\n ...focus.css(baseInputStyles.variants.invalid.focused),\n\n _hover: baseInputStyles.variants.invalid.hovered,\n },\n },\n },\n },\n})\n\nexport type StyledTextareaProps = ComponentPropsWithRef<typeof StyledTextarea>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/textarea.styled.tsx","../src/textarea.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styles as baseInputStyles } from '@mirohq/design-system-base-input'\n\nconst disabledAndReadonlySelectors =\n ':read-only, :disabled, [aria-disabled=\"true\"]'\n\nexport const StyledContainer = styled('div', {\n position: 'relative',\n width: '100%',\n})\n\nexport const StyledTextarea = styled(Primitive.textarea, {\n all: 'unset',\n display: 'block',\n overflowWrap: 'break-word',\n whiteSpace: 'pre-wrap',\n height: 'max-content',\n boxSizing: 'border-box',\n maxWidth: '100%',\n width: '100%',\n padding: '$100 $150',\n resize: 'auto',\n color: '$text-neutrals',\n\n ...baseInputStyles.variants.idle,\n\n '&:read-only': baseInputStyles.variants.readOnly,\n\n '&[disabled], &[aria-disabled=\"true\"]': {\n ...baseInputStyles.variants.disabled,\n ...baseInputStyles.base.disabled,\n },\n\n [`&:not(${disabledAndReadonlySelectors})`]: {\n _hover: baseInputStyles.variants.hovered,\n },\n\n ...focus.css(baseInputStyles.variants.focused),\n\n '&::placeholder': {\n fontStyle: 'italic',\n },\n\n [`&:not(${disabledAndReadonlySelectors})::placeholder`]:\n baseInputStyles.base.placeholder,\n\n variants: {\n valid: {\n true: {\n [`&:not(${disabledAndReadonlySelectors})`]: {\n ...baseInputStyles.variants.valid.idle,\n\n ...focus.css(baseInputStyles.variants.valid.focused),\n\n _hover: baseInputStyles.variants.valid.hovered,\n },\n },\n false: {\n [`&:not(${disabledAndReadonlySelectors})`]: {\n ...baseInputStyles.variants.invalid.idle,\n\n ...focus.css(baseInputStyles.variants.invalid.focused),\n\n _hover: baseInputStyles.variants.invalid.hovered,\n },\n },\n },\n },\n})\n\nexport type StyledTextareaProps = ComponentPropsWithRef<typeof StyledTextarea>\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { mergeRefs } from '@mirohq/design-system-utils'\nimport {\n FloatingLabel,\n inputSymbol,\n useAriaDisabled,\n} from '@mirohq/design-system-base-input'\nimport { mergeProps } from '@react-aria/utils'\n\nimport { StyledTextarea, StyledContainer } from './textarea.styled'\nimport type { StyledTextareaProps } from './textarea.styled'\n\nexport interface TextareaProps extends StyledTextareaProps {\n /**\n * The textarea's state is indicated by border color.\n * Green border color signifies valid input, while red color denotes\n * invalid input.\n */\n valid?: StyledTextareaProps['valid']\n\n label?: React.ReactNode\n}\n\nexport const Textarea = React.forwardRef<\n ElementRef<typeof StyledTextarea>,\n TextareaProps\n>(({ 'aria-disabled': ariaDisabled, label, ...restProps }, forwardRef) => {\n const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n\n const elementProps = useAriaDisabled(restProps, ariaDisabled)\n\n const [focused, setFocused] = React.useState(false)\n\n const onFocus = React.useCallback(() => {\n setFocused(true)\n }, [])\n const onBlur = React.useCallback(() => {\n setFocused(false)\n }, [])\n\n const inputValue =\n textareaRef.current?.value ??\n elementProps.value ??\n elementProps.defaultValue\n const isPlaceholder =\n (inputValue === undefined || inputValue === '') && !focused\n\n const focusProps = {\n onBlur: onBlur,\n onFocus: onFocus,\n }\n\n return (\n <StyledContainer>\n {label !== undefined && (\n <FloatingLabel floating={!isPlaceholder} asChild>\n {label}\n </FloatingLabel>\n )}\n <StyledTextarea\n aria-disabled={ariaDisabled}\n {...mergeProps(elementProps, focusProps)}\n css={\n label !== undefined ? { '&::placeholder': { opacity: 0 } } : undefined\n }\n ref={mergeRefs([textareaRef, forwardRef])}\n />\n </StyledContainer>\n )\n}) as ForwardRefExoticComponent<TextareaProps> & {\n [inputSymbol]?: boolean\n}\n\nTextarea[inputSymbol] = true\n"],"names":["baseInputStyles"],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default, { ComponentPropsWithRef } from 'react';
|
|
3
|
+
import { inputSymbol } from '@mirohq/design-system-base-input';
|
|
4
|
+
import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
|
|
3
5
|
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
4
6
|
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
5
7
|
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
|
|
6
|
-
import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
|
|
7
8
|
|
|
8
9
|
declare const StyledTextarea: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"textarea">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
|
|
9
10
|
'border-widths': {
|
|
@@ -507,7 +508,10 @@ interface TextareaProps extends StyledTextareaProps {
|
|
|
507
508
|
* invalid input.
|
|
508
509
|
*/
|
|
509
510
|
valid?: StyledTextareaProps['valid'];
|
|
511
|
+
label?: react__default.ReactNode;
|
|
510
512
|
}
|
|
511
|
-
declare const Textarea: react__default.ForwardRefExoticComponent<
|
|
513
|
+
declare const Textarea: react__default.ForwardRefExoticComponent<TextareaProps> & {
|
|
514
|
+
[inputSymbol]?: boolean | undefined;
|
|
515
|
+
};
|
|
512
516
|
|
|
513
517
|
export { Textarea, TextareaProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-textarea",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0-forms.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,10 +26,12 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@
|
|
30
|
-
"@mirohq/design-system-base-input": "^0.0.3-forms.0",
|
|
29
|
+
"@react-aria/utils": "^3.13.0",
|
|
31
30
|
"@mirohq/design-system-stitches": "^2.6.0",
|
|
32
|
-
"@mirohq/design-system-styles": "^1.1.19"
|
|
31
|
+
"@mirohq/design-system-styles": "^1.1.19",
|
|
32
|
+
"@mirohq/design-system-primitive": "^1.1.2-forms.0",
|
|
33
|
+
"@mirohq/design-system-utils": "^0.15.0-forms.0",
|
|
34
|
+
"@mirohq/design-system-base-input": "^0.1.0-forms.1"
|
|
33
35
|
},
|
|
34
36
|
"scripts": {
|
|
35
37
|
"build": "rollup -c ../../../rollup.config.js",
|