@zayne-labs/ui-react 0.10.53 → 0.11.1

package/dist/esm/{slot-DuwoiC2C.js.map → slot-CHR5Li4r.js.map}

@@ -1 +1 @@
-{"version":3,"file":"slot-DuwoiC2C.js","names":["ReactFragment"],"sources":["../../src/components/common/slot/slot.tsx","../../src/components/common/slot/slot-parts.ts"],"sourcesContent":["import { composeRefs, mergeProps, type InferProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { isArray, type UnknownObject } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Children, cloneElement, isValidElement, Fragment as ReactFragment } from \"react\";\n\ntype SlotProps = InferProps<HTMLElement> & { ref?: React.Ref<HTMLElement> };\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * ----------------------------------------------------------------------------------------------- */\n\nexport function SlotRoot(props: SlotProps) {\n\tconst { children, ...restOfSlotProps } = props;\n\n\tconst childrenArray = isArray<React.ReactNode>(children) ? children : [children];\n\n\tconst slottable = childrenArray.find((element) => isSlottable(element));\n\n\tif (!slottable) {\n\t\treturn <SlotClone {...restOfSlotProps}>{children}</SlotClone>;\n\t}\n\n\tif (!isValidElement<SlotProps>(slottable)) {\n\t\treturn null;\n\t}\n\n\t// == The new element to render is the one passed as a child of `Slot.Slottable`\n\tconst childToRender = slottable.props.children;\n\n\tif (Children.count(childToRender) > 1) {\n\t\treturn Children.only(null);\n\t}\n\n\tconst resolvedChildToRender = isArray(childToRender) ? childToRender[0] : childToRender;\n\n\tif (!isValidElement(resolvedChildToRender)) {\n\t\t// eslint-disable-next-line react-x/purity -- Ignore\n\t\tconsole.error(\"Invalid element passed to Slottable:\", resolvedChildToRender);\n\t\treturn null;\n\t}\n\n\tconst childToRenderChildren = childrenArray.map((child) => {\n\t\tif (child === slottable) {\n\t\t\t// == Because the new element will be the one rendered, we are only interested in grabbing its children (`childToRender.props.children`)\n\t\t\treturn (resolvedChildToRender.props as SlotProps).children;\n\t\t}\n\n\t\treturn child;\n\t});\n\n\treturn (\n\t\t<SlotClone {...restOfSlotProps}>\n\t\t\t{cloneElement(resolvedChildToRender, undefined, childToRenderChildren)}\n\t\t</SlotClone>\n\t);\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * ----------------------------------------------------------------------------------------------- */\n\nexport function SlotSlottable({ children }: Pick<SlotProps, \"children\">) {\n\treturn children;\n}\n\nconst isSlottable = (child: React.ReactNode): child is React.ReactElement => {\n\treturn isValidElement(child) && child.type === SlotSlottable;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * ----------------------------------------------------------------------------------------------- */\ntype SlotCloneProps = Pick<SlotProps, \"children\" | \"ref\">;\n\nfunction SlotClone(props: SlotCloneProps) {\n\tconst { children, ref: forwardedRef, ...restOfSlotProps } = props;\n\n\tif (Children.count(children) > 1) {\n\t\treturn Children.only(null);\n\t}\n\n\tconst resolvedChild = isArray(children) ? children[0] : children;\n\n\tif (!isValidElement<UnknownObject>(resolvedChild)) {\n\t\t// eslint-disable-next-line react-x/purity -- Ignore\n\t\tconsole.error(\"Invalid element passed to Slot:\", resolvedChild);\n\t\treturn null;\n\t}\n\n\tconst childRef = resolvedChild.props.ref as React.Ref<HTMLElement>;\n\n\tconst ref = composeRefs(forwardedRef, childRef);\n\n\tconst clonedProps = {\n\t\t...mergeProps(restOfSlotProps, resolvedChild.props),\n\t\t...(resolvedChild.type !== ReactFragment && { ref }),\n\t};\n\n\treturn cloneElement(resolvedChild, clonedProps);\n}\n","export { SlotRoot as Root, SlotSlottable as Slottable } from \"./slot\";\n"],"mappings":";;;;;;AAUA,SAAgB,SAAS,OAAkB;CAC1C,MAAM,EAAE,UAAU,GAAG,oBAAoB;CAEzC,MAAM,gBAAgB,QAAyB,SAAS,GAAG,WAAW,CAAC,SAAS;CAEhF,MAAM,YAAY,cAAc,MAAM,YAAY,YAAY,QAAQ,CAAC;AAEvE,KAAI,CAAC,UACJ,QAAO,oBAAC,WAAD;EAAW,GAAI;EAAkB;EAAqB,CAAA;AAG9D,KAAI,CAAC,eAA0B,UAAU,CACxC,QAAO;CAIR,MAAM,gBAAgB,UAAU,MAAM;AAEtC,KAAI,SAAS,MAAM,cAAc,GAAG,EACnC,QAAO,SAAS,KAAK,KAAK;CAG3B,MAAM,wBAAwB,QAAQ,cAAc,GAAG,cAAc,KAAK;AAE1E,KAAI,CAAC,eAAe,sBAAsB,EAAE;AAE3C,UAAQ,MAAM,wCAAwC,sBAAsB;AAC5E,SAAO;;CAGR,MAAM,wBAAwB,cAAc,KAAK,UAAU;AAC1D,MAAI,UAAU,UAEb,QAAQ,sBAAsB,MAAoB;AAGnD,SAAO;GACN;AAEF,QACC,oBAAC,WAAD;EAAW,GAAI;YACb,aAAa,uBAAuB,KAAA,GAAW,sBAAsB;EAC3D,CAAA;;AAQd,SAAgB,cAAc,EAAE,YAAyC;AACxE,QAAO;;AAGR,MAAM,eAAe,UAAwD;AAC5E,QAAO,eAAe,MAAM,IAAI,MAAM,SAAS;;AAQhD,SAAS,UAAU,OAAuB;CACzC,MAAM,EAAE,UAAU,KAAK,cAAc,GAAG,oBAAoB;AAE5D,KAAI,SAAS,MAAM,SAAS,GAAG,EAC9B,QAAO,SAAS,KAAK,KAAK;CAG3B,MAAM,gBAAgB,QAAQ,SAAS,GAAG,SAAS,KAAK;AAExD,KAAI,CAAC,eAA8B,cAAc,EAAE;AAElD,UAAQ,MAAM,mCAAmC,cAAc;AAC/D,SAAO;;CAGR,MAAM,WAAW,cAAc,MAAM;CAErC,MAAM,MAAM,YAAY,cAAc,SAAS;AAO/C,QAAO,aAAa,eALA;EACnB,GAAG,WAAW,iBAAiB,cAAc,MAAM;EACnD,GAAI,cAAc,SAASA,YAAiB,EAAE,KAAK;EACnD,CAE8C"}
+{"version":3,"file":"slot-CHR5Li4r.js","names":["ReactFragment"],"sources":["../../src/components/common/slot/slot.tsx","../../src/components/common/slot/slot-parts.ts"],"sourcesContent":["import { composeRefs, mergeProps, type InferProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { isArray, type UnknownObject } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Children, cloneElement, isValidElement, Fragment as ReactFragment } from \"react\";\n\ntype SlotProps = InferProps<HTMLElement> & { ref?: React.Ref<HTMLElement> };\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * ----------------------------------------------------------------------------------------------- */\n\nexport function SlotRoot(props: SlotProps) {\n\tconst { children, ...restOfSlotProps } = props;\n\n\tconst childrenArray = isArray<React.ReactNode>(children) ? children : [children];\n\n\tconst slottable = childrenArray.find((element) => isSlottable(element));\n\n\tif (!slottable) {\n\t\treturn <SlotClone {...restOfSlotProps}>{children}</SlotClone>;\n\t}\n\n\tif (!isValidElement<SlotProps>(slottable)) {\n\t\treturn null;\n\t}\n\n\t// == The new element to render is the one passed as a child of `Slot.Slottable`\n\tconst childToRender = slottable.props.children;\n\n\tif (Children.count(childToRender) > 1) {\n\t\treturn Children.only(null);\n\t}\n\n\tconst resolvedChildToRender = isArray(childToRender) ? childToRender[0] : childToRender;\n\n\tif (!isValidElement(resolvedChildToRender)) {\n\t\t// eslint-disable-next-line react-x/purity -- Ignore\n\t\tconsole.error(\"Invalid element passed to Slottable:\", resolvedChildToRender);\n\t\treturn null;\n\t}\n\n\tconst childToRenderChildren = childrenArray.map((child) => {\n\t\tif (child === slottable) {\n\t\t\t// == Because the new element will be the one rendered, we are only interested in grabbing its children (`childToRender.props.children`)\n\t\t\treturn (resolvedChildToRender.props as SlotProps).children;\n\t\t}\n\n\t\treturn child;\n\t});\n\n\treturn (\n\t\t<SlotClone {...restOfSlotProps}>\n\t\t\t{cloneElement(resolvedChildToRender, undefined, childToRenderChildren)}\n\t\t</SlotClone>\n\t);\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * ----------------------------------------------------------------------------------------------- */\n\nexport function SlotSlottable({ children }: Pick<SlotProps, \"children\">) {\n\treturn children;\n}\n\nconst isSlottable = (child: React.ReactNode): child is React.ReactElement => {\n\treturn isValidElement(child) && child.type === SlotSlottable;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * ----------------------------------------------------------------------------------------------- */\ntype SlotCloneProps = Pick<SlotProps, \"children\" | \"ref\">;\n\nfunction SlotClone(props: SlotCloneProps) {\n\tconst { children, ref: forwardedRef, ...restOfSlotProps } = props;\n\n\tif (Children.count(children) > 1) {\n\t\treturn Children.only(null);\n\t}\n\n\tconst resolvedChild = isArray(children) ? children[0] : children;\n\n\tif (!isValidElement<UnknownObject>(resolvedChild)) {\n\t\t// eslint-disable-next-line react-x/purity -- Ignore\n\t\tconsole.error(\"Invalid element passed to Slot:\", resolvedChild);\n\t\treturn null;\n\t}\n\n\tconst childRef = resolvedChild.props.ref as React.Ref<HTMLElement>;\n\n\tconst ref = composeRefs(forwardedRef, childRef);\n\n\tconst clonedProps = {\n\t\t...mergeProps(restOfSlotProps, resolvedChild.props),\n\t\t...(resolvedChild.type !== ReactFragment && { ref }),\n\t};\n\n\treturn cloneElement(resolvedChild, clonedProps);\n}\n","export { SlotRoot as Root, SlotSlottable as Slottable } from \"./slot\";\n"],"mappings":";;;;;;AAUA,SAAgB,SAAS,OAAkB;CAC1C,MAAM,EAAE,UAAU,GAAG,oBAAoB;CAEzC,MAAM,gBAAgB,QAAyB,SAAS,GAAG,WAAW,CAAC,SAAS;CAEhF,MAAM,YAAY,cAAc,MAAM,YAAY,YAAY,QAAQ,CAAC;AAEvE,KAAI,CAAC,UACJ,QAAO,oBAAC,WAAD;EAAW,GAAI;EAAkB;EAAqB,CAAA;AAG9D,KAAI,CAAC,eAA0B,UAAU,CACxC,QAAO;CAIR,MAAM,gBAAgB,UAAU,MAAM;AAEtC,KAAI,SAAS,MAAM,cAAc,GAAG,EACnC,QAAO,SAAS,KAAK,KAAK;CAG3B,MAAM,wBAAwB,QAAQ,cAAc,GAAG,cAAc,KAAK;AAE1E,KAAI,CAAC,eAAe,sBAAsB,EAAE;AAE3C,UAAQ,MAAM,wCAAwC,sBAAsB;AAC5E,SAAO;;CAGR,MAAM,wBAAwB,cAAc,KAAK,UAAU;AAC1D,MAAI,UAAU,UAEb,QAAQ,sBAAsB,MAAoB;AAGnD,SAAO;GACN;AAEF,QACC,oBAAC,WAAD;EAAW,GAAI;YACb,aAAa,uBAAuB,KAAA,GAAW,sBAAsB;EAC3D,CAAA;;AAQd,SAAgB,cAAc,EAAE,YAAyC;AACxE,QAAO;;AAGR,MAAM,eAAe,UAAwD;AAC5E,QAAO,eAAe,MAAM,IAAI,MAAM,SAAS;;AAQhD,SAAS,UAAU,OAAuB;CACzC,MAAM,EAAE,UAAU,KAAK,cAAc,GAAG,oBAAoB;AAE5D,KAAI,SAAS,MAAM,SAAS,GAAG,EAC9B,QAAO,SAAS,KAAK,KAAK;CAG3B,MAAM,gBAAgB,QAAQ,SAAS,GAAG,SAAS,KAAK;AAExD,KAAI,CAAC,eAA8B,cAAc,EAAE;AAElD,UAAQ,MAAM,mCAAmC,cAAc;AAC/D,SAAO;;CAGR,MAAM,WAAW,cAAc,MAAM;CAErC,MAAM,MAAM,YAAY,cAAc,SAAS;AAO/C,QAAO,aAAa,eALA;EACnB,GAAG,WAAW,iBAAiB,cAAc,MAAM;EACnD,GAAI,cAAc,SAASA,YAAiB,EAAE,KAAK;EACnD,CAE8C"}

