@ark-ui/solid 5.27.0 → 5.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/carousel.anatomy-x-SHXq-8.d.ts +5 -0
- package/dist/chunk/3F3SNHGT.jsx +170 -0
- package/dist/chunk/{R7NPOXQE.jsx → 5X56MDAW.jsx} +39 -5
- package/dist/chunk/ABOW3GWC.js +105 -0
- package/dist/chunk/{MMBJRJSN.jsx → BYLUEJKC.jsx} +2 -1
- package/dist/chunk/DPRR355L.jsx +6 -0
- package/dist/chunk/{SQOQ3NCO.js → ENUS5JGY.js} +7 -1
- package/dist/chunk/JCXGPVZQ.js +1 -0
- package/dist/chunk/{TW4Y4SQF.jsx → JDJGE7LR.jsx} +16 -6
- package/dist/chunk/OENRIKKR.js +6 -0
- package/dist/chunk/{MXU773T5.js → RZYJZUHZ.js} +40 -4
- package/dist/components/accordion/index.d.ts +1 -1
- package/dist/components/anatomy.d.ts +3 -2
- package/dist/components/anatomy.js +15 -14
- package/dist/components/anatomy.jsx +57 -53
- package/dist/components/angle-slider/index.d.ts +1 -1
- package/dist/components/avatar/index.d.ts +1 -1
- package/dist/components/bottom-sheet/index.d.ts +2 -2
- package/dist/components/carousel/index.d.ts +23 -5
- package/dist/components/carousel/index.js +2 -2
- package/dist/components/carousel/index.jsx +8 -4
- package/dist/components/checkbox/index.d.ts +1 -1
- package/dist/components/clipboard/index.d.ts +1 -1
- package/dist/components/collapsible/index.d.ts +1 -1
- package/dist/components/collection/index.d.ts +2 -2
- package/dist/components/color-picker/index.d.ts +8 -5
- package/dist/components/combobox/index.d.ts +11 -7
- package/dist/components/date-picker/index.d.ts +2 -2
- package/dist/components/dialog/index.d.ts +8 -5
- package/dist/components/download-trigger/index.d.ts +1 -1
- package/dist/components/editable/index.d.ts +7 -4
- package/dist/components/factory.d.ts +1 -1
- package/dist/components/field/index.d.ts +1 -1
- package/dist/components/fieldset/index.d.ts +1 -1
- package/dist/components/file-upload/index.d.ts +1 -1
- package/dist/components/floating-panel/index.d.ts +2 -2
- package/dist/components/focus-trap/index.d.ts +1 -1
- package/dist/components/frame/index.d.ts +1 -1
- package/dist/components/highlight/index.d.ts +1 -1
- package/dist/components/hover-card/index.d.ts +8 -5
- package/dist/components/image-cropper/index.d.ts +81 -0
- package/dist/components/image-cropper/index.js +2 -0
- package/dist/components/image-cropper/index.jsx +38 -0
- package/dist/components/index.d.ts +23 -20
- package/dist/components/index.js +36 -34
- package/dist/components/index.jsx +342 -308
- package/dist/components/json-tree-view/index.d.ts +2 -2
- package/dist/components/listbox/index.d.ts +6 -6
- package/dist/components/marquee/index.d.ts +9 -3
- package/dist/components/marquee/index.js +1 -1
- package/dist/components/marquee/index.jsx +3 -1
- package/dist/components/menu/index.d.ts +8 -5
- package/dist/components/number-input/index.d.ts +1 -1
- package/dist/components/pagination/index.d.ts +1 -1
- package/dist/components/password-input/index.d.ts +1 -1
- package/dist/components/pin-input/index.d.ts +1 -1
- package/dist/components/popover/index.d.ts +8 -5
- package/dist/components/presence/index.d.ts +3 -3
- package/dist/components/progress/index.d.ts +1 -1
- package/dist/components/qr-code/index.d.ts +1 -1
- package/dist/components/radio-group/index.d.ts +1 -1
- package/dist/components/rating-group/index.d.ts +1 -1
- package/dist/components/scroll-area/index.d.ts +1 -1
- package/dist/components/segment-group/index.d.ts +1 -1
- package/dist/components/select/index.d.ts +11 -7
- package/dist/components/signature-pad/index.d.ts +1 -1
- package/dist/components/slider/index.d.ts +1 -1
- package/dist/components/splitter/index.d.ts +1 -1
- package/dist/components/steps/index.d.ts +1 -1
- package/dist/components/switch/index.d.ts +1 -1
- package/dist/components/tabs/index.d.ts +1 -1
- package/dist/components/tags-input/index.d.ts +7 -4
- package/dist/components/timer/index.d.ts +1 -1
- package/dist/components/toast/index.d.ts +14 -5
- package/dist/components/toggle/index.d.ts +1 -1
- package/dist/components/toggle-group/index.d.ts +1 -1
- package/dist/components/tooltip/index.d.ts +2 -2
- package/dist/components/tour/index.d.ts +9 -6
- package/dist/components/tree-view/index.d.ts +3 -3
- package/dist/index.d.ts +23 -20
- package/dist/index.js +36 -34
- package/dist/index.jsx +344 -310
- package/dist/tour.anatomy-BwE3XSIU.d.ts +5 -0
- package/dist/{tree-view-tree-BEAzL2YS.d.ts → tree-view-tree-DTB5aCol.d.ts} +1 -1
- package/dist/{types-Bc0WfPsv.d.ts → types-Sr_80hg9.d.ts} +1 -2
- package/dist/{use-list-collection-Dk2gVdQ2.d.ts → use-list-collection-Cknid_6N.d.ts} +2 -2
- package/dist/{use-presence-DZuLEWMI.d.ts → use-presence-DsfHkUSW.d.ts} +1 -1
- package/package.json +72 -71
- package/dist/chunk/4EHDEDQ4.js +0 -1
- package/dist/tour.anatomy-LyAf9UF9.d.ts +0 -5
- /package/dist/chunk/{W7H2HSGP.jsx → EDXDNGEO.jsx} +0 -0
- /package/dist/chunk/{RT3P52Y5.js → PJLQLDQ3.js} +0 -0
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import * as _zag_js_anatomy from '@zag-js/anatomy';
|
|
2
|
+
|
|
3
|
+
declare const carouselAnatomy: _zag_js_anatomy.AnatomyInstance<"root" | "item" | "control" | "itemGroup" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "indicator" | "autoplayTrigger" | "progressText" | "autoplayIndicator">;
|
|
4
|
+
|
|
5
|
+
export { carouselAnatomy as c };
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
import {
|
|
2
|
+
createSplitProps
|
|
3
|
+
} from "./6WEDGJKQ.jsx";
|
|
4
|
+
import {
|
|
5
|
+
ark
|
|
6
|
+
} from "./UFYZ7HLU.jsx";
|
|
7
|
+
import {
|
|
8
|
+
useEnvironmentContext
|
|
9
|
+
} from "./6J5H27AQ.jsx";
|
|
10
|
+
import {
|
|
11
|
+
runIfFn
|
|
12
|
+
} from "./KGOB2IMX.jsx";
|
|
13
|
+
import {
|
|
14
|
+
useLocaleContext
|
|
15
|
+
} from "./XIYHIOP3.jsx";
|
|
16
|
+
import {
|
|
17
|
+
createContext
|
|
18
|
+
} from "./TVCIHLER.jsx";
|
|
19
|
+
import {
|
|
20
|
+
__export
|
|
21
|
+
} from "./7IUG3E2V.jsx";
|
|
22
|
+
|
|
23
|
+
// src/components/image-cropper/use-image-cropper-context.ts
|
|
24
|
+
var [ImageCropperProvider, useImageCropperContext] = createContext({
|
|
25
|
+
hookName: "useImageCropperContext",
|
|
26
|
+
providerName: "<ImageCropperProvider />"
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
// src/components/image-cropper/image-cropper-context.tsx
|
|
30
|
+
var ImageCropperContext = (props) => props.children(useImageCropperContext());
|
|
31
|
+
|
|
32
|
+
// src/components/image-cropper/image-cropper-grid.tsx
|
|
33
|
+
import { mergeProps } from "@zag-js/solid";
|
|
34
|
+
var ImageCropperGrid = (props) => {
|
|
35
|
+
const api = useImageCropperContext();
|
|
36
|
+
const mergedProps = mergeProps(() => api().getGridProps({ axis: props.axis }), props);
|
|
37
|
+
return <ark.div {...mergedProps} />;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
// src/components/image-cropper/image-cropper-handle.tsx
|
|
41
|
+
import { mergeProps as mergeProps2 } from "@zag-js/solid";
|
|
42
|
+
var ImageCropperHandle = (props) => {
|
|
43
|
+
const api = useImageCropperContext();
|
|
44
|
+
const mergedProps = mergeProps2(() => api().getHandleProps({ position: props.position }), props);
|
|
45
|
+
return <ark.div {...mergedProps} />;
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
// src/components/image-cropper/image-cropper-image.tsx
|
|
49
|
+
import { mergeProps as mergeProps3 } from "@zag-js/solid";
|
|
50
|
+
var ImageCropperImage = (props) => {
|
|
51
|
+
const api = useImageCropperContext();
|
|
52
|
+
const mergedProps = mergeProps3(() => api().getImageProps(), props);
|
|
53
|
+
return <ark.img {...mergedProps} />;
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
// src/components/image-cropper/image-cropper-root.tsx
|
|
57
|
+
import { mergeProps as mergeProps4 } from "@zag-js/solid";
|
|
58
|
+
|
|
59
|
+
// src/components/image-cropper/use-image-cropper.ts
|
|
60
|
+
import * as imageCropper from "@zag-js/image-cropper";
|
|
61
|
+
import { normalizeProps, useMachine } from "@zag-js/solid";
|
|
62
|
+
import { createMemo, createUniqueId } from "solid-js";
|
|
63
|
+
var useImageCropper = (props = {}) => {
|
|
64
|
+
const id = createUniqueId();
|
|
65
|
+
const locale = useLocaleContext();
|
|
66
|
+
const environment = useEnvironmentContext();
|
|
67
|
+
const imageCropperProps = runIfFn(props);
|
|
68
|
+
const machineProps = createMemo(() => ({
|
|
69
|
+
id,
|
|
70
|
+
dir: locale().dir,
|
|
71
|
+
getRootNode: environment().getRootNode,
|
|
72
|
+
...imageCropperProps
|
|
73
|
+
}));
|
|
74
|
+
const service = useMachine(imageCropper.machine, machineProps);
|
|
75
|
+
return createMemo(() => imageCropper.connect(service, normalizeProps));
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
// src/components/image-cropper/image-cropper-root.tsx
|
|
79
|
+
var ImageCropperRoot = (props) => {
|
|
80
|
+
const [useImageCropperProps, localProps] = createSplitProps()(props, [
|
|
81
|
+
"aspectRatio",
|
|
82
|
+
"cropShape",
|
|
83
|
+
"defaultFlip",
|
|
84
|
+
"defaultRotation",
|
|
85
|
+
"defaultZoom",
|
|
86
|
+
"fixedCropArea",
|
|
87
|
+
"flip",
|
|
88
|
+
"id",
|
|
89
|
+
"ids",
|
|
90
|
+
"initialCrop",
|
|
91
|
+
"maxHeight",
|
|
92
|
+
"maxWidth",
|
|
93
|
+
"maxZoom",
|
|
94
|
+
"minHeight",
|
|
95
|
+
"minWidth",
|
|
96
|
+
"minZoom",
|
|
97
|
+
"nudgeStep",
|
|
98
|
+
"nudgeStepCtrl",
|
|
99
|
+
"nudgeStepShift",
|
|
100
|
+
"onCropChange",
|
|
101
|
+
"onFlipChange",
|
|
102
|
+
"onRotationChange",
|
|
103
|
+
"onZoomChange",
|
|
104
|
+
"rotation",
|
|
105
|
+
"translations",
|
|
106
|
+
"zoom",
|
|
107
|
+
"zoomSensitivity",
|
|
108
|
+
"zoomStep"
|
|
109
|
+
]);
|
|
110
|
+
const api = useImageCropper(useImageCropperProps);
|
|
111
|
+
const mergedProps = mergeProps4(() => api().getRootProps(), localProps);
|
|
112
|
+
return <ImageCropperProvider value={api}>
|
|
113
|
+
<ark.div {...mergedProps} />
|
|
114
|
+
</ImageCropperProvider>;
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
// src/components/image-cropper/image-cropper-root-provider.tsx
|
|
118
|
+
import { mergeProps as mergeProps5 } from "@zag-js/solid";
|
|
119
|
+
var ImageCropperRootProvider = (props) => {
|
|
120
|
+
const [{ value: imageCropper2 }, localProps] = createSplitProps()(props, ["value"]);
|
|
121
|
+
const mergedProps = mergeProps5(() => imageCropper2().getRootProps(), localProps);
|
|
122
|
+
return <ImageCropperProvider value={imageCropper2}>
|
|
123
|
+
<ark.div {...mergedProps} />
|
|
124
|
+
</ImageCropperProvider>;
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
// src/components/image-cropper/image-cropper-selection.tsx
|
|
128
|
+
import { mergeProps as mergeProps6 } from "@zag-js/solid";
|
|
129
|
+
var ImageCropperSelection = (props) => {
|
|
130
|
+
const api = useImageCropperContext();
|
|
131
|
+
const mergedProps = mergeProps6(() => api().getSelectionProps(), props);
|
|
132
|
+
return <ark.div {...mergedProps} />;
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
// src/components/image-cropper/image-cropper-viewport.tsx
|
|
136
|
+
import { mergeProps as mergeProps7 } from "@zag-js/solid";
|
|
137
|
+
var ImageCropperViewport = (props) => {
|
|
138
|
+
const api = useImageCropperContext();
|
|
139
|
+
const mergedProps = mergeProps7(() => api().getViewportProps(), props);
|
|
140
|
+
return <ark.div {...mergedProps} />;
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
// src/components/image-cropper/image-cropper.ts
|
|
144
|
+
var image_cropper_exports = {};
|
|
145
|
+
__export(image_cropper_exports, {
|
|
146
|
+
Context: () => ImageCropperContext,
|
|
147
|
+
Grid: () => ImageCropperGrid,
|
|
148
|
+
Handle: () => ImageCropperHandle,
|
|
149
|
+
Image: () => ImageCropperImage,
|
|
150
|
+
Root: () => ImageCropperRoot,
|
|
151
|
+
RootProvider: () => ImageCropperRootProvider,
|
|
152
|
+
Selection: () => ImageCropperSelection,
|
|
153
|
+
Viewport: () => ImageCropperViewport,
|
|
154
|
+
handles: () => handles
|
|
155
|
+
});
|
|
156
|
+
import { handles } from "@zag-js/image-cropper";
|
|
157
|
+
|
|
158
|
+
export {
|
|
159
|
+
useImageCropperContext,
|
|
160
|
+
ImageCropperContext,
|
|
161
|
+
ImageCropperGrid,
|
|
162
|
+
ImageCropperHandle,
|
|
163
|
+
ImageCropperImage,
|
|
164
|
+
useImageCropper,
|
|
165
|
+
ImageCropperRoot,
|
|
166
|
+
ImageCropperRootProvider,
|
|
167
|
+
ImageCropperSelection,
|
|
168
|
+
ImageCropperViewport,
|
|
169
|
+
image_cropper_exports
|
|
170
|
+
};
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
createSplitProps
|
|
3
3
|
} from "./6WEDGJKQ.jsx";
|
|
4
|
+
import {
|
|
5
|
+
carouselAnatomy
|
|
6
|
+
} from "./BYLUEJKC.jsx";
|
|
4
7
|
import {
|
|
5
8
|
ark
|
|
6
9
|
} from "./UFYZ7HLU.jsx";
|
|
@@ -20,8 +23,8 @@ import {
|
|
|
20
23
|
__export
|
|
21
24
|
} from "./7IUG3E2V.jsx";
|
|
22
25
|
|
|
23
|
-
// src/components/carousel/carousel-autoplay-
|
|
24
|
-
import {
|
|
26
|
+
// src/components/carousel/carousel-autoplay-indicator.tsx
|
|
27
|
+
import { Show } from "solid-js";
|
|
25
28
|
|
|
26
29
|
// src/components/carousel/use-carousel-context.ts
|
|
27
30
|
var [CarouselProvider, useCarouselContext] = createContext({
|
|
@@ -29,7 +32,34 @@ var [CarouselProvider, useCarouselContext] = createContext({
|
|
|
29
32
|
providerName: "<CarouselProvider />"
|
|
30
33
|
});
|
|
31
34
|
|
|
35
|
+
// src/components/carousel/carousel-autoplay-indicator.tsx
|
|
36
|
+
var parts = carouselAnatomy.build();
|
|
37
|
+
var CarouselAutoplayIndicator = (props) => {
|
|
38
|
+
const api = useCarouselContext();
|
|
39
|
+
return <ark.span {...parts.autoplayIndicator.attrs} {...props}>
|
|
40
|
+
<Show when={api().isPlaying} fallback={props.fallback}>
|
|
41
|
+
{props.children}
|
|
42
|
+
</Show>
|
|
43
|
+
</ark.span>;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
// src/components/carousel/carousel-progress-text.tsx
|
|
47
|
+
import { createMemo } from "solid-js";
|
|
48
|
+
var parts2 = carouselAnatomy.build();
|
|
49
|
+
var CarouselProgressText = (props) => {
|
|
50
|
+
const api = useCarouselContext();
|
|
51
|
+
const progressText = createMemo(() => {
|
|
52
|
+
const currentPage = api().page + 1;
|
|
53
|
+
const totalPages = api().pageSnapPoints.length;
|
|
54
|
+
return `${currentPage} / ${totalPages}`;
|
|
55
|
+
});
|
|
56
|
+
return <ark.span {...parts2.progressText.attrs} {...props}>
|
|
57
|
+
{props.children || progressText()}
|
|
58
|
+
</ark.span>;
|
|
59
|
+
};
|
|
60
|
+
|
|
32
61
|
// src/components/carousel/carousel-autoplay-trigger.tsx
|
|
62
|
+
import { mergeProps } from "@zag-js/solid";
|
|
33
63
|
var CarouselAutoplayTrigger = (props) => {
|
|
34
64
|
const api = useCarouselContext();
|
|
35
65
|
const mergedProps = mergeProps(() => api().getAutoplayTriggerProps(), props);
|
|
@@ -103,19 +133,19 @@ import { mergeProps as mergeProps9 } from "@zag-js/solid";
|
|
|
103
133
|
// src/components/carousel/use-carousel.ts
|
|
104
134
|
import * as carousel from "@zag-js/carousel";
|
|
105
135
|
import { normalizeProps, useMachine } from "@zag-js/solid";
|
|
106
|
-
import { createMemo, createUniqueId } from "solid-js";
|
|
136
|
+
import { createMemo as createMemo2, createUniqueId } from "solid-js";
|
|
107
137
|
var useCarousel = (props) => {
|
|
108
138
|
const id = createUniqueId();
|
|
109
139
|
const locale = useLocaleContext();
|
|
110
140
|
const environment = useEnvironmentContext();
|
|
111
|
-
const machineProps =
|
|
141
|
+
const machineProps = createMemo2(() => ({
|
|
112
142
|
id,
|
|
113
143
|
dir: locale().dir,
|
|
114
144
|
getRootNode: environment().getRootNode,
|
|
115
145
|
...runIfFn(props)
|
|
116
146
|
}));
|
|
117
147
|
const service = useMachine(carousel.machine, machineProps);
|
|
118
|
-
return
|
|
148
|
+
return createMemo2(() => carousel.connect(service, normalizeProps));
|
|
119
149
|
};
|
|
120
150
|
|
|
121
151
|
// src/components/carousel/carousel-root.tsx
|
|
@@ -161,6 +191,7 @@ var CarouselRootProvider = (props) => {
|
|
|
161
191
|
// src/components/carousel/carousel.ts
|
|
162
192
|
var carousel_exports = {};
|
|
163
193
|
__export(carousel_exports, {
|
|
194
|
+
AutoplayIndicator: () => CarouselAutoplayIndicator,
|
|
164
195
|
AutoplayTrigger: () => CarouselAutoplayTrigger,
|
|
165
196
|
Context: () => CarouselContext,
|
|
166
197
|
Control: () => CarouselControl,
|
|
@@ -170,12 +201,15 @@ __export(carousel_exports, {
|
|
|
170
201
|
ItemGroup: () => CarouselItemGroup,
|
|
171
202
|
NextTrigger: () => CarouselNextTrigger,
|
|
172
203
|
PrevTrigger: () => CarouselPrevTrigger,
|
|
204
|
+
ProgressText: () => CarouselProgressText,
|
|
173
205
|
Root: () => CarouselRoot,
|
|
174
206
|
RootProvider: () => CarouselRootProvider
|
|
175
207
|
});
|
|
176
208
|
|
|
177
209
|
export {
|
|
178
210
|
useCarouselContext,
|
|
211
|
+
CarouselAutoplayIndicator,
|
|
212
|
+
CarouselProgressText,
|
|
179
213
|
CarouselAutoplayTrigger,
|
|
180
214
|
CarouselContext,
|
|
181
215
|
CarouselControl,
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { createSplitProps } from './ZMHI4GDJ.js';
|
|
2
|
+
import { ark } from './EPLBB4QN.js';
|
|
3
|
+
import { useEnvironmentContext } from './QM3ROTYU.js';
|
|
4
|
+
import { useLocaleContext } from './JOLWKIPW.js';
|
|
5
|
+
import { runIfFn } from './DT73WLR4.js';
|
|
6
|
+
import { createContext } from './TROPIN4C.js';
|
|
7
|
+
import { __export } from './ESLJRKWD.js';
|
|
8
|
+
import { createComponent } from 'solid-js/web';
|
|
9
|
+
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
|
|
10
|
+
import * as imageCropper from '@zag-js/image-cropper';
|
|
11
|
+
import { handles } from '@zag-js/image-cropper';
|
|
12
|
+
import { createUniqueId, createMemo } from 'solid-js';
|
|
13
|
+
|
|
14
|
+
// src/components/image-cropper/use-image-cropper-context.ts
|
|
15
|
+
var [ImageCropperProvider, useImageCropperContext] = createContext({
|
|
16
|
+
hookName: "useImageCropperContext",
|
|
17
|
+
providerName: "<ImageCropperProvider />"
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
// src/components/image-cropper/image-cropper-context.tsx
|
|
21
|
+
var ImageCropperContext = (props) => props.children(useImageCropperContext());
|
|
22
|
+
var ImageCropperGrid = (props) => {
|
|
23
|
+
const api = useImageCropperContext();
|
|
24
|
+
const mergedProps = mergeProps(() => api().getGridProps({
|
|
25
|
+
axis: props.axis
|
|
26
|
+
}), props);
|
|
27
|
+
return createComponent(ark.div, mergedProps);
|
|
28
|
+
};
|
|
29
|
+
var ImageCropperHandle = (props) => {
|
|
30
|
+
const api = useImageCropperContext();
|
|
31
|
+
const mergedProps = mergeProps(() => api().getHandleProps({
|
|
32
|
+
position: props.position
|
|
33
|
+
}), props);
|
|
34
|
+
return createComponent(ark.div, mergedProps);
|
|
35
|
+
};
|
|
36
|
+
var ImageCropperImage = (props) => {
|
|
37
|
+
const api = useImageCropperContext();
|
|
38
|
+
const mergedProps = mergeProps(() => api().getImageProps(), props);
|
|
39
|
+
return createComponent(ark.img, mergedProps);
|
|
40
|
+
};
|
|
41
|
+
var useImageCropper = (props = {}) => {
|
|
42
|
+
const id = createUniqueId();
|
|
43
|
+
const locale = useLocaleContext();
|
|
44
|
+
const environment = useEnvironmentContext();
|
|
45
|
+
const imageCropperProps = runIfFn(props);
|
|
46
|
+
const machineProps = createMemo(() => ({
|
|
47
|
+
id,
|
|
48
|
+
dir: locale().dir,
|
|
49
|
+
getRootNode: environment().getRootNode,
|
|
50
|
+
...imageCropperProps
|
|
51
|
+
}));
|
|
52
|
+
const service = useMachine(imageCropper.machine, machineProps);
|
|
53
|
+
return createMemo(() => imageCropper.connect(service, normalizeProps));
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
// src/components/image-cropper/image-cropper-root.tsx
|
|
57
|
+
var ImageCropperRoot = (props) => {
|
|
58
|
+
const [useImageCropperProps, localProps] = createSplitProps()(props, ["aspectRatio", "cropShape", "defaultFlip", "defaultRotation", "defaultZoom", "fixedCropArea", "flip", "id", "ids", "initialCrop", "maxHeight", "maxWidth", "maxZoom", "minHeight", "minWidth", "minZoom", "nudgeStep", "nudgeStepCtrl", "nudgeStepShift", "onCropChange", "onFlipChange", "onRotationChange", "onZoomChange", "rotation", "translations", "zoom", "zoomSensitivity", "zoomStep"]);
|
|
59
|
+
const api = useImageCropper(useImageCropperProps);
|
|
60
|
+
const mergedProps = mergeProps(() => api().getRootProps(), localProps);
|
|
61
|
+
return createComponent(ImageCropperProvider, {
|
|
62
|
+
value: api,
|
|
63
|
+
get children() {
|
|
64
|
+
return createComponent(ark.div, mergedProps);
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
};
|
|
68
|
+
var ImageCropperRootProvider = (props) => {
|
|
69
|
+
const [{
|
|
70
|
+
value: imageCropper2
|
|
71
|
+
}, localProps] = createSplitProps()(props, ["value"]);
|
|
72
|
+
const mergedProps = mergeProps(() => imageCropper2().getRootProps(), localProps);
|
|
73
|
+
return createComponent(ImageCropperProvider, {
|
|
74
|
+
value: imageCropper2,
|
|
75
|
+
get children() {
|
|
76
|
+
return createComponent(ark.div, mergedProps);
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
};
|
|
80
|
+
var ImageCropperSelection = (props) => {
|
|
81
|
+
const api = useImageCropperContext();
|
|
82
|
+
const mergedProps = mergeProps(() => api().getSelectionProps(), props);
|
|
83
|
+
return createComponent(ark.div, mergedProps);
|
|
84
|
+
};
|
|
85
|
+
var ImageCropperViewport = (props) => {
|
|
86
|
+
const api = useImageCropperContext();
|
|
87
|
+
const mergedProps = mergeProps(() => api().getViewportProps(), props);
|
|
88
|
+
return createComponent(ark.div, mergedProps);
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
// src/components/image-cropper/image-cropper.ts
|
|
92
|
+
var image_cropper_exports = {};
|
|
93
|
+
__export(image_cropper_exports, {
|
|
94
|
+
Context: () => ImageCropperContext,
|
|
95
|
+
Grid: () => ImageCropperGrid,
|
|
96
|
+
Handle: () => ImageCropperHandle,
|
|
97
|
+
Image: () => ImageCropperImage,
|
|
98
|
+
Root: () => ImageCropperRoot,
|
|
99
|
+
RootProvider: () => ImageCropperRootProvider,
|
|
100
|
+
Selection: () => ImageCropperSelection,
|
|
101
|
+
Viewport: () => ImageCropperViewport,
|
|
102
|
+
handles: () => handles
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
export { ImageCropperContext, ImageCropperGrid, ImageCropperHandle, ImageCropperImage, ImageCropperRoot, ImageCropperRootProvider, ImageCropperSelection, ImageCropperViewport, image_cropper_exports, useImageCropper, useImageCropperContext };
|
|
@@ -46,6 +46,11 @@ var MarqueeEdge = (props) => {
|
|
|
46
46
|
const mergedProps = mergeProps(() => context().getEdgeProps(edgeProps), localProps);
|
|
47
47
|
return createComponent(ark.div, mergedProps);
|
|
48
48
|
};
|
|
49
|
+
var MarqueeItem = (props) => {
|
|
50
|
+
const context = useMarqueeContext();
|
|
51
|
+
const mergedProps = mergeProps(() => context().getItemProps(), props);
|
|
52
|
+
return createComponent(ark.div, mergedProps);
|
|
53
|
+
};
|
|
49
54
|
var useMarquee = (props) => {
|
|
50
55
|
const locale = useLocaleContext();
|
|
51
56
|
const environment = useEnvironmentContext();
|
|
@@ -96,9 +101,10 @@ __export(marquee_exports, {
|
|
|
96
101
|
Content: () => MarqueeContent,
|
|
97
102
|
Context: () => MarqueeContext,
|
|
98
103
|
Edge: () => MarqueeEdge,
|
|
104
|
+
Item: () => MarqueeItem,
|
|
99
105
|
Root: () => MarqueeRoot,
|
|
100
106
|
RootProvider: () => MarqueeRootProvider,
|
|
101
107
|
Viewport: () => MarqueeViewport
|
|
102
108
|
});
|
|
103
109
|
|
|
104
|
-
export { MarqueeContent, MarqueeContext, MarqueeEdge, MarqueeRoot, MarqueeRootProvider, MarqueeViewport, marquee_exports, useMarquee, useMarqueeContext };
|
|
110
|
+
export { MarqueeContent, MarqueeContext, MarqueeEdge, MarqueeItem, MarqueeRoot, MarqueeRootProvider, MarqueeViewport, marquee_exports, useMarquee, useMarqueeContext };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { anatomy } from '@zag-js/image-cropper';
|
|
@@ -53,8 +53,16 @@ var MarqueeEdge = (props) => {
|
|
|
53
53
|
return <ark.div {...mergedProps} />;
|
|
54
54
|
};
|
|
55
55
|
|
|
56
|
-
// src/components/marquee/marquee-
|
|
56
|
+
// src/components/marquee/marquee-item.tsx
|
|
57
57
|
import { mergeProps as mergeProps3 } from "@zag-js/solid";
|
|
58
|
+
var MarqueeItem = (props) => {
|
|
59
|
+
const context = useMarqueeContext();
|
|
60
|
+
const mergedProps = mergeProps3(() => context().getItemProps(), props);
|
|
61
|
+
return <ark.div {...mergedProps} />;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
// src/components/marquee/marquee-root.tsx
|
|
65
|
+
import { mergeProps as mergeProps4 } from "@zag-js/solid";
|
|
58
66
|
|
|
59
67
|
// src/components/marquee/use-marquee.ts
|
|
60
68
|
import * as marquee from "@zag-js/marquee";
|
|
@@ -95,27 +103,27 @@ var MarqueeRoot = (props) => {
|
|
|
95
103
|
"translations"
|
|
96
104
|
]);
|
|
97
105
|
const context = useMarquee(useMarqueeProps);
|
|
98
|
-
const mergedProps =
|
|
106
|
+
const mergedProps = mergeProps4(() => context().getRootProps(), localProps);
|
|
99
107
|
return <MarqueeProvider value={context}>
|
|
100
108
|
<ark.div {...mergedProps} />
|
|
101
109
|
</MarqueeProvider>;
|
|
102
110
|
};
|
|
103
111
|
|
|
104
112
|
// src/components/marquee/marquee-root-provider.tsx
|
|
105
|
-
import { mergeProps as
|
|
113
|
+
import { mergeProps as mergeProps5 } from "@zag-js/solid";
|
|
106
114
|
var MarqueeRootProvider = (props) => {
|
|
107
115
|
const [{ value: marquee2 }, localProps] = createSplitProps()(props, ["value"]);
|
|
108
|
-
const mergedProps =
|
|
116
|
+
const mergedProps = mergeProps5(() => marquee2().getRootProps(), localProps);
|
|
109
117
|
return <MarqueeProvider value={marquee2}>
|
|
110
118
|
<ark.div {...mergedProps} />
|
|
111
119
|
</MarqueeProvider>;
|
|
112
120
|
};
|
|
113
121
|
|
|
114
122
|
// src/components/marquee/marquee-viewport.tsx
|
|
115
|
-
import { mergeProps as
|
|
123
|
+
import { mergeProps as mergeProps6 } from "@zag-js/solid";
|
|
116
124
|
var MarqueeViewport = (props) => {
|
|
117
125
|
const context = useMarqueeContext();
|
|
118
|
-
const mergedProps =
|
|
126
|
+
const mergedProps = mergeProps6(() => context().getViewportProps(), props);
|
|
119
127
|
return <ark.div {...mergedProps} />;
|
|
120
128
|
};
|
|
121
129
|
|
|
@@ -125,6 +133,7 @@ __export(marquee_exports, {
|
|
|
125
133
|
Content: () => MarqueeContent,
|
|
126
134
|
Context: () => MarqueeContext,
|
|
127
135
|
Edge: () => MarqueeEdge,
|
|
136
|
+
Item: () => MarqueeItem,
|
|
128
137
|
Root: () => MarqueeRoot,
|
|
129
138
|
RootProvider: () => MarqueeRootProvider,
|
|
130
139
|
Viewport: () => MarqueeViewport
|
|
@@ -135,6 +144,7 @@ export {
|
|
|
135
144
|
MarqueeContent,
|
|
136
145
|
MarqueeContext,
|
|
137
146
|
MarqueeEdge,
|
|
147
|
+
MarqueeItem,
|
|
138
148
|
useMarquee,
|
|
139
149
|
MarqueeRoot,
|
|
140
150
|
MarqueeRootProvider,
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { carouselAnatomy } from './OENRIKKR.js';
|
|
1
2
|
import { createSplitProps } from './ZMHI4GDJ.js';
|
|
2
3
|
import { ark } from './EPLBB4QN.js';
|
|
3
4
|
import { useEnvironmentContext } from './QM3ROTYU.js';
|
|
@@ -5,10 +6,10 @@ import { useLocaleContext } from './JOLWKIPW.js';
|
|
|
5
6
|
import { runIfFn } from './DT73WLR4.js';
|
|
6
7
|
import { createContext } from './TROPIN4C.js';
|
|
7
8
|
import { __export } from './ESLJRKWD.js';
|
|
8
|
-
import { createComponent } from 'solid-js/web';
|
|
9
|
+
import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
|
|
10
|
+
import { createMemo, Show, createUniqueId } from 'solid-js';
|
|
9
11
|
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
|
|
10
12
|
import * as carousel from '@zag-js/carousel';
|
|
11
|
-
import { createUniqueId, createMemo } from 'solid-js';
|
|
12
13
|
|
|
13
14
|
// src/components/carousel/use-carousel-context.ts
|
|
14
15
|
var [CarouselProvider, useCarouselContext] = createContext({
|
|
@@ -16,7 +17,40 @@ var [CarouselProvider, useCarouselContext] = createContext({
|
|
|
16
17
|
providerName: "<CarouselProvider />"
|
|
17
18
|
});
|
|
18
19
|
|
|
19
|
-
// src/components/carousel/carousel-autoplay-
|
|
20
|
+
// src/components/carousel/carousel-autoplay-indicator.tsx
|
|
21
|
+
var parts = carouselAnatomy.build();
|
|
22
|
+
var CarouselAutoplayIndicator = (props) => {
|
|
23
|
+
const api = useCarouselContext();
|
|
24
|
+
return createComponent(ark.span, mergeProps$1(() => parts.autoplayIndicator.attrs, props, {
|
|
25
|
+
get children() {
|
|
26
|
+
return createComponent(Show, {
|
|
27
|
+
get when() {
|
|
28
|
+
return api().isPlaying;
|
|
29
|
+
},
|
|
30
|
+
get fallback() {
|
|
31
|
+
return props.fallback;
|
|
32
|
+
},
|
|
33
|
+
get children() {
|
|
34
|
+
return props.children;
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
}));
|
|
39
|
+
};
|
|
40
|
+
var parts2 = carouselAnatomy.build();
|
|
41
|
+
var CarouselProgressText = (props) => {
|
|
42
|
+
const api = useCarouselContext();
|
|
43
|
+
const progressText = createMemo(() => {
|
|
44
|
+
const currentPage = api().page + 1;
|
|
45
|
+
const totalPages = api().pageSnapPoints.length;
|
|
46
|
+
return `${currentPage} / ${totalPages}`;
|
|
47
|
+
});
|
|
48
|
+
return createComponent(ark.span, mergeProps$1(() => parts2.progressText.attrs, props, {
|
|
49
|
+
get children() {
|
|
50
|
+
return props.children || progressText();
|
|
51
|
+
}
|
|
52
|
+
}));
|
|
53
|
+
};
|
|
20
54
|
var CarouselAutoplayTrigger = (props) => {
|
|
21
55
|
const api = useCarouselContext();
|
|
22
56
|
const mergedProps = mergeProps(() => api().getAutoplayTriggerProps(), props);
|
|
@@ -104,6 +138,7 @@ var CarouselRootProvider = (props) => {
|
|
|
104
138
|
// src/components/carousel/carousel.ts
|
|
105
139
|
var carousel_exports = {};
|
|
106
140
|
__export(carousel_exports, {
|
|
141
|
+
AutoplayIndicator: () => CarouselAutoplayIndicator,
|
|
107
142
|
AutoplayTrigger: () => CarouselAutoplayTrigger,
|
|
108
143
|
Context: () => CarouselContext,
|
|
109
144
|
Control: () => CarouselControl,
|
|
@@ -113,8 +148,9 @@ __export(carousel_exports, {
|
|
|
113
148
|
ItemGroup: () => CarouselItemGroup,
|
|
114
149
|
NextTrigger: () => CarouselNextTrigger,
|
|
115
150
|
PrevTrigger: () => CarouselPrevTrigger,
|
|
151
|
+
ProgressText: () => CarouselProgressText,
|
|
116
152
|
Root: () => CarouselRoot,
|
|
117
153
|
RootProvider: () => CarouselRootProvider
|
|
118
154
|
});
|
|
119
155
|
|
|
120
|
-
export { CarouselAutoplayTrigger, CarouselContext, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselRootProvider, carousel_exports, useCarousel, useCarouselContext };
|
|
156
|
+
export { CarouselAutoplayIndicator, CarouselAutoplayTrigger, CarouselContext, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText, CarouselRoot, CarouselRootProvider, carousel_exports, useCarousel, useCarouselContext };
|
|
@@ -4,7 +4,7 @@ export { FocusChangeDetails as AccordionFocusChangeDetails, ValueChangeDetails a
|
|
|
4
4
|
import * as solid_js from 'solid-js';
|
|
5
5
|
import { Accessor, JSX } from 'solid-js';
|
|
6
6
|
import { PropTypes } from '@zag-js/solid';
|
|
7
|
-
import { O as Optional, M as MaybeAccessor } from '../../types-
|
|
7
|
+
import { O as Optional, M as MaybeAccessor } from '../../types-Sr_80hg9.js';
|
|
8
8
|
import { HTMLProps, PolymorphicProps } from '../factory.js';
|
|
9
9
|
import { R as RenderStrategyProps } from '../../render-strategy-B5MqQP3X.js';
|
|
10
10
|
|
|
@@ -3,7 +3,7 @@ export { anatomy as accordionAnatomy } from '@zag-js/accordion';
|
|
|
3
3
|
export { anatomy as angleSliderAnatomy } from '@zag-js/angle-slider';
|
|
4
4
|
export { anatomy as avatarAnatomy } from '@zag-js/avatar';
|
|
5
5
|
export { anatomy as bottomSheetAnatomy } from '@zag-js/bottom-sheet';
|
|
6
|
-
export {
|
|
6
|
+
export { c as carouselAnatomy } from '../carousel.anatomy-x-SHXq-8.js';
|
|
7
7
|
export { c as checkboxAnatomy } from '../checkbox.anatomy-YlC7nNXs.js';
|
|
8
8
|
export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
|
|
9
9
|
export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
|
|
@@ -17,6 +17,7 @@ export { f as fieldsetAnatomy } from '../fieldset.anatomy-ByHwSFid.js';
|
|
|
17
17
|
export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
|
|
18
18
|
export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
|
|
19
19
|
export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
|
|
20
|
+
export { anatomy as imageCropperAnatomy } from '@zag-js/image-cropper';
|
|
20
21
|
export { l as listboxAnatomy } from '../listbox.anatomy-ogRrsXMY.js';
|
|
21
22
|
export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
|
|
22
23
|
export { anatomy as menuAnatomy } from '@zag-js/menu';
|
|
@@ -44,5 +45,5 @@ export { anatomy as toastAnatomy } from '@zag-js/toast';
|
|
|
44
45
|
export { t as toggleAnatomy } from '../toggle.anatomy-kQyY2NzP.js';
|
|
45
46
|
export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
|
|
46
47
|
export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';
|
|
47
|
-
export { t as tourAnatomy } from '../tour.anatomy-
|
|
48
|
+
export { t as tourAnatomy } from '../tour.anatomy-BwE3XSIU.js';
|
|
48
49
|
export { anatomy as treeViewAnatomy } from '@zag-js/tree-view';
|