@mirohq/design-system-base-input 0.0.3-forms.0 → 0.0.3
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 +0 -22
- package/dist/main.js.map +1 -1
- package/dist/module.js +1 -22
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +1 -6
- package/package.json +1 -5
package/dist/main.js
CHANGED
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var designSystemUtils = require('@mirohq/design-system-utils');
|
|
6
|
-
|
|
7
5
|
const styles = {
|
|
8
6
|
variants: {
|
|
9
7
|
idle: {
|
|
@@ -69,25 +67,5 @@ const styles = {
|
|
|
69
67
|
}
|
|
70
68
|
};
|
|
71
69
|
|
|
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;
|
|
89
|
-
};
|
|
90
|
-
|
|
91
70
|
exports.styles = styles;
|
|
92
|
-
exports.useAriaDisabled = useAriaDisabled;
|
|
93
71
|
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/styles.ts"
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/styles.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"],"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;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { booleanify, removeEventProps } from '@mirohq/design-system-utils';
|
|
2
|
-
|
|
3
1
|
const styles = {
|
|
4
2
|
variants: {
|
|
5
3
|
idle: {
|
|
@@ -65,24 +63,5 @@ const styles = {
|
|
|
65
63
|
}
|
|
66
64
|
};
|
|
67
65
|
|
|
68
|
-
|
|
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;
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
export { styles, useAriaDisabled };
|
|
66
|
+
export { styles };
|
|
88
67
|
//# sourceMappingURL=module.js.map
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/styles.ts"
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/styles.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"],"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;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
import { InputHTMLAttributes } from 'react';
|
|
2
|
-
import { Booleanish } from '@mirohq/design-system-types';
|
|
3
|
-
|
|
4
1
|
declare const styles: {
|
|
5
2
|
variants: {
|
|
6
3
|
idle: {
|
|
@@ -66,6 +63,4 @@ declare const styles: {
|
|
|
66
63
|
};
|
|
67
64
|
};
|
|
68
65
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
export { styles, useAriaDisabled };
|
|
66
|
+
export { styles };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-base-input",
|
|
3
|
-
"version": "0.0.3
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -25,10 +25,6 @@
|
|
|
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.15.0-forms.0"
|
|
31
|
-
},
|
|
32
28
|
"scripts": {
|
|
33
29
|
"build": "rollup -c ../../../../rollup.config.js",
|
|
34
30
|
"clean": "rm -rf dist",
|