@mirohq/design-system-textarea 0.1.0-textarea.0 → 0.1.0

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 CHANGED
@@ -29,7 +29,9 @@ const StyledTextarea = designSystemStitches.styled(designSystemPrimitive.Primiti
29
29
  ...designSystemBaseInput.styles.variants.disabled,
30
30
  ...designSystemBaseInput.styles.base.disabled
31
31
  },
32
- ["&:not(".concat(disabledAndReadonlySelectors, "):hover")]: designSystemBaseInput.styles.variants.hovered,
32
+ ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
33
+ _hover: designSystemBaseInput.styles.variants.hovered
34
+ },
33
35
  ...designSystemStyles.focus.css(designSystemBaseInput.styles.variants.focused),
34
36
  "&::placeholder": {
35
37
  fontStyle: "italic"
@@ -41,14 +43,14 @@ const StyledTextarea = designSystemStitches.styled(designSystemPrimitive.Primiti
41
43
  ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
42
44
  ...designSystemBaseInput.styles.variants.valid.idle,
43
45
  ...designSystemStyles.focus.css(designSystemBaseInput.styles.variants.valid.focused),
44
- "&:hover": designSystemBaseInput.styles.variants.valid.hovered
46
+ _hover: designSystemBaseInput.styles.variants.valid.hovered
45
47
  }
46
48
  },
47
49
  false: {
48
50
  ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
49
51
  ...designSystemBaseInput.styles.variants.invalid.idle,
50
52
  ...designSystemStyles.focus.css(designSystemBaseInput.styles.variants.invalid.focused),
51
- "&:hover": designSystemBaseInput.styles.variants.invalid.hovered
53
+ _hover: designSystemBaseInput.styles.variants.invalid.hovered
52
54
  }
53
55
  }