package/dist/esm/switch-Dwy5Gzsb.js

@@ -0,0 +1,35 @@
+import { t as __exportAll } from "./chunk-pbuEa-1d.js";
+import { getRegularChildren, getSingleSlot } from "@zayne-labs/toolkit-react/utils";
+import { isFunction } from "@zayne-labs/toolkit-type-helpers";
+//#region src/components/common/switch/switch.tsx
+const defaultValueSymbol = Symbol("default-value");
+function SwitchRoot(props) {
+	const { children, value = defaultValueSymbol } = props;
+	const defaultCase = getSingleSlot(children, SwitchDefault, {
+		errorMessage: "Only one <Switch.Default> component is allowed",
+		throwOnMultipleSlotMatch: true
+	});
+	return getRegularChildren(children, SwitchDefault).find((child) => {
+		if (value === defaultValueSymbol) return Boolean(child.props.when);
+		return child.props.when === value;
+	}) ?? defaultCase;
+}
+function SwitchMatch(props) {
+	const { children, when } = props;
+	return isFunction(children) ? children(when) : children;
+}
+function SwitchDefault({ children }) {
+	return children;
+}
+SwitchDefault.slotSymbol = Symbol("switch-default");
+//#endregion
+//#region src/components/common/switch/switch-parts.ts
+var switch_parts_exports = /* @__PURE__ */ __exportAll({
+	Default: () => SwitchDefault,
+	Match: () => SwitchMatch,
+	Root: () => SwitchRoot
+});
+//#endregion
+export { SwitchRoot as i, SwitchDefault as n, SwitchMatch as r, switch_parts_exports as t };
+
+//# sourceMappingURL=switch-Dwy5Gzsb.js.map

