@mirohq/design-system-base-input 0.0.1-input.1 → 0.0.2-textarea.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.
Files changed (6) hide show
  1. package/dist/main.js +53 -363
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +53 -360
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +66 -3460
  6. package/package.json +1 -7
package/dist/main.js CHANGED
@@ -2,401 +2,91 @@
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
5
  var designSystemUtils = require('@mirohq/design-system-utils');
8
- var interactions = require('@react-aria/interactions');
9
- var designSystemPrimitive = require('@mirohq/design-system-primitive');
10
- var designSystemStitches = require('@mirohq/design-system-stitches');
11
- var designSystemIcons = require('@mirohq/design-system-icons');
12
- var utils = require('@react-aria/utils');
13
6
 
14
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
-
16
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
-
18
- const StyledIconExclamationPointCircle = designSystemStitches.styled(
19
- designSystemIcons.IconExclamationPointCircle,
20
- {
21
- color: "$icon-danger"
22
- }
23
- );
24
- const StyledIconCheckMark = designSystemStitches.styled(designSystemIcons.IconCheckMark, {
25
- color: "$icon-success"
26
- });
27
- const StyledValidityBox = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
28
- order: 3,
29
- display: "flex",
30
- alignItems: "center"
31
- });
32
- const StyledBaseInput = designSystemStitches.styled("div", {
33
- alignItems: "center",
34
- background: "$background-neutrals-container",
35
- border: "1px solid $border-neutrals",
36
- borderRadius: "$50",
37
- display: "flex",
38
- height: "max-content",
39
- justifyContent: "flex-end",
40
- position: "relative",
41
- verticalAlign: "middle",
42
- boxSizing: "border-box",
43
- width: "100%",
7
+ const styles = {
44
8
  variants: {
45
- hovered: {
46
- true: {},
47
- false: {}
9
+ idle: {
10
+ background: "$background-neutrals-container",
11
+ border: "1px solid $border-neutrals",
12
+ borderRadius: "$50",
13
+ fontSize: "$200",
14
+ lineHeight: "1.5"
48
15
  },
49
16
  focused: {
50
- true: {
51
- boxShadow: "$focus-controls"
52
- },
53
- false: {}
17
+ boxShadow: "$focus-controls",
18
+ borderColor: "$border-neutrals"
54
19
  },
55
- valid: {
56
- true: {},
57
- false: {}
20
+ hovered: {
21
+ borderColor: "$border-primary-hover"
58
22
  },
59
23
  readOnly: {
60
- true: {
61
- background: "$background-neutrals-disabled",
62
- color: "$text-neutrals-subtle"
63
- },
64
- false: {}
24
+ background: "$background-neutrals-disabled",
25
+ color: "$text-neutrals-subtle"
65
26
  },
66
27
  disabled: {
67
- true: {
68
- background: "$background-neutrals-disabled"
69
- },
70
- false: {}
28
+ background: "$background-neutrals-disabled"
71
29
  },
72
- ariaDisabled: {
73
- true: {
74
- background: "$background-neutrals-disabled"
75
- },
76
- false: {}
77
- }
78
- },
79
- compoundVariants: [
80
- /** Idle states */
81
- {
82
- valid: false,
83
- readOnly: false,
84
- disabled: false,
85
- ariaDisabled: false,
86
- css: {
30
+ invalid: {
31
+ idle: {
87
32
  borderColor: "$border-danger"
88
- }
89
- },
90
- {
91
- valid: true,
92
- readOnly: false,
93
- disabled: false,
94
- ariaDisabled: false,
95
- css: {
96
- borderColor: "$border-success"
97
- }
98
- },
99
- /** Focus States */
100
- {
101
- focused: true,
102
- readOnly: false,
103
- css: {
104
- borderColor: "$border-neutrals"
105
- }
106
- },
107
- {
108
- focused: true,
109
- readOnly: false,
110
- valid: false,
111
- disabled: false,
112
- ariaDisabled: false,
113
- css: {
33
+ },
34
+ focused: {
114
35
  borderColor: "$border-danger",
115
36
  boxShadow: "$focus-controls-error"
37
+ },
38
+ hovered: {
39
+ borderColor: "$border-danger-hover"
116
40
  }
117
41
  },
118
- {
119
- focused: true,
120
- readOnly: false,
121
- valid: true,
122
- disabled: false,
123
- ariaDisabled: false,
124
- css: {
42
+ valid: {
43
+ idle: {
44
+ borderColor: "$border-success"
45
+ },
46
+ focused: {
125
47
  borderColor: "$border-success",
126
48
  boxShadow: "$focus-controls-success"
127
- }
128
- },
129
- /** Hover states */
130
- {
131
- hovered: true,
132
- disabled: false,
133
- ariaDisabled: false,
134
- readOnly: false,
135
- css: {
136
- borderColor: "$border-primary-hover"
137
- }
138
- },
139
- {
140
- hovered: true,
141
- focused: false,
142
- valid: false,
143
- readOnly: false,
144
- disabled: false,
145
- ariaDisabled: false,
146
- css: {
147
- borderColor: "$border-danger-hover"
148
- }
149
- },
150
- {
151
- hovered: true,
152
- focused: false,
153
- valid: true,
154
- readOnly: false,
155
- disabled: false,
156
- ariaDisabled: false,
157
- css: {
49
+ },
50
+ hovered: {
158
51
  borderColor: "$border-success-hover"
159
52
  }
160
53
  }
161
- ]
162
- });
163
-
164
- const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"], [data-disabled]';
165
- const StyledInput = designSystemStitches.styled(designSystemPrimitive.Primitive.input, {
166
- all: "unset",
167
- background: "transparent",
168
- color: "$text-neutrals",
169
- width: "100%",
170
- borderRadius: "$50",
171
- order: 2,
172
- "&::placeholder": {
173
- fontStyle: "italic"
174
- },
175
- ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: {
176
- color: "$text-neutrals-subtle"
177
54
  },
178
- "&:read-only": {
179
- color: "$text-neutrals-subtle"
180
- },
181
- "&:disabled, &[aria-disabled=true], &[data-disabled]": {
182
- caretColor: "transparent",
183
- "&, &::placeholder": {
184
- color: "$text-neutrals-disabled"
55
+ base: {
56
+ placeholder: {
57
+ color: "$text-neutrals-subtle"
185
58
  },
186
- "&:selection": {
187
- background: "transparent"
188
- }
189
- }
190
- });
191
-
192
- const InputContext = React.createContext({
193
- actionSlotRef: { current: null },
194
- setFocused: () => {
195
- },
196
- setHovered: () => {
197
- },
198
- setActive: () => {
199
- }
200
- });
201
- const InputProvider = ({
202
- children,
203
- disabled,
204
- ariaDisabled,
205
- readOnly,
206
- ...restProps
207
- }) => {
208
- const actionSlotRef = React.useRef(null);
209
- const [focused, setFocused] = React.useState(false);
210
- const [hovered, setHovered] = React.useState(false);
211
- const [active, setActive] = React.useState(false);
212
- const editable = !designSystemUtils.booleanify(disabled) && !designSystemUtils.booleanify(ariaDisabled) && !designSystemUtils.booleanify(readOnly);
213
- return /* @__PURE__ */ jsxRuntime.jsx(
214
- InputContext.Provider,
215
- {
216
- value: {
217
- ...restProps,
218
- setFocused,
219
- setHovered,
220
- setActive,
221
- active,
222
- hovered,
223
- focused,
224
- actionSlotRef,
225
- disabled,
226
- ariaDisabled,
227
- readOnly,
228
- editable
59
+ disabled: {
60
+ caretColor: "transparent",
61
+ "&, &::placeholder": {
62
+ color: "$text-neutrals-disabled"
229
63
  },
230
- children
64
+ "&:selection": {
65
+ background: "transparent"
66
+ }
231
67
  }
232
- );
68
+ }
233
69
  };
234
- const useInputContext = () => React.useContext(InputContext);
235
70
 
236
71
  const keyboardEventHandler = (e) => {
237
72
  if (e.key !== "Tab") {
238
73
  e.preventDefault();
239
74
  }
240
75
  };
241
- const Input = React__default["default"].forwardRef((props, forwardRef) => {
242
- const { ariaDisabled, disabled, readOnly, setFocused } = useInputContext();
243
- let elementProps = props;
244
- if (designSystemUtils.booleanify(ariaDisabled)) {
245
- elementProps = designSystemUtils.removeEventProps(props, [
246
- "onFocus",
247
- "onBlur",
248
- "onPointerMove"
249
- ]);
250
- elementProps.onKeyDown = keyboardEventHandler;
251
- elementProps.onKeyUp = keyboardEventHandler;
252
- }
253
- const onBlurEventHandler = () => {
254
- setFocused == null ? void 0 : setFocused(false);
255
- };
256
- const onFocusEventHandler = () => {
257
- setFocused == null ? void 0 : setFocused(true);
258
- };
259
- elementProps = utils.mergeProps(elementProps, {
260
- onBlur: onBlurEventHandler,
261
- onFocus: onFocusEventHandler
262
- });
263
- return /* @__PURE__ */ jsxRuntime.jsx(
264
- StyledInput,
265
- {
266
- ...elementProps,
267
- "aria-disabled": ariaDisabled,
268
- disabled,
269
- readOnly,
270
- ref: forwardRef
271
- }
272
- );
273
- });
274
-
275
- const StyledActionSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
276
- variants: {
277
- readOnly: {
278
- true: {
279
- "& svg[data-icon-component], & img[data-icon-component]": {
280
- color: "$icon-neutrals-subtle"
281
- }
282
- }
283
- }
76
+ const useAriaDisabled = (props, ariaDisabled) => {
77
+ if (!designSystemUtils.booleanify(ariaDisabled)) {
78
+ return props;
284
79
  }
285
- });
286
-
287
- const ActionSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
288
- const { valid, hovered, editable, actionSlotRef, active, readOnly } = useInputContext();
289
- const showInputSlot = valid === void 0 || designSystemUtils.booleanify(hovered) || designSystemUtils.booleanify(active);
290
- let formattedChildren = children;
291
- if (!designSystemUtils.booleanify(editable)) {
292
- formattedChildren = designSystemUtils.addPropsToChildren(children, () => true, {
293
- disabled: true
294
- });
295
- }
296
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: showInputSlot && /* @__PURE__ */ jsxRuntime.jsx(
297
- StyledActionSlot,
298
- {
299
- ...restProps,
300
- readOnly,
301
- ref: designSystemUtils.mergeRefs([forwardRef, actionSlotRef]),
302
- children: formattedChildren
303
- }
304
- ) });
305
- });
306
-
307
- const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
308
- alignContent: "center",
309
- display: "flex",
310
- justifyContent: "center",
311
- color: "$icon-neutrals-subtle",
312
- variants: {
313
- disabled: {
314
- true: {
315
- "& svg": {
316
- color: "$icon-neutrals-disabled"
317
- }
318
- }
319
- }
320
- }
321
- });
322
-
323
- const IconSlot = React__default["default"].forwardRef((props, forwardRef) => {
324
- const { ariaDisabled, disabled } = useInputContext();
325
- return /* @__PURE__ */ jsxRuntime.jsx(
326
- StyledIconSlot,
327
- {
328
- ...props,
329
- disabled: designSystemUtils.booleanify(disabled != null ? disabled : ariaDisabled),
330
- ref: forwardRef
331
- }
332
- );
333
- });
334
-
335
- const Root = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
336
- const {
337
- valid,
338
- ariaDisabled,
339
- disabled,
340
- readOnly,
341
- focused,
342
- active,
343
- setHovered,
344
- setActive
345
- } = useInputContext();
346
- const ref = React.useRef(null);
347
- const { hoverProps, isHovered: hovered } = interactions.useHover({
348
- onHoverChange: setHovered
349
- });
350
- const ariaDisabledOrDisabled = designSystemUtils.booleanify(ariaDisabled) || designSystemUtils.booleanify(disabled);
351
- const showValidityIcon = !ariaDisabledOrDisabled && !designSystemUtils.booleanify(readOnly) && !designSystemUtils.booleanify(hovered) && !designSystemUtils.booleanify(focused) && !designSystemUtils.booleanify(active) && (valid === true || valid === false);
352
- const ValidIcon = valid === true ? StyledIconCheckMark : StyledIconExclamationPointCircle;
353
- return /* @__PURE__ */ jsxRuntime.jsxs(
354
- StyledBaseInput,
355
- {
356
- ...restProps,
357
- ...hoverProps,
358
- ref: designSystemUtils.mergeRefs([ref, forwardRef]),
359
- hovered,
360
- focused,
361
- valid,
362
- disabled: designSystemUtils.booleanify(disabled),
363
- ariaDisabled: designSystemUtils.booleanify(ariaDisabled),
364
- readOnly: designSystemUtils.booleanify(readOnly),
365
- "data-invalid": valid === false ? "" : void 0,
366
- "data-valid": valid === true ? "" : void 0,
367
- onFocus: () => {
368
- setActive(true);
369
- },
370
- onBlur: () => {
371
- setTimeout(() => {
372
- var _a;
373
- if ((ref == null ? void 0 : ref.current) != null && !((_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.contains(document.activeElement))) {
374
- setActive(false);
375
- }
376
- }, 0);
377
- },
378
- children: [
379
- children,
380
- showValidityIcon && /* @__PURE__ */ jsxRuntime.jsx(StyledValidityBox, { children: /* @__PURE__ */ jsxRuntime.jsx(ValidIcon, { size: "small" }) })
381
- ]
382
- }
383
- );
384
- });
385
- const BaseInput = React__default["default"].forwardRef(
386
- ({ "aria-disabled": ariaDisabled, disabled, valid, readOnly, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
387
- InputProvider,
388
- {
389
- valid,
390
- disabled,
391
- ariaDisabled,
392
- readOnly,
393
- children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...restProps, ref: forwardRef })
394
- }
395
- )
396
- );
397
- BaseInput.ActionSlot = ActionSlot;
398
- BaseInput.IconSlot = IconSlot;
399
- BaseInput.Input = Input;
80
+ const formattedProps = designSystemUtils.removeEventProps(props, [
81
+ "onFocus",
82
+ "onBlur",
83
+ "onPointerMove"
84
+ ]);
85
+ formattedProps.onKeyDown = keyboardEventHandler;
86
+ formattedProps.onKeyUp = keyboardEventHandler;
87
+ return formattedProps;
88
+ };
400
89
 
401
- exports.BaseInput = BaseInput;
90
+ exports.styles = styles;
91
+ exports.useAriaDisabled = useAriaDisabled;
402
92
  //# 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.styled.tsx","../hooks/use-input-context.tsx","../src/partials/input.tsx","../src/partials/action-slot.styled.tsx","../src/partials/action-slot.tsx","../src/partials/icon-slot.styled.tsx","../src/partials/icon-slot.tsx","../src/base-input.tsx"],"sourcesContent":["import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { ComponentPropsWithRef } from 'react'\nimport {\n IconExclamationPointCircle,\n IconCheckMark,\n} from '@mirohq/design-system-icons'\n\nexport const StyledIconExclamationPointCircle = styled(\n IconExclamationPointCircle,\n {\n color: '$icon-danger',\n }\n)\n\nexport const StyledIconCheckMark = styled(IconCheckMark, {\n color: '$icon-success',\n})\n\nexport const StyledValidityBox = styled(Primitive.div, {\n order: 3,\n display: 'flex',\n alignItems: 'center',\n})\n\nexport const StyledBaseInput = styled('div', {\n alignItems: 'center',\n background: '$background-neutrals-container',\n border: '1px solid $border-neutrals',\n borderRadius: '$50',\n display: 'flex',\n height: 'max-content',\n justifyContent: 'flex-end',\n position: 'relative',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: '100%',\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\nexport type StyledBaseInputProps = ComponentPropsWithRef<typeof StyledBaseInput>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst disabledAndReadonlySelectors =\n ':read-only, :disabled, [aria-disabled=\"true\"], [data-disabled]'\n\nexport const StyledInput = styled(Primitive.input, {\n all: 'unset',\n background: 'transparent',\n color: '$text-neutrals',\n width: '100%',\n borderRadius: '$50',\n order: 2,\n\n '&::placeholder': {\n fontStyle: 'italic',\n },\n\n [`&:not(${disabledAndReadonlySelectors})::placeholder`]: {\n color: '$text-neutrals-subtle',\n },\n\n '&:read-only': {\n color: '$text-neutrals-subtle',\n },\n\n '&:disabled, &[aria-disabled=true], &[data-disabled]': {\n caretColor: 'transparent',\n '&, &::placeholder': {\n color: '$text-neutrals-disabled',\n },\n '&:selection': {\n background: 'transparent',\n },\n },\n})\n\nexport type StyledInputProps = ComponentPropsWithRef<typeof StyledInput>\n","import React, { createContext, useContext, useState, useRef } from 'react'\nimport type { PropsWithChildren } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nexport interface InputContextProps {\n disabled?: boolean\n ariaDisabled?: Booleanish\n readOnly?: boolean\n valid?: boolean\n hovered?: boolean\n focused?: boolean\n active?: boolean\n actionSlotRef: React.RefObject<HTMLDivElement>\n setFocused: React.Dispatch<React.SetStateAction<boolean>>\n setHovered: React.Dispatch<React.SetStateAction<boolean>>\n setActive: React.Dispatch<React.SetStateAction<boolean>>\n editable?: boolean\n}\n\nconst InputContext = createContext<InputContextProps>({\n actionSlotRef: { current: null },\n setFocused: () => {},\n setHovered: () => {},\n setActive: () => {},\n})\n\nexport const InputProvider = ({\n children,\n disabled,\n ariaDisabled,\n readOnly,\n ...restProps\n}: PropsWithChildren<\n Omit<\n InputContextProps,\n 'setFocused' | 'setHovered' | 'actionSlotRef' | 'setActive'\n >\n>): any => {\n const actionSlotRef = useRef<HTMLDivElement>(null)\n const [focused, setFocused] = useState(false)\n const [hovered, setHovered] = useState(false)\n const [active, setActive] = useState(false)\n const editable =\n !booleanify(disabled) && !booleanify(ariaDisabled) && !booleanify(readOnly)\n\n return (\n <InputContext.Provider\n value={{\n ...restProps,\n setFocused,\n setHovered,\n setActive,\n active,\n hovered,\n focused,\n actionSlotRef,\n disabled,\n ariaDisabled,\n readOnly,\n editable,\n }}\n >\n {children}\n </InputContext.Provider>\n )\n}\n\nexport const useInputContext = (): InputContextProps => useContext(InputContext)\n","import React from 'react'\nimport type { FocusEventHandler, KeyboardEventHandler, ElementRef } from 'react'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\nimport { mergeProps } from '@react-aria/utils'\n\nimport { StyledInput } from './input.styled'\nimport type { StyledInputProps } from './input.styled'\nimport { useInputContext } from '../../hooks/use-input-context'\n\nexport interface InputProps extends StyledInputProps {}\n\nconst keyboardEventHandler: KeyboardEventHandler<HTMLInputElement> = e => {\n if (e.key !== 'Tab') {\n e.preventDefault()\n }\n}\n\nexport const Input = React.forwardRef<\n ElementRef<typeof StyledInput>,\n StyledInputProps\n>((props, forwardRef) => {\n const { ariaDisabled, disabled, readOnly, setFocused } = useInputContext()\n let elementProps = props\n\n if (booleanify(ariaDisabled)) {\n elementProps = removeEventProps(props, [\n 'onFocus',\n 'onBlur',\n 'onPointerMove',\n ])\n\n elementProps.onKeyDown = keyboardEventHandler\n elementProps.onKeyUp = keyboardEventHandler\n }\n\n const onBlurEventHandler: FocusEventHandler<HTMLInputElement> = (): void => {\n setFocused?.(false)\n }\n\n const onFocusEventHandler: FocusEventHandler<HTMLInputElement> = (): void => {\n setFocused?.(true)\n }\n\n elementProps = mergeProps(elementProps, {\n onBlur: onBlurEventHandler,\n onFocus: onFocusEventHandler,\n })\n\n return (\n <StyledInput\n {...elementProps}\n aria-disabled={ariaDisabled}\n disabled={disabled}\n readOnly={readOnly}\n ref={forwardRef}\n />\n )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledActionSlot = styled(Primitive.div, {\n variants: {\n readOnly: {\n true: {\n '& svg[data-icon-component], & img[data-icon-component]': {\n color: '$icon-neutrals-subtle',\n },\n },\n },\n },\n})\n\nexport type StyledActionSlotProps = ComponentPropsWithRef<\n typeof StyledActionSlot\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport {\n mergeRefs,\n booleanify,\n addPropsToChildren,\n} from '@mirohq/design-system-utils'\n\nimport { StyledActionSlot } from './action-slot.styled'\nimport { useInputContext } from '../../hooks/use-input-context'\nimport type { StyledActionSlotProps } from './action-slot.styled'\n\nexport interface ActionSlotProps extends StyledActionSlotProps {}\n\nexport const ActionSlot = React.forwardRef<\n ElementRef<typeof StyledActionSlot>,\n StyledActionSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { valid, hovered, editable, actionSlotRef, active, readOnly } =\n useInputContext()\n\n const showInputSlot =\n valid === undefined || booleanify(hovered) || booleanify(active)\n\n let formattedChildren = children\n\n if (!booleanify(editable)) {\n formattedChildren = addPropsToChildren(children, () => true, {\n disabled: true,\n })\n }\n\n return (\n <>\n {showInputSlot && (\n <StyledActionSlot\n {...restProps}\n readOnly={readOnly}\n ref={mergeRefs([forwardRef, actionSlotRef])}\n >\n {formattedChildren}\n </StyledActionSlot>\n )}\n </>\n )\n})\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n alignContent: 'center',\n display: 'flex',\n justifyContent: 'center',\n color: '$icon-neutrals-subtle',\n variants: {\n disabled: {\n true: {\n '& svg': {\n color: '$icon-neutrals-disabled',\n },\n },\n },\n },\n})\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport { StyledIconSlot } from './icon-slot.styled'\nimport { useInputContext } from '../../hooks/use-input-context'\nimport type { StyledIconSlotProps } from './icon-slot.styled'\n\nexport interface IconSlotProps extends StyledIconSlotProps {}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n StyledIconSlotProps\n>((props, forwardRef) => {\n const { ariaDisabled, disabled } = useInputContext()\n return (\n <StyledIconSlot\n {...props}\n disabled={booleanify(disabled ?? ariaDisabled)}\n ref={forwardRef}\n />\n )\n})\n","import React, { useRef } from 'react'\nimport type {\n DOMAttributes,\n ElementRef,\n ForwardRefExoticComponent,\n} from 'react'\nimport { booleanify, mergeRefs } from '@mirohq/design-system-utils'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { useHover } from '@react-aria/interactions'\n\nimport {\n StyledBaseInput,\n StyledValidityBox,\n StyledIconExclamationPointCircle,\n StyledIconCheckMark,\n} from './base-input.styled'\nimport { Input } from './partials/input'\nimport { ActionSlot } from './partials/action-slot'\nimport { IconSlot } from './partials/icon-slot'\nimport { InputProvider, useInputContext } from '../hooks/use-input-context'\nimport type { StyledBaseInputProps } from './base-input.styled'\n\nexport interface BaseInputProps\n extends Omit<StyledBaseInputProps, keyof DOMAttributes<Element>> {\n 'aria-disabled'?: Booleanish | undefined\n disabled?: boolean | undefined\n readOnly?: boolean | undefined\n valid?: boolean | undefined\n hovered?: boolean | undefined\n focused?: boolean | undefined\n children: React.ReactNode\n}\n\nconst Root = React.forwardRef<\n ElementRef<typeof StyledBaseInput>,\n BaseInputProps\n>(({ children, ...restProps }, forwardRef) => {\n const {\n valid,\n ariaDisabled,\n disabled,\n readOnly,\n focused,\n active,\n setHovered,\n setActive,\n } = useInputContext()\n\n const ref = useRef<HTMLDivElement>(null)\n\n const { hoverProps, isHovered: hovered } = useHover({\n onHoverChange: setHovered,\n })\n\n const ariaDisabledOrDisabled =\n booleanify(ariaDisabled) || booleanify(disabled)\n\n const showValidityIcon =\n !ariaDisabledOrDisabled &&\n !booleanify(readOnly) &&\n !booleanify(hovered) &&\n !booleanify(focused) &&\n !booleanify(active) &&\n (valid === true || valid === false)\n\n const ValidIcon =\n valid === true ? StyledIconCheckMark : StyledIconExclamationPointCircle\n\n return (\n <StyledBaseInput\n {...restProps}\n {...hoverProps}\n ref={mergeRefs([ref, forwardRef])}\n hovered={hovered}\n focused={focused}\n valid={valid}\n disabled={booleanify(disabled)}\n ariaDisabled={booleanify(ariaDisabled)}\n readOnly={booleanify(readOnly)}\n data-invalid={valid === false ? '' : undefined}\n data-valid={valid === true ? '' : undefined}\n onFocus={() => {\n setActive(true)\n }}\n onBlur={() => {\n setTimeout(() => {\n if (\n ref?.current != null &&\n !ref?.current?.contains(document.activeElement)\n ) {\n setActive(false)\n }\n }, 0)\n }}\n >\n {children}\n {showValidityIcon && (\n <StyledValidityBox>\n <ValidIcon size='small' />\n </StyledValidityBox>\n )}\n </StyledBaseInput>\n )\n})\n\nexport const BaseInput = React.forwardRef<\n ElementRef<typeof StyledBaseInput>,\n BaseInputProps\n>(\n (\n { 'aria-disabled': ariaDisabled, disabled, valid, readOnly, ...restProps },\n forwardRef\n ) => (\n <InputProvider\n valid={valid}\n disabled={disabled}\n ariaDisabled={ariaDisabled}\n readOnly={readOnly}\n >\n <Root {...restProps} ref={forwardRef} />\n </InputProvider>\n )\n) as ForwardRefExoticComponent<BaseInputProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\nexport interface Partials {\n ActionSlot: typeof ActionSlot\n IconSlot: typeof IconSlot\n Input: typeof Input\n}\n\nBaseInput.ActionSlot = ActionSlot\nBaseInput.IconSlot = IconSlot\nBaseInput.Input = Input\n"],"names":["styled","IconExclamationPointCircle","IconCheckMark","Primitive","createContext","useRef","useState","booleanify","jsx","useContext","React","removeEventProps","mergeProps","addPropsToChildren","mergeRefs","useHover","jsxs"],"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 },\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,OACT;AAAA,MACA,aAAe,EAAA;AAAA,QACb,UAAY,EAAA,aAAA;AAAA,OACd;AAAA,KACF;AAAA,GACF;AACF;;AC1DA,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;;;;;"}