@dxos/react-input 0.1.41
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/LICENSE +8 -0
- package/README.md +1 -0
- package/dist/lib/browser/index.mjs +239 -0
- package/dist/lib/browser/index.mjs.map +7 -0
- package/dist/lib/browser/meta.json +1 -0
- package/dist/lib/node/index.cjs +288 -0
- package/dist/lib/node/index.cjs.map +7 -0
- package/dist/lib/node/meta.json +1 -0
- package/dist/types/src/InputMeta.d.ts +25 -0
- package/dist/types/src/InputMeta.d.ts.map +1 -0
- package/dist/types/src/PinInput.d.ts +16 -0
- package/dist/types/src/PinInput.d.ts.map +1 -0
- package/dist/types/src/Root.d.ts +28 -0
- package/dist/types/src/Root.d.ts.map +1 -0
- package/dist/types/src/TextArea.d.ts +6 -0
- package/dist/types/src/TextArea.d.ts.map +1 -0
- package/dist/types/src/TextInput.d.ts +7 -0
- package/dist/types/src/TextInput.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +6 -0
- package/dist/types/src/index.d.ts.map +1 -0
- package/package.json +41 -0
- package/src/InputMeta.tsx +88 -0
- package/src/PinInput.tsx +80 -0
- package/src/Root.tsx +56 -0
- package/src/TextArea.tsx +33 -0
- package/src/TextInput.tsx +34 -0
- package/src/index.ts +10 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
Copyright (c) 2022 DXOS
|
|
3
|
+
|
|
4
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
5
|
+
|
|
6
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
7
|
+
|
|
8
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# DXOS `react-list` primitive
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
// packages/ui/primitives/react-input/src/InputMeta.tsx
|
|
2
|
+
import { Primitive } from "@radix-ui/react-primitive";
|
|
3
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
4
|
+
import React2, { forwardRef } from "react";
|
|
5
|
+
|
|
6
|
+
// packages/ui/primitives/react-input/src/Root.tsx
|
|
7
|
+
import { createContextScope } from "@radix-ui/react-context";
|
|
8
|
+
import React from "react";
|
|
9
|
+
import { useId } from "@dxos/react-hooks";
|
|
10
|
+
function _extends() {
|
|
11
|
+
_extends = Object.assign || function(target) {
|
|
12
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
13
|
+
var source = arguments[i];
|
|
14
|
+
for (var key in source) {
|
|
15
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
16
|
+
target[key] = source[key];
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return target;
|
|
21
|
+
};
|
|
22
|
+
return _extends.apply(this, arguments);
|
|
23
|
+
}
|
|
24
|
+
var INPUT_NAME = "Input";
|
|
25
|
+
var [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);
|
|
26
|
+
var [InputProvider, useInputContext] = createInputContext(INPUT_NAME);
|
|
27
|
+
var InputRoot = ({ __inputScope, id: propsId, descriptionId: propsDescriptionId, errorMessageId: propsErrorMessageId, validationValence = "neutral", children }) => {
|
|
28
|
+
const id = useId("input", propsId);
|
|
29
|
+
const descriptionId = useId("input__description", propsDescriptionId);
|
|
30
|
+
const errorMessageId = useId("input__error-message", propsErrorMessageId);
|
|
31
|
+
return /* @__PURE__ */ React.createElement(InputProvider, _extends({}, {
|
|
32
|
+
id,
|
|
33
|
+
descriptionId,
|
|
34
|
+
errorMessageId,
|
|
35
|
+
validationValence
|
|
36
|
+
}, {
|
|
37
|
+
scope: __inputScope
|
|
38
|
+
}), children);
|
|
39
|
+
};
|
|
40
|
+
InputRoot.displayName = INPUT_NAME;
|
|
41
|
+
|
|
42
|
+
// packages/ui/primitives/react-input/src/InputMeta.tsx
|
|
43
|
+
function _extends2() {
|
|
44
|
+
_extends2 = Object.assign || function(target) {
|
|
45
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
46
|
+
var source = arguments[i];
|
|
47
|
+
for (var key in source) {
|
|
48
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
49
|
+
target[key] = source[key];
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
return target;
|
|
54
|
+
};
|
|
55
|
+
return _extends2.apply(this, arguments);
|
|
56
|
+
}
|
|
57
|
+
var Label = /* @__PURE__ */ forwardRef(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
|
|
58
|
+
const { id } = useInputContext(INPUT_NAME, __inputScope);
|
|
59
|
+
const Root = asChild ? Slot : Primitive.label;
|
|
60
|
+
return /* @__PURE__ */ React2.createElement(Root, _extends2({}, props, {
|
|
61
|
+
htmlFor: id,
|
|
62
|
+
ref: forwardedRef
|
|
63
|
+
}), children);
|
|
64
|
+
});
|
|
65
|
+
var Description = /* @__PURE__ */ forwardRef(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
|
|
66
|
+
const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
|
|
67
|
+
const Root = asChild ? Slot : Primitive.span;
|
|
68
|
+
return /* @__PURE__ */ React2.createElement(Root, _extends2({}, props, validationValence === "error" && {
|
|
69
|
+
id: descriptionId
|
|
70
|
+
}, {
|
|
71
|
+
ref: forwardedRef
|
|
72
|
+
}), children);
|
|
73
|
+
});
|
|
74
|
+
var ErrorMessage = /* @__PURE__ */ forwardRef(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
|
|
75
|
+
const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
|
|
76
|
+
const Root = asChild ? Slot : Primitive.span;
|
|
77
|
+
return /* @__PURE__ */ React2.createElement(Root, _extends2({}, props, {
|
|
78
|
+
id: errorMessageId,
|
|
79
|
+
ref: forwardedRef
|
|
80
|
+
}), children);
|
|
81
|
+
});
|
|
82
|
+
var Validation = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
|
|
83
|
+
const { __inputScope, asChild, children, ...otherProps } = props;
|
|
84
|
+
const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
|
|
85
|
+
if (validationValence === "error") {
|
|
86
|
+
return /* @__PURE__ */ React2.createElement(ErrorMessage, _extends2({}, props, {
|
|
87
|
+
ref: forwardedRef
|
|
88
|
+
}));
|
|
89
|
+
} else {
|
|
90
|
+
const Root = asChild ? Slot : Primitive.span;
|
|
91
|
+
return /* @__PURE__ */ React2.createElement(Root, _extends2({}, otherProps, {
|
|
92
|
+
ref: forwardedRef
|
|
93
|
+
}), children);
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
var DescriptionAndValidation = /* @__PURE__ */ forwardRef(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
|
|
97
|
+
const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
|
|
98
|
+
const Root = asChild ? Slot : Primitive.p;
|
|
99
|
+
return /* @__PURE__ */ React2.createElement(Root, _extends2({}, props, validationValence !== "error" && {
|
|
100
|
+
id: descriptionId
|
|
101
|
+
}, {
|
|
102
|
+
ref: forwardedRef
|
|
103
|
+
}), children);
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
// packages/ui/primitives/react-input/src/PinInput.tsx
|
|
107
|
+
import { CodeInput, getSegmentCssWidth } from "rci";
|
|
108
|
+
import React3, { forwardRef as forwardRef2, useCallback } from "react";
|
|
109
|
+
import { useForwardedRef, useIsFocused } from "@dxos/react-hooks";
|
|
110
|
+
function _extends3() {
|
|
111
|
+
_extends3 = Object.assign || function(target) {
|
|
112
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
113
|
+
var source = arguments[i];
|
|
114
|
+
for (var key in source) {
|
|
115
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
116
|
+
target[key] = source[key];
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
return target;
|
|
121
|
+
};
|
|
122
|
+
return _extends3.apply(this, arguments);
|
|
123
|
+
}
|
|
124
|
+
var PinInput = /* @__PURE__ */ forwardRef2(({ __inputScope, segmentClassName, inputClassName, segmentPadding = "13px", segmentHeight = "100%", ...props }, forwardedRef) => {
|
|
125
|
+
const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
|
|
126
|
+
const width = getSegmentCssWidth(segmentPadding);
|
|
127
|
+
const inputRef = useForwardedRef(forwardedRef);
|
|
128
|
+
const inputFocused = useIsFocused(inputRef);
|
|
129
|
+
const renderSegment = useCallback(({ state, index }) => /* @__PURE__ */ React3.createElement("div", {
|
|
130
|
+
key: index,
|
|
131
|
+
className: segmentClassName == null ? void 0 : segmentClassName({
|
|
132
|
+
focused: !!(inputFocused && state),
|
|
133
|
+
validationValence
|
|
134
|
+
}),
|
|
135
|
+
"data-state": state,
|
|
136
|
+
style: {
|
|
137
|
+
width,
|
|
138
|
+
height: segmentHeight
|
|
139
|
+
}
|
|
140
|
+
}), [
|
|
141
|
+
segmentClassName,
|
|
142
|
+
inputFocused,
|
|
143
|
+
validationValence
|
|
144
|
+
]);
|
|
145
|
+
return /* @__PURE__ */ React3.createElement(CodeInput, _extends3({}, {
|
|
146
|
+
padding: "8px",
|
|
147
|
+
spacing: "8px",
|
|
148
|
+
fontFamily: "",
|
|
149
|
+
spellCheck: false,
|
|
150
|
+
length: 6,
|
|
151
|
+
...props,
|
|
152
|
+
id,
|
|
153
|
+
"aria-describedby": descriptionId,
|
|
154
|
+
...validationValence === "error" && {
|
|
155
|
+
"aria-invalid": "true",
|
|
156
|
+
"aria-errormessage": errorMessageId
|
|
157
|
+
},
|
|
158
|
+
inputRef,
|
|
159
|
+
renderSegment,
|
|
160
|
+
className: inputClassName
|
|
161
|
+
}));
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
// packages/ui/primitives/react-input/src/TextInput.tsx
|
|
165
|
+
import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
|
|
166
|
+
import React4, { forwardRef as forwardRef3 } from "react";
|
|
167
|
+
function _extends4() {
|
|
168
|
+
_extends4 = Object.assign || function(target) {
|
|
169
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
170
|
+
var source = arguments[i];
|
|
171
|
+
for (var key in source) {
|
|
172
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
173
|
+
target[key] = source[key];
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
return target;
|
|
178
|
+
};
|
|
179
|
+
return _extends4.apply(this, arguments);
|
|
180
|
+
}
|
|
181
|
+
var TextInput = /* @__PURE__ */ forwardRef3(({ __inputScope, ...props }, forwardedRef) => {
|
|
182
|
+
const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
|
|
183
|
+
return /* @__PURE__ */ React4.createElement(Primitive2.input, _extends4({}, {
|
|
184
|
+
...props,
|
|
185
|
+
id,
|
|
186
|
+
"aria-describedby": descriptionId,
|
|
187
|
+
...validationValence === "error" && {
|
|
188
|
+
"aria-invalid": "true",
|
|
189
|
+
"aria-errormessage": errorMessageId
|
|
190
|
+
},
|
|
191
|
+
ref: forwardedRef
|
|
192
|
+
}));
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
// packages/ui/primitives/react-input/src/TextArea.tsx
|
|
196
|
+
import React5, { forwardRef as forwardRef4 } from "react";
|
|
197
|
+
function _extends5() {
|
|
198
|
+
_extends5 = Object.assign || function(target) {
|
|
199
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
200
|
+
var source = arguments[i];
|
|
201
|
+
for (var key in source) {
|
|
202
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
203
|
+
target[key] = source[key];
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
return target;
|
|
208
|
+
};
|
|
209
|
+
return _extends5.apply(this, arguments);
|
|
210
|
+
}
|
|
211
|
+
var TextArea = /* @__PURE__ */ forwardRef4(({ __inputScope, ...props }, forwardedRef) => {
|
|
212
|
+
const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
|
|
213
|
+
return /* @__PURE__ */ React5.createElement("textarea", _extends5({}, {
|
|
214
|
+
...props,
|
|
215
|
+
id,
|
|
216
|
+
"aria-describedby": descriptionId,
|
|
217
|
+
...validationValence === "error" && {
|
|
218
|
+
"aria-invalid": "true",
|
|
219
|
+
"aria-errormessage": errorMessageId
|
|
220
|
+
},
|
|
221
|
+
ref: forwardedRef
|
|
222
|
+
}));
|
|
223
|
+
});
|
|
224
|
+
export {
|
|
225
|
+
Description,
|
|
226
|
+
DescriptionAndValidation,
|
|
227
|
+
ErrorMessage,
|
|
228
|
+
INPUT_NAME,
|
|
229
|
+
InputRoot,
|
|
230
|
+
Label,
|
|
231
|
+
PinInput,
|
|
232
|
+
InputRoot as Root,
|
|
233
|
+
TextArea,
|
|
234
|
+
TextInput,
|
|
235
|
+
Validation,
|
|
236
|
+
createInputScope,
|
|
237
|
+
useInputContext
|
|
238
|
+
};
|
|
239
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/InputMeta.tsx", "../../../src/Root.tsx", "../../../src/PinInput.tsx", "../../../src/TextInput.tsx", "../../../src/TextArea.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, InputScopedProps, useInputContext } from './Root';\n\ntype LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: boolean };\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {\n const { id } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.label;\n return (\n <Root {...props} htmlFor={id} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Description = forwardRef<HTMLSpanElement, DescriptionProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {\n const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...props} id={errorMessageId} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Validation = forwardRef<HTMLSpanElement, ValidationProps>(\n (props: InputScopedProps<ValidationProps>, forwardedRef) => {\n const { __inputScope, asChild, children, ...otherProps } = props;\n const { validationValence } = useInputContext(INPUT_NAME, __inputScope);\n if (validationValence === 'error') {\n return <ErrorMessage {...props} ref={forwardedRef} />;\n } else {\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...otherProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n }\n },\n);\n\ntype DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & { asChild?: boolean };\n\nconst DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.p;\n return (\n <Root {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nexport { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };\n\nexport type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { createContextScope, Scope } from '@radix-ui/react-context';\nimport React, { PropsWithChildren } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nconst INPUT_NAME = 'Input';\n\ntype Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\ntype InputScopedProps<P> = P & { __inputScope?: Scope };\n\ntype InputRootProps = PropsWithChildren<{\n id?: string;\n validationValence?: Valence;\n descriptionId?: string;\n errorMessageId?: string;\n}>;\n\nconst [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\ntype InputContextValue = {\n id: string;\n descriptionId: string;\n errorMessageId: string;\n validationValence: Valence;\n};\n\nconst [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\n\nconst InputRoot = ({\n __inputScope,\n id: propsId,\n descriptionId: propsDescriptionId,\n errorMessageId: propsErrorMessageId,\n validationValence = 'neutral',\n children,\n}: InputScopedProps<InputRootProps>) => {\n const id = useId('input', propsId);\n const descriptionId = useId('input__description', propsDescriptionId);\n const errorMessageId = useId('input__error-message', propsErrorMessageId);\n return (\n <InputProvider {...{ id, descriptionId, errorMessageId, validationValence }} scope={__inputScope}>\n {children}\n </InputProvider>\n );\n};\n\nInputRoot.displayName = INPUT_NAME;\n\nexport { InputRoot, InputRoot as Root, createInputScope, useInputContext, INPUT_NAME };\n\nexport type { Valence, InputRootProps, InputScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { CodeInput, getSegmentCssWidth } from 'rci';\nimport React, { ComponentProps, ComponentPropsWithRef, forwardRef, useCallback } from 'react';\n\nimport { useForwardedRef, useIsFocused } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, InputScopedProps, useInputContext, Valence } from './Root';\n\ntype PinInputProps = Omit<\n ComponentPropsWithRef<typeof CodeInput>,\n 'id' | 'className' | 'inputRef' | 'renderSegment'\n> & {\n inputClassName?: string;\n segmentClassName?: (styleProps: { focused: boolean; validationValence: Valence }) => string;\n segmentPadding?: string;\n segmentHeight?: string;\n};\n\nconst PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n (\n {\n __inputScope,\n segmentClassName,\n inputClassName,\n segmentPadding = '13px',\n segmentHeight = '100%',\n ...props\n }: InputScopedProps<PinInputProps>,\n forwardedRef,\n ) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const width = getSegmentCssWidth(segmentPadding);\n const inputRef = useForwardedRef(forwardedRef);\n const inputFocused = useIsFocused(inputRef);\n\n const renderSegment = useCallback<ComponentProps<typeof CodeInput>['renderSegment']>(\n ({ state, index }) => (\n <div\n key={index}\n className={segmentClassName?.({\n focused: !!(inputFocused && state),\n validationValence,\n })}\n data-state={state}\n style={{ width, height: segmentHeight }}\n />\n ),\n [segmentClassName, inputFocused, validationValence],\n );\n\n return (\n <CodeInput\n {...{\n padding: '8px',\n spacing: '8px',\n fontFamily: '',\n spellCheck: false,\n length: 6,\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n inputRef,\n renderSegment,\n className: inputClassName,\n }}\n />\n );\n },\n);\n\nexport { PinInput };\n\nexport type { PinInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, InputScopedProps, useInputContext } from './Root';\n\ntype TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;\n\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextInputProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <Primitive.input\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextInput };\n\nexport type { TextInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, InputScopedProps, useInputContext } from './Root';\n\ntype TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextAreaProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <textarea\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextArea };\n\nexport type { TextAreaProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Primitive", "Slot", "React", "forwardRef", "createContextScope", "React", "useId", "INPUT_NAME", "createInputContext", "createInputScope", "InputProvider", "useInputContext", "InputRoot", "__inputScope", "id", "propsId", "descriptionId", "propsDescriptionId", "errorMessageId", "propsErrorMessageId", "validationValence", "children", "scope", "displayName", "_extends", "Label", "forwardRef", "__inputScope", "asChild", "children", "props", "forwardedRef", "id", "useInputContext", "INPUT_NAME", "Root", "Slot", "Primitive", "label", "React", "htmlFor", "ref", "Description", "descriptionId", "validationValence", "span", "ErrorMessage", "errorMessageId", "Validation", "otherProps", "DescriptionAndValidation", "p", "CodeInput", "getSegmentCssWidth", "React", "forwardRef", "useCallback", "useForwardedRef", "useIsFocused", "_extends", "PinInput", "forwardRef", "__inputScope", "segmentClassName", "inputClassName", "segmentPadding", "segmentHeight", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "width", "getSegmentCssWidth", "inputRef", "useForwardedRef", "inputFocused", "useIsFocused", "renderSegment", "useCallback", "state", "index", "React", "div", "key", "className", "focused", "data-state", "style", "height", "CodeInput", "padding", "spacing", "fontFamily", "spellCheck", "length", "Primitive", "React", "forwardRef", "_extends", "TextInput", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "Primitive", "input", "ref", "React", "forwardRef", "_extends", "TextArea", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "textarea", "ref"]
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"inputs":{"packages/ui/primitives/react-input/src/Root.tsx":{"bytes":5081,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}]},"packages/ui/primitives/react-input/src/InputMeta.tsx":{"bytes":10383,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}]},"packages/ui/primitives/react-input/src/PinInput.tsx":{"bytes":7374,"imports":[{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}]},"packages/ui/primitives/react-input/src/TextInput.tsx":{"bytes":3583,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}]},"packages/ui/primitives/react-input/src/TextArea.tsx":{"bytes":3349,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}]},"packages/ui/primitives/react-input/src/index.ts":{"bytes":726,"imports":[{"path":"packages/ui/primitives/react-input/src/InputMeta.tsx","kind":"import-statement","original":"./InputMeta"},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"},{"path":"packages/ui/primitives/react-input/src/PinInput.tsx","kind":"import-statement","original":"./PinInput"},{"path":"packages/ui/primitives/react-input/src/TextInput.tsx","kind":"import-statement","original":"./TextInput"},{"path":"packages/ui/primitives/react-input/src/TextArea.tsx","kind":"import-statement","original":"./TextArea"}]}},"outputs":{"packages/ui/primitives/react-input/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15265},"packages/ui/primitives/react-input/dist/lib/browser/index.mjs":{"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["Description","DescriptionAndValidation","ErrorMessage","INPUT_NAME","InputRoot","Label","PinInput","Root","TextArea","TextInput","Validation","createInputScope","useInputContext"],"entryPoint":"packages/ui/primitives/react-input/src/index.ts","inputs":{"packages/ui/primitives/react-input/src/InputMeta.tsx":{"bytesInOutput":2686},"packages/ui/primitives/react-input/src/Root.tsx":{"bytesInOutput":1274},"packages/ui/primitives/react-input/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-input/src/PinInput.tsx":{"bytesInOutput":1859},"packages/ui/primitives/react-input/src/TextInput.tsx":{"bytesInOutput":1007},"packages/ui/primitives/react-input/src/TextArea.tsx":{"bytesInOutput":931}},"bytes":8343}}}
|
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// packages/ui/primitives/react-input/src/index.ts
|
|
31
|
+
var src_exports = {};
|
|
32
|
+
__export(src_exports, {
|
|
33
|
+
Description: () => Description,
|
|
34
|
+
DescriptionAndValidation: () => DescriptionAndValidation,
|
|
35
|
+
ErrorMessage: () => ErrorMessage,
|
|
36
|
+
INPUT_NAME: () => INPUT_NAME,
|
|
37
|
+
InputRoot: () => InputRoot,
|
|
38
|
+
Label: () => Label,
|
|
39
|
+
PinInput: () => PinInput,
|
|
40
|
+
Root: () => InputRoot,
|
|
41
|
+
TextArea: () => TextArea,
|
|
42
|
+
TextInput: () => TextInput,
|
|
43
|
+
Validation: () => Validation,
|
|
44
|
+
createInputScope: () => createInputScope,
|
|
45
|
+
useInputContext: () => useInputContext
|
|
46
|
+
});
|
|
47
|
+
module.exports = __toCommonJS(src_exports);
|
|
48
|
+
|
|
49
|
+
// packages/ui/primitives/react-input/src/InputMeta.tsx
|
|
50
|
+
var import_react_primitive = require("@radix-ui/react-primitive");
|
|
51
|
+
var import_react_slot = require("@radix-ui/react-slot");
|
|
52
|
+
var import_react2 = __toESM(require("react"));
|
|
53
|
+
|
|
54
|
+
// packages/ui/primitives/react-input/src/Root.tsx
|
|
55
|
+
var import_react_context = require("@radix-ui/react-context");
|
|
56
|
+
var import_react = __toESM(require("react"));
|
|
57
|
+
var import_react_hooks = require("@dxos/react-hooks");
|
|
58
|
+
function _extends() {
|
|
59
|
+
_extends = Object.assign || function(target) {
|
|
60
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
61
|
+
var source = arguments[i];
|
|
62
|
+
for (var key in source) {
|
|
63
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
64
|
+
target[key] = source[key];
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
return target;
|
|
69
|
+
};
|
|
70
|
+
return _extends.apply(this, arguments);
|
|
71
|
+
}
|
|
72
|
+
var INPUT_NAME = "Input";
|
|
73
|
+
var [createInputContext, createInputScope] = (0, import_react_context.createContextScope)(INPUT_NAME, []);
|
|
74
|
+
var [InputProvider, useInputContext] = createInputContext(INPUT_NAME);
|
|
75
|
+
var InputRoot = ({ __inputScope, id: propsId, descriptionId: propsDescriptionId, errorMessageId: propsErrorMessageId, validationValence = "neutral", children }) => {
|
|
76
|
+
const id = (0, import_react_hooks.useId)("input", propsId);
|
|
77
|
+
const descriptionId = (0, import_react_hooks.useId)("input__description", propsDescriptionId);
|
|
78
|
+
const errorMessageId = (0, import_react_hooks.useId)("input__error-message", propsErrorMessageId);
|
|
79
|
+
return /* @__PURE__ */ import_react.default.createElement(InputProvider, _extends({}, {
|
|
80
|
+
id,
|
|
81
|
+
descriptionId,
|
|
82
|
+
errorMessageId,
|
|
83
|
+
validationValence
|
|
84
|
+
}, {
|
|
85
|
+
scope: __inputScope
|
|
86
|
+
}), children);
|
|
87
|
+
};
|
|
88
|
+
InputRoot.displayName = INPUT_NAME;
|
|
89
|
+
|
|
90
|
+
// packages/ui/primitives/react-input/src/InputMeta.tsx
|
|
91
|
+
function _extends2() {
|
|
92
|
+
_extends2 = Object.assign || function(target) {
|
|
93
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
94
|
+
var source = arguments[i];
|
|
95
|
+
for (var key in source) {
|
|
96
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
97
|
+
target[key] = source[key];
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
return target;
|
|
102
|
+
};
|
|
103
|
+
return _extends2.apply(this, arguments);
|
|
104
|
+
}
|
|
105
|
+
var Label = /* @__PURE__ */ (0, import_react2.forwardRef)(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
|
|
106
|
+
const { id } = useInputContext(INPUT_NAME, __inputScope);
|
|
107
|
+
const Root = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.label;
|
|
108
|
+
return /* @__PURE__ */ import_react2.default.createElement(Root, _extends2({}, props, {
|
|
109
|
+
htmlFor: id,
|
|
110
|
+
ref: forwardedRef
|
|
111
|
+
}), children);
|
|
112
|
+
});
|
|
113
|
+
var Description = /* @__PURE__ */ (0, import_react2.forwardRef)(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
|
|
114
|
+
const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
|
|
115
|
+
const Root = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.span;
|
|
116
|
+
return /* @__PURE__ */ import_react2.default.createElement(Root, _extends2({}, props, validationValence === "error" && {
|
|
117
|
+
id: descriptionId
|
|
118
|
+
}, {
|
|
119
|
+
ref: forwardedRef
|
|
120
|
+
}), children);
|
|
121
|
+
});
|
|
122
|
+
var ErrorMessage = /* @__PURE__ */ (0, import_react2.forwardRef)(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
|
|
123
|
+
const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
|
|
124
|
+
const Root = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.span;
|
|
125
|
+
return /* @__PURE__ */ import_react2.default.createElement(Root, _extends2({}, props, {
|
|
126
|
+
id: errorMessageId,
|
|
127
|
+
ref: forwardedRef
|
|
128
|
+
}), children);
|
|
129
|
+
});
|
|
130
|
+
var Validation = /* @__PURE__ */ (0, import_react2.forwardRef)((props, forwardedRef) => {
|
|
131
|
+
const { __inputScope, asChild, children, ...otherProps } = props;
|
|
132
|
+
const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
|
|
133
|
+
if (validationValence === "error") {
|
|
134
|
+
return /* @__PURE__ */ import_react2.default.createElement(ErrorMessage, _extends2({}, props, {
|
|
135
|
+
ref: forwardedRef
|
|
136
|
+
}));
|
|
137
|
+
} else {
|
|
138
|
+
const Root = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.span;
|
|
139
|
+
return /* @__PURE__ */ import_react2.default.createElement(Root, _extends2({}, otherProps, {
|
|
140
|
+
ref: forwardedRef
|
|
141
|
+
}), children);
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
var DescriptionAndValidation = /* @__PURE__ */ (0, import_react2.forwardRef)(({ __inputScope, asChild, children, ...props }, forwardedRef) => {
|
|
145
|
+
const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
|
|
146
|
+
const Root = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.p;
|
|
147
|
+
return /* @__PURE__ */ import_react2.default.createElement(Root, _extends2({}, props, validationValence !== "error" && {
|
|
148
|
+
id: descriptionId
|
|
149
|
+
}, {
|
|
150
|
+
ref: forwardedRef
|
|
151
|
+
}), children);
|
|
152
|
+
});
|
|
153
|
+
|
|
154
|
+
// packages/ui/primitives/react-input/src/PinInput.tsx
|
|
155
|
+
var import_rci = require("rci");
|
|
156
|
+
var import_react3 = __toESM(require("react"));
|
|
157
|
+
var import_react_hooks2 = require("@dxos/react-hooks");
|
|
158
|
+
function _extends3() {
|
|
159
|
+
_extends3 = Object.assign || function(target) {
|
|
160
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
161
|
+
var source = arguments[i];
|
|
162
|
+
for (var key in source) {
|
|
163
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
164
|
+
target[key] = source[key];
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
return target;
|
|
169
|
+
};
|
|
170
|
+
return _extends3.apply(this, arguments);
|
|
171
|
+
}
|
|
172
|
+
var PinInput = /* @__PURE__ */ (0, import_react3.forwardRef)(({ __inputScope, segmentClassName, inputClassName, segmentPadding = "13px", segmentHeight = "100%", ...props }, forwardedRef) => {
|
|
173
|
+
const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
|
|
174
|
+
const width = (0, import_rci.getSegmentCssWidth)(segmentPadding);
|
|
175
|
+
const inputRef = (0, import_react_hooks2.useForwardedRef)(forwardedRef);
|
|
176
|
+
const inputFocused = (0, import_react_hooks2.useIsFocused)(inputRef);
|
|
177
|
+
const renderSegment = (0, import_react3.useCallback)(({ state, index }) => /* @__PURE__ */ import_react3.default.createElement("div", {
|
|
178
|
+
key: index,
|
|
179
|
+
className: segmentClassName == null ? void 0 : segmentClassName({
|
|
180
|
+
focused: !!(inputFocused && state),
|
|
181
|
+
validationValence
|
|
182
|
+
}),
|
|
183
|
+
"data-state": state,
|
|
184
|
+
style: {
|
|
185
|
+
width,
|
|
186
|
+
height: segmentHeight
|
|
187
|
+
}
|
|
188
|
+
}), [
|
|
189
|
+
segmentClassName,
|
|
190
|
+
inputFocused,
|
|
191
|
+
validationValence
|
|
192
|
+
]);
|
|
193
|
+
return /* @__PURE__ */ import_react3.default.createElement(import_rci.CodeInput, _extends3({}, {
|
|
194
|
+
padding: "8px",
|
|
195
|
+
spacing: "8px",
|
|
196
|
+
fontFamily: "",
|
|
197
|
+
spellCheck: false,
|
|
198
|
+
length: 6,
|
|
199
|
+
...props,
|
|
200
|
+
id,
|
|
201
|
+
"aria-describedby": descriptionId,
|
|
202
|
+
...validationValence === "error" && {
|
|
203
|
+
"aria-invalid": "true",
|
|
204
|
+
"aria-errormessage": errorMessageId
|
|
205
|
+
},
|
|
206
|
+
inputRef,
|
|
207
|
+
renderSegment,
|
|
208
|
+
className: inputClassName
|
|
209
|
+
}));
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
// packages/ui/primitives/react-input/src/TextInput.tsx
|
|
213
|
+
var import_react_primitive2 = require("@radix-ui/react-primitive");
|
|
214
|
+
var import_react4 = __toESM(require("react"));
|
|
215
|
+
function _extends4() {
|
|
216
|
+
_extends4 = Object.assign || function(target) {
|
|
217
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
218
|
+
var source = arguments[i];
|
|
219
|
+
for (var key in source) {
|
|
220
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
221
|
+
target[key] = source[key];
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
return target;
|
|
226
|
+
};
|
|
227
|
+
return _extends4.apply(this, arguments);
|
|
228
|
+
}
|
|
229
|
+
var TextInput = /* @__PURE__ */ (0, import_react4.forwardRef)(({ __inputScope, ...props }, forwardedRef) => {
|
|
230
|
+
const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
|
|
231
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_react_primitive2.Primitive.input, _extends4({}, {
|
|
232
|
+
...props,
|
|
233
|
+
id,
|
|
234
|
+
"aria-describedby": descriptionId,
|
|
235
|
+
...validationValence === "error" && {
|
|
236
|
+
"aria-invalid": "true",
|
|
237
|
+
"aria-errormessage": errorMessageId
|
|
238
|
+
},
|
|
239
|
+
ref: forwardedRef
|
|
240
|
+
}));
|
|
241
|
+
});
|
|
242
|
+
|
|
243
|
+
// packages/ui/primitives/react-input/src/TextArea.tsx
|
|
244
|
+
var import_react5 = __toESM(require("react"));
|
|
245
|
+
function _extends5() {
|
|
246
|
+
_extends5 = Object.assign || function(target) {
|
|
247
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
248
|
+
var source = arguments[i];
|
|
249
|
+
for (var key in source) {
|
|
250
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
251
|
+
target[key] = source[key];
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
return target;
|
|
256
|
+
};
|
|
257
|
+
return _extends5.apply(this, arguments);
|
|
258
|
+
}
|
|
259
|
+
var TextArea = /* @__PURE__ */ (0, import_react5.forwardRef)(({ __inputScope, ...props }, forwardedRef) => {
|
|
260
|
+
const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
|
|
261
|
+
return /* @__PURE__ */ import_react5.default.createElement("textarea", _extends5({}, {
|
|
262
|
+
...props,
|
|
263
|
+
id,
|
|
264
|
+
"aria-describedby": descriptionId,
|
|
265
|
+
...validationValence === "error" && {
|
|
266
|
+
"aria-invalid": "true",
|
|
267
|
+
"aria-errormessage": errorMessageId
|
|
268
|
+
},
|
|
269
|
+
ref: forwardedRef
|
|
270
|
+
}));
|
|
271
|
+
});
|
|
272
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
273
|
+
0 && (module.exports = {
|
|
274
|
+
Description,
|
|
275
|
+
DescriptionAndValidation,
|
|
276
|
+
ErrorMessage,
|
|
277
|
+
INPUT_NAME,
|
|
278
|
+
InputRoot,
|
|
279
|
+
Label,
|
|
280
|
+
PinInput,
|
|
281
|
+
Root,
|
|
282
|
+
TextArea,
|
|
283
|
+
TextInput,
|
|
284
|
+
Validation,
|
|
285
|
+
createInputScope,
|
|
286
|
+
useInputContext
|
|
287
|
+
});
|
|
288
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/index.ts", "../../../src/InputMeta.tsx", "../../../src/Root.tsx", "../../../src/PinInput.tsx", "../../../src/TextInput.tsx", "../../../src/TextArea.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from './InputMeta';\nexport * from './Root';\n\nexport * from './PinInput';\nexport * from './TextInput';\nexport * from './TextArea';\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, InputScopedProps, useInputContext } from './Root';\n\ntype LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: boolean };\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {\n const { id } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.label;\n return (\n <Root {...props} htmlFor={id} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Description = forwardRef<HTMLSpanElement, DescriptionProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {\n const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...props} id={errorMessageId} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Validation = forwardRef<HTMLSpanElement, ValidationProps>(\n (props: InputScopedProps<ValidationProps>, forwardedRef) => {\n const { __inputScope, asChild, children, ...otherProps } = props;\n const { validationValence } = useInputContext(INPUT_NAME, __inputScope);\n if (validationValence === 'error') {\n return <ErrorMessage {...props} ref={forwardedRef} />;\n } else {\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...otherProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n }\n },\n);\n\ntype DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & { asChild?: boolean };\n\nconst DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.p;\n return (\n <Root {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nexport { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };\n\nexport type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { createContextScope, Scope } from '@radix-ui/react-context';\nimport React, { PropsWithChildren } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nconst INPUT_NAME = 'Input';\n\ntype Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\ntype InputScopedProps<P> = P & { __inputScope?: Scope };\n\ntype InputRootProps = PropsWithChildren<{\n id?: string;\n validationValence?: Valence;\n descriptionId?: string;\n errorMessageId?: string;\n}>;\n\nconst [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\ntype InputContextValue = {\n id: string;\n descriptionId: string;\n errorMessageId: string;\n validationValence: Valence;\n};\n\nconst [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\n\nconst InputRoot = ({\n __inputScope,\n id: propsId,\n descriptionId: propsDescriptionId,\n errorMessageId: propsErrorMessageId,\n validationValence = 'neutral',\n children,\n}: InputScopedProps<InputRootProps>) => {\n const id = useId('input', propsId);\n const descriptionId = useId('input__description', propsDescriptionId);\n const errorMessageId = useId('input__error-message', propsErrorMessageId);\n return (\n <InputProvider {...{ id, descriptionId, errorMessageId, validationValence }} scope={__inputScope}>\n {children}\n </InputProvider>\n );\n};\n\nInputRoot.displayName = INPUT_NAME;\n\nexport { InputRoot, InputRoot as Root, createInputScope, useInputContext, INPUT_NAME };\n\nexport type { Valence, InputRootProps, InputScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { CodeInput, getSegmentCssWidth } from 'rci';\nimport React, { ComponentProps, ComponentPropsWithRef, forwardRef, useCallback } from 'react';\n\nimport { useForwardedRef, useIsFocused } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, InputScopedProps, useInputContext, Valence } from './Root';\n\ntype PinInputProps = Omit<\n ComponentPropsWithRef<typeof CodeInput>,\n 'id' | 'className' | 'inputRef' | 'renderSegment'\n> & {\n inputClassName?: string;\n segmentClassName?: (styleProps: { focused: boolean; validationValence: Valence }) => string;\n segmentPadding?: string;\n segmentHeight?: string;\n};\n\nconst PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n (\n {\n __inputScope,\n segmentClassName,\n inputClassName,\n segmentPadding = '13px',\n segmentHeight = '100%',\n ...props\n }: InputScopedProps<PinInputProps>,\n forwardedRef,\n ) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const width = getSegmentCssWidth(segmentPadding);\n const inputRef = useForwardedRef(forwardedRef);\n const inputFocused = useIsFocused(inputRef);\n\n const renderSegment = useCallback<ComponentProps<typeof CodeInput>['renderSegment']>(\n ({ state, index }) => (\n <div\n key={index}\n className={segmentClassName?.({\n focused: !!(inputFocused && state),\n validationValence,\n })}\n data-state={state}\n style={{ width, height: segmentHeight }}\n />\n ),\n [segmentClassName, inputFocused, validationValence],\n );\n\n return (\n <CodeInput\n {...{\n padding: '8px',\n spacing: '8px',\n fontFamily: '',\n spellCheck: false,\n length: 6,\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n inputRef,\n renderSegment,\n className: inputClassName,\n }}\n />\n );\n },\n);\n\nexport { PinInput };\n\nexport type { PinInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, InputScopedProps, useInputContext } from './Root';\n\ntype TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;\n\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextInputProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <Primitive.input\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextInput };\n\nexport type { TextInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, InputScopedProps, useInputContext } from './Root';\n\ntype TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextAreaProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <textarea\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextArea };\n\nexport type { TextAreaProps };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_react", "INPUT_NAME", "createInputContext", "createInputScope", "createContextScope", "InputProvider", "useInputContext", "InputRoot", "__inputScope", "id", "propsId", "descriptionId", "propsDescriptionId", "errorMessageId", "propsErrorMessageId", "validationValence", "children", "useId", "React", "scope", "displayName", "_extends", "Label", "forwardRef", "__inputScope", "asChild", "children", "props", "forwardedRef", "id", "useInputContext", "INPUT_NAME", "Root", "Slot", "Primitive", "label", "React", "htmlFor", "ref", "Description", "descriptionId", "validationValence", "span", "ErrorMessage", "errorMessageId", "Validation", "otherProps", "DescriptionAndValidation", "p", "import_react", "import_react_hooks", "_extends", "PinInput", "forwardRef", "__inputScope", "segmentClassName", "inputClassName", "segmentPadding", "segmentHeight", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "width", "getSegmentCssWidth", "inputRef", "useForwardedRef", "inputFocused", "useIsFocused", "renderSegment", "useCallback", "state", "index", "React", "div", "key", "className", "focused", "data-state", "style", "height", "CodeInput", "padding", "spacing", "fontFamily", "spellCheck", "length", "import_react_primitive", "import_react", "_extends", "TextInput", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "Primitive", "input", "ref", "import_react", "_extends", "TextArea", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "textarea", "ref"]
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"inputs":{"packages/ui/primitives/react-input/src/Root.tsx":{"bytes":5081,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}]},"packages/ui/primitives/react-input/src/InputMeta.tsx":{"bytes":10383,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}]},"packages/ui/primitives/react-input/src/PinInput.tsx":{"bytes":7374,"imports":[{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}]},"packages/ui/primitives/react-input/src/TextInput.tsx":{"bytes":3583,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}]},"packages/ui/primitives/react-input/src/TextArea.tsx":{"bytes":3349,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}]},"packages/ui/primitives/react-input/src/index.ts":{"bytes":726,"imports":[{"path":"packages/ui/primitives/react-input/src/InputMeta.tsx","kind":"import-statement","original":"./InputMeta"},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"},{"path":"packages/ui/primitives/react-input/src/PinInput.tsx","kind":"import-statement","original":"./PinInput"},{"path":"packages/ui/primitives/react-input/src/TextInput.tsx","kind":"import-statement","original":"./TextInput"},{"path":"packages/ui/primitives/react-input/src/TextArea.tsx","kind":"import-statement","original":"./TextArea"}]}},"outputs":{"packages/ui/primitives/react-input/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15333},"packages/ui/primitives/react-input/dist/lib/node/index.cjs":{"imports":[{"path":"@radix-ui/react-primitive","kind":"require-call","external":true},{"path":"@radix-ui/react-slot","kind":"require-call","external":true},{"path":"react","kind":"require-call","external":true},{"path":"@radix-ui/react-context","kind":"require-call","external":true},{"path":"react","kind":"require-call","external":true},{"path":"@dxos/react-hooks","kind":"require-call","external":true},{"path":"rci","kind":"require-call","external":true},{"path":"react","kind":"require-call","external":true},{"path":"@dxos/react-hooks","kind":"require-call","external":true},{"path":"@radix-ui/react-primitive","kind":"require-call","external":true},{"path":"react","kind":"require-call","external":true},{"path":"react","kind":"require-call","external":true}],"exports":[],"entryPoint":"packages/ui/primitives/react-input/src/index.ts","inputs":{"packages/ui/primitives/react-input/src/index.ts":{"bytesInOutput":536},"packages/ui/primitives/react-input/src/InputMeta.tsx":{"bytesInOutput":3103},"packages/ui/primitives/react-input/src/Root.tsx":{"bytesInOutput":1419},"packages/ui/primitives/react-input/src/PinInput.tsx":{"bytesInOutput":1947},"packages/ui/primitives/react-input/src/TextInput.tsx":{"bytesInOutput":1050},"packages/ui/primitives/react-input/src/TextArea.tsx":{"bytesInOutput":952}},"bytes":11108}}}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Primitive } from '@radix-ui/react-primitive';
|
|
2
|
+
import React, { ComponentPropsWithRef } from 'react';
|
|
3
|
+
declare type LabelProps = ComponentPropsWithRef<typeof Primitive.label> & {
|
|
4
|
+
asChild?: boolean;
|
|
5
|
+
};
|
|
6
|
+
declare const Label: React.ForwardRefExoticComponent<Pick<LabelProps, "key" | keyof React.LabelHTMLAttributes<HTMLLabelElement> | "asChild"> & React.RefAttributes<HTMLLabelElement>>;
|
|
7
|
+
declare type DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & {
|
|
8
|
+
asChild?: boolean;
|
|
9
|
+
};
|
|
10
|
+
declare const Description: React.ForwardRefExoticComponent<Pick<DescriptionProps, "children" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild"> & React.RefAttributes<HTMLSpanElement>>;
|
|
11
|
+
declare type ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & {
|
|
12
|
+
asChild?: boolean;
|
|
13
|
+
};
|
|
14
|
+
declare const ErrorMessage: React.ForwardRefExoticComponent<Pick<ErrorMessageProps, "children" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild"> & React.RefAttributes<HTMLSpanElement>>;
|
|
15
|
+
declare type ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & {
|
|
16
|
+
asChild?: boolean;
|
|
17
|
+
};
|
|
18
|
+
declare const Validation: React.ForwardRefExoticComponent<Pick<ValidationProps, "children" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild"> & React.RefAttributes<HTMLSpanElement>>;
|
|
19
|
+
declare type DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & {
|
|
20
|
+
asChild?: boolean;
|
|
21
|
+
};
|
|
22
|
+
declare const DescriptionAndValidation: React.ForwardRefExoticComponent<Pick<DescriptionAndValidationProps, "key" | "asChild" | keyof React.HTMLAttributes<HTMLParagraphElement>> & React.RefAttributes<HTMLParagraphElement>>;
|
|
23
|
+
export { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };
|
|
24
|
+
export type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };
|
|
25
|
+
//# sourceMappingURL=InputMeta.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputMeta.d.ts","sourceRoot":"","sources":["../../../src/InputMeta.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAIjE,aAAK,UAAU,GAAG,qBAAqB,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAExF,QAAA,MAAM,KAAK,kKAUV,CAAC;AAEF,aAAK,gBAAgB,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzG,QAAA,MAAM,WAAW,2lJAUhB,CAAC;AAEF,aAAK,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE1G,QAAA,MAAM,YAAY,4lJAUjB,CAAC;AAEF,aAAK,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAExG,QAAA,MAAM,UAAU,0lJAef,CAAC;AAEF,aAAK,6BAA6B,GAAG,qBAAqB,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEvG,QAAA,MAAM,wBAAwB,wLAU7B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,wBAAwB,EAAE,YAAY,EAAE,CAAC;AAElF,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,6BAA6B,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { CodeInput } from 'rci';
|
|
2
|
+
import React, { ComponentPropsWithRef } from 'react';
|
|
3
|
+
import { Valence } from './Root';
|
|
4
|
+
declare type PinInputProps = Omit<ComponentPropsWithRef<typeof CodeInput>, 'id' | 'className' | 'inputRef' | 'renderSegment'> & {
|
|
5
|
+
inputClassName?: string;
|
|
6
|
+
segmentClassName?: (styleProps: {
|
|
7
|
+
focused: boolean;
|
|
8
|
+
validationValence: Valence;
|
|
9
|
+
}) => string;
|
|
10
|
+
segmentPadding?: string;
|
|
11
|
+
segmentHeight?: string;
|
|
12
|
+
};
|
|
13
|
+
declare const PinInput: React.ForwardRefExoticComponent<Pick<PinInputProps, "length" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "type" | "width" | "fontFamily" | "fontSize" | "padding" | "paddingY" | "paddingX" | "spacing" | "characterWidth" | "segmentWidth" | "inputWidth" | "inputClassName" | "inputStyle" | "scrollWrapperClassName" | "segmentWrapperClassName" | "rootProps" | "segmentClassName" | "segmentPadding" | "segmentHeight"> & React.RefAttributes<HTMLInputElement>>;
|
|
14
|
+
export { PinInput };
|
|
15
|
+
export type { PinInputProps };
|
|
16
|
+
//# sourceMappingURL=PinInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PinInput.d.ts","sourceRoot":"","sources":["../../../src/PinInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAsB,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,EAAkB,qBAAqB,EAA2B,MAAM,OAAO,CAAC;AAI9F,OAAO,EAAiD,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEhF,aAAK,aAAa,GAAG,IAAI,CACvB,qBAAqB,CAAC,OAAO,SAAS,CAAC,EACvC,IAAI,GAAG,WAAW,GAAG,UAAU,GAAG,eAAe,CAClD,GAAG;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,iBAAiB,EAAE,OAAO,CAAA;KAAE,KAAK,MAAM,CAAC;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,QAAQ,2sKAsDb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Scope } from '@radix-ui/react-context';
|
|
2
|
+
import { PropsWithChildren } from 'react';
|
|
3
|
+
declare const INPUT_NAME = "Input";
|
|
4
|
+
declare type Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';
|
|
5
|
+
declare type InputScopedProps<P> = P & {
|
|
6
|
+
__inputScope?: Scope;
|
|
7
|
+
};
|
|
8
|
+
declare type InputRootProps = PropsWithChildren<{
|
|
9
|
+
id?: string;
|
|
10
|
+
validationValence?: Valence;
|
|
11
|
+
descriptionId?: string;
|
|
12
|
+
errorMessageId?: string;
|
|
13
|
+
}>;
|
|
14
|
+
declare const createInputScope: import("@radix-ui/react-context").CreateScope;
|
|
15
|
+
declare type InputContextValue = {
|
|
16
|
+
id: string;
|
|
17
|
+
descriptionId: string;
|
|
18
|
+
errorMessageId: string;
|
|
19
|
+
validationValence: Valence;
|
|
20
|
+
};
|
|
21
|
+
declare const useInputContext: (consumerName: string, scope: Scope<InputContextValue | undefined>) => InputContextValue;
|
|
22
|
+
declare const InputRoot: {
|
|
23
|
+
({ __inputScope, id: propsId, descriptionId: propsDescriptionId, errorMessageId: propsErrorMessageId, validationValence, children, }: InputScopedProps<InputRootProps>): JSX.Element;
|
|
24
|
+
displayName: string;
|
|
25
|
+
};
|
|
26
|
+
export { InputRoot, InputRoot as Root, createInputScope, useInputContext, INPUT_NAME };
|
|
27
|
+
export type { Valence, InputRootProps, InputScopedProps };
|
|
28
|
+
//# sourceMappingURL=Root.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/Root.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAsB,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIjD,QAAA,MAAM,UAAU,UAAU,CAAC;AAE3B,aAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEpE,aAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExD,aAAK,cAAc,GAAG,iBAAiB,CAAC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC,CAAC;AAEH,QAAA,MAA2B,gBAAgB,+CAAsC,CAAC;AAElF,aAAK,iBAAiB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAsB,eAAe,0FAAqD,CAAC;AAE3F,QAAA,MAAM,SAAS;0IAOZ,iBAAiB,cAAc,CAAC;;CASlC,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,SAAS,IAAI,IAAI,EAAE,gBAAgB,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC;AAEvF,YAAY,EAAE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React, { ComponentPropsWithRef } from 'react';
|
|
2
|
+
declare type TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;
|
|
3
|
+
declare const TextArea: React.ForwardRefExoticComponent<Pick<TextAreaProps, "children" | "form" | "slot" | "style" | "title" | "value" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoComplete" | "autoFocus" | "disabled" | "maxLength" | "minLength" | "name" | "readOnly" | "required" | "cols" | "dirName" | "rows" | "wrap"> & React.RefAttributes<HTMLTextAreaElement>>;
|
|
4
|
+
export { TextArea };
|
|
5
|
+
export type { TextAreaProps };
|
|
6
|
+
//# sourceMappingURL=TextArea.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/TextArea.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAIjE,aAAK,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,CAAC;AAEnE,QAAA,MAAM,QAAQ,qvJAkBb,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Primitive } from '@radix-ui/react-primitive';
|
|
2
|
+
import React, { ComponentPropsWithRef } from 'react';
|
|
3
|
+
declare type TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;
|
|
4
|
+
declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "children" | "form" | "slot" | "style" | "title" | "pattern" | "value" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "asChild" | "step" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "type" | "width"> & React.RefAttributes<HTMLInputElement>>;
|
|
5
|
+
export { TextInput };
|
|
6
|
+
export type { TextInputProps };
|
|
7
|
+
//# sourceMappingURL=TextInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/TextInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAIjE,aAAK,cAAc,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;AAEhF,QAAA,MAAM,SAAS,89JAkBd,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AAEvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}
|
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@dxos/react-input",
|
|
3
|
+
"version": "0.1.41",
|
|
4
|
+
"description": "Input primitive components for React.",
|
|
5
|
+
"homepage": "https://dxos.org",
|
|
6
|
+
"bugs": "https://github.com/dxos/dxos/issues",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"author": "DXOS.org",
|
|
9
|
+
"main": "dist/lib/node/index.cjs",
|
|
10
|
+
"browser": {
|
|
11
|
+
"./dist/lib/node/index.cjs": "./dist/lib/browser/index.mjs"
|
|
12
|
+
},
|
|
13
|
+
"types": "dist/types/src/index.d.ts",
|
|
14
|
+
"files": [
|
|
15
|
+
"dist",
|
|
16
|
+
"src"
|
|
17
|
+
],
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"@radix-ui/react-compose-refs": "^1.0.0",
|
|
20
|
+
"@radix-ui/react-context": "^1.0.0",
|
|
21
|
+
"@radix-ui/react-primitive": "^1.0.2",
|
|
22
|
+
"@radix-ui/react-slot": "^1.0.1",
|
|
23
|
+
"@radix-ui/react-use-controllable-state": "^1.0.0",
|
|
24
|
+
"lodash.omit": "^4.5.0",
|
|
25
|
+
"rci": "^0.1.0",
|
|
26
|
+
"@dxos/react-hooks": "0.1.41"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@types/react": "^18.0.21",
|
|
30
|
+
"@types/react-dom": "^18.0.6",
|
|
31
|
+
"react": "^18.2.0",
|
|
32
|
+
"react-dom": "^18.2.0"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"react": "^18.2.0",
|
|
36
|
+
"react-dom": "^18.2.0"
|
|
37
|
+
},
|
|
38
|
+
"publishConfig": {
|
|
39
|
+
"access": "public"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { Primitive } from '@radix-ui/react-primitive';
|
|
6
|
+
import { Slot } from '@radix-ui/react-slot';
|
|
7
|
+
import React, { ComponentPropsWithRef, forwardRef } from 'react';
|
|
8
|
+
|
|
9
|
+
import { INPUT_NAME, InputScopedProps, useInputContext } from './Root';
|
|
10
|
+
|
|
11
|
+
type LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: boolean };
|
|
12
|
+
|
|
13
|
+
const Label = forwardRef<HTMLLabelElement, LabelProps>(
|
|
14
|
+
({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {
|
|
15
|
+
const { id } = useInputContext(INPUT_NAME, __inputScope);
|
|
16
|
+
const Root = asChild ? Slot : Primitive.label;
|
|
17
|
+
return (
|
|
18
|
+
<Root {...props} htmlFor={id} ref={forwardedRef}>
|
|
19
|
+
{children}
|
|
20
|
+
</Root>
|
|
21
|
+
);
|
|
22
|
+
},
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
type DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };
|
|
26
|
+
|
|
27
|
+
const Description = forwardRef<HTMLSpanElement, DescriptionProps>(
|
|
28
|
+
({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {
|
|
29
|
+
const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
|
|
30
|
+
const Root = asChild ? Slot : Primitive.span;
|
|
31
|
+
return (
|
|
32
|
+
<Root {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>
|
|
33
|
+
{children}
|
|
34
|
+
</Root>
|
|
35
|
+
);
|
|
36
|
+
},
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
type ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };
|
|
40
|
+
|
|
41
|
+
const ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(
|
|
42
|
+
({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {
|
|
43
|
+
const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
|
|
44
|
+
const Root = asChild ? Slot : Primitive.span;
|
|
45
|
+
return (
|
|
46
|
+
<Root {...props} id={errorMessageId} ref={forwardedRef}>
|
|
47
|
+
{children}
|
|
48
|
+
</Root>
|
|
49
|
+
);
|
|
50
|
+
},
|
|
51
|
+
);
|
|
52
|
+
|
|
53
|
+
type ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };
|
|
54
|
+
|
|
55
|
+
const Validation = forwardRef<HTMLSpanElement, ValidationProps>(
|
|
56
|
+
(props: InputScopedProps<ValidationProps>, forwardedRef) => {
|
|
57
|
+
const { __inputScope, asChild, children, ...otherProps } = props;
|
|
58
|
+
const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
|
|
59
|
+
if (validationValence === 'error') {
|
|
60
|
+
return <ErrorMessage {...props} ref={forwardedRef} />;
|
|
61
|
+
} else {
|
|
62
|
+
const Root = asChild ? Slot : Primitive.span;
|
|
63
|
+
return (
|
|
64
|
+
<Root {...otherProps} ref={forwardedRef}>
|
|
65
|
+
{children}
|
|
66
|
+
</Root>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
type DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & { asChild?: boolean };
|
|
73
|
+
|
|
74
|
+
const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(
|
|
75
|
+
({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {
|
|
76
|
+
const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);
|
|
77
|
+
const Root = asChild ? Slot : Primitive.p;
|
|
78
|
+
return (
|
|
79
|
+
<Root {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>
|
|
80
|
+
{children}
|
|
81
|
+
</Root>
|
|
82
|
+
);
|
|
83
|
+
},
|
|
84
|
+
);
|
|
85
|
+
|
|
86
|
+
export { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };
|
|
87
|
+
|
|
88
|
+
export type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };
|
package/src/PinInput.tsx
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { CodeInput, getSegmentCssWidth } from 'rci';
|
|
6
|
+
import React, { ComponentProps, ComponentPropsWithRef, forwardRef, useCallback } from 'react';
|
|
7
|
+
|
|
8
|
+
import { useForwardedRef, useIsFocused } from '@dxos/react-hooks';
|
|
9
|
+
|
|
10
|
+
import { INPUT_NAME, InputScopedProps, useInputContext, Valence } from './Root';
|
|
11
|
+
|
|
12
|
+
type PinInputProps = Omit<
|
|
13
|
+
ComponentPropsWithRef<typeof CodeInput>,
|
|
14
|
+
'id' | 'className' | 'inputRef' | 'renderSegment'
|
|
15
|
+
> & {
|
|
16
|
+
inputClassName?: string;
|
|
17
|
+
segmentClassName?: (styleProps: { focused: boolean; validationValence: Valence }) => string;
|
|
18
|
+
segmentPadding?: string;
|
|
19
|
+
segmentHeight?: string;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
|
|
23
|
+
(
|
|
24
|
+
{
|
|
25
|
+
__inputScope,
|
|
26
|
+
segmentClassName,
|
|
27
|
+
inputClassName,
|
|
28
|
+
segmentPadding = '13px',
|
|
29
|
+
segmentHeight = '100%',
|
|
30
|
+
...props
|
|
31
|
+
}: InputScopedProps<PinInputProps>,
|
|
32
|
+
forwardedRef,
|
|
33
|
+
) => {
|
|
34
|
+
const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
|
|
35
|
+
const width = getSegmentCssWidth(segmentPadding);
|
|
36
|
+
const inputRef = useForwardedRef(forwardedRef);
|
|
37
|
+
const inputFocused = useIsFocused(inputRef);
|
|
38
|
+
|
|
39
|
+
const renderSegment = useCallback<ComponentProps<typeof CodeInput>['renderSegment']>(
|
|
40
|
+
({ state, index }) => (
|
|
41
|
+
<div
|
|
42
|
+
key={index}
|
|
43
|
+
className={segmentClassName?.({
|
|
44
|
+
focused: !!(inputFocused && state),
|
|
45
|
+
validationValence,
|
|
46
|
+
})}
|
|
47
|
+
data-state={state}
|
|
48
|
+
style={{ width, height: segmentHeight }}
|
|
49
|
+
/>
|
|
50
|
+
),
|
|
51
|
+
[segmentClassName, inputFocused, validationValence],
|
|
52
|
+
);
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<CodeInput
|
|
56
|
+
{...{
|
|
57
|
+
padding: '8px',
|
|
58
|
+
spacing: '8px',
|
|
59
|
+
fontFamily: '',
|
|
60
|
+
spellCheck: false,
|
|
61
|
+
length: 6,
|
|
62
|
+
...props,
|
|
63
|
+
id,
|
|
64
|
+
'aria-describedby': descriptionId,
|
|
65
|
+
...(validationValence === 'error' && {
|
|
66
|
+
'aria-invalid': 'true' as const,
|
|
67
|
+
'aria-errormessage': errorMessageId,
|
|
68
|
+
}),
|
|
69
|
+
inputRef,
|
|
70
|
+
renderSegment,
|
|
71
|
+
className: inputClassName,
|
|
72
|
+
}}
|
|
73
|
+
/>
|
|
74
|
+
);
|
|
75
|
+
},
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
export { PinInput };
|
|
79
|
+
|
|
80
|
+
export type { PinInputProps };
|
package/src/Root.tsx
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { createContextScope, Scope } from '@radix-ui/react-context';
|
|
6
|
+
import React, { PropsWithChildren } from 'react';
|
|
7
|
+
|
|
8
|
+
import { useId } from '@dxos/react-hooks';
|
|
9
|
+
|
|
10
|
+
const INPUT_NAME = 'Input';
|
|
11
|
+
|
|
12
|
+
type Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';
|
|
13
|
+
|
|
14
|
+
type InputScopedProps<P> = P & { __inputScope?: Scope };
|
|
15
|
+
|
|
16
|
+
type InputRootProps = PropsWithChildren<{
|
|
17
|
+
id?: string;
|
|
18
|
+
validationValence?: Valence;
|
|
19
|
+
descriptionId?: string;
|
|
20
|
+
errorMessageId?: string;
|
|
21
|
+
}>;
|
|
22
|
+
|
|
23
|
+
const [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);
|
|
24
|
+
|
|
25
|
+
type InputContextValue = {
|
|
26
|
+
id: string;
|
|
27
|
+
descriptionId: string;
|
|
28
|
+
errorMessageId: string;
|
|
29
|
+
validationValence: Valence;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);
|
|
33
|
+
|
|
34
|
+
const InputRoot = ({
|
|
35
|
+
__inputScope,
|
|
36
|
+
id: propsId,
|
|
37
|
+
descriptionId: propsDescriptionId,
|
|
38
|
+
errorMessageId: propsErrorMessageId,
|
|
39
|
+
validationValence = 'neutral',
|
|
40
|
+
children,
|
|
41
|
+
}: InputScopedProps<InputRootProps>) => {
|
|
42
|
+
const id = useId('input', propsId);
|
|
43
|
+
const descriptionId = useId('input__description', propsDescriptionId);
|
|
44
|
+
const errorMessageId = useId('input__error-message', propsErrorMessageId);
|
|
45
|
+
return (
|
|
46
|
+
<InputProvider {...{ id, descriptionId, errorMessageId, validationValence }} scope={__inputScope}>
|
|
47
|
+
{children}
|
|
48
|
+
</InputProvider>
|
|
49
|
+
);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
InputRoot.displayName = INPUT_NAME;
|
|
53
|
+
|
|
54
|
+
export { InputRoot, InputRoot as Root, createInputScope, useInputContext, INPUT_NAME };
|
|
55
|
+
|
|
56
|
+
export type { Valence, InputRootProps, InputScopedProps };
|
package/src/TextArea.tsx
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import React, { ComponentPropsWithRef, forwardRef } from 'react';
|
|
6
|
+
|
|
7
|
+
import { INPUT_NAME, InputScopedProps, useInputContext } from './Root';
|
|
8
|
+
|
|
9
|
+
type TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;
|
|
10
|
+
|
|
11
|
+
const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
|
12
|
+
({ __inputScope, ...props }: InputScopedProps<TextAreaProps>, forwardedRef) => {
|
|
13
|
+
const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
|
|
14
|
+
return (
|
|
15
|
+
<textarea
|
|
16
|
+
{...{
|
|
17
|
+
...props,
|
|
18
|
+
id,
|
|
19
|
+
'aria-describedby': descriptionId,
|
|
20
|
+
...(validationValence === 'error' && {
|
|
21
|
+
'aria-invalid': 'true' as const,
|
|
22
|
+
'aria-errormessage': errorMessageId,
|
|
23
|
+
}),
|
|
24
|
+
ref: forwardedRef,
|
|
25
|
+
}}
|
|
26
|
+
/>
|
|
27
|
+
);
|
|
28
|
+
},
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
export { TextArea };
|
|
32
|
+
|
|
33
|
+
export type { TextAreaProps };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { Primitive } from '@radix-ui/react-primitive';
|
|
6
|
+
import React, { ComponentPropsWithRef, forwardRef } from 'react';
|
|
7
|
+
|
|
8
|
+
import { INPUT_NAME, InputScopedProps, useInputContext } from './Root';
|
|
9
|
+
|
|
10
|
+
type TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;
|
|
11
|
+
|
|
12
|
+
const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
|
|
13
|
+
({ __inputScope, ...props }: InputScopedProps<TextInputProps>, forwardedRef) => {
|
|
14
|
+
const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
|
|
15
|
+
return (
|
|
16
|
+
<Primitive.input
|
|
17
|
+
{...{
|
|
18
|
+
...props,
|
|
19
|
+
id,
|
|
20
|
+
'aria-describedby': descriptionId,
|
|
21
|
+
...(validationValence === 'error' && {
|
|
22
|
+
'aria-invalid': 'true' as const,
|
|
23
|
+
'aria-errormessage': errorMessageId,
|
|
24
|
+
}),
|
|
25
|
+
ref: forwardedRef,
|
|
26
|
+
}}
|
|
27
|
+
/>
|
|
28
|
+
);
|
|
29
|
+
},
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
export { TextInput };
|
|
33
|
+
|
|
34
|
+
export type { TextInputProps };
|