package/dist/esm/switch-Dwy5Gzsb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-Dwy5Gzsb.js","names":[],"sources":["../../src/components/common/switch/switch.tsx","../../src/components/common/switch/switch-parts.ts"],"sourcesContent":["\"use client\";\n\nimport { getRegularChildren, getSingleSlot } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\n\ntype ValidSwitchComponentType = React.ReactElement<SwitchMatchProps<unknown>>;\n\nexport type SwitchRootProps<TValue> = {\n\tchildren: ValidSwitchComponentType | ValidSwitchComponentType[];\n\tvalue?: TValue;\n};\n\nconst defaultValueSymbol = Symbol(\"default-value\");\n\n// TODO - Add a factory to make this 'when' and 'value' type-safe later following the link below\n// LINK - https://tkdodo.eu/blog/building-type-safe-compound-components#component-factory-pattern\nexport function SwitchRoot<TValue>(props: SwitchRootProps<TValue>) {\n\tconst { children, value = defaultValueSymbol } = props;\n\n\tconst defaultCase = getSingleSlot(children, SwitchDefault, {\n\t\terrorMessage: \"Only one <Switch.Default> component is allowed\",\n\t\tthrowOnMultipleSlotMatch: true,\n\t});\n\n\tconst childrenCasesArray = getRegularChildren(children, SwitchDefault) as ValidSwitchComponentType[];\n\n\tconst matchedCase = childrenCasesArray.find((child) => {\n\t\t// == If value is defaultValueSymbol, match the cases in order like switch(true)\n\t\tif (value === defaultValueSymbol) {\n\t\t\treturn Boolean(child.props.when);\n\t\t}\n\n\t\t// == Otherwise, match the cases like switch(value)\n\t\treturn child.props.when === value;\n\t});\n\n\treturn matchedCase ?? defaultCase;\n}\n\nexport type SwitchMatchProps<TWhen> = {\n\tchildren: React.ReactNode | ((value: TWhen) => React.ReactNode);\n\twhen: false | TWhen | null | undefined;\n};\n\nexport function SwitchMatch<TWhen>(props: SwitchMatchProps<TWhen>) {\n\tconst { children, when } = props;\n\n\tconst resolvedChildren = isFunction(children) ? children(when as TWhen) : children;\n\n\treturn resolvedChildren;\n}\n\nexport function SwitchDefault({ children }: { children: React.ReactNode }) {\n\treturn children;\n}\nSwitchDefault.slotSymbol = Symbol(\"switch-default\");\n","export { SwitchDefault as Default, SwitchMatch as Match, SwitchRoot as Root } from \"./switch\";\n"],"mappings":";;;;AAYA,MAAM,qBAAqB,OAAO,gBAAgB;AAIlD,SAAgB,WAAmB,OAAgC;CAClE,MAAM,EAAE,UAAU,QAAQ,uBAAuB;CAEjD,MAAM,cAAc,cAAc,UAAU,eAAe;EAC1D,cAAc;EACd,0BAA0B;EAC1B,CAAC;AAcF,QAZ2B,mBAAmB,UAAU,cAAc,CAE/B,MAAM,UAAU;AAEtD,MAAI,UAAU,mBACb,QAAO,QAAQ,MAAM,MAAM,KAAK;AAIjC,SAAO,MAAM,MAAM,SAAS;GAC3B,IAEoB;;AAQvB,SAAgB,YAAmB,OAAgC;CAClE,MAAM,EAAE,UAAU,SAAS;AAI3B,QAFyB,WAAW,SAAS,GAAG,SAAS,KAAc,GAAG;;AAK3E,SAAgB,cAAc,EAAE,YAA2C;AAC1E,QAAO;;AAER,cAAc,aAAa,OAAO,iBAAiB"}

