@plastic-js/tsumiki 0.1.22 → 0.1.24
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 +838 -65
- package/dist/components/Accordion.js +93 -4
- package/dist/components/Avatar.js +96 -4
- package/dist/components/BottomSheet.js +131 -0
- package/dist/components/Button.js +194 -0
- package/dist/components/CardNumberInput.js +28 -44
- package/dist/components/Carousel.js +71 -5
- package/dist/components/Checkbox.js +178 -4
- package/dist/components/Clipboard.js +135 -5
- package/dist/components/CloseButton.js +97 -0
- package/dist/components/Collapsible.js +22 -4
- package/dist/components/ColorPicker.js +327 -4
- package/dist/components/Combobox.js +86 -13
- package/dist/components/ConfirmDialog.js +174 -19
- package/dist/components/DateInput.js +437 -5
- package/dist/components/{DatePickerMobile/wheel.js → DateWheel.js} +1 -3
- package/dist/components/Dialog.js +214 -110
- package/dist/components/Drawer.js +169 -4
- package/dist/components/Field.js +121 -5
- package/dist/components/Fieldset.js +64 -5
- package/dist/components/FileUpload.js +181 -4
- package/dist/components/FocusTrap.js +0 -2
- package/dist/components/Icon.js +32 -17
- package/dist/components/Input.js +211 -0
- package/dist/components/Listbox.js +47 -4
- package/dist/components/Menu.js +99 -4
- package/dist/components/MoneyInput.js +33 -85
- package/dist/components/NumberInput.js +117 -4
- package/dist/components/Pagination.js +91 -5
- package/dist/components/Popover.js +123 -4
- package/dist/components/Portal.js +0 -2
- package/dist/components/Presence.js +0 -2
- package/dist/components/Progress.js +107 -4
- package/dist/components/RadioGroup.js +104 -4
- package/dist/components/RatingGroup.js +75 -4
- package/dist/components/SearchInput.js +60 -55
- package/dist/components/Select.js +428 -5
- package/dist/components/SelectPc.js +239 -0
- package/dist/components/SignaturePad.js +77 -4
- package/dist/components/Skeleton.js +2 -4
- package/dist/components/Slider.js +112 -4
- package/dist/components/Spinner.js +41 -0
- package/dist/components/Splitter.js +51 -4
- package/dist/components/Steps.js +259 -4
- package/dist/components/SwipeReveal.js +2 -4
- package/dist/components/Switch.js +147 -4
- package/dist/components/Tabs.js +80 -4
- package/dist/components/TagsInput.js +128 -4
- package/dist/components/Toast.js +174 -4
- package/dist/components/Toggle.js +39 -4
- package/dist/components/ToggleGroup.js +103 -4
- package/dist/components/Tour.js +63 -4
- package/dist/components/TreeView.js +113 -4
- package/dist/index.js +44 -45
- package/dist/tsumiki.css +1 -0
- package/docs/api.md +670 -0
- package/docs/component-api-pattern.md +362 -0
- package/package.json +16 -6
- package/src/styles/color.css +112 -0
- package/src/styles/index.css +1 -0
- package/src/styles/radius.css +27 -0
- package/src/styles/reset.css +111 -0
- package/src/styles/shadow.css +5 -0
- package/src/styles/sizing.css +59 -0
- package/src/styles/spacing.css +9 -0
- package/src/styles/theme.css +38 -0
- package/src/styles/tokens.css +22 -0
- package/src/styles/transition.css +5 -0
- package/src/styles/typography.css +8 -0
- package/dist/components/Accordion.js.map +0 -1
- package/dist/components/Avatar.js.map +0 -1
- package/dist/components/CardNumberInput.js.map +0 -1
- package/dist/components/Carousel.js.map +0 -1
- package/dist/components/Checkbox.js.map +0 -1
- package/dist/components/Clipboard.js.map +0 -1
- package/dist/components/Collapsible.js.map +0 -1
- package/dist/components/ColorPicker.js.map +0 -1
- package/dist/components/Combobox.js.map +0 -1
- package/dist/components/ConfirmDialog.js.map +0 -1
- package/dist/components/DateInput.js.map +0 -1
- package/dist/components/DatePicker.js +0 -7
- package/dist/components/DatePicker.js.map +0 -1
- package/dist/components/DatePickerMobile/index.js +0 -479
- package/dist/components/DatePickerMobile/index.js.map +0 -1
- package/dist/components/DatePickerMobile/wheel.js.map +0 -1
- package/dist/components/Dialog.js.map +0 -1
- package/dist/components/Drawer.js.map +0 -1
- package/dist/components/Field.js.map +0 -1
- package/dist/components/Fieldset.js.map +0 -1
- package/dist/components/FileUpload.js.map +0 -1
- package/dist/components/FilterableSelect.js +0 -210
- package/dist/components/FilterableSelect.js.map +0 -1
- package/dist/components/FilterableSelectMobile.js +0 -167
- package/dist/components/FilterableSelectMobile.js.map +0 -1
- package/dist/components/FocusTrap.js.map +0 -1
- package/dist/components/HoverCard.js +0 -7
- package/dist/components/HoverCard.js.map +0 -1
- package/dist/components/Icon.js.map +0 -1
- package/dist/components/Listbox.js.map +0 -1
- package/dist/components/Menu.js.map +0 -1
- package/dist/components/MoneyInput.js.map +0 -1
- package/dist/components/NumberInput.js.map +0 -1
- package/dist/components/Pagination.js.map +0 -1
- package/dist/components/Popover.js.map +0 -1
- package/dist/components/Portal.js.map +0 -1
- package/dist/components/Presence.js.map +0 -1
- package/dist/components/Progress.js.map +0 -1
- package/dist/components/RadioGroup.js.map +0 -1
- package/dist/components/RatingGroup.js.map +0 -1
- package/dist/components/SearchInput.js.map +0 -1
- package/dist/components/Select.js.map +0 -1
- package/dist/components/SelectMobile/anatomy.js +0 -10
- package/dist/components/SelectMobile/anatomy.js.map +0 -1
- package/dist/components/SelectMobile/index.js +0 -310
- package/dist/components/SelectMobile/index.js.map +0 -1
- package/dist/components/SignaturePad.js.map +0 -1
- package/dist/components/Skeleton.js.map +0 -1
- package/dist/components/Slider.js.map +0 -1
- package/dist/components/Splitter.js.map +0 -1
- package/dist/components/Steps.js.map +0 -1
- package/dist/components/SwipeReveal.js.map +0 -1
- package/dist/components/Switch.js.map +0 -1
- package/dist/components/Tabs.js.map +0 -1
- package/dist/components/TagsInput.js.map +0 -1
- package/dist/components/Toast.js.map +0 -1
- package/dist/components/Toggle.js.map +0 -1
- package/dist/components/ToggleGroup.js.map +0 -1
- package/dist/components/Tooltip.js +0 -7
- package/dist/components/Tooltip.js.map +0 -1
- package/dist/components/Tour.js.map +0 -1
- package/dist/components/TreeView.js.map +0 -1
- package/dist/node_modules/framesync/dist/es/create-render-step.js +0 -54
- package/dist/node_modules/framesync/dist/es/create-render-step.js.map +0 -1
- package/dist/node_modules/framesync/dist/es/index.js +0 -61
- package/dist/node_modules/framesync/dist/es/index.js.map +0 -1
- package/dist/node_modules/framesync/dist/es/on-next-frame.js +0 -8
- package/dist/node_modules/framesync/dist/es/on-next-frame.js.map +0 -1
- package/dist/node_modules/hey-listen/dist/hey-listen.es.js +0 -15
- package/dist/node_modules/hey-listen/dist/hey-listen.es.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/animations/generators/decay.js +0 -24
- package/dist/node_modules/popmotion/dist/es/animations/generators/decay.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/animations/generators/keyframes.js +0 -40
- package/dist/node_modules/popmotion/dist/es/animations/generators/keyframes.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/animations/generators/spring.js +0 -96
- package/dist/node_modules/popmotion/dist/es/animations/generators/spring.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/animations/index.js +0 -94
- package/dist/node_modules/popmotion/dist/es/animations/index.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/animations/inertia.js +0 -74
- package/dist/node_modules/popmotion/dist/es/animations/inertia.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/animations/utils/detect-animation-from-options.js +0 -21
- package/dist/node_modules/popmotion/dist/es/animations/utils/detect-animation-from-options.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/animations/utils/elapsed.js +0 -14
- package/dist/node_modules/popmotion/dist/es/animations/utils/elapsed.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/animations/utils/find-spring.js +0 -68
- package/dist/node_modules/popmotion/dist/es/animations/utils/find-spring.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/easing/index.js +0 -28
- package/dist/node_modules/popmotion/dist/es/easing/index.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/easing/utils.js +0 -13
- package/dist/node_modules/popmotion/dist/es/easing/utils.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/utils/clamp.js +0 -6
- package/dist/node_modules/popmotion/dist/es/utils/clamp.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/utils/hsla-to-rgba.js +0 -35
- package/dist/node_modules/popmotion/dist/es/utils/hsla-to-rgba.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/utils/inc.js +0 -6
- package/dist/node_modules/popmotion/dist/es/utils/inc.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/utils/interpolate.js +0 -69
- package/dist/node_modules/popmotion/dist/es/utils/interpolate.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/utils/mix-color.js +0 -45
- package/dist/node_modules/popmotion/dist/es/utils/mix-color.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/utils/mix-complex.js +0 -61
- package/dist/node_modules/popmotion/dist/es/utils/mix-complex.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/utils/mix.js +0 -6
- package/dist/node_modules/popmotion/dist/es/utils/mix.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/utils/pipe.js +0 -7
- package/dist/node_modules/popmotion/dist/es/utils/pipe.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/utils/progress.js +0 -9
- package/dist/node_modules/popmotion/dist/es/utils/progress.js.map +0 -1
- package/dist/node_modules/popmotion/dist/es/utils/velocity-per-second.js +0 -8
- package/dist/node_modules/popmotion/dist/es/utils/velocity-per-second.js.map +0 -1
- package/dist/node_modules/popmotion/node_modules/tslib/tslib.es6.js +0 -13
- package/dist/node_modules/popmotion/node_modules/tslib/tslib.es6.js.map +0 -1
- package/dist/node_modules/style-value-types/dist/es/color/hex.js +0 -39
- package/dist/node_modules/style-value-types/dist/es/color/hex.js.map +0 -1
- package/dist/node_modules/style-value-types/dist/es/color/hsla.js +0 -16
- package/dist/node_modules/style-value-types/dist/es/color/hsla.js.map +0 -1
- package/dist/node_modules/style-value-types/dist/es/color/index.js +0 -20
- package/dist/node_modules/style-value-types/dist/es/color/index.js.map +0 -1
- package/dist/node_modules/style-value-types/dist/es/color/rgba.js +0 -15
- package/dist/node_modules/style-value-types/dist/es/color/rgba.js.map +0 -1
- package/dist/node_modules/style-value-types/dist/es/color/utils.js +0 -19
- package/dist/node_modules/style-value-types/dist/es/color/utils.js.map +0 -1
- package/dist/node_modules/style-value-types/dist/es/complex/index.js +0 -58
- package/dist/node_modules/style-value-types/dist/es/complex/index.js.map +0 -1
- package/dist/node_modules/style-value-types/dist/es/numbers/index.js +0 -13
- package/dist/node_modules/style-value-types/dist/es/numbers/index.js.map +0 -1
- package/dist/node_modules/style-value-types/dist/es/numbers/units.js +0 -16
- package/dist/node_modules/style-value-types/dist/es/numbers/units.js.map +0 -1
- package/dist/node_modules/style-value-types/dist/es/utils.js +0 -13
- package/dist/node_modules/style-value-types/dist/es/utils.js.map +0 -1
|
@@ -1,210 +0,0 @@
|
|
|
1
|
-
import { Combobox, useComboboxContext } from "@plastic-js/ark";
|
|
2
|
-
import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
|
|
3
|
-
import { Loop, createComputed, createContext, createEffect, createSignal, splitProps, useContext } from "@plastic-js/plastic";
|
|
4
|
-
import { collection } from "@zag-js/combobox";
|
|
5
|
-
//#region src/components/FilterableSelect.jsx
|
|
6
|
-
var _tmpl5 = template("<span></span>");
|
|
7
|
-
var _tmpl4 = template("<button type=\"button\" aria-label=\"Clear search\"></button>");
|
|
8
|
-
var _tmpl3 = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>");
|
|
9
|
-
var _tmpl2 = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2.5\" viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>");
|
|
10
|
-
var _tmpl = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>");
|
|
11
|
-
var access = (value) => {
|
|
12
|
-
return typeof value === "function" ? value() : value;
|
|
13
|
-
};
|
|
14
|
-
var FilterContext = createContext(null);
|
|
15
|
-
var defaultItemToValue = (item) => String(item?.value ?? item?.id ?? item);
|
|
16
|
-
var defaultItemToString = (item) => String(item?.label ?? item?.name ?? item);
|
|
17
|
-
var defaultFilter = (item, query, itemToString) => itemToString(item).toLowerCase().includes(query);
|
|
18
|
-
var Root = (props = {}) => {
|
|
19
|
-
const [local, rest] = splitProps(props, [
|
|
20
|
-
"items",
|
|
21
|
-
"itemToValue",
|
|
22
|
-
"itemToString",
|
|
23
|
-
"filter",
|
|
24
|
-
"inputValue",
|
|
25
|
-
"onInputValueChange",
|
|
26
|
-
"children"
|
|
27
|
-
]);
|
|
28
|
-
const itemToValue = local.itemToValue ?? defaultItemToValue;
|
|
29
|
-
const itemToString = local.itemToString ?? defaultItemToString;
|
|
30
|
-
const filter = local.filter ?? defaultFilter;
|
|
31
|
-
const rawValue = access(rest.value);
|
|
32
|
-
const normalizedValue = rawValue == null ? [] : [rawValue];
|
|
33
|
-
const handleValueChange = (value) => {
|
|
34
|
-
const v = value.length >= 1 ? value[0] : null;
|
|
35
|
-
rest.onValueChange?.(v);
|
|
36
|
-
};
|
|
37
|
-
const query = createSignal(access(local.inputValue) ?? "");
|
|
38
|
-
const filteredItems = createComputed(() => {
|
|
39
|
-
const q = query().trim().toLowerCase();
|
|
40
|
-
const list = access(local.items) ?? [];
|
|
41
|
-
return q ? list.filter((item) => filter(item, q, itemToString)) : list;
|
|
42
|
-
});
|
|
43
|
-
const collection$1 = createComputed(() => collection({
|
|
44
|
-
items: filteredItems(),
|
|
45
|
-
itemToValue,
|
|
46
|
-
itemToString
|
|
47
|
-
}));
|
|
48
|
-
return jsx(FilterContext.Provider, mergeProps({
|
|
49
|
-
value: filteredItems,
|
|
50
|
-
children: () => jsx(Combobox.Root, mergeProps(rest, {
|
|
51
|
-
value: normalizedValue,
|
|
52
|
-
onValueChange: handleValueChange,
|
|
53
|
-
collection: collection$1,
|
|
54
|
-
inputValue: query,
|
|
55
|
-
onInputValueChange: (value) => {
|
|
56
|
-
query(value);
|
|
57
|
-
local.onInputValueChange?.(value);
|
|
58
|
-
},
|
|
59
|
-
children: [jsx(HighlightSingleMatch, mergeProps({
|
|
60
|
-
itemToValue,
|
|
61
|
-
items: filteredItems
|
|
62
|
-
})), () => local.children]
|
|
63
|
-
}))
|
|
64
|
-
}));
|
|
65
|
-
};
|
|
66
|
-
var HighlightSingleMatch = (props = {}) => {
|
|
67
|
-
const combobox = useComboboxContext();
|
|
68
|
-
createEffect(() => {
|
|
69
|
-
const api = combobox();
|
|
70
|
-
const list = props.items();
|
|
71
|
-
if (!api.open || list.length !== 1) return;
|
|
72
|
-
const value = props.itemToValue(list[0]);
|
|
73
|
-
if (api.highlightedValue !== value) api.setHighlightValue(value);
|
|
74
|
-
});
|
|
75
|
-
return null;
|
|
76
|
-
};
|
|
77
|
-
var Input = (props = {}) => {
|
|
78
|
-
const combobox = useComboboxContext();
|
|
79
|
-
return jsx(Combobox.Input, mergeProps(props, { onInput: (event) => combobox().getInputProps().onChange?.(event) }));
|
|
80
|
-
};
|
|
81
|
-
var Items = (props = {}) => {
|
|
82
|
-
return jsx(Loop, mergeProps({
|
|
83
|
-
each: useContext(FilterContext) ?? [],
|
|
84
|
-
children: (item) => props.children?.(item)
|
|
85
|
-
}));
|
|
86
|
-
};
|
|
87
|
-
function ChevronIcon() {
|
|
88
|
-
return _tmpl.cloneNode(true);
|
|
89
|
-
}
|
|
90
|
-
function CheckIcon() {
|
|
91
|
-
return _tmpl2.cloneNode(true);
|
|
92
|
-
}
|
|
93
|
-
function XIcon() {
|
|
94
|
-
return _tmpl3.cloneNode(true);
|
|
95
|
-
}
|
|
96
|
-
var ClearButton = (props = {}) => {
|
|
97
|
-
const combobox = useComboboxContext();
|
|
98
|
-
const handleClick = (event) => {
|
|
99
|
-
event.preventDefault();
|
|
100
|
-
event.stopPropagation();
|
|
101
|
-
combobox().setInputValue("");
|
|
102
|
-
props.onClick?.(event);
|
|
103
|
-
};
|
|
104
|
-
return () => {
|
|
105
|
-
const _el0 = _tmpl4.cloneNode(true);
|
|
106
|
-
insert(_el0, () => jsx(XIcon, {}));
|
|
107
|
-
setProp(_el0, "className", () => props.className);
|
|
108
|
-
setProp(_el0, "onClick", () => handleClick);
|
|
109
|
-
setProp(_el0, "onPointerDown", (e) => e.preventDefault());
|
|
110
|
-
setProp(_el0, "tabIndex", () => -1);
|
|
111
|
-
return _el0;
|
|
112
|
-
};
|
|
113
|
-
};
|
|
114
|
-
var FilterableSelect = (props = {}) => {
|
|
115
|
-
const [local, rest] = splitProps(props, [
|
|
116
|
-
"items",
|
|
117
|
-
"itemToString",
|
|
118
|
-
"itemToValue",
|
|
119
|
-
"placeholder",
|
|
120
|
-
"label",
|
|
121
|
-
"openOnClick",
|
|
122
|
-
"disabled",
|
|
123
|
-
"classNames",
|
|
124
|
-
"emptyText"
|
|
125
|
-
]);
|
|
126
|
-
const cn = local.classNames ?? {};
|
|
127
|
-
return jsx(Root, mergeProps({
|
|
128
|
-
get itemToString() {
|
|
129
|
-
return local.itemToString;
|
|
130
|
-
},
|
|
131
|
-
get itemToValue() {
|
|
132
|
-
return local.itemToValue;
|
|
133
|
-
},
|
|
134
|
-
get items() {
|
|
135
|
-
return local.items;
|
|
136
|
-
},
|
|
137
|
-
get openOnClick() {
|
|
138
|
-
return local.openOnClick ?? true;
|
|
139
|
-
}
|
|
140
|
-
}, rest, { children: [
|
|
141
|
-
() => local.label && jsx(Combobox.Label, mergeProps({
|
|
142
|
-
get className() {
|
|
143
|
-
return cn.label;
|
|
144
|
-
},
|
|
145
|
-
children: () => local.label
|
|
146
|
-
})),
|
|
147
|
-
jsx(Combobox.Control, mergeProps({
|
|
148
|
-
get className() {
|
|
149
|
-
return cn.control;
|
|
150
|
-
},
|
|
151
|
-
children: [
|
|
152
|
-
jsx(Input, mergeProps({
|
|
153
|
-
get className() {
|
|
154
|
-
return cn.input;
|
|
155
|
-
},
|
|
156
|
-
get disabled() {
|
|
157
|
-
return local.disabled;
|
|
158
|
-
},
|
|
159
|
-
get placeholder() {
|
|
160
|
-
return local.placeholder ?? "Type to search...";
|
|
161
|
-
}
|
|
162
|
-
})),
|
|
163
|
-
jsx(ClearButton, mergeProps({ get className() {
|
|
164
|
-
return cn.clear;
|
|
165
|
-
} })),
|
|
166
|
-
jsx(Combobox.Trigger, mergeProps({
|
|
167
|
-
get className() {
|
|
168
|
-
return cn.trigger;
|
|
169
|
-
},
|
|
170
|
-
type: "button",
|
|
171
|
-
children: jsx(ChevronIcon, {})
|
|
172
|
-
}))
|
|
173
|
-
]
|
|
174
|
-
})),
|
|
175
|
-
jsx(Combobox.Content, mergeProps({
|
|
176
|
-
get className() {
|
|
177
|
-
return cn.content;
|
|
178
|
-
},
|
|
179
|
-
children: [jsx(Combobox.Empty, mergeProps({
|
|
180
|
-
get className() {
|
|
181
|
-
return cn.empty;
|
|
182
|
-
},
|
|
183
|
-
children: () => local.emptyText ?? "No results found"
|
|
184
|
-
})), jsx(Items, mergeProps({ children: (item) => jsx(Combobox.Item, mergeProps({
|
|
185
|
-
get className() {
|
|
186
|
-
return cn.item;
|
|
187
|
-
},
|
|
188
|
-
item,
|
|
189
|
-
get key() {
|
|
190
|
-
return local.itemToValue?.(item) ?? item;
|
|
191
|
-
},
|
|
192
|
-
children: [jsx(Combobox.ItemText, mergeProps({
|
|
193
|
-
get className() {
|
|
194
|
-
return cn.itemText;
|
|
195
|
-
},
|
|
196
|
-
children: () => local.itemToString?.(item) ?? String(item)
|
|
197
|
-
})), () => {
|
|
198
|
-
const _el0 = _tmpl5.cloneNode(true);
|
|
199
|
-
insert(_el0, () => jsx(CheckIcon, {}));
|
|
200
|
-
setProp(_el0, "className", () => cn.check);
|
|
201
|
-
return _el0;
|
|
202
|
-
}]
|
|
203
|
-
})) }))]
|
|
204
|
-
}))
|
|
205
|
-
] }));
|
|
206
|
-
};
|
|
207
|
-
//#endregion
|
|
208
|
-
export { FilterableSelect as default };
|
|
209
|
-
|
|
210
|
-
//# sourceMappingURL=FilterableSelect.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FilterableSelect.js","names":["Combobox","useComboboxContext","Loop","createComputed","createContext","createEffect","createSignal","splitProps","useContext","collection","createCollection","_tmpl5","_template","_tmpl4","_tmpl3","_tmpl2","_tmpl","access","value","FilterContext","defaultItemToValue","item","String","id","defaultItemToString","label","name","defaultFilter","query","itemToString","toLowerCase","includes","Root","props","local","rest","itemToValue","filter","rawValue","normalizedValue","handleValueChange","v","length","onValueChange","inputValue","filteredItems","q","trim","list","items","_jsx","Provider","_mergeProps","children","onInputValueChange","HighlightSingleMatch","combobox","api","open","highlightedValue","setHighlightValue","Input","onInput","event","getInputProps","onChange","Items","each","ChevronIcon","cloneNode","CheckIcon","XIcon","ClearButton","handleClick","preventDefault","stopPropagation","setInputValue","onClick","_el0","_insert","_setProp","className","e","FilterableSelect","cn","classNames","openOnClick","Label","Control","control","input","disabled","placeholder","clear","Trigger","trigger","type","Content","content","Empty","empty","emptyText","Item","key","ItemText","itemText","check"],"sources":["../../src/components/FilterableSelect.jsx"],"sourcesContent":["import { Combobox, useComboboxContext } from '@plastic-js/ark'\nimport {\n\tLoop, createComputed, createContext, createEffect, createSignal, splitProps, useContext,\n} from '@plastic-js/plastic'\nimport { collection as createCollection } from '@zag-js/combobox'\n\n// FilterableSelect — a filterable single-select built on the pure `Combobox`\n// primitive's underlying headless machine.\n//\n// This file owns two things:\n// 1. The filter plumbing. The headless component is \"controlled collection\"\n// only: it expects you to build a @zag-js collection yourself and narrow it\n// down as the user types. The internal <Root> keeps a query in sync with the\n// input, filters the list and feeds a reactive collection back to the\n// headless Root.\n// 2. The public API / contract. The default-exported <FilterableSelect> assembles\n// the full structure (label, control, input, trigger, content, items) and\n// exposes a flat prop API. It is intentionally style-agnostic: every visual\n// slot is themed through the `classNames` map, so the styling layer\n// only has to supply CSS.\n\nconst access = (value)=> {\n\treturn typeof value === 'function' ? value() : value\n}\n\n// Exposes the filtered items to <Items> without forcing the caller to thread\n// them through props.\nconst FilterContext = createContext(null)\n\nconst defaultItemToValue = item=> String(item?.value ?? item?.id ?? item)\nconst defaultItemToString = item=> String(item?.label ?? item?.name ?? item)\n\n// Substring match on the item's display string. Override via the `filter` prop\n// for fuzzy/score-based matching.\nconst defaultFilter = (item, query, itemToString)=> itemToString(item).toLowerCase().includes(query)\n\nconst Root = (props = {})=> {\n\tconst [local, rest] = splitProps(props, [\n\t\t'items', 'itemToValue', 'itemToString', 'filter', 'inputValue', 'onInputValueChange', 'children',\n\t])\n\n\tconst itemToValue = local.itemToValue ?? defaultItemToValue\n\tconst itemToString = local.itemToString ?? defaultItemToString\n\tconst filter = local.filter ?? defaultFilter\n\n\t// zag-js/combobox expects value to be an array (it calls .join(\",\")).\n\t// Single-select means a 0‑ or 1‑element array.\n\tconst rawValue = access(rest.value)\n\tconst normalizedValue = rawValue == null ? [] : [rawValue]\n\n\tconst handleValueChange = (value)=> {\n\t\tconst v = value.length >= 1 ? value[0] : null\n\t\trest.onValueChange?.(v)\n\t}\n\n\t// Internal query mirrors the input. We seed it from any `inputValue` the\n\t// caller passed so an initial/controlled value still filters correctly.\n\tconst query = createSignal(access(local.inputValue) ?? '')\n\n\t// Recomputes on typing and whenever the source `items` change. An empty\n\t// query shows everything; otherwise only the matches survive.\n\tconst filteredItems = createComputed(()=> {\n\t\tconst q = query().trim().toLowerCase()\n\t\tconst list = access(local.items) ?? []\n\t\treturn q ? list.filter(item=> filter(item, q, itemToString)) : list\n\t})\n\n\tconst collection = createComputed(()=> createCollection({\n\t\titems: filteredItems(),\n\t\titemToValue,\n\t\titemToString,\n\t}))\n\n\treturn (\n\t\t<FilterContext.Provider value={filteredItems}>\n\t\t\t<Combobox.Root\n\t\t\t\t{...rest}\n\t\t\t\tvalue={normalizedValue}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tcollection={collection}\n\t\t\t\tinputValue={query}\n\t\t\t\tonInputValueChange={(value)=> {\n\t\t\t\t\tquery(value)\n\t\t\t\t\tlocal.onInputValueChange?.(value)\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<HighlightSingleMatch itemToValue={itemToValue} items={filteredItems} />\n\t\t\t\t{local.children}\n\t\t\t</Combobox.Root>\n\t\t</FilterContext.Provider>\n\t)\n}\n\n// When the open list narrows to a single match, pre-highlight it so the user\n// can confirm with Enter/Tab without arrowing down. We nudge the machine's own\n// (uncontrolled) highlight imperatively rather than controlling `highlightedValue`\n// — controlling it would pin the highlight in place and fight the machine, e.g.\n// blocking the highlight-clear on the next keystroke and the select-and-close on\n// Enter. We only set it; the machine still clears/moves it on input and navigation.\nconst HighlightSingleMatch = (props = {})=> {\n\tconst combobox = useComboboxContext()\n\tcreateEffect(()=> {\n\t\tconst api = combobox()\n\t\tconst list = props.items()\n\t\tif (!api.open || list.length !== 1){ return }\n\t\tconst value = props.itemToValue(list[0])\n\t\tif (api.highlightedValue !== value){ api.setHighlightValue(value) }\n\t})\n\treturn null\n}\n\n// The headless input only fires zag's INPUT.CHANGE on the native `change`\n// event — which, unlike React's onChange, fires on blur, not per keystroke. So\n// typing never reached the machine and the list never filtered. We bridge the\n// per-keystroke `input` event to zag's own onChange handler so every character\n// drives the same INPUT.CHANGE (open + filter) behaviour.\nconst Input = (props = {})=> {\n\tconst combobox = useComboboxContext()\n\treturn (\n\t\t<Combobox.Input\n\t\t\t{...props}\n\t\t\tonInput={event=> combobox().getInputProps().onChange?.(event)}\n\t\t/>\n\t)\n}\n\n// Render-prop over the filtered items. Place inside <Combobox.Content> and\n// return a <Combobox.Item> for each match. Backed by <Loop> so the list stays\n// reactive — a bare thunk returned from a component is unwrapped once and would\n// never re-filter.\nconst Items = (props = {})=> {\n\tconst items = useContext(FilterContext)\n\treturn (\n\t\t<Loop each={items ?? []}>\n\t\t\t{item=> props.children?.(item)}\n\t\t</Loop>\n\t)\n}\n\nfunction ChevronIcon(){\n\treturn (\n\t\t<svg\n\t\t\tfill='none' stroke='currentColor' strokeLinecap='round' strokeLinejoin='round'\n\t\t\tstrokeWidth='2' viewBox='0 0 24 24'\n\t\t>\n\t\t\t<polyline points='6 9 12 15 18 9' />\n\t\t</svg>\n\t)\n}\n\nfunction CheckIcon(){\n\treturn (\n\t\t<svg\n\t\t\tfill='none' stroke='currentColor' strokeLinecap='round' strokeLinejoin='round'\n\t\t\tstrokeWidth='2.5' viewBox='0 0 24 24'\n\t\t>\n\t\t\t<polyline points='20 6 9 17 4 12' />\n\t\t</svg>\n\t)\n}\n\nfunction XIcon(){\n\treturn (\n\t\t<svg\n\t\t\tfill='none' stroke='currentColor' strokeLinecap='round' strokeLinejoin='round'\n\t\t\tstrokeWidth='2' viewBox='0 0 24 24'\n\t\t>\n\t\t\t<line x1='18' y1='6' x2='6' y2='18' />\n\t\t\t<line x1='6' y1='6' x2='18' y2='18' />\n\t\t</svg>\n\t)\n}\n\n// Clears the filter query (not the selected value). Sits inside the control\n// next to the trigger chevron so the user can reset their search without\n// reaching for Backspace.\nconst ClearButton = (props = {})=> {\n\tconst combobox = useComboboxContext()\n\tconst handleClick = (event)=> {\n\t\tevent.preventDefault()\n\t\tevent.stopPropagation()\n\t\tcombobox().setInputValue('')\n\t\tprops.onClick?.(event)\n\t}\n\treturn (\n\t\t<button\n\t\t\ttype='button'\n\t\t\tclassName={props.className}\n\t\t\tonClick={handleClick}\n\t\t\tonPointerDown={e=> e.preventDefault()}\n\t\t\ttabIndex={-1}\n\t\t\taria-label='Clear search'\n\t\t>\n\t\t\t<XIcon />\n\t\t</button>\n\t)\n}\n\n// Public component. `classNames` themes each slot (control/input/trigger/content/\n// empty/item/itemText/check/label); anything not split here (e.g. `filter`,\n// `name`) flows through to the filter Root.\nconst FilterableSelect = (props = {})=> {\n\tconst [local, rest] = splitProps(props, [\n\t\t'items',\n\t\t'itemToString',\n\t\t'itemToValue',\n\t\t'placeholder',\n\t\t'label',\n\t\t'openOnClick',\n\t\t'disabled',\n\t\t'classNames',\n\t\t'emptyText',\n\t])\n\n\tconst cn = local.classNames ?? {}\n\n\t// `value`, `onValueChange`, `filter`, `name`, … are not transformed here, so\n\t// they ride `rest` straight through to the underlying machine.\n\treturn (\n\t\t<Root\n\t\t\titemToString={local.itemToString}\n\t\t\titemToValue={local.itemToValue}\n\t\t\titems={local.items}\n\t\t\topenOnClick={local.openOnClick ?? true}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.label && (\n\t\t\t\t<Combobox.Label className={cn.label}>\n\t\t\t\t\t{local.label}\n\t\t\t\t</Combobox.Label>\n\t\t\t)}\n\t\t\t<Combobox.Control className={cn.control}>\n\t\t\t\t<Input\n\t\t\t\t\tclassName={cn.input}\n\t\t\t\t\tdisabled={local.disabled}\n\t\t\t\t\tplaceholder={local.placeholder ?? 'Type to search...'}\n\t\t\t\t/>\n\t\t\t\t<ClearButton className={cn.clear} />\n\t\t\t\t<Combobox.Trigger className={cn.trigger} type='button'>\n\t\t\t\t\t<ChevronIcon />\n\t\t\t\t</Combobox.Trigger>\n\t\t\t</Combobox.Control>\n\t\t\t<Combobox.Content className={cn.content}>\n\t\t\t\t<Combobox.Empty className={cn.empty}>\n\t\t\t\t\t{local.emptyText ?? 'No results found'}\n\t\t\t\t</Combobox.Empty>\n\t\t\t\t<Items>\n\t\t\t\t\t{item=> (\n\t\t\t\t\t\t<Combobox.Item className={cn.item} item={item} key={local.itemToValue?.(item) ?? item}>\n\t\t\t\t\t\t\t<Combobox.ItemText className={cn.itemText}>\n\t\t\t\t\t\t\t\t{local.itemToString?.(item) ?? String(item)}\n\t\t\t\t\t\t\t</Combobox.ItemText>\n\t\t\t\t\t\t\t<span className={cn.check}>\n\t\t\t\t\t\t\t\t<CheckIcon />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Combobox.Item>\n\t\t\t\t\t)}\n\t\t\t\t</Items>\n\t\t\t</Combobox.Content>\n\t\t</Root>\n\t)\n}\n\nexport default FilterableSelect\n"],"mappings":"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"}
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
import SelectMobile from "./SelectMobile/index.js";
|
|
2
|
-
import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
|
|
3
|
-
import { css } from "@emotion/css";
|
|
4
|
-
import { createSignal, splitProps } from "@plastic-js/plastic";
|
|
5
|
-
//#region src/components/FilterableSelectMobile.jsx
|
|
6
|
-
var _tmpl3 = template("<div>No results</div>");
|
|
7
|
-
var _tmpl2 = template("<div><input type=\"text\" placeholder=\"Filter…\"><button type=\"button\" aria-label=\"Clear search\"></button></div>");
|
|
8
|
-
var _tmpl = template("<svg fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>");
|
|
9
|
-
var inputWrapperClass = css({
|
|
10
|
-
position: "relative",
|
|
11
|
-
marginBottom: "6px",
|
|
12
|
-
"& button": { visibility: "hidden" },
|
|
13
|
-
"&:focus-within button": { visibility: "visible" }
|
|
14
|
-
});
|
|
15
|
-
var inputClass = css({
|
|
16
|
-
width: "100%",
|
|
17
|
-
height: "42px",
|
|
18
|
-
padding: "0 36px 0 14px",
|
|
19
|
-
background: "rgba(255,255,255,0.06)",
|
|
20
|
-
border: "1px solid var(--border)",
|
|
21
|
-
borderRadius: "10px",
|
|
22
|
-
color: "var(--ink)",
|
|
23
|
-
fontSize: "16px",
|
|
24
|
-
fontFamily: "inherit",
|
|
25
|
-
outline: "none",
|
|
26
|
-
boxSizing: "border-box",
|
|
27
|
-
"&:focus": { borderColor: "var(--accent)" },
|
|
28
|
-
"&::placeholder": { color: "var(--muted)" }
|
|
29
|
-
});
|
|
30
|
-
var clearButtonClass = css({
|
|
31
|
-
position: "absolute",
|
|
32
|
-
right: "8px",
|
|
33
|
-
top: "50%",
|
|
34
|
-
transform: "translateY(-50%)",
|
|
35
|
-
width: "24px",
|
|
36
|
-
height: "24px",
|
|
37
|
-
padding: "4px",
|
|
38
|
-
display: "flex",
|
|
39
|
-
alignItems: "center",
|
|
40
|
-
justifyContent: "center",
|
|
41
|
-
background: "none",
|
|
42
|
-
border: "none",
|
|
43
|
-
borderRadius: "4px",
|
|
44
|
-
color: "var(--muted)",
|
|
45
|
-
cursor: "pointer",
|
|
46
|
-
"&:hover": { color: "var(--ink)" },
|
|
47
|
-
"& svg": {
|
|
48
|
-
width: "100%",
|
|
49
|
-
height: "100%"
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
function XIcon() {
|
|
53
|
-
return _tmpl.cloneNode(true);
|
|
54
|
-
}
|
|
55
|
-
var noResultsClass = css({
|
|
56
|
-
padding: "20px 14px",
|
|
57
|
-
textAlign: "center",
|
|
58
|
-
color: "var(--muted)",
|
|
59
|
-
fontSize: "14px"
|
|
60
|
-
});
|
|
61
|
-
var defaultItemToValue = (item) => item?.value ?? item;
|
|
62
|
-
var defaultItemToLabel = (item) => item?.label ?? String(item);
|
|
63
|
-
var defaultFilter = (item, query, itemToLabel) => itemToLabel(item).toLowerCase().includes(query);
|
|
64
|
-
var FilterableSelectMobile = (props) => {
|
|
65
|
-
const [local] = splitProps(props, [
|
|
66
|
-
"items",
|
|
67
|
-
"value",
|
|
68
|
-
"onValueChange",
|
|
69
|
-
"itemToValue",
|
|
70
|
-
"itemToLabel",
|
|
71
|
-
"placeholder",
|
|
72
|
-
"filter",
|
|
73
|
-
"clearable",
|
|
74
|
-
"clearLabel",
|
|
75
|
-
"backdropClassName",
|
|
76
|
-
"backdropStyle",
|
|
77
|
-
"autoFocus"
|
|
78
|
-
]);
|
|
79
|
-
const itemToValue = local.itemToValue ?? defaultItemToValue;
|
|
80
|
-
const itemToLabel = local.itemToLabel ?? defaultItemToLabel;
|
|
81
|
-
const filter = local.filter ?? defaultFilter;
|
|
82
|
-
const query = createSignal("");
|
|
83
|
-
let inputEl = null;
|
|
84
|
-
const filteredItems = () => {
|
|
85
|
-
const q = query().trim().toLowerCase();
|
|
86
|
-
const list = typeof local.items === "function" ? local.items() : local.items ?? [];
|
|
87
|
-
return q ? list.filter((item) => filter(item, q, itemToLabel)) : list;
|
|
88
|
-
};
|
|
89
|
-
const handleOpenChange = (isOpen) => {
|
|
90
|
-
if (isOpen) {
|
|
91
|
-
if (local.autoFocus) queueMicrotask(() => inputEl?.focus());
|
|
92
|
-
} else query("");
|
|
93
|
-
};
|
|
94
|
-
return jsx(SelectMobile.Root, mergeProps({
|
|
95
|
-
get value() {
|
|
96
|
-
return local.value;
|
|
97
|
-
},
|
|
98
|
-
get onValueChange() {
|
|
99
|
-
return local.onValueChange;
|
|
100
|
-
},
|
|
101
|
-
get items() {
|
|
102
|
-
return local.items;
|
|
103
|
-
},
|
|
104
|
-
itemToValue,
|
|
105
|
-
itemToLabel,
|
|
106
|
-
onOpenChange: handleOpenChange,
|
|
107
|
-
children: [jsx(SelectMobile.Trigger, mergeProps({ get placeholder() {
|
|
108
|
-
return local.placeholder;
|
|
109
|
-
} })), jsx(SelectMobile.Content, mergeProps({
|
|
110
|
-
get clearable() {
|
|
111
|
-
return local.clearable;
|
|
112
|
-
},
|
|
113
|
-
get clearLabel() {
|
|
114
|
-
return local.clearLabel;
|
|
115
|
-
},
|
|
116
|
-
get backdropClassName() {
|
|
117
|
-
return local.backdropClassName;
|
|
118
|
-
},
|
|
119
|
-
get backdropStyle() {
|
|
120
|
-
return local.backdropStyle;
|
|
121
|
-
},
|
|
122
|
-
children: [() => {
|
|
123
|
-
const _el0 = _tmpl2.cloneNode(true);
|
|
124
|
-
const _el1 = _el0.firstChild;
|
|
125
|
-
const _el2 = _el0.firstChild.nextSibling;
|
|
126
|
-
setProp(_el1, "ref", (el) => {
|
|
127
|
-
inputEl = el;
|
|
128
|
-
});
|
|
129
|
-
setProp(_el1, "className", () => inputClass);
|
|
130
|
-
setProp(_el1, "value", () => query);
|
|
131
|
-
setProp(_el1, "onInput", (e) => query(e.target.value));
|
|
132
|
-
setProp(_el1, "onClick", (e) => e.stopPropagation());
|
|
133
|
-
setProp(_el1, "onPointerDown", (e) => {
|
|
134
|
-
e.target.focus({ preventScroll: true });
|
|
135
|
-
});
|
|
136
|
-
insert(_el2, () => jsx(XIcon, {}));
|
|
137
|
-
setProp(_el2, "className", () => clearButtonClass);
|
|
138
|
-
setProp(_el2, "onClick", (e) => {
|
|
139
|
-
e.stopPropagation();
|
|
140
|
-
query("");
|
|
141
|
-
inputEl?.focus();
|
|
142
|
-
});
|
|
143
|
-
setProp(_el2, "onPointerDown", (e) => e.preventDefault());
|
|
144
|
-
setProp(_el2, "tabIndex", () => -1);
|
|
145
|
-
setProp(_el0, "className", () => inputWrapperClass);
|
|
146
|
-
return _el0;
|
|
147
|
-
}, () => {
|
|
148
|
-
const list = filteredItems();
|
|
149
|
-
if (list.length === 0) return (() => {
|
|
150
|
-
const _el0 = _tmpl3.cloneNode(true);
|
|
151
|
-
setProp(_el0, "className", () => noResultsClass);
|
|
152
|
-
return _el0;
|
|
153
|
-
})();
|
|
154
|
-
return list.map((item) => jsx(SelectMobile.Item, mergeProps({
|
|
155
|
-
item,
|
|
156
|
-
get key() {
|
|
157
|
-
return itemToValue(item);
|
|
158
|
-
}
|
|
159
|
-
})));
|
|
160
|
-
}]
|
|
161
|
-
}))]
|
|
162
|
-
}));
|
|
163
|
-
};
|
|
164
|
-
//#endregion
|
|
165
|
-
export { FilterableSelectMobile as default };
|
|
166
|
-
|
|
167
|
-
//# sourceMappingURL=FilterableSelectMobile.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FilterableSelectMobile.js","names":["css","createSignal","splitProps","SelectMobile","_tmpl3","_template","_tmpl2","_tmpl","inputWrapperClass","position","marginBottom","visibility","inputClass","width","height","padding","background","border","borderRadius","color","fontSize","fontFamily","outline","boxSizing","borderColor","clearButtonClass","right","top","transform","display","alignItems","justifyContent","cursor","XIcon","cloneNode","noResultsClass","textAlign","defaultItemToValue","item","value","defaultItemToLabel","label","String","defaultFilter","query","itemToLabel","toLowerCase","includes","FilterableSelectMobile","props","local","itemToValue","filter","inputEl","filteredItems","q","trim","list","items","handleOpenChange","isOpen","autoFocus","queueMicrotask","focus","_jsx","Root","_mergeProps","onValueChange","onOpenChange","children","Trigger","placeholder","Content","clearable","clearLabel","backdropClassName","backdropStyle","_el0","_el1","firstChild","_el2","nextSibling","_setProp","el","e","target","stopPropagation","preventScroll","_insert","preventDefault","length","map","Item","key"],"sources":["../../src/components/FilterableSelectMobile.jsx"],"sourcesContent":["import { css } from '@emotion/css'\nimport { createSignal, splitProps } from '@plastic-js/plastic'\nimport { SelectMobile } from './SelectMobile/index.jsx'\n\n// ── Styles ───────────────────────────────────────────────────────────────\nconst inputWrapperClass = css({\n\tposition: 'relative',\n\tmarginBottom: '6px',\n\t'& button': { visibility: 'hidden' },\n\t'&:focus-within button': { visibility: 'visible' },\n})\n\nconst inputClass = css({\n\twidth: '100%',\n\theight: '42px',\n\tpadding: '0 36px 0 14px',\n\tbackground: 'rgba(255,255,255,0.06)',\n\tborder: '1px solid var(--border)',\n\tborderRadius: '10px',\n\tcolor: 'var(--ink)',\n\tfontSize: '16px',\n\tfontFamily: 'inherit',\n\toutline: 'none',\n\tboxSizing: 'border-box',\n\t'&:focus': { borderColor: 'var(--accent)' },\n\t'&::placeholder': { color: 'var(--muted)' },\n})\n\nconst clearButtonClass = css({\n\tposition: 'absolute',\n\tright: '8px',\n\ttop: '50%',\n\ttransform: 'translateY(-50%)',\n\twidth: '24px',\n\theight: '24px',\n\tpadding: '4px',\n\tdisplay: 'flex',\n\talignItems: 'center',\n\tjustifyContent: 'center',\n\tbackground: 'none',\n\tborder: 'none',\n\tborderRadius: '4px',\n\tcolor: 'var(--muted)',\n\tcursor: 'pointer',\n\t'&:hover': { color: 'var(--ink)' },\n\t'& svg': { width: '100%', height: '100%' },\n})\n\nfunction XIcon(){\n\treturn (\n\t\t<svg\n\t\t\tfill='none' stroke='currentColor' strokeLinecap='round' strokeLinejoin='round'\n\t\t\tstrokeWidth='2' viewBox='0 0 24 24'\n\t\t>\n\t\t\t<line x1='18' y1='6' x2='6' y2='18' />\n\t\t\t<line x1='6' y1='6' x2='18' y2='18' />\n\t\t</svg>\n\t)\n}\n\nconst noResultsClass = css({\n\tpadding: '20px 14px',\n\ttextAlign: 'center',\n\tcolor: 'var(--muted)',\n\tfontSize: '14px',\n})\n\n// ── Default accessors ────────────────────────────────────────────────────\nconst defaultItemToValue = item=> item?.value ?? item\nconst defaultItemToLabel = item=> item?.label ?? String(item)\nconst defaultFilter = (item, query, itemToLabel)=> itemToLabel(item).toLowerCase().includes(query)\n\n// ── FilterableSelectMobile ───────────────────────────────────────────────\n//\n// A mobile bottom-sheet select with a filter input at the top of the list.\n// Wraps SelectMobile internally — exposes a flat single-component API.\n//\n// Props:\n// items data array (or getter)\n// value current value (string | getter)\n// onValueChange (value) => void\n// itemToValue (item) => string — default item.value ?? item\n// itemToLabel (item) => string — default item.label ?? String(item)\n// placeholder trigger placeholder text — default \"Select\"\n// filter (item, query, itemToLabel) => boolean — default substring match\n// clearable show a \"clear\" row\n// clearLabel label for the clear row\n// backdropClassName className for the backdrop\n// backdropStyle inline style for the backdrop\n// autoFocus auto-focus the filter input when sheet opens — default false\nconst FilterableSelectMobile = (props)=> {\n\tconst [local] = splitProps(props, [\n\t\t'items', 'value', 'onValueChange',\n\t\t'itemToValue', 'itemToLabel',\n\t\t'placeholder', 'filter',\n\t\t'clearable', 'clearLabel',\n\t\t'backdropClassName', 'backdropStyle',\n\t\t'autoFocus',\n\t])\n\n\tconst itemToValue = local.itemToValue ?? defaultItemToValue\n\tconst itemToLabel = local.itemToLabel ?? defaultItemToLabel\n\tconst filter = local.filter ?? defaultFilter\n\n\tconst query = createSignal('')\n\tlet inputEl = null\n\n\t// Reactive filter — recomputes on typing and items changes.\n\tconst filteredItems = ()=> {\n\t\tconst q = query().trim().toLowerCase()\n\t\tconst list = typeof local.items === 'function' ? local.items() : (local.items ?? [])\n\t\treturn q ? list.filter(item=> filter(item, q, itemToLabel)) : list\n\t}\n\n\t// Auto-focus the input when the sheet opens; clear query on close.\n\tconst handleOpenChange = (isOpen)=> {\n\t\tif (isOpen){\n\t\t\tif (local.autoFocus) queueMicrotask(()=> inputEl?.focus())\n\t\t} else {\n\t\t\tquery('')\n\t\t}\n\t}\n\n\treturn (\n\t\t<SelectMobile.Root\n\t\t\tvalue={local.value}\n\t\t\tonValueChange={local.onValueChange}\n\t\t\titems={local.items}\n\t\t\titemToValue={itemToValue}\n\t\t\titemToLabel={itemToLabel}\n\t\t\tonOpenChange={handleOpenChange}\n\t\t>\n\t\t\t<SelectMobile.Trigger placeholder={local.placeholder} />\n\t\t\t<SelectMobile.Content\n\t\t\t\tclearable={local.clearable}\n\t\t\t\tclearLabel={local.clearLabel}\n\t\t\t\tbackdropClassName={local.backdropClassName}\n\t\t\t\tbackdropStyle={local.backdropStyle}\n\t\t\t>\n\t\t\t\t<div className={inputWrapperClass}>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={el=> { inputEl = el }}\n\t\t\t\t\t\ttype='text'\n\t\t\t\t\t\tclassName={inputClass}\n\t\t\t\t\t\tplaceholder='Filter…'\n\t\t\t\t\t\tvalue={query}\n\t\t\t\t\t\tonInput={e=> query(e.target.value)}\n\t\t\t\t\t\tonClick={e=> e.stopPropagation()}\n\t\t\t\t\t\tonPointerDown={e=> {\n\t\t\t\t\t\t\t// Defense-in-depth for Chrome iOS (WebKit) focus-lock bug.\n\t\t\t\t\t\t\t// The primary fix is in SelectMobile.Content (no <Portal>).\n\t\t\t\t\t\t\t// This handler ensures focus moves to the input even if a\n\t\t\t\t\t\t\t// previous button element still holds focus.\n\t\t\t\t\t\t\te.target.focus({ preventScroll: true })\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype='button'\n\t\t\t\t\t\tclassName={clearButtonClass}\n\t\t\t\t\t\tonClick={e=> {\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\tquery('')\n\t\t\t\t\t\t\tinputEl?.focus()\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonPointerDown={e=> e.preventDefault()}\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\taria-label='Clear search'\n\t\t\t\t\t>\n\t\t\t\t\t\t<XIcon />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t{()=> {\n\t\t\t\t\tconst list = filteredItems()\n\t\t\t\t\tif (list.length === 0){\n\t\t\t\t\t\treturn <div className={noResultsClass}>No results</div>\n\t\t\t\t\t}\n\t\t\t\t\treturn list.map(item => (\n\t\t\t\t\t\t<SelectMobile.Item item={item} key={itemToValue(item)} />\n\t\t\t\t\t))\n\t\t\t\t}}\n\t\t\t</SelectMobile.Content>\n\t\t</SelectMobile.Root>\n\t)\n}\n\nexport default FilterableSelectMobile"],"mappings":";;;;;AAIA,IAAAI,SAAAC,SAAA,uBAAA;AAAA,IAAAC,SAAAD,SAAA,uHAAA;AAAA,IAAAE,QAAAF,SAAA,kPAAA;AACA,IAAMG,oBAAoBR,IAAI;CAC7BS,UAAU;CACVC,cAAc;CACd,YAAY,EAAEC,YAAY,SAAS;CACnC,yBAAyB,EAAEA,YAAY,UAAU;AAClD,CAAC;AAED,IAAMC,aAAaZ,IAAI;CACtBa,OAAO;CACPC,QAAQ;CACRC,SAAS;CACTC,YAAY;CACZC,QAAQ;CACRC,cAAc;CACdC,OAAO;CACPC,UAAU;CACVC,YAAY;CACZC,SAAS;CACTC,WAAW;CACX,WAAW,EAAEC,aAAa,gBAAgB;CAC1C,kBAAkB,EAAEL,OAAO,eAAe;AAC3C,CAAC;AAED,IAAMM,mBAAmBzB,IAAI;CAC5BS,UAAU;CACViB,OAAO;CACPC,KAAK;CACLC,WAAW;CACXf,OAAO;CACPC,QAAQ;CACRC,SAAS;CACTc,SAAS;CACTC,YAAY;CACZC,gBAAgB;CAChBf,YAAY;CACZC,QAAQ;CACRC,cAAc;CACdC,OAAO;CACPa,QAAQ;CACR,WAAW,EAAEb,OAAO,aAAa;CACjC,SAAS;EAAEN,OAAO;EAAQC,QAAQ;CAAO;AAC1C,CAAC;AAED,SAASmB,QAAO;CACf,OAAA1B,MAAA2B,UAAA,IAAA;AASD;AAEA,IAAMC,iBAAiBnC,IAAI;CAC1Be,SAAS;CACTqB,WAAW;CACXjB,OAAO;CACPC,UAAU;AACX,CAAC;AAGD,IAAMiB,sBAAqBC,SAAOA,MAAMC,SAASD;AACjD,IAAME,sBAAqBF,SAAOA,MAAMG,SAASC,OAAOJ,IAAI;AAC5D,IAAMK,iBAAiBL,MAAMM,OAAOC,gBAAeA,YAAYP,IAAI,EAAEQ,YAAY,EAAEC,SAASH,KAAK;AAoBjG,IAAMI,0BAA0BC,UAAS;CACxC,MAAM,CAACC,SAAShD,WAAW+C,OAAO;EACjC;EAAS;EAAS;EAClB;EAAe;EACf;EAAe;EACf;EAAa;EACb;EAAqB;EACrB;CAAW,CACX;CAED,MAAME,cAAcD,MAAMC,eAAed;CACzC,MAAMQ,cAAcK,MAAML,eAAeL;CACzC,MAAMY,SAASF,MAAME,UAAUT;CAE/B,MAAMC,QAAQ3C,aAAa,EAAE;CAC7B,IAAIoD,UAAU;CAGd,MAAMC,sBAAqB;EAC1B,MAAMC,IAAIX,MAAM,EAAEY,KAAK,EAAEV,YAAY;EACrC,MAAMW,OAAO,OAAOP,MAAMQ,UAAU,aAAaR,MAAMQ,MAAM,IAAKR,MAAMQ,SAAS,CAAA;EACjF,OAAOH,IAAIE,KAAKL,QAAOd,SAAOc,OAAOd,MAAMiB,GAAGV,WAAW,CAAC,IAAIY;CAC/D;CAGA,MAAME,oBAAoBC,WAAU;EACnC,IAAIA;OACCV,MAAMW,WAAWC,qBAAoBT,SAASU,MAAM,CAAC;EAAA,OAEzDnB,MAAM,EAAE;CAEV;CAEA,OAAAoB,IAAA7D,aAAA8D,MAAAC,WAAA;EAAA,IAAA3B,QAAA;GAAA,OAESW,MAAMX;EAAK;EAAA,IAAA4B,gBAAA;GAAA,OACHjB,MAAMiB;EAAa;EAAA,IAAAT,QAAA;GAAA,OAC3BR,MAAMQ;EAAK;EACLP;EACAN;EAAWuB,cACVT;EAAgBU,UAAA,CAAAL,IAAA7D,aAAAmE,SAAAJ,WAAA,EAAA,IAAAK,cAAA;GAAA,OAEKrB,MAAMqB;EAAW,EAAA,CAAA,CAAA,GAAAP,IAAA7D,aAAAqE,SAAAN,WAAA;GAAA,IAAAO,YAAA;IAAA,OAExCvB,MAAMuB;GAAS;GAAA,IAAAC,aAAA;IAAA,OACdxB,MAAMwB;GAAU;GAAA,IAAAC,oBAAA;IAAA,OACTzB,MAAMyB;GAAiB;GAAA,IAAAC,gBAAA;IAAA,OAC3B1B,MAAM0B;GAAa;GAAAP,UAAA,OAAA;IAAA,MAAAQ,OAAAvE,OAAA4B,UAAA,IAAA;IAAA,MAAA4C,OAAAD,KAAAE;IAAA,MAAAC,OAAAH,KAAAE,WAAAE;IAAAC,QAAAJ,MAAA,QAI3BK,OAAK;KAAE9B,UAAU8B;IAAG,CAAC;IAAAD,QAAAJ,MAAA,mBAEflE,UAAU;IAAAsE,QAAAJ,MAAA,eAEdlC,KAAK;IAAAsC,QAAAJ,MAAA,YACHM,MAAIxC,MAAMwC,EAAEC,OAAO9C,KAAK,CAAC;IAAA2C,QAAAJ,MAAA,YACzBM,MAAIA,EAAEE,gBAAgB,CAAC;IAAAJ,QAAAJ,MAAA,kBACjBM,MAAI;KAKlBA,EAAEC,OAAOtB,MAAM,EAAEwB,eAAe,KAAK,CAAC;IACvC,CAAC;IAAAC,OAAAR,YAAAhB,IAAA/B,OAAA,CAAA,CAAA,CAAA;IAAAiD,QAAAF,MAAA,mBAIUvD,gBAAgB;IAAAyD,QAAAF,MAAA,YAClBI,MAAI;KACZA,EAAEE,gBAAgB;KAClB1C,MAAM,EAAE;KACRS,SAASU,MAAM;IAChB,CAAC;IAAAmB,QAAAF,MAAA,kBACcI,MAAIA,EAAEK,eAAe,CAAC;IAAAP,QAAAF,MAAA,kBAC3B,EAAE;IAAAE,QAAAL,MAAA,mBA1BErE,iBAAiB;IAAA,OAAAqE;GAAA,SAgC3B;IACL,MAAMpB,OAAOH,cAAc;IAC3B,IAAIG,KAAKiC,WAAW,GACnB,cAAA;KAAA,MAAAb,OAAAzE,OAAA8B,UAAA,IAAA;KAAAgD,QAAAL,MAAA,mBAAuB1C,cAAc;KAAA,OAAA0C;IAAA,GAAA;IAEtC,OAAOpB,KAAKkC,KAAIrD,SAAI0B,IAAA7D,aAAAyF,MAAA1B,WAAA;KACM5B;KAAI,IAAAuD,MAAA;MAAA,OAAO1C,YAAYb,IAAI;KAAC;IAAA,CAAA,CAAA,CACrD;GACF,CAAC;EAAA,CAAA,CAAA,CAAA;CAAA,CAAA,CAAA;AAIL"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FocusTrap.js","names":["FocusTrap"],"sources":["../../src/components/FocusTrap.jsx"],"sourcesContent":["import { FocusTrap } from '@plastic-js/ark'\n\nexport default FocusTrap\n"],"mappings":";;AAEA,IAAA,oBAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard.js","names":["HoverCard"],"sources":["../../src/components/HoverCard.jsx"],"sourcesContent":["import { HoverCard } from '@plastic-js/ark'\n\nexport default HoverCard\n"],"mappings":";;AAEA,IAAA,oBAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["css","_tmpl","_template","iconClass","display","alignItems","justifyContent","color","width","height","strokeWidth","Icon","svg","size","className","style","setEl","el","innerHTML","_el0","cloneNode","_setProp"],"sources":["../../src/components/Icon.jsx"],"sourcesContent":["import { css } from '@emotion/css'\n\nconst iconClass = css({\n\tdisplay: 'inline-flex',\n\talignItems: 'center',\n\tjustifyContent: 'center',\n\tcolor: 'currentColor',\n\t'& svg': {\n\t\twidth: '100%', height: '100%', display: 'block', strokeWidth: 'var(--icon-sw)',\n\t},\n})\n\nconst Icon = ({\n\tsvg, size = 22, strokeWidth = 1.25, className,\n})=> {\n\tconst style = {\n\t\twidth: `${size}px`, height: `${size}px`, '--icon-sw': strokeWidth,\n\t}\n\tconst setEl = (el)=> { if (el && el.innerHTML !== svg){ el.innerHTML = svg } }\n\treturn <span className={className ? `${iconClass} ${className}` : iconClass} ref={setEl} style={style} />\n}\n\nexport default Icon\n"],"mappings":";;;AAAkC,IAAAC,QAAAC,SAAA,eAAA;AAElC,IAAMC,YAAYH,IAAI;CACrBI,SAAS;CACTC,YAAY;CACZC,gBAAgB;CAChBC,OAAO;CACP,SAAS;EACRC,OAAO;EAAQC,QAAQ;EAAQL,SAAS;EAASM,aAAa;CAC/D;AACD,CAAC;AAED,IAAMC,QAAQ,EACbC,KAAKC,OAAO,IAAIH,cAAc,MAAMI,gBAChC;CACJ,MAAMC,QAAQ;EACbP,OAAO,GAAGK,KAAI;EAAMJ,QAAQ,GAAGI,KAAI;EAAM,aAAaH;CACvD;CACA,MAAMM,SAASC,OAAM;EAAE,IAAIA,MAAMA,GAAGC,cAAcN,KAAMK,GAAGC,YAAYN;CAAM;CAC7E,cAAA;EAAA,MAAAO,OAAAlB,MAAAmB,UAAA,IAAA;EAAAC,QAAAF,MAAA,mBAAwBL,YAAY,GAAGX,UAAS,GAAIW,cAAcX,SAAS;EAAAkB,QAAAF,MAAA,aAAOH,KAAK;EAAAK,QAAAF,MAAA,eAASJ,KAAK;EAAA,OAAAI;CAAA,GAAA;AACtG"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Listbox.js","names":["Listbox"],"sources":["../../src/components/Listbox.jsx"],"sourcesContent":["import { Listbox } from '@plastic-js/ark'\n\nexport default Listbox\n"],"mappings":";;AAEA,IAAA,kBAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["Menu"],"sources":["../../src/components/Menu.jsx"],"sourcesContent":["import { Menu } from '@plastic-js/ark'\n\nexport default Menu\n"],"mappings":";;AAEA,IAAA,eAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MoneyInput.js","names":["css","splitProps","_tmpl2","_template","_tmpl","wrapperClass","display","alignItems","width","boxSizing","height","background","border","borderRadius","padding","borderColor","errorClass","affixTextClass","color","fontSize","whiteSpace","userSelect","marginRight","affixSuffixClass","fontWeight","paddingLeft","marginLeft","borderLeft","affixSuffixDisabledClass","opacity","inputClass","flex","minWidth","fontFamily","outline","cursor","WebkitTextFillColor","read","value","groupThousands","digits","Number","toLocaleString","MoneyInput","props","local","rest","_el0","cloneNode","_el1","firstChild","_el2","nextSibling","_el3","_insert","currency","_setProp","_jsx","_mergeProps","className","disabled","inputMode","onInput","e","onValueChange","target","replace","placeholder","affix","invalid"],"sources":["../../src/components/MoneyInput.jsx"],"sourcesContent":["import { css } from '@emotion/css'\nimport { splitProps } from '@plastic-js/plastic'\n\nconst wrapperClass = css({\n\tdisplay: 'flex',\n\talignItems: 'center',\n\twidth: '100%',\n\tboxSizing: 'border-box',\n\theight: '44px',\n\tbackground: 'var(--bg, rgba(0,0,0,0.2))',\n\tborder: '1px solid var(--border)',\n\tborderRadius: '10px',\n\tpadding: '0 14px',\n\t'&:focus-within': { borderColor: 'var(--accent)' },\n})\n\nconst errorClass = css({\n\tborderColor: 'var(--danger) !important',\n})\n\nconst affixTextClass = css({\n\tcolor: 'var(--muted)',\n\tfontSize: '14px',\n\twhiteSpace: 'nowrap',\n\tuserSelect: 'none',\n\tmarginRight: '2px',\n})\n\n// Trailing unit (e.g. K, M): brighter and separated so it reads as part of the\n// value rather than faint decoration.\nconst affixSuffixClass = css({\n\tcolor: 'var(--ink)',\n\tfontSize: '14px',\n\tfontWeight: 600,\n\twhiteSpace: 'nowrap',\n\tuserSelect: 'none',\n\tpaddingLeft: '10px',\n\tmarginLeft: '4px',\n\tborderLeft: '1px solid var(--border)',\n})\n\n// Dim the suffix to match the disabled value text (the span is a sibling of the\n// input, so it doesn't inherit the input's :disabled styling).\nconst affixSuffixDisabledClass = css({\n\topacity: 0.5,\n})\n\nconst inputClass = css({\n\tflex: 1,\n\tminWidth: 0,\n\theight: '100%',\n\tbackground: 'transparent',\n\tborder: 'none',\n\tcolor: 'var(--ink)',\n\tfontSize: '15px',\n\tfontFamily: 'inherit',\n\toutline: 'none',\n\t'&::placeholder': { color: 'var(--muted)' },\n\t// Keep disabled text legible (WebKit otherwise forces a faint grey) while\n\t// still reading as read-only, matching the other disabled fields.\n\t'&:disabled': {\n\t\topacity: 0.5,\n\t\tcursor: 'not-allowed',\n\t\tWebkitTextFillColor: 'var(--ink)',\n\t},\n})\n\n// Props may be plain values or reactive accessors (signals); unwrap either.\nconst read = (value)=> {\n\treturn typeof value === 'function' ? value() : value\n}\n\n// Stored value is a digits-only string; display it grouped by thousands.\nconst groupThousands = (digits)=> {\n\tif (!digits){ return '' }\n\treturn Number(digits).toLocaleString('en-US')\n}\n\n/**\n * Currency amount input. Keeps an integer digits-only string as its value and\n * renders it grouped by thousands with a currency prefix.\n *\n * @param value digits-only string, or an accessor returning one\n * @param onValueChange called with the next digits-only string on input\n * @param invalid boolean or accessor; toggles the error border\n * @param currency prefix symbol, defaults to ₱\n * @param affix optional suffix text (e.g. K, M), defaults to empty\n */\nconst MoneyInput = (props)=> {\n\tconst [local, rest] = splitProps(props, ['value', 'onValueChange', 'invalid', 'currency', 'affix', 'placeholder', 'disabled'])\n\treturn (\n\t\t<div className={()=> `${wrapperClass} ${read(local.invalid) ? errorClass : ''}`}>\n\t\t\t<span className={affixTextClass}>\n\t\t\t\t{local.currency ?? '₱'}\n\t\t\t</span>\n\t\t\t<input\n\t\t\t\tclassName={inputClass}\n\t\t\t\tdisabled={local.disabled}\n\t\t\t\tinputMode='numeric'\n\t\t\t\tonInput={e=> local.onValueChange?.(e.target.value.replace(/\\D/g, ''))}\n\t\t\t\tplaceholder={local.placeholder}\n\t\t\t\tvalue={()=> groupThousands(read(local.value))}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t\t{()=> read(local.affix) && (\n\t\t\t\t<span className={()=> `${affixSuffixClass} ${read(local.disabled) ? affixSuffixDisabledClass : ''}`}>\n\t\t\t\t\t{read(local.affix)}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nexport default MoneyInput\n"],"mappings":";;;;AACgD,IAAAE,SAAAC,SAAA,eAAA;AAAA,IAAAC,QAAAD,SAAA,gCAAA;AAEhD,IAAME,eAAeL,IAAI;CACxBM,SAAS;CACTC,YAAY;CACZC,OAAO;CACPC,WAAW;CACXC,QAAQ;CACRC,YAAY;CACZC,QAAQ;CACRC,cAAc;CACdC,SAAS;CACT,kBAAkB,EAAEC,aAAa,gBAAgB;AAClD,CAAC;AAED,IAAMC,aAAahB,IAAI,EACtBe,aAAa,2BACd,CAAC;AAED,IAAME,iBAAiBjB,IAAI;CAC1BkB,OAAO;CACPC,UAAU;CACVC,YAAY;CACZC,YAAY;CACZC,aAAa;AACd,CAAC;AAID,IAAMC,mBAAmBvB,IAAI;CAC5BkB,OAAO;CACPC,UAAU;CACVK,YAAY;CACZJ,YAAY;CACZC,YAAY;CACZI,aAAa;CACbC,YAAY;CACZC,YAAY;AACb,CAAC;AAID,IAAMC,2BAA2B5B,IAAI,EACpC6B,SAAS,GACV,CAAC;AAED,IAAMC,aAAa9B,IAAI;CACtB+B,MAAM;CACNC,UAAU;CACVtB,QAAQ;CACRC,YAAY;CACZC,QAAQ;CACRM,OAAO;CACPC,UAAU;CACVc,YAAY;CACZC,SAAS;CACT,kBAAkB,EAAEhB,OAAO,eAAe;CAG1C,cAAc;EACbW,SAAS;EACTM,QAAQ;EACRC,qBAAqB;CACtB;AACD,CAAC;AAGD,IAAMC,QAAQC,UAAS;CACtB,OAAO,OAAOA,UAAU,aAAaA,MAAM,IAAIA;AAChD;AAGA,IAAMC,kBAAkBC,WAAU;CACjC,IAAI,CAACA,QAAS,OAAO;CACrB,OAAOC,OAAOD,MAAM,EAAEE,eAAe,OAAO;AAC7C;;;;;;;;;;;AAYA,IAAMC,cAAcC,UAAS;CAC5B,MAAM,CAACC,OAAOC,QAAQ7C,WAAW2C,OAAO;EAAC;EAAS;EAAiB;EAAW;EAAY;EAAS;EAAe;CAAU,CAAC;CAC7H,aAAA;EAAA,MAAAG,OAAA3C,MAAA4C,UAAA,IAAA;EAAA,MAAAC,OAAAF,KAAAG;EAAA,MAAAC,OAAAJ,KAAAG,WAAAE;EAAA,MAAAC,OAAAN,KAAAG,WAAAE,YAAAA;EAAAE,OAAAL,YAGIJ,MAAMU,YAAY,GAAG;EAAAC,QAAAP,MAAA,mBADNhC,cAAc;EAAAqC,OAAAP,YAAAU,IAAA,SAAAC,WAAA;GAAAC,WAInB7B;GAAU,IAAA8B,WAAA;IAAA,OACXf,MAAMe;GAAQ;GAAAC,WACd;GAASC,UACVC,MAAIlB,MAAMmB,gBAAgBD,EAAEE,OAAO3B,MAAM4B,QAAQ,OAAO,EAAE,CAAC;GAAC,IAAAC,cAAA;IAAA,OACxDtB,MAAMsB;GAAW;GAAA7B,aAClBC,eAAeF,KAAKQ,MAAMP,KAAK,CAAC;EAAC,GACzCQ,IAAI,CAAA,GAAAK,IAAA;EAAAG,OAAAP,YAEHV,KAAKQ,MAAMuB,KAAK,YAAC;GAAA,MAAArB,OAAA7C,OAAA8C,UAAA,IAAA;GAAAM,OAAAP,YAEpBV,KAAKQ,MAAMuB,KAAK,CAAC;GAAAZ,QAAAT,MAAA,mBADG,GAAGxB,iBAAgB,GAAIc,KAAKQ,MAAMe,QAAQ,IAAIhC,2BAA2B,IAAI;GAAA,OAAAmB;EAAA,IAGnGM,IAAA;EAAAG,QAAAT,MAAA,mBAjBmB,GAAG1C,aAAY,GAAIgC,KAAKQ,MAAMwB,OAAO,IAAIrD,aAAa,IAAI;EAAA,OAAA+B;CAAA;AAoBjF"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","names":["NumberInput"],"sources":["../../src/components/NumberInput.jsx"],"sourcesContent":["import { NumberInput } from '@plastic-js/ark'\n\nexport default NumberInput\n"],"mappings":";;AAEA,IAAA,sBAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","names":["Pagination"],"sources":["../../src/components/Pagination.jsx"],"sourcesContent":["import { Pagination } from '@plastic-js/ark'\n\nexport default Pagination\n"],"mappings":";;AAEA,IAAA,qBAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","names":["Popover"],"sources":["../../src/components/Popover.jsx"],"sourcesContent":["import { Popover } from '@plastic-js/ark'\n\nexport default Popover\n"],"mappings":";;AAEA,IAAA,kBAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Portal.js","names":["Portal"],"sources":["../../src/components/Portal.jsx"],"sourcesContent":["import { Portal } from '@plastic-js/ark'\n\nexport default Portal\n"],"mappings":";;AAEA,IAAA,iBAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Presence.js","names":["Presence"],"sources":["../../src/components/Presence.jsx"],"sourcesContent":["import { Presence } from '@plastic-js/ark'\n\nexport default Presence\n"],"mappings":";;AAEA,IAAA,mBAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.js","names":["Progress"],"sources":["../../src/components/Progress.jsx"],"sourcesContent":["import { Progress } from '@plastic-js/ark'\n\nexport default Progress\n"],"mappings":";;AAEA,IAAA,mBAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","names":["RadioGroup"],"sources":["../../src/components/RadioGroup.jsx"],"sourcesContent":["import { RadioGroup } from '@plastic-js/ark'\n\nexport default RadioGroup\n"],"mappings":";;AAEA,IAAA,qBAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RatingGroup.js","names":["RatingGroup"],"sources":["../../src/components/RatingGroup.jsx"],"sourcesContent":["import { RatingGroup } from '@plastic-js/ark'\n\nexport default RatingGroup\n"],"mappings":";;AAEA,IAAA,sBAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","names":["css","splitProps","_tmpl2","_template","_tmpl","wrapperClass","flex","minWidth","position","inputClass","width","height","background","border","borderRadius","padding","color","fontSize","fontFamily","outline","borderColor","iconClass","left","top","transform","pointerEvents","SearchInput","props","local","rest","_el0","cloneNode","_el1","firstChild","_el2","nextSibling","_insert","_jsx","SearchIcon","_setProp","_mergeProps","className","onInput","placeholder","type"],"sources":["../../src/components/SearchInput.jsx"],"sourcesContent":["import { css } from '@emotion/css'\nimport { splitProps } from '@plastic-js/plastic'\n\nconst wrapperClass = css({\n\tflex: 1,\n\tminWidth: 0,\n\tposition: 'relative',\n})\n\nconst inputClass = css({\n\twidth: '100%',\n\theight: '44px',\n\tbackground: 'var(--surface)',\n\tborder: '1px solid var(--border)',\n\tborderRadius: '10px',\n\tpadding: '0 14px 0 44px',\n\tcolor: 'var(--ink)',\n\tfontSize: '15px',\n\tfontFamily: 'inherit',\n\toutline: 'none',\n\t'&::placeholder': { color: 'var(--muted)' },\n\t'&:focus': { borderColor: 'var(--accent)' },\n})\n\nconst iconClass = css({\n\tposition: 'absolute',\n\tleft: '13px',\n\ttop: '50%',\n\ttransform: 'translateY(-50%)',\n\tcolor: 'var(--muted)',\n\tpointerEvents: 'none',\n\t'& svg': { width: '18px', height: '18px' },\n})\n\nconst SearchInput = (props)=> {\n\tconst [local, rest] = splitProps(props, ['placeholder', 'onInput'])\n\treturn (\n\t\t<div className={wrapperClass}>\n\t\t\t<span aria-hidden='true' className={iconClass}>\n\t\t\t\t<SearchIcon />\n\t\t\t</span>\n\t\t\t<input\n\t\t\t\tclassName={inputClass}\n\t\t\t\tonInput={local.onInput}\n\t\t\t\tplaceholder={local.placeholder ?? 'Search...'}\n\t\t\t\ttype='search'\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n\nfunction SearchIcon(){\n\treturn (\n\t\t<svg\n\t\t\tfill='none' stroke='currentColor' strokeLinecap='round' strokeLinejoin='round'\n\t\t\tstrokeWidth='2' viewBox='0 0 24 24'\n\t\t>\n\t\t\t<circle cx='11' cy='11' r='7' />\n\t\t\t<path d='M21 21l-4.35-4.35' />\n\t\t</svg>\n\t)\n}\n\nexport default SearchInput\n"],"mappings":";;;;AACgD,IAAAE,SAAAC,SAAA,8NAAA;AAAA,IAAAC,QAAAD,SAAA,kDAAA;AAEhD,IAAME,eAAeL,IAAI;CACxBM,MAAM;CACNC,UAAU;CACVC,UAAU;AACX,CAAC;AAED,IAAMC,aAAaT,IAAI;CACtBU,OAAO;CACPC,QAAQ;CACRC,YAAY;CACZC,QAAQ;CACRC,cAAc;CACdC,SAAS;CACTC,OAAO;CACPC,UAAU;CACVC,YAAY;CACZC,SAAS;CACT,kBAAkB,EAAEH,OAAO,eAAe;CAC1C,WAAW,EAAEI,aAAa,gBAAgB;AAC3C,CAAC;AAED,IAAMC,YAAYrB,IAAI;CACrBQ,UAAU;CACVc,MAAM;CACNC,KAAK;CACLC,WAAW;CACXR,OAAO;CACPS,eAAe;CACf,SAAS;EAAEf,OAAO;EAAQC,QAAQ;CAAO;AAC1C,CAAC;AAED,IAAMe,eAAeC,UAAS;CAC7B,MAAM,CAACC,OAAOC,QAAQ5B,WAAW0B,OAAO,CAAC,eAAe,SAAS,CAAC;CAClE,aAAA;EAAA,MAAAG,OAAA1B,MAAA2B,UAAA,IAAA;EAAA,MAAAC,OAAAF,KAAAG;EAAA,MAAAC,OAAAJ,KAAAG,WAAAE;EAAAC,OAAAJ,YAAAK,IAAAC,YAAA,CAAA,CAAA,CAAA;EAAAC,QAAAP,MAAA,mBAEsCX,SAAS;EAAAe,OAAAN,YAAAO,IAAA,SAAAG,WAAA;GAAAC,WAIjChC;GAAU,IAAAiC,UAAA;IAAA,OACZd,MAAMc;GAAO;GAAA,IAAAC,cAAA;IAAA,OACTf,MAAMe,eAAe;GAAW;GAAAC,MACxC;EAAQ,GACTf,IAAI,CAAA,GAAAK,IAAA;EAAAK,QAAAT,MAAA,mBATMzB,YAAY;EAAA,OAAAyB;CAAA;AAa9B;AAEA,SAASQ,aAAY;CACpB,OAAApC,OAAA6B,UAAA,IAAA;AASD"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","names":["Select"],"sources":["../../src/components/Select.jsx"],"sourcesContent":["import { Select } from '@plastic-js/ark'\n\nexport default Select\n"],"mappings":";;AAEA,IAAA,iBAAeA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"anatomy.js","names":[],"sources":["../../../src/components/SelectMobile/anatomy.js"],"sourcesContent":["// Anatomy for SelectMobile — the named parts the component renders.\n// Every rendered element carries `data-scope=\"select-mobile\"` + `data-part=\"<name>\"`,\n// so consumers can target any part with CSS (e.g. [data-part=\"item\"][data-selected]).\nexport const SCOPE = 'select-mobile'\n\nexport const anatomy = [\n\t'trigger',\n\t'triggerValue',\n\t'triggerIndicator',\n\t'positioner',\n\t'backdrop',\n\t'content',\n\t'grabber',\n\t'list',\n\t'item',\n\t'itemText',\n\t'itemIndicator',\n]\n\n// Returns the data attributes for a given anatomy part.\nexport const part = name=> ({ 'data-scope': SCOPE, 'data-part': name })"],"mappings":";AAGA,IAAa,QAAQ;AAiBrB,IAAa,QAAO,UAAQ;CAAE,cAAc;CAAO,aAAa;AAAK"}
|