@wirekyt/solid 0.0.1 → 0.0.2
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/dist/accordion.d.ts +68 -0
- package/dist/accordion.js +168 -0
- package/dist/accordion.jsx +143 -0
- package/dist/angle-slider.d.ts +72 -0
- package/dist/angle-slider.js +141 -0
- package/dist/angle-slider.jsx +130 -0
- package/dist/avatar.d.ts +47 -0
- package/dist/avatar.js +86 -0
- package/dist/avatar.jsx +79 -0
- package/dist/carousel.d.ts +92 -0
- package/dist/carousel.js +189 -0
- package/dist/carousel.jsx +174 -0
- package/dist/checkbox.d.ts +140 -0
- package/dist/checkbox.js +252 -0
- package/dist/checkbox.jsx +234 -0
- package/dist/client-only.d.ts +9 -0
- package/dist/client-only.js +22 -0
- package/dist/client-only.jsx +13 -0
- package/dist/clipboard.d.ts +70 -0
- package/dist/clipboard.js +137 -0
- package/dist/clipboard.jsx +120 -0
- package/dist/collapsible-BwNoH1At.jsx +106 -0
- package/dist/collapsible-Dp8aqjtN.js +118 -0
- package/dist/collapsible.d.ts +58 -0
- package/dist/collapsible.js +2 -0
- package/dist/collapsible.jsx +2 -0
- package/dist/collection-By8qgqkx.js +213 -0
- package/dist/collection-Mkvw6TyT.jsx +213 -0
- package/dist/collection.d.ts +2 -0
- package/dist/collection.js +2 -0
- package/dist/collection.jsx +2 -0
- package/dist/color-picker.d.ts +179 -0
- package/dist/color-picker.js +457 -0
- package/dist/color-picker.jsx +395 -0
- package/dist/combobox.d.ts +128 -0
- package/dist/combobox.js +326 -0
- package/dist/combobox.jsx +284 -0
- package/dist/core-7QKBNp9p.js +485 -0
- package/dist/core-7QKBNp9p.jsx +485 -0
- package/dist/date-input.d.ts +68 -0
- package/dist/date-input.js +178 -0
- package/dist/date-input.jsx +163 -0
- package/dist/date-picker.d.ts +191 -0
- package/dist/date-picker.js +506 -0
- package/dist/date-picker.jsx +430 -0
- package/dist/dialog.d.ts +77 -0
- package/dist/dialog.js +205 -0
- package/dist/dialog.jsx +159 -0
- package/dist/download-trigger.d.ts +22 -0
- package/dist/download-trigger.js +55 -0
- package/dist/download-trigger.jsx +51 -0
- package/dist/drawer.d.ts +114 -0
- package/dist/drawer.js +291 -0
- package/dist/drawer.jsx +237 -0
- package/dist/editable.d.ts +77 -0
- package/dist/editable.js +171 -0
- package/dist/editable.jsx +162 -0
- package/dist/factory-D2A7xdtl.js +34 -0
- package/dist/factory-DRw_slzE.jsx +34 -0
- package/dist/factory-wuwfJqbU.d.ts +15 -0
- package/dist/field-CQr_Dibp.js +317 -0
- package/dist/field-R5jVNdtK.jsx +282 -0
- package/dist/field.d.ts +194 -0
- package/dist/field.js +2 -0
- package/dist/field.jsx +2 -0
- package/dist/fieldset-5shfE0Z5.jsx +155 -0
- package/dist/fieldset-D5teGLZ9.js +170 -0
- package/dist/fieldset.d.ts +98 -0
- package/dist/fieldset.js +2 -0
- package/dist/fieldset.jsx +2 -0
- package/dist/file-upload.d.ts +100 -0
- package/dist/file-upload.js +254 -0
- package/dist/file-upload.jsx +232 -0
- package/dist/floating-panel.d.ts +97 -0
- package/dist/floating-panel.js +231 -0
- package/dist/floating-panel.jsx +199 -0
- package/dist/focus-trap.d.ts +12 -0
- package/dist/focus-trap.js +30 -0
- package/dist/focus-trap.jsx +26 -0
- package/dist/format.d.ts +32 -0
- package/dist/format.js +50 -0
- package/dist/format.jsx +53 -0
- package/dist/frame.d.ts +12 -0
- package/dist/frame.js +119 -0
- package/dist/frame.jsx +83 -0
- package/dist/image-cropper.d.ts +62 -0
- package/dist/image-cropper.js +137 -0
- package/dist/image-cropper.jsx +130 -0
- package/dist/index-B17eqq14.d.ts +32 -0
- package/dist/index-BZHmHI7d.d.ts +142 -0
- package/dist/index-CANuc1X0.d.ts +81 -0
- package/dist/index-CJwZCGOS.d.ts +75 -0
- package/dist/index-ClU-Lb8Z.d.ts +23 -0
- package/dist/index-J9N2CBHP.d.ts +21 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +5 -0
- package/dist/index.jsx +5 -0
- package/dist/json-tree-view.d.ts +50 -0
- package/dist/json-tree-view.js +330 -0
- package/dist/json-tree-view.jsx +201 -0
- package/dist/listbox.d.ts +109 -0
- package/dist/listbox.js +237 -0
- package/dist/listbox.jsx +212 -0
- package/dist/marquee.d.ts +57 -0
- package/dist/marquee.js +125 -0
- package/dist/marquee.jsx +113 -0
- package/dist/menu.d.ts +158 -0
- package/dist/menu.js +441 -0
- package/dist/menu.jsx +362 -0
- package/dist/navigation-menu.d.ts +88 -0
- package/dist/navigation-menu.js +289 -0
- package/dist/navigation-menu.jsx +228 -0
- package/dist/number-input.d.ts +72 -0
- package/dist/number-input.js +166 -0
- package/dist/number-input.jsx +157 -0
- package/dist/pagination.d.ts +67 -0
- package/dist/pagination.js +131 -0
- package/dist/pagination.jsx +124 -0
- package/dist/password-input.d.ts +64 -0
- package/dist/password-input.js +144 -0
- package/dist/password-input.jsx +125 -0
- package/dist/pin-input.d.ts +57 -0
- package/dist/pin-input.js +138 -0
- package/dist/pin-input.jsx +129 -0
- package/dist/popover.d.ts +92 -0
- package/dist/popover.js +206 -0
- package/dist/popover.jsx +174 -0
- package/dist/presence-9UGkuyfn.jsx +59 -0
- package/dist/presence-CE6lXCu5.js +72 -0
- package/dist/presence.d.ts +2 -0
- package/dist/presence.js +2 -0
- package/dist/presence.jsx +2 -0
- package/dist/progress.d.ts +77 -0
- package/dist/progress.js +146 -0
- package/dist/progress.jsx +137 -0
- package/dist/providers-B-Vi5wQ7.js +124 -0
- package/dist/providers-CqNHqLpB.jsx +110 -0
- package/dist/qr-code.d.ts +57 -0
- package/dist/qr-code.js +111 -0
- package/dist/qr-code.jsx +104 -0
- package/dist/radio-group.d.ts +77 -0
- package/dist/radio-group.js +170 -0
- package/dist/radio-group.jsx +157 -0
- package/dist/rating-group.d.ts +67 -0
- package/dist/rating-group.js +142 -0
- package/dist/rating-group.jsx +131 -0
- package/dist/rolldown-runtime-D7D4PA-g.js +13 -0
- package/dist/rolldown-runtime-D7D4PA-g.jsx +13 -0
- package/dist/run-if-fn-CjvD7VzQ.js +5 -0
- package/dist/run-if-fn-CjvD7VzQ.jsx +5 -0
- package/dist/scroll-area.d.ts +61 -0
- package/dist/scroll-area.js +119 -0
- package/dist/scroll-area.jsx +109 -0
- package/dist/segment-group.d.ts +80 -0
- package/dist/segment-group.js +166 -0
- package/dist/segment-group.jsx +153 -0
- package/dist/select.d.ts +132 -0
- package/dist/select.js +337 -0
- package/dist/select.jsx +283 -0
- package/dist/signature-pad.d.ts +67 -0
- package/dist/signature-pad.js +159 -0
- package/dist/signature-pad.jsx +141 -0
- package/dist/slider.d.ts +87 -0
- package/dist/slider.js +191 -0
- package/dist/slider.jsx +179 -0
- package/dist/splitter.d.ts +57 -0
- package/dist/splitter.js +126 -0
- package/dist/splitter.jsx +116 -0
- package/dist/steps.d.ts +100 -0
- package/dist/steps.js +199 -0
- package/dist/steps.jsx +184 -0
- package/dist/swap.d.ts +51 -0
- package/dist/swap.js +123 -0
- package/dist/swap.jsx +106 -0
- package/dist/switch.d.ts +57 -0
- package/dist/switch.js +125 -0
- package/dist/switch.jsx +116 -0
- package/dist/tabs.d.ts +58 -0
- package/dist/tabs.js +146 -0
- package/dist/tabs.jsx +122 -0
- package/dist/tags-input.d.ts +97 -0
- package/dist/tags-input.js +228 -0
- package/dist/tags-input.jsx +213 -0
- package/dist/timer.d.ts +62 -0
- package/dist/timer.js +119 -0
- package/dist/timer.jsx +110 -0
- package/dist/toast.d.ts +60 -0
- package/dist/toast.js +120 -0
- package/dist/toast.jsx +106 -0
- package/dist/toggle-group.d.ts +42 -0
- package/dist/toggle-group.js +87 -0
- package/dist/toggle-group.jsx +80 -0
- package/dist/toggle.d.ts +38 -0
- package/dist/toggle.js +73 -0
- package/dist/toggle.jsx +61 -0
- package/dist/tooltip.d.ts +67 -0
- package/dist/tooltip.js +159 -0
- package/dist/tooltip.jsx +127 -0
- package/dist/tour.d.ts +112 -0
- package/dist/tour.js +256 -0
- package/dist/tour.jsx +192 -0
- package/dist/tree-view-ATyeBPXq.js +290 -0
- package/dist/tree-view-CoWx7osT.jsx +265 -0
- package/dist/tree-view.d.ts +3 -0
- package/dist/tree-view.js +3 -0
- package/dist/tree-view.jsx +3 -0
- package/package.json +324 -6
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.jsx";
|
|
2
|
+
import { a as mergeProps$1, d as createContext$1, i as useMachine, l as createSplitProps, r as normalizeProps } from "./core-7QKBNp9p.jsx";
|
|
3
|
+
import { t as runIfFn } from "./run-if-fn-CjvD7VzQ.jsx";
|
|
4
|
+
import { t as wire } from "./factory-DRw_slzE.jsx";
|
|
5
|
+
import { a as useLocaleContext, l as useEnvironmentContext } from "./providers-CqNHqLpB.jsx";
|
|
6
|
+
import { Show, createMemo, createUniqueId } from "solid-js";
|
|
7
|
+
import * as carousel from "@wirekyt/dom/machines/carousel";
|
|
8
|
+
import { anatomy } from "@wirekyt/dom/machines/carousel";
|
|
9
|
+
//#region src/components/carousel/anatomy.ts
|
|
10
|
+
const carouselAnatomy = anatomy.extendWith("progressText", "autoplayIndicator");
|
|
11
|
+
//#endregion
|
|
12
|
+
//#region src/components/carousel/use-context.ts
|
|
13
|
+
const [CarouselProvider, useCarouselContext] = createContext$1({
|
|
14
|
+
hookName: "useCarouselContext",
|
|
15
|
+
providerName: "<CarouselProvider />"
|
|
16
|
+
});
|
|
17
|
+
//#endregion
|
|
18
|
+
//#region src/components/carousel/autoplay-indicator.tsx
|
|
19
|
+
const parts$1 = carouselAnatomy.build();
|
|
20
|
+
const CarouselAutoplayIndicator = (props) => {
|
|
21
|
+
const api = useCarouselContext();
|
|
22
|
+
return <wire.span {...parts$1.autoplayIndicator.attrs} {...props}>
|
|
23
|
+
<Show when={api().isPlaying} fallback={props.fallback}>
|
|
24
|
+
{props.children}
|
|
25
|
+
</Show>
|
|
26
|
+
</wire.span>;
|
|
27
|
+
};
|
|
28
|
+
//#endregion
|
|
29
|
+
//#region src/components/carousel/progress-text.tsx
|
|
30
|
+
const parts = carouselAnatomy.build();
|
|
31
|
+
const CarouselProgressText = (props) => {
|
|
32
|
+
const api = useCarouselContext();
|
|
33
|
+
const progressText = createMemo(() => {
|
|
34
|
+
return `${api().page + 1} / ${api().pageSnapPoints.length}`;
|
|
35
|
+
});
|
|
36
|
+
return <wire.span {...parts.progressText.attrs} {...props}>
|
|
37
|
+
{props.children || progressText()}
|
|
38
|
+
</wire.span>;
|
|
39
|
+
};
|
|
40
|
+
//#endregion
|
|
41
|
+
//#region src/components/carousel/autoplay-trigger.tsx
|
|
42
|
+
const CarouselAutoplayTrigger = (props) => {
|
|
43
|
+
const api = useCarouselContext();
|
|
44
|
+
const mergedProps = mergeProps$1(() => api().getAutoplayTriggerProps(), props);
|
|
45
|
+
return <wire.button {...mergedProps} />;
|
|
46
|
+
};
|
|
47
|
+
//#endregion
|
|
48
|
+
//#region src/components/carousel/context.tsx
|
|
49
|
+
const CarouselContext = (props) => props.children(useCarouselContext());
|
|
50
|
+
//#endregion
|
|
51
|
+
//#region src/components/carousel/control.tsx
|
|
52
|
+
const CarouselControl = (props) => {
|
|
53
|
+
const api = useCarouselContext();
|
|
54
|
+
const mergedProps = mergeProps$1(() => api().getControlProps(), props);
|
|
55
|
+
return <wire.div {...mergedProps} />;
|
|
56
|
+
};
|
|
57
|
+
//#endregion
|
|
58
|
+
//#region src/components/carousel/indicator.tsx
|
|
59
|
+
const CarouselIndicator = (props) => {
|
|
60
|
+
const [indicatorProps, localProps] = createSplitProps()(props, ["index", "readOnly"]);
|
|
61
|
+
const api = useCarouselContext();
|
|
62
|
+
const mergedProps = mergeProps$1(() => api().getIndicatorProps(indicatorProps), localProps);
|
|
63
|
+
return <wire.button {...mergedProps} />;
|
|
64
|
+
};
|
|
65
|
+
//#endregion
|
|
66
|
+
//#region src/components/carousel/indicator-group.tsx
|
|
67
|
+
const CarouselIndicatorGroup = (props) => {
|
|
68
|
+
const api = useCarouselContext();
|
|
69
|
+
const mergedProps = mergeProps$1(() => api().getIndicatorGroupProps(), props);
|
|
70
|
+
return <wire.div {...mergedProps} />;
|
|
71
|
+
};
|
|
72
|
+
//#endregion
|
|
73
|
+
//#region src/components/carousel/item.tsx
|
|
74
|
+
const CarouselItem = (props) => {
|
|
75
|
+
const [itemProps, localProps] = createSplitProps()(props, ["index", "snapAlign"]);
|
|
76
|
+
const api = useCarouselContext();
|
|
77
|
+
const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
|
|
78
|
+
return <wire.div {...mergedProps} />;
|
|
79
|
+
};
|
|
80
|
+
//#endregion
|
|
81
|
+
//#region src/components/carousel/item-group.tsx
|
|
82
|
+
const CarouselItemGroup = (props) => {
|
|
83
|
+
const api = useCarouselContext();
|
|
84
|
+
const mergedProps = mergeProps$1(() => api().getItemGroupProps(), props);
|
|
85
|
+
return <wire.div {...mergedProps} />;
|
|
86
|
+
};
|
|
87
|
+
//#endregion
|
|
88
|
+
//#region src/components/carousel/next-trigger.tsx
|
|
89
|
+
const CarouselNextTrigger = (props) => {
|
|
90
|
+
const api = useCarouselContext();
|
|
91
|
+
const mergedProps = mergeProps$1(() => api().getNextTriggerProps(), props);
|
|
92
|
+
return <wire.button {...mergedProps} />;
|
|
93
|
+
};
|
|
94
|
+
//#endregion
|
|
95
|
+
//#region src/components/carousel/prev-trigger.tsx
|
|
96
|
+
const CarouselPrevTrigger = (props) => {
|
|
97
|
+
const api = useCarouselContext();
|
|
98
|
+
const mergedProps = mergeProps$1(() => api().getPrevTriggerProps(), props);
|
|
99
|
+
return <wire.button {...mergedProps} />;
|
|
100
|
+
};
|
|
101
|
+
//#endregion
|
|
102
|
+
//#region src/components/carousel/use-carousel.ts
|
|
103
|
+
const useCarousel = (props) => {
|
|
104
|
+
const id = createUniqueId();
|
|
105
|
+
const locale = useLocaleContext();
|
|
106
|
+
const environment = useEnvironmentContext();
|
|
107
|
+
const machineProps = createMemo(() => ({
|
|
108
|
+
id,
|
|
109
|
+
dir: locale().dir,
|
|
110
|
+
getRootNode: environment().getRootNode,
|
|
111
|
+
...runIfFn(props)
|
|
112
|
+
}));
|
|
113
|
+
const service = useMachine(carousel.machine, machineProps);
|
|
114
|
+
return createMemo(() => carousel.connect(service, normalizeProps));
|
|
115
|
+
};
|
|
116
|
+
//#endregion
|
|
117
|
+
//#region src/components/carousel/root.tsx
|
|
118
|
+
const CarouselRoot = (props) => {
|
|
119
|
+
const [useCarouselProps, localProps] = createSplitProps()(props, [
|
|
120
|
+
"allowMouseDrag",
|
|
121
|
+
"autoplay",
|
|
122
|
+
"autoSize",
|
|
123
|
+
"defaultPage",
|
|
124
|
+
"id",
|
|
125
|
+
"ids",
|
|
126
|
+
"inViewThreshold",
|
|
127
|
+
"loop",
|
|
128
|
+
"onAutoplayStatusChange",
|
|
129
|
+
"onDragStatusChange",
|
|
130
|
+
"onPageChange",
|
|
131
|
+
"orientation",
|
|
132
|
+
"padding",
|
|
133
|
+
"page",
|
|
134
|
+
"slideCount",
|
|
135
|
+
"slidesPerMove",
|
|
136
|
+
"slidesPerPage",
|
|
137
|
+
"snapType",
|
|
138
|
+
"spacing",
|
|
139
|
+
"translations"
|
|
140
|
+
]);
|
|
141
|
+
const api = useCarousel(useCarouselProps);
|
|
142
|
+
const mergedProps = mergeProps$1(() => api().getRootProps(), localProps);
|
|
143
|
+
return <CarouselProvider value={api}>
|
|
144
|
+
<wire.div {...mergedProps} />
|
|
145
|
+
</CarouselProvider>;
|
|
146
|
+
};
|
|
147
|
+
//#endregion
|
|
148
|
+
//#region src/components/carousel/root-provider.tsx
|
|
149
|
+
const CarouselRootProvider = (props) => {
|
|
150
|
+
const [{ value: carousel }, localProps] = createSplitProps()(props, ["value"]);
|
|
151
|
+
const mergedProps = mergeProps$1(() => carousel().getRootProps(), localProps);
|
|
152
|
+
return <CarouselProvider value={carousel}>
|
|
153
|
+
<wire.div {...mergedProps} />
|
|
154
|
+
</CarouselProvider>;
|
|
155
|
+
};
|
|
156
|
+
//#endregion
|
|
157
|
+
//#region src/components/carousel/carousel.ts
|
|
158
|
+
var carousel_exports = /* @__PURE__ */ __exportAll({
|
|
159
|
+
AutoplayIndicator: () => CarouselAutoplayIndicator,
|
|
160
|
+
AutoplayTrigger: () => CarouselAutoplayTrigger,
|
|
161
|
+
Context: () => CarouselContext,
|
|
162
|
+
Control: () => CarouselControl,
|
|
163
|
+
Indicator: () => CarouselIndicator,
|
|
164
|
+
IndicatorGroup: () => CarouselIndicatorGroup,
|
|
165
|
+
Item: () => CarouselItem,
|
|
166
|
+
ItemGroup: () => CarouselItemGroup,
|
|
167
|
+
NextTrigger: () => CarouselNextTrigger,
|
|
168
|
+
PrevTrigger: () => CarouselPrevTrigger,
|
|
169
|
+
ProgressText: () => CarouselProgressText,
|
|
170
|
+
Root: () => CarouselRoot,
|
|
171
|
+
RootProvider: () => CarouselRootProvider
|
|
172
|
+
});
|
|
173
|
+
//#endregion
|
|
174
|
+
export { carousel_exports as Carousel, CarouselAutoplayIndicator, CarouselAutoplayTrigger, CarouselContext, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText, CarouselRoot, CarouselRootProvider, carouselAnatomy, useCarousel, useCarouselContext };
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { a as Optional, n as Assign, r as MaybeAccessor, s as PropTypes } from "./index-ClU-Lb8Z.js";
|
|
2
|
+
import { r as PolymorphicProps, t as HTMLProps } from "./factory-wuwfJqbU.js";
|
|
3
|
+
import { Accessor, JSX } from "solid-js";
|
|
4
|
+
import * as checkbox from "@wirekyt/dom/machines/checkbox";
|
|
5
|
+
import { CheckedChangeDetails, CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState, CheckedState as CheckboxCheckedState } from "@wirekyt/dom/machines/checkbox";
|
|
6
|
+
//#region src/components/checkbox/use.d.ts
|
|
7
|
+
interface UseCheckboxProps extends Optional<Omit<checkbox.Props, "dir" | "getRootNode">, "id"> {}
|
|
8
|
+
interface UseCheckboxReturn extends Accessor<checkbox.Api<PropTypes>> {}
|
|
9
|
+
declare const useCheckbox: (ownProps?: MaybeAccessor<UseCheckboxProps>) => UseCheckboxReturn;
|
|
10
|
+
//#endregion
|
|
11
|
+
//#region src/components/checkbox/use-context.d.ts
|
|
12
|
+
interface UseCheckboxContext extends UseCheckboxReturn {}
|
|
13
|
+
declare const CheckboxProvider: import("solid-js").ContextProviderComponent<UseCheckboxContext>, useCheckboxContext: () => UseCheckboxContext;
|
|
14
|
+
//#endregion
|
|
15
|
+
//#region src/components/checkbox/context.d.ts
|
|
16
|
+
interface CheckboxContextProps {
|
|
17
|
+
children: (context: UseCheckboxContext) => JSX.Element;
|
|
18
|
+
}
|
|
19
|
+
declare const CheckboxContext: (props: CheckboxContextProps) => JSX.Element;
|
|
20
|
+
//#endregion
|
|
21
|
+
//#region src/components/checkbox/control.d.ts
|
|
22
|
+
interface CheckboxControlBaseProps extends PolymorphicProps<"div"> {}
|
|
23
|
+
interface CheckboxControlProps extends HTMLProps<"div">, CheckboxControlBaseProps {}
|
|
24
|
+
declare const CheckboxControl: (props: CheckboxControlProps) => import("solid-js").JSX.Element;
|
|
25
|
+
//#endregion
|
|
26
|
+
//#region src/components/checkbox/use-group.d.ts
|
|
27
|
+
interface UseCheckboxGroupProps {
|
|
28
|
+
/**
|
|
29
|
+
* The initial value of `value` when uncontrolled
|
|
30
|
+
*/
|
|
31
|
+
defaultValue?: Accessor<string[]> | string[];
|
|
32
|
+
/**
|
|
33
|
+
* The controlled value of the checkbox group
|
|
34
|
+
*/
|
|
35
|
+
value?: Accessor<string[]>;
|
|
36
|
+
/**
|
|
37
|
+
* The name of the input fields in the checkbox group
|
|
38
|
+
* (Useful for form submission).
|
|
39
|
+
*/
|
|
40
|
+
name?: string;
|
|
41
|
+
/**
|
|
42
|
+
* The callback to call when the value changes
|
|
43
|
+
*/
|
|
44
|
+
onValueChange?: (value: string[]) => void;
|
|
45
|
+
/**
|
|
46
|
+
* If `true`, the checkbox group is disabled
|
|
47
|
+
*/
|
|
48
|
+
disabled?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* If `true`, the checkbox group is read-only
|
|
51
|
+
*/
|
|
52
|
+
readOnly?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* If `true`, the checkbox group is invalid
|
|
55
|
+
*/
|
|
56
|
+
invalid?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* The maximum number of selected values
|
|
59
|
+
*/
|
|
60
|
+
maxSelectedValues?: number;
|
|
61
|
+
}
|
|
62
|
+
interface CheckboxGroupItemProps {
|
|
63
|
+
value: string | undefined;
|
|
64
|
+
}
|
|
65
|
+
declare function useCheckboxGroup(props?: UseCheckboxGroupProps): Accessor<{
|
|
66
|
+
isChecked: (val: string | undefined) => boolean;
|
|
67
|
+
value: Accessor<string[]>;
|
|
68
|
+
name: string | undefined;
|
|
69
|
+
disabled: boolean;
|
|
70
|
+
readOnly: boolean | undefined;
|
|
71
|
+
invalid: boolean;
|
|
72
|
+
setValue: (next: string[] | ((prev: string[]) => string[])) => void;
|
|
73
|
+
addValue: (val: string) => void;
|
|
74
|
+
toggleValue: (val: string) => void;
|
|
75
|
+
getItemProps: (itemProps: CheckboxGroupItemProps) => {
|
|
76
|
+
checked: boolean | undefined;
|
|
77
|
+
onCheckedChange(): void;
|
|
78
|
+
name: string | undefined;
|
|
79
|
+
disabled: boolean;
|
|
80
|
+
readOnly: boolean | undefined;
|
|
81
|
+
invalid: boolean;
|
|
82
|
+
};
|
|
83
|
+
}>;
|
|
84
|
+
type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>;
|
|
85
|
+
//#endregion
|
|
86
|
+
//#region src/components/checkbox/group.d.ts
|
|
87
|
+
interface CheckboxGroupBaseProps extends UseCheckboxGroupProps, PolymorphicProps<"div"> {}
|
|
88
|
+
interface CheckboxGroupProps extends HTMLProps<"div">, CheckboxGroupBaseProps {}
|
|
89
|
+
declare const CheckboxGroup: (props: CheckboxGroupProps) => import("solid-js").JSX.Element;
|
|
90
|
+
//#endregion
|
|
91
|
+
//#region src/components/checkbox/use-group-context.d.ts
|
|
92
|
+
interface UseCheckboxGroupContext extends UseCheckboxGroupReturn {}
|
|
93
|
+
declare const CheckboxGroupContextProvider: import("solid-js").ContextProviderComponent<UseCheckboxGroupContext | undefined>, useCheckboxGroupContext: () => UseCheckboxGroupContext | undefined;
|
|
94
|
+
//#endregion
|
|
95
|
+
//#region src/components/checkbox/group-provider.d.ts
|
|
96
|
+
interface ProviderProps {
|
|
97
|
+
value: UseCheckboxGroupContext;
|
|
98
|
+
}
|
|
99
|
+
interface CheckboxGroupProviderBaseProps extends ProviderProps, PolymorphicProps<"div"> {}
|
|
100
|
+
interface CheckboxGroupProviderProps extends Assign<HTMLProps<"div">, CheckboxGroupProviderBaseProps> {}
|
|
101
|
+
declare const CheckboxGroupProvider: (props: CheckboxGroupProviderProps) => import("solid-js").JSX.Element;
|
|
102
|
+
//#endregion
|
|
103
|
+
//#region src/components/checkbox/hidden-input.d.ts
|
|
104
|
+
interface CheckboxHiddenInputBaseProps extends PolymorphicProps<"input"> {}
|
|
105
|
+
interface CheckboxHiddenInputProps extends HTMLProps<"input">, CheckboxHiddenInputBaseProps {}
|
|
106
|
+
declare const CheckboxHiddenInput: (props: CheckboxHiddenInputProps) => import("solid-js").JSX.Element;
|
|
107
|
+
//#endregion
|
|
108
|
+
//#region src/components/checkbox/indicator.d.ts
|
|
109
|
+
interface IndicatorProps {
|
|
110
|
+
indeterminate?: boolean;
|
|
111
|
+
}
|
|
112
|
+
interface CheckboxIndicatorBaseProps extends IndicatorProps, PolymorphicProps<"div"> {}
|
|
113
|
+
interface CheckboxIndicatorProps extends HTMLProps<"div">, CheckboxIndicatorBaseProps {}
|
|
114
|
+
declare const CheckboxIndicator: (props: CheckboxIndicatorProps) => import("solid-js").JSX.Element;
|
|
115
|
+
//#endregion
|
|
116
|
+
//#region src/components/checkbox/label.d.ts
|
|
117
|
+
interface CheckboxLabelBaseProps extends PolymorphicProps<"span"> {}
|
|
118
|
+
interface CheckboxLabelProps extends HTMLProps<"span">, CheckboxLabelBaseProps {}
|
|
119
|
+
declare const CheckboxLabel: (props: CheckboxLabelProps) => import("solid-js").JSX.Element;
|
|
120
|
+
//#endregion
|
|
121
|
+
//#region src/components/checkbox/root.d.ts
|
|
122
|
+
interface CheckboxRootBaseProps extends UseCheckboxProps, PolymorphicProps<"label"> {}
|
|
123
|
+
interface CheckboxRootProps extends HTMLProps<"label">, CheckboxRootBaseProps {}
|
|
124
|
+
declare const CheckboxRoot: (props: CheckboxRootProps) => import("solid-js").JSX.Element;
|
|
125
|
+
//#endregion
|
|
126
|
+
//#region src/components/checkbox/root-provider.d.ts
|
|
127
|
+
interface RootProviderProps {
|
|
128
|
+
value: UseCheckboxReturn;
|
|
129
|
+
}
|
|
130
|
+
interface CheckboxRootProviderBaseProps extends PolymorphicProps<"label"> {}
|
|
131
|
+
interface CheckboxRootProviderProps extends HTMLProps<"label">, RootProviderProps, CheckboxRootProviderBaseProps {}
|
|
132
|
+
declare const CheckboxRootProvider: (props: CheckboxRootProviderProps) => import("solid-js").JSX.Element;
|
|
133
|
+
//#endregion
|
|
134
|
+
//#region src/components/checkbox/anatomy.d.ts
|
|
135
|
+
declare const checkboxAnatomy: import("@wirekyt/dom/anatomy").AnatomyInstance<"label" | "root" | "indicator" | "group" | "control">;
|
|
136
|
+
declare namespace checkbox_d_exports {
|
|
137
|
+
export { CheckedChangeDetails, CheckedState, CheckboxContext as Context, CheckboxContextProps as ContextProps, CheckboxControl as Control, CheckboxControlBaseProps as ControlBaseProps, CheckboxControlProps as ControlProps, CheckboxGroup as Group, CheckboxGroupBaseProps as GroupBaseProps, CheckboxGroupProps as GroupProps, CheckboxGroupProvider as GroupProvider, CheckboxGroupProviderBaseProps as GroupProviderBaseProps, CheckboxGroupProviderProps as GroupProviderProps, CheckboxHiddenInput as HiddenInput, CheckboxHiddenInputBaseProps as HiddenInputBaseProps, CheckboxHiddenInputProps as HiddenInputProps, CheckboxIndicator as Indicator, CheckboxIndicatorBaseProps as IndicatorBaseProps, CheckboxIndicatorProps as IndicatorProps, CheckboxLabel as Label, CheckboxLabelBaseProps as LabelBaseProps, CheckboxLabelProps as LabelProps, CheckboxRoot as Root, CheckboxRootBaseProps as RootBaseProps, CheckboxRootProps as RootProps, CheckboxRootProvider as RootProvider, CheckboxRootProviderBaseProps as RootProviderBaseProps, CheckboxRootProviderProps as RootProviderProps };
|
|
138
|
+
}
|
|
139
|
+
//#endregion
|
|
140
|
+
export { checkbox_d_exports as Checkbox, type CheckboxCheckedChangeDetails, type CheckboxCheckedState, CheckboxContext, type CheckboxContextProps, CheckboxControl, type CheckboxControlBaseProps, type CheckboxControlProps, CheckboxGroup, type CheckboxGroupBaseProps, type CheckboxGroupProps, CheckboxGroupProvider, type CheckboxGroupProviderBaseProps, type CheckboxGroupProviderProps, CheckboxHiddenInput, type CheckboxHiddenInputBaseProps, type CheckboxHiddenInputProps, CheckboxIndicator, type CheckboxIndicatorBaseProps, type CheckboxIndicatorProps, CheckboxLabel, type CheckboxLabelBaseProps, type CheckboxLabelProps, CheckboxRoot, type CheckboxRootBaseProps, type CheckboxRootProps, CheckboxRootProvider, type CheckboxRootProviderBaseProps, type CheckboxRootProviderProps, type UseCheckboxContext, type UseCheckboxGroupContext, type UseCheckboxGroupProps, type UseCheckboxGroupReturn, type UseCheckboxProps, type UseCheckboxReturn, checkboxAnatomy, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext };
|
package/dist/checkbox.js
ADDED
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
|
|
2
|
+
import { a as mergeProps$2, d as createContext$1, i as useMachine, l as createSplitProps, r as normalizeProps } from "./core-7QKBNp9p.js";
|
|
3
|
+
import { t as runIfFn } from "./run-if-fn-CjvD7VzQ.js";
|
|
4
|
+
import { t as wire } from "./factory-D2A7xdtl.js";
|
|
5
|
+
import { a as useLocaleContext, l as useEnvironmentContext } from "./providers-B-Vi5wQ7.js";
|
|
6
|
+
import { u as useFieldsetContext } from "./fieldset-D5teGLZ9.js";
|
|
7
|
+
import { h as useFieldContext } from "./field-CQr_Dibp.js";
|
|
8
|
+
import { createMemo, createSignal, createUniqueId, untrack } from "solid-js";
|
|
9
|
+
import { createComponent, mergeProps as mergeProps$1 } from "solid-js/web";
|
|
10
|
+
import * as checkbox from "@wirekyt/dom/machines/checkbox";
|
|
11
|
+
import { anatomy } from "@wirekyt/dom/machines/checkbox";
|
|
12
|
+
//#region src/components/checkbox/use-context.ts
|
|
13
|
+
const [CheckboxProvider, useCheckboxContext] = createContext$1({
|
|
14
|
+
hookName: "useCheckboxContext",
|
|
15
|
+
providerName: "<CheckboxProvider />"
|
|
16
|
+
});
|
|
17
|
+
//#endregion
|
|
18
|
+
//#region src/components/checkbox/context.tsx
|
|
19
|
+
const CheckboxContext = (props) => props.children(useCheckboxContext());
|
|
20
|
+
//#endregion
|
|
21
|
+
//#region src/components/checkbox/control.tsx
|
|
22
|
+
const CheckboxControl = (props) => {
|
|
23
|
+
const checkbox = useCheckboxContext();
|
|
24
|
+
const mergedProps = mergeProps$2(() => checkbox().getControlProps(), props);
|
|
25
|
+
return createComponent(wire.div, mergedProps);
|
|
26
|
+
};
|
|
27
|
+
//#endregion
|
|
28
|
+
//#region src/components/checkbox/anatomy.ts
|
|
29
|
+
const checkboxAnatomy = anatomy.extendWith("group");
|
|
30
|
+
//#endregion
|
|
31
|
+
//#region src/utils/use-controllable-state.ts
|
|
32
|
+
function useControllableState(props) {
|
|
33
|
+
const [uncontrolledValue, setUncontrolledValue] = createSignal(runIfFn(props.defaultValue));
|
|
34
|
+
const controlled = createMemo(() => props.value?.() !== void 0);
|
|
35
|
+
const currentValue = createMemo(() => controlled() ? props.value?.() : uncontrolledValue());
|
|
36
|
+
const setValue = (next) => {
|
|
37
|
+
untrack(() => {
|
|
38
|
+
const nextValue = runIfFn(next, currentValue());
|
|
39
|
+
if (controlled()) return props.onChange?.(nextValue);
|
|
40
|
+
setUncontrolledValue(nextValue);
|
|
41
|
+
return props.onChange?.(nextValue);
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
return [currentValue, setValue];
|
|
45
|
+
}
|
|
46
|
+
//#endregion
|
|
47
|
+
//#region src/components/checkbox/use-group.ts
|
|
48
|
+
function useCheckboxGroup(props = {}) {
|
|
49
|
+
const fieldset = useFieldsetContext();
|
|
50
|
+
const disabled = () => props.disabled ?? fieldset?.()?.disabled;
|
|
51
|
+
const invalid = () => props.invalid ?? fieldset?.()?.invalid;
|
|
52
|
+
const interactive = createMemo(() => !(disabled() || props.readOnly));
|
|
53
|
+
const [value, setValue] = useControllableState({
|
|
54
|
+
value: props.value,
|
|
55
|
+
defaultValue: props.defaultValue || [],
|
|
56
|
+
onChange: props.onValueChange
|
|
57
|
+
});
|
|
58
|
+
return createMemo(() => {
|
|
59
|
+
const isChecked = (val) => {
|
|
60
|
+
return value().some((v) => String(v) === String(val));
|
|
61
|
+
};
|
|
62
|
+
const toggleValue = (val) => {
|
|
63
|
+
if (isChecked(val)) removeValue(val);
|
|
64
|
+
else addValue(val);
|
|
65
|
+
};
|
|
66
|
+
const isAtMax = props.maxSelectedValues != null && value().length >= props.maxSelectedValues;
|
|
67
|
+
const addValue = (val) => {
|
|
68
|
+
if (!interactive()) return;
|
|
69
|
+
if (isChecked(val)) return;
|
|
70
|
+
if (isAtMax) return;
|
|
71
|
+
setValue(value().concat(val));
|
|
72
|
+
};
|
|
73
|
+
const removeValue = (val) => {
|
|
74
|
+
if (!interactive()) return;
|
|
75
|
+
setValue(value().filter((v) => String(v) !== String(val)));
|
|
76
|
+
};
|
|
77
|
+
const getItemProps = (itemProps) => {
|
|
78
|
+
const checked = itemProps.value != null ? isChecked(itemProps.value) : void 0;
|
|
79
|
+
return {
|
|
80
|
+
checked,
|
|
81
|
+
onCheckedChange() {
|
|
82
|
+
if (itemProps.value != null) toggleValue(itemProps.value);
|
|
83
|
+
},
|
|
84
|
+
name: props.name,
|
|
85
|
+
disabled: disabled() || isAtMax && !checked,
|
|
86
|
+
readOnly: props.readOnly,
|
|
87
|
+
invalid: invalid()
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
return {
|
|
91
|
+
isChecked,
|
|
92
|
+
value,
|
|
93
|
+
name: props.name,
|
|
94
|
+
disabled: disabled(),
|
|
95
|
+
readOnly: props.readOnly,
|
|
96
|
+
invalid: invalid(),
|
|
97
|
+
setValue,
|
|
98
|
+
addValue,
|
|
99
|
+
toggleValue,
|
|
100
|
+
getItemProps
|
|
101
|
+
};
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
//#endregion
|
|
105
|
+
//#region src/components/checkbox/use-group-context.tsx
|
|
106
|
+
const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext$1({
|
|
107
|
+
hookName: "useCheckboxGroupContext",
|
|
108
|
+
providerName: "<CheckboxGroupProvider />",
|
|
109
|
+
strict: false
|
|
110
|
+
});
|
|
111
|
+
//#endregion
|
|
112
|
+
//#region src/components/checkbox/group.tsx
|
|
113
|
+
const CheckboxGroup = (props) => {
|
|
114
|
+
const [checkboxGroupProps, localProps] = createSplitProps()(props, [
|
|
115
|
+
"defaultValue",
|
|
116
|
+
"value",
|
|
117
|
+
"onValueChange",
|
|
118
|
+
"disabled",
|
|
119
|
+
"invalid",
|
|
120
|
+
"readOnly",
|
|
121
|
+
"name",
|
|
122
|
+
"maxSelectedValues"
|
|
123
|
+
]);
|
|
124
|
+
return createComponent(CheckboxGroupContextProvider, {
|
|
125
|
+
value: useCheckboxGroup(checkboxGroupProps),
|
|
126
|
+
get children() {
|
|
127
|
+
return createComponent(wire.div, mergeProps$1({ role: "group" }, localProps, () => checkboxAnatomy.build().group.attrs));
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
};
|
|
131
|
+
//#endregion
|
|
132
|
+
//#region src/components/checkbox/group-provider.tsx
|
|
133
|
+
const CheckboxGroupProvider = (props) => {
|
|
134
|
+
const [localProps, restProps] = createSplitProps()(props, ["value"]);
|
|
135
|
+
return createComponent(CheckboxGroupContextProvider, {
|
|
136
|
+
get value() {
|
|
137
|
+
return localProps.value;
|
|
138
|
+
},
|
|
139
|
+
get children() {
|
|
140
|
+
return createComponent(wire.div, mergeProps$1({ role: "group" }, restProps, () => checkboxAnatomy.build().group.attrs));
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
};
|
|
144
|
+
//#endregion
|
|
145
|
+
//#region src/components/checkbox/hidden-input.tsx
|
|
146
|
+
const CheckboxHiddenInput = (props) => {
|
|
147
|
+
const checkbox = useCheckboxContext();
|
|
148
|
+
const mergedProps = mergeProps$2(() => checkbox().getHiddenInputProps(), props);
|
|
149
|
+
const field = useFieldContext();
|
|
150
|
+
return createComponent(wire.input, mergeProps$1({ get ["aria-describedby"]() {
|
|
151
|
+
return field?.().ariaDescribedby;
|
|
152
|
+
} }, mergedProps));
|
|
153
|
+
};
|
|
154
|
+
//#endregion
|
|
155
|
+
//#region src/components/checkbox/indicator.tsx
|
|
156
|
+
const CheckboxIndicator = (props) => {
|
|
157
|
+
const [indicatorProps, localProps] = createSplitProps()(props, ["indeterminate"]);
|
|
158
|
+
const checkbox = useCheckboxContext();
|
|
159
|
+
const mergedProps = mergeProps$2(() => checkbox().getIndicatorProps(), localProps);
|
|
160
|
+
return createComponent(wire.div, mergeProps$1(mergedProps, { get hidden() {
|
|
161
|
+
return !(indicatorProps.indeterminate ? checkbox().indeterminate : checkbox().checked);
|
|
162
|
+
} }));
|
|
163
|
+
};
|
|
164
|
+
//#endregion
|
|
165
|
+
//#region src/components/checkbox/label.tsx
|
|
166
|
+
const CheckboxLabel = (props) => {
|
|
167
|
+
const checkbox = useCheckboxContext();
|
|
168
|
+
const mergedProps = mergeProps$2(() => checkbox().getLabelProps(), props);
|
|
169
|
+
return createComponent(wire.span, mergedProps);
|
|
170
|
+
};
|
|
171
|
+
//#endregion
|
|
172
|
+
//#region src/components/checkbox/use.ts
|
|
173
|
+
const useCheckbox = (ownProps = {}) => {
|
|
174
|
+
const checkboxGroup = useCheckboxGroupContext();
|
|
175
|
+
const props = createMemo(() => {
|
|
176
|
+
const resolvedProps = runIfFn(ownProps);
|
|
177
|
+
return mergeProps$2(checkboxGroup?.().getItemProps({ value: resolvedProps.value }) ?? {}, resolvedProps);
|
|
178
|
+
}, [ownProps, checkboxGroup]);
|
|
179
|
+
const id = createUniqueId();
|
|
180
|
+
const locale = useLocaleContext();
|
|
181
|
+
const environment = useEnvironmentContext();
|
|
182
|
+
const field = useFieldContext();
|
|
183
|
+
const machineProps = createMemo(() => ({
|
|
184
|
+
id,
|
|
185
|
+
ids: {
|
|
186
|
+
label: field?.().ids.label,
|
|
187
|
+
hiddenInput: field?.().ids.control
|
|
188
|
+
},
|
|
189
|
+
disabled: field?.().disabled,
|
|
190
|
+
readOnly: field?.().readOnly,
|
|
191
|
+
invalid: field?.().invalid,
|
|
192
|
+
required: field?.().required,
|
|
193
|
+
dir: locale().dir,
|
|
194
|
+
getRootNode: environment().getRootNode,
|
|
195
|
+
...props()
|
|
196
|
+
}));
|
|
197
|
+
const service = useMachine(checkbox.machine, machineProps);
|
|
198
|
+
return createMemo(() => checkbox.connect(service, normalizeProps));
|
|
199
|
+
};
|
|
200
|
+
//#endregion
|
|
201
|
+
//#region src/components/checkbox/root.tsx
|
|
202
|
+
const CheckboxRoot = (props) => {
|
|
203
|
+
const [useCheckboxProps, labelprops] = createSplitProps()(props, [
|
|
204
|
+
"checked",
|
|
205
|
+
"defaultChecked",
|
|
206
|
+
"disabled",
|
|
207
|
+
"form",
|
|
208
|
+
"id",
|
|
209
|
+
"ids",
|
|
210
|
+
"invalid",
|
|
211
|
+
"name",
|
|
212
|
+
"onCheckedChange",
|
|
213
|
+
"readOnly",
|
|
214
|
+
"required",
|
|
215
|
+
"value"
|
|
216
|
+
]);
|
|
217
|
+
const checkbox = useCheckbox(useCheckboxProps);
|
|
218
|
+
const mergedProps = mergeProps$2(() => checkbox().getRootProps(), labelprops);
|
|
219
|
+
return createComponent(CheckboxProvider, {
|
|
220
|
+
value: checkbox,
|
|
221
|
+
get children() {
|
|
222
|
+
return createComponent(wire.label, mergedProps);
|
|
223
|
+
}
|
|
224
|
+
});
|
|
225
|
+
};
|
|
226
|
+
//#endregion
|
|
227
|
+
//#region src/components/checkbox/root-provider.tsx
|
|
228
|
+
const CheckboxRootProvider = (props) => {
|
|
229
|
+
const [{ value: checkbox }, labelprops] = createSplitProps()(props, ["value"]);
|
|
230
|
+
const mergedProps = mergeProps$2(() => checkbox().getRootProps(), labelprops);
|
|
231
|
+
return createComponent(CheckboxProvider, {
|
|
232
|
+
value: checkbox,
|
|
233
|
+
get children() {
|
|
234
|
+
return createComponent(wire.label, mergedProps);
|
|
235
|
+
}
|
|
236
|
+
});
|
|
237
|
+
};
|
|
238
|
+
//#endregion
|
|
239
|
+
//#region src/components/checkbox/checkbox.ts
|
|
240
|
+
var checkbox_exports = /* @__PURE__ */ __exportAll({
|
|
241
|
+
Context: () => CheckboxContext,
|
|
242
|
+
Control: () => CheckboxControl,
|
|
243
|
+
Group: () => CheckboxGroup,
|
|
244
|
+
GroupProvider: () => CheckboxGroupProvider,
|
|
245
|
+
HiddenInput: () => CheckboxHiddenInput,
|
|
246
|
+
Indicator: () => CheckboxIndicator,
|
|
247
|
+
Label: () => CheckboxLabel,
|
|
248
|
+
Root: () => CheckboxRoot,
|
|
249
|
+
RootProvider: () => CheckboxRootProvider
|
|
250
|
+
});
|
|
251
|
+
//#endregion
|
|
252
|
+
export { checkbox_exports as Checkbox, CheckboxContext, CheckboxControl, CheckboxGroup, CheckboxGroupProvider, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot, CheckboxRootProvider, checkboxAnatomy, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext };
|