package/dist/esm/ui/card/index.js

@@ -1,6 +1,6 @@
 import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
-import { n as SlotRoot } from "../../slot-DuwoiC2C.js";
-import { t as cnMerge } from "../../cn-Bbh2G587.js";
+import { n as SlotRoot } from "../../slot-CHR5Li4r.js";
+import { t as cnMerge } from "../../cn-CIbU5eI0.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ui/card/card.tsx
 function CardRoot(props) {

package/dist/esm/ui/carousel/index.js

@@ -1,13 +1,13 @@
 "use client";
 import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
+import { t as cnMerge } from "../../cn-CIbU5eI0.js";
 import { n as For } from "../../for-DGTMIS0w.js";
-import { i as ShowRoot, n as ShowContent, r as ShowFallback } from "../../show-BzfAw7y3.js";
-import { t as cnMerge } from "../../cn-Bbh2G587.js";
+import { i as ShowRoot, n as ShowContent, r as ShowFallback } from "../../show-mvRnLPj8.js";
 import { isFunction } from "@zayne-labs/toolkit-type-helpers";
 import { useMemo, useState } from "react";
-import { useAnimationInterval, useCallbackRef, useStore } from "@zayne-labs/toolkit-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createStore } from "@zayne-labs/toolkit-core";
+import { useAnimationInterval, useCallbackRef, useStore } from "@zayne-labs/toolkit-react";
 import { createReactStoreContext } from "@zayne-labs/toolkit-react/zustand";
 //#region src/components/ui/carousel/carousel-store-context.ts
 const [CarouselStoreContextProvider, useCarouselStoreContext] = createReactStoreContext({

package/dist/esm/ui/drag-scroll/index.d.ts

@@ -1,114 +1,124 @@
-import { InferProps } from "@zayne-labs/toolkit-react/utils";
+import { InferProps, PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
 import * as _zayne_labs_toolkit_type_helpers0 from "@zayne-labs/toolkit-type-helpers";
+import { SelectorFn } from "@zayne-labs/toolkit-type-helpers";
 import * as react from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as _zayne_labs_toolkit_core0 from "@zayne-labs/toolkit-core";
-
 //#region src/components/ui/drag-scroll/drag-scroll-context.d.ts
 declare const DragScrollStoreContextProvider: (props: {
     children: React.ReactNode;
     store: {
-      getInitialState: () => DragScrollStore<HTMLElement>;
-      getListeners: () => Set<(state: DragScrollStore<HTMLElement>, prevState: DragScrollStore<HTMLElement>) => void>;
-      getState: () => DragScrollStore<HTMLElement>;
+      getInitialState: () => DragScrollStore;
+      getListeners: () => Set<(state: DragScrollStore, prevState: DragScrollStore) => void>;
+      getState: () => DragScrollStore;
       resetState: () => void;
       setState: {
-        (stateUpdate: Partial<DragScrollStore<HTMLElement>> | ((prevState: DragScrollStore<HTMLElement>) => Partial<DragScrollStore<HTMLElement>>), options?: ({
-          onNotifySync?: ((previousState: DragScrollStore<HTMLElement>) => void) | undefined;
-          onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore<HTMLElement>) => void) | undefined;
+        (stateUpdate: Partial<DragScrollStore> | ((prevState: DragScrollStore) => Partial<DragScrollStore>), options?: ({
+          onNotifySync?: ((previousState: DragScrollStore) => void) | undefined;
+          onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore) => void) | undefined;
           shouldNotifySync?: boolean | undefined;
         } & {
           shouldReplace?: false;
         }) | undefined): void;
-        (stateUpdate: DragScrollStore<HTMLElement> | ((prevState: DragScrollStore<HTMLElement>) => DragScrollStore<HTMLElement>), options?: ({
-          onNotifySync?: ((previousState: DragScrollStore<HTMLElement>) => void) | undefined;
-          onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore<HTMLElement>) => void) | undefined;
+        (stateUpdate: DragScrollStore | ((prevState: DragScrollStore) => DragScrollStore), options?: ({
+          onNotifySync?: ((previousState: DragScrollStore) => void) | undefined;
+          onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore) => void) | undefined;
           shouldNotifySync?: boolean | undefined;
         } & {
           shouldReplace: true;
         }) | undefined): void;
       };
-      subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore<HTMLElement>>;
+      subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
     };
   }) => react.FunctionComponentElement<react.ProviderProps<{
-    getInitialState: () => DragScrollStore<HTMLElement>;
-    getListeners: () => Set<(state: DragScrollStore<HTMLElement>, prevState: DragScrollStore<HTMLElement>) => void>;
-    getState: () => DragScrollStore<HTMLElement>;
+    getInitialState: () => DragScrollStore;
+    getListeners: () => Set<(state: DragScrollStore, prevState: DragScrollStore) => void>;
+    getState: () => DragScrollStore;
     resetState: () => void;
     setState: {
-      (stateUpdate: Partial<DragScrollStore<HTMLElement>> | ((prevState: DragScrollStore<HTMLElement>) => Partial<DragScrollStore<HTMLElement>>), options?: ({
-        onNotifySync?: ((previousState: DragScrollStore<HTMLElement>) => void) | undefined;
-        onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore<HTMLElement>) => void) | undefined;
+      (stateUpdate: Partial<DragScrollStore> | ((prevState: DragScrollStore) => Partial<DragScrollStore>), options?: ({
+        onNotifySync?: ((previousState: DragScrollStore) => void) | undefined;
+        onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore) => void) | undefined;
         shouldNotifySync?: boolean | undefined;
       } & {
         shouldReplace?: false;
       }) | undefined): void;
-      (stateUpdate: DragScrollStore<HTMLElement> | ((prevState: DragScrollStore<HTMLElement>) => DragScrollStore<HTMLElement>), options?: ({
-        onNotifySync?: ((previousState: DragScrollStore<HTMLElement>) => void) | undefined;
-        onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore<HTMLElement>) => void) | undefined;
+      (stateUpdate: DragScrollStore | ((prevState: DragScrollStore) => DragScrollStore), options?: ({
+        onNotifySync?: ((previousState: DragScrollStore) => void) | undefined;
+        onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore) => void) | undefined;
         shouldNotifySync?: boolean | undefined;
       } & {
         shouldReplace: true;
       }) | undefined): void;
     };
-    subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore<HTMLElement>>;
-  }>>, useDragScrollStoreContext: <TResult = DragScrollStore<HTMLElement>>(selector?: _zayne_labs_toolkit_type_helpers0.SelectorFn<DragScrollStore<HTMLElement>, TResult> | undefined) => TResult;
+    subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
+  }>>, useDragScrollStoreContext: <TResult = DragScrollStore>(selector?: _zayne_labs_toolkit_type_helpers0.SelectorFn<DragScrollStore, TResult> | undefined) => TResult;
 //#endregion
 //#region src/components/ui/drag-scroll/drag-scroll-store.d.ts
 type RequiredUseDragScrollProps = { [Key in keyof Required<UseDragScrollProps>]: UseDragScrollProps[Key] | undefined };
 type InitStoreValues = Pick<RequiredUseDragScrollProps, "orientation" | "scrollAmount" | "usage">;
