@zayne-labs/ui-react 0.10.4 → 0.10.6

package/css/animation.css

@@ -1,6 +1,14 @@
+@import "tw-animate-css";
+
 @theme {
 	--animate-shake: shake 0.2s ease-in-out 0s 3;
 
+	--animate-fade-up: fade-up 0.5s ease-out;
+
+	--animate-fade-down: fade-down 0.5s ease-out;
+
+	--animate-files-in: files-in 0.3s ease-out forwards;
+
 	@keyframes shake {
 		0%,
 		100% {
@@ -13,4 +21,43 @@
 			transform: translateX(-6px);
 		}
 	}
+
+	@keyframes fade-up {
+		0% {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+		80% {
+			opacity: 0.6;
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0px);
+		}
+	}
+
+	@keyframes fade-down {
+		0% {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		80% {
+			opacity: 0.6;
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0px);
+		}
+	}
+
+	@keyframes files-in {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 }

package/css/theme.css

@@ -1,9 +1,15 @@
 @theme {
-	--color-shadcn-muted-foreground: oklch(0.556 0 0);
-	--color-shadcn-destructive: oklch(0.577 0.245 27.325);
+	--color-zu-accent: oklch(0.967 0.001 286.375);
+	--color-zu-destructive: oklch(0.577 0.245 27.325);
+	--color-zu-muted-foreground: oklch(0.556 0 0);
+	--color-zu-primary: oklch(0.21 0.04 265.75);
+	--color-zu-ring: oklch(0.705 0.015 286.067);
 }
 
 :where(.dark, [data-theme="dark"]) {
-	--color-shadcn-muted-foreground: oklch(0.708 0 0);
-	--color-shadcn-destructive: oklch(0.704 0.191 22.216);
+	--color-zu-accent: oklch(0.274 0.006 286.033);
+	--color-zu-muted-foreground: oklch(0.708 0 0);
+	--color-zu-destructive: oklch(0.704 0.191 22.216);
+	--color-zu-primary: oklch(0.92 0.004 286.32);
+	--color-zu-ring: oklch(0.552 0.016 285.938);
 }

package/dist/esm/{await-fjas2Q-C.js → await-Da5w2vIc.js}

@@ -1,7 +1,7 @@
-import { __export } from "./chunk-Cl8Af3a2.js";
-import { getSlotMap, withSlotNameAndSymbol } from "./utils-ChjmDoRe.js";
-import { ErrorBoundary, useErrorBoundaryContext } from "./error-boundary-xM9An3gz.js";
-import { SlotRoot } from "./slot-D1062oA5.js";
+import { __export } from "./chunk-CTAAG5j7.js";
+import { ErrorBoundary, useErrorBoundaryContext } from "./error-boundary-y9Samt_s.js";
+import { SlotRoot } from "./slot-WVWfOlr3.js";
+import { getSlotMap, withSlotNameAndSymbol } from "@zayne-labs/toolkit-react/utils";
 import { isFunction } from "@zayne-labs/toolkit-type-helpers";
 import { Fragment, Suspense, use, useMemo } from "react";
 import { createCustomContext } from "@zayne-labs/toolkit-react";
@@ -53,15 +53,13 @@ function AwaitRootInner(props) {
 	});
 }
 function AwaitSuccess(props) {
-	if (isFunction(props.children)) {
-		const { result } = useAwaitContext();
-		return props.children(result);
-	}
-	return props.children;
+	const { children } = props;
+	if (!isFunction(children)) return children;
+	const { result } = useAwaitContext();
+	return children(result);
 }
 Object.assign(AwaitSuccess, withSlotNameAndSymbol("default"));
-const AwaitPending = withSlotNameAndSymbol("pending");
-const AwaitError = withSlotNameAndSymbol("error", (props) => {
+function AwaitError(props) {
 	const { asChild, children } = props;
 	const errorBoundaryContext = useErrorBoundaryContext();
 	const Component$1 = asChild ? SlotRoot : Fragment;
@@ -70,12 +68,13 @@ const AwaitError = withSlotNameAndSymbol("error", (props) => {
 		...asChild && errorBoundaryContext,
 		children: resolvedChildren
 	});
-});
+}
+Object.assign(AwaitError, withSlotNameAndSymbol("error"));
+const AwaitPending = withSlotNameAndSymbol("pending");
 
 //#endregion
 //#region src/components/common/await/await-parts.ts
