@zayne-labs/ui-react 0.11.0 → 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

@@ -4,7 +4,6 @@ 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;

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

@@ -1,13 +1,13 @@
 "use client";
 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 { composeRefs, composeTwoEventHandlers } from "@zayne-labs/toolkit-react/utils";
 import { isFunction, isNumber } from "@zayne-labs/toolkit-type-helpers";
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { createCustomContext, useCallbackRef, useCompareSelector, 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) => {

package/dist/esm/ui/drop-zone/index.d.ts

@@ -5,7 +5,6 @@ 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";
 import { FileMeta, FileOrFileMeta, FileValidationErrorContextEach, FileValidationHooksAsync, FileValidationSettingsAsync } from "@zayne-labs/toolkit-core";
-
 //#region src/components/ui/drop-zone/drop-zone-store.d.ts
 type RequiredUseDropZoneProps = { [Key in keyof Required<UseDropZoneProps>]: UseDropZoneProps[Key] | undefined };
 type StoreContext = Pick<RequiredUseDropZoneProps, "allowedFileTypes" | "disablePreviewGenForNonImageFiles" | "initialFiles" | "maxFileCount" | "maxFileSize" | "multiple" | "onFilesChange" | "onUpload" | "onValidationError" | "onValidationSuccess" | "rejectDuplicateFiles" | "validator">;
@@ -352,19 +351,29 @@ type DropZoneFileItemDeleteProps = {
   asChild?: boolean;
 } & PartInputProps["fileItemDelete"];
 declare function DropZoneFileItemDelete(props: DropZoneFileItemDeleteProps): react_jsx_runtime0.JSX.Element;
+type StrictExtract<TUnion, TPick extends TUnion> = Extract<TUnion, TPick>;
 type DropZoneFileItemProgressProps = {
   asChild?: boolean;
-  classNames?: {
-    circular?: {
-      root?: string;
-      svgCircleOne?: string;
-      svgCircleTwo?: string;
-      svgRoot?: string;
-    };
-  };
   forceMount?: boolean;
   size?: number;
-} & PartInputProps["fileItemProgress"];
+} & PartInputProps["fileItemProgress"] & ({
+  classNames?: {
+    svgCircleOne?: string;
+    svgCircleTwo?: string;
+    svgRoot?: string;
+  };
+  variant: StrictExtract<PartInputProps["fileItemProgress"]["variant"], "circular">;
+} | {
+  classNames?: {
+    track?: string;
+  };
+  variant: StrictExtract<PartInputProps["fileItemProgress"]["variant"], "fill">;
+} | {
+  classNames?: {
+    track?: string;
+  };
+  variant?: StrictExtract<PartInputProps["fileItemProgress"]["variant"], "linear">;
+});
 declare function DropZoneFileItemProgress<TElement extends React.ElementType = "span">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProgressProps>): react_jsx_runtime0.JSX.Element | null;
 type NodeCtx<TElement extends React.ElementType> = {
   getProps: (innerProps: Partial<InferProps<TElement>>) => InferProps<TElement>;

package/dist/esm/ui/drop-zone/index.js

@@ -1,15 +1,16 @@
 "use client";
 import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
-import { n as SlotRoot } from "../../slot-DuwoiC2C.js";
+import { n as SlotRoot } from "../../slot-CHR5Li4r.js";
+import { t as cnMerge } from "../../cn-CIbU5eI0.js";
 import { n as For } from "../../for-DGTMIS0w.js";
-import { t as Presence } from "../../presence-CWOGx-be.js";
-import { t as cnMerge } from "../../cn-Bbh2G587.js";
+import { t as Presence } from "../../presence-DgJvW30C.js";
+import { i as SwitchRoot, r as SwitchMatch } from "../../switch-Dwy5Gzsb.js";
 import { composeRefs, composeTwoEventHandlers } from "@zayne-labs/toolkit-react/utils";
 import { isBoolean, isFile, isFunction, isNumber, isObject, isString } from "@zayne-labs/toolkit-type-helpers";
 import { useCallback, useMemo, useRef } from "react";
-import { createCustomContext, useCallbackRef, useCompareSelector, useCompareValue, useStore, useUnmountEffect } from "@zayne-labs/toolkit-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createFileURL, createStore, dataAttr, formatBytes, generateFileID, handleFileValidationAsync, toArray } from "@zayne-labs/toolkit-core";
+import { createCustomContext, useCallbackRef, useCompareSelector, useCompareValue, useStore, useUnmountEffect } from "@zayne-labs/toolkit-react";
 import { createReactStoreContext } from "@zayne-labs/toolkit-react/zustand";
 //#region src/components/ui/drop-zone/drop-zone-context.ts
 const [DropZoneStoreContextProvider, useDropZoneStoreContext] = createReactStoreContext({
@@ -592,7 +593,7 @@ const useDropZone = (props) => {
 			...getDropZoneScopeAttrs("file-item-progress"),
 			role: "progressbar",
 			...restOfInnerProps,
-			...!unstyled && { className: cnMerge("inline-flex", variant === "circular" && "absolute top-1/2 left-1/2 -translate-1/2", variant === "fill" && `absolute inset-0 bg-zu-primary/50 transition-[clip-path] duration-300 ease-linear [clip-path:var(--clip-path)]`, variant === "linear" && "relative h-1.5 w-full overflow-hidden rounded-full bg-zu-primary/20", restOfInnerProps.className) }
+			...!unstyled && { className: cnMerge("inline-flex", variant === "circular" && "absolute top-1/2 left-1/2 -translate-1/2", variant === "fill" && `absolute inset-0`, variant === "linear" && "relative h-1.5 w-full overflow-hidden rounded-full bg-zu-primary/20", restOfInnerProps.className) }
 		};
 	}, [globalUnstyled]);
 	const getFileItemDeleteProps = useCallback((innerProps) => {
@@ -803,72 +804,74 @@ function DropZoneFileItemDelete(props) {
 	}) });
 }
 function DropZoneFileItemProgress(props) {
-	const { as: Element = "span", asChild, className, classNames, forceMount = false, size = 40, variant = "linear", ...restOfProps } = props;
+	const { as: Element = "span", asChild, className, classNames: classNamesProp, forceMount = false, size = 40, variant = "linear", ...restOfProps } = props;
+	const classNames = classNamesProp;
 	const fileState = useFileItemContext()?.fileState;
 	const { propGetters } = useDropZoneRootContext();
 	if (!fileState) return null;
-	const currentProgress = fileState.progress;
-	if (!(forceMount || fileState.progress !== 100)) return null;
 	const Component = asChild ? SlotRoot : Element;
 	const componentProps = propGetters.getFileItemProgressProps({
 		variant,
 		...restOfProps
 	});
-	switch (variant) {
-		case "circular": {
-			const circumference = 2 * Math.PI * ((size - 4) / 2);
-			const strokeDashoffset = circumference - currentProgress / 100 * circumference;
-			return /* @__PURE__ */ jsx(Component, {
-				className: cnMerge(className, classNames?.circular?.root),
-				...componentProps,
-				children: /* @__PURE__ */ jsxs("svg", {
-					className: cnMerge("-rotate-90", classNames?.circular?.svgRoot),
-					width: size,
-					height: size,
-					viewBox: `0 0 ${size} ${size}`,
-					fill: "none",
-					stroke: "currentColor",
-					children: [/* @__PURE__ */ jsx("circle", {
-						className: cnMerge("text-zu-primary/20", classNames?.circular?.svgCircleOne),
-						strokeWidth: "2",
-						cx: size / 2,
-						cy: size / 2,
-						r: (size - 4) / 2
-					}), /* @__PURE__ */ jsx("circle", {
-						className: cnMerge("text-zu-primary transition-[stroke-dashoffset] duration-300 ease-linear", classNames?.circular?.svgCircleTwo),
-						strokeWidth: "2",
-						strokeLinecap: "round",
-						strokeDasharray: circumference,
-						strokeDashoffset,
-						cx: size / 2,
-						cy: size / 2,
-						r: (size - 4) / 2
-					})]
-				})
-			});
-		}
-		case "fill": {
-			const topInset = 100 - currentProgress;
-			return /* @__PURE__ */ jsx(Component, {
-				className,
-				...componentProps,
-				style: {
-					"--clip-path": `inset(${topInset}% 0% 0% 0%)`,
-					...componentProps.style
-				}
-			});
-		}
-		case "linear": return /* @__PURE__ */ jsx(Component, {
-			className: cnMerge("inline-block size-full grow translate-x-(--translate-distance) bg-zu-primary transition-transform duration-300 ease-linear", className),
+	return /* @__PURE__ */ jsx(Presence, {
+		present: fileState.progress !== 100,
+		forceMount,
+		className: "data-[animation-phase=exit]:animate-progress-out",
+		children: /* @__PURE__ */ jsx(Component, {
+			className: cnMerge("inline-block", className),
 			...componentProps,
-			style: {
-				"--translate-distance": `-${100 - currentProgress}%`,
-				...componentProps.style
-			},
-			children: /* @__PURE__ */ jsx("span", {})
-		});
-		default: return null;
-	}
+			children: /* @__PURE__ */ jsxs(SwitchRoot, { children: [
+				/* @__PURE__ */ jsx(SwitchMatch, {
+					when: variant === "circular",
+					children: () => {
+						const circumference = 2 * Math.PI * ((size - 4) / 2);
+						const strokeDashoffset = circumference - fileState.progress / 100 * circumference;
+						return /* @__PURE__ */ jsxs("svg", {
+							className: cnMerge("-rotate-90", classNames?.svgRoot),
+							width: size,
+							height: size,
+							viewBox: `0 0 ${size} ${size}`,
+							fill: "none",
+							stroke: "currentColor",
+							children: [/* @__PURE__ */ jsx("circle", {
+								className: cnMerge("text-zu-primary/20", classNames?.svgCircleOne),
+								strokeWidth: "2",
+								cx: size / 2,
+								cy: size / 2,
+								r: (size - 4) / 2
+							}), /* @__PURE__ */ jsx("circle", {
+								className: cnMerge("text-zu-primary transition-[stroke-dashoffset] duration-300 ease-linear", classNames?.svgCircleTwo),
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeDasharray: 2 * Math.PI * ((size - 4) / 2),
+								strokeDashoffset,
+								cx: size / 2,
+								cy: size / 2,
+								r: (size - 4) / 2
+							})]
+						});
+					}
+				}),
+				/* @__PURE__ */ jsx(SwitchMatch, {
+					when: variant === "fill",
+					children: /* @__PURE__ */ jsx("span", {
+						className: cnMerge(`size-full bg-zu-primary/50 transition-[clip-path] duration-300 ease-linear
+								[clip-path:var(--clip-path)]`, classNames?.track),
+						style: { "--clip-path": `inset(${100 - fileState.progress}% 0% 0% 0%)` }
+					})
+				}),
+				/* @__PURE__ */ jsx(SwitchMatch, {
+					when: variant === "linear",
+					children: /* @__PURE__ */ jsx("span", {
+						className: cnMerge(`inline-block size-full grow translate-x-(--translate-distance) bg-zu-primary
+								transition-transform duration-300 ease-linear`, classNames?.track),
+						style: { "--translate-distance": `-${100 - fileState.progress}%` }
+					})
+				})
+			] })
+		})
+	});
 }
 function DropZoneFileItemPreview(props) {
 	const { as: Element = "span", asChild, children, fileState: fileStateProp, renderPreview = true, ...restOfProps } = props;