@mirohq/design-system-input 0.0.1-input.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 +131 -0
  2. package/dist/main.js.map +1 -0
  3. package/dist/module.js +121 -0
  4. package/dist/module.js.map +1 -0
  5. package/dist/types.d.ts +2436 -0
  6. package/package.json +38 -0
package/dist/main.js ADDED
@@ -0,0 +1,131 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var React = require('react');
7
+ var designSystemBaseInput = require('@mirohq/design-system-base-input');
8
+ var designSystemIconButton = require('@mirohq/design-system-icon-button');
9
+ var designSystemIcons = require('@mirohq/design-system-icons');
10
+ var designSystemUtils = require('@mirohq/design-system-utils');
11
+ var designSystemStitches = require('@mirohq/design-system-stitches');
12
+
13
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
+
15
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
+
17
+ const StyledBaseInput = designSystemStitches.styled(designSystemBaseInput.BaseInput, {
18
+ variants: {
19
+ size: {
20
+ medium: {
21
+ height: "$10",
22
+ padding: "$100"
23
+ },
24
+ large: {
25
+ height: "$12",
26
+ padding: "$150"
27
+ }
28
+ }
29
+ },
30
+ defaultVariants: {
31
+ size: "medium"
32
+ }
33
+ });
34
+
35
+ const InputText = React__default["default"].forwardRef(
36
+ ({ value, css, ...restProps }, forwardRef) => {
37
+ const inputRef = React.useRef(null);
38
+ const {
39
+ clearable = false,
40
+ onClear,
41
+ clearLabel,
42
+ ...elementProps
43
+ } = restProps;
44
+ const inputCss = clearable ? {
45
+ ...css != null ? css : {},
46
+ paddingInlineEnd: "$500"
47
+ } : {};
48
+ return /* @__PURE__ */ jsxRuntime.jsx(
49
+ StyledBaseInput,
50
+ {
51
+ ...elementProps,
52
+ value,
53
+ ref: designSystemUtils.mergeRefs([inputRef, forwardRef]),
54
+ css: inputCss,
55
+ children: clearable && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseInput.BaseInput.InputSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(
56
+ designSystemIconButton.IconButton,
57
+ {
58
+ size: "medium",
59
+ label: clearLabel,
60
+ onPress: () => {
61
+ var _a;
62
+ onClear == null ? void 0 : onClear((_a = inputRef.current) == null ? void 0 : _a.value);
63
+ if (value === void 0 && inputRef.current !== null) {
64
+ inputRef.current.value = "";
65
+ }
66
+ },
67
+ children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
68
+ }
69
+ ) })
70
+ }
71
+ );
72
+ }
73
+ );
74
+
75
+ const Input = InputText;
76
+
77
+ const InputPassword = React__default["default"].forwardRef(
78
+ ({
79
+ value,
80
+ reveal,
81
+ defaultReveal,
82
+ onReveal,
83
+ onHide,
84
+ hideLabel,
85
+ revealLabel,
86
+ css,
87
+ ...restProps
88
+ }, forwardRef) => {
89
+ const inputRef = React.useRef(null);
90
+ const [revealState, setRevealState] = React.useState(defaultReveal != null ? defaultReveal : false);
91
+ const revealInternal = reveal != null ? reveal : revealState;
92
+ return /* @__PURE__ */ jsxRuntime.jsx(
93
+ StyledBaseInput,
94
+ {
95
+ ...restProps,
96
+ type: revealInternal ? "text" : "password",
97
+ value,
98
+ ref: designSystemUtils.mergeRefs([inputRef, forwardRef]),
99
+ css: {
100
+ ...css != null ? css : {},
101
+ paddingInlineEnd: "$500"
102
+ },
103
+ children: /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseInput.BaseInput.InputSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(
104
+ designSystemIconButton.IconButton,
105
+ {
106
+ size: "medium",
107
+ onPress: () => {
108
+ var _a;
109
+ const valueInternal = value != null ? value : (_a = inputRef.current) == null ? void 0 : _a.value;
110
+ if (revealInternal) {
111
+ onHide == null ? void 0 : onHide(valueInternal);
112
+ } else {
113
+ onReveal == null ? void 0 : onReveal(valueInternal);
114
+ }
115
+ if (value === void 0) {
116
+ setRevealState((reveal2) => !reveal2);
117
+ }
118
+ },
119
+ label: revealInternal ? hideLabel : revealLabel,
120
+ children: revealInternal ? /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconEyeOpen, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconEyeOpenSlash, {})
121
+ }
122
+ ) })
123
+ }
124
+ );
125
+ }
126
+ );
127
+
128
+ exports.Input = Input;
129
+ exports.InputPassword = InputPassword;
130
+ exports.InputText = InputText;
131
+ //# sourceMappingURL=main.js.map
package/dist/main.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"main.js","sources":["../src/base-input.styled.ts","../src/input-text.tsx","../src/input.tsx","../src/input-password.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { BaseInput } from '@mirohq/design-system-base-input'\n\nexport const StyledBaseInput = styled(BaseInput, {\n variants: {\n size: {\n medium: {\n height: '$10',\n padding: '$100',\n },\n large: {\n height: '$12',\n padding: '$150',\n },\n },\n },\n\n defaultVariants: {\n size: 'medium',\n },\n})\n\nexport type StyledBaseInputProps = ComponentPropsWithRef<typeof StyledBaseInput>\n","import React, { useRef } from 'react'\nimport type { ElementRef, HTMLProps } from 'react'\nimport { BaseInput } from '@mirohq/design-system-base-input'\nimport { IconButton } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport { mergeRefs } from '@mirohq/design-system-utils'\n\nimport { StyledBaseInput } from './base-input.styled'\nimport type { StyledBaseInputProps } from './base-input.styled'\n\ntype Value = HTMLProps<'input'>['value']\n\nexport interface ClearProps {\n /**\n * Show X button for clearing the input value.\n */\n clearable: boolean\n\n /**\n * Tooltip label for the clear button.\n */\n\n clearLabel: string\n\n /**\n * Callback event called when clearing the input.\n */\n onClear?: (value: Value) => void\n}\n\nexport type InputTextProps = StyledBaseInputProps &\n ({ clearable?: never } | ClearProps)\n\nexport const InputText = React.forwardRef<ElementRef<'input'>, InputTextProps>(\n ({ value, css, ...restProps }, forwardRef) => {\n const inputRef = useRef<HTMLInputElement>(null)\n\n const {\n clearable = false,\n onClear,\n clearLabel,\n ...elementProps\n } = restProps as ClearProps\n\n const inputCss = clearable\n ? {\n ...(css ?? {}),\n paddingInlineEnd: '$500',\n }\n : {}\n\n return (\n <StyledBaseInput\n {...elementProps}\n value={value}\n ref={mergeRefs([inputRef, forwardRef])}\n css={inputCss}\n >\n {clearable && (\n <BaseInput.InputSlot>\n <IconButton\n size='medium'\n label={clearLabel}\n onPress={() => {\n onClear?.(inputRef.current?.value)\n\n if (value === undefined && inputRef.current !== null) {\n inputRef.current.value = ''\n }\n }}\n >\n <IconCross />\n </IconButton>\n </BaseInput.InputSlot>\n )}\n </StyledBaseInput>\n )\n }\n)\n","import { InputText } from './input-text'\nimport type { InputTextProps } from './input-text'\n\nexport type InputProps = InputTextProps\nexport const Input = InputText\n","import React, { useState, useRef } from 'react'\nimport type { ElementRef, HTMLProps } from 'react'\nimport { BaseInput } from '@mirohq/design-system-base-input'\nimport { IconButton } from '@mirohq/design-system-icon-button'\nimport { IconEyeOpen, IconEyeOpenSlash } from '@mirohq/design-system-icons'\nimport { mergeRefs } from '@mirohq/design-system-utils'\n\nimport { StyledBaseInput } from './base-input.styled'\nimport type { StyledBaseInputProps } from './base-input.styled'\n\ntype Value = HTMLProps<'input'>['value']\n\nexport interface InputPasswordProps extends Omit<StyledBaseInputProps, 'type'> {\n /**\n * A boolean for the default password state (visible or masked).\n */\n defaultReveal?: boolean\n\n /**\n * Indicates whether the password should be revealed (visible) or hidden (masked).\n */\n reveal?: boolean\n\n /**\n * Callback function to be called when the password is revealed.\n */\n onReveal?: (value: Value) => void\n\n /**\n * Callback function to be called when the password is hidden (masked).\n */\n onHide?: (value: Value) => void\n\n /**\n * Tooltip label text for the action to reveal the password.\n */\n revealLabel: string\n\n /**\n * Tooltip label text for the action to hide (mask) the password.\n */\n hideLabel: string\n}\n\nexport const InputPassword = React.forwardRef<\n ElementRef<'input'>,\n InputPasswordProps\n>(\n (\n {\n value,\n reveal,\n defaultReveal,\n onReveal,\n onHide,\n hideLabel,\n revealLabel,\n css,\n ...restProps\n },\n forwardRef\n ) => {\n const inputRef = useRef<HTMLInputElement>(null)\n const [revealState, setRevealState] = useState(defaultReveal ?? false)\n const revealInternal = reveal ?? revealState\n\n return (\n <StyledBaseInput\n {...restProps}\n type={revealInternal ? 'text' : 'password'}\n value={value}\n ref={mergeRefs([inputRef, forwardRef])}\n css={{\n ...(css ?? {}),\n paddingInlineEnd: '$500',\n }}\n >\n <BaseInput.InputSlot>\n <IconButton\n size='medium'\n onPress={() => {\n const valueInternal = value ?? inputRef.current?.value\n\n if (revealInternal) {\n onHide?.(valueInternal)\n } else {\n onReveal?.(valueInternal)\n }\n\n if (value === undefined) {\n setRevealState(reveal => !reveal)\n }\n }}\n label={revealInternal ? hideLabel : revealLabel}\n >\n {revealInternal ? <IconEyeOpen /> : <IconEyeOpenSlash />}\n </IconButton>\n </BaseInput.InputSlot>\n </StyledBaseInput>\n )\n }\n)\n"],"names":["styled","BaseInput","React","useRef","jsx","mergeRefs","IconButton","IconCross","useState","reveal","IconEyeOpen","IconEyeOpenSlash"],"mappings":"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"}
package/dist/module.js ADDED
@@ -0,0 +1,121 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import React, { useRef, useState } from 'react';
3
+ import { BaseInput } from '@mirohq/design-system-base-input';
4
+ import { IconButton } from '@mirohq/design-system-icon-button';
5
+ import { IconCross, IconEyeOpen, IconEyeOpenSlash } from '@mirohq/design-system-icons';
6
+ import { mergeRefs } from '@mirohq/design-system-utils';
7
+ import { styled } from '@mirohq/design-system-stitches';
8
+
9
+ const StyledBaseInput = styled(BaseInput, {
10
+ variants: {
11
+ size: {
12
+ medium: {
13
+ height: "$10",
14
+ padding: "$100"
15
+ },
16
+ large: {
17
+ height: "$12",
18
+ padding: "$150"
19
+ }
20
+ }
21
+ },
22
+ defaultVariants: {
23
+ size: "medium"
24
+ }
25
+ });
26
+
27
+ const InputText = React.forwardRef(
28
+ ({ value, css, ...restProps }, forwardRef) => {
29
+ const inputRef = useRef(null);
30
+ const {
31
+ clearable = false,
32
+ onClear,
33
+ clearLabel,
34
+ ...elementProps
35
+ } = restProps;
36
+ const inputCss = clearable ? {
37
+ ...css != null ? css : {},
38
+ paddingInlineEnd: "$500"
39
+ } : {};
40
+ return /* @__PURE__ */ jsx(
41
+ StyledBaseInput,
42
+ {
43
+ ...elementProps,
44
+ value,
45
+ ref: mergeRefs([inputRef, forwardRef]),
46
+ css: inputCss,
47
+ children: clearable && /* @__PURE__ */ jsx(BaseInput.InputSlot, { children: /* @__PURE__ */ jsx(
48
+ IconButton,
49
+ {
50
+ size: "medium",
51
+ label: clearLabel,
52
+ onPress: () => {
53
+ var _a;
54
+ onClear == null ? void 0 : onClear((_a = inputRef.current) == null ? void 0 : _a.value);
55
+ if (value === void 0 && inputRef.current !== null) {
56
+ inputRef.current.value = "";
57
+ }
58
+ },
59
+ children: /* @__PURE__ */ jsx(IconCross, {})
60
+ }
61
+ ) })
62
+ }
63
+ );
64
+ }
65
+ );
66
+
67
+ const Input = InputText;
68
+
69
+ const InputPassword = React.forwardRef(
70
+ ({
71
+ value,
72
+ reveal,
73
+ defaultReveal,
74
+ onReveal,
75
+ onHide,
76
+ hideLabel,
77
+ revealLabel,
78
+ css,
79
+ ...restProps
80
+ }, forwardRef) => {
81
+ const inputRef = useRef(null);
82
+ const [revealState, setRevealState] = useState(defaultReveal != null ? defaultReveal : false);
83
+ const revealInternal = reveal != null ? reveal : revealState;
84
+ return /* @__PURE__ */ jsx(
85
+ StyledBaseInput,
86
+ {
87
+ ...restProps,
88
+ type: revealInternal ? "text" : "password",
89
+ value,
90
+ ref: mergeRefs([inputRef, forwardRef]),
91
+ css: {
92
+ ...css != null ? css : {},
93
+ paddingInlineEnd: "$500"
94
+ },
95
+ children: /* @__PURE__ */ jsx(BaseInput.InputSlot, { children: /* @__PURE__ */ jsx(
96
+ IconButton,
97
+ {
98
+ size: "medium",
99
+ onPress: () => {
100
+ var _a;
101
+ const valueInternal = value != null ? value : (_a = inputRef.current) == null ? void 0 : _a.value;
102
+ if (revealInternal) {
103
+ onHide == null ? void 0 : onHide(valueInternal);
104
+ } else {
105
+ onReveal == null ? void 0 : onReveal(valueInternal);
106
+ }
107
+ if (value === void 0) {
108
+ setRevealState((reveal2) => !reveal2);
109
+ }
110
+ },
111
+ label: revealInternal ? hideLabel : revealLabel,
112
+ children: revealInternal ? /* @__PURE__ */ jsx(IconEyeOpen, {}) : /* @__PURE__ */ jsx(IconEyeOpenSlash, {})
113
+ }
114
+ ) })
115
+ }
116
+ );
117
+ }
118
+ );
119
+
120
+ export { Input, InputPassword, InputText };
121
+ //# sourceMappingURL=module.js.map
package/dist/module.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"module.js","sources":["../src/base-input.styled.ts","../src/input-text.tsx","../src/input.tsx","../src/input-password.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { BaseInput } from '@mirohq/design-system-base-input'\n\nexport const StyledBaseInput = styled(BaseInput, {\n variants: {\n size: {\n medium: {\n height: '$10',\n padding: '$100',\n },\n large: {\n height: '$12',\n padding: '$150',\n },\n },\n },\n\n defaultVariants: {\n size: 'medium',\n },\n})\n\nexport type StyledBaseInputProps = ComponentPropsWithRef<typeof StyledBaseInput>\n","import React, { useRef } from 'react'\nimport type { ElementRef, HTMLProps } from 'react'\nimport { BaseInput } from '@mirohq/design-system-base-input'\nimport { IconButton } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport { mergeRefs } from '@mirohq/design-system-utils'\n\nimport { StyledBaseInput } from './base-input.styled'\nimport type { StyledBaseInputProps } from './base-input.styled'\n\ntype Value = HTMLProps<'input'>['value']\n\nexport interface ClearProps {\n /**\n * Show X button for clearing the input value.\n */\n clearable: boolean\n\n /**\n * Tooltip label for the clear button.\n */\n\n clearLabel: string\n\n /**\n * Callback event called when clearing the input.\n */\n onClear?: (value: Value) => void\n}\n\nexport type InputTextProps = StyledBaseInputProps &\n ({ clearable?: never } | ClearProps)\n\nexport const InputText = React.forwardRef<ElementRef<'input'>, InputTextProps>(\n ({ value, css, ...restProps }, forwardRef) => {\n const inputRef = useRef<HTMLInputElement>(null)\n\n const {\n clearable = false,\n onClear,\n clearLabel,\n ...elementProps\n } = restProps as ClearProps\n\n const inputCss = clearable\n ? {\n ...(css ?? {}),\n paddingInlineEnd: '$500',\n }\n : {}\n\n return (\n <StyledBaseInput\n {...elementProps}\n value={value}\n ref={mergeRefs([inputRef, forwardRef])}\n css={inputCss}\n >\n {clearable && (\n <BaseInput.InputSlot>\n <IconButton\n size='medium'\n label={clearLabel}\n onPress={() => {\n onClear?.(inputRef.current?.value)\n\n if (value === undefined && inputRef.current !== null) {\n inputRef.current.value = ''\n }\n }}\n >\n <IconCross />\n </IconButton>\n </BaseInput.InputSlot>\n )}\n </StyledBaseInput>\n )\n }\n)\n","import { InputText } from './input-text'\nimport type { InputTextProps } from './input-text'\n\nexport type InputProps = InputTextProps\nexport const Input = InputText\n","import React, { useState, useRef } from 'react'\nimport type { ElementRef, HTMLProps } from 'react'\nimport { BaseInput } from '@mirohq/design-system-base-input'\nimport { IconButton } from '@mirohq/design-system-icon-button'\nimport { IconEyeOpen, IconEyeOpenSlash } from '@mirohq/design-system-icons'\nimport { mergeRefs } from '@mirohq/design-system-utils'\n\nimport { StyledBaseInput } from './base-input.styled'\nimport type { StyledBaseInputProps } from './base-input.styled'\n\ntype Value = HTMLProps<'input'>['value']\n\nexport interface InputPasswordProps extends Omit<StyledBaseInputProps, 'type'> {\n /**\n * A boolean for the default password state (visible or masked).\n */\n defaultReveal?: boolean\n\n /**\n * Indicates whether the password should be revealed (visible) or hidden (masked).\n */\n reveal?: boolean\n\n /**\n * Callback function to be called when the password is revealed.\n */\n onReveal?: (value: Value) => void\n\n /**\n * Callback function to be called when the password is hidden (masked).\n */\n onHide?: (value: Value) => void\n\n /**\n * Tooltip label text for the action to reveal the password.\n */\n revealLabel: string\n\n /**\n * Tooltip label text for the action to hide (mask) the password.\n */\n hideLabel: string\n}\n\nexport const InputPassword = React.forwardRef<\n ElementRef<'input'>,\n InputPasswordProps\n>(\n (\n {\n value,\n reveal,\n defaultReveal,\n onReveal,\n onHide,\n hideLabel,\n revealLabel,\n css,\n ...restProps\n },\n forwardRef\n ) => {\n const inputRef = useRef<HTMLInputElement>(null)\n const [revealState, setRevealState] = useState(defaultReveal ?? false)\n const revealInternal = reveal ?? revealState\n\n return (\n <StyledBaseInput\n {...restProps}\n type={revealInternal ? 'text' : 'password'}\n value={value}\n ref={mergeRefs([inputRef, forwardRef])}\n css={{\n ...(css ?? {}),\n paddingInlineEnd: '$500',\n }}\n >\n <BaseInput.InputSlot>\n <IconButton\n size='medium'\n onPress={() => {\n const valueInternal = value ?? inputRef.current?.value\n\n if (revealInternal) {\n onHide?.(valueInternal)\n } else {\n onReveal?.(valueInternal)\n }\n\n if (value === undefined) {\n setRevealState(reveal => !reveal)\n }\n }}\n label={revealInternal ? hideLabel : revealLabel}\n >\n {revealInternal ? <IconEyeOpen /> : <IconEyeOpenSlash />}\n </IconButton>\n </BaseInput.InputSlot>\n </StyledBaseInput>\n )\n }\n)\n"],"names":["reveal"],"mappings":"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"}