-declare const createDragScrollStore: <TElement extends HTMLElement = HTMLElement>(initStoreValues: InitStoreValues) => {
-  getInitialState: () => DragScrollStore<TElement>;
-  getListeners: () => Set<(state: DragScrollStore<TElement>, prevState: DragScrollStore<TElement>) => void>;
-  getState: () => DragScrollStore<TElement>;
+declare const createDragScrollStore: (initStoreValues: InitStoreValues) => {
+  getInitialState: () => DragScrollStore;
+  getListeners: () => Set<(state: DragScrollStore, prevState: DragScrollStore) => void>;
+  getState: () => DragScrollStore;
   resetState: () => void;
   setState: {
-    (stateUpdate: Partial<DragScrollStore<TElement>> | ((prevState: DragScrollStore<TElement>) => Partial<DragScrollStore<TElement>>), options?: ({
-      onNotifySync?: ((previousState: DragScrollStore<TElement>) => void) | undefined;
-      onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore<TElement>) => void) | undefined;
+    (stateUpdate: Partial<DragScrollStore> | ((prevState: DragScrollStore) => Partial<DragScrollStore>), options?: ({
+      onNotifySync?: ((previousState: DragScrollStore) => void) | undefined;
+      onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore) => void) | undefined;
       shouldNotifySync?: boolean | undefined;
     } & {
       shouldReplace?: false;
     }) | undefined): void;
-    (stateUpdate: DragScrollStore<TElement> | ((prevState: DragScrollStore<TElement>) => DragScrollStore<TElement>), options?: ({
-      onNotifySync?: ((previousState: DragScrollStore<TElement>) => void) | undefined;
-      onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore<TElement>) => void) | undefined;
+    (stateUpdate: DragScrollStore | ((prevState: DragScrollStore) => DragScrollStore), options?: ({
+      onNotifySync?: ((previousState: DragScrollStore) => void) | undefined;
+      onNotifyViaBatch?: ((previousStateSnapshot: DragScrollStore) => void) | undefined;
       shouldNotifySync?: boolean | undefined;
     } & {
       shouldReplace: true;
     }) | undefined): void;
   };
-  subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore<TElement>>;
+  subscribe: _zayne_labs_toolkit_core0.SubscribeFn<DragScrollStore>;
 };
 //#endregion
 //#region src/components/ui/drag-scroll/types.d.ts
 type RecordForDataAttr = Record<`data-${string}`, unknown>;
-interface PartProps<TElement extends HTMLElement> {
-  backButton: {
-    input: PartProps<TElement>["backButton"]["output"];
-    output: InferProps<"button"> & RecordForDataAttr;
+type SharedInputProps = {
+  /**
+   * Set to `true` to disable the default styling
+   */
+  unstyled?: boolean;
+};
+type PartProps<TContainerElement extends HTMLElement = HTMLElement> = {
+  container: {
+    input: PartProps<TContainerElement>["container"]["output"] & SharedInputProps;
+    output: RecordForDataAttr & InferProps<TContainerElement>;
   };
   item: {
-    input: PartProps<TElement>["item"]["output"];
+    input: PartProps<TContainerElement>["item"]["output"] & SharedInputProps;
     output: InferProps<HTMLElement> & RecordForDataAttr;
   };
   nextButton: {
-    input: PartProps<TElement>["nextButton"]["output"];
-    output: InferProps<"button"> & RecordForDataAttr;
+    input: PartProps<TContainerElement>["nextButton"]["output"] & SharedInputProps;
+    output: RecordForDataAttr & InferProps<"button">;
+  };
+  prevButton: {
+    input: PartProps<TContainerElement>["prevButton"]["output"] & SharedInputProps;
+    output: RecordForDataAttr & InferProps<"button">;
   };
   root: {
-    input: PartProps<TElement>["root"]["output"];
-    output: InferProps<TElement> & RecordForDataAttr & {
-      ref?: React.Ref<TElement>;
-    };
+    input: PartProps<TContainerElement>["root"]["output"] & SharedInputProps;
+    output: RecordForDataAttr & InferProps<"div">;
   };
-}
-type DragScrollPropGetters<TElement extends HTMLElement> = { [Key in keyof PartProps<TElement> as `get${Capitalize<Key>}Props`]: (props?: PartProps<TElement>[Key]["input"]) => PartProps<TElement>[Key]["output"] };
+};
+type DragScrollPropGetters<TContainerElement extends HTMLElement = HTMLElement> = { [Key in keyof PartProps<TContainerElement> as `get${Capitalize<Key>}Props`]: (props?: PartProps<TContainerElement>[Key]["input"]) => PartProps<TContainerElement>[Key]["output"] };
+type PartInputProps<TContainerElement extends HTMLElement = HTMLElement> = { [Key in keyof PartProps<TContainerElement>]: PartProps<TContainerElement>[Key]["input"] };
 type DragScrollState = {
   /** Whether the container can scroll forward (right/down) */canGoToNext: boolean; /** Whether the container can scroll backward (left/up) */
   canGoToPrev: boolean; /** Whether the user is currently dragging */
   isDragging: boolean;
 };
-type DragScrollActions<TElement extends HTMLElement> = {
+type DragScrollActions = {
   actions: {
     cleanupDragListeners: () => void;
     goToNext: () => void;
@@ -118,19 +128,12 @@ type DragScrollActions<TElement extends HTMLElement> = {
     handleMouseUpOrLeave: () => void;
     handleScroll: () => void;
     initializeResizeObserver: () => (() => void) | undefined;
-    setContainerRef: (element: TElement | null) => void;
+    setContainerRef: (element: HTMLElement | null) => void;
     updateScrollState: () => void;
   };
 };
-type DragScrollStore<TElement extends HTMLElement> = DragScrollActions<TElement> & DragScrollState;
+type DragScrollStore = DragScrollActions & DragScrollState;
 type UseDragScrollProps = {
-  /**
-   * Custom class names for the root container and items
-   */
-  classNames?: {
-    base?: string;
-    item?: string;
-  };
   /**
    * Whether to disable the internal state subscription for setting things like data attributes
    * - This is useful if you want to subscribe to the state yourself
@@ -161,15 +164,46 @@ type UseDragScrollProps = {
    */
   usage?: "allScreens" | "desktopOnly" | "mobileAndTabletOnly";
 };
-type UseDragScrollResult<TElement extends HTMLElement> = Pick<UseDragScrollProps, "disableInternalStateSubscription"> & {
-  containerRef: React.RefObject<TElement | null>;
-  propGetters: DragScrollPropGetters<TElement>;
-  storeApi: ReturnType<typeof createDragScrollStore<TElement>>;
+type UseDragScrollResult<TContainerElement extends HTMLElement> = Pick<UseDragScrollProps, "disableInternalStateSubscription"> & {
+  containerRef: React.RefObject<TContainerElement | null>;
+  propGetters: DragScrollPropGetters<TContainerElement>;
+  storeApi: ReturnType<typeof createDragScrollStore>;
   useDragScrollStore: typeof useDragScrollStoreContext;
 };
 //#endregion
 //#region src/components/ui/drag-scroll/use-drag-scroll.d.ts
-declare const useDragScroll: <TElement extends HTMLElement>(props?: UseDragScrollProps) => UseDragScrollResult<TElement>;
+declare const useDragScroll: <TContainerElement extends HTMLElement = HTMLElement>(props?: UseDragScrollProps) => UseDragScrollResult<TContainerElement>;
+//#endregion
+//#region src/components/ui/drag-scroll/drag-scroll.d.ts
+type DragScrollRootProps = UseDragScrollProps & {
+  asChild?: boolean;
+  children: React.ReactNode;
+} & PartInputProps["root"];
+declare function DragScrollRoot<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, DragScrollRootProps>): react_jsx_runtime0.JSX.Element;
+type DragScrollContextProps<TSlice> = {
+  children: React.ReactNode | ((context: TSlice) => React.ReactNode);
+  selector?: SelectorFn<DragScrollStore, TSlice>;
+};
+declare function DragScrollContext<TSlice = DragScrollStore>(props: DragScrollContextProps<TSlice>): react.ReactNode;
+type DragScrollContainerProps = {
+  asChild?: boolean;
+} & PartInputProps["container"];
+declare function DragScrollContainer<TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, DragScrollContainerProps>): react_jsx_runtime0.JSX.Element;
+type DragScrollItemProps = {
+  asChild?: boolean;
+} & PartInputProps["item"];
+declare function DragScrollItem<TElement extends React.ElementType = "li">(props: PolymorphicPropsStrict<TElement, DragScrollItemProps>): react_jsx_runtime0.JSX.Element;
+type DragScrollPrevProps = {
+  asChild?: boolean;
+} & PartInputProps["prevButton"];
+declare function DragScrollPrev(props: DragScrollPrevProps): react_jsx_runtime0.JSX.Element;
+type DragScrollNextProps = {
+  asChild?: boolean;
+} & PartInputProps["nextButton"];
+declare function DragScrollNext(props: DragScrollNextProps): react_jsx_runtime0.JSX.Element;
+declare namespace drag_scroll_parts_d_exports {
+  export { DragScrollContainer as Container, DragScrollContext as Context, DragScrollItem as Item, DragScrollNext as Next, DragScrollPrev as Prev, DragScrollRoot as Root };
+}
 //#endregion
-export { type DragScrollStore, type UseDragScrollProps, type UseDragScrollResult, useDragScroll };
+export { drag_scroll_parts_d_exports as DragScroll, DragScrollContainer, DragScrollContainerProps, DragScrollContext, DragScrollContextProps, DragScrollItem, DragScrollItemProps, DragScrollNext, DragScrollNextProps, DragScrollPrev, DragScrollPrevProps, DragScrollRoot, DragScrollRootProps, type DragScrollStore, type UseDragScrollProps, type UseDragScrollResult, useDragScroll, useDragScrollStoreContext };
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/ui/drag-scroll/index.js

@@ -1,9 +1,14 @@
-import { t as cnMerge } from "../../cn-Bbh2G587.js";
+"use client";
+import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
+import { n as SlotRoot } from "../../slot-CHR5Li4r.js";
+import { t as cnMerge } from "../../cn-CIbU5eI0.js";
 import { composeRefs, composeTwoEventHandlers } from "@zayne-labs/toolkit-react/utils";
-import { isNumber } from "@zayne-labs/toolkit-type-helpers";
+import { isFunction, isNumber } from "@zayne-labs/toolkit-type-helpers";
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useCallbackRef, useStore } from "@zayne-labs/toolkit-react";
+import { jsx } from "react/jsx-runtime";
 import { checkIsDeviceMobile, createStore, dataAttr, on, throttleByFrame } from "@zayne-labs/toolkit-core";
+import { createCustomContext, useCallbackRef, useCompareSelector, useStore } from "@zayne-labs/toolkit-react";
+import { createReactStoreContext } from "@zayne-labs/toolkit-react/zustand";
 //#region src/components/ui/drag-scroll/utils.ts
 const updateCursor = (element) => {
 	element.style.cursor = "grabbing";
@@ -174,7 +179,7 @@ const getScopeAttrs = (part) => ({
 	"data-slot": `drag-scroll-${part}`
 });
 const useDragScroll = (props) => {
-	const { classNames, disableInternalStateSubscription = false, orientation = "horizontal", scrollAmount = "item", usage = "allScreens" } = props ?? {};
+	const { disableInternalStateSubscription = false, orientation = "horizontal", scrollAmount = "item", usage = "allScreens" } = props ?? {};
 	const containerRef = useRef(null);
 	const storeApi = useMemo(() => {
 		return createDragScrollStore({
@@ -208,33 +213,39 @@ const useDragScroll = (props) => {
 	useEffect(() => {
 		return actions.initializeResizeObserver();
 	}, [actions]);
-	const getRootProps = useCallback((innerProps) => {
+	const getRootProps = useCallbackRef((innerProps) => {
 		return {
 			...getScopeAttrs("root"),
+			...innerProps,
+			className: cnMerge("relative", innerProps?.className)
+		};
+	});
+	const getContainerProps = useCallback((innerProps) => {
+		return {
+			...getScopeAttrs("container"),
 			...!disableInternalStateSubscription && { "data-dragging": dataAttr(isDragging) },
 			...innerProps,
-			className: cnMerge(`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-hidden`, orientation === "horizontal" && "flex-row", orientation === "vertical" && "flex-col", usage === "mobileAndTabletOnly" && "md:cursor-default md:flex-col", usage === "desktopOnly" && "max-md:cursor-default max-md:flex-col", classNames?.base, innerProps?.className),
+			className: cnMerge(`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-hidden`, orientation === "horizontal" && "flex-row", orientation === "vertical" && "flex-col", usage === "mobileAndTabletOnly" && "md:cursor-default md:flex-col", usage === "desktopOnly" && "max-md:cursor-default max-md:flex-col", innerProps?.className),
 			ref: composeRefs(refCallback, innerProps?.ref)
 		};
 	}, [
-		classNames?.base,
 		disableInternalStateSubscription,
 		isDragging,
 		orientation,
 		refCallback,
 		usage
 	]);
-	const getItemProps = useCallback((innerProps) => {
+	const getItemProps = useCallbackRef((innerProps) => {
 		return {
 			...getScopeAttrs("item"),
 			...innerProps,
-			className: cnMerge("snap-center snap-always", classNames?.item, innerProps?.className)
+			className: cnMerge("snap-center snap-always", innerProps?.className)
 		};
-	}, [classNames?.item]);
-	const getBackButtonProps = useCallback((innerProps) => {
+	});
+	const getPrevButtonProps = useCallback((innerProps) => {
 		const isDisabled = innerProps?.disabled ?? !canGoToPrev;
 		return {
-			...getScopeAttrs("back-button"),
+			...getScopeAttrs("prev-button"),
 			type: "button",
 			...innerProps,
 			"aria-disabled": dataAttr(isDisabled),
@@ -258,12 +269,14 @@ const useDragScroll = (props) => {
 		};
 	}, [actions.goToNext, canGoToNext]);
 	const propGetters = useMemo(() => ({
-		getBackButtonProps,
+		getContainerProps,
 		getItemProps,
 		getNextButtonProps,
+		getPrevButtonProps,
 		getRootProps
 	}), [
-		getBackButtonProps,
+		getPrevButtonProps,
+		getContainerProps,
 		getItemProps,
 		getNextButtonProps,
 		getRootProps
@@ -283,6 +296,77 @@ const useDragScroll = (props) => {
 	]);
 };
 //#endregion
-export { useDragScroll };
+//#region src/components/ui/drag-scroll/drag-scroll-context.ts
+const [DragScrollStoreContextProvider, useDragScrollStoreContext] = createReactStoreContext({
+	hookName: "useDragScrollStoreContext",
+	name: "DragScrollStoreContext",
+	providerName: "DragScrollRoot"
+});
+const [DragScrollRootContextProvider, useDragScrollRootContext] = createCustomContext({
+	hookName: "useDragScrollRootContext",
+	name: "DragScrollRootContext",
+	providerName: "DragScrollRoot"
+});
+//#endregion
+//#region src/components/ui/drag-scroll/drag-scroll.tsx
+function DragScrollRoot(props) {
+	const { as: Element = "div", asChild, children, ...restOfProps } = props;
+	const { containerRef, disableInternalStateSubscription, propGetters, storeApi } = useDragScroll(restOfProps);
+	return /* @__PURE__ */ jsx(DragScrollStoreContextProvider, {
+		store: storeApi,
+		children: /* @__PURE__ */ jsx(DragScrollRootContextProvider, {
+			value: useMemo(() => ({
+				containerRef,
+				disableInternalStateSubscription,
+				propGetters
+			}), [
+				containerRef,
+				disableInternalStateSubscription,
+				propGetters
+			]),
+			children: /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, {
+				...propGetters.getRootProps(restOfProps),
+				children
+			})
+		})
+	});
+}
+function DragScrollContext(props) {
+	const { children, selector } = props;
+	const dragScrollCtx = useDragScrollStoreContext(useCompareSelector(selector));
+	return isFunction(children) ? children(dragScrollCtx) : children;
+}
+function DragScrollContainer(props) {
+	const { as: Element = "ul", asChild, ...restOfProps } = props;
+	const { propGetters } = useDragScrollRootContext();
+	return /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, { ...propGetters.getContainerProps(restOfProps) });
+}
+function DragScrollItem(props) {
+	const { as: Element = "li", asChild, ...restOfProps } = props;
+	const { propGetters } = useDragScrollRootContext();
+	return /* @__PURE__ */ jsx(asChild ? SlotRoot : Element, { ...propGetters.getItemProps(restOfProps) });
+}
+function DragScrollPrev(props) {
+	const { asChild, ...restOfProps } = props;
+	const { propGetters } = useDragScrollRootContext();
+	return /* @__PURE__ */ jsx(asChild ? SlotRoot : "button", { ...propGetters.getPrevButtonProps(restOfProps) });
+}
+function DragScrollNext(props) {
+	const { asChild, ...restOfProps } = props;
+	const { propGetters } = useDragScrollRootContext();
+	return /* @__PURE__ */ jsx(asChild ? SlotRoot : "button", { ...propGetters.getNextButtonProps(restOfProps) });
+}
+//#endregion
+//#region src/components/ui/drag-scroll/drag-scroll-parts.ts
+var drag_scroll_parts_exports = /* @__PURE__ */ __exportAll({
+	Container: () => DragScrollContainer,
+	Context: () => DragScrollContext,
+	Item: () => DragScrollItem,
+	Next: () => DragScrollNext,
+	Prev: () => DragScrollPrev,
+	Root: () => DragScrollRoot
+});
+//#endregion
+export { drag_scroll_parts_exports as DragScroll, DragScrollContainer, DragScrollContext, DragScrollItem, DragScrollNext, DragScrollPrev, DragScrollRoot, useDragScroll, useDragScrollStoreContext };
 
 //# sourceMappingURL=index.js.map