@mirohq/design-system-base-input 0.0.1 → 0.0.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.
Files changed (6) hide show
  1. package/dist/main.js +64 -98
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +64 -99
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +53 -77
  6. package/package.json +5 -1
package/dist/main.js CHANGED
@@ -2,126 +2,92 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var designSystemUtils = require('@mirohq/design-system-utils');
6
+
5
7
  const styles = {
6
8
  variants: {
7
- hovered: {
8
- true: {},
9
- false: {}
9
+ idle: {
10
+ background: "$background-neutrals-container",
11
+ border: "1px solid $border-neutrals",
12
+ borderRadius: "$50",
13
+ fontSize: "$200",
14
+ lineHeight: "1.5"
10
15
  },
11
16
  focused: {
12
- true: {
13
- boxShadow: "$focus-controls"
14
- },
15
- false: {}
17
+ boxShadow: "$focus-controls",
18
+ borderColor: "$border-neutrals"
16
19
  },
17
- valid: {
18
- true: {},
19
- false: {}
20
+ hovered: {
21
+ borderColor: "$border-primary-hover"
20
22
  },
21
23
  readOnly: {
22
- true: {
23
- background: "$background-neutrals-disabled",
24
- color: "$text-neutrals-subtle"
25
- },
26
- false: {}
24
+ background: "$background-neutrals-disabled",
25
+ color: "$text-neutrals-subtle"
27
26
  },
28
27
  disabled: {
29
- true: {
30
- background: "$background-neutrals-disabled"
31
- },
32
- false: {}
28
+ background: "$background-neutrals-disabled"
33
29
  },
34
- ariaDisabled: {
35
- true: {
36
- background: "$background-neutrals-disabled"
37
- },
38
- false: {}
39
- }
40
- },
41
- compoundVariants: [
42
- /** Idle states */
43
- {
44
- valid: false,
45
- readOnly: false,
46
- disabled: false,
47
- ariaDisabled: false,
48
- css: {
30
+ invalid: {
31
+ idle: {
49
32
  borderColor: "$border-danger"
50
- }
51
- },
52
- {
53
- valid: true,
54
- readOnly: false,
55
- disabled: false,
56
- ariaDisabled: false,
57
- css: {
58
- borderColor: "$border-success"
59
- }
60
- },
61
- /** Focus States */
62
- {
63
- focused: true,
64
- readOnly: false,
65
- css: {
66
- borderColor: "$border-neutrals"
67
- }
68
- },
69
- {
70
- focused: true,
71
- readOnly: false,
72
- valid: false,
73
- disabled: false,
74
- ariaDisabled: false,
75
- css: {
33
+ },
34
+ focused: {
76
35
  borderColor: "$border-danger",
77
36
  boxShadow: "$focus-controls-error"
37
+ },
38
+ hovered: {
39
+ borderColor: "$border-danger-hover"
78
40
  }
79
41
  },
80
- {
81
- focused: true,
82
- readOnly: false,
83
- valid: true,
84
- disabled: false,
85
- ariaDisabled: false,
86
- css: {
42
+ valid: {
43
+ idle: {
44
+ borderColor: "$border-success"
45
+ },
46
+ focused: {
87
47
  borderColor: "$border-success",
88
48
  boxShadow: "$focus-controls-success"
49
+ },
50
+ hovered: {
51
+ borderColor: "$border-success-hover"
89
52
  }
53
+ }
54
+ },
55
+ base: {
56
+ placeholder: {
57
+ color: "$text-neutrals-subtle"
90
58
  },
91
- /** Hover states */
92
- {
93
- hovered: true,
94
- disabled: false,
95
- ariaDisabled: false,
96
- readOnly: false,
97
- css: {
98
- borderColor: "$border-primary-hover"
99
- }
100
- },
101
- {
102
- hovered: true,
103
- focused: false,
104
- valid: false,
105
- readOnly: false,
106
- disabled: false,
107
- ariaDisabled: false,
108
- css: {
109
- borderColor: "$border-danger-hover"
110
- }
111
- },
112
- {
113
- hovered: true,
114
- focused: false,
115
- valid: true,
116
- readOnly: false,
117
- disabled: false,
118
- ariaDisabled: false,
119
- css: {
120
- borderColor: "$border-success-hover"
59
+ disabled: {
60
+ caretColor: "transparent",
61
+ "&, &::placeholder": {
62
+ color: "$text-neutrals-disabled",
63
+ "-webkit-text-fill-color": "$colors$text-neutrals-disabled"
64
+ },
65
+ "&:selection": {
66
+ background: "transparent"
121
67
  }
122
68
  }
123
- ]
69
+ }
70
+ };
71
+
72
+ const keyboardEventHandler = (e) => {
73
+ if (e.key !== "Tab") {
74
+ e.preventDefault();
75
+ }
76
+ };
77
+ const useAriaDisabled = (props, ariaDisabled) => {
78
+ if (!designSystemUtils.booleanify(ariaDisabled)) {
79
+ return props;
80
+ }
81
+ const formattedProps = designSystemUtils.removeEventProps(props, [
82
+ "onFocus",
83
+ "onBlur",
84
+ "onPointerMove"
85
+ ]);
86
+ formattedProps.onKeyDown = keyboardEventHandler;
87
+ formattedProps.onKeyUp = keyboardEventHandler;
88
+ return formattedProps;
124
89
  };
125
90
 
126
91
  exports.styles = styles;
92
+ exports.useAriaDisabled = useAriaDisabled;
127
93
  //# sourceMappingURL=main.js.map
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/styles.ts"],"sourcesContent":["export const styles = {\n variants: {\n hovered: {\n true: {},\n false: {},\n },\n focused: {\n true: {\n boxShadow: '$focus-controls',\n },\n false: {},\n },\n valid: {\n true: {},\n false: {},\n },\n readOnly: {\n true: {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals-subtle',\n },\n false: {},\n },\n disabled: {\n true: {\n background: '$background-neutrals-disabled',\n },\n false: {},\n },\n ariaDisabled: {\n true: {\n background: '$background-neutrals-disabled',\n },\n false: {},\n },\n },\n compoundVariants: [\n /** Idle states */\n {\n valid: false,\n readOnly: false,\n disabled: false,\n ariaDisabled: false,\n css: {\n borderColor: '$border-danger',\n },\n },\n {\n valid: true,\n readOnly: false,\n disabled: false,\n ariaDisabled: false,\n css: {\n borderColor: '$border-success',\n },\n },\n /** Focus States */\n {\n focused: true,\n readOnly: false,\n css: {\n borderColor: '$border-neutrals',\n },\n },\n {\n focused: true,\n readOnly: false,\n valid: false,\n disabled: false,\n ariaDisabled: false,\n css: {\n borderColor: '$border-danger',\n boxShadow: '$focus-controls-error',\n },\n },\n {\n focused: true,\n readOnly: false,\n valid: true,\n disabled: false,\n ariaDisabled: false,\n css: {\n borderColor: '$border-success',\n boxShadow: '$focus-controls-success',\n },\n },\n /** Hover states */\n {\n hovered: true,\n disabled: false,\n ariaDisabled: false,\n readOnly: false,\n css: {\n borderColor: '$border-primary-hover',\n },\n },\n {\n hovered: true,\n focused: false,\n valid: false,\n readOnly: false,\n disabled: false,\n ariaDisabled: false,\n css: {\n borderColor: '$border-danger-hover',\n },\n },\n {\n hovered: true,\n focused: false,\n valid: true,\n readOnly: false,\n disabled: false,\n ariaDisabled: false,\n css: {\n borderColor: '$border-success-hover',\n },\n },\n ],\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/styles.ts","../src/use-aria-disabled.ts"],"sourcesContent":["export const styles = {\n variants: {\n idle: {\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n fontSize: '$200',\n lineHeight: '1.5',\n },\n focused: {\n boxShadow: '$focus-controls',\n borderColor: '$border-neutrals',\n },\n hovered: {\n borderColor: '$border-primary-hover',\n },\n readOnly: {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals-subtle',\n },\n disabled: {\n background: '$background-neutrals-disabled',\n },\n invalid: {\n idle: {\n borderColor: '$border-danger',\n },\n focused: {\n borderColor: '$border-danger',\n boxShadow: '$focus-controls-error',\n },\n hovered: {\n borderColor: '$border-danger-hover',\n },\n },\n valid: {\n idle: {\n borderColor: '$border-success',\n },\n focused: {\n borderColor: '$border-success',\n boxShadow: '$focus-controls-success',\n },\n hovered: {\n borderColor: '$border-success-hover',\n },\n },\n },\n base: {\n placeholder: {\n color: '$text-neutrals-subtle',\n },\n disabled: {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n '-webkit-text-fill-color': '$colors$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n },\n}\n","import type { KeyboardEventHandler, InputHTMLAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\n\nconst keyboardEventHandler: KeyboardEventHandler<HTMLElement> = e => {\n if (e.key !== 'Tab') {\n e.preventDefault()\n }\n}\n\nexport const useAriaDisabled = <T extends HTMLElement>(\n props: InputHTMLAttributes<T>,\n ariaDisabled?: Booleanish\n): InputHTMLAttributes<T> => {\n if (!booleanify(ariaDisabled)) {\n return props\n }\n\n const formattedProps = removeEventProps(props, [\n 'onFocus',\n 'onBlur',\n 'onPointerMove',\n ])\n\n formattedProps.onKeyDown = keyboardEventHandler\n formattedProps.onKeyUp = keyboardEventHandler\n\n return formattedProps\n}\n"],"names":["booleanify","removeEventProps"],"mappings":";;;;;;AAAO,MAAM,MAAS,GAAA;AAAA,EACpB,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,UAAY,EAAA,gCAAA;AAAA,MACZ,MAAQ,EAAA,4BAAA;AAAA,MACR,YAAc,EAAA,KAAA;AAAA,MACd,QAAU,EAAA,MAAA;AAAA,MACV,UAAY,EAAA,KAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,SAAW,EAAA,iBAAA;AAAA,MACX,WAAa,EAAA,kBAAA;AAAA,KACf;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAa,EAAA,uBAAA;AAAA,KACf;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,MACZ,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,gBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,gBAAA;AAAA,QACb,SAAW,EAAA,uBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,sBAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,iBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,iBAAA;AAAA,QACb,SAAW,EAAA,yBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,uBAAA;AAAA,OACf;AAAA,KACF;AAAA,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,aAAA;AAAA,MACZ,mBAAqB,EAAA;AAAA,QACnB,KAAO,EAAA,yBAAA;AAAA,QACP,yBAA2B,EAAA,gCAAA;AAAA,OAC7B;AAAA,MACA,aAAe,EAAA;AAAA,QACb,UAAY,EAAA,aAAA;AAAA,OACd;AAAA,KACF;AAAA,GACF;AACF;;AC3DA,MAAM,uBAA0D,CAAK,CAAA,KAAA;AACnE,EAAI,IAAA,CAAA,CAAE,QAAQ,KAAO,EAAA;AACnB,IAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,GACnB;AACF,CAAA,CAAA;AAEa,MAAA,eAAA,GAAkB,CAC7B,KAAA,EACA,YAC2B,KAAA;AAC3B,EAAI,IAAA,CAACA,4BAAW,CAAA,YAAY,CAAG,EAAA;AAC7B,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,cAAA,GAAiBC,mCAAiB,KAAO,EAAA;AAAA,IAC7C,SAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,cAAA,CAAe,SAAY,GAAA,oBAAA,CAAA;AAC3B,EAAA,cAAA,CAAe,OAAU,GAAA,oBAAA,CAAA;AAEzB,EAAO,OAAA,cAAA,CAAA;AACT;;;;;"}
package/dist/module.js CHANGED
@@ -1,123 +1,88 @@
1
+ import { booleanify, removeEventProps } from '@mirohq/design-system-utils';
2
+
1
3
  const styles = {
2
4
  variants: {
3
- hovered: {
4
- true: {},
5
- false: {}
5
+ idle: {
6
+ background: "$background-neutrals-container",
7
+ border: "1px solid $border-neutrals",
8
+ borderRadius: "$50",
9
+ fontSize: "$200",
10
+ lineHeight: "1.5"
6
11
  },
7
12
  focused: {
8
- true: {
9
- boxShadow: "$focus-controls"
10
- },
11
- false: {}
13
+ boxShadow: "$focus-controls",
14
+ borderColor: "$border-neutrals"
12
15
  },
13
- valid: {
14
- true: {},
15
- false: {}
16
+ hovered: {
17
+ borderColor: "$border-primary-hover"
16
18
  },
17
19
  readOnly: {
18
- true: {
19
- background: "$background-neutrals-disabled",
20
- color: "$text-neutrals-subtle"
21
- },
22
- false: {}
20
+ background: "$background-neutrals-disabled",
21
+ color: "$text-neutrals-subtle"
23
22
  },
24
23
  disabled: {
25
- true: {
26
- background: "$background-neutrals-disabled"
27
- },
28
- false: {}
24
+ background: "$background-neutrals-disabled"
29
25
  },
30
- ariaDisabled: {
31
- true: {
32
- background: "$background-neutrals-disabled"
33
- },
34
- false: {}
35
- }
36
- },
37
- compoundVariants: [
38
- /** Idle states */
39
- {
40
- valid: false,
41
- readOnly: false,
42
- disabled: false,
43
- ariaDisabled: false,
44
- css: {
26
+ invalid: {
27
+ idle: {
45
28
  borderColor: "$border-danger"
46
- }
47
- },
48
- {
49
- valid: true,
50
- readOnly: false,
51
- disabled: false,
52
- ariaDisabled: false,
53
- css: {
54
- borderColor: "$border-success"
55
- }
56
- },
57
- /** Focus States */
58
- {
59
- focused: true,
60
- readOnly: false,
61
- css: {
62
- borderColor: "$border-neutrals"
63
- }
64
- },
65
- {
66
- focused: true,
67
- readOnly: false,
68
- valid: false,
69
- disabled: false,
70
- ariaDisabled: false,
71
- css: {
29
+ },
30
+ focused: {
72
31
  borderColor: "$border-danger",
73
32
  boxShadow: "$focus-controls-error"
33
+ },
34
+ hovered: {
35
+ borderColor: "$border-danger-hover"
74
36
  }
75
37
  },
76
- {
77
- focused: true,
78
- readOnly: false,
79
- valid: true,
80
- disabled: false,
81
- ariaDisabled: false,
82
- css: {
38
+ valid: {
39
+ idle: {
40
+ borderColor: "$border-success"
41
+ },
42
+ focused: {
83
43
  borderColor: "$border-success",
84
44
  boxShadow: "$focus-controls-success"
45
+ },
46
+ hovered: {
47
+ borderColor: "$border-success-hover"
85
48
  }
49
+ }
50
+ },
51
+ base: {
52
+ placeholder: {
53
+ color: "$text-neutrals-subtle"
86
54
  },
87
- /** Hover states */
88
- {
89
- hovered: true,
90
- disabled: false,
91
- ariaDisabled: false,
92
- readOnly: false,
93
- css: {
94
- borderColor: "$border-primary-hover"
95
- }
96
- },
97
- {
98
- hovered: true,
99
- focused: false,
100
- valid: false,
101
- readOnly: false,
102
- disabled: false,
103
- ariaDisabled: false,
104
- css: {
105
- borderColor: "$border-danger-hover"
106
- }
107
- },
108
- {
109
- hovered: true,
110
- focused: false,
111
- valid: true,
112
- readOnly: false,
113
- disabled: false,
114
- ariaDisabled: false,
115
- css: {
116
- borderColor: "$border-success-hover"
55
+ disabled: {
56
+ caretColor: "transparent",
57
+ "&, &::placeholder": {
58
+ color: "$text-neutrals-disabled",
59
+ "-webkit-text-fill-color": "$colors$text-neutrals-disabled"
60
+ },
61
+ "&:selection": {
62
+ background: "transparent"
117
63
  }
118
64
  }
119
- ]
65
+ }
66
+ };
67
+
68
+ const keyboardEventHandler = (e) => {
69
+ if (e.key !== "Tab") {
70
+ e.preventDefault();
71
+ }
72
+ };
73
+ const useAriaDisabled = (props, ariaDisabled) => {
74
+ if (!booleanify(ariaDisabled)) {
75
+ return props;
76
+ }
77
+ const formattedProps = removeEventProps(props, [
78
+ "onFocus",
79
+ "onBlur",
80
+ "onPointerMove"
81
+ ]);
82
+ formattedProps.onKeyDown = keyboardEventHandler;
83
+ formattedProps.onKeyUp = keyboardEventHandler;
84
+ return formattedProps;
120
85
  };
121
86
 
122
- export { styles };
87
+ export { styles, useAriaDisabled };
123
88
  //# sourceMappingURL=module.js.map
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/styles.ts"],"sourcesContent":["export const styles = {\n variants: {\n hovered: {\n true: {},\n false: {},\n },\n focused: {\n true: {\n boxShadow: '$focus-controls',\n },\n false: {},\n },\n valid: {\n true: {},\n false: {},\n },\n readOnly: {\n true: {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals-subtle',\n },\n false: {},\n },\n disabled: {\n true: {\n background: '$background-neutrals-disabled',\n },\n false: {},\n },\n ariaDisabled: {\n true: {\n background: '$background-neutrals-disabled',\n },\n false: {},\n },\n },\n compoundVariants: [\n /** Idle states */\n {\n valid: false,\n readOnly: false,\n disabled: false,\n ariaDisabled: false,\n css: {\n borderColor: '$border-danger',\n },\n },\n {\n valid: true,\n readOnly: false,\n disabled: false,\n ariaDisabled: false,\n css: {\n borderColor: '$border-success',\n },\n },\n /** Focus States */\n {\n focused: true,\n readOnly: false,\n css: {\n borderColor: '$border-neutrals',\n },\n },\n {\n focused: true,\n readOnly: false,\n valid: false,\n disabled: false,\n ariaDisabled: false,\n css: {\n borderColor: '$border-danger',\n boxShadow: '$focus-controls-error',\n },\n },\n {\n focused: true,\n readOnly: false,\n valid: true,\n disabled: false,\n ariaDisabled: false,\n css: {\n borderColor: '$border-success',\n boxShadow: '$focus-controls-success',\n },\n },\n /** Hover states */\n {\n hovered: true,\n disabled: false,\n ariaDisabled: false,\n readOnly: false,\n css: {\n borderColor: '$border-primary-hover',\n },\n },\n {\n hovered: true,\n focused: false,\n valid: false,\n readOnly: false,\n disabled: false,\n ariaDisabled: false,\n css: {\n borderColor: '$border-danger-hover',\n },\n },\n {\n hovered: true,\n focused: false,\n valid: true,\n readOnly: false,\n disabled: false,\n ariaDisabled: false,\n css: {\n borderColor: '$border-success-hover',\n },\n },\n ],\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/styles.ts","../src/use-aria-disabled.ts"],"sourcesContent":["export const styles = {\n variants: {\n idle: {\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n fontSize: '$200',\n lineHeight: '1.5',\n },\n focused: {\n boxShadow: '$focus-controls',\n borderColor: '$border-neutrals',\n },\n hovered: {\n borderColor: '$border-primary-hover',\n },\n readOnly: {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals-subtle',\n },\n disabled: {\n background: '$background-neutrals-disabled',\n },\n invalid: {\n idle: {\n borderColor: '$border-danger',\n },\n focused: {\n borderColor: '$border-danger',\n boxShadow: '$focus-controls-error',\n },\n hovered: {\n borderColor: '$border-danger-hover',\n },\n },\n valid: {\n idle: {\n borderColor: '$border-success',\n },\n focused: {\n borderColor: '$border-success',\n boxShadow: '$focus-controls-success',\n },\n hovered: {\n borderColor: '$border-success-hover',\n },\n },\n },\n base: {\n placeholder: {\n color: '$text-neutrals-subtle',\n },\n disabled: {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n '-webkit-text-fill-color': '$colors$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n },\n}\n","import type { KeyboardEventHandler, InputHTMLAttributes } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\n\nconst keyboardEventHandler: KeyboardEventHandler<HTMLElement> = e => {\n if (e.key !== 'Tab') {\n e.preventDefault()\n }\n}\n\nexport const useAriaDisabled = <T extends HTMLElement>(\n props: InputHTMLAttributes<T>,\n ariaDisabled?: Booleanish\n): InputHTMLAttributes<T> => {\n if (!booleanify(ariaDisabled)) {\n return props\n }\n\n const formattedProps = removeEventProps(props, [\n 'onFocus',\n 'onBlur',\n 'onPointerMove',\n ])\n\n formattedProps.onKeyDown = keyboardEventHandler\n formattedProps.onKeyUp = keyboardEventHandler\n\n return formattedProps\n}\n"],"names":[],"mappings":";;AAAO,MAAM,MAAS,GAAA;AAAA,EACpB,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,UAAY,EAAA,gCAAA;AAAA,MACZ,MAAQ,EAAA,4BAAA;AAAA,MACR,YAAc,EAAA,KAAA;AAAA,MACd,QAAU,EAAA,MAAA;AAAA,MACV,UAAY,EAAA,KAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,SAAW,EAAA,iBAAA;AAAA,MACX,WAAa,EAAA,kBAAA;AAAA,KACf;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAa,EAAA,uBAAA;AAAA,KACf;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,MACZ,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,+BAAA;AAAA,KACd;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,gBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,gBAAA;AAAA,QACb,SAAW,EAAA,uBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,sBAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,KAAO,EAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,iBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,iBAAA;AAAA,QACb,SAAW,EAAA,yBAAA;AAAA,OACb;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAa,EAAA,uBAAA;AAAA,OACf;AAAA,KACF;AAAA,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,uBAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,aAAA;AAAA,MACZ,mBAAqB,EAAA;AAAA,QACnB,KAAO,EAAA,yBAAA;AAAA,QACP,yBAA2B,EAAA,gCAAA;AAAA,OAC7B;AAAA,MACA,aAAe,EAAA;AAAA,QACb,UAAY,EAAA,aAAA;AAAA,OACd;AAAA,KACF;AAAA,GACF;AACF;;AC3DA,MAAM,uBAA0D,CAAK,CAAA,KAAA;AACnE,EAAI,IAAA,CAAA,CAAE,QAAQ,KAAO,EAAA;AACnB,IAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,GACnB;AACF,CAAA,CAAA;AAEa,MAAA,eAAA,GAAkB,CAC7B,KAAA,EACA,YAC2B,KAAA;AAC3B,EAAI,IAAA,CAAC,UAAW,CAAA,YAAY,CAAG,EAAA;AAC7B,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,cAAA,GAAiB,iBAAiB,KAAO,EAAA;AAAA,IAC7C,SAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,cAAA,CAAe,SAAY,GAAA,oBAAA,CAAA;AAC3B,EAAA,cAAA,CAAe,OAAU,GAAA,oBAAA,CAAA;AAEzB,EAAO,OAAA,cAAA,CAAA;AACT;;;;"}
package/dist/types.d.ts CHANGED
@@ -1,95 +1,71 @@
1
+ import { InputHTMLAttributes } from 'react';
2
+ import { Booleanish } from '@mirohq/design-system-types';
3
+
1
4
  declare const styles: {
2
5
  variants: {
3
- hovered: {
4
- true: {};
5
- false: {};
6
+ idle: {
7
+ background: string;
8
+ border: string;
9
+ borderRadius: string;
10
+ fontSize: string;
11
+ lineHeight: string;
6
12
  };
7
13
  focused: {
8
- true: {
9
- boxShadow: string;
10
- };
11
- false: {};
14
+ boxShadow: string;
15
+ borderColor: string;
12
16
  };
13
- valid: {
14
- true: {};
15
- false: {};
17
+ hovered: {
18
+ borderColor: string;
16
19
  };
17
20
  readOnly: {
18
- true: {
19
- background: string;
20
- color: string;
21
- };
22
- false: {};
21
+ background: string;
22
+ color: string;
23
23
  };
24
24
  disabled: {
25
- true: {
26
- background: string;
25
+ background: string;
26
+ };
27
+ invalid: {
28
+ idle: {
29
+ borderColor: string;
30
+ };
31
+ focused: {
32
+ borderColor: string;
33
+ boxShadow: string;
34
+ };
35
+ hovered: {
36
+ borderColor: string;
27
37
  };
28
- false: {};
29
38
  };
30
- ariaDisabled: {
31
- true: {
32
- background: string;
39
+ valid: {
40
+ idle: {
41
+ borderColor: string;
42
+ };
43
+ focused: {
44
+ borderColor: string;
45
+ boxShadow: string;
46
+ };
47
+ hovered: {
48
+ borderColor: string;
33
49
  };
34
- false: {};
35
50
  };
36
51
  };
37
- compoundVariants: ({
38
- valid: boolean;
39
- readOnly: boolean;
40
- disabled: boolean;
41
- ariaDisabled: boolean;
42
- css: {
43
- borderColor: string;
44
- boxShadow?: undefined;
45
- };
46
- focused?: undefined;
47
- hovered?: undefined;
48
- } | {
49
- focused: boolean;
50
- readOnly: boolean;
51
- css: {
52
- borderColor: string;
53
- boxShadow?: undefined;
52
+ base: {
53
+ placeholder: {
54
+ color: string;
54
55
  };
55
- valid?: undefined;
56
- disabled?: undefined;
57
- ariaDisabled?: undefined;
58
- hovered?: undefined;
59
- } | {
60
- focused: boolean;
61
- readOnly: boolean;
62
- valid: boolean;
63
- disabled: boolean;
64
- ariaDisabled: boolean;
65
- css: {
66
- borderColor: string;
67
- boxShadow: string;
68
- };
69
- hovered?: undefined;
70
- } | {
71
- hovered: boolean;
72
- disabled: boolean;
73
- ariaDisabled: boolean;
74
- readOnly: boolean;
75
- css: {
76
- borderColor: string;
77
- boxShadow?: undefined;
78
- };
79
- valid?: undefined;
80
- focused?: undefined;
81
- } | {
82
- hovered: boolean;
83
- focused: boolean;
84
- valid: boolean;
85
- readOnly: boolean;
86
- disabled: boolean;
87
- ariaDisabled: boolean;
88
- css: {
89
- borderColor: string;
90
- boxShadow?: undefined;
56
+ disabled: {
57
+ caretColor: string;
58
+ '&, &::placeholder': {
59
+ color: string;
60
+ '-webkit-text-fill-color': string;
61
+ };
62
+ '&:selection': {
63
+ background: string;
64
+ };
91
65
  };
92
- })[];
66
+ };
93
67
  };
94
68
 
95
- export { styles };
69
+ declare const useAriaDisabled: <T extends HTMLElement>(props: InputHTMLAttributes<T>, ariaDisabled?: Booleanish) => InputHTMLAttributes<T>;
70
+
71
+ export { styles, useAriaDisabled };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-base-input",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -25,6 +25,10 @@
25
25
  "@stitches/react": "^1.2.8",
26
26
  "react": "^16.14 || ^17 || ^18"
27
27
  },
28
+ "dependencies": {
29
+ "@mirohq/design-system-types": "^0.6.2",
30
+ "@mirohq/design-system-utils": "^0.14.3"
31
+ },
28
32
  "scripts": {
29
33
  "build": "rollup -c ../../../../rollup.config.js",
30
34
  "clean": "rm -rf dist",