-var await_parts_exports = {};
-__export(await_parts_exports, {
+var await_parts_exports = __export({
 	Error: () => AwaitError,
 	Pending: () => AwaitPending,
 	Root: () => AwaitRoot,
@@ -84,4 +83,4 @@ __export(await_parts_exports, {
 
 //#endregion
 export { AwaitError, AwaitPending, AwaitRoot, AwaitSuccess, await_parts_exports, useAwaitContext };
-//# sourceMappingURL=await-fjas2Q-C.js.map
+//# sourceMappingURL=await-Da5w2vIc.js.map

package/dist/esm/await-Da5w2vIc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"await-Da5w2vIc.js","names":["ReactFragment","Component","Slot.Root"],"sources":["../../src/components/common/await/await-context.ts","../../src/components/common/await/await.tsx","../../src/components/common/await/await-parts.ts"],"sourcesContent":["import { createCustomContext } from \"@zayne-labs/toolkit-react\";\n\nexport type AwaitContextType<TValue = unknown> = {\n\tpromise: Promise<TValue>;\n\tresult: TValue;\n};\n\nconst [AwaitContextProvider, useAwaitContextImpl] = createCustomContext<AwaitContextType>({\n\thookName: \"useAwaitContext\",\n\tname: \"AwaitContext\",\n\tproviderName: \"AwaitInner\",\n});\n\nconst useAwaitContext = <TValue>() => useAwaitContextImpl() as AwaitContextType<TValue>;\n\nexport { useAwaitContext, AwaitContextProvider };\n","\"use client\";\n\nimport {\n\ttype GetSlotComponentProps,\n\tgetSlotMap,\n\twithSlotNameAndSymbol,\n} from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\nimport { Fragment as ReactFragment, Suspense, use, useMemo } from \"react\";\nimport { ErrorBoundary, type ErrorBoundaryProps, useErrorBoundaryContext } from \"../error-boundary\";\nimport { Slot } from \"../slot\";\nimport type { SuspenseWithBoundaryProps } from \"../suspense-with-boundary\";\nimport { AwaitContextProvider, useAwaitContext } from \"./await-context\";\n\ntype RenderPropFn<TValue> = (result: TValue) => React.ReactNode;\n\ntype ChildrenType<TValue> = React.ReactNode | RenderPropFn<TValue>;\n\ntype AwaitRootProps<TValue> = Pick<SuspenseWithBoundaryProps, \"errorFallback\" | \"fallback\"> & {\n\tasChild?: boolean;\n\tchildren: ChildrenType<TValue>;\n\tpromise: Promise<TValue>;\n\twithErrorBoundary?: boolean;\n\twithSuspense?: boolean;\n};\n\nexport function AwaitRoot<TValue>(props: AwaitRootProps<TValue>) {\n\tconst {\n\t\tchildren,\n\t\terrorFallback,\n\t\tfallback,\n\t\twithErrorBoundary = true,\n\t\twithSuspense = true,\n\t\t...restOfProps\n\t} = props;\n\n\tconst WithErrorBoundary = withErrorBoundary ? ErrorBoundary : ReactFragment;\n\tconst WithSuspense = withSuspense ? Suspense : ReactFragment;\n\n\tconst slots =\n\t\t!isFunction(children) ?\n\t\t\tgetSlotMap<SlotComponentProps>(children)\n\t\t:\t({ default: children } as unknown as ReturnType<typeof getSlotMap<SlotComponentProps>>);\n\n\tconst selectedPendingFallback = slots.pending ?? fallback;\n\tconst selectedErrorFallback = slots.error ?? errorFallback;\n\n\treturn (\n\t\t<WithErrorBoundary {...(Boolean(selectedErrorFallback) && { fallback: selectedErrorFallback })}>\n\t\t\t<WithSuspense {...(Boolean(selectedPendingFallback) && { fallback: selectedPendingFallback })}>\n\t\t\t\t<AwaitRootInner {...restOfProps}>{slots.default}</AwaitRootInner>\n\t\t\t</WithSuspense>\n\t\t</WithErrorBoundary>\n\t);\n}\n\ntype AwaitRootInnerProps<TValue> = Pick<AwaitRootProps<TValue>, \"asChild\" | \"children\" | \"promise\">;\n\nfunction AwaitRootInner<TValue>(props: AwaitRootInnerProps<TValue>) {\n\tconst { asChild, children, promise } = props;\n\n\tconst result = use(promise);\n\n\tconst resolvedChildren = isFunction(children) ? children(result) : children;\n\n\tconst Component = asChild ? Slot.Root : ReactFragment;\n\n\tconst contextValue = useMemo(() => ({ promise, result }), [promise, result]);\n\n\treturn (\n\t\t<AwaitContextProvider value={contextValue}>\n\t\t\t<Component {...(asChild && contextValue)}>{resolvedChildren}</Component>\n\t\t</AwaitContextProvider>\n\t);\n}\n\ntype SlotComponentProps = AwaitErrorProps | AwaitPendingProps | AwaitSuccessProps;\n\ntype AwaitSuccessProps<TValue = unknown> = GetSlotComponentProps<\"default\", ChildrenType<TValue>>;\n\nexport function AwaitSuccess<TPromiseOrValue, TValue = Awaited<TPromiseOrValue>>(\n\tprops: Pick<AwaitSuccessProps<TValue>, \"children\">\n) {\n\tconst { children } = props;\n\n\tif (!isFunction(children)) {\n\t\treturn children;\n\t}\n\n\t// eslint-disable-next-line react-hooks/rules-of-hooks -- This hook only uses `use` under the hood so this is safe\n\tconst { result } = useAwaitContext<TValue>();\n\n\treturn children(result);\n}\n\nObject.assign(AwaitSuccess, withSlotNameAndSymbol<AwaitSuccessProps>(\"default\"));\n\ntype AwaitErrorProps = GetSlotComponentProps<\"error\", ErrorBoundaryProps[\"fallback\"]>;\n\nexport function AwaitError(props: AwaitErrorProps & { asChild?: boolean }) {\n\tconst { asChild, children } = props;\n\n\tconst errorBoundaryContext = useErrorBoundaryContext();\n\n\tconst Component = asChild ? Slot.Root : ReactFragment;\n\n\tconst resolvedChildren = isFunction(children) ? children(errorBoundaryContext) : children;\n\n\treturn <Component {...(asChild && errorBoundaryContext)}>{resolvedChildren}</Component>;\n}\n\nObject.assign(AwaitError, withSlotNameAndSymbol<AwaitErrorProps>(\"error\"));\n\ntype AwaitPendingProps = GetSlotComponentProps<\"pending\", React.SuspenseProps[\"fallback\"]>;\n\nexport const AwaitPending = withSlotNameAndSymbol<AwaitPendingProps>(\"pending\");\n","export {\n\tAwaitRoot as Root,\n\tAwaitError as Error,\n\tAwaitPending as Pending,\n\tAwaitSuccess as Success,\n} from \"./await\";\n"],"mappings":";;;;;;;;;;AAOA,MAAM,CAAC,sBAAsB,uBAAuB,oBAAsC;CACzF,UAAU;CACV,MAAM;CACN,cAAc;CACd,CAAC;AAEF,MAAM,wBAAgC,qBAAqB;;;;ACc3D,SAAgB,UAAkB,OAA+B;CAChE,MAAM,EACL,UACA,eACA,UACA,oBAAoB,MACpB,eAAe,KACf,GAAG,gBACA;CAEJ,MAAM,oBAAoB,oBAAoB,gBAAgBA;CAC9D,MAAM,eAAe,eAAe,WAAWA;CAE/C,MAAM,QACL,CAAC,WAAW,SAAS,GACpB,WAA+B,SAAS,GACtC,EAAE,SAAS,UAAU;CAEzB,MAAM,0BAA0B,MAAM,WAAW;CACjD,MAAM,wBAAwB,MAAM,SAAS;AAE7C,QACC,oBAAC;EAAkB,GAAK,QAAQ,sBAAsB,IAAI,EAAE,UAAU,uBAAuB;YAC5F,oBAAC;GAAa,GAAK,QAAQ,wBAAwB,IAAI,EAAE,UAAU,yBAAyB;aAC3F,oBAAC;IAAe,GAAI;cAAc,MAAM;KAAyB;IACnD;GACI;;AAMtB,SAAS,eAAuB,OAAoC;CACnE,MAAM,EAAE,SAAS,UAAU,YAAY;CAEvC,MAAM,SAAS,IAAI,QAAQ;CAE3B,MAAM,mBAAmB,WAAW,SAAS,GAAG,SAAS,OAAO,GAAG;CAEnE,MAAMC,cAAY,UAAUC,WAAYF;CAExC,MAAM,eAAe,eAAe;EAAE;EAAS;EAAQ,GAAG,CAAC,SAAS,OAAO,CAAC;AAE5E,QACC,oBAAC;EAAqB,OAAO;YAC5B,oBAACC;GAAU,GAAK,WAAW;aAAgB;IAA6B;GAClD;;AAQzB,SAAgB,aACf,OACC;CACD,MAAM,EAAE,aAAa;AAErB,KAAI,CAAC,WAAW,SAAS,CACxB,QAAO;CAIR,MAAM,EAAE,WAAW,iBAAyB;AAE5C,QAAO,SAAS,OAAO;;AAGxB,OAAO,OAAO,cAAc,sBAAyC,UAAU,CAAC;AAIhF,SAAgB,WAAW,OAAgD;CAC1E,MAAM,EAAE,SAAS,aAAa;CAE9B,MAAM,uBAAuB,yBAAyB;CAEtD,MAAMA,cAAY,UAAUC,WAAYF;CAExC,MAAM,mBAAmB,WAAW,SAAS,GAAG,SAAS,qBAAqB,GAAG;AAEjF,QAAO,oBAACC;EAAU,GAAK,WAAW;YAAwB;GAA6B;;AAGxF,OAAO,OAAO,YAAY,sBAAuC,QAAQ,CAAC;AAI1E,MAAa,eAAe,sBAAyC,UAAU"}

package/dist/esm/{card-TD60Xux0.js → card-gWNDcZV0.js}

@@ -1,6 +1,6 @@
-import { __export } from "./chunk-Cl8Af3a2.js";
-import { SlotRoot } from "./slot-D1062oA5.js";
-import { cnMerge } from "./cn-_FbtIrlZ.js";
+import { __export } from "./chunk-CTAAG5j7.js";
+import { SlotRoot } from "./slot-WVWfOlr3.js";
+import { cnMerge } from "./cn-s-D7vHW1.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 
@@ -21,7 +21,7 @@ function CardHeader(props) {
 		"data-scope": "card",
 		"data-part": "header",
 		"data-slot": "card-header",
-		className: "@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] grid\n				auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
+		className: "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5\n				px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
 		...restOfProps
 	});
 }
@@ -31,7 +31,7 @@ function CardTitle(props) {
 		"data-scope": "card",
 		"data-part": "title",
 		"data-slot": "card-title",
-		className: cnMerge("font-semibold leading-none", className),
+		className: cnMerge("leading-none font-semibold", className),
 		...restOfProps
 	});
 }
@@ -41,7 +41,7 @@ function CardDescription(props) {
 		"data-scope": "card",
 		"data-part": "description",
 		"data-slot": "card-description",
-		className: cnMerge("text-shadcn-muted-foreground text-sm", className),
+		className: cnMerge("text-sm text-zu-muted-foreground", className),
 		...restOfProps
 	});
 }
