@ark-ui/react 5.26.2 → 5.27.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/components/anatomy.cjs +5 -0
- package/dist/components/anatomy.d.cts +1 -0
- package/dist/components/anatomy.d.ts +1 -0
- package/dist/components/anatomy.js +1 -0
- package/dist/components/index.cjs +23 -0
- package/dist/components/index.d.cts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +11 -0
- package/dist/components/marquee/index.cjs +30 -0
- package/dist/components/marquee/index.d.cts +11 -0
- package/dist/components/marquee/index.d.ts +11 -0
- package/dist/components/marquee/index.js +11 -0
- package/dist/components/marquee/marquee-content.cjs +22 -0
- package/dist/components/marquee/marquee-content.d.cts +8 -0
- package/dist/components/marquee/marquee-content.d.ts +8 -0
- package/dist/components/marquee/marquee-content.js +18 -0
- package/dist/components/marquee/marquee-context.cjs +10 -0
- package/dist/components/marquee/marquee-context.d.cts +6 -0
- package/dist/components/marquee/marquee-context.d.ts +6 -0
- package/dist/components/marquee/marquee-context.js +6 -0
- package/dist/components/marquee/marquee-edge.cjs +21 -0
- package/dist/components/marquee/marquee-edge.d.cts +8 -0
- package/dist/components/marquee/marquee-edge.d.ts +8 -0
- package/dist/components/marquee/marquee-edge.js +17 -0
- package/dist/components/marquee/marquee-root-provider.cjs +20 -0
- package/dist/components/marquee/marquee-root-provider.d.cts +12 -0
- package/dist/components/marquee/marquee-root-provider.d.ts +12 -0
- package/dist/components/marquee/marquee-root-provider.js +16 -0
- package/dist/components/marquee/marquee-root.cjs +39 -0
- package/dist/components/marquee/marquee-root.d.cts +8 -0
- package/dist/components/marquee/marquee-root.d.ts +8 -0
- package/dist/components/marquee/marquee-root.js +35 -0
- package/dist/components/marquee/marquee-viewport.cjs +19 -0
- package/dist/components/marquee/marquee-viewport.d.cts +7 -0
- package/dist/components/marquee/marquee-viewport.d.ts +7 -0
- package/dist/components/marquee/marquee-viewport.js +15 -0
- package/dist/components/marquee/marquee.anatomy.d.cts +1 -0
- package/dist/components/marquee/marquee.anatomy.d.ts +1 -0
- package/dist/components/marquee/marquee.cjs +19 -0
- package/dist/components/marquee/marquee.d.cts +7 -0
- package/dist/components/marquee/marquee.d.ts +7 -0
- package/dist/components/marquee/marquee.js +6 -0
- package/dist/components/marquee/use-marquee-context.cjs +15 -0
- package/dist/components/marquee/use-marquee-context.d.cts +5 -0
- package/dist/components/marquee/use-marquee-context.d.ts +5 -0
- package/dist/components/marquee/use-marquee-context.js +10 -0
- package/dist/components/marquee/use-marquee.cjs +45 -0
- package/dist/components/marquee/use-marquee.d.cts +8 -0
- package/dist/components/marquee/use-marquee.d.ts +8 -0
- package/dist/components/marquee/use-marquee.js +22 -0
- package/dist/index.cjs +23 -0
- package/dist/index.js +11 -0
- package/package.json +70 -69
|
@@ -25,6 +25,7 @@ const editable = require('@zag-js/editable');
|
|
|
25
25
|
const fileUpload = require('@zag-js/file-upload');
|
|
26
26
|
const floatingPanel = require('@zag-js/floating-panel');
|
|
27
27
|
const hoverCard = require('@zag-js/hover-card');
|
|
28
|
+
const marquee = require('@zag-js/marquee');
|
|
28
29
|
const menu = require('@zag-js/menu');
|
|
29
30
|
const numberInput = require('@zag-js/number-input');
|
|
30
31
|
const pagination = require('@zag-js/pagination');
|
|
@@ -110,6 +111,10 @@ Object.defineProperty(exports, "hoverCardAnatomy", {
|
|
|
110
111
|
enumerable: true,
|
|
111
112
|
get: () => hoverCard.anatomy
|
|
112
113
|
});
|
|
114
|
+
Object.defineProperty(exports, "marqueeAnatomy", {
|
|
115
|
+
enumerable: true,
|
|
116
|
+
get: () => marquee.anatomy
|
|
117
|
+
});
|
|
113
118
|
Object.defineProperty(exports, "menuAnatomy", {
|
|
114
119
|
enumerable: true,
|
|
115
120
|
get: () => menu.anatomy
|
|
@@ -18,6 +18,7 @@ export { fileUploadAnatomy } from './file-upload/file-upload.anatomy';
|
|
|
18
18
|
export { floatingPanelAnatomy } from './floating-panel/floating-panel.anatomy';
|
|
19
19
|
export { hoverCardAnatomy } from './hover-card/hover-card.anatomy';
|
|
20
20
|
export { listboxAnatomy } from './listbox/listbox.anatomy';
|
|
21
|
+
export { marqueeAnatomy } from './marquee/marquee.anatomy';
|
|
21
22
|
export { menuAnatomy } from './menu/menu.anatomy';
|
|
22
23
|
export { numberInputAnatomy } from './number-input/number-input.anatomy';
|
|
23
24
|
export { paginationAnatomy } from './pagination/pagination.anatomy';
|
|
@@ -18,6 +18,7 @@ export { fileUploadAnatomy } from './file-upload/file-upload.anatomy';
|
|
|
18
18
|
export { floatingPanelAnatomy } from './floating-panel/floating-panel.anatomy';
|
|
19
19
|
export { hoverCardAnatomy } from './hover-card/hover-card.anatomy';
|
|
20
20
|
export { listboxAnatomy } from './listbox/listbox.anatomy';
|
|
21
|
+
export { marqueeAnatomy } from './marquee/marquee.anatomy';
|
|
21
22
|
export { menuAnatomy } from './menu/menu.anatomy';
|
|
22
23
|
export { numberInputAnatomy } from './number-input/number-input.anatomy';
|
|
23
24
|
export { paginationAnatomy } from './pagination/pagination.anatomy';
|
|
@@ -21,6 +21,7 @@ export { anatomy as editableAnatomy } from '@zag-js/editable';
|
|
|
21
21
|
export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
|
|
22
22
|
export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
|
|
23
23
|
export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
|
|
24
|
+
export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
|
|
24
25
|
export { anatomy as menuAnatomy } from '@zag-js/menu';
|
|
25
26
|
export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
|
|
26
27
|
export { anatomy as paginationAnatomy } from '@zag-js/pagination';
|
|
@@ -321,6 +321,15 @@ const useListbox = require('./listbox/use-listbox.cjs');
|
|
|
321
321
|
const useListboxContext = require('./listbox/use-listbox-context.cjs');
|
|
322
322
|
const useListboxItemContext = require('./listbox/use-listbox-item-context.cjs');
|
|
323
323
|
const listbox = require('./listbox/listbox.cjs');
|
|
324
|
+
const marqueeContent = require('./marquee/marquee-content.cjs');
|
|
325
|
+
const marqueeContext = require('./marquee/marquee-context.cjs');
|
|
326
|
+
const marqueeEdge = require('./marquee/marquee-edge.cjs');
|
|
327
|
+
const marqueeRoot = require('./marquee/marquee-root.cjs');
|
|
328
|
+
const marqueeRootProvider = require('./marquee/marquee-root-provider.cjs');
|
|
329
|
+
const marqueeViewport = require('./marquee/marquee-viewport.cjs');
|
|
330
|
+
const useMarquee = require('./marquee/use-marquee.cjs');
|
|
331
|
+
const useMarqueeContext = require('./marquee/use-marquee-context.cjs');
|
|
332
|
+
const marquee$1 = require('./marquee/marquee.cjs');
|
|
324
333
|
const menuArrow = require('./menu/menu-arrow.cjs');
|
|
325
334
|
const menuArrowTip = require('./menu/menu-arrow-tip.cjs');
|
|
326
335
|
const menuCheckboxItem = require('./menu/menu-checkbox-item.cjs');
|
|
@@ -703,6 +712,7 @@ const editable = require('@zag-js/editable');
|
|
|
703
712
|
const fileUpload = require('@zag-js/file-upload');
|
|
704
713
|
const floatingPanel = require('@zag-js/floating-panel');
|
|
705
714
|
const hoverCard = require('@zag-js/hover-card');
|
|
715
|
+
const marquee = require('@zag-js/marquee');
|
|
706
716
|
const menu = require('@zag-js/menu');
|
|
707
717
|
const numberInput = require('@zag-js/number-input');
|
|
708
718
|
const pagination = require('@zag-js/pagination');
|
|
@@ -1057,6 +1067,15 @@ exports.useListbox = useListbox.useListbox;
|
|
|
1057
1067
|
exports.useListboxContext = useListboxContext.useListboxContext;
|
|
1058
1068
|
exports.useListboxItemContext = useListboxItemContext.useListboxItemContext;
|
|
1059
1069
|
exports.Listbox = listbox;
|
|
1070
|
+
exports.MarqueeContent = marqueeContent.MarqueeContent;
|
|
1071
|
+
exports.MarqueeContext = marqueeContext.MarqueeContext;
|
|
1072
|
+
exports.MarqueeEdge = marqueeEdge.MarqueeEdge;
|
|
1073
|
+
exports.MarqueeRoot = marqueeRoot.MarqueeRoot;
|
|
1074
|
+
exports.MarqueeRootProvider = marqueeRootProvider.MarqueeRootProvider;
|
|
1075
|
+
exports.MarqueeViewport = marqueeViewport.MarqueeViewport;
|
|
1076
|
+
exports.useMarquee = useMarquee.useMarquee;
|
|
1077
|
+
exports.useMarqueeContext = useMarqueeContext.useMarqueeContext;
|
|
1078
|
+
exports.Marquee = marquee$1;
|
|
1060
1079
|
exports.MenuArrow = menuArrow.MenuArrow;
|
|
1061
1080
|
exports.MenuArrowTip = menuArrowTip.MenuArrowTip;
|
|
1062
1081
|
exports.MenuCheckboxItem = menuCheckboxItem.MenuCheckboxItem;
|
|
@@ -1476,6 +1495,10 @@ Object.defineProperty(exports, "hoverCardAnatomy", {
|
|
|
1476
1495
|
enumerable: true,
|
|
1477
1496
|
get: () => hoverCard.anatomy
|
|
1478
1497
|
});
|
|
1498
|
+
Object.defineProperty(exports, "marqueeAnatomy", {
|
|
1499
|
+
enumerable: true,
|
|
1500
|
+
get: () => marquee.anatomy
|
|
1501
|
+
});
|
|
1479
1502
|
Object.defineProperty(exports, "menuAnatomy", {
|
|
1480
1503
|
enumerable: true,
|
|
1481
1504
|
get: () => menu.anatomy
|
package/dist/components/index.js
CHANGED
|
@@ -338,6 +338,16 @@ export { useListboxContext } from './listbox/use-listbox-context.js';
|
|
|
338
338
|
export { useListboxItemContext } from './listbox/use-listbox-item-context.js';
|
|
339
339
|
import * as listbox from './listbox/listbox.js';
|
|
340
340
|
export { listbox as Listbox };
|
|
341
|
+
export { MarqueeContent } from './marquee/marquee-content.js';
|
|
342
|
+
export { MarqueeContext } from './marquee/marquee-context.js';
|
|
343
|
+
export { MarqueeEdge } from './marquee/marquee-edge.js';
|
|
344
|
+
export { MarqueeRoot } from './marquee/marquee-root.js';
|
|
345
|
+
export { MarqueeRootProvider } from './marquee/marquee-root-provider.js';
|
|
346
|
+
export { MarqueeViewport } from './marquee/marquee-viewport.js';
|
|
347
|
+
export { useMarquee } from './marquee/use-marquee.js';
|
|
348
|
+
export { useMarqueeContext } from './marquee/use-marquee-context.js';
|
|
349
|
+
import * as marquee from './marquee/marquee.js';
|
|
350
|
+
export { marquee as Marquee };
|
|
341
351
|
export { MenuArrow } from './menu/menu-arrow.js';
|
|
342
352
|
export { MenuArrowTip } from './menu/menu-arrow-tip.js';
|
|
343
353
|
export { MenuCheckboxItem } from './menu/menu-checkbox-item.js';
|
|
@@ -747,6 +757,7 @@ export { anatomy as editableAnatomy } from '@zag-js/editable';
|
|
|
747
757
|
export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
|
|
748
758
|
export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
|
|
749
759
|
export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
|
|
760
|
+
export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
|
|
750
761
|
export { anatomy as menuAnatomy } from '@zag-js/menu';
|
|
751
762
|
export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
|
|
752
763
|
export { anatomy as paginationAnatomy } from '@zag-js/pagination';
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const marqueeContent = require('./marquee-content.cjs');
|
|
6
|
+
const marqueeContext = require('./marquee-context.cjs');
|
|
7
|
+
const marqueeEdge = require('./marquee-edge.cjs');
|
|
8
|
+
const marqueeRoot = require('./marquee-root.cjs');
|
|
9
|
+
const marqueeRootProvider = require('./marquee-root-provider.cjs');
|
|
10
|
+
const marqueeViewport = require('./marquee-viewport.cjs');
|
|
11
|
+
const useMarquee = require('./use-marquee.cjs');
|
|
12
|
+
const useMarqueeContext = require('./use-marquee-context.cjs');
|
|
13
|
+
const marquee$1 = require('./marquee.cjs');
|
|
14
|
+
const marquee = require('@zag-js/marquee');
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
exports.MarqueeContent = marqueeContent.MarqueeContent;
|
|
19
|
+
exports.MarqueeContext = marqueeContext.MarqueeContext;
|
|
20
|
+
exports.MarqueeEdge = marqueeEdge.MarqueeEdge;
|
|
21
|
+
exports.MarqueeRoot = marqueeRoot.MarqueeRoot;
|
|
22
|
+
exports.MarqueeRootProvider = marqueeRootProvider.MarqueeRootProvider;
|
|
23
|
+
exports.MarqueeViewport = marqueeViewport.MarqueeViewport;
|
|
24
|
+
exports.useMarquee = useMarquee.useMarquee;
|
|
25
|
+
exports.useMarqueeContext = useMarqueeContext.useMarqueeContext;
|
|
26
|
+
exports.Marquee = marquee$1;
|
|
27
|
+
Object.defineProperty(exports, "marqueeAnatomy", {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: () => marquee.anatomy
|
|
30
|
+
});
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export type { PauseStatusDetails as MarqueePauseStatusDetails, Side as MarqueeSide } from '@zag-js/marquee';
|
|
2
|
+
export { MarqueeContent, type MarqueeContentBaseProps, type MarqueeContentProps } from './marquee-content';
|
|
3
|
+
export { MarqueeContext, type MarqueeContextProps } from './marquee-context';
|
|
4
|
+
export { MarqueeEdge, type MarqueeEdgeBaseProps, type MarqueeEdgeProps } from './marquee-edge';
|
|
5
|
+
export { MarqueeRoot, type MarqueeRootBaseProps, type MarqueeRootProps } from './marquee-root';
|
|
6
|
+
export { MarqueeRootProvider, type MarqueeRootProviderBaseProps, type MarqueeRootProviderProps, } from './marquee-root-provider';
|
|
7
|
+
export { MarqueeViewport, type MarqueeViewportBaseProps, type MarqueeViewportProps } from './marquee-viewport';
|
|
8
|
+
export { marqueeAnatomy } from './marquee.anatomy';
|
|
9
|
+
export { useMarquee, type UseMarqueeProps, type UseMarqueeReturn } from './use-marquee';
|
|
10
|
+
export { useMarqueeContext, type UseMarqueeContext } from './use-marquee-context';
|
|
11
|
+
export * as Marquee from './marquee';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export type { PauseStatusDetails as MarqueePauseStatusDetails, Side as MarqueeSide } from '@zag-js/marquee';
|
|
2
|
+
export { MarqueeContent, type MarqueeContentBaseProps, type MarqueeContentProps } from './marquee-content';
|
|
3
|
+
export { MarqueeContext, type MarqueeContextProps } from './marquee-context';
|
|
4
|
+
export { MarqueeEdge, type MarqueeEdgeBaseProps, type MarqueeEdgeProps } from './marquee-edge';
|
|
5
|
+
export { MarqueeRoot, type MarqueeRootBaseProps, type MarqueeRootProps } from './marquee-root';
|
|
6
|
+
export { MarqueeRootProvider, type MarqueeRootProviderBaseProps, type MarqueeRootProviderProps, } from './marquee-root-provider';
|
|
7
|
+
export { MarqueeViewport, type MarqueeViewportBaseProps, type MarqueeViewportProps } from './marquee-viewport';
|
|
8
|
+
export { marqueeAnatomy } from './marquee.anatomy';
|
|
9
|
+
export { useMarquee, type UseMarqueeProps, type UseMarqueeReturn } from './use-marquee';
|
|
10
|
+
export { useMarqueeContext, type UseMarqueeContext } from './use-marquee-context';
|
|
11
|
+
export * as Marquee from './marquee';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { MarqueeContent } from './marquee-content.js';
|
|
2
|
+
export { MarqueeContext } from './marquee-context.js';
|
|
3
|
+
export { MarqueeEdge } from './marquee-edge.js';
|
|
4
|
+
export { MarqueeRoot } from './marquee-root.js';
|
|
5
|
+
export { MarqueeRootProvider } from './marquee-root-provider.js';
|
|
6
|
+
export { MarqueeViewport } from './marquee-viewport.js';
|
|
7
|
+
export { useMarquee } from './use-marquee.js';
|
|
8
|
+
export { useMarqueeContext } from './use-marquee-context.js';
|
|
9
|
+
import * as marquee from './marquee.js';
|
|
10
|
+
export { marquee as Marquee };
|
|
11
|
+
export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
5
|
+
|
|
6
|
+
const jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
const react$1 = require('@zag-js/react');
|
|
8
|
+
const react = require('react');
|
|
9
|
+
const factory = require('../factory.cjs');
|
|
10
|
+
const useMarqueeContext = require('./use-marquee-context.cjs');
|
|
11
|
+
|
|
12
|
+
const MarqueeContent = react.forwardRef((props, ref) => {
|
|
13
|
+
const { children, ...localProps } = props;
|
|
14
|
+
const marquee = useMarqueeContext.useMarqueeContext();
|
|
15
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: marquee.contentCount }).map((_, index) => {
|
|
16
|
+
const mergedProps = react$1.mergeProps(marquee.getContentProps({ index }), localProps);
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: index === 0 ? ref : void 0, children }, index);
|
|
18
|
+
}) });
|
|
19
|
+
});
|
|
20
|
+
MarqueeContent.displayName = "MarqueeContent";
|
|
21
|
+
|
|
22
|
+
exports.MarqueeContent = MarqueeContent;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
2
|
+
import { HTMLProps, PolymorphicProps } from '../factory';
|
|
3
|
+
export interface MarqueeContentBaseProps extends PolymorphicProps {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export interface MarqueeContentProps extends Omit<HTMLProps<'div'>, 'children'>, MarqueeContentBaseProps {
|
|
7
|
+
}
|
|
8
|
+
export declare const MarqueeContent: ForwardRefExoticComponent<MarqueeContentProps & RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
2
|
+
import { HTMLProps, PolymorphicProps } from '../factory';
|
|
3
|
+
export interface MarqueeContentBaseProps extends PolymorphicProps {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export interface MarqueeContentProps extends Omit<HTMLProps<'div'>, 'children'>, MarqueeContentBaseProps {
|
|
7
|
+
}
|
|
8
|
+
export declare const MarqueeContent: ForwardRefExoticComponent<MarqueeContentProps & RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
import { mergeProps } from '@zag-js/react';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
import { ark } from '../factory.js';
|
|
6
|
+
import { useMarqueeContext } from './use-marquee-context.js';
|
|
7
|
+
|
|
8
|
+
const MarqueeContent = forwardRef((props, ref) => {
|
|
9
|
+
const { children, ...localProps } = props;
|
|
10
|
+
const marquee = useMarqueeContext();
|
|
11
|
+
return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: marquee.contentCount }).map((_, index) => {
|
|
12
|
+
const mergedProps = mergeProps(marquee.getContentProps({ index }), localProps);
|
|
13
|
+
return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: index === 0 ? ref : void 0, children }, index);
|
|
14
|
+
}) });
|
|
15
|
+
});
|
|
16
|
+
MarqueeContent.displayName = "MarqueeContent";
|
|
17
|
+
|
|
18
|
+
export { MarqueeContent };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
5
|
+
|
|
6
|
+
const useMarqueeContext = require('./use-marquee-context.cjs');
|
|
7
|
+
|
|
8
|
+
const MarqueeContext = (props) => props.children(useMarqueeContext.useMarqueeContext());
|
|
9
|
+
|
|
10
|
+
exports.MarqueeContext = MarqueeContext;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { UseMarqueeContext } from './use-marquee-context';
|
|
3
|
+
export interface MarqueeContextProps {
|
|
4
|
+
children: (context: UseMarqueeContext) => ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export declare const MarqueeContext: (props: MarqueeContextProps) => ReactNode;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { UseMarqueeContext } from './use-marquee-context';
|
|
3
|
+
export interface MarqueeContextProps {
|
|
4
|
+
children: (context: UseMarqueeContext) => ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export declare const MarqueeContext: (props: MarqueeContextProps) => ReactNode;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
5
|
+
|
|
6
|
+
const jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
const react$1 = require('@zag-js/react');
|
|
8
|
+
const react = require('react');
|
|
9
|
+
const createSplitProps = require('../../utils/create-split-props.cjs');
|
|
10
|
+
const factory = require('../factory.cjs');
|
|
11
|
+
const useMarqueeContext = require('./use-marquee-context.cjs');
|
|
12
|
+
|
|
13
|
+
const MarqueeEdge = react.forwardRef((props, ref) => {
|
|
14
|
+
const [edgeProps, localProps] = createSplitProps.createSplitProps()(props, ["side"]);
|
|
15
|
+
const marquee = useMarqueeContext.useMarqueeContext();
|
|
16
|
+
const mergedProps = react$1.mergeProps(marquee.getEdgeProps(edgeProps), localProps);
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
|
|
18
|
+
});
|
|
19
|
+
MarqueeEdge.displayName = "MarqueeEdge";
|
|
20
|
+
|
|
21
|
+
exports.MarqueeEdge = MarqueeEdge;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { EdgeProps } from '@zag-js/marquee';
|
|
2
|
+
import { HTMLProps, PolymorphicProps } from '../factory';
|
|
3
|
+
import { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
4
|
+
export interface MarqueeEdgeBaseProps extends EdgeProps, PolymorphicProps {
|
|
5
|
+
}
|
|
6
|
+
export interface MarqueeEdgeProps extends HTMLProps<'div'>, MarqueeEdgeBaseProps {
|
|
7
|
+
}
|
|
8
|
+
export declare const MarqueeEdge: ForwardRefExoticComponent<MarqueeEdgeProps & RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { EdgeProps } from '@zag-js/marquee';
|
|
2
|
+
import { HTMLProps, PolymorphicProps } from '../factory';
|
|
3
|
+
import { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
4
|
+
export interface MarqueeEdgeBaseProps extends EdgeProps, PolymorphicProps {
|
|
5
|
+
}
|
|
6
|
+
export interface MarqueeEdgeProps extends HTMLProps<'div'>, MarqueeEdgeBaseProps {
|
|
7
|
+
}
|
|
8
|
+
export declare const MarqueeEdge: ForwardRefExoticComponent<MarqueeEdgeProps & RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { mergeProps } from '@zag-js/react';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
import { createSplitProps } from '../../utils/create-split-props.js';
|
|
6
|
+
import { ark } from '../factory.js';
|
|
7
|
+
import { useMarqueeContext } from './use-marquee-context.js';
|
|
8
|
+
|
|
9
|
+
const MarqueeEdge = forwardRef((props, ref) => {
|
|
10
|
+
const [edgeProps, localProps] = createSplitProps()(props, ["side"]);
|
|
11
|
+
const marquee = useMarqueeContext();
|
|
12
|
+
const mergedProps = mergeProps(marquee.getEdgeProps(edgeProps), localProps);
|
|
13
|
+
return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
|
|
14
|
+
});
|
|
15
|
+
MarqueeEdge.displayName = "MarqueeEdge";
|
|
16
|
+
|
|
17
|
+
export { MarqueeEdge };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
5
|
+
|
|
6
|
+
const jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
const react$1 = require('@zag-js/react');
|
|
8
|
+
const react = require('react');
|
|
9
|
+
const createSplitProps = require('../../utils/create-split-props.cjs');
|
|
10
|
+
const factory = require('../factory.cjs');
|
|
11
|
+
const useMarqueeContext = require('./use-marquee-context.cjs');
|
|
12
|
+
|
|
13
|
+
const MarqueeRootProvider = react.forwardRef((props, ref) => {
|
|
14
|
+
const [{ value: marquee }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
|
|
15
|
+
const mergedProps = react$1.mergeProps(marquee.getRootProps(), localProps);
|
|
16
|
+
return /* @__PURE__ */ jsxRuntime.jsx(useMarqueeContext.MarqueeProvider, { value: marquee, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
|
|
17
|
+
});
|
|
18
|
+
MarqueeRootProvider.displayName = "MarqueeRootProvider";
|
|
19
|
+
|
|
20
|
+
exports.MarqueeRootProvider = MarqueeRootProvider;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HTMLProps, PolymorphicProps } from '../factory';
|
|
2
|
+
import { UseMarqueeReturn } from './use-marquee';
|
|
3
|
+
import { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
4
|
+
interface RootProviderProps {
|
|
5
|
+
value: UseMarqueeReturn;
|
|
6
|
+
}
|
|
7
|
+
export interface MarqueeRootProviderBaseProps extends RootProviderProps, PolymorphicProps {
|
|
8
|
+
}
|
|
9
|
+
export interface MarqueeRootProviderProps extends HTMLProps<'div'>, MarqueeRootProviderBaseProps {
|
|
10
|
+
}
|
|
11
|
+
export declare const MarqueeRootProvider: ForwardRefExoticComponent<MarqueeRootProviderProps & RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HTMLProps, PolymorphicProps } from '../factory';
|
|
2
|
+
import { UseMarqueeReturn } from './use-marquee';
|
|
3
|
+
import { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
4
|
+
interface RootProviderProps {
|
|
5
|
+
value: UseMarqueeReturn;
|
|
6
|
+
}
|
|
7
|
+
export interface MarqueeRootProviderBaseProps extends RootProviderProps, PolymorphicProps {
|
|
8
|
+
}
|
|
9
|
+
export interface MarqueeRootProviderProps extends HTMLProps<'div'>, MarqueeRootProviderBaseProps {
|
|
10
|
+
}
|
|
11
|
+
export declare const MarqueeRootProvider: ForwardRefExoticComponent<MarqueeRootProviderProps & RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { mergeProps } from '@zag-js/react';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
import { createSplitProps } from '../../utils/create-split-props.js';
|
|
6
|
+
import { ark } from '../factory.js';
|
|
7
|
+
import { MarqueeProvider } from './use-marquee-context.js';
|
|
8
|
+
|
|
9
|
+
const MarqueeRootProvider = forwardRef((props, ref) => {
|
|
10
|
+
const [{ value: marquee }, localProps] = createSplitProps()(props, ["value"]);
|
|
11
|
+
const mergedProps = mergeProps(marquee.getRootProps(), localProps);
|
|
12
|
+
return /* @__PURE__ */ jsx(MarqueeProvider, { value: marquee, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
|
|
13
|
+
});
|
|
14
|
+
MarqueeRootProvider.displayName = "MarqueeRootProvider";
|
|
15
|
+
|
|
16
|
+
export { MarqueeRootProvider };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
5
|
+
|
|
6
|
+
const jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
const react$1 = require('@zag-js/react');
|
|
8
|
+
const react = require('react');
|
|
9
|
+
const createSplitProps = require('../../utils/create-split-props.cjs');
|
|
10
|
+
const factory = require('../factory.cjs');
|
|
11
|
+
const useMarquee = require('./use-marquee.cjs');
|
|
12
|
+
const useMarqueeContext = require('./use-marquee-context.cjs');
|
|
13
|
+
|
|
14
|
+
const MarqueeRoot = react.forwardRef((props, ref) => {
|
|
15
|
+
const [useMarqueeProps, localProps] = createSplitProps.createSplitProps()(props, [
|
|
16
|
+
"autoFill",
|
|
17
|
+
"defaultPaused",
|
|
18
|
+
"delay",
|
|
19
|
+
"id",
|
|
20
|
+
"ids",
|
|
21
|
+
"loopCount",
|
|
22
|
+
"onComplete",
|
|
23
|
+
"onLoopComplete",
|
|
24
|
+
"onPauseChange",
|
|
25
|
+
"paused",
|
|
26
|
+
"pauseOnInteraction",
|
|
27
|
+
"reverse",
|
|
28
|
+
"side",
|
|
29
|
+
"spacing",
|
|
30
|
+
"speed",
|
|
31
|
+
"translations"
|
|
32
|
+
]);
|
|
33
|
+
const marqueeApi = useMarquee.useMarquee(useMarqueeProps);
|
|
34
|
+
const mergedProps = react$1.mergeProps(marqueeApi.getRootProps(), localProps);
|
|
35
|
+
return /* @__PURE__ */ jsxRuntime.jsx(useMarqueeContext.MarqueeProvider, { value: marqueeApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
|
|
36
|
+
});
|
|
37
|
+
MarqueeRoot.displayName = "MarqueeRoot";
|
|
38
|
+
|
|
39
|
+
exports.MarqueeRoot = MarqueeRoot;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { HTMLProps, PolymorphicProps } from '../factory';
|
|
2
|
+
import { UseMarqueeProps } from './use-marquee';
|
|
3
|
+
import { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
4
|
+
export interface MarqueeRootBaseProps extends UseMarqueeProps, PolymorphicProps {
|
|
5
|
+
}
|
|
6
|
+
export interface MarqueeRootProps extends HTMLProps<'div'>, MarqueeRootBaseProps {
|
|
7
|
+
}
|
|
8
|
+
export declare const MarqueeRoot: ForwardRefExoticComponent<MarqueeRootProps & RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { HTMLProps, PolymorphicProps } from '../factory';
|
|
2
|
+
import { UseMarqueeProps } from './use-marquee';
|
|
3
|
+
import { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
4
|
+
export interface MarqueeRootBaseProps extends UseMarqueeProps, PolymorphicProps {
|
|
5
|
+
}
|
|
6
|
+
export interface MarqueeRootProps extends HTMLProps<'div'>, MarqueeRootBaseProps {
|
|
7
|
+
}
|
|
8
|
+
export declare const MarqueeRoot: ForwardRefExoticComponent<MarqueeRootProps & RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { mergeProps } from '@zag-js/react';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
import { createSplitProps } from '../../utils/create-split-props.js';
|
|
6
|
+
import { ark } from '../factory.js';
|
|
7
|
+
import { useMarquee } from './use-marquee.js';
|
|
8
|
+
import { MarqueeProvider } from './use-marquee-context.js';
|
|
9
|
+
|
|
10
|
+
const MarqueeRoot = forwardRef((props, ref) => {
|
|
11
|
+
const [useMarqueeProps, localProps] = createSplitProps()(props, [
|
|
12
|
+
"autoFill",
|
|
13
|
+
"defaultPaused",
|
|
14
|
+
"delay",
|
|
15
|
+
"id",
|
|
16
|
+
"ids",
|
|
17
|
+
"loopCount",
|
|
18
|
+
"onComplete",
|
|
19
|
+
"onLoopComplete",
|
|
20
|
+
"onPauseChange",
|
|
21
|
+
"paused",
|
|
22
|
+
"pauseOnInteraction",
|
|
23
|
+
"reverse",
|
|
24
|
+
"side",
|
|
25
|
+
"spacing",
|
|
26
|
+
"speed",
|
|
27
|
+
"translations"
|
|
28
|
+
]);
|
|
29
|
+
const marqueeApi = useMarquee(useMarqueeProps);
|
|
30
|
+
const mergedProps = mergeProps(marqueeApi.getRootProps(), localProps);
|
|
31
|
+
return /* @__PURE__ */ jsx(MarqueeProvider, { value: marqueeApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
|
|
32
|
+
});
|
|
33
|
+
MarqueeRoot.displayName = "MarqueeRoot";
|
|
34
|
+
|
|
35
|
+
export { MarqueeRoot };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
5
|
+
|
|
6
|
+
const jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
const react$1 = require('@zag-js/react');
|
|
8
|
+
const react = require('react');
|
|
9
|
+
const factory = require('../factory.cjs');
|
|
10
|
+
const useMarqueeContext = require('./use-marquee-context.cjs');
|
|
11
|
+
|
|
12
|
+
const MarqueeViewport = react.forwardRef((props, ref) => {
|
|
13
|
+
const marquee = useMarqueeContext.useMarqueeContext();
|
|
14
|
+
const mergedProps = react$1.mergeProps(marquee.getViewportProps(), props);
|
|
15
|
+
return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
|
|
16
|
+
});
|
|
17
|
+
MarqueeViewport.displayName = "MarqueeViewport";
|
|
18
|
+
|
|
19
|
+
exports.MarqueeViewport = MarqueeViewport;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { HTMLProps, PolymorphicProps } from '../factory';
|
|
2
|
+
import { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
3
|
+
export interface MarqueeViewportBaseProps extends PolymorphicProps {
|
|
4
|
+
}
|
|
5
|
+
export interface MarqueeViewportProps extends HTMLProps<'div'>, MarqueeViewportBaseProps {
|
|
6
|
+
}
|
|
7
|
+
export declare const MarqueeViewport: ForwardRefExoticComponent<MarqueeViewportProps & RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { HTMLProps, PolymorphicProps } from '../factory';
|
|
2
|
+
import { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
3
|
+
export interface MarqueeViewportBaseProps extends PolymorphicProps {
|
|
4
|
+
}
|
|
5
|
+
export interface MarqueeViewportProps extends HTMLProps<'div'>, MarqueeViewportBaseProps {
|
|
6
|
+
}
|
|
7
|
+
export declare const MarqueeViewport: ForwardRefExoticComponent<MarqueeViewportProps & RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { mergeProps } from '@zag-js/react';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
import { ark } from '../factory.js';
|
|
6
|
+
import { useMarqueeContext } from './use-marquee-context.js';
|
|
7
|
+
|
|
8
|
+
const MarqueeViewport = forwardRef((props, ref) => {
|
|
9
|
+
const marquee = useMarqueeContext();
|
|
10
|
+
const mergedProps = mergeProps(marquee.getViewportProps(), props);
|
|
11
|
+
return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
|
|
12
|
+
});
|
|
13
|
+
MarqueeViewport.displayName = "MarqueeViewport";
|
|
14
|
+
|
|
15
|
+
export { MarqueeViewport };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const marqueeContent = require('./marquee-content.cjs');
|
|
6
|
+
const marqueeContext = require('./marquee-context.cjs');
|
|
7
|
+
const marqueeEdge = require('./marquee-edge.cjs');
|
|
8
|
+
const marqueeRoot = require('./marquee-root.cjs');
|
|
9
|
+
const marqueeRootProvider = require('./marquee-root-provider.cjs');
|
|
10
|
+
const marqueeViewport = require('./marquee-viewport.cjs');
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
exports.Content = marqueeContent.MarqueeContent;
|
|
15
|
+
exports.Context = marqueeContext.MarqueeContext;
|
|
16
|
+
exports.Edge = marqueeEdge.MarqueeEdge;
|
|
17
|
+
exports.Root = marqueeRoot.MarqueeRoot;
|
|
18
|
+
exports.RootProvider = marqueeRootProvider.MarqueeRootProvider;
|
|
19
|
+
exports.Viewport = marqueeViewport.MarqueeViewport;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type { PauseStatusDetails, Side } from '@zag-js/marquee';
|
|
2
|
+
export { MarqueeContent as Content, type MarqueeContentBaseProps as ContentBaseProps, type MarqueeContentProps as ContentProps, } from './marquee-content';
|
|
3
|
+
export { MarqueeContext as Context, type MarqueeContextProps as ContextProps } from './marquee-context';
|
|
4
|
+
export { MarqueeEdge as Edge, type MarqueeEdgeBaseProps as EdgeBaseProps, type MarqueeEdgeProps as EdgeProps, } from './marquee-edge';
|
|
5
|
+
export { MarqueeRoot as Root, type MarqueeRootBaseProps as RootBaseProps, type MarqueeRootProps as RootProps, } from './marquee-root';
|
|
6
|
+
export { MarqueeRootProvider as RootProvider, type MarqueeRootProviderBaseProps as RootProviderBaseProps, type MarqueeRootProviderProps as RootProviderProps, } from './marquee-root-provider';
|
|
7
|
+
export { MarqueeViewport as Viewport, type MarqueeViewportBaseProps as ViewportBaseProps, type MarqueeViewportProps as ViewportProps, } from './marquee-viewport';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type { PauseStatusDetails, Side } from '@zag-js/marquee';
|
|
2
|
+
export { MarqueeContent as Content, type MarqueeContentBaseProps as ContentBaseProps, type MarqueeContentProps as ContentProps, } from './marquee-content';
|
|
3
|
+
export { MarqueeContext as Context, type MarqueeContextProps as ContextProps } from './marquee-context';
|
|
4
|
+
export { MarqueeEdge as Edge, type MarqueeEdgeBaseProps as EdgeBaseProps, type MarqueeEdgeProps as EdgeProps, } from './marquee-edge';
|
|
5
|
+
export { MarqueeRoot as Root, type MarqueeRootBaseProps as RootBaseProps, type MarqueeRootProps as RootProps, } from './marquee-root';
|
|
6
|
+
export { MarqueeRootProvider as RootProvider, type MarqueeRootProviderBaseProps as RootProviderBaseProps, type MarqueeRootProviderProps as RootProviderProps, } from './marquee-root-provider';
|
|
7
|
+
export { MarqueeViewport as Viewport, type MarqueeViewportBaseProps as ViewportBaseProps, type MarqueeViewportProps as ViewportProps, } from './marquee-viewport';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { MarqueeContent as Content } from './marquee-content.js';
|
|
2
|
+
export { MarqueeContext as Context } from './marquee-context.js';
|
|
3
|
+
export { MarqueeEdge as Edge } from './marquee-edge.js';
|
|
4
|
+
export { MarqueeRoot as Root } from './marquee-root.js';
|
|
5
|
+
export { MarqueeRootProvider as RootProvider } from './marquee-root-provider.js';
|
|
6
|
+
export { MarqueeViewport as Viewport } from './marquee-viewport.js';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
5
|
+
|
|
6
|
+
const createContext = require('../../utils/create-context.cjs');
|
|
7
|
+
|
|
8
|
+
const [MarqueeProvider, useMarqueeContext] = createContext.createContext({
|
|
9
|
+
name: "MarqueeContext",
|
|
10
|
+
hookName: "useMarqueeContext",
|
|
11
|
+
providerName: "<MarqueeProvider />"
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
exports.MarqueeProvider = MarqueeProvider;
|
|
15
|
+
exports.useMarqueeContext = useMarqueeContext;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { createContext } from '../../utils/create-context.js';
|
|
3
|
+
|
|
4
|
+
const [MarqueeProvider, useMarqueeContext] = createContext({
|
|
5
|
+
name: "MarqueeContext",
|
|
6
|
+
hookName: "useMarqueeContext",
|
|
7
|
+
providerName: "<MarqueeProvider />"
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
export { MarqueeProvider, useMarqueeContext };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
5
|
+
|
|
6
|
+
const marquee = require('@zag-js/marquee');
|
|
7
|
+
const react$1 = require('@zag-js/react');
|
|
8
|
+
const react = require('react');
|
|
9
|
+
const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
|
|
10
|
+
const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
|
|
11
|
+
|
|
12
|
+
function _interopNamespaceDefault(e) {
|
|
13
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
|
|
14
|
+
if (e) {
|
|
15
|
+
for (const k in e) {
|
|
16
|
+
if (k !== 'default') {
|
|
17
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
18
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: () => e[k]
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
n.default = e;
|
|
26
|
+
return Object.freeze(n);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const marquee__namespace = /*#__PURE__*/_interopNamespaceDefault(marquee);
|
|
30
|
+
|
|
31
|
+
const useMarquee = (props) => {
|
|
32
|
+
const id = react.useId();
|
|
33
|
+
const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
|
|
34
|
+
const { dir } = useLocaleContext.useLocaleContext();
|
|
35
|
+
const context = {
|
|
36
|
+
id,
|
|
37
|
+
dir,
|
|
38
|
+
getRootNode,
|
|
39
|
+
...props
|
|
40
|
+
};
|
|
41
|
+
const service = react$1.useMachine(marquee__namespace.machine, context);
|
|
42
|
+
return marquee__namespace.connect(service, react$1.normalizeProps);
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
exports.useMarquee = useMarquee;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { PropTypes } from '@zag-js/react';
|
|
2
|
+
import { Optional } from '../../types';
|
|
3
|
+
import * as marquee from '@zag-js/marquee';
|
|
4
|
+
export interface UseMarqueeProps extends Optional<Omit<marquee.Props, 'dir' | 'getRootNode'>, 'id'> {
|
|
5
|
+
}
|
|
6
|
+
export interface UseMarqueeReturn extends marquee.Api<PropTypes> {
|
|
7
|
+
}
|
|
8
|
+
export declare const useMarquee: (props?: UseMarqueeProps) => UseMarqueeReturn;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { PropTypes } from '@zag-js/react';
|
|
2
|
+
import { Optional } from '../../types';
|
|
3
|
+
import * as marquee from '@zag-js/marquee';
|
|
4
|
+
export interface UseMarqueeProps extends Optional<Omit<marquee.Props, 'dir' | 'getRootNode'>, 'id'> {
|
|
5
|
+
}
|
|
6
|
+
export interface UseMarqueeReturn extends marquee.Api<PropTypes> {
|
|
7
|
+
}
|
|
8
|
+
export declare const useMarquee: (props?: UseMarqueeProps) => UseMarqueeReturn;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import * as marquee from '@zag-js/marquee';
|
|
3
|
+
import { useMachine, normalizeProps } from '@zag-js/react';
|
|
4
|
+
import { useId } from 'react';
|
|
5
|
+
import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
|
|
6
|
+
import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
|
|
7
|
+
|
|
8
|
+
const useMarquee = (props) => {
|
|
9
|
+
const id = useId();
|
|
10
|
+
const { getRootNode } = useEnvironmentContext();
|
|
11
|
+
const { dir } = useLocaleContext();
|
|
12
|
+
const context = {
|
|
13
|
+
id,
|
|
14
|
+
dir,
|
|
15
|
+
getRootNode,
|
|
16
|
+
...props
|
|
17
|
+
};
|
|
18
|
+
const service = useMachine(marquee.machine, context);
|
|
19
|
+
return marquee.connect(service, normalizeProps);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { useMarquee };
|
package/dist/index.cjs
CHANGED
|
@@ -321,6 +321,15 @@ const useListbox = require('./components/listbox/use-listbox.cjs');
|
|
|
321
321
|
const useListboxContext = require('./components/listbox/use-listbox-context.cjs');
|
|
322
322
|
const useListboxItemContext = require('./components/listbox/use-listbox-item-context.cjs');
|
|
323
323
|
const listbox = require('./components/listbox/listbox.cjs');
|
|
324
|
+
const marqueeContent = require('./components/marquee/marquee-content.cjs');
|
|
325
|
+
const marqueeContext = require('./components/marquee/marquee-context.cjs');
|
|
326
|
+
const marqueeEdge = require('./components/marquee/marquee-edge.cjs');
|
|
327
|
+
const marqueeRoot = require('./components/marquee/marquee-root.cjs');
|
|
328
|
+
const marqueeRootProvider = require('./components/marquee/marquee-root-provider.cjs');
|
|
329
|
+
const marqueeViewport = require('./components/marquee/marquee-viewport.cjs');
|
|
330
|
+
const useMarquee = require('./components/marquee/use-marquee.cjs');
|
|
331
|
+
const useMarqueeContext = require('./components/marquee/use-marquee-context.cjs');
|
|
332
|
+
const marquee$1 = require('./components/marquee/marquee.cjs');
|
|
324
333
|
const menuArrow = require('./components/menu/menu-arrow.cjs');
|
|
325
334
|
const menuArrowTip = require('./components/menu/menu-arrow-tip.cjs');
|
|
326
335
|
const menuCheckboxItem = require('./components/menu/menu-checkbox-item.cjs');
|
|
@@ -711,6 +720,7 @@ const editable = require('@zag-js/editable');
|
|
|
711
720
|
const fileUpload = require('@zag-js/file-upload');
|
|
712
721
|
const floatingPanel = require('@zag-js/floating-panel');
|
|
713
722
|
const hoverCard = require('@zag-js/hover-card');
|
|
723
|
+
const marquee = require('@zag-js/marquee');
|
|
714
724
|
const menu = require('@zag-js/menu');
|
|
715
725
|
const numberInput = require('@zag-js/number-input');
|
|
716
726
|
const pagination = require('@zag-js/pagination');
|
|
@@ -1065,6 +1075,15 @@ exports.useListbox = useListbox.useListbox;
|
|
|
1065
1075
|
exports.useListboxContext = useListboxContext.useListboxContext;
|
|
1066
1076
|
exports.useListboxItemContext = useListboxItemContext.useListboxItemContext;
|
|
1067
1077
|
exports.Listbox = listbox;
|
|
1078
|
+
exports.MarqueeContent = marqueeContent.MarqueeContent;
|
|
1079
|
+
exports.MarqueeContext = marqueeContext.MarqueeContext;
|
|
1080
|
+
exports.MarqueeEdge = marqueeEdge.MarqueeEdge;
|
|
1081
|
+
exports.MarqueeRoot = marqueeRoot.MarqueeRoot;
|
|
1082
|
+
exports.MarqueeRootProvider = marqueeRootProvider.MarqueeRootProvider;
|
|
1083
|
+
exports.MarqueeViewport = marqueeViewport.MarqueeViewport;
|
|
1084
|
+
exports.useMarquee = useMarquee.useMarquee;
|
|
1085
|
+
exports.useMarqueeContext = useMarqueeContext.useMarqueeContext;
|
|
1086
|
+
exports.Marquee = marquee$1;
|
|
1068
1087
|
exports.MenuArrow = menuArrow.MenuArrow;
|
|
1069
1088
|
exports.MenuArrowTip = menuArrowTip.MenuArrowTip;
|
|
1070
1089
|
exports.MenuCheckboxItem = menuCheckboxItem.MenuCheckboxItem;
|
|
@@ -1495,6 +1514,10 @@ Object.defineProperty(exports, "hoverCardAnatomy", {
|
|
|
1495
1514
|
enumerable: true,
|
|
1496
1515
|
get: () => hoverCard.anatomy
|
|
1497
1516
|
});
|
|
1517
|
+
Object.defineProperty(exports, "marqueeAnatomy", {
|
|
1518
|
+
enumerable: true,
|
|
1519
|
+
get: () => marquee.anatomy
|
|
1520
|
+
});
|
|
1498
1521
|
Object.defineProperty(exports, "menuAnatomy", {
|
|
1499
1522
|
enumerable: true,
|
|
1500
1523
|
get: () => menu.anatomy
|
package/dist/index.js
CHANGED
|
@@ -338,6 +338,16 @@ export { useListboxContext } from './components/listbox/use-listbox-context.js';
|
|
|
338
338
|
export { useListboxItemContext } from './components/listbox/use-listbox-item-context.js';
|
|
339
339
|
import * as listbox from './components/listbox/listbox.js';
|
|
340
340
|
export { listbox as Listbox };
|
|
341
|
+
export { MarqueeContent } from './components/marquee/marquee-content.js';
|
|
342
|
+
export { MarqueeContext } from './components/marquee/marquee-context.js';
|
|
343
|
+
export { MarqueeEdge } from './components/marquee/marquee-edge.js';
|
|
344
|
+
export { MarqueeRoot } from './components/marquee/marquee-root.js';
|
|
345
|
+
export { MarqueeRootProvider } from './components/marquee/marquee-root-provider.js';
|
|
346
|
+
export { MarqueeViewport } from './components/marquee/marquee-viewport.js';
|
|
347
|
+
export { useMarquee } from './components/marquee/use-marquee.js';
|
|
348
|
+
export { useMarqueeContext } from './components/marquee/use-marquee-context.js';
|
|
349
|
+
import * as marquee from './components/marquee/marquee.js';
|
|
350
|
+
export { marquee as Marquee };
|
|
341
351
|
export { MenuArrow } from './components/menu/menu-arrow.js';
|
|
342
352
|
export { MenuArrowTip } from './components/menu/menu-arrow-tip.js';
|
|
343
353
|
export { MenuCheckboxItem } from './components/menu/menu-checkbox-item.js';
|
|
@@ -755,6 +765,7 @@ export { anatomy as editableAnatomy } from '@zag-js/editable';
|
|
|
755
765
|
export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
|
|
756
766
|
export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
|
|
757
767
|
export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
|
|
768
|
+
export { anatomy as marqueeAnatomy } from '@zag-js/marquee';
|
|
758
769
|
export { anatomy as menuAnatomy } from '@zag-js/menu';
|
|
759
770
|
export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
|
|
760
771
|
export { anatomy as paginationAnatomy } from '@zag-js/pagination';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ark-ui/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "5.
|
|
4
|
+
"version": "5.27.0",
|
|
5
5
|
"description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"accordion",
|
|
@@ -150,72 +150,73 @@
|
|
|
150
150
|
"sideEffects": false,
|
|
151
151
|
"dependencies": {
|
|
152
152
|
"@internationalized/date": "3.10.0",
|
|
153
|
-
"@zag-js/accordion": "1.26.
|
|
154
|
-
"@zag-js/anatomy": "1.26.
|
|
155
|
-
"@zag-js/angle-slider": "1.26.
|
|
156
|
-
"@zag-js/async-list": "1.26.
|
|
157
|
-
"@zag-js/auto-resize": "1.26.
|
|
158
|
-
"@zag-js/avatar": "1.26.
|
|
159
|
-
"@zag-js/bottom-sheet": "1.26.
|
|
160
|
-
"@zag-js/carousel": "1.26.
|
|
161
|
-
"@zag-js/checkbox": "1.26.
|
|
162
|
-
"@zag-js/clipboard": "1.26.
|
|
163
|
-
"@zag-js/collapsible": "1.26.
|
|
164
|
-
"@zag-js/collection": "1.26.
|
|
165
|
-
"@zag-js/color-picker": "1.26.
|
|
166
|
-
"@zag-js/color-utils": "1.26.
|
|
167
|
-
"@zag-js/combobox": "1.26.
|
|
168
|
-
"@zag-js/core": "1.26.
|
|
169
|
-
"@zag-js/date-picker": "1.26.
|
|
170
|
-
"@zag-js/date-utils": "1.26.
|
|
171
|
-
"@zag-js/dialog": "1.26.
|
|
172
|
-
"@zag-js/dom-query": "1.26.
|
|
173
|
-
"@zag-js/editable": "1.26.
|
|
174
|
-
"@zag-js/file-upload": "1.26.
|
|
175
|
-
"@zag-js/file-utils": "1.26.
|
|
176
|
-
"@zag-js/floating-panel": "1.26.
|
|
177
|
-
"@zag-js/focus-trap": "1.26.
|
|
178
|
-
"@zag-js/highlight-word": "1.26.
|
|
179
|
-
"@zag-js/hover-card": "1.26.
|
|
180
|
-
"@zag-js/i18n-utils": "1.26.
|
|
181
|
-
"@zag-js/json-tree-utils": "1.26.
|
|
182
|
-
"@zag-js/listbox": "1.26.
|
|
183
|
-
"@zag-js/
|
|
184
|
-
"@zag-js/
|
|
185
|
-
"@zag-js/
|
|
186
|
-
"@zag-js/
|
|
187
|
-
"@zag-js/
|
|
188
|
-
"@zag-js/
|
|
189
|
-
"@zag-js/
|
|
190
|
-
"@zag-js/
|
|
191
|
-
"@zag-js/
|
|
192
|
-
"@zag-js/
|
|
193
|
-
"@zag-js/
|
|
194
|
-
"@zag-js/
|
|
195
|
-
"@zag-js/
|
|
196
|
-
"@zag-js/
|
|
197
|
-
"@zag-js/
|
|
198
|
-
"@zag-js/
|
|
199
|
-
"@zag-js/
|
|
200
|
-
"@zag-js/
|
|
201
|
-
"@zag-js/
|
|
202
|
-
"@zag-js/
|
|
203
|
-
"@zag-js/
|
|
204
|
-
"@zag-js/
|
|
205
|
-
"@zag-js/
|
|
206
|
-
"@zag-js/
|
|
207
|
-
"@zag-js/toggle
|
|
208
|
-
"@zag-js/
|
|
209
|
-
"@zag-js/
|
|
210
|
-
"@zag-js/
|
|
211
|
-
"@zag-js/
|
|
212
|
-
"@zag-js/
|
|
153
|
+
"@zag-js/accordion": "1.26.5",
|
|
154
|
+
"@zag-js/anatomy": "1.26.5",
|
|
155
|
+
"@zag-js/angle-slider": "1.26.5",
|
|
156
|
+
"@zag-js/async-list": "1.26.5",
|
|
157
|
+
"@zag-js/auto-resize": "1.26.5",
|
|
158
|
+
"@zag-js/avatar": "1.26.5",
|
|
159
|
+
"@zag-js/bottom-sheet": "1.26.5",
|
|
160
|
+
"@zag-js/carousel": "1.26.5",
|
|
161
|
+
"@zag-js/checkbox": "1.26.5",
|
|
162
|
+
"@zag-js/clipboard": "1.26.5",
|
|
163
|
+
"@zag-js/collapsible": "1.26.5",
|
|
164
|
+
"@zag-js/collection": "1.26.5",
|
|
165
|
+
"@zag-js/color-picker": "1.26.5",
|
|
166
|
+
"@zag-js/color-utils": "1.26.5",
|
|
167
|
+
"@zag-js/combobox": "1.26.5",
|
|
168
|
+
"@zag-js/core": "1.26.5",
|
|
169
|
+
"@zag-js/date-picker": "1.26.5",
|
|
170
|
+
"@zag-js/date-utils": "1.26.5",
|
|
171
|
+
"@zag-js/dialog": "1.26.5",
|
|
172
|
+
"@zag-js/dom-query": "1.26.5",
|
|
173
|
+
"@zag-js/editable": "1.26.5",
|
|
174
|
+
"@zag-js/file-upload": "1.26.5",
|
|
175
|
+
"@zag-js/file-utils": "1.26.5",
|
|
176
|
+
"@zag-js/floating-panel": "1.26.5",
|
|
177
|
+
"@zag-js/focus-trap": "1.26.5",
|
|
178
|
+
"@zag-js/highlight-word": "1.26.5",
|
|
179
|
+
"@zag-js/hover-card": "1.26.5",
|
|
180
|
+
"@zag-js/i18n-utils": "1.26.5",
|
|
181
|
+
"@zag-js/json-tree-utils": "1.26.5",
|
|
182
|
+
"@zag-js/listbox": "1.26.5",
|
|
183
|
+
"@zag-js/marquee": "1.26.5",
|
|
184
|
+
"@zag-js/menu": "1.26.5",
|
|
185
|
+
"@zag-js/number-input": "1.26.5",
|
|
186
|
+
"@zag-js/pagination": "1.26.5",
|
|
187
|
+
"@zag-js/password-input": "1.26.5",
|
|
188
|
+
"@zag-js/pin-input": "1.26.5",
|
|
189
|
+
"@zag-js/popover": "1.26.5",
|
|
190
|
+
"@zag-js/presence": "1.26.5",
|
|
191
|
+
"@zag-js/progress": "1.26.5",
|
|
192
|
+
"@zag-js/qr-code": "1.26.5",
|
|
193
|
+
"@zag-js/radio-group": "1.26.5",
|
|
194
|
+
"@zag-js/rating-group": "1.26.5",
|
|
195
|
+
"@zag-js/react": "1.26.5",
|
|
196
|
+
"@zag-js/scroll-area": "1.26.5",
|
|
197
|
+
"@zag-js/select": "1.26.5",
|
|
198
|
+
"@zag-js/signature-pad": "1.26.5",
|
|
199
|
+
"@zag-js/slider": "1.26.5",
|
|
200
|
+
"@zag-js/splitter": "1.26.5",
|
|
201
|
+
"@zag-js/steps": "1.26.5",
|
|
202
|
+
"@zag-js/switch": "1.26.5",
|
|
203
|
+
"@zag-js/tabs": "1.26.5",
|
|
204
|
+
"@zag-js/tags-input": "1.26.5",
|
|
205
|
+
"@zag-js/timer": "1.26.5",
|
|
206
|
+
"@zag-js/toast": "1.26.5",
|
|
207
|
+
"@zag-js/toggle": "1.26.5",
|
|
208
|
+
"@zag-js/toggle-group": "1.26.5",
|
|
209
|
+
"@zag-js/tooltip": "1.26.5",
|
|
210
|
+
"@zag-js/tour": "1.26.5",
|
|
211
|
+
"@zag-js/tree-view": "1.26.5",
|
|
212
|
+
"@zag-js/types": "1.26.5",
|
|
213
|
+
"@zag-js/utils": "1.26.5"
|
|
213
214
|
},
|
|
214
215
|
"devDependencies": {
|
|
215
216
|
"check-password-strength": "3.0.0",
|
|
216
|
-
"@biomejs/biome": "2.
|
|
217
|
-
"@storybook/addon-a11y": "9.1.
|
|
218
|
-
"@storybook/react-vite": "9.1.
|
|
217
|
+
"@biomejs/biome": "2.3.1",
|
|
218
|
+
"@storybook/addon-a11y": "9.1.15",
|
|
219
|
+
"@storybook/react-vite": "9.1.15",
|
|
219
220
|
"@testing-library/dom": "10.4.1",
|
|
220
221
|
"@testing-library/jest-dom": "6.9.1",
|
|
221
222
|
"@testing-library/react": "16.3.0",
|
|
@@ -223,12 +224,12 @@
|
|
|
223
224
|
"@types/jsdom": "21.1.7",
|
|
224
225
|
"@types/react": "19.2.2",
|
|
225
226
|
"@types/react-dom": "19.2.2",
|
|
226
|
-
"@vitejs/plugin-react": "5.0
|
|
227
|
+
"@vitejs/plugin-react": "5.1.0",
|
|
227
228
|
"clean-package": "2.2.0",
|
|
228
229
|
"image-conversion": "2.1.1",
|
|
229
230
|
"globby": "15.0.0",
|
|
230
|
-
"happy-dom": "20.0.
|
|
231
|
-
"lucide-react": "0.
|
|
231
|
+
"happy-dom": "20.0.8",
|
|
232
|
+
"lucide-react": "0.548.0",
|
|
232
233
|
"react": "19.2.0",
|
|
233
234
|
"react-dom": "19.2.0",
|
|
234
235
|
"react-shadow": "20.6.0",
|
|
@@ -236,9 +237,9 @@
|
|
|
236
237
|
"react-frame-component": "5.2.7",
|
|
237
238
|
"react-hook-form": "7.65.0",
|
|
238
239
|
"resize-observer-polyfill": "1.5.1",
|
|
239
|
-
"storybook": "9.1.
|
|
240
|
+
"storybook": "9.1.15",
|
|
240
241
|
"typescript": "5.9.3",
|
|
241
|
-
"vite": "7.1.
|
|
242
|
+
"vite": "7.1.12",
|
|
242
243
|
"vite-plugin-dts": "4.5.4",
|
|
243
244
|
"vitest": "3.2.4",
|
|
244
245
|
"@vitest/coverage-v8": "3.2.4",
|