54
56
  }
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 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}):hover`]:\n baseInputStyles.variants.hovered,\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 { useAriaDisabled } from '@mirohq/design-system-base-input'\n\nimport { StyledTextarea } from './textarea.styled'\nimport type { StyledTextareaProps } from './textarea.styled'\n\nexport interface TextareaProps extends StyledTextareaProps {}\n\nexport const Textarea = React.forwardRef<\n ElementRef<typeof StyledTextarea>,\n TextareaProps\n>(({ 'aria-disabled': ariaDisabled, ...restProps }, forwardRef) => {\n const elementProps = useAriaDisabled(restProps, ariaDisabled)\n\n return (\n <StyledTextarea\n aria-disabled={ariaDisabled}\n {...elementProps}\n ref={forwardRef}\n />\n )\n})\n"],"names":["styled","Primitive","baseInputStyles","focus","React","useAriaDisabled","jsx"],"mappings":";;;;;;;;;;;;;;;AAMA,MAAM,4BACJ,GAAA,+CAAA,CAAA;AAEW,MAAA,cAAA,GAAiBA,2BAAO,CAAAC,+BAAA,CAAU,QAAU,EAAA;AAAA,EACvD,GAAK,EAAA,OAAA;AAAA,EACL,MAAQ,EAAA,aAAA;AAAA,EACR,SAAW,EAAA,YAAA;AAAA,EACX,QAAU,EAAA,MAAA;AAAA,EACV,KAAO,EAAA,MAAA;AAAA,EACP,OAAS,EAAA,WAAA;AAAA,EACT,MAAQ,EAAA,MAAA;AAAA,EACR,KAAO,EAAA,gBAAA;AAAA,EAEP,GAAGC,6BAAgB,QAAS,CAAA,IAAA;AAAA,EAE5B,aAAA,EAAeA,6BAAgB,QAAS,CAAA,QAAA;AAAA,EAExC,sCAAwC,EAAA;AAAA,IACtC,GAAGA,6BAAgB,QAAS,CAAA,QAAA;AAAA,IAC5B,GAAGA,6BAAgB,IAAK,CAAA,QAAA;AAAA,GAC1B;AAAA,EAEA,CAAC,QAAS,CAAA,MAAA,CAAA,4BAAA,EAA4B,SAAS,CAAA,GAC7CA,6BAAgB,QAAS,CAAA,OAAA;AAAA,EAE3B,GAAGC,wBAAA,CAAM,GAAI,CAAAD,4BAAA,CAAgB,SAAS,OAAO,CAAA;AAAA,EAE7C,gBAAkB,EAAA;AAAA,IAChB,SAAW,EAAA,QAAA;AAAA,GACb;AAAA,EAEA,CAAC,QAAS,CAAA,MAAA,CAAA,4BAAA,EAA4B,gBAAgB,CAAA,GACpDA,6BAAgB,IAAK,CAAA,WAAA;AAAA,EAEvB,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,4BAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,IAAA;AAAA,UAElC,GAAGC,wBAAM,CAAA,GAAA,CAAID,4BAAgB,CAAA,QAAA,CAAS,MAAM,OAAO,CAAA;AAAA,UAEnD,SAAA,EAAWA,4BAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,OAAA;AAAA,SAC5C;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,4BAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,IAAA;AAAA,UAEpC,GAAGC,wBAAM,CAAA,GAAA,CAAID,4BAAgB,CAAA,QAAA,CAAS,QAAQ,OAAO,CAAA;AAAA,UAErD,SAAA,EAAWA,4BAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,OAAA;AAAA,SAC9C;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACrDY,MAAA,QAAA,GAAWE,yBAAM,CAAA,UAAA,CAG5B,CAAC,EAAE,iBAAiB,YAAc,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AACjE,EAAM,MAAA,YAAA,GAAeC,qCAAgB,CAAA,SAAA,EAAW,YAAY,CAAA,CAAA;AAE5D,EACE,uBAAAC,cAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACd,GAAG,YAAA;AAAA,MACJ,GAAK,EAAA,UAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ,CAAC;;;;"}
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 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 { useAriaDisabled } from '@mirohq/design-system-base-input'\n\nimport { StyledTextarea } 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\nexport const Textarea = React.forwardRef<\n ElementRef<typeof StyledTextarea>,\n TextareaProps\n>(({ 'aria-disabled': ariaDisabled, ...restProps }, forwardRef) => {\n const elementProps = useAriaDisabled(restProps, ariaDisabled)\n\n return (\n <StyledTextarea\n aria-disabled={ariaDisabled}\n {...elementProps}\n ref={forwardRef}\n />\n )\n})\n"],"names":["styled","Primitive","baseInputStyles","focus","React","useAriaDisabled","jsx"],"mappings":";;;;;;;;;;;;;;;AAMA,MAAM,4BACJ,GAAA,+CAAA,CAAA;AAEW,MAAA,cAAA,GAAiBA,2BAAO,CAAAC,+BAAA,CAAU,QAAU,EAAA;AAAA,EACvD,GAAK,EAAA,OAAA;AAAA,EACL,MAAQ,EAAA,aAAA;AAAA,EACR,SAAW,EAAA,YAAA;AAAA,EACX,QAAU,EAAA,MAAA;AAAA,EACV,KAAO,EAAA,MAAA;AAAA,EACP,OAAS,EAAA,WAAA;AAAA,EACT,MAAQ,EAAA,MAAA;AAAA,EACR,KAAO,EAAA,gBAAA;AAAA,EAEP,GAAGC,6BAAgB,QAAS,CAAA,IAAA;AAAA,EAE5B,aAAA,EAAeA,6BAAgB,QAAS,CAAA,QAAA;AAAA,EAExC,sCAAwC,EAAA;AAAA,IACtC,GAAGA,6BAAgB,QAAS,CAAA,QAAA;AAAA,IAC5B,GAAGA,6BAAgB,IAAK,CAAA,QAAA;AAAA,GAC1B;AAAA,EAEA,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,IAC1C,MAAA,EAAQA,6BAAgB,QAAS,CAAA,OAAA;AAAA,GACnC;AAAA,EAEA,GAAGC,wBAAA,CAAM,GAAI,CAAAD,4BAAA,CAAgB,SAAS,OAAO,CAAA;AAAA,EAE7C,gBAAkB,EAAA;AAAA,IAChB,SAAW,EAAA,QAAA;AAAA,GACb;AAAA,EAEA,CAAC,QAAS,CAAA,MAAA,CAAA,4BAAA,EAA4B,gBAAgB,CAAA,GACpDA,6BAAgB,IAAK,CAAA,WAAA;AAAA,EAEvB,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,4BAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,IAAA;AAAA,UAElC,GAAGC,wBAAM,CAAA,GAAA,CAAID,4BAAgB,CAAA,QAAA,CAAS,MAAM,OAAO,CAAA;AAAA,UAEnD,MAAA,EAAQA,4BAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,OAAA;AAAA,SACzC;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,4BAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,IAAA;AAAA,UAEpC,GAAGC,wBAAM,CAAA,GAAA,CAAID,4BAAgB,CAAA,QAAA,CAAS,QAAQ,OAAO,CAAA;AAAA,UAErD,MAAA,EAAQA,4BAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,OAAA;AAAA,SAC3C;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC/CY,MAAA,QAAA,GAAWE,yBAAM,CAAA,UAAA,CAG5B,CAAC,EAAE,iBAAiB,YAAc,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AACjE,EAAM,MAAA,YAAA,GAAeC,qCAAgB,CAAA,SAAA,EAAW,YAAY,CAAA,CAAA;AAE5D,EACE,uBAAAC,cAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACd,GAAG,YAAA;AAAA,MACJ,GAAK,EAAA,UAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ,CAAC;;;;"}
package/dist/module.js CHANGED
@@ -21,7 +21,9 @@ const StyledTextarea = styled(Primitive.textarea, {
21
21
  ...styles.variants.disabled,
22
22
  ...styles.base.disabled
23
23
  },
24
- ["&:not(".concat(disabledAndReadonlySelectors, "):hover")]: styles.variants.hovered,
24
+ ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
25
+ _hover: styles.variants.hovered
26
+ },
25
27
  ...focus.css(styles.variants.focused),
26
28
  "&::placeholder": {
27
29
  fontStyle: "italic"
@@ -33,14 +35,14 @@ const StyledTextarea = styled(Primitive.textarea, {
33
35
  ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
34
36
  ...styles.variants.valid.idle,
35
37
  ...focus.css(styles.variants.valid.focused),
36
- "&:hover": styles.variants.valid.hovered
38
+ _hover: styles.variants.valid.hovered
37
39
  }
38
40
  },
39
41
  false: {
40
42
  ["&:not(".concat(disabledAndReadonlySelectors, ")")]: {
41
43
  ...styles.variants.invalid.idle,
42
44
  ...focus.css(styles.variants.invalid.focused),
43
- "&:hover": styles.variants.invalid.hovered
45
+ _hover: styles.variants.invalid.hovered
44
46
  }
45
47
  }
46
48
  }
@@ -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 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}):hover`]:\n baseInputStyles.variants.hovered,\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 { useAriaDisabled } from '@mirohq/design-system-base-input'\n\nimport { StyledTextarea } from './textarea.styled'\nimport type { StyledTextareaProps } from './textarea.styled'\n\nexport interface TextareaProps extends StyledTextareaProps {}\n\nexport const Textarea = React.forwardRef<\n ElementRef<typeof StyledTextarea>,\n TextareaProps\n>(({ 'aria-disabled': ariaDisabled, ...restProps }, forwardRef) => {\n const elementProps = useAriaDisabled(restProps, ariaDisabled)\n\n return (\n <StyledTextarea\n aria-disabled={ariaDisabled}\n {...elementProps}\n ref={forwardRef}\n />\n )\n})\n"],"names":["baseInputStyles"],"mappings":";;;;;;;AAMA,MAAM,4BACJ,GAAA,+CAAA,CAAA;AAEW,MAAA,cAAA,GAAiB,MAAO,CAAA,SAAA,CAAU,QAAU,EAAA;AAAA,EACvD,GAAK,EAAA,OAAA;AAAA,EACL,MAAQ,EAAA,aAAA;AAAA,EACR,SAAW,EAAA,YAAA;AAAA,EACX,QAAU,EAAA,MAAA;AAAA,EACV,KAAO,EAAA,MAAA;AAAA,EACP,OAAS,EAAA,WAAA;AAAA,EACT,MAAQ,EAAA,MAAA;AAAA,EACR,KAAO,EAAA,gBAAA;AAAA,EAEP,GAAGA,OAAgB,QAAS,CAAA,IAAA;AAAA,EAE5B,aAAA,EAAeA,OAAgB,QAAS,CAAA,QAAA;AAAA,EAExC,sCAAwC,EAAA;AAAA,IACtC,GAAGA,OAAgB,QAAS,CAAA,QAAA;AAAA,IAC5B,GAAGA,OAAgB,IAAK,CAAA,QAAA;AAAA,GAC1B;AAAA,EAEA,CAAC,QAAS,CAAA,MAAA,CAAA,4BAAA,EAA4B,SAAS,CAAA,GAC7CA,OAAgB,QAAS,CAAA,OAAA;AAAA,EAE3B,GAAG,KAAA,CAAM,GAAI,CAAAA,MAAA,CAAgB,SAAS,OAAO,CAAA;AAAA,EAE7C,gBAAkB,EAAA;AAAA,IAChB,SAAW,EAAA,QAAA;AAAA,GACb;AAAA,EAEA,CAAC,QAAS,CAAA,MAAA,CAAA,4BAAA,EAA4B,gBAAgB,CAAA,GACpDA,OAAgB,IAAK,CAAA,WAAA;AAAA,EAEvB,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,MAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,IAAA;AAAA,UAElC,GAAG,KAAM,CAAA,GAAA,CAAIA,MAAgB,CAAA,QAAA,CAAS,MAAM,OAAO,CAAA;AAAA,UAEnD,SAAA,EAAWA,MAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,OAAA;AAAA,SAC5C;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,MAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,IAAA;AAAA,UAEpC,GAAG,KAAM,CAAA,GAAA,CAAIA,MAAgB,CAAA,QAAA,CAAS,QAAQ,OAAO,CAAA;AAAA,UAErD,SAAA,EAAWA,MAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,OAAA;AAAA,SAC9C;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACrDY,MAAA,QAAA,GAAW,KAAM,CAAA,UAAA,CAG5B,CAAC,EAAE,iBAAiB,YAAc,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AACjE,EAAM,MAAA,YAAA,GAAe,eAAgB,CAAA,SAAA,EAAW,YAAY,CAAA,CAAA;AAE5D,EACE,uBAAA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACd,GAAG,YAAA;AAAA,MACJ,GAAK,EAAA,UAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ,CAAC;;;;"}
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 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 { useAriaDisabled } from '@mirohq/design-system-base-input'\n\nimport { StyledTextarea } 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\nexport const Textarea = React.forwardRef<\n ElementRef<typeof StyledTextarea>,\n TextareaProps\n>(({ 'aria-disabled': ariaDisabled, ...restProps }, forwardRef) => {\n const elementProps = useAriaDisabled(restProps, ariaDisabled)\n\n return (\n <StyledTextarea\n aria-disabled={ariaDisabled}\n {...elementProps}\n ref={forwardRef}\n />\n )\n})\n"],"names":["baseInputStyles"],"mappings":";;;;;;;AAMA,MAAM,4BACJ,GAAA,+CAAA,CAAA;AAEW,MAAA,cAAA,GAAiB,MAAO,CAAA,SAAA,CAAU,QAAU,EAAA;AAAA,EACvD,GAAK,EAAA,OAAA;AAAA,EACL,MAAQ,EAAA,aAAA;AAAA,EACR,SAAW,EAAA,YAAA;AAAA,EACX,QAAU,EAAA,MAAA;AAAA,EACV,KAAO,EAAA,MAAA;AAAA,EACP,OAAS,EAAA,WAAA;AAAA,EACT,MAAQ,EAAA,MAAA;AAAA,EACR,KAAO,EAAA,gBAAA;AAAA,EAEP,GAAGA,OAAgB,QAAS,CAAA,IAAA;AAAA,EAE5B,aAAA,EAAeA,OAAgB,QAAS,CAAA,QAAA;AAAA,EAExC,sCAAwC,EAAA;AAAA,IACtC,GAAGA,OAAgB,QAAS,CAAA,QAAA;AAAA,IAC5B,GAAGA,OAAgB,IAAK,CAAA,QAAA;AAAA,GAC1B;AAAA,EAEA,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,IAC1C,MAAA,EAAQA,OAAgB,QAAS,CAAA,OAAA;AAAA,GACnC;AAAA,EAEA,GAAG,KAAA,CAAM,GAAI,CAAAA,MAAA,CAAgB,SAAS,OAAO,CAAA;AAAA,EAE7C,gBAAkB,EAAA;AAAA,IAChB,SAAW,EAAA,QAAA;AAAA,GACb;AAAA,EAEA,CAAC,QAAS,CAAA,MAAA,CAAA,4BAAA,EAA4B,gBAAgB,CAAA,GACpDA,OAAgB,IAAK,CAAA,WAAA;AAAA,EAEvB,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,MAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,IAAA;AAAA,UAElC,GAAG,KAAM,CAAA,GAAA,CAAIA,MAAgB,CAAA,QAAA,CAAS,MAAM,OAAO,CAAA;AAAA,UAEnD,MAAA,EAAQA,MAAgB,CAAA,QAAA,CAAS,KAAM,CAAA,OAAA;AAAA,SACzC;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,UAC1C,GAAGA,MAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,IAAA;AAAA,UAEpC,GAAG,KAAM,CAAA,GAAA,CAAIA,MAAgB,CAAA,QAAA,CAAS,QAAQ,OAAO,CAAA;AAAA,UAErD,MAAA,EAAQA,MAAgB,CAAA,QAAA,CAAS,OAAQ,CAAA,OAAA;AAAA,SAC3C;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC/CY,MAAA,QAAA,GAAW,KAAM,CAAA,UAAA,CAG5B,CAAC,EAAE,iBAAiB,YAAc,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AACjE,EAAM,MAAA,YAAA,GAAe,eAAgB,CAAA,SAAA,EAAW,YAAY,CAAA,CAAA;AAE5D,EACE,uBAAA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACd,GAAG,YAAA;AAAA,MACJ,GAAK,EAAA,UAAA;AAAA,KAAA;AAAA,GACP,CAAA;AAEJ,CAAC;;;;"}
package/dist/types.d.ts CHANGED
@@ -3,6 +3,7 @@ import react__default, { ComponentPropsWithRef } from 'react';
3
3
  import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