@@ -79,8 +79,7 @@ function CardFooter(props) {
 
 //#endregion
 //#region src/components/ui/card/card-parts.ts
-var card_parts_exports = {};
-__export(card_parts_exports, {
+var card_parts_exports = __export({
 	Action: () => CardAction,
 	Content: () => CardContent,
 	Description: () => CardDescription,
@@ -92,4 +91,4 @@ __export(card_parts_exports, {
 
 //#endregion
 export { CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle, card_parts_exports };
-//# sourceMappingURL=card-TD60Xux0.js.map
+//# sourceMappingURL=card-gWNDcZV0.js.map

package/dist/esm/card-gWNDcZV0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-gWNDcZV0.js","names":["Component","Slot.Root"],"sources":["../../src/components/ui/card/card.tsx","../../src/components/ui/card/card-parts.ts"],"sourcesContent":["import type { PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\nimport * as React from \"react\";\nimport { Slot } from \"@/components/common/slot\";\nimport { cnMerge } from \"@/lib/utils/cn\";\n\nexport function CardRoot<TElement extends React.ElementType = \"article\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"article\", ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"root\"\n\t\t\tdata-slot=\"card-root\"\n\t\t\tclassName=\"flex flex-col gap-6 rounded-xl border py-6 shadow-sm\"\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardHeader<TElement extends React.ElementType = \"header\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"header\", ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"header\"\n\t\t\tdata-slot=\"card-header\"\n\t\t\tclassName=\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5\n\t\t\t\tpx-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]\"\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardTitle<TElement extends React.ElementType = \"h3\">(props: PolymorphicProps<TElement>) {\n\tconst { as: Element = \"h3\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"title\"\n\t\t\tdata-slot=\"card-title\"\n\t\t\tclassName={cnMerge(\"leading-none font-semibold\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardDescription<TElement extends React.ElementType = \"p\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"p\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"description\"\n\t\t\tdata-slot=\"card-description\"\n\t\t\tclassName={cnMerge(\"text-sm text-zu-muted-foreground\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardContent<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"div\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"content\"\n\t\t\tdata-slot=\"card-content\"\n\t\t\tclassName={cnMerge(\"px-6\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardAction<TElement extends React.ElementType = \"div\">(props: PolymorphicProps<TElement>) {\n\tconst { as: Element = \"div\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"action\"\n\t\t\tdata-slot=\"card-action\"\n\t\t\tclassName={cnMerge(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardFooter<TElement extends React.ElementType = \"footer\">(\n\tprops: PolymorphicProps<TElement, { asChild?: boolean }>\n) {\n\tconst { as: Element = \"footer\", asChild, className, ...restOfProps } = props;\n\n\tconst Component = asChild ? Slot.Root : Element;\n\n\treturn (\n\t\t<Component\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"footer\"\n\t\t\tdata-slot=\"card-footer\"\n\t\t\tclassName={cnMerge(\"px-6\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n","export {\n\tCardContent as Content,\n\tCardDescription as Description,\n\tCardFooter as Footer,\n\tCardHeader as Header,\n\tCardAction as Action,\n\tCardRoot as Root,\n\tCardTitle as Title,\n} from \"./card\";\n"],"mappings":";;;;;;;AAKA,SAAgB,SACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,UAAW,GAAG,gBAAgB;AAEpD,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAU;EACV,GAAI;GACH;;AAIJ,SAAgB,WACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,SAAU,GAAG,gBAAgB;AAEnD,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAU;EAEV,GAAI;GACH;;AAIJ,SAAgB,UAAqD,OAAmC;CACvG,MAAM,EAAE,IAAI,UAAU,MAAM,UAAW,GAAG,gBAAgB;AAE1D,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,8BAA8B,UAAU;EAC3D,GAAI;GACH;;AAIJ,SAAgB,gBACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,KAAK,UAAW,GAAG,gBAAgB;AAEzD,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,oCAAoC,UAAU;EACjE,GAAI;GACH;;AAIJ,SAAgB,YACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,OAAO,UAAW,GAAG,gBAAgB;AAE3D,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,QAAQ,UAAU;EACrC,GAAI;GACH;;AAIJ,SAAgB,WAAuD,OAAmC;CACzG,MAAM,EAAE,IAAI,UAAU,OAAO,UAAW,GAAG,gBAAgB;AAE3D,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,kEAAkE,UAAU;EAC/F,GAAI;GACH;;AAIJ,SAAgB,WACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,UAAU,SAAS,UAAW,GAAG,gBAAgB;CAEvE,MAAMA,cAAY,UAAUC,WAAY;AAExC,QACC,oBAACD;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,QAAQ,UAAU;EACrC,GAAI;GACH"}

package/dist/esm/{carousel-YXXtZ85s.js → carousel-BY9RvR71.js}

@@ -1,12 +1,12 @@
-import { __export } from "./chunk-Cl8Af3a2.js";
-import { For } from "./for-DGs2XZ21.js";
-import { ShowContent, ShowFallback, ShowRoot } from "./show-BabiXbf7.js";
-import { cnMerge } from "./cn-_FbtIrlZ.js";
+import { __export } from "./chunk-CTAAG5j7.js";
+import { For } from "./for-Dfh7e9Z4.js";
+import { ShowContent, ShowFallback, ShowRoot } from "./show-N1ZXBhoA.js";
+import { cnMerge } from "./cn-s-D7vHW1.js";
 import { isFunction } from "@zayne-labs/toolkit-type-helpers";
 import { useMemo, useState } from "react";
-import { createStore } from "@zayne-labs/toolkit-core";
 import { useAnimationInterval, useCallbackRef, useStore } from "@zayne-labs/toolkit-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createStore } from "@zayne-labs/toolkit-core";
 import { createZustandContext } from "@zayne-labs/toolkit-react/zustand";
 
 //#region src/components/ui/carousel/carousel-store-context.ts
@@ -17,7 +17,7 @@ const [CarouselStoreContextProvider, useCarouselStoreContext] = createZustandCon
 });
 const createCarouselStore = (storeValues) => {
 	const { images, onSlideBtnClick } = storeValues;
-	const carouselStore = createStore((set, get) => ({
+	return createStore((set, get) => ({
 		currentSlide: 0,
 		images,
 		maxSlide: images.length - 1,
@@ -46,7 +46,6 @@ const createCarouselStore = (storeValues) => {
 			}
 		}
 	}));
-	return carouselStore;
 };
 const useCarousel = (props) => {
 	const { images, onSlideBtnClick } = props;
@@ -92,9 +91,8 @@ const ChevronLeftIcon = (props) => /* @__PURE__ */ jsx("svg", {
 const useCarouselOptions = (options) => {
 	const { actions, autoSlideInterval = 5e3, hasAutoSlide = false, shouldPauseOnHover = false } = options;
 	const [isPaused, setIsPaused] = useState(false);
-	const shouldAutoSlide = hasAutoSlide && !isPaused;
 	useAnimationInterval({
-		intervalDuration: shouldAutoSlide ? autoSlideInterval : null,
+		intervalDuration: hasAutoSlide && !isPaused ? autoSlideInterval : null,
 		onAnimation: actions.goToNextSlide
 	});
 	const pauseAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(true));
@@ -193,16 +191,16 @@ function CarouselControls(props) {
 		})
 	});
 }
-function CarouselItemGroup(props) {
+function CarouselItemList(props) {
 	const { children, className, each } = props;
 	const currentSlide = useCarouselStoreContext((state) => state.currentSlide);
 	const images = useCarouselStoreContext((state) => each ?? state.images);
 	return /* @__PURE__ */ jsx("ul", {
 		"data-scope": "carousel",
-		"data-part": "item-group",
-		"data-slot": "carousel-item-group",
-		className: cnMerge(`duration-800 transform-[translate3d(var(--translate-distance),0,0)] flex w-full shrink-0
-				snap-center transition-transform`, className),
+		"data-part": "item-list",
+		"data-slot": "carousel-item-list",
+		className: cnMerge(`flex w-full shrink-0 transform-[translate3d(var(--translate-distance),0,0)] snap-center
+				transition-transform duration-800`, className),
 		style: { "--translate-distance": `-${currentSlide * 100}%` },
 		children: isFunction(children) ? /* @__PURE__ */ jsx(For, {
 			each: images,
@@ -235,13 +233,13 @@ function CarouselCaption(props) {
 		children
 	});
 }
-function CarouselIndicatorGroup(props) {
+function CarouselIndicatorList(props) {
 	const { children, className, each } = props;
 	const images = useCarouselStoreContext((state) => each ?? state.images);
 	return /* @__PURE__ */ jsx("ul", {
 		"data-scope": "carousel",
-		"data-part": "indicator-group",
-		"data-slot": "carousel-indicator-group",
+		"data-part": "indicator-list",
+		"data-slot": "carousel-indicator-list",
 		className: cnMerge("absolute bottom-[25px] z-[2] flex w-full items-center justify-center gap-[15px]", className),
 		children: isFunction(children) ? /* @__PURE__ */ jsx(For, {
 			each: images,
@@ -271,18 +269,17 @@ function CarouselIndicator(props) {
 
 //#endregion
 //#region src/components/ui/carousel/carousel-parts.ts
-var carousel_parts_exports = {};
-__export(carousel_parts_exports, {
+var carousel_parts_exports = __export({
 	Button: () => CarouselButton,
 	Caption: () => CarouselCaption,
 	Controls: () => CarouselControls,
 	Indicator: () => CarouselIndicator,
-	IndicatorGroup: () => CarouselIndicatorGroup,
+	IndicatorGroup: () => CarouselIndicatorList,
 	Item: () => CarouselItem,
-	ItemGroup: () => CarouselItemGroup,
+	ItemGroup: () => CarouselItemList,
 	Root: () => CarouselRoot
 });
 
 //#endregion
-export { CarouselButton, CarouselCaption, CarouselControls, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselRoot, carousel_parts_exports };
-//# sourceMappingURL=carousel-YXXtZ85s.js.map
+export { CarouselButton, CarouselCaption, CarouselControls, CarouselIndicator, CarouselIndicatorList, CarouselItem, CarouselItemList, CarouselRoot, carousel_parts_exports };
+//# sourceMappingURL=carousel-BY9RvR71.js.map

package/dist/esm/carousel-BY9RvR71.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-BY9RvR71.js","names":["useCarouselStore: typeof useCarouselStoreContext","Show.Root","Show.Content","Show.Fallback"],"sources":["../../src/components/ui/carousel/carousel-store-context.ts","../../src/components/ui/carousel/icons.tsx","../../src/components/ui/carousel/useCarouselOptions.ts","../../src/components/ui/carousel/carousel.tsx","../../src/components/ui/carousel/carousel-parts.ts"],"sourcesContent":["import { createStore } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useStore } from \"@zayne-labs/toolkit-react\";\nimport { createZustandContext } from \"@zayne-labs/toolkit-react/zustand\";\nimport type { PrettyOmit } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useMemo } from \"react\";\nimport type { CarouselRootProps, CarouselStore, ImagesType } from \"./types\";\n\nconst [CarouselStoreContextProvider, useCarouselStoreContext] = createZustandContext<CarouselStore>({\n\thookName: \"useCarouselStore\",\n\tname: \"CarouselStoreContext\",\n\tproviderName: \"CarouselRoot\",\n});\n\n// CarouselStore Creation\nconst createCarouselStore = <TImages extends ImagesType>(\n\tstoreValues: PrettyOmit<CarouselRootProps<TImages>, \"children\">\n) => {\n\tconst { images, onSlideBtnClick } = storeValues;\n\n\tconst carouselStore = createStore<CarouselStore<TImages>>((set, get) => ({\n\t\tcurrentSlide: 0,\n\t\timages,\n\t\tmaxSlide: images.length - 1,\n\n\t\t/* eslint-disable perfectionist/sort-objects -- actions should be last */\n\t\tactions: {\n\t\t\t/* eslint-enable perfectionist/sort-objects -- actions should be last */\n\n\t\t\tgoToNextSlide: () => {\n\t\t\t\tconst { currentSlide, maxSlide } = get();\n\t\t\t\tconst { goToSlide } = get().actions;\n\n\t\t\t\tif (currentSlide === maxSlide) {\n\t\t\t\t\tgoToSlide(0);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgoToSlide(currentSlide + 1);\n\t\t\t},\n\n\t\t\tgoToPreviousSlide: () => {\n\t\t\t\tconst { currentSlide, maxSlide } = get();\n\t\t\t\tconst { goToSlide } = get().actions;\n\n\t\t\t\tif (currentSlide === 0) {\n\t\t\t\t\tgoToSlide(maxSlide);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgoToSlide(currentSlide - 1);\n\t\t\t},\n\n\t\t\tgoToSlide: (newValue) => {\n\t\t\t\tonSlideBtnClick?.();\n\n\t\t\t\tset({ currentSlide: newValue });\n\t\t\t},\n\t\t},\n\t}));\n\n\treturn carouselStore;\n};\n\nconst useCarousel = <TImages extends ImagesType>(props: Omit<CarouselRootProps<TImages>, \"children\">) => {\n\tconst { images, onSlideBtnClick } = props;\n\n\tconst savedOnSlideBtnClick = useCallbackRef(onSlideBtnClick);\n\n\tconst carouselStore = useMemo(\n\t\t() => createCarouselStore({ images, onSlideBtnClick: savedOnSlideBtnClick }),\n\t\t[images, savedOnSlideBtnClick]\n\t);\n\n\tconst useCarouselStore: typeof useCarouselStoreContext = (selector) => {\n\t\treturn useStore(carouselStore, selector);\n\t};\n\n\tconst savedUseCarouselStore = useCallbackRef(useCarouselStore);\n\n\treturn useMemo(\n\t\t() => ({ carouselStore, useCarouselStore: savedUseCarouselStore }),\n\t\t[carouselStore, savedUseCarouselStore]\n\t);\n};\n\nexport { CarouselStoreContextProvider, useCarousel, useCarouselStoreContext };\n","import * as React from \"react\";\n\nexport const ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" {...props}>\n\t\t<g fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\">\n\t\t\t<circle cx=\"12\" cy=\"12\" r=\"10\" />\n\t\t\t<path d=\"m14 16l-4-4l4-4\" />\n\t\t</g>\n\t</svg>\n);\n","import { useAnimationInterval, useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { useState } from \"react\";\nimport type { CarouselStore } from \"./types\";\n\ntype CarouselOptions = {\n\tactions: CarouselStore[\"actions\"];\n\tautoSlideInterval?: number;\n\thasAutoSlide?: boolean;\n\tshouldPauseOnHover?: boolean;\n};\n\nconst useCarouselOptions = (options: CarouselOptions) => {\n\tconst { actions, autoSlideInterval = 5000, hasAutoSlide = false, shouldPauseOnHover = false } = options;\n\n\tconst [isPaused, setIsPaused] = useState(false);\n\n\tconst shouldAutoSlide = hasAutoSlide && !isPaused;\n\n\tuseAnimationInterval({\n\t\tintervalDuration: shouldAutoSlide ? autoSlideInterval : null,\n\t\tonAnimation: actions.goToNextSlide,\n\t});\n\n\tconst pauseAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(true));\n\n\tconst resumeAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(false));\n\n\treturn { pauseAutoSlide, resumeAutoSlide };\n};\n\nexport { useCarouselOptions };\n","\"use client\";\n\nimport type { CssWithCustomProperties, PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\nimport { Show } from \"@/components/common\";\nimport { For } from \"@/components/common/for\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport {\n\tCarouselStoreContextProvider,\n\tuseCarousel,\n\tuseCarouselStoreContext,\n} from \"./carousel-store-context\";\nimport { ChevronLeftIcon } from \"./icons\";\nimport type {\n\tCarouselButtonsProps,\n\tCarouselControlProps,\n\tCarouselIndicatorProps,\n\tCarouselRootProps,\n\tCarouselWrapperProps,\n\tImagesType,\n\tOtherCarouselProps,\n} from \"./types\";\nimport { useCarouselOptions } from \"./useCarouselOptions\";\n\n// TODO -  Add dragging and swiping support\nexport function CarouselRoot<TImages extends ImagesType, TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicProps<TElement, CarouselRootProps<TImages>>\n) {\n\tconst {\n\t\tas: Element = \"div\",\n\t\tautoSlideInterval,\n\t\tchildren,\n\t\tclassNames,\n\t\thasAutoSlide,\n\t\timages,\n\t\tonSlideBtnClick,\n\t\tshouldPauseOnHover,\n\t} = props;\n\n\tconst { carouselStore } = useCarousel({ images, onSlideBtnClick });\n\n\tconst actions = carouselStore.getState().actions;\n\n\tconst { pauseAutoSlide, resumeAutoSlide } = useCarouselOptions({\n\t\tactions,\n\t\tautoSlideInterval,\n\t\thasAutoSlide,\n\t\tshouldPauseOnHover,\n\t});\n\n\treturn (\n\t\t<CarouselStoreContextProvider store={carouselStore}>\n\t\t\t<Element\n\t\t\t\tdata-scope=\"carousel\"\n\t\t\t\tdata-part=\"content\"\n\t\t\t\tdata-slot=\"carousel-content\"\n\t\t\t\tclassName={cnMerge(\"relative select-none\", classNames?.base)}\n\t\t\t\tonMouseEnter={pauseAutoSlide}\n\t\t\t\tonMouseLeave={resumeAutoSlide}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\t\"flex size-full overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n\t\t\t\t\t\tclassNames?.scrollContainer\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</Element>\n\t\t</CarouselStoreContextProvider>\n\t);\n}\n\nexport function CarouselButton(props: CarouselButtonsProps) {\n\tconst { classNames, icon, variant } = props;\n\n\tconst { goToNextSlide, goToPreviousSlide } = useCarouselStoreContext((state) => state.actions);\n\n\treturn (\n\t\t<button\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"button\"\n\t\t\tdata-slot=\"carousel-button\"\n\t\t\ttype=\"button\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"z-30 flex h-full w-fit items-center\",\n\t\t\t\tvariant === \"prev\" ? \"justify-start\" : \"justify-end\",\n\t\t\t\tclassNames?.base\n\t\t\t)}\n\t\t\tonClick={variant === \"prev\" ? goToPreviousSlide : goToNextSlide}\n\t\t>\n\t\t\t<span className={cnMerge(\"transition-transform active:scale-[1.06]\", classNames?.iconContainer)}>\n\t\t\t\t{icon ?? (\n\t\t\t\t\t<ChevronLeftIcon\n\t\t\t\t\t\tclassName={cnMerge(variant === \"next\" && \"rotate-180\", classNames?.defaultIcon)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n}\n\nexport function CarouselControls(props: CarouselControlProps) {\n\tconst { classNames, icon } = props;\n\n\treturn (\n\t\t<div\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"controls\"\n\t\t\tdata-slot=\"carousel-controls\"\n\t\t\tclassName={cnMerge(\"absolute inset-0 flex justify-between\", classNames?.base)}\n\t\t>\n\t\t\t<Show.Root when={icon?.iconType}>\n\t\t\t\t<Show.Content>\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"prev\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\t\ticon?.iconType === \"nextIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"next\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\t\ticon?.iconType === \"prevIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t\t/>\n\t\t\t\t</Show.Content>\n\n\t\t\t\t<Show.Fallback>\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"prev\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: classNames?.iconContainer,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.prev}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"next\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: classNames?.iconContainer,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.next}\n\t\t\t\t\t/>\n\t\t\t\t</Show.Fallback>\n\t\t\t</Show.Root>\n\t\t</div>\n\t);\n}\n\nexport function CarouselItemList<TArrayItem>(props: CarouselWrapperProps<TArrayItem>) {\n\tconst { children, className, each } = props;\n\n\tconst currentSlide = useCarouselStoreContext((state) => state.currentSlide);\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArrayItem[]));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"item-list\"\n\t\t\tdata-slot=\"carousel-item-list\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t`flex w-full shrink-0 transform-[translate3d(var(--translate-distance),0,0)] snap-center\n\t\t\t\ttransition-transform duration-800`,\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t\"--translate-distance\": `-${currentSlide * 100}%`,\n\t\t\t\t} satisfies CssWithCustomProperties as CssWithCustomProperties\n\t\t\t}\n\t\t>\n\t\t\t{isFunction(children) ?\n\t\t\t\t<For each={images} renderItem={(image, index, array) => children({ array, image, index })} />\n\t\t\t:\tchildren}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselItem(props: OtherCarouselProps) {\n\tconst { children, className, ...restOfProps } = props;\n\n\treturn (\n\t\t<li\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"item\"\n\t\t\tdata-slot=\"carousel-item\"\n\t\t\tclassName={cnMerge(\"flex w-full shrink-0 snap-center justify-center\", className)}\n\t\t\t{...restOfProps}\n\t\t>\n\t\t\t{children}\n\t\t</li>\n\t);\n}\n\nexport function CarouselCaption<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicProps<TElement, OtherCarouselProps>\n) {\n\tconst { as: HtmlElement = \"div\", children, className } = props;\n\n\treturn (\n\t\t<HtmlElement\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"caption\"\n\t\t\tdata-slot=\"carousel-caption\"\n\t\t\tclassName={cnMerge(\"absolute z-10\", className)}\n\t\t>\n\t\t\t{children}\n\t\t</HtmlElement>\n\t);\n}\n\nexport function CarouselIndicatorList<TArrayItem>(props: CarouselWrapperProps<TArrayItem>) {\n\tconst { children, className, each } = props;\n\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArrayItem[]));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"indicator-list\"\n\t\t\tdata-slot=\"carousel-indicator-list\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"absolute bottom-[25px] z-[2] flex w-full items-center justify-center gap-[15px]\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{isFunction(children) ?\n\t\t\t\t<For each={images} renderItem={(image, index, array) => children({ array, image, index })} />\n\t\t\t:\tchildren}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselIndicator(props: CarouselIndicatorProps) {\n\tconst { classNames, currentIndex } = props;\n\n\tconst {\n\t\tactions: { goToSlide },\n\t\tcurrentSlide,\n\t} = useCarouselStoreContext((state) => state);\n\n\treturn (\n\t\t<li\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"indicator\"\n\t\t\tdata-slot=\"carousel-indicator\"\n\t\t\tclassName={cnMerge(\"inline-flex\", classNames?.base)}\n\t\t>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={() => goToSlide(currentIndex)}\n\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\"size-[6px] rounded-[50%]\",\n\t\t\t\t\tclassNames?.base,\n\t\t\t\t\tcurrentIndex === currentSlide && [\"w-[35px] rounded-[5px]\", classNames?.isActive]\n\t\t\t\t)}\n\t\t\t/>\n\t\t</li>\n\t);\n}\n","export {\n\tCarouselButton as Button,\n\tCarouselCaption as Caption,\n\tCarouselControls as Controls,\n\tCarouselIndicator as Indicator,\n\tCarouselIndicatorList as IndicatorGroup,\n\tCarouselItem as Item,\n\tCarouselItemList as ItemGroup,\n\tCarouselRoot as Root,\n} from \"./carousel\";\n"],"mappings":"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"}

package/dist/esm/{chunk-Cl8Af3a2.js → chunk-CTAAG5j7.js}

@@ -1,10 +1,12 @@
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
-var __export = (target, all) => {
+var __export = (all) => {
+	let target = {};
 	for (var name in all) __defProp(target, name, {
 		get: all[name],
 		enumerable: true
 	});
+	return target;
 };
 
 //#endregion

package/dist/esm/{cn-_FbtIrlZ.js → cn-s-D7vHW1.js}

@@ -5,4 +5,4 @@ const cnMerge = (...classNames) => twMerge(classNames);
 
 //#endregion
 export { cnMerge };
-//# sourceMappingURL=cn-_FbtIrlZ.js.map
+//# sourceMappingURL=cn-s-D7vHW1.js.map

package/dist/esm/{cn-_FbtIrlZ.js.map → cn-s-D7vHW1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"cn-_FbtIrlZ.js","names":[],"sources":["../../src/lib/utils/cn.ts"],"sourcesContent":["import { type ClassNameValue, twMerge } from \"tailwind-merge\";\n\nexport const cnMerge = (...classNames: ClassNameValue[]) => twMerge(classNames);\n"],"mappings":";;;AAEA,MAAa,WAAW,GAAG,eAAiC,QAAQ"}
+{"version":3,"file":"cn-s-D7vHW1.js","names":[],"sources":["../../src/lib/utils/cn.ts"],"sourcesContent":["import { type ClassNameValue, twMerge } from \"tailwind-merge\";\n\nexport const cnMerge = (...classNames: ClassNameValue[]) => twMerge(classNames);\n"],"mappings":";;;AAEA,MAAa,WAAW,GAAG,eAAiC,QAAQ,WAAW"}

package/dist/esm/common/await/index.d.ts

@@ -0,0 +1,4 @@
+import "../../index-CJLZEhIo.js";
+import "../../index-D259PHNG.js";
+import { AwaitError, AwaitPending, AwaitRoot, AwaitSuccess, await_parts_d_exports, useAwaitContext } from "../../index-CvjRPnhb.js";
+export { await_parts_d_exports as Await, AwaitError, AwaitPending, AwaitRoot, AwaitSuccess, useAwaitContext };

package/dist/esm/common/await/index.js

@@ -0,0 +1,8 @@
+"use client";
+
+
+import "../../error-boundary-y9Samt_s.js";
+import "../../slot-WVWfOlr3.js";
+import { AwaitError, AwaitPending, AwaitRoot, AwaitSuccess, await_parts_exports, useAwaitContext } from "../../await-Da5w2vIc.js";
+
+export { await_parts_exports as Await, AwaitError, AwaitPending, AwaitRoot, AwaitSuccess, useAwaitContext };

package/dist/esm/common/client-gate/index.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+//#region src/components/common/client-gate/client-gate.d.ts
+type ClientGateProps = {
+  /**
+   * You are encouraged to add a fallback that is the same dimensions
+   * as the client rendered children. This will avoid content layout
+   * shift which is disgusting 🥲
+   */
+  children: React.ReactNode | (() => React.ReactNode);
+  fallback?: React.ReactNode;
+};
+/**
+ * @description Render the children only after the JS has loaded client-side. Use an optional
+ * fallback component if the JS is not yet loaded.
+ *
+ * @example
+ * **Render a Chart component if JS loads, renders a simple FakeChart
+ * component server-side or if there is no JS. The FakeChart can have only the
+ * UI without the behavior or be a loading spinner or skeleton.**
+ *
+ * ```tsx
+ * return (
+ *   <ClientOnly fallback={<FakeChart />}>
+ *     {() => <Chart />}
+ *   </ClientOnly>
+ * );
+ * ```
+ */
+declare function ClientGate(props: ClientGateProps): React.ReactNode;
+//#endregion
+export { ClientGate };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/common/client-gate/index.js

@@ -0,0 +1,35 @@
+"use client";
+
+
+import { isFunction } from "@zayne-labs/toolkit-type-helpers";
+import "react";
+import { useIsHydrated } from "@zayne-labs/toolkit-react";
+
+//#region src/components/common/client-gate/client-gate.tsx
+/**
+* @description Render the children only after the JS has loaded client-side. Use an optional
+* fallback component if the JS is not yet loaded.
+*
+* @example
+* **Render a Chart component if JS loads, renders a simple FakeChart
+* component server-side or if there is no JS. The FakeChart can have only the
+* UI without the behavior or be a loading spinner or skeleton.**
+*
+* ```tsx
+* return (
+*   <ClientOnly fallback={<FakeChart />}>
+*     {() => <Chart />}
+*   </ClientOnly>
+* );
+* ```
+*/
+function ClientGate(props) {
+	const { children, fallback } = props;
+	const isHydrated = useIsHydrated();
+	const getResolvedChildren = () => isFunction(children) ? children() : children;
+	return isHydrated ? getResolvedChildren() : fallback;
+}
+
+//#endregion
+export { ClientGate };
+//# sourceMappingURL=index.js.map

package/dist/esm/common/client-gate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/common/client-gate/client-gate.tsx"],"sourcesContent":["\"use client\";\n\nimport { useIsHydrated } from \"@zayne-labs/toolkit-react\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\n\ntype ClientGateProps = {\n\t/**\n\t * You are encouraged to add a fallback that is the same dimensions\n\t * as the client rendered children. This will avoid content layout\n\t * shift which is disgusting 🥲\n\t */\n\tchildren: React.ReactNode | (() => React.ReactNode);\n\tfallback?: React.ReactNode;\n};\n\n/**\n * @description Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * **Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.**\n *\n * ```tsx\n * return (\n *   <ClientOnly fallback={<FakeChart />}>\n *     {() => <Chart />}\n *   </ClientOnly>\n * );\n * ```\n */\nfunction ClientGate(props: ClientGateProps) {\n\tconst { children, fallback } = props;\n\n\tconst isHydrated = useIsHydrated();\n\n\tconst getResolvedChildren = () => (isFunction(children) ? children() : children);\n\n\treturn isHydrated ? getResolvedChildren() : fallback;\n}\n\nexport { ClientGate };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAS,WAAW,OAAwB;CAC3C,MAAM,EAAE,UAAU,aAAa;CAE/B,MAAM,aAAa,eAAe;CAElC,MAAM,4BAA6B,WAAW,SAAS,GAAG,UAAU,GAAG;AAEvE,QAAO,aAAa,qBAAqB,GAAG"}

package/dist/esm/{components/common → common}/error-boundary/index.d.ts

@@ -1,2 +1,2 @@
-import { ErrorBoundary, ErrorBoundaryContextType, ErrorBoundaryProps, FallbackProps, useErrorBoundary, useErrorBoundaryContext } from "../../../index-lKxE9WPi.js";
+import { ErrorBoundary, ErrorBoundaryContextType, ErrorBoundaryProps, FallbackProps, useErrorBoundary, useErrorBoundaryContext } from "../../index-CJLZEhIo.js";
 export { ErrorBoundary, ErrorBoundaryContextType, ErrorBoundaryProps, FallbackProps, useErrorBoundary, useErrorBoundaryContext };

package/dist/esm/{components/common → common}/error-boundary/index.js

@@ -1,6 +1,6 @@
 "use client";
 
 
-import { ErrorBoundary, useErrorBoundary, useErrorBoundaryContext } from "../../../error-boundary-xM9An3gz.js";
+import { ErrorBoundary, useErrorBoundary, useErrorBoundaryContext } from "../../error-boundary-y9Samt_s.js";
 
 export { ErrorBoundary, useErrorBoundary, useErrorBoundaryContext };

package/dist/esm/common/for/index.d.ts

@@ -0,0 +1,2 @@
+import { For, ForRenderProps, ForWithWrapper, getElementList } from "../../index-Bra0UlL_.js";
+export { For, ForRenderProps, ForWithWrapper, getElementList };

package/dist/esm/common/for/index.js

@@ -0,0 +1,3 @@
+import { For, ForWithWrapper, getElementList } from "../../for-Dfh7e9Z4.js";
+
+export { For, ForWithWrapper, getElementList };

package/dist/esm/common/index.d.ts

@@ -0,0 +1,9 @@
+import { ErrorBoundary } from "../index-CJLZEhIo.js";
+import { SuspenseWithBoundary } from "../index-D259PHNG.js";
+import { await_parts_d_exports } from "../index-CvjRPnhb.js";
+import { For, ForWithWrapper } from "../index-Bra0UlL_.js";
+import { show_parts_d_exports } from "../index-BsGxDKlt.js";
+import { slot_parts_d_exports } from "../index-B53RIFft.js";
+import { switch_parts_d_exports } from "../index-CffEFE66.js";
+import { Teleport } from "../index-CZjeBSoQ.js";
+export { await_parts_d_exports as Await, ErrorBoundary, For, ForWithWrapper, show_parts_d_exports as Show, slot_parts_d_exports as Slot, SuspenseWithBoundary, switch_parts_d_exports as Switch, Teleport };

package/dist/esm/common/index.js

@@ -0,0 +1,11 @@
+import { ErrorBoundary } from "../error-boundary-y9Samt_s.js";
+import { slot_parts_exports } from "../slot-WVWfOlr3.js";
+import { await_parts_exports } from "../await-Da5w2vIc.js";
+import { For, ForWithWrapper } from "../for-Dfh7e9Z4.js";
+import { show_parts_exports } from "../show-N1ZXBhoA.js";
+import { SuspenseWithBoundary } from "../suspense-with-boundary-D-1NYDV4.js";
+import { switch_parts_exports } from "../switch-Ch22z21e.js";
+import { Teleport } from "../teleport-C8TzRm4M.js";
+import "../common-PS3X58Pj.js";
+
+export { await_parts_exports as Await, ErrorBoundary, For, ForWithWrapper, show_parts_exports as Show, slot_parts_exports as Slot, SuspenseWithBoundary, switch_parts_exports as Switch, Teleport };

package/dist/esm/common/presence/index.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+//#region src/components/common/presence/use-presence.d.ts
+type UsePresenceOptions = {
+  onExitComplete?: () => void;
+  present: boolean;
+};
+//#endregion
+//#region src/components/common/presence/presence.d.ts
+type RefProp = {
+  ref?: React.Ref<HTMLElement>;
+};
+type PresenceProps = UsePresenceOptions & {
+  children?: React.ReactElement<RefProp> | ((props: {
+    isPresent: boolean;
+  }) => React.ReactElement<RefProp>);
+  forceMount?: boolean;
+};
+declare function Presence(props: PresenceProps): React.ReactElement<RefProp, string | React.JSXElementConstructor<any>> | null | undefined;
+//#endregion
+export { Presence };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/common/presence/index.js

@@ -0,0 +1,6 @@
+"use client";
+
+
+import { Presence } from "../../presence-CRZsP1Jk.js";
+
+export { Presence };

package/dist/esm/{components/common → common}/show/index.d.ts

@@ -1,2 +1,2 @@
-import { ShowContent, ShowFallback, ShowRoot, show_parts_d_exports } from "../../../index-DVr1tbxh.js";
+import { ShowContent, ShowFallback, ShowRoot, show_parts_d_exports } from "../../index-BsGxDKlt.js";
 export { show_parts_d_exports as Show, ShowContent, ShowFallback, ShowRoot };

package/dist/esm/{components/common → common}/show/index.js

@@ -1,7 +1,6 @@
 "use client";
 
 
-import "../../../getSlot-Cf5ON6lE.js";
-import { ShowContent, ShowFallback, ShowRoot, show_parts_exports } from "../../../show-BabiXbf7.js";
+import { ShowContent, ShowFallback, ShowRoot, show_parts_exports } from "../../show-N1ZXBhoA.js";
 
 export { show_parts_exports as Show, ShowContent, ShowFallback, ShowRoot };

package/dist/esm/{components/common → common}/slot/index.d.ts

@@ -1,2 +1,2 @@
-import { SlotRoot, SlotSlottable, slot_parts_d_exports } from "../../../index-BBJzo-WC.js";
+import { SlotRoot, SlotSlottable, slot_parts_d_exports } from "../../index-B53RIFft.js";
 export { slot_parts_d_exports as Slot, SlotRoot, SlotSlottable };

package/dist/esm/common/slot/index.js

@@ -0,0 +1,3 @@
+import { SlotRoot, SlotSlottable, slot_parts_exports } from "../../slot-WVWfOlr3.js";
+
+export { slot_parts_exports as Slot, SlotRoot, SlotSlottable };

package/dist/esm/common/suspense-with-boundary/index.d.ts

@@ -0,0 +1,3 @@
+import "../../index-CJLZEhIo.js";
+import { SuspenseWithBoundary, SuspenseWithBoundaryProps } from "../../index-D259PHNG.js";
+export { SuspenseWithBoundary, SuspenseWithBoundaryProps };

package/dist/esm/common/suspense-with-boundary/index.js

@@ -0,0 +1,4 @@
+import "../../error-boundary-y9Samt_s.js";
+import { SuspenseWithBoundary } from "../../suspense-with-boundary-D-1NYDV4.js";
+
+export { SuspenseWithBoundary };

package/dist/esm/{components/common → common}/switch/index.d.ts

@@ -1,2 +1,2 @@
-import { SwitchDefault, SwitchMatch, SwitchRoot, switch_parts_d_exports } from "../../../index-DJjxpXUk.js";
+import { SwitchDefault, SwitchMatch, SwitchRoot, switch_parts_d_exports } from "../../index-CffEFE66.js";
 export { switch_parts_d_exports as Switch, SwitchDefault, SwitchMatch, SwitchRoot };

package/dist/esm/{components/common → common}/switch/index.js

@@ -1,7 +1,6 @@
 "use client";
 
 
-import "../../../getSlot-Cf5ON6lE.js";
-import { SwitchDefault, SwitchMatch, SwitchRoot, switch_parts_exports } from "../../../switch-CCMD01Rs.js";
+import { SwitchDefault, SwitchMatch, SwitchRoot, switch_parts_exports } from "../../switch-Ch22z21e.js";
 
 export { switch_parts_exports as Switch, SwitchDefault, SwitchMatch, SwitchRoot };

package/dist/esm/common/teleport/index.d.ts

@@ -0,0 +1,2 @@
+import { Teleport } from "../../index-CZjeBSoQ.js";
+export { Teleport };