@mirohq/design-system-base-input 0.0.1-input.0 → 0.0.1

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 +116 -136
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +116 -132
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +94 -962
  6. package/package.json +1 -8
package/dist/main.js CHANGED
@@ -2,146 +2,126 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var React = require('react');
7
- var designSystemUtils = require('@mirohq/design-system-utils');
8
- var designSystemPrimitive = require('@mirohq/design-system-primitive');
9
- var designSystemStitches = require('@mirohq/design-system-stitches');
10
- var designSystemStyles = require('@mirohq/design-system-styles');
11
-
12
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
-
14
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
-
16
- const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"], [data-disabled]';
17
- const StyledContainer = designSystemStitches.styled("span", {
18
- position: "relative",
19
- display: "inline-flex",
20
- verticalAlign: "middle",
21
- alignItems: "center",
22
- justifyContent: "flex-end",
23
- width: "100%"
24
- });
25
- const StyledBaseInput = designSystemStitches.styled(designSystemPrimitive.Primitive.input, {
26
- all: "unset",
27
- boxSizing: "border-box",
28
- background: "$background-neutrals-container",
29
- border: "1px solid $border-neutrals",
30
- borderRadius: "$50",
31
- color: "$text-neutrals",
32
- width: "100%",
33
- "&::placeholder": {
34
- fontStyle: "italic"
35
- },
36
- ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: {
37
- color: "$text-neutrals-subtle"
38
- },
39
- "&:read-only": {
40
- background: "$background-neutrals-disabled",
41
- color: "$text-neutrals"
42
- },
43
- "&:disabled, &[aria-disabled=true], &[data-disabled]": {
44
- caretColor: "transparent",
45
- background: "$background-neutrals-disabled",
46
- "&, &::placeholder": {
47
- color: "$text-neutrals-disabled"
5
+ const styles = {
6
+ variants: {
7
+ hovered: {
8
+ true: {},
9
+ false: {}
10
+ },
11
+ focused: {
12
+ true: {
13
+ boxShadow: "$focus-controls"
14
+ },
15
+ false: {}
16
+ },
17
+ valid: {
18
+ true: {},
19
+ false: {}
20
+ },
21
+ readOnly: {
22
+ true: {
23
+ background: "$background-neutrals-disabled",
24
+ color: "$text-neutrals-subtle"
25
+ },
26
+ false: {}
48
27
  },
49
- "&:selection": {
50
- background: "transparent"
28
+ disabled: {
29
+ true: {
30
+ background: "$background-neutrals-disabled"
31
+ },
32
+ false: {}
33
+ },
34
+ ariaDisabled: {
35
+ true: {
36
+ background: "$background-neutrals-disabled"
37
+ },
38
+ false: {}
51
39
  }
52
40
  },
53
- ["&:hover:not(".concat(disabledAndReadonlySelectors, ")")]: {
54
- borderColor: "$border-primary-hover"
55
- },
56
- "&:focus": designSystemStyles.focus.css({
57
- boxShadow: "$focus-controls"
58
- }),
59
- ["&:where(:invalid, [data-invalid], [aria-invalid=true]):not(".concat(disabledAndReadonlySelectors, ")")]: {
60
- borderColor: "$border-danger",
61
- "&:focus": designSystemStyles.focus.css({
62
- boxShadow: "$focus-controls-error"
63
- }),
64
- "&:hover": {
65
- borderColor: "$border-danger-hover"
66
- }
67
- }
68
- });
69
-
70
- const StyledInputSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
71
- position: "absolute",
72
- marginInlineEnd: "$50"
73
- });
74
-
75
- const InputContext = React.createContext({});
76
- const InputProvider = ({
77
- children,
78
- ...restProps
79
- }) => /* @__PURE__ */ jsxRuntime.jsx(InputContext.Provider, { value: restProps, children });
80
- const useInputContext = () => React.useContext(InputContext);
81
-
82
- const InputSlot = React__default["default"].forwardRef((props, forwardRef) => {
83
- const { disabled, ariaDisabled, readOnly } = useInputContext();
84
- if (designSystemUtils.booleanify(disabled) || designSystemUtils.booleanify(ariaDisabled) || designSystemUtils.booleanify(readOnly)) {
85
- return null;
86
- }
87
- return /* @__PURE__ */ jsxRuntime.jsx(StyledInputSlot, { ...props, ref: forwardRef });
88
- });
89
-
90
- const keyboardEventHandler = (e) => {
91
- if (e.key !== "Tab") {
92
- e.preventDefault();
93
- }
94
- };
95
- const BaseInput = React__default["default"].forwardRef(
96
- ({
97
- "aria-disabled": ariaDisabled,
98
- disabled,
99
- readOnly,
100
- value,
101
- children,
102
- ...restProps
103
- }, forwardRef) => {
104
- let elementProps = restProps;
105
- if (designSystemUtils.booleanify(ariaDisabled)) {
106
- elementProps = designSystemUtils.removeEventProps(restProps, [
107
- "onFocus",
108
- "onBlur",
109
- "onPointerMove"
110
- ]);
111
- elementProps.onKeyDown = keyboardEventHandler;
112
- elementProps.onKeyUp = keyboardEventHandler;
113
- }
114
- const input = /* @__PURE__ */ jsxRuntime.jsx(
115
- StyledBaseInput,
116
- {
117
- ...elementProps,
118
- "aria-disabled": ariaDisabled,
119
- disabled,
120
- readOnly,
121
- value,
122
- ref: forwardRef
41
+ compoundVariants: [
42
+ /** Idle states */
43
+ {
44
+ valid: false,
45
+ readOnly: false,
46
+ disabled: false,
47
+ ariaDisabled: false,
48
+ css: {
49
+ borderColor: "$border-danger"
123
50
  }
124
- );
125
- let render = input;
126
- if (children != null) {
127
- render = /* @__PURE__ */ jsxRuntime.jsxs(StyledContainer, { children: [
128
- input,
129
- children
130
- ] });
131
- }
132
- return /* @__PURE__ */ jsxRuntime.jsx(
133
- InputProvider,
134
- {
135
- disabled,
136
- ariaDisabled,
137
- readOnly,
138
- value,
139
- children: render
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: {
76
+ borderColor: "$border-danger",
77
+ boxShadow: "$focus-controls-error"
78
+ }
79
+ },
80
+ {
81
+ focused: true,
82
+ readOnly: false,
83
+ valid: true,
84
+ disabled: false,
85
+ ariaDisabled: false,
86
+ css: {
87
+ borderColor: "$border-success",
88
+ boxShadow: "$focus-controls-success"
140
89
  }
141
- );
142
- }
143
- );
144
- BaseInput.InputSlot = InputSlot;
90
+ },
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"
121
+ }
122
+ }
123
+ ]
124
+ };
145
125
 
146
- exports.BaseInput = BaseInput;
126
+ exports.styles = styles;
147
127
  //# sourceMappingURL=main.js.map
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/base-input.styled.tsx","../src/partials/input-slot.styled.tsx","../src/use-input-context.tsx","../src/partials/input-slot.tsx","../src/base-input.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst disabledAndReadonlySelectors =\n ':read-only, :disabled, [aria-disabled=\"true\"], [data-disabled]'\n\nexport const StyledContainer = styled('span', {\n position: 'relative',\n display: 'inline-flex',\n verticalAlign: 'middle',\n alignItems: 'center',\n justifyContent: 'flex-end',\n width: '100%',\n})\n\nexport const StyledBaseInput = styled(Primitive.input, {\n all: 'unset',\n boxSizing: 'border-box',\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n color: '$text-neutrals',\n width: '100%',\n\n '&::placeholder': {\n fontStyle: 'italic',\n },\n\n [`&:not(${disabledAndReadonlySelectors})::placeholder`]: {\n color: '$text-neutrals-subtle',\n },\n\n '&:read-only': {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals',\n },\n\n '&:disabled, &[aria-disabled=true], &[data-disabled]': {\n caretColor: 'transparent',\n background: '$background-neutrals-disabled',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n\n [`&:hover:not(${disabledAndReadonlySelectors})`]: {\n borderColor: '$border-primary-hover',\n },\n\n '&:focus': focus.css({\n boxShadow: '$focus-controls',\n }),\n\n [`&:where(:invalid, [data-invalid], [aria-invalid=true]):not(${disabledAndReadonlySelectors})`]:\n {\n borderColor: '$border-danger',\n '&:focus': focus.css({\n boxShadow: '$focus-controls-error',\n }),\n '&:hover': {\n borderColor: '$border-danger-hover',\n },\n },\n})\n\nexport type StyledBaseInputProps = ComponentPropsWithRef<typeof StyledBaseInput>\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledInputSlot = styled(Primitive.div, {\n position: 'absolute',\n marginInlineEnd: '$50',\n})\n","import { createContext, useContext } from 'react'\nimport type { PropsWithChildren, HTMLProps } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nexport interface InputContextProps {\n disabled?: boolean\n ariaDisabled?: Booleanish\n readOnly?: boolean\n value?: HTMLProps<'input'>['value']\n}\n\nconst InputContext = createContext<InputContextProps>({})\n\nexport const InputProvider = ({\n children,\n ...restProps\n}: PropsWithChildren<InputContextProps>): any => (\n <InputContext.Provider value={restProps}>{children}</InputContext.Provider>\n)\n\nexport const useInputContext = (): InputContextProps => useContext(InputContext)\n","import React from 'react'\nimport type { ComponentPropsWithRef, ElementRef } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { StyledInputSlot } from './input-slot.styled'\nimport { useInputContext } from '../use-input-context'\n\nexport const InputSlot = React.forwardRef<\n ElementRef<typeof StyledInputSlot>,\n ComponentPropsWithRef<typeof StyledInputSlot>\n>((props, forwardRef) => {\n const { disabled, ariaDisabled, readOnly } = useInputContext()\n\n if (\n booleanify(disabled) ||\n booleanify(ariaDisabled) ||\n booleanify(readOnly)\n ) {\n return null\n }\n\n return <StyledInputSlot {...props} ref={forwardRef} />\n})\n","import React from 'react'\nimport type {\n ElementRef,\n ForwardRefExoticComponent,\n KeyboardEventHandler,\n} from 'react'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\n\nimport { StyledBaseInput, StyledContainer } from './base-input.styled'\nimport type { StyledBaseInputProps } from './base-input.styled'\nimport { InputSlot } from './partials/input-slot'\nimport { InputProvider } from './use-input-context'\n\nexport interface BaseInputProps extends StyledBaseInputProps {}\n\nconst keyboardEventHandler: KeyboardEventHandler<HTMLInputElement> = e => {\n if (e.key !== 'Tab') {\n e.preventDefault()\n }\n}\n\nexport const BaseInput = React.forwardRef<\n ElementRef<typeof StyledBaseInput>,\n BaseInputProps\n>(\n (\n {\n 'aria-disabled': ariaDisabled,\n disabled,\n readOnly,\n value,\n children,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n if (booleanify(ariaDisabled)) {\n elementProps = removeEventProps(restProps, [\n 'onFocus',\n 'onBlur',\n 'onPointerMove',\n ])\n\n elementProps.onKeyDown = keyboardEventHandler\n elementProps.onKeyUp = keyboardEventHandler\n }\n\n const input = (\n <StyledBaseInput\n {...elementProps}\n aria-disabled={ariaDisabled}\n disabled={disabled}\n readOnly={readOnly}\n value={value}\n ref={forwardRef}\n />\n )\n\n let render = input\n\n if (children != null) {\n render = (\n <StyledContainer>\n {input}\n {children}\n </StyledContainer>\n )\n }\n\n return (\n <InputProvider\n disabled={disabled}\n ariaDisabled={ariaDisabled}\n readOnly={readOnly}\n value={value}\n >\n {render}\n </InputProvider>\n )\n }\n) as ForwardRefExoticComponent<BaseInputProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n InputSlot: typeof InputSlot\n}\n\nBaseInput.InputSlot = InputSlot\n"],"names":["styled","Primitive","focus","createContext","useContext","React","booleanify","jsx","removeEventProps"],"mappings":"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"}
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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"}
package/dist/module.js CHANGED
@@ -1,139 +1,123 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import React, { createContext, useContext } from 'react';
3
- import { booleanify, removeEventProps } from '@mirohq/design-system-utils';
4
- import { Primitive } from '@mirohq/design-system-primitive';
5
- import { styled } from '@mirohq/design-system-stitches';
6
- import { focus } from '@mirohq/design-system-styles';
7
-
8
- const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"], [data-disabled]';
9
- const StyledContainer = styled("span", {
10
- position: "relative",
11
- display: "inline-flex",
12
- verticalAlign: "middle",
13
- alignItems: "center",
14
- justifyContent: "flex-end",
15
- width: "100%"
16
- });
17
- const StyledBaseInput = styled(Primitive.input, {
18
- all: "unset",
19
- boxSizing: "border-box",
20
- background: "$background-neutrals-container",
21
- border: "1px solid $border-neutrals",
22
- borderRadius: "$50",
23
- color: "$text-neutrals",
24
- width: "100%",
25
- "&::placeholder": {
26
- fontStyle: "italic"
27
- },
28
- ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: {
29
- color: "$text-neutrals-subtle"
30
- },
31
- "&:read-only": {
32
- background: "$background-neutrals-disabled",
33
- color: "$text-neutrals"
34
- },
35
- "&:disabled, &[aria-disabled=true], &[data-disabled]": {
36
- caretColor: "transparent",
37
- background: "$background-neutrals-disabled",
38
- "&, &::placeholder": {
39
- color: "$text-neutrals-disabled"
1
+ const styles = {
2
+ variants: {
3
+ hovered: {
4
+ true: {},
5
+ false: {}
6
+ },
7
+ focused: {
8
+ true: {
9
+ boxShadow: "$focus-controls"
10
+ },
11
+ false: {}
12
+ },
13
+ valid: {
14
+ true: {},
15
+ false: {}
16
+ },
17
+ readOnly: {
18
+ true: {
19
+ background: "$background-neutrals-disabled",
20
+ color: "$text-neutrals-subtle"
21
+ },
22
+ false: {}
23
+ },
24
+ disabled: {
25
+ true: {
26
+ background: "$background-neutrals-disabled"
27
+ },
28
+ false: {}
40
29
  },
41
- "&:selection": {
42
- background: "transparent"
30
+ ariaDisabled: {
31
+ true: {
32
+ background: "$background-neutrals-disabled"
33
+ },
34
+ false: {}
43
35
  }
44
36
  },
45
- ["&:hover:not(".concat(disabledAndReadonlySelectors, ")")]: {
46
- borderColor: "$border-primary-hover"
47
- },
48
- "&:focus": focus.css({
49
- boxShadow: "$focus-controls"
50
- }),
51
- ["&:where(:invalid, [data-invalid], [aria-invalid=true]):not(".concat(disabledAndReadonlySelectors, ")")]: {
52
- borderColor: "$border-danger",
53
- "&:focus": focus.css({
54
- boxShadow: "$focus-controls-error"
55
- }),
56
- "&:hover": {
57
- borderColor: "$border-danger-hover"
58
- }
59
- }
60
- });
61
-
62
- const StyledInputSlot = styled(Primitive.div, {
63
- position: "absolute",
64
- marginInlineEnd: "$50"
65
- });
66
-
67
- const InputContext = createContext({});
68
- const InputProvider = ({
69
- children,
70
- ...restProps
71
- }) => /* @__PURE__ */ jsx(InputContext.Provider, { value: restProps, children });
72
- const useInputContext = () => useContext(InputContext);
73
-
74
- const InputSlot = React.forwardRef((props, forwardRef) => {
75
- const { disabled, ariaDisabled, readOnly } = useInputContext();
76
- if (booleanify(disabled) || booleanify(ariaDisabled) || booleanify(readOnly)) {
77
- return null;
78
- }
79
- return /* @__PURE__ */ jsx(StyledInputSlot, { ...props, ref: forwardRef });
80
- });
81
-
82
- const keyboardEventHandler = (e) => {
83
- if (e.key !== "Tab") {
84
- e.preventDefault();
85
- }
86
- };
87
- const BaseInput = React.forwardRef(
88
- ({
89
- "aria-disabled": ariaDisabled,
90
- disabled,
91
- readOnly,
92
- value,
93
- children,
94
- ...restProps
95
- }, forwardRef) => {
96
- let elementProps = restProps;
97
- if (booleanify(ariaDisabled)) {
98
- elementProps = removeEventProps(restProps, [
99
- "onFocus",
100
- "onBlur",
101
- "onPointerMove"
102
- ]);
103
- elementProps.onKeyDown = keyboardEventHandler;
104
- elementProps.onKeyUp = keyboardEventHandler;
105
- }
106
- const input = /* @__PURE__ */ jsx(
107
- StyledBaseInput,
108
- {
109
- ...elementProps,
110
- "aria-disabled": ariaDisabled,
111
- disabled,
112
- readOnly,
113
- value,
114
- ref: forwardRef
37
+ compoundVariants: [
38
+ /** Idle states */
39
+ {
40
+ valid: false,
41
+ readOnly: false,
42
+ disabled: false,
43
+ ariaDisabled: false,
44
+ css: {
45
+ borderColor: "$border-danger"
115
46
  }
116
- );
117
- let render = input;
118
- if (children != null) {
119
- render = /* @__PURE__ */ jsxs(StyledContainer, { children: [
120
- input,
121
- children
122
- ] });
123
- }
124
- return /* @__PURE__ */ jsx(
125
- InputProvider,
126
- {
127
- disabled,
128
- ariaDisabled,
129
- readOnly,
130
- value,
131
- children: render
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: {
72
+ borderColor: "$border-danger",
73
+ boxShadow: "$focus-controls-error"
74
+ }
75
+ },
76
+ {
77
+ focused: true,
78
+ readOnly: false,
79
+ valid: true,
80
+ disabled: false,
81
+ ariaDisabled: false,
82
+ css: {
83
+ borderColor: "$border-success",
84
+ boxShadow: "$focus-controls-success"
132
85
  }
133
- );
134
- }
135
- );
136
- BaseInput.InputSlot = InputSlot;
86
+ },
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"
117
+ }
118
+ }
119
+ ]
120
+ };
137
121
 
138
- export { BaseInput };
122
+ export { styles };
139
123
  //# sourceMappingURL=module.js.map
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/base-input.styled.tsx","../src/partials/input-slot.styled.tsx","../src/use-input-context.tsx","../src/partials/input-slot.tsx","../src/base-input.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst disabledAndReadonlySelectors =\n ':read-only, :disabled, [aria-disabled=\"true\"], [data-disabled]'\n\nexport const StyledContainer = styled('span', {\n position: 'relative',\n display: 'inline-flex',\n verticalAlign: 'middle',\n alignItems: 'center',\n justifyContent: 'flex-end',\n width: '100%',\n})\n\nexport const StyledBaseInput = styled(Primitive.input, {\n all: 'unset',\n boxSizing: 'border-box',\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n color: '$text-neutrals',\n width: '100%',\n\n '&::placeholder': {\n fontStyle: 'italic',\n },\n\n [`&:not(${disabledAndReadonlySelectors})::placeholder`]: {\n color: '$text-neutrals-subtle',\n },\n\n '&:read-only': {\n background: '$background-neutrals-disabled',\n color: '$text-neutrals',\n },\n\n '&:disabled, &[aria-disabled=true], &[data-disabled]': {\n caretColor: 'transparent',\n background: '$background-neutrals-disabled',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n\n [`&:hover:not(${disabledAndReadonlySelectors})`]: {\n borderColor: '$border-primary-hover',\n },\n\n '&:focus': focus.css({\n boxShadow: '$focus-controls',\n }),\n\n [`&:where(:invalid, [data-invalid], [aria-invalid=true]):not(${disabledAndReadonlySelectors})`]:\n {\n borderColor: '$border-danger',\n '&:focus': focus.css({\n boxShadow: '$focus-controls-error',\n }),\n '&:hover': {\n borderColor: '$border-danger-hover',\n },\n },\n})\n\nexport type StyledBaseInputProps = ComponentPropsWithRef<typeof StyledBaseInput>\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledInputSlot = styled(Primitive.div, {\n position: 'absolute',\n marginInlineEnd: '$50',\n})\n","import { createContext, useContext } from 'react'\nimport type { PropsWithChildren, HTMLProps } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nexport interface InputContextProps {\n disabled?: boolean\n ariaDisabled?: Booleanish\n readOnly?: boolean\n value?: HTMLProps<'input'>['value']\n}\n\nconst InputContext = createContext<InputContextProps>({})\n\nexport const InputProvider = ({\n children,\n ...restProps\n}: PropsWithChildren<InputContextProps>): any => (\n <InputContext.Provider value={restProps}>{children}</InputContext.Provider>\n)\n\nexport const useInputContext = (): InputContextProps => useContext(InputContext)\n","import React from 'react'\nimport type { ComponentPropsWithRef, ElementRef } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { StyledInputSlot } from './input-slot.styled'\nimport { useInputContext } from '../use-input-context'\n\nexport const InputSlot = React.forwardRef<\n ElementRef<typeof StyledInputSlot>,\n ComponentPropsWithRef<typeof StyledInputSlot>\n>((props, forwardRef) => {\n const { disabled, ariaDisabled, readOnly } = useInputContext()\n\n if (\n booleanify(disabled) ||\n booleanify(ariaDisabled) ||\n booleanify(readOnly)\n ) {\n return null\n }\n\n return <StyledInputSlot {...props} ref={forwardRef} />\n})\n","import React from 'react'\nimport type {\n ElementRef,\n ForwardRefExoticComponent,\n KeyboardEventHandler,\n} from 'react'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\n\nimport { StyledBaseInput, StyledContainer } from './base-input.styled'\nimport type { StyledBaseInputProps } from './base-input.styled'\nimport { InputSlot } from './partials/input-slot'\nimport { InputProvider } from './use-input-context'\n\nexport interface BaseInputProps extends StyledBaseInputProps {}\n\nconst keyboardEventHandler: KeyboardEventHandler<HTMLInputElement> = e => {\n if (e.key !== 'Tab') {\n e.preventDefault()\n }\n}\n\nexport const BaseInput = React.forwardRef<\n ElementRef<typeof StyledBaseInput>,\n BaseInputProps\n>(\n (\n {\n 'aria-disabled': ariaDisabled,\n disabled,\n readOnly,\n value,\n children,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n if (booleanify(ariaDisabled)) {\n elementProps = removeEventProps(restProps, [\n 'onFocus',\n 'onBlur',\n 'onPointerMove',\n ])\n\n elementProps.onKeyDown = keyboardEventHandler\n elementProps.onKeyUp = keyboardEventHandler\n }\n\n const input = (\n <StyledBaseInput\n {...elementProps}\n aria-disabled={ariaDisabled}\n disabled={disabled}\n readOnly={readOnly}\n value={value}\n ref={forwardRef}\n />\n )\n\n let render = input\n\n if (children != null) {\n render = (\n <StyledContainer>\n {input}\n {children}\n </StyledContainer>\n )\n }\n\n return (\n <InputProvider\n disabled={disabled}\n ariaDisabled={ariaDisabled}\n readOnly={readOnly}\n value={value}\n >\n {render}\n </InputProvider>\n )\n }\n) as ForwardRefExoticComponent<BaseInputProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n InputSlot: typeof InputSlot\n}\n\nBaseInput.InputSlot = InputSlot\n"],"names":[],"mappings":";;;;;;;AAKA,MAAM,4BACJ,GAAA,gEAAA,CAAA;AAEW,MAAA,eAAA,GAAkB,OAAO,MAAQ,EAAA;AAAA,EAC5C,QAAU,EAAA,UAAA;AAAA,EACV,OAAS,EAAA,aAAA;AAAA,EACT,aAAe,EAAA,QAAA;AAAA,EACf,UAAY,EAAA,QAAA;AAAA,EACZ,cAAgB,EAAA,UAAA;AAAA,EAChB,KAAO,EAAA,MAAA;AACT,CAAC,CAAA,CAAA;AAEY,MAAA,eAAA,GAAkB,MAAO,CAAA,SAAA,CAAU,KAAO,EAAA;AAAA,EACrD,GAAK,EAAA,OAAA;AAAA,EACL,SAAW,EAAA,YAAA;AAAA,EACX,UAAY,EAAA,gCAAA;AAAA,EACZ,MAAQ,EAAA,4BAAA;AAAA,EACR,YAAc,EAAA,KAAA;AAAA,EACd,KAAO,EAAA,gBAAA;AAAA,EACP,KAAO,EAAA,MAAA;AAAA,EAEP,gBAAkB,EAAA;AAAA,IAChB,SAAW,EAAA,QAAA;AAAA,GACb;AAAA,EAEA,CAAC,QAAA,CAAS,MAA4B,CAAA,4BAAA,EAAA,gBAAA,CAAgB,GAAG;AAAA,IACvD,KAAO,EAAA,uBAAA;AAAA,GACT;AAAA,EAEA,aAAe,EAAA;AAAA,IACb,UAAY,EAAA,+BAAA;AAAA,IACZ,KAAO,EAAA,gBAAA;AAAA,GACT;AAAA,EAEA,qDAAuD,EAAA;AAAA,IACrD,UAAY,EAAA,aAAA;AAAA,IACZ,UAAY,EAAA,+BAAA;AAAA,IACZ,mBAAqB,EAAA;AAAA,MACnB,KAAO,EAAA,yBAAA;AAAA,KACT;AAAA,IACA,aAAe,EAAA;AAAA,MACb,UAAY,EAAA,aAAA;AAAA,KACd;AAAA,GACF;AAAA,EAEA,CAAC,cAAA,CAAe,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAAG;AAAA,IAChD,WAAa,EAAA,uBAAA;AAAA,GACf;AAAA,EAEA,SAAA,EAAW,MAAM,GAAI,CAAA;AAAA,IACnB,SAAW,EAAA,iBAAA;AAAA,GACZ,CAAA;AAAA,EAED,CAAC,6DAAA,CAA8D,MAA4B,CAAA,4BAAA,EAAA,GAAA,CAAG,GAC5F;AAAA,IACE,WAAa,EAAA,gBAAA;AAAA,IACb,SAAA,EAAW,MAAM,GAAI,CAAA;AAAA,MACnB,SAAW,EAAA,uBAAA;AAAA,KACZ,CAAA;AAAA,IACD,SAAW,EAAA;AAAA,MACT,WAAa,EAAA,sBAAA;AAAA,KACf;AAAA,GACF;AACJ,CAAC,CAAA;;ACjEY,MAAA,eAAA,GAAkB,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EACnD,QAAU,EAAA,UAAA;AAAA,EACV,eAAiB,EAAA,KAAA;AACnB,CAAC,CAAA;;ACKD,MAAM,YAAA,GAAe,aAAiC,CAAA,EAAE,CAAA,CAAA;AAEjD,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,GAAG,SAAA;AACL,CAAA,yBACG,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,WAAY,QAAS,EAAA,CAAA,CAAA;AAGxC,MAAA,eAAA,GAAkB,MAAyB,UAAA,CAAW,YAAY,CAAA;;ACbxE,MAAM,SAAY,GAAA,KAAA,CAAM,UAG7B,CAAA,CAAC,OAAO,UAAe,KAAA;AACvB,EAAA,MAAM,EAAE,QAAA,EAAU,YAAc,EAAA,QAAA,KAAa,eAAgB,EAAA,CAAA;AAE7D,EACE,IAAA,UAAA,CAAW,QAAQ,CACnB,IAAA,UAAA,CAAW,YAAY,CACvB,IAAA,UAAA,CAAW,QAAQ,CACnB,EAAA;AACA,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBAAQ,GAAA,CAAA,eAAA,EAAA,EAAiB,GAAG,KAAA,EAAO,KAAK,UAAY,EAAA,CAAA,CAAA;AACtD,CAAC,CAAA;;ACPD,MAAM,uBAA+D,CAAK,CAAA,KAAA;AACxE,EAAI,IAAA,CAAA,CAAE,QAAQ,KAAO,EAAA;AACnB,IAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,GACnB;AACF,CAAA,CAAA;AAEO,MAAM,YAAY,KAAM,CAAA,UAAA;AAAA,EAI7B,CACE;AAAA,IACE,eAAiB,EAAA,YAAA;AAAA,IACjB,QAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,IAAI,YAAe,GAAA,SAAA,CAAA;AAEnB,IAAI,IAAA,UAAA,CAAW,YAAY,CAAG,EAAA;AAC5B,MAAA,YAAA,GAAe,iBAAiB,SAAW,EAAA;AAAA,QACzC,SAAA;AAAA,QACA,QAAA;AAAA,QACA,eAAA;AAAA,OACD,CAAA,CAAA;AAED,MAAA,YAAA,CAAa,SAAY,GAAA,oBAAA,CAAA;AACzB,MAAA,YAAA,CAAa,OAAU,GAAA,oBAAA,CAAA;AAAA,KACzB;AAEA,IAAA,MAAM,KACJ,mBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACJ,eAAe,EAAA,YAAA;AAAA,QACf,QAAA;AAAA,QACA,QAAA;AAAA,QACA,KAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,OAAA;AAAA,KACP,CAAA;AAGF,IAAA,IAAI,MAAS,GAAA,KAAA,CAAA;AAEb,IAAA,IAAI,YAAY,IAAM,EAAA;AACpB,MAAA,MAAA,wBACG,eACE,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,KAAA;AAAA,QACA,QAAA;AAAA,OACH,EAAA,CAAA,CAAA;AAAA,KAEJ;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,YAAA;AAAA,QACA,QAAA;AAAA,QACA,KAAA;AAAA,QAEC,QAAA,EAAA,MAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AACF,EAAA;AASA,SAAA,CAAU,SAAY,GAAA,SAAA;;;;"}
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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"}