@zayne-labs/ui-react 0.6.3 → 0.7.1
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/esm/{chunk-ENDWJXPF.js → chunk-L2SROZYQ.js} +2 -2
- package/dist/esm/{chunk-ENDWJXPF.js.map → chunk-L2SROZYQ.js.map} +1 -1
- package/dist/esm/common/await/index.js +37 -3
- package/dist/esm/common/await/index.js.map +1 -1
- package/dist/esm/common/show/index.d.ts +1 -1
- package/dist/esm/common/show/index.js +48 -2
- package/dist/esm/common/show/index.js.map +1 -1
- package/dist/esm/common/slot/index.js +1 -1
- package/dist/esm/common/suspense-with-boundary/index.js +11 -2
- package/dist/esm/common/suspense-with-boundary/index.js.map +1 -1
- package/dist/esm/common/switch/index.js +38 -2
- package/dist/esm/common/switch/index.js.map +1 -1
- package/dist/esm/common/teleport/index.js +28 -1
- package/dist/esm/common/teleport/index.js.map +1 -1
- package/dist/esm/ui/card/index.js +43 -4
- package/dist/esm/ui/card/index.js.map +1 -1
- package/dist/esm/ui/carousel/index.js +272 -4
- package/dist/esm/ui/carousel/index.js.map +1 -1
- package/dist/esm/ui/drag-scroll/index.js +117 -2
- package/dist/esm/ui/drag-scroll/index.js.map +1 -1
- package/dist/esm/ui/drop-zone/index.js +137 -2
- package/dist/esm/ui/drop-zone/index.js.map +1 -1
- package/dist/esm/ui/form/index.js +508 -12
- package/dist/esm/ui/form/index.js.map +1 -1
- package/package.json +6 -9
- package/dist/esm/chunk-CB2EZJYW.js +0 -31
- package/dist/esm/chunk-CB2EZJYW.js.map +0 -1
- package/dist/esm/chunk-CWUEUCR5.js +0 -3
- package/dist/esm/chunk-CWUEUCR5.js.map +0 -1
- package/dist/esm/chunk-E42DOTGX.js +0 -119
- package/dist/esm/chunk-E42DOTGX.js.map +0 -1
- package/dist/esm/chunk-EOI2VNGP.js +0 -39
- package/dist/esm/chunk-EOI2VNGP.js.map +0 -1
- package/dist/esm/chunk-FPCKBOJN.js +0 -50
- package/dist/esm/chunk-FPCKBOJN.js.map +0 -1
- package/dist/esm/chunk-GVL6BLX5.js +0 -274
- package/dist/esm/chunk-GVL6BLX5.js.map +0 -1
- package/dist/esm/chunk-IJUYDZCZ.js +0 -510
- package/dist/esm/chunk-IJUYDZCZ.js.map +0 -1
- package/dist/esm/chunk-NPIJ4XZP.js +0 -13
- package/dist/esm/chunk-NPIJ4XZP.js.map +0 -1
- package/dist/esm/chunk-PNYEIX7F.js +0 -3
- package/dist/esm/chunk-PNYEIX7F.js.map +0 -1
- package/dist/esm/chunk-PXYYL2LL.js +0 -45
- package/dist/esm/chunk-PXYYL2LL.js.map +0 -1
- package/dist/esm/chunk-RQZL6ZG6.js +0 -139
- package/dist/esm/chunk-RQZL6ZG6.js.map +0 -1
- package/dist/esm/chunk-SVQ4WBSO.js +0 -40
- package/dist/esm/chunk-SVQ4WBSO.js.map +0 -1
- package/dist/esm/common/index.d.ts +0 -12
- package/dist/esm/common/index.js +0 -12
- package/dist/esm/common/index.js.map +0 -1
- package/dist/esm/index.d.ts +0 -20
- package/dist/esm/index.js +0 -19
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/ui/index.d.ts +0 -11
- package/dist/esm/ui/index.js +0 -19
- package/dist/esm/ui/index.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zayne-labs/ui-react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.7.1",
|
|
5
5
|
"description": "A composable UI/UI-utilities components library. ",
|
|
6
6
|
"author": "Ryan Zayne",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"homepage": "https://github.com/zayne-labs/ui#readme",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
|
-
"url": "https://github.com/zayne-labs/ui.git"
|
|
11
|
+
"url": "git+https://github.com/zayne-labs/ui.git"
|
|
12
12
|
},
|
|
13
13
|
"bugs": {
|
|
14
14
|
"url": "https://github.com/zayne-labs/ui/issues"
|
|
@@ -20,9 +20,6 @@
|
|
|
20
20
|
"./*": "./dist/esm/ui/*/index.js",
|
|
21
21
|
"./common/*": "./dist/esm/common/*/index.js"
|
|
22
22
|
},
|
|
23
|
-
"main": "./dist/esm/index.js",
|
|
24
|
-
"module": "./dist/esm/index.js",
|
|
25
|
-
"types": "./dist/esm/index.d.ts",
|
|
26
23
|
"files": [
|
|
27
24
|
"dist"
|
|
28
25
|
],
|
|
@@ -48,9 +45,9 @@
|
|
|
48
45
|
}
|
|
49
46
|
},
|
|
50
47
|
"dependencies": {
|
|
51
|
-
"@zayne-labs/toolkit-core": "^0.9.
|
|
52
|
-
"@zayne-labs/toolkit-react": "^0.9.
|
|
53
|
-
"@zayne-labs/toolkit-type-helpers": "^0.9.
|
|
48
|
+
"@zayne-labs/toolkit-core": "^0.9.3",
|
|
49
|
+
"@zayne-labs/toolkit-react": "^0.9.3",
|
|
50
|
+
"@zayne-labs/toolkit-type-helpers": "^0.9.3"
|
|
54
51
|
},
|
|
55
52
|
"devDependencies": {
|
|
56
53
|
"@arethetypeswrong/cli": "0.17.4",
|
|
@@ -58,7 +55,7 @@
|
|
|
58
55
|
"@size-limit/preset-small-lib": "11.2.0",
|
|
59
56
|
"@total-typescript/ts-reset": "0.6.1",
|
|
60
57
|
"@types/react": "^19.1.0",
|
|
61
|
-
"@types/react-dom": "^19.1.
|
|
58
|
+
"@types/react-dom": "^19.1.2",
|
|
62
59
|
"@zayne-labs/tsconfig": "0.8.0",
|
|
63
60
|
"concurrently": "^9.1.2",
|
|
64
61
|
"cross-env": "^7.0.3",
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
import { useEffectOnce, useMountEffect } from '@zayne-labs/toolkit-react';
|
|
3
|
-
import { isString } from '@zayne-labs/toolkit-type-helpers';
|
|
4
|
-
import { createPortal } from 'react-dom';
|
|
5
|
-
|
|
6
|
-
// src/components/common/teleport/teleport.tsx
|
|
7
|
-
function Teleport(props) {
|
|
8
|
-
const { children, insertPosition, to } = props;
|
|
9
|
-
const [reactPortal, setReactPortal] = useState(null);
|
|
10
|
-
useEffectOnce(() => {
|
|
11
|
-
if (!to || !insertPosition) return;
|
|
12
|
-
const destination = isString(to) ? document.querySelector(to) : to;
|
|
13
|
-
const tempWrapper = document.createElement("div");
|
|
14
|
-
tempWrapper.style.display = "contents";
|
|
15
|
-
destination?.insertAdjacentElement(insertPosition, tempWrapper);
|
|
16
|
-
setReactPortal(createPortal(children, tempWrapper));
|
|
17
|
-
return () => {
|
|
18
|
-
tempWrapper.remove();
|
|
19
|
-
};
|
|
20
|
-
});
|
|
21
|
-
useMountEffect(() => {
|
|
22
|
-
if (!to || insertPosition) return;
|
|
23
|
-
const destination = isString(to) ? document.querySelector(to) : to;
|
|
24
|
-
destination && setReactPortal(createPortal(children, destination));
|
|
25
|
-
});
|
|
26
|
-
return reactPortal;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export { Teleport };
|
|
30
|
-
//# sourceMappingURL=chunk-CB2EZJYW.js.map
|
|
31
|
-
//# sourceMappingURL=chunk-CB2EZJYW.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/common/teleport/teleport.tsx"],"names":[],"mappings":";;;;;;AAeA,SAAS,SAAS,KAAoB,EAAA;AACrC,EAAA,MAAM,EAAE,QAAA,EAAU,cAAgB,EAAA,EAAA,EAAO,GAAA,KAAA;AAEzC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAmC,IAAI,CAAA;AAE7E,EAAA,aAAA,CAAc,MAAM;AACnB,IAAI,IAAA,CAAC,EAAM,IAAA,CAAC,cAAgB,EAAA;AAE5B,IAAA,MAAM,cAAc,QAAS,CAAA,EAAE,IAAI,QAAS,CAAA,aAAA,CAA2B,EAAE,CAAI,GAAA,EAAA;AAE7E,IAAM,MAAA,WAAA,GAAc,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA;AAChD,IAAA,WAAA,CAAY,MAAM,OAAU,GAAA,UAAA;AAE5B,IAAa,WAAA,EAAA,qBAAA,CAAsB,gBAAgB,WAAW,CAAA;AAE9D,IAAe,cAAA,CAAA,YAAA,CAAa,QAAU,EAAA,WAAW,CAAC,CAAA;AAElD,IAAA,OAAO,MAAM;AACZ,MAAA,WAAA,CAAY,MAAO,EAAA;AAAA,KACpB;AAAA,GACA,CAAA;AAED,EAAA,cAAA,CAAe,MAAM;AACpB,IAAI,IAAA,CAAC,MAAM,cAAgB,EAAA;AAE3B,IAAA,MAAM,cAAc,QAAS,CAAA,EAAE,IAAI,QAAS,CAAA,aAAA,CAA2B,EAAE,CAAI,GAAA,EAAA;AAE7E,IAAA,WAAA,IAAe,cAAe,CAAA,YAAA,CAAa,QAAU,EAAA,WAAW,CAAC,CAAA;AAAA,GACjE,CAAA;AAED,EAAO,OAAA,WAAA;AACR","file":"chunk-CB2EZJYW.js","sourcesContent":["import * as React from \"react\";\n\nimport { useEffectOnce, useMountEffect } from \"@zayne-labs/toolkit-react\";\nimport { type AnyString, isString } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ntype ValidHtmlTags = keyof HTMLElementTagNameMap;\n\ntype PortalProps = {\n\tchildren: React.ReactNode;\n\tinsertPosition?: InsertPosition;\n\tto?: AnyString | HTMLElement | ValidHtmlTags | null;\n};\n\nfunction Teleport(props: PortalProps) {\n\tconst { children, insertPosition, to } = props;\n\n\tconst [reactPortal, setReactPortal] = useState<React.ReactPortal | null>(null);\n\n\tuseEffectOnce(() => {\n\t\tif (!to || !insertPosition) return;\n\n\t\tconst destination = isString(to) ? document.querySelector<HTMLElement>(to) : to;\n\n\t\tconst tempWrapper = document.createElement(\"div\");\n\t\ttempWrapper.style.display = \"contents\";\n\n\t\tdestination?.insertAdjacentElement(insertPosition, tempWrapper);\n\n\t\tsetReactPortal(createPortal(children, tempWrapper));\n\n\t\treturn () => {\n\t\t\ttempWrapper.remove();\n\t\t};\n\t});\n\n\tuseMountEffect(() => {\n\t\tif (!to || insertPosition) return;\n\n\t\tconst destination = isString(to) ? document.querySelector<HTMLElement>(to) : to;\n\n\t\tdestination && setReactPortal(createPortal(children, destination));\n\t});\n\n\treturn reactPortal;\n}\n\nexport { Teleport };\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-CWUEUCR5.js"}
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import { cnMerge } from './chunk-OHG7GB7O.js';
|
|
2
|
-
import { off, on, checkIsDeviceMobileOrTablet } from '@zayne-labs/toolkit-core';
|
|
3
|
-
import { useCallbackRef } from '@zayne-labs/toolkit-react';
|
|
4
|
-
import { mergeTwoProps, composeRefs } from '@zayne-labs/toolkit-react/utils';
|
|
5
|
-
import { useRef } from 'react';
|
|
6
|
-
|
|
7
|
-
var updateCursor = (element) => {
|
|
8
|
-
element.style.cursor = "grabbing";
|
|
9
|
-
element.style.userSelect = "none";
|
|
10
|
-
};
|
|
11
|
-
var onScrollSnap = (action, element) => {
|
|
12
|
-
if (action === "remove") {
|
|
13
|
-
element.style.scrollSnapType = "none";
|
|
14
|
-
return;
|
|
15
|
-
}
|
|
16
|
-
element.style.scrollSnapType = "";
|
|
17
|
-
};
|
|
18
|
-
var resetCursor = (element) => {
|
|
19
|
-
element.style.cursor = "";
|
|
20
|
-
element.style.userSelect = "";
|
|
21
|
-
};
|
|
22
|
-
var handleScrollSnap = (dragContainer) => {
|
|
23
|
-
const isMobileOrTablet = checkIsDeviceMobileOrTablet();
|
|
24
|
-
if (!isMobileOrTablet) {
|
|
25
|
-
onScrollSnap("remove", dragContainer);
|
|
26
|
-
} else {
|
|
27
|
-
onScrollSnap("reset", dragContainer);
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
// src/components/ui/drag-scroll/use-drag-scroll.ts
|
|
32
|
-
var useDragScroll = (props = {}) => {
|
|
33
|
-
const {
|
|
34
|
-
classNames,
|
|
35
|
-
extraItemProps,
|
|
36
|
-
extraRootProps,
|
|
37
|
-
orientation = "horizontal",
|
|
38
|
-
usage = "allScreens"
|
|
39
|
-
} = props;
|
|
40
|
-
const dragContainerRef = useRef(null);
|
|
41
|
-
const positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });
|
|
42
|
-
const handleMouseMove = useCallbackRef((event) => {
|
|
43
|
-
if (!dragContainerRef.current) return;
|
|
44
|
-
if (orientation === "horizontal" || orientation === "both") {
|
|
45
|
-
const dx = event.clientX - positionRef.current.x;
|
|
46
|
-
dragContainerRef.current.scrollLeft = positionRef.current.left - dx;
|
|
47
|
-
}
|
|
48
|
-
if (orientation === "vertical" || orientation === "both") {
|
|
49
|
-
const dy = event.clientY - positionRef.current.y;
|
|
50
|
-
dragContainerRef.current.scrollTop = positionRef.current.top - dy;
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
const handleMouseUpOrLeave = useCallbackRef(() => {
|
|
54
|
-
if (!dragContainerRef.current) return;
|
|
55
|
-
off("mousemove", dragContainerRef.current, handleMouseMove);
|
|
56
|
-
off("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
|
|
57
|
-
off("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
|
|
58
|
-
resetCursor(dragContainerRef.current);
|
|
59
|
-
});
|
|
60
|
-
const handleMouseDown = useCallbackRef((event) => {
|
|
61
|
-
if (usage === "mobileAndTabletOnly" && window.innerWidth >= 768) return;
|
|
62
|
-
if (usage === "desktopOnly" && window.innerWidth < 768) return;
|
|
63
|
-
if (!dragContainerRef.current) return;
|
|
64
|
-
if (orientation === "horizontal" || orientation === "both") {
|
|
65
|
-
positionRef.current.x = event.clientX;
|
|
66
|
-
positionRef.current.left = dragContainerRef.current.scrollLeft;
|
|
67
|
-
}
|
|
68
|
-
if (orientation === "vertical" || orientation === "both") {
|
|
69
|
-
positionRef.current.y = event.clientY;
|
|
70
|
-
positionRef.current.top = dragContainerRef.current.scrollTop;
|
|
71
|
-
}
|
|
72
|
-
updateCursor(dragContainerRef.current);
|
|
73
|
-
on("mousemove", dragContainerRef.current, handleMouseMove);
|
|
74
|
-
on("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
|
|
75
|
-
on("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
|
|
76
|
-
});
|
|
77
|
-
const refCallBack = useCallbackRef((node) => {
|
|
78
|
-
dragContainerRef.current = node;
|
|
79
|
-
node && handleScrollSnap(node);
|
|
80
|
-
const cleanup = on("mousedown", dragContainerRef.current, handleMouseDown);
|
|
81
|
-
return cleanup;
|
|
82
|
-
});
|
|
83
|
-
const getRootProps = (rootProps) => {
|
|
84
|
-
const mergedRootProps = mergeTwoProps(extraRootProps, rootProps);
|
|
85
|
-
return {
|
|
86
|
-
...mergedRootProps,
|
|
87
|
-
className: cnMerge(
|
|
88
|
-
`flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-clip
|
|
89
|
-
[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,
|
|
90
|
-
orientation === "horizontal" && "flex-row",
|
|
91
|
-
orientation === "vertical" && "flex-col",
|
|
92
|
-
usage === "mobileAndTabletOnly" && "md:cursor-default md:flex-col",
|
|
93
|
-
usage === "desktopOnly" && "max-md:cursor-default max-md:flex-col",
|
|
94
|
-
classNames?.base,
|
|
95
|
-
mergedRootProps.className
|
|
96
|
-
),
|
|
97
|
-
"data-part": "root",
|
|
98
|
-
"data-scope": "drag-scroll",
|
|
99
|
-
ref: composeRefs([
|
|
100
|
-
refCallBack,
|
|
101
|
-
mergedRootProps?.ref
|
|
102
|
-
])
|
|
103
|
-
};
|
|
104
|
-
};
|
|
105
|
-
const getItemProps = (itemProps) => {
|
|
106
|
-
const mergedItemProps = mergeTwoProps(extraItemProps, itemProps);
|
|
107
|
-
return {
|
|
108
|
-
...mergedItemProps,
|
|
109
|
-
className: cnMerge("snap-center snap-always", classNames?.item, mergedItemProps.className),
|
|
110
|
-
"data-part": "item",
|
|
111
|
-
"data-scope": "drag-scroll"
|
|
112
|
-
};
|
|
113
|
-
};
|
|
114
|
-
return { getItemProps, getRootProps };
|
|
115
|
-
};
|
|
116
|
-
|
|
117
|
-
export { useDragScroll };
|
|
118
|
-
//# sourceMappingURL=chunk-E42DOTGX.js.map
|
|
119
|
-
//# sourceMappingURL=chunk-E42DOTGX.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/ui/drag-scroll/utils.ts","../../src/components/ui/drag-scroll/use-drag-scroll.ts"],"names":[],"mappings":"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","file":"chunk-E42DOTGX.js","sourcesContent":["import { checkIsDeviceMobileOrTablet } from \"@zayne-labs/toolkit-core\";\n\n/* eslint-disable no-param-reassign -- Mutation is needed here since it's an element */\nexport const updateCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"grabbing\";\n\telement.style.userSelect = \"none\";\n};\n\nexport const onScrollSnap = <TElement extends HTMLElement>(\n\taction: \"remove\" | \"reset\",\n\telement: TElement\n) => {\n\tif (action === \"remove\") {\n\t\telement.style.scrollSnapType = \"none\";\n\t\treturn;\n\t}\n\n\telement.style.scrollSnapType = \"\";\n};\n\nexport const resetCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"\";\n\telement.style.userSelect = \"\";\n};\n/* eslint-enable no-param-reassign -- Mutation is needed here since it's an element */\n\nexport const handleScrollSnap = (dragContainer: HTMLElement) => {\n\tconst isMobileOrTablet = checkIsDeviceMobileOrTablet();\n\n\tif (!isMobileOrTablet) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { cnMerge } from \"@/lib/utils/cn\";\nimport { off, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { type InferProps, composeRefs, mergeTwoProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type RefCallback, useRef } from \"react\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype DragScrollProps<TElement extends HTMLElement> = {\n\tclassNames?: { base?: string; item?: string };\n\textraItemProps?: InferProps<HTMLElement>;\n\textraRootProps?: Omit<InferProps<TElement>, \"children\">;\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\nconst useDragScroll = <TElement extends HTMLElement>(props: DragScrollProps<TElement> = {}) => {\n\tconst {\n\t\tclassNames,\n\t\textraItemProps,\n\t\textraRootProps,\n\t\torientation = \"horizontal\",\n\t\tusage = \"allScreens\",\n\t} = props;\n\n\tconst dragContainerRef = useRef<TElement>(null);\n\n\tconst positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });\n\n\tconst handleMouseMove = useCallbackRef((event: MouseEvent) => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the horizontal scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dx = event.clientX - positionRef.current.x;\n\n\t\t\t// == Assign the scrollLeft of the container to the difference between its previous horizontal scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the vertical scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dy = event.clientY - positionRef.current.y;\n\n\t\t\t// == Assign the scrollTop of the container to the difference between its previous vertical scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollTop = positionRef.current.top - dy;\n\t\t}\n\t});\n\n\tconst handleMouseUpOrLeave = useCallbackRef(() => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\toff(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\toff(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\toff(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\n\t\tresetCursor(dragContainerRef.current);\n\t});\n\n\tconst handleMouseDown = useCallbackRef((event: MouseEvent) => {\n\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\tif (!dragContainerRef.current) return;\n\n\t\t// == Update all initial position properties stored in the positionRef\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\tpositionRef.current.x = event.clientX;\n\t\t\tpositionRef.current.left = dragContainerRef.current.scrollLeft;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\tpositionRef.current.y = event.clientY;\n\t\t\tpositionRef.current.top = dragContainerRef.current.scrollTop;\n\t\t}\n\n\t\tupdateCursor(dragContainerRef.current);\n\n\t\ton(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\ton(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\ton(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\t});\n\n\tconst refCallBack: RefCallback<TElement> = useCallbackRef((node) => {\n\t\tdragContainerRef.current = node;\n\n\t\tnode && handleScrollSnap(node);\n\n\t\tconst cleanup = on(\"mousedown\", dragContainerRef.current, handleMouseDown);\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps = (rootProps?: DragScrollProps<TElement>[\"extraRootProps\"]) => {\n\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\treturn {\n\t\t\t...mergedRootProps,\n\t\t\tclassName: cnMerge(\n\t\t\t\t`flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-clip\n\t\t\t\t[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,\n\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\tclassNames?.base,\n\t\t\t\tmergedRootProps.className\n\t\t\t),\n\t\t\t\"data-part\": \"root\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\tref: composeRefs([\n\t\t\t\trefCallBack,\n\t\t\t\t(mergedRootProps as { ref?: React.Ref<TElement> } | undefined)?.ref,\n\t\t\t]),\n\t\t};\n\t};\n\n\tconst getItemProps = <TItemElement extends HTMLElement>(\n\t\titemProps?: DragScrollProps<TItemElement>[\"extraItemProps\"]\n\t) => {\n\t\tconst mergedItemProps = mergeTwoProps(extraItemProps, itemProps);\n\n\t\treturn {\n\t\t\t...mergedItemProps,\n\t\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item, mergedItemProps.className),\n\t\t\t\"data-part\": \"item\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t};\n\t};\n\n\treturn { getItemProps, getRootProps };\n};\n\nexport { useDragScroll };\n"]}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { ErrorBoundary } from './chunk-OM4ZFFQS.js';
|
|
2
|
-
import { Slot } from './chunk-ENDWJXPF.js';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { Fragment, Suspense, use } from 'react';
|
|
5
|
-
|
|
6
|
-
function Await(props) {
|
|
7
|
-
const { errorFallback, fallback, wrapperVariant = "suspense-and-boundary", ...restOfProps } = props;
|
|
8
|
-
const WithErrorBoundary = wrapperVariant === "only-boundary" || wrapperVariant === "suspense-and-boundary" ? ErrorBoundary : Fragment;
|
|
9
|
-
const WithSuspense = wrapperVariant === "only-suspense" || wrapperVariant === "suspense-and-boundary" ? Suspense : Fragment;
|
|
10
|
-
const errorBoundaryProps = Boolean(errorFallback) && { fallback: errorFallback };
|
|
11
|
-
const suspenseProps = Boolean(fallback) && { fallback };
|
|
12
|
-
return /* @__PURE__ */ React.createElement(WithErrorBoundary, { ...errorBoundaryProps }, /* @__PURE__ */ React.createElement(WithSuspense, { ...suspenseProps }, /* @__PURE__ */ React.createElement(AwaitInner, { ...restOfProps })));
|
|
13
|
-
}
|
|
14
|
-
function AwaitInner(props) {
|
|
15
|
-
const { asChild, children, promise, render } = props;
|
|
16
|
-
const result = use(promise);
|
|
17
|
-
const Component = asChild ? Slot : Fragment;
|
|
18
|
-
const componentProps = asChild && { promise };
|
|
19
|
-
let resolvedChildren;
|
|
20
|
-
switch (true) {
|
|
21
|
-
case typeof children === "function": {
|
|
22
|
-
resolvedChildren = children(result);
|
|
23
|
-
break;
|
|
24
|
-
}
|
|
25
|
-
case typeof render === "function": {
|
|
26
|
-
resolvedChildren = render(result);
|
|
27
|
-
break;
|
|
28
|
-
}
|
|
29
|
-
default: {
|
|
30
|
-
resolvedChildren = children ?? render;
|
|
31
|
-
break;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
return /* @__PURE__ */ React.createElement(Component, { ...componentProps }, resolvedChildren);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export { Await };
|
|
38
|
-
//# sourceMappingURL=chunk-EOI2VNGP.js.map
|
|
39
|
-
//# sourceMappingURL=chunk-EOI2VNGP.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/common/await/await.tsx"],"names":["ReactFragment"],"mappings":";;;;;AAkBO,SAAS,MAAc,KAA2B,EAAA;AACxD,EAAA,MAAM,EAAE,aAAe,EAAA,QAAA,EAAU,iBAAiB,uBAAyB,EAAA,GAAG,aAAgB,GAAA,KAAA;AAE9F,EAAA,MAAM,iBACL,GAAA,cAAA,KAAmB,eAAmB,IAAA,cAAA,KAAmB,0BACtD,aACA,GAAAA,QAAA;AAEJ,EAAA,MAAM,YACL,GAAA,cAAA,KAAmB,eAAmB,IAAA,cAAA,KAAmB,0BACtD,QACA,GAAAA,QAAA;AAEJ,EAAA,MAAM,qBAAqB,OAAQ,CAAA,aAAa,CAAK,IAAA,EAAE,UAAU,aAAc,EAAA;AAE/E,EAAA,MAAM,aAAgB,GAAA,OAAA,CAAQ,QAAQ,CAAA,IAAK,EAAE,QAAS,EAAA;AAEtD,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,EAAmB,GAAG,kBAAA,EAAA,kBACrB,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAc,GAAG,aAAA,EAAA,kBAChB,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAY,GAAG,WAAA,EAAa,CAC9B,CACD,CAAA;AAEF;AAOA,SAAS,WAAmB,KAAgC,EAAA;AAC3D,EAAA,MAAM,EAAE,OAAA,EAAS,QAAU,EAAA,OAAA,EAAS,QAAW,GAAA,KAAA;AAE/C,EAAM,MAAA,MAAA,GAAS,IAAI,OAAO,CAAA;AAE1B,EAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAAA,QAAA;AAEnC,EAAM,MAAA,cAAA,GAAiB,OAAW,IAAA,EAAE,OAAQ,EAAA;AAE5C,EAAI,IAAA,gBAAA;AAEJ,EAAA,QAAQ,IAAM;AAAA,IACb,KAAK,OAAO,QAAA,KAAa,UAAY,EAAA;AACpC,MAAA,gBAAA,GAAmB,SAAS,MAAM,CAAA;AAClC,MAAA;AAAA;AACD,IACA,KAAK,OAAO,MAAA,KAAW,UAAY,EAAA;AAClC,MAAA,gBAAA,GAAmB,OAAO,MAAM,CAAA;AAChC,MAAA;AAAA;AACD,IACA,SAAS;AACR,MAAA,gBAAA,GAAmB,QAAY,IAAA,MAAA;AAC/B,MAAA;AAAA;AACD;AAGD,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAW,GAAG,cAAA,EAAA,EAAiB,gBAAiB,CAAA;AACzD","file":"chunk-EOI2VNGP.js","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport type { DiscriminatedRenderProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { Fragment as ReactFragment, Suspense, use } from \"react\";\nimport { ErrorBoundary } from \"../error-boundary\";\nimport { Slot } from \"../slot\";\nimport type { SuspenseWithBoundaryProps } from \"../suspense-with-boundary\";\n\ntype RenderPropFn<TValue> = (result: TValue) => React.ReactNode;\n\ntype AwaitProps<TValue> = AwaitInnerProps<TValue>\n\t& Pick<SuspenseWithBoundaryProps, \"errorFallback\" | \"fallback\"> & {\n\t\tasChild?: boolean;\n\t\twrapperVariant?: \"none\" | \"only-boundary\" | \"only-suspense\" | \"suspense-and-boundary\";\n\t};\n\nexport function Await<TValue>(props: AwaitProps<TValue>) {\n\tconst { errorFallback, fallback, wrapperVariant = \"suspense-and-boundary\", ...restOfProps } = props;\n\n\tconst WithErrorBoundary =\n\t\twrapperVariant === \"only-boundary\" || wrapperVariant === \"suspense-and-boundary\"\n\t\t\t? ErrorBoundary\n\t\t\t: ReactFragment;\n\n\tconst WithSuspense =\n\t\twrapperVariant === \"only-suspense\" || wrapperVariant === \"suspense-and-boundary\"\n\t\t\t? Suspense\n\t\t\t: ReactFragment;\n\n\tconst errorBoundaryProps = Boolean(errorFallback) && { fallback: errorFallback };\n\n\tconst suspenseProps = Boolean(fallback) && { fallback };\n\n\treturn (\n\t\t<WithErrorBoundary {...errorBoundaryProps}>\n\t\t\t<WithSuspense {...suspenseProps}>\n\t\t\t\t<AwaitInner {...restOfProps} />\n\t\t\t</WithSuspense>\n\t\t</WithErrorBoundary>\n\t);\n}\n\nexport type AwaitInnerProps<TValue> = DiscriminatedRenderProps<React.ReactNode | RenderPropFn<TValue>> & {\n\tasChild?: boolean;\n\tpromise: Promise<TValue>;\n};\n\nfunction AwaitInner<TValue>(props: AwaitInnerProps<TValue>) {\n\tconst { asChild, children, promise, render } = props;\n\n\tconst result = use(promise);\n\n\tconst Component = asChild ? Slot : ReactFragment;\n\n\tconst componentProps = asChild && { promise };\n\n\tlet resolvedChildren: React.ReactNode;\n\n\tswitch (true) {\n\t\tcase typeof children === \"function\": {\n\t\t\tresolvedChildren = children(result);\n\t\t\tbreak;\n\t\t}\n\t\tcase typeof render === \"function\": {\n\t\t\tresolvedChildren = render(result);\n\t\t\tbreak;\n\t\t}\n\t\tdefault: {\n\t\t\tresolvedChildren = children ?? render;\n\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn <Component {...componentProps}>{resolvedChildren}</Component>;\n}\n"]}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { __export } from './chunk-PZ5AY32C.js';
|
|
2
|
-
import 'react';
|
|
3
|
-
import { getSingleSlot, getRegularChildren } from '@zayne-labs/toolkit-react/utils';
|
|
4
|
-
import { isFunction, AssertionError } from '@zayne-labs/toolkit-type-helpers';
|
|
5
|
-
|
|
6
|
-
function ShowRoot({ children, fallback, when }) {
|
|
7
|
-
if ((when == null || when === false) && !isFunction(children)) {
|
|
8
|
-
const fallBackSlot = getSingleSlot(children, ShowFallback, {
|
|
9
|
-
errorMessage: "Only one <Show.Fallback> or <Show.OtherWise> component is allowed",
|
|
10
|
-
throwOnMultipleSlotMatch: true
|
|
11
|
-
});
|
|
12
|
-
if (fallBackSlot && fallback) {
|
|
13
|
-
throw new AssertionError(`
|
|
14
|
-
The fallback prop and <Show.Fallback>/<Show.OtherWise> cannot be used at the same time.
|
|
15
|
-
`);
|
|
16
|
-
}
|
|
17
|
-
return fallBackSlot ?? fallback;
|
|
18
|
-
}
|
|
19
|
-
if (when == null || when === false) {
|
|
20
|
-
return fallback;
|
|
21
|
-
}
|
|
22
|
-
const resolvedChildren = isFunction(children) ? children(when) : children;
|
|
23
|
-
const contentSlot = getSingleSlot(resolvedChildren, ShowContent, {
|
|
24
|
-
errorMessage: "Only one <Show.Content> component is allowed",
|
|
25
|
-
throwOnMultipleSlotMatch: true
|
|
26
|
-
});
|
|
27
|
-
const regularChildren = getRegularChildren(resolvedChildren, [ShowFallback, ShowContent]);
|
|
28
|
-
return contentSlot ?? regularChildren;
|
|
29
|
-
}
|
|
30
|
-
function ShowContent({ children }) {
|
|
31
|
-
return children;
|
|
32
|
-
}
|
|
33
|
-
ShowContent.slotSymbol = Symbol("content");
|
|
34
|
-
function ShowFallback({ children }) {
|
|
35
|
-
return children;
|
|
36
|
-
}
|
|
37
|
-
ShowFallback.slotSymbol = Symbol("show-fallback");
|
|
38
|
-
|
|
39
|
-
// src/components/common/show/show-parts.ts
|
|
40
|
-
var show_parts_exports = {};
|
|
41
|
-
__export(show_parts_exports, {
|
|
42
|
-
Content: () => ShowContent,
|
|
43
|
-
Fallback: () => ShowFallback,
|
|
44
|
-
OtherWise: () => ShowFallback,
|
|
45
|
-
Root: () => ShowRoot
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
export { ShowContent, ShowFallback, ShowRoot, show_parts_exports };
|
|
49
|
-
//# sourceMappingURL=chunk-FPCKBOJN.js.map
|
|
50
|
-
//# sourceMappingURL=chunk-FPCKBOJN.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/common/show/show.tsx","../../src/components/common/show/show-parts.ts"],"names":[],"mappings":";;;;;AAaO,SAAS,QAAgB,CAAA,EAAE,QAAU,EAAA,QAAA,EAAU,MAA0B,EAAA;AAC/E,EAAA,IAAA,CAAK,QAAQ,IAAQ,IAAA,IAAA,KAAS,UAAU,CAAC,UAAA,CAAW,QAAQ,CAAG,EAAA;AAC9D,IAAM,MAAA,YAAA,GAAe,aAAc,CAAA,QAAA,EAAU,YAAc,EAAA;AAAA,MAC1D,YAAc,EAAA,mEAAA;AAAA,MACd,wBAA0B,EAAA;AAAA,KAC1B,CAAA;AAED,IAAA,IAAI,gBAAgB,QAAU,EAAA;AAC7B,MAAA,MAAM,IAAI,cAAe,CAAA;AAAA;AAAA,EAEzB,CAAA,CAAA;AAAA;AAGD,IAAA,OAAO,YAAgB,IAAA,QAAA;AAAA;AAGxB,EAAI,IAAA,IAAA,IAAQ,IAAQ,IAAA,IAAA,KAAS,KAAO,EAAA;AACnC,IAAO,OAAA,QAAA;AAAA;AAGR,EAAA,MAAM,mBAAmB,UAAW,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,IAAI,CAAI,GAAA,QAAA;AAEjE,EAAM,MAAA,WAAA,GAAc,aAAc,CAAA,gBAAA,EAAkB,WAAa,EAAA;AAAA,IAChE,YAAc,EAAA,8CAAA;AAAA,IACd,wBAA0B,EAAA;AAAA,GAC1B,CAAA;AAED,EAAA,MAAM,kBAAkB,kBAAmB,CAAA,gBAAA,EAAkB,CAAC,YAAA,EAAc,WAAW,CAAC,CAAA;AAExF,EAAA,OAAO,WAAe,IAAA,eAAA;AACvB;AAEO,SAAS,WAAA,CAAY,EAAE,QAAA,EAA2C,EAAA;AACxE,EAAO,OAAA,QAAA;AACR;AACA,WAAY,CAAA,UAAA,GAAa,OAAO,SAAS,CAAA;AAElC,SAAS,YAAA,CAAa,EAAE,QAAA,EAA2C,EAAA;AACzE,EAAO,OAAA,QAAA;AACR;AACA,YAAa,CAAA,UAAA,GAAa,OAAO,eAAe,CAAA;;;ACrDhD,IAAA,kBAAA,GAAA;AAAA,QAAA,CAAA,kBAAA,EAAA;AAAA,EAAA,OAAA,EAAA,MAAA,WAAA;AAAA,EAAA,QAAA,EAAA,MAAA,YAAA;AAAA,EAAA,SAAA,EAAA,MAAA,YAAA;AAAA,EAAA,IAAA,EAAA,MAAA;AAAA,CAAA,CAAA","file":"chunk-FPCKBOJN.js","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { getRegularChildren, getSingleSlot } from \"@zayne-labs/toolkit-react/utils\";\nimport { AssertionError, isFunction } from \"@zayne-labs/toolkit-type-helpers\";\n\ntype ShowProps<TWhen> = {\n\tchildren: React.ReactNode | ((whenValue: TWhen) => React.ReactNode);\n\tfallback?: React.ReactNode;\n\twhen: false | TWhen | null | undefined;\n};\n\nexport function ShowRoot<TWhen>({ children, fallback, when }: ShowProps<TWhen>) {\n\tif ((when == null || when === false) && !isFunction(children)) {\n\t\tconst fallBackSlot = getSingleSlot(children, ShowFallback, {\n\t\t\terrorMessage: \"Only one <Show.Fallback> or <Show.OtherWise> component is allowed\",\n\t\t\tthrowOnMultipleSlotMatch: true,\n\t\t});\n\n\t\tif (fallBackSlot && fallback) {\n\t\t\tthrow new AssertionError(`\n\t\t\tThe fallback prop and <Show.Fallback>/<Show.OtherWise> cannot be used at the same time.\n\t\t`);\n\t\t}\n\n\t\treturn fallBackSlot ?? fallback;\n\t}\n\n\tif (when == null || when === false) {\n\t\treturn fallback;\n\t}\n\n\tconst resolvedChildren = isFunction(children) ? children(when) : children;\n\n\tconst contentSlot = getSingleSlot(resolvedChildren, ShowContent, {\n\t\terrorMessage: \"Only one <Show.Content> component is allowed\",\n\t\tthrowOnMultipleSlotMatch: true,\n\t});\n\n\tconst regularChildren = getRegularChildren(resolvedChildren, [ShowFallback, ShowContent]);\n\n\treturn contentSlot ?? regularChildren;\n}\n\nexport function ShowContent({ children }: { children: React.ReactNode }) {\n\treturn children;\n}\nShowContent.slotSymbol = Symbol(\"content\");\n\nexport function ShowFallback({ children }: { children: React.ReactNode }) {\n\treturn children;\n}\nShowFallback.slotSymbol = Symbol(\"show-fallback\");\n","export {\n\tShowContent as Content,\n\tShowFallback as Fallback,\n\tShowFallback as OtherWise,\n\tShowRoot as Root,\n} from \"./show\";\n"]}
|
|
@@ -1,274 +0,0 @@
|
|
|
1
|
-
import { cnMerge } from './chunk-OHG7GB7O.js';
|
|
2
|
-
import { getElementList } from './chunk-DW3FXTFL.js';
|
|
3
|
-
import { __export } from './chunk-PZ5AY32C.js';
|
|
4
|
-
import * as React3 from 'react';
|
|
5
|
-
import { useEffect, useState } from 'react';
|
|
6
|
-
import { useConstant, useAnimationInterval, useCallbackRef } from '@zayne-labs/toolkit-react';
|
|
7
|
-
import { createZustandContext } from '@zayne-labs/toolkit-react/zustand';
|
|
8
|
-
import { create } from 'zustand';
|
|
9
|
-
|
|
10
|
-
var ChevronLeftIcon = (props) => /* @__PURE__ */ React3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React3.createElement("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }, /* @__PURE__ */ React3.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React3.createElement("path", { d: "m14 16l-4-4l4-4" })));
|
|
11
|
-
var [Provider, useCarouselStoreContext] = createZustandContext({
|
|
12
|
-
hookName: "useCarouselStore",
|
|
13
|
-
name: "CarouselStoreContext",
|
|
14
|
-
providerName: "CarouselContextProvider"
|
|
15
|
-
});
|
|
16
|
-
var createCarouselStore = (storeValues) => {
|
|
17
|
-
const { images, onSlideBtnClick } = storeValues;
|
|
18
|
-
const useInitCarouselStore = create()((set, get) => ({
|
|
19
|
-
currentSlide: 0,
|
|
20
|
-
images,
|
|
21
|
-
maxSlide: images.length - 1,
|
|
22
|
-
/* eslint-disable perfectionist/sort-objects -- actions should be last */
|
|
23
|
-
actions: {
|
|
24
|
-
/* eslint-enable perfectionist/sort-objects -- actions should be last */
|
|
25
|
-
goToNextSlide: () => {
|
|
26
|
-
const { currentSlide, maxSlide } = get();
|
|
27
|
-
const { goToSlide } = get().actions;
|
|
28
|
-
if (currentSlide === maxSlide) {
|
|
29
|
-
goToSlide(0);
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
goToSlide(currentSlide + 1);
|
|
33
|
-
},
|
|
34
|
-
goToPreviousSlide: () => {
|
|
35
|
-
const { currentSlide, maxSlide } = get();
|
|
36
|
-
const { goToSlide } = get().actions;
|
|
37
|
-
if (currentSlide === 0) {
|
|
38
|
-
goToSlide(maxSlide);
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
goToSlide(currentSlide - 1);
|
|
42
|
-
},
|
|
43
|
-
goToSlide: (newValue) => {
|
|
44
|
-
onSlideBtnClick?.();
|
|
45
|
-
set({ currentSlide: newValue });
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}));
|
|
49
|
-
return useInitCarouselStore;
|
|
50
|
-
};
|
|
51
|
-
var useCarousel = (props) => {
|
|
52
|
-
const { images, onSlideBtnClick } = props;
|
|
53
|
-
const useInitCarouselStore = useConstant(() => createCarouselStore({ images, onSlideBtnClick }));
|
|
54
|
-
useEffect(() => {
|
|
55
|
-
useInitCarouselStore.setState({ images });
|
|
56
|
-
}, [images]);
|
|
57
|
-
return useInitCarouselStore;
|
|
58
|
-
};
|
|
59
|
-
function CarouselContextProvider(props) {
|
|
60
|
-
const { children, images, onSlideBtnClick } = props;
|
|
61
|
-
const useInitCarouselStore = useCarousel({ images, onSlideBtnClick });
|
|
62
|
-
return /* @__PURE__ */ React3.createElement(Provider, { value: useInitCarouselStore }, children);
|
|
63
|
-
}
|
|
64
|
-
var useCarouselOptions = (options = {}) => {
|
|
65
|
-
const { autoSlideInterval = 5e3, hasAutoSlide = false, shouldPauseOnHover = false } = options;
|
|
66
|
-
const { goToNextSlide } = useCarouselStoreContext((state) => state.actions);
|
|
67
|
-
const [isPaused, setIsPaused] = useState(false);
|
|
68
|
-
const shouldAutoSlide = hasAutoSlide && !isPaused;
|
|
69
|
-
useAnimationInterval({
|
|
70
|
-
intervalDuration: shouldAutoSlide ? autoSlideInterval : null,
|
|
71
|
-
onAnimation: goToNextSlide
|
|
72
|
-
});
|
|
73
|
-
const pauseAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(true));
|
|
74
|
-
const resumeAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(false));
|
|
75
|
-
return { pauseAutoSlide, resumeAutoSlide };
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
// src/components/ui/carousel/carousel.tsx
|
|
79
|
-
function CarouselContent(props) {
|
|
80
|
-
const {
|
|
81
|
-
as: HtmlElement = "article",
|
|
82
|
-
autoSlideInterval,
|
|
83
|
-
children,
|
|
84
|
-
classNames,
|
|
85
|
-
hasAutoSlide,
|
|
86
|
-
shouldPauseOnHover
|
|
87
|
-
} = props;
|
|
88
|
-
const { pauseAutoSlide, resumeAutoSlide } = useCarouselOptions({
|
|
89
|
-
autoSlideInterval,
|
|
90
|
-
hasAutoSlide,
|
|
91
|
-
shouldPauseOnHover
|
|
92
|
-
});
|
|
93
|
-
return /* @__PURE__ */ React3.createElement(
|
|
94
|
-
HtmlElement,
|
|
95
|
-
{
|
|
96
|
-
"data-id": "Carousel",
|
|
97
|
-
className: cnMerge("relative select-none", classNames?.base),
|
|
98
|
-
onMouseEnter: pauseAutoSlide,
|
|
99
|
-
onMouseLeave: resumeAutoSlide
|
|
100
|
-
},
|
|
101
|
-
/* @__PURE__ */ React3.createElement(
|
|
102
|
-
"div",
|
|
103
|
-
{
|
|
104
|
-
"data-id": "Scroll Container",
|
|
105
|
-
className: cnMerge(
|
|
106
|
-
"flex size-full overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
|
|
107
|
-
classNames?.scrollContainer
|
|
108
|
-
)
|
|
109
|
-
},
|
|
110
|
-
children
|
|
111
|
-
)
|
|
112
|
-
);
|
|
113
|
-
}
|
|
114
|
-
function CarouselButton(props) {
|
|
115
|
-
const { classNames, icon, variant } = props;
|
|
116
|
-
const { goToNextSlide, goToPreviousSlide } = useCarouselStoreContext((state) => state.actions);
|
|
117
|
-
return /* @__PURE__ */ React3.createElement(
|
|
118
|
-
"button",
|
|
119
|
-
{
|
|
120
|
-
type: "button",
|
|
121
|
-
className: cnMerge(
|
|
122
|
-
"z-30 flex h-full w-[15%] items-center",
|
|
123
|
-
variant === "prev" ? "justify-start" : "justify-end",
|
|
124
|
-
classNames?.base
|
|
125
|
-
),
|
|
126
|
-
onClick: variant === "prev" ? goToPreviousSlide : goToNextSlide
|
|
127
|
-
},
|
|
128
|
-
/* @__PURE__ */ React3.createElement("span", { className: cnMerge("transition-transform active:scale-[1.06]", classNames?.iconContainer) }, icon ?? /* @__PURE__ */ React3.createElement(
|
|
129
|
-
ChevronLeftIcon,
|
|
130
|
-
{
|
|
131
|
-
className: cnMerge(variant === "next" && "rotate-180", classNames?.defaultIcon)
|
|
132
|
-
}
|
|
133
|
-
))
|
|
134
|
-
);
|
|
135
|
-
}
|
|
136
|
-
function CarouselControls(props) {
|
|
137
|
-
const { classNames, icon } = props;
|
|
138
|
-
return /* @__PURE__ */ React3.createElement("div", { className: cnMerge("absolute inset-0 flex justify-between", classNames?.base) }, icon?.iconType ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
|
|
139
|
-
CarouselButton,
|
|
140
|
-
{
|
|
141
|
-
variant: "prev",
|
|
142
|
-
classNames: {
|
|
143
|
-
defaultIcon: classNames?.defaultIcon,
|
|
144
|
-
iconContainer: cnMerge(
|
|
145
|
-
icon.iconType === "nextIcon" && "rotate-180",
|
|
146
|
-
classNames?.iconContainer
|
|
147
|
-
)
|
|
148
|
-
},
|
|
149
|
-
icon: icon.icon
|
|
150
|
-
}
|
|
151
|
-
), /* @__PURE__ */ React3.createElement(
|
|
152
|
-
CarouselButton,
|
|
153
|
-
{
|
|
154
|
-
variant: "next",
|
|
155
|
-
classNames: {
|
|
156
|
-
defaultIcon: classNames?.defaultIcon,
|
|
157
|
-
iconContainer: cnMerge(
|
|
158
|
-
icon.iconType === "prevIcon" && "rotate-180",
|
|
159
|
-
classNames?.iconContainer
|
|
160
|
-
)
|
|
161
|
-
},
|
|
162
|
-
icon: icon.icon
|
|
163
|
-
}
|
|
164
|
-
)) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
|
|
165
|
-
CarouselButton,
|
|
166
|
-
{
|
|
167
|
-
variant: "prev",
|
|
168
|
-
classNames: {
|
|
169
|
-
defaultIcon: classNames?.defaultIcon,
|
|
170
|
-
iconContainer: classNames?.iconContainer
|
|
171
|
-
},
|
|
172
|
-
icon: icon?.prev
|
|
173
|
-
}
|
|
174
|
-
), /* @__PURE__ */ React3.createElement(
|
|
175
|
-
CarouselButton,
|
|
176
|
-
{
|
|
177
|
-
variant: "next",
|
|
178
|
-
classNames: {
|
|
179
|
-
defaultIcon: classNames?.defaultIcon,
|
|
180
|
-
iconContainer: classNames?.iconContainer
|
|
181
|
-
},
|
|
182
|
-
icon: icon?.next
|
|
183
|
-
}
|
|
184
|
-
)));
|
|
185
|
-
}
|
|
186
|
-
function CarouselItemGroup(props) {
|
|
187
|
-
const { children, className, each, render } = props;
|
|
188
|
-
const [ItemList] = getElementList("base");
|
|
189
|
-
const currentSlide = useCarouselStoreContext((state) => state.currentSlide);
|
|
190
|
-
const images = useCarouselStoreContext((state) => each ?? state.images);
|
|
191
|
-
return /* @__PURE__ */ React3.createElement(
|
|
192
|
-
"ul",
|
|
193
|
-
{
|
|
194
|
-
"data-id": "Carousel Image Wrapper",
|
|
195
|
-
className: cnMerge(
|
|
196
|
-
`flex w-full shrink-0 [transform:translate3d(var(--translate-distance),0,0)] snap-center
|
|
197
|
-
[transition:transform_800ms_ease]`,
|
|
198
|
-
className
|
|
199
|
-
),
|
|
200
|
-
style: {
|
|
201
|
-
"--translate-distance": `-${currentSlide * 100}%`
|
|
202
|
-
}
|
|
203
|
-
},
|
|
204
|
-
typeof render === "function" ? /* @__PURE__ */ React3.createElement(ItemList, { each: images, render }) : /* @__PURE__ */ React3.createElement(ItemList, { each: images }, children)
|
|
205
|
-
);
|
|
206
|
-
}
|
|
207
|
-
function CarouselItem({ children, className, ...restOfProps }) {
|
|
208
|
-
return /* @__PURE__ */ React3.createElement(
|
|
209
|
-
"li",
|
|
210
|
-
{
|
|
211
|
-
className: cnMerge("flex w-full shrink-0 snap-center justify-center", className),
|
|
212
|
-
...restOfProps
|
|
213
|
-
},
|
|
214
|
-
children
|
|
215
|
-
);
|
|
216
|
-
}
|
|
217
|
-
function CarouselCaption(props) {
|
|
218
|
-
const { as: HtmlElement = "div", children, className } = props;
|
|
219
|
-
return /* @__PURE__ */ React3.createElement(HtmlElement, { "data-id": "Carousel Caption", className: cnMerge("absolute z-10", className) }, children);
|
|
220
|
-
}
|
|
221
|
-
function CarouselIndicatorGroup(props) {
|
|
222
|
-
const { children, className, each, render } = props;
|
|
223
|
-
const images = useCarouselStoreContext((state) => each ?? state.images);
|
|
224
|
-
const [IndicatorList] = getElementList("base");
|
|
225
|
-
return /* @__PURE__ */ React3.createElement(
|
|
226
|
-
"ul",
|
|
227
|
-
{
|
|
228
|
-
"data-id": "Carousel Indicators",
|
|
229
|
-
className: cnMerge(
|
|
230
|
-
"absolute bottom-10 z-[2] flex w-full items-center justify-center gap-6",
|
|
231
|
-
className
|
|
232
|
-
)
|
|
233
|
-
},
|
|
234
|
-
typeof render === "function" ? /* @__PURE__ */ React3.createElement(IndicatorList, { each: images, render }) : /* @__PURE__ */ React3.createElement(IndicatorList, { each: images }, children)
|
|
235
|
-
);
|
|
236
|
-
}
|
|
237
|
-
function CarouselIndicator(props) {
|
|
238
|
-
const { classNames, currentIndex } = props;
|
|
239
|
-
const {
|
|
240
|
-
actions: { goToSlide },
|
|
241
|
-
currentSlide
|
|
242
|
-
} = useCarouselStoreContext((state) => state);
|
|
243
|
-
return /* @__PURE__ */ React3.createElement("li", { className: cnMerge("inline-flex", classNames?.base) }, /* @__PURE__ */ React3.createElement(
|
|
244
|
-
"button",
|
|
245
|
-
{
|
|
246
|
-
"data-active": currentIndex === currentSlide,
|
|
247
|
-
type: "button",
|
|
248
|
-
onClick: () => goToSlide(currentIndex),
|
|
249
|
-
className: cnMerge(
|
|
250
|
-
"size-[6px] rounded-[50%]",
|
|
251
|
-
classNames?.button,
|
|
252
|
-
currentIndex === currentSlide && ["w-14 rounded-lg", classNames?.activeBtn]
|
|
253
|
-
)
|
|
254
|
-
}
|
|
255
|
-
));
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
// src/components/ui/carousel/carousel-parts.ts
|
|
259
|
-
var carousel_parts_exports = {};
|
|
260
|
-
__export(carousel_parts_exports, {
|
|
261
|
-
Button: () => CarouselButton,
|
|
262
|
-
Caption: () => CarouselCaption,
|
|
263
|
-
Content: () => CarouselContent,
|
|
264
|
-
Controls: () => CarouselControls,
|
|
265
|
-
Indicator: () => CarouselIndicator,
|
|
266
|
-
IndicatorWrapper: () => CarouselIndicatorGroup,
|
|
267
|
-
Item: () => CarouselItem,
|
|
268
|
-
ItemWrapper: () => CarouselItemGroup,
|
|
269
|
-
Root: () => CarouselContextProvider
|
|
270
|
-
});
|
|
271
|
-
|
|
272
|
-
export { CarouselButton, CarouselCaption, CarouselContent, CarouselControls, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, carousel_parts_exports };
|
|
273
|
-
//# sourceMappingURL=chunk-GVL6BLX5.js.map
|
|
274
|
-
//# sourceMappingURL=chunk-GVL6BLX5.js.map
|