@vinyasa/form 1.0.22
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/README.md +188 -0
- package/dist/cjs/autocomplete.cjs +344 -0
- package/dist/cjs/autocomplete.css +308 -0
- package/dist/cjs/checkbox.cjs +299 -0
- package/dist/cjs/checkbox.css +175 -0
- package/dist/cjs/color-picker.cjs +363 -0
- package/dist/cjs/color-picker.css +248 -0
- package/dist/cjs/combobox.cjs +394 -0
- package/dist/cjs/combobox.css +308 -0
- package/dist/cjs/date-picker.cjs +357 -0
- package/dist/cjs/date-picker.css +295 -0
- package/dist/cjs/dropzone.cjs +438 -0
- package/dist/cjs/dropzone.css +293 -0
- package/dist/cjs/file-upload.cjs +428 -0
- package/dist/cjs/file-upload.css +250 -0
- package/dist/cjs/icon-button.cjs +183 -0
- package/dist/cjs/index.cjs +3780 -0
- package/dist/cjs/index.css +1229 -0
- package/dist/cjs/input.cjs +340 -0
- package/dist/cjs/input.css +139 -0
- package/dist/cjs/multi-select.cjs +436 -0
- package/dist/cjs/multi-select.css +308 -0
- package/dist/cjs/number-input.cjs +458 -0
- package/dist/cjs/number-input.css +250 -0
- package/dist/cjs/otp-input.cjs +355 -0
- package/dist/cjs/otp-input.css +194 -0
- package/dist/cjs/password-input.cjs +368 -0
- package/dist/cjs/password-input.css +139 -0
- package/dist/cjs/radio-group.cjs +301 -0
- package/dist/cjs/radio-group.css +181 -0
- package/dist/cjs/range-slider.cjs +276 -0
- package/dist/cjs/range-slider.css +46 -0
- package/dist/cjs/rich-text-editor.cjs +570 -0
- package/dist/cjs/rich-text-editor.css +213 -0
- package/dist/cjs/search-input.cjs +380 -0
- package/dist/cjs/search-input.css +139 -0
- package/dist/cjs/select.cjs +407 -0
- package/dist/cjs/select.css +213 -0
- package/dist/cjs/slider.cjs +188 -0
- package/dist/cjs/slider.css +46 -0
- package/dist/cjs/switch.cjs +294 -0
- package/dist/cjs/switch.css +183 -0
- package/dist/cjs/tags-input.cjs +348 -0
- package/dist/cjs/tags-input.css +328 -0
- package/dist/cjs/textarea.cjs +361 -0
- package/dist/cjs/textarea.css +139 -0
- package/dist/cjs/time-picker.cjs +408 -0
- package/dist/cjs/time-picker.css +308 -0
- package/dist/cjs/toggle-button.cjs +172 -0
- package/dist/esm/27.css +46 -0
- package/dist/esm/27.js +38 -0
- package/dist/esm/2942.css +111 -0
- package/dist/esm/2942.js +13 -0
- package/dist/esm/2995.css +135 -0
- package/dist/esm/2995.js +117 -0
- package/dist/esm/3876.js +27 -0
- package/dist/esm/4557.js +39 -0
- package/dist/esm/6720.css +164 -0
- package/dist/esm/6720.js +19 -0
- package/dist/esm/autocomplete.d.ts +2 -0
- package/dist/esm/autocomplete.js +95 -0
- package/dist/esm/checkbox.css +36 -0
- package/dist/esm/checkbox.d.ts +2 -0
- package/dist/esm/checkbox.js +38 -0
- package/dist/esm/color-picker.css +109 -0
- package/dist/esm/color-picker.d.ts +2 -0
- package/dist/esm/color-picker.js +130 -0
- package/dist/esm/combobox.d.ts +2 -0
- package/dist/esm/combobox.js +126 -0
- package/dist/esm/components/autocomplete/Autocomplete.d.ts +21 -0
- package/dist/esm/components/autocomplete/index.d.ts +3 -0
- package/dist/esm/components/checkbox/Checkbox.css.d.ts +2 -0
- package/dist/esm/components/checkbox/Checkbox.d.ts +7 -0
- package/dist/esm/components/checkbox/index.d.ts +3 -0
- package/dist/esm/components/color-picker/ColorPicker.css.d.ts +11 -0
- package/dist/esm/components/color-picker/ColorPicker.d.ts +28 -0
- package/dist/esm/components/color-picker/index.d.ts +3 -0
- package/dist/esm/components/combobox/Combobox.d.ts +34 -0
- package/dist/esm/components/combobox/index.d.ts +3 -0
- package/dist/esm/components/date-picker/DatePicker.css.d.ts +18 -0
- package/dist/esm/components/date-picker/DatePicker.d.ts +29 -0
- package/dist/esm/components/date-picker/index.d.ts +3 -0
- package/dist/esm/components/dropzone/Dropzone.css.d.ts +4 -0
- package/dist/esm/components/dropzone/Dropzone.d.ts +20 -0
- package/dist/esm/components/dropzone/index.d.ts +3 -0
- package/dist/esm/components/file-upload/FileUpload.css.d.ts +11 -0
- package/dist/esm/components/file-upload/FileUpload.d.ts +20 -0
- package/dist/esm/components/file-upload/index.d.ts +3 -0
- package/dist/esm/components/icon-button/IconButton.d.ts +8 -0
- package/dist/esm/components/icon-button/index.d.ts +3 -0
- package/dist/esm/components/input/Input.d.ts +11 -0
- package/dist/esm/components/input/index.d.ts +3 -0
- package/dist/esm/components/multi-select/MultiSelect.d.ts +35 -0
- package/dist/esm/components/multi-select/index.d.ts +3 -0
- package/dist/esm/components/number-input/NumberInput.css.d.ts +51 -0
- package/dist/esm/components/number-input/NumberInput.d.ts +13 -0
- package/dist/esm/components/number-input/index.d.ts +3 -0
- package/dist/esm/components/otp-input/OtpInput.css.d.ts +6 -0
- package/dist/esm/components/otp-input/OtpInput.d.ts +16 -0
- package/dist/esm/components/otp-input/index.d.ts +3 -0
- package/dist/esm/components/password-input/PasswordInput.d.ts +11 -0
- package/dist/esm/components/password-input/index.d.ts +3 -0
- package/dist/esm/components/radio-group/RadioGroup.css.d.ts +3 -0
- package/dist/esm/components/radio-group/RadioGroup.d.ts +12 -0
- package/dist/esm/components/radio-group/index.d.ts +3 -0
- package/dist/esm/components/range-slider/RangeSlider.d.ts +11 -0
- package/dist/esm/components/range-slider/index.d.ts +3 -0
- package/dist/esm/components/rich-text-editor/RichTextEditor.css.d.ts +5 -0
- package/dist/esm/components/rich-text-editor/RichTextEditor.d.ts +18 -0
- package/dist/esm/components/rich-text-editor/index.d.ts +3 -0
- package/dist/esm/components/search-input/SearchInput.d.ts +13 -0
- package/dist/esm/components/search-input/index.d.ts +3 -0
- package/dist/esm/components/select/Select.css.d.ts +8 -0
- package/dist/esm/components/select/Select.d.ts +29 -0
- package/dist/esm/components/select/index.d.ts +3 -0
- package/dist/esm/components/slider/Slider.css.d.ts +4 -0
- package/dist/esm/components/slider/Slider.d.ts +12 -0
- package/dist/esm/components/slider/index.d.ts +3 -0
- package/dist/esm/components/switch/Switch.css.d.ts +2 -0
- package/dist/esm/components/switch/Switch.d.ts +7 -0
- package/dist/esm/components/switch/index.d.ts +3 -0
- package/dist/esm/components/tags-input/TagsInput.css.d.ts +1 -0
- package/dist/esm/components/tags-input/TagsInput.d.ts +18 -0
- package/dist/esm/components/tags-input/index.d.ts +3 -0
- package/dist/esm/components/textarea/Textarea.d.ts +13 -0
- package/dist/esm/components/textarea/index.d.ts +3 -0
- package/dist/esm/components/time-picker/TimePicker.d.ts +32 -0
- package/dist/esm/components/time-picker/index.d.ts +3 -0
- package/dist/esm/components/toggle-button/ToggleButton.d.ts +12 -0
- package/dist/esm/components/toggle-button/index.d.ts +3 -0
- package/dist/esm/date-picker.css +153 -0
- package/dist/esm/date-picker.d.ts +2 -0
- package/dist/esm/date-picker.js +118 -0
- package/dist/esm/dropzone.css +43 -0
- package/dist/esm/dropzone.d.ts +2 -0
- package/dist/esm/dropzone.js +137 -0
- package/dist/esm/field.css.d.ts +33 -0
- package/dist/esm/field.d.ts +24 -0
- package/dist/esm/file-upload.d.ts +2 -0
- package/dist/esm/file-upload.js +123 -0
- package/dist/esm/icon-button.d.ts +2 -0
- package/dist/esm/icon-button.js +29 -0
- package/dist/esm/index.d.ts +24 -0
- package/dist/esm/index.js +24 -0
- package/dist/esm/input.d.ts +2 -0
- package/dist/esm/input.js +39 -0
- package/dist/esm/multi-select.d.ts +2 -0
- package/dist/esm/multi-select.js +164 -0
- package/dist/esm/number-input.css +107 -0
- package/dist/esm/number-input.d.ts +2 -0
- package/dist/esm/number-input.js +153 -0
- package/dist/esm/otp-input.css +55 -0
- package/dist/esm/otp-input.d.ts +2 -0
- package/dist/esm/otp-input.js +56 -0
- package/dist/esm/password-input.d.ts +2 -0
- package/dist/esm/password-input.js +56 -0
- package/dist/esm/radio-group.css +42 -0
- package/dist/esm/radio-group.d.ts +2 -0
- package/dist/esm/radio-group.js +44 -0
- package/dist/esm/range-slider.d.ts +2 -0
- package/dist/esm/range-slider.js +22 -0
- package/dist/esm/rich-text-editor.css +74 -0
- package/dist/esm/rich-text-editor.d.ts +2 -0
- package/dist/esm/rich-text-editor.js +212 -0
- package/dist/esm/search-input.d.ts +2 -0
- package/dist/esm/search-input.js +62 -0
- package/dist/esm/select.css +73 -0
- package/dist/esm/select.d.ts +2 -0
- package/dist/esm/select.js +87 -0
- package/dist/esm/selectPopover.css.d.ts +17 -0
- package/dist/esm/slider.d.ts +2 -0
- package/dist/esm/slider.js +4 -0
- package/dist/esm/switch.css +44 -0
- package/dist/esm/switch.d.ts +2 -0
- package/dist/esm/switch.js +36 -0
- package/dist/esm/tags-input.css +16 -0
- package/dist/esm/tags-input.d.ts +2 -0
- package/dist/esm/tags-input.js +100 -0
- package/dist/esm/textarea.d.ts +2 -0
- package/dist/esm/textarea.js +58 -0
- package/dist/esm/time-picker.d.ts +2 -0
- package/dist/esm/time-picker.js +137 -0
- package/dist/esm/toggle-button.d.ts +2 -0
- package/dist/esm/toggle-button.js +4 -0
- package/package.json +255 -0
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import "./switch.css";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef, useId } from "react";
|
|
4
|
+
import { controlRow, controlLabel } from "./2995.js";
|
|
5
|
+
import * as __rspack_external__radix_ui_react_switch_5e92b7ed from "@radix-ui/react-switch";
|
|
6
|
+
var root = '_1u7tp1u0';
|
|
7
|
+
var thumb = '_1u7tp1u1';
|
|
8
|
+
const Switch = /*#__PURE__*/ forwardRef(({ label, id: idProp, className, ...rest }, ref)=>{
|
|
9
|
+
const generatedId = useId();
|
|
10
|
+
const id = idProp ?? generatedId;
|
|
11
|
+
const classes = className ? `${root} ${className}` : root;
|
|
12
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
13
|
+
className: controlRow,
|
|
14
|
+
children: [
|
|
15
|
+
/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_switch_5e92b7ed.Root, {
|
|
16
|
+
ref: ref,
|
|
17
|
+
id: id,
|
|
18
|
+
className: classes,
|
|
19
|
+
...rest,
|
|
20
|
+
children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_switch_5e92b7ed.Thumb, {
|
|
21
|
+
className: thumb
|
|
22
|
+
})
|
|
23
|
+
}),
|
|
24
|
+
label ? /*#__PURE__*/ jsx("label", {
|
|
25
|
+
htmlFor: id,
|
|
26
|
+
className: controlLabel,
|
|
27
|
+
children: label
|
|
28
|
+
}) : null
|
|
29
|
+
]
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
Switch.displayName = 'Switch';
|
|
33
|
+
const switch_Switch = Switch;
|
|
34
|
+
const components_switch = switch_Switch;
|
|
35
|
+
export default components_switch;
|
|
36
|
+
export { components_switch as Switch };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
._1w3na0r0 {
|
|
2
|
+
min-width: 4rem;
|
|
3
|
+
font-family: var(--vinyasa-font-family-sans);
|
|
4
|
+
font-size: var(--vinyasa-font-size-sm);
|
|
5
|
+
color: var(--vinyasa-on-secondary);
|
|
6
|
+
background: none;
|
|
7
|
+
border: none;
|
|
8
|
+
outline: none;
|
|
9
|
+
flex-grow: 1;
|
|
10
|
+
padding: 0;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
._1w3na0r0::placeholder {
|
|
14
|
+
color: var(--vinyasa-text-muted);
|
|
15
|
+
}
|
|
16
|
+
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import "./tags-input.css";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { XIcon } from "@vinyasa/icons";
|
|
4
|
+
import { forwardRef, useId, useState } from "react";
|
|
5
|
+
import { field, describedByIds } from "./4557.js";
|
|
6
|
+
import { fieldControl } from "./2995.js";
|
|
7
|
+
import { chipRow, triggerBox, chip, chipRemove } from "./6720.js";
|
|
8
|
+
var tagInput = '_1w3na0r0';
|
|
9
|
+
const TagsInput = /*#__PURE__*/ forwardRef(({ value, defaultValue = [], onValueChange, placeholder, label, description, error, required, size, max, disabled, id: idProp }, ref)=>{
|
|
10
|
+
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
11
|
+
const isControlled = void 0 !== value;
|
|
12
|
+
const currentValue = isControlled ? value : internalValue;
|
|
13
|
+
const [draft, setDraft] = useState('');
|
|
14
|
+
const generatedId = useId();
|
|
15
|
+
const id = idProp ?? generatedId;
|
|
16
|
+
const setValue = (next)=>{
|
|
17
|
+
if (!isControlled) setInternalValue(next);
|
|
18
|
+
onValueChange?.(next);
|
|
19
|
+
};
|
|
20
|
+
const commitDraft = ()=>{
|
|
21
|
+
const tag = draft.trim();
|
|
22
|
+
if (!tag || currentValue.includes(tag) || void 0 !== max && currentValue.length >= max) return void setDraft('');
|
|
23
|
+
setValue([
|
|
24
|
+
...currentValue,
|
|
25
|
+
tag
|
|
26
|
+
]);
|
|
27
|
+
setDraft('');
|
|
28
|
+
};
|
|
29
|
+
const removeTag = (tag)=>{
|
|
30
|
+
setValue(currentValue.filter((entry)=>entry !== tag));
|
|
31
|
+
};
|
|
32
|
+
const handleKeyDown = (event)=>{
|
|
33
|
+
if ('Enter' === event.key || ',' === event.key) {
|
|
34
|
+
event.preventDefault();
|
|
35
|
+
commitDraft();
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
if ('Backspace' === event.key && '' === draft && currentValue.length > 0) removeTag(currentValue[currentValue.length - 1]);
|
|
39
|
+
};
|
|
40
|
+
return /*#__PURE__*/ jsx(field, {
|
|
41
|
+
id: id,
|
|
42
|
+
label: label,
|
|
43
|
+
description: description,
|
|
44
|
+
error: error,
|
|
45
|
+
required: required,
|
|
46
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
47
|
+
className: `${fieldControl({
|
|
48
|
+
size,
|
|
49
|
+
invalid: Boolean(error)
|
|
50
|
+
})} ${triggerBox}`,
|
|
51
|
+
onClick: (event)=>{
|
|
52
|
+
if (event.currentTarget === event.target) event.currentTarget.querySelector('input')?.focus();
|
|
53
|
+
},
|
|
54
|
+
children: /*#__PURE__*/ jsxs("span", {
|
|
55
|
+
className: chipRow,
|
|
56
|
+
children: [
|
|
57
|
+
currentValue.map((tag)=>/*#__PURE__*/ jsxs("span", {
|
|
58
|
+
className: chip,
|
|
59
|
+
children: [
|
|
60
|
+
tag,
|
|
61
|
+
/*#__PURE__*/ jsx("button", {
|
|
62
|
+
type: "button",
|
|
63
|
+
className: chipRemove,
|
|
64
|
+
"aria-label": `Remove ${tag}`,
|
|
65
|
+
disabled: disabled,
|
|
66
|
+
onClick: ()=>{
|
|
67
|
+
removeTag(tag);
|
|
68
|
+
},
|
|
69
|
+
children: /*#__PURE__*/ jsx(XIcon, {})
|
|
70
|
+
})
|
|
71
|
+
]
|
|
72
|
+
}, tag)),
|
|
73
|
+
/*#__PURE__*/ jsx("input", {
|
|
74
|
+
ref: ref,
|
|
75
|
+
id: id,
|
|
76
|
+
className: tagInput,
|
|
77
|
+
value: draft,
|
|
78
|
+
placeholder: 0 === currentValue.length ? placeholder : void 0,
|
|
79
|
+
disabled: disabled,
|
|
80
|
+
required: required && 0 === currentValue.length,
|
|
81
|
+
"aria-describedby": describedByIds(id, {
|
|
82
|
+
description,
|
|
83
|
+
error
|
|
84
|
+
}),
|
|
85
|
+
onChange: (event)=>{
|
|
86
|
+
setDraft(event.target.value);
|
|
87
|
+
},
|
|
88
|
+
onKeyDown: handleKeyDown,
|
|
89
|
+
onBlur: commitDraft
|
|
90
|
+
})
|
|
91
|
+
]
|
|
92
|
+
})
|
|
93
|
+
})
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
TagsInput.displayName = 'TagsInput';
|
|
97
|
+
const tags_input_TagsInput = TagsInput;
|
|
98
|
+
const tags_input = tags_input_TagsInput;
|
|
99
|
+
export default tags_input;
|
|
100
|
+
export { tags_input as TagsInput };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useId, useRef } from "react";
|
|
3
|
+
import { fieldControl } from "./2995.js";
|
|
4
|
+
import { field, describedByIds } from "./4557.js";
|
|
5
|
+
const mergeRefs = (...refs)=>(node)=>{
|
|
6
|
+
for (const ref of refs)if ('function' == typeof ref) ref(node);
|
|
7
|
+
else if (ref) ref.current = node;
|
|
8
|
+
};
|
|
9
|
+
const Textarea = /*#__PURE__*/ forwardRef(({ label, description, error, required, size, autoResize = false, onChange, id: idProp, className, style, ...rest }, ref)=>{
|
|
10
|
+
const generatedId = useId();
|
|
11
|
+
const id = idProp ?? generatedId;
|
|
12
|
+
const innerRef = useRef(null);
|
|
13
|
+
const classes = className ? `${fieldControl({
|
|
14
|
+
size,
|
|
15
|
+
invalid: Boolean(error)
|
|
16
|
+
})} ${className}` : fieldControl({
|
|
17
|
+
size,
|
|
18
|
+
invalid: Boolean(error)
|
|
19
|
+
});
|
|
20
|
+
const resize = (element)=>{
|
|
21
|
+
element.style.height = 'auto';
|
|
22
|
+
element.style.height = `${String(element.scrollHeight)}px`;
|
|
23
|
+
};
|
|
24
|
+
const handleChange = (event)=>{
|
|
25
|
+
if (autoResize) resize(event.currentTarget);
|
|
26
|
+
onChange?.(event);
|
|
27
|
+
};
|
|
28
|
+
return /*#__PURE__*/ jsx(field, {
|
|
29
|
+
id: id,
|
|
30
|
+
label: label,
|
|
31
|
+
description: description,
|
|
32
|
+
error: error,
|
|
33
|
+
required: required,
|
|
34
|
+
children: /*#__PURE__*/ jsx("textarea", {
|
|
35
|
+
ref: mergeRefs(ref, innerRef),
|
|
36
|
+
id: id,
|
|
37
|
+
className: classes,
|
|
38
|
+
required: required,
|
|
39
|
+
"aria-invalid": error ? true : void 0,
|
|
40
|
+
"aria-describedby": describedByIds(id, {
|
|
41
|
+
description,
|
|
42
|
+
error
|
|
43
|
+
}),
|
|
44
|
+
onChange: handleChange,
|
|
45
|
+
style: autoResize ? {
|
|
46
|
+
resize: 'none',
|
|
47
|
+
overflow: 'hidden',
|
|
48
|
+
...style
|
|
49
|
+
} : style,
|
|
50
|
+
...rest
|
|
51
|
+
})
|
|
52
|
+
});
|
|
53
|
+
});
|
|
54
|
+
Textarea.displayName = 'Textarea';
|
|
55
|
+
const textarea_Textarea = Textarea;
|
|
56
|
+
const components_textarea = textarea_Textarea;
|
|
57
|
+
export default components_textarea;
|
|
58
|
+
export { components_textarea as Textarea };
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { CheckIcon, ClockIcon, SearchIcon } from "@vinyasa/icons";
|
|
3
|
+
import { Command } from "cmdk";
|
|
4
|
+
import { format, parse } from "date-fns";
|
|
5
|
+
import { useId, useMemo, useState } from "react";
|
|
6
|
+
import { field, describedByIds } from "./4557.js";
|
|
7
|
+
import { fieldControl } from "./2995.js";
|
|
8
|
+
import { triggerText, empty, triggerIcon, searchIcon, placeholder as selectPopover_css_placeholder, content, searchInput, item, itemIndicator, searchWrapper, trigger as selectPopover_css_trigger, list } from "./6720.js";
|
|
9
|
+
import * as __rspack_external__radix_ui_react_popover_e2827c9f from "@radix-ui/react-popover";
|
|
10
|
+
const REFERENCE_DATE = new Date(2000, 0, 1);
|
|
11
|
+
const parseTime = (time)=>parse(time, 'HH:mm', REFERENCE_DATE);
|
|
12
|
+
const generateTimeOptions = (stepMinutes)=>{
|
|
13
|
+
const options = [];
|
|
14
|
+
for(let minutes = 0; minutes < 1440; minutes += stepMinutes){
|
|
15
|
+
const hours = Math.floor(minutes / 60);
|
|
16
|
+
const mins = minutes % 60;
|
|
17
|
+
options.push(`${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`);
|
|
18
|
+
}
|
|
19
|
+
return options;
|
|
20
|
+
};
|
|
21
|
+
const TimePicker = ({ value, defaultValue, onValueChange, placeholder = 'Select a time', timeFormat = 'h:mm a', stepMinutes = 30, label, description, error, required, size, disabled, trigger, id: idProp })=>{
|
|
22
|
+
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
23
|
+
const isControlled = void 0 !== value;
|
|
24
|
+
const currentValue = isControlled ? value : internalValue;
|
|
25
|
+
const [open, setOpen] = useState(false);
|
|
26
|
+
const [search, setSearch] = useState('');
|
|
27
|
+
const generatedId = useId();
|
|
28
|
+
const id = idProp ?? generatedId;
|
|
29
|
+
const options = useMemo(()=>generateTimeOptions(stepMinutes), [
|
|
30
|
+
stepMinutes
|
|
31
|
+
]);
|
|
32
|
+
const handleSelect = (time)=>{
|
|
33
|
+
if (!isControlled) setInternalValue(time);
|
|
34
|
+
onValueChange?.(time);
|
|
35
|
+
setOpen(false);
|
|
36
|
+
};
|
|
37
|
+
return /*#__PURE__*/ jsx(field, {
|
|
38
|
+
id: id,
|
|
39
|
+
label: label,
|
|
40
|
+
description: description,
|
|
41
|
+
error: error,
|
|
42
|
+
required: required,
|
|
43
|
+
children: /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_popover_e2827c9f.Root, {
|
|
44
|
+
open: open,
|
|
45
|
+
onOpenChange: (next)=>{
|
|
46
|
+
setOpen(next);
|
|
47
|
+
if (!next) setSearch('');
|
|
48
|
+
},
|
|
49
|
+
children: [
|
|
50
|
+
/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Trigger, {
|
|
51
|
+
asChild: true,
|
|
52
|
+
children: trigger ?? /*#__PURE__*/ jsxs("button", {
|
|
53
|
+
type: "button",
|
|
54
|
+
id: id,
|
|
55
|
+
disabled: disabled,
|
|
56
|
+
className: `${fieldControl({
|
|
57
|
+
size,
|
|
58
|
+
invalid: Boolean(error)
|
|
59
|
+
})} ${selectPopover_css_trigger}`,
|
|
60
|
+
"aria-describedby": describedByIds(id, {
|
|
61
|
+
description,
|
|
62
|
+
error
|
|
63
|
+
}),
|
|
64
|
+
children: [
|
|
65
|
+
/*#__PURE__*/ jsx("span", {
|
|
66
|
+
className: currentValue ? triggerText : `${triggerText} ${selectPopover_css_placeholder}`,
|
|
67
|
+
children: currentValue ? format(parseTime(currentValue), timeFormat) : placeholder
|
|
68
|
+
}),
|
|
69
|
+
/*#__PURE__*/ jsx("span", {
|
|
70
|
+
className: triggerIcon,
|
|
71
|
+
"aria-hidden": "true",
|
|
72
|
+
children: /*#__PURE__*/ jsx(ClockIcon, {})
|
|
73
|
+
})
|
|
74
|
+
]
|
|
75
|
+
})
|
|
76
|
+
}),
|
|
77
|
+
/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
|
|
78
|
+
className: content,
|
|
79
|
+
align: "start",
|
|
80
|
+
sideOffset: 4,
|
|
81
|
+
children: /*#__PURE__*/ jsxs(Command, {
|
|
82
|
+
loop: true,
|
|
83
|
+
label: 'string' == typeof label ? label : 'Search times',
|
|
84
|
+
children: [
|
|
85
|
+
/*#__PURE__*/ jsxs("div", {
|
|
86
|
+
className: searchWrapper,
|
|
87
|
+
children: [
|
|
88
|
+
/*#__PURE__*/ jsx("span", {
|
|
89
|
+
className: searchIcon,
|
|
90
|
+
"aria-hidden": "true",
|
|
91
|
+
children: /*#__PURE__*/ jsx(SearchIcon, {})
|
|
92
|
+
}),
|
|
93
|
+
/*#__PURE__*/ jsx(Command.Input, {
|
|
94
|
+
autoFocus: true,
|
|
95
|
+
value: search,
|
|
96
|
+
onValueChange: setSearch,
|
|
97
|
+
placeholder: "Search…",
|
|
98
|
+
className: searchInput
|
|
99
|
+
})
|
|
100
|
+
]
|
|
101
|
+
}),
|
|
102
|
+
/*#__PURE__*/ jsxs(Command.List, {
|
|
103
|
+
className: list,
|
|
104
|
+
children: [
|
|
105
|
+
/*#__PURE__*/ jsx(Command.Empty, {
|
|
106
|
+
className: empty,
|
|
107
|
+
children: "No matching times."
|
|
108
|
+
}),
|
|
109
|
+
options.map((time)=>/*#__PURE__*/ jsxs(Command.Item, {
|
|
110
|
+
value: format(parseTime(time), timeFormat),
|
|
111
|
+
onSelect: ()=>{
|
|
112
|
+
handleSelect(time);
|
|
113
|
+
},
|
|
114
|
+
className: item,
|
|
115
|
+
"data-selected": time === currentValue,
|
|
116
|
+
children: [
|
|
117
|
+
format(parseTime(time), timeFormat),
|
|
118
|
+
time === currentValue ? /*#__PURE__*/ jsx("span", {
|
|
119
|
+
className: itemIndicator,
|
|
120
|
+
children: /*#__PURE__*/ jsx(CheckIcon, {})
|
|
121
|
+
}) : null
|
|
122
|
+
]
|
|
123
|
+
}, time))
|
|
124
|
+
]
|
|
125
|
+
})
|
|
126
|
+
]
|
|
127
|
+
})
|
|
128
|
+
})
|
|
129
|
+
]
|
|
130
|
+
})
|
|
131
|
+
});
|
|
132
|
+
};
|
|
133
|
+
TimePicker.displayName = 'TimePicker';
|
|
134
|
+
const time_picker_TimePicker = TimePicker;
|
|
135
|
+
const time_picker = time_picker_TimePicker;
|
|
136
|
+
export default time_picker;
|
|
137
|
+
export { time_picker as TimePicker };
|
package/package.json
ADDED
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@vinyasa/form",
|
|
3
|
+
"version": "1.0.22",
|
|
4
|
+
"private": false,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"**/*.css"
|
|
8
|
+
],
|
|
9
|
+
"files": [
|
|
10
|
+
"dist",
|
|
11
|
+
"!dist/**/*.map",
|
|
12
|
+
"!dist/**/__story__/**",
|
|
13
|
+
"!dist/**/__test__/**",
|
|
14
|
+
"!dist/**/*.stories.d.ts",
|
|
15
|
+
"!dist/**/*.test.d.ts"
|
|
16
|
+
],
|
|
17
|
+
"publishConfig": {
|
|
18
|
+
"access": "public"
|
|
19
|
+
},
|
|
20
|
+
"main": "./dist/cjs/index.cjs",
|
|
21
|
+
"module": "./dist/esm/index.js",
|
|
22
|
+
"style": "./dist/esm/index.css",
|
|
23
|
+
"types": "./dist/esm/index.d.ts",
|
|
24
|
+
"exports": {
|
|
25
|
+
".": {
|
|
26
|
+
"types": "./dist/esm/index.d.ts",
|
|
27
|
+
"import": "./dist/esm/index.js",
|
|
28
|
+
"require": "./dist/cjs/index.cjs",
|
|
29
|
+
"default": "./dist/esm/index.js"
|
|
30
|
+
},
|
|
31
|
+
"./icon-button": {
|
|
32
|
+
"types": "./dist/esm/icon-button.d.ts",
|
|
33
|
+
"import": "./dist/esm/icon-button.js",
|
|
34
|
+
"require": "./dist/cjs/icon-button.cjs",
|
|
35
|
+
"default": "./dist/esm/icon-button.js"
|
|
36
|
+
},
|
|
37
|
+
"./toggle-button": {
|
|
38
|
+
"types": "./dist/esm/toggle-button.d.ts",
|
|
39
|
+
"import": "./dist/esm/toggle-button.js",
|
|
40
|
+
"require": "./dist/cjs/toggle-button.cjs",
|
|
41
|
+
"default": "./dist/esm/toggle-button.js"
|
|
42
|
+
},
|
|
43
|
+
"./input": {
|
|
44
|
+
"types": "./dist/esm/input.d.ts",
|
|
45
|
+
"import": "./dist/esm/input.js",
|
|
46
|
+
"require": "./dist/cjs/input.cjs",
|
|
47
|
+
"default": "./dist/esm/input.js"
|
|
48
|
+
},
|
|
49
|
+
"./input/style.css": "./dist/esm/input.css",
|
|
50
|
+
"./search-input": {
|
|
51
|
+
"types": "./dist/esm/search-input.d.ts",
|
|
52
|
+
"import": "./dist/esm/search-input.js",
|
|
53
|
+
"require": "./dist/cjs/search-input.cjs",
|
|
54
|
+
"default": "./dist/esm/search-input.js"
|
|
55
|
+
},
|
|
56
|
+
"./search-input/style.css": "./dist/esm/search-input.css",
|
|
57
|
+
"./password-input": {
|
|
58
|
+
"types": "./dist/esm/password-input.d.ts",
|
|
59
|
+
"import": "./dist/esm/password-input.js",
|
|
60
|
+
"require": "./dist/cjs/password-input.cjs",
|
|
61
|
+
"default": "./dist/esm/password-input.js"
|
|
62
|
+
},
|
|
63
|
+
"./password-input/style.css": "./dist/esm/password-input.css",
|
|
64
|
+
"./number-input": {
|
|
65
|
+
"types": "./dist/esm/number-input.d.ts",
|
|
66
|
+
"import": "./dist/esm/number-input.js",
|
|
67
|
+
"require": "./dist/cjs/number-input.cjs",
|
|
68
|
+
"default": "./dist/esm/number-input.js"
|
|
69
|
+
},
|
|
70
|
+
"./number-input/style.css": "./dist/esm/number-input.css",
|
|
71
|
+
"./textarea": {
|
|
72
|
+
"types": "./dist/esm/textarea.d.ts",
|
|
73
|
+
"import": "./dist/esm/textarea.js",
|
|
74
|
+
"require": "./dist/cjs/textarea.cjs",
|
|
75
|
+
"default": "./dist/esm/textarea.js"
|
|
76
|
+
},
|
|
77
|
+
"./textarea/style.css": "./dist/esm/textarea.css",
|
|
78
|
+
"./checkbox": {
|
|
79
|
+
"types": "./dist/esm/checkbox.d.ts",
|
|
80
|
+
"import": "./dist/esm/checkbox.js",
|
|
81
|
+
"require": "./dist/cjs/checkbox.cjs",
|
|
82
|
+
"default": "./dist/esm/checkbox.js"
|
|
83
|
+
},
|
|
84
|
+
"./checkbox/style.css": "./dist/esm/checkbox.css",
|
|
85
|
+
"./radio-group": {
|
|
86
|
+
"types": "./dist/esm/radio-group.d.ts",
|
|
87
|
+
"import": "./dist/esm/radio-group.js",
|
|
88
|
+
"require": "./dist/cjs/radio-group.cjs",
|
|
89
|
+
"default": "./dist/esm/radio-group.js"
|
|
90
|
+
},
|
|
91
|
+
"./radio-group/style.css": "./dist/esm/radio-group.css",
|
|
92
|
+
"./switch": {
|
|
93
|
+
"types": "./dist/esm/switch.d.ts",
|
|
94
|
+
"import": "./dist/esm/switch.js",
|
|
95
|
+
"require": "./dist/cjs/switch.cjs",
|
|
96
|
+
"default": "./dist/esm/switch.js"
|
|
97
|
+
},
|
|
98
|
+
"./switch/style.css": "./dist/esm/switch.css",
|
|
99
|
+
"./slider": {
|
|
100
|
+
"types": "./dist/esm/slider.d.ts",
|
|
101
|
+
"import": "./dist/esm/slider.js",
|
|
102
|
+
"require": "./dist/cjs/slider.cjs",
|
|
103
|
+
"default": "./dist/esm/slider.js"
|
|
104
|
+
},
|
|
105
|
+
"./slider/style.css": "./dist/esm/slider.css",
|
|
106
|
+
"./range-slider": {
|
|
107
|
+
"types": "./dist/esm/range-slider.d.ts",
|
|
108
|
+
"import": "./dist/esm/range-slider.js",
|
|
109
|
+
"require": "./dist/cjs/range-slider.cjs",
|
|
110
|
+
"default": "./dist/esm/range-slider.js"
|
|
111
|
+
},
|
|
112
|
+
"./range-slider/style.css": "./dist/esm/range-slider.css",
|
|
113
|
+
"./otp-input": {
|
|
114
|
+
"types": "./dist/esm/otp-input.d.ts",
|
|
115
|
+
"import": "./dist/esm/otp-input.js",
|
|
116
|
+
"require": "./dist/cjs/otp-input.cjs",
|
|
117
|
+
"default": "./dist/esm/otp-input.js"
|
|
118
|
+
},
|
|
119
|
+
"./otp-input/style.css": "./dist/esm/otp-input.css",
|
|
120
|
+
"./select": {
|
|
121
|
+
"types": "./dist/esm/select.d.ts",
|
|
122
|
+
"import": "./dist/esm/select.js",
|
|
123
|
+
"require": "./dist/cjs/select.cjs",
|
|
124
|
+
"default": "./dist/esm/select.js"
|
|
125
|
+
},
|
|
126
|
+
"./select/style.css": "./dist/esm/select.css",
|
|
127
|
+
"./combobox": {
|
|
128
|
+
"types": "./dist/esm/combobox.d.ts",
|
|
129
|
+
"import": "./dist/esm/combobox.js",
|
|
130
|
+
"require": "./dist/cjs/combobox.cjs",
|
|
131
|
+
"default": "./dist/esm/combobox.js"
|
|
132
|
+
},
|
|
133
|
+
"./combobox/style.css": "./dist/esm/combobox.css",
|
|
134
|
+
"./autocomplete": {
|
|
135
|
+
"types": "./dist/esm/autocomplete.d.ts",
|
|
136
|
+
"import": "./dist/esm/autocomplete.js",
|
|
137
|
+
"require": "./dist/cjs/autocomplete.cjs",
|
|
138
|
+
"default": "./dist/esm/autocomplete.js"
|
|
139
|
+
},
|
|
140
|
+
"./autocomplete/style.css": "./dist/esm/autocomplete.css",
|
|
141
|
+
"./multi-select": {
|
|
142
|
+
"types": "./dist/esm/multi-select.d.ts",
|
|
143
|
+
"import": "./dist/esm/multi-select.js",
|
|
144
|
+
"require": "./dist/cjs/multi-select.cjs",
|
|
145
|
+
"default": "./dist/esm/multi-select.js"
|
|
146
|
+
},
|
|
147
|
+
"./multi-select/style.css": "./dist/esm/multi-select.css",
|
|
148
|
+
"./tags-input": {
|
|
149
|
+
"types": "./dist/esm/tags-input.d.ts",
|
|
150
|
+
"import": "./dist/esm/tags-input.js",
|
|
151
|
+
"require": "./dist/cjs/tags-input.cjs",
|
|
152
|
+
"default": "./dist/esm/tags-input.js"
|
|
153
|
+
},
|
|
154
|
+
"./tags-input/style.css": "./dist/esm/tags-input.css",
|
|
155
|
+
"./date-picker": {
|
|
156
|
+
"types": "./dist/esm/date-picker.d.ts",
|
|
157
|
+
"import": "./dist/esm/date-picker.js",
|
|
158
|
+
"require": "./dist/cjs/date-picker.cjs",
|
|
159
|
+
"default": "./dist/esm/date-picker.js"
|
|
160
|
+
},
|
|
161
|
+
"./date-picker/style.css": "./dist/esm/date-picker.css",
|
|
162
|
+
"./time-picker": {
|
|
163
|
+
"types": "./dist/esm/time-picker.d.ts",
|
|
164
|
+
"import": "./dist/esm/time-picker.js",
|
|
165
|
+
"require": "./dist/cjs/time-picker.cjs",
|
|
166
|
+
"default": "./dist/esm/time-picker.js"
|
|
167
|
+
},
|
|
168
|
+
"./time-picker/style.css": "./dist/esm/time-picker.css",
|
|
169
|
+
"./color-picker": {
|
|
170
|
+
"types": "./dist/esm/color-picker.d.ts",
|
|
171
|
+
"import": "./dist/esm/color-picker.js",
|
|
172
|
+
"require": "./dist/cjs/color-picker.cjs",
|
|
173
|
+
"default": "./dist/esm/color-picker.js"
|
|
174
|
+
},
|
|
175
|
+
"./color-picker/style.css": "./dist/esm/color-picker.css",
|
|
176
|
+
"./file-upload": {
|
|
177
|
+
"types": "./dist/esm/file-upload.d.ts",
|
|
178
|
+
"import": "./dist/esm/file-upload.js",
|
|
179
|
+
"require": "./dist/cjs/file-upload.cjs",
|
|
180
|
+
"default": "./dist/esm/file-upload.js"
|
|
181
|
+
},
|
|
182
|
+
"./file-upload/style.css": "./dist/esm/file-upload.css",
|
|
183
|
+
"./dropzone": {
|
|
184
|
+
"types": "./dist/esm/dropzone.d.ts",
|
|
185
|
+
"import": "./dist/esm/dropzone.js",
|
|
186
|
+
"require": "./dist/cjs/dropzone.cjs",
|
|
187
|
+
"default": "./dist/esm/dropzone.js"
|
|
188
|
+
},
|
|
189
|
+
"./dropzone/style.css": "./dist/esm/dropzone.css",
|
|
190
|
+
"./rich-text-editor": {
|
|
191
|
+
"types": "./dist/esm/rich-text-editor.d.ts",
|
|
192
|
+
"import": "./dist/esm/rich-text-editor.js",
|
|
193
|
+
"require": "./dist/cjs/rich-text-editor.cjs",
|
|
194
|
+
"default": "./dist/esm/rich-text-editor.js"
|
|
195
|
+
},
|
|
196
|
+
"./rich-text-editor/style.css": "./dist/esm/rich-text-editor.css",
|
|
197
|
+
"./style.css": "./dist/esm/index.css",
|
|
198
|
+
"./package.json": "./package.json"
|
|
199
|
+
},
|
|
200
|
+
"peerDependencies": {
|
|
201
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
202
|
+
"react-dom": "^18.0.0 || ^19.0.0",
|
|
203
|
+
"@vinyasa/button": "^1.0.22",
|
|
204
|
+
"@vinyasa/layout": "^1.0.22",
|
|
205
|
+
"@vinyasa/icons": "^1.0.22",
|
|
206
|
+
"@vinyasa/tokens": "^1.0.22"
|
|
207
|
+
},
|
|
208
|
+
"dependencies": {
|
|
209
|
+
"@radix-ui/react-checkbox": "^1.3.11",
|
|
210
|
+
"@radix-ui/react-popover": "^1.1.23",
|
|
211
|
+
"@radix-ui/react-radio-group": "^1.4.7",
|
|
212
|
+
"@radix-ui/react-select": "^2.3.7",
|
|
213
|
+
"@radix-ui/react-slider": "^1.4.7",
|
|
214
|
+
"@radix-ui/react-switch": "^1.3.7",
|
|
215
|
+
"@radix-ui/react-toggle": "^1.1.18",
|
|
216
|
+
"@tiptap/core": "^3.31.3",
|
|
217
|
+
"@tiptap/pm": "^3.31.3",
|
|
218
|
+
"@tiptap/react": "^3.31.3",
|
|
219
|
+
"@tiptap/starter-kit": "^3.31.3",
|
|
220
|
+
"cmdk": "^1.1.1",
|
|
221
|
+
"date-fns": "^4.4.0",
|
|
222
|
+
"input-otp": "^1.5.0",
|
|
223
|
+
"react-colorful": "^5.8.1",
|
|
224
|
+
"react-day-picker": "^10.0.1",
|
|
225
|
+
"react-dropzone": "^20.1.1"
|
|
226
|
+
},
|
|
227
|
+
"devDependencies": {
|
|
228
|
+
"@rsbuild/plugin-react": "^2.1.0",
|
|
229
|
+
"@rslib/core": "^0.23.1",
|
|
230
|
+
"@storybook/react-vite": "^10.4.6",
|
|
231
|
+
"@types/node": "^26.0.1",
|
|
232
|
+
"@types/react": "^19.0.0",
|
|
233
|
+
"@vanilla-extract/css": "^1.21.0",
|
|
234
|
+
"@vanilla-extract/recipes": "^0.5.7",
|
|
235
|
+
"@vanilla-extract/vite-plugin": "^5.2.3",
|
|
236
|
+
"@vanilla-extract/webpack-plugin": "^2.3.27",
|
|
237
|
+
"typescript": "^5.7.3",
|
|
238
|
+
"@vinyasa/icons": "1.0.22",
|
|
239
|
+
"@vinyasa/layout": "1.0.22",
|
|
240
|
+
"@vinyasa/tokens": "1.0.22",
|
|
241
|
+
"@vinyasa/button": "1.0.22"
|
|
242
|
+
},
|
|
243
|
+
"scripts": {
|
|
244
|
+
"build": "rslib build && node ../../scripts/postbuild-package.mjs",
|
|
245
|
+
"typecheck": "tsc --noEmit -p tsconfig.json",
|
|
246
|
+
"lint": "eslint --config ../../configs/eslint.config.mjs src/**/*.{ts,tsx} --ignore-pattern src/**/__story__/** --ignore-pattern src/**/__test__/**",
|
|
247
|
+
"lint:fix": "eslint --config ../../configs/eslint.config.mjs src/**/*.{ts,tsx} --ignore-pattern src/**/__story__/** --ignore-pattern src/**/__test__/** --fix",
|
|
248
|
+
"format": "prettier . --config ../../configs/prettier.config.json --ignore-path ../../configs/.prettierignore --write",
|
|
249
|
+
"format:check": "prettier . --config ../../configs/prettier.config.json --ignore-path ../../configs/.prettierignore --check",
|
|
250
|
+
"test": "vitest run --config vitest.config.ts",
|
|
251
|
+
"test:watch": "vitest --config vitest.config.ts",
|
|
252
|
+
"test:coverage": "vitest run --config vitest.config.ts --coverage",
|
|
253
|
+
"pack:check": "npm pack --dry-run"
|
|
254
|
+
}
|
|
255
|
+
}
|