4
4
  import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
5
5
  import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
6
+ import * as _stitches_react from '@stitches/react';
6
7
  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<{}, {
@@ -490,6 +491,19 @@ declare const StyledTextarea: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_
490
491
  readonly [$$PropertyValue]: "width";
491
492
  };
492
493
  };
494
+ _hover: (css: _stitches_react.CSS<{
495
+ media: {};
496
+ theme: {};
497
+ themeMap: {};
498
+ utils: {};
499
+ }>) => {
500
+ '&:hover, &[data-hovered]': _stitches_react.CSS<{
501
+ media: {};
502
+ theme: {};
503
+ themeMap: {};
504
+ utils: {};
505
+ }>;
506
+ };
493
507
  }>>>, "valid"> & _stitches_react_types_styled_component.TransformProps<{
494
508
  valid?: boolean | "false" | "true" | undefined;
495
509
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"textarea">>, {
@@ -498,6 +512,12 @@ declare const StyledTextarea: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_
498
512
  declare type StyledTextareaProps = ComponentPropsWithRef<typeof StyledTextarea>;
499
513
 
500
514
  interface TextareaProps extends StyledTextareaProps {
515
+ /**
516
+ * The textarea's state is indicated by border color.
517
+ * Green border color signifies valid input, while red color denotes
518
+ * invalid input.
519
+ */
520
+ valid?: StyledTextareaProps['valid'];
501
521
  }
502
522
  declare const Textarea: react__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & react__default.RefAttributes<HTMLTextAreaElement>>;
503
523
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-textarea",
3
- "version": "0.1.0-textarea.0",
3
+ "version": "0.1.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,9 +26,9 @@
26
26
  "react": "^16.14 || ^17 || ^18"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-base-input": "^0.0.2-textarea.0",
30
29
  "@mirohq/design-system-primitive": "^1.1.1",
31
- "@mirohq/design-system-stitches": "^2.4.1"
30
+ "@mirohq/design-system-base-input": "^0.0.2",
31
+ "@mirohq/design-system-stitches": "^2.5.0"
32
32
  },
33
33
  "scripts": {
34
34
  "build": "rollup -c ../../../rollup.config.js",