@zayne-labs/ui-react 0.1.5 → 0.2.1

package/dist/esm/chunk-CB2EZJYW.js

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { useEffectOnce, useMountEffect } from '@zayne-labs/toolkit-react';
+import { isString } from '@zayne-labs/toolkit-type-helpers';
+import { createPortal } from 'react-dom';
+
+// src/components/common/teleport/teleport.tsx
+function Teleport(props) {
+  const { children, insertPosition, to } = props;
+  const [reactPortal, setReactPortal] = useState(null);
+  useEffectOnce(() => {
+    if (!to || !insertPosition) return;
+    const destination = isString(to) ? document.querySelector(to) : to;
+    const tempWrapper = document.createElement("div");
+    tempWrapper.style.display = "contents";
+    destination?.insertAdjacentElement(insertPosition, tempWrapper);
+    setReactPortal(createPortal(children, tempWrapper));
+    return () => {
+      tempWrapper.remove();
+    };
+  });
+  useMountEffect(() => {
+    if (!to || insertPosition) return;
+    const destination = isString(to) ? document.querySelector(to) : to;
+    destination && setReactPortal(createPortal(children, destination));
+  });
+  return reactPortal;
+}
+
+export { Teleport };
+//# sourceMappingURL=chunk-CB2EZJYW.js.map
+//# sourceMappingURL=chunk-CB2EZJYW.js.map

package/dist/esm/chunk-CB2EZJYW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/common/teleport/teleport.tsx"],"names":[],"mappings":";;;;;;AAeA,SAAS,SAAS,KAAoB,EAAA;AACrC,EAAA,MAAM,EAAE,QAAA,EAAU,cAAgB,EAAA,EAAA,EAAO,GAAA,KAAA;AAEzC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAmC,IAAI,CAAA;AAE7E,EAAA,aAAA,CAAc,MAAM;AACnB,IAAI,IAAA,CAAC,EAAM,IAAA,CAAC,cAAgB,EAAA;AAE5B,IAAA,MAAM,cAAc,QAAS,CAAA,EAAE,IAAI,QAAS,CAAA,aAAA,CAA2B,EAAE,CAAI,GAAA,EAAA;AAE7E,IAAM,MAAA,WAAA,GAAc,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA;AAChD,IAAA,WAAA,CAAY,MAAM,OAAU,GAAA,UAAA;AAE5B,IAAa,WAAA,EAAA,qBAAA,CAAsB,gBAAgB,WAAW,CAAA;AAE9D,IAAe,cAAA,CAAA,YAAA,CAAa,QAAU,EAAA,WAAW,CAAC,CAAA;AAElD,IAAA,OAAO,MAAM;AACZ,MAAA,WAAA,CAAY,MAAO,EAAA;AAAA,KACpB;AAAA,GACA,CAAA;AAED,EAAA,cAAA,CAAe,MAAM;AACpB,IAAI,IAAA,CAAC,MAAM,cAAgB,EAAA;AAE3B,IAAA,MAAM,cAAc,QAAS,CAAA,EAAE,IAAI,QAAS,CAAA,aAAA,CAA2B,EAAE,CAAI,GAAA,EAAA;AAE7E,IAAA,WAAA,IAAe,cAAe,CAAA,YAAA,CAAa,QAAU,EAAA,WAAW,CAAC,CAAA;AAAA,GACjE,CAAA;AAED,EAAO,OAAA,WAAA;AACR","file":"chunk-CB2EZJYW.js","sourcesContent":["import * as React from \"react\";\n\nimport { useEffectOnce, useMountEffect } from \"@zayne-labs/toolkit-react\";\nimport { type AnyString, isString } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ntype ValidHtmlTags = keyof HTMLElementTagNameMap;\n\ntype PortalProps = {\n\tchildren: React.ReactNode;\n\tinsertPosition?: InsertPosition;\n\tto?: AnyString | HTMLElement | ValidHtmlTags | null;\n};\n\nfunction Teleport(props: PortalProps) {\n\tconst { children, insertPosition, to } = props;\n\n\tconst [reactPortal, setReactPortal] = useState<React.ReactPortal | null>(null);\n\n\tuseEffectOnce(() => {\n\t\tif (!to || !insertPosition) return;\n\n\t\tconst destination = isString(to) ? document.querySelector<HTMLElement>(to) : to;\n\n\t\tconst tempWrapper = document.createElement(\"div\");\n\t\ttempWrapper.style.display = \"contents\";\n\n\t\tdestination?.insertAdjacentElement(insertPosition, tempWrapper);\n\n\t\tsetReactPortal(createPortal(children, tempWrapper));\n\n\t\treturn () => {\n\t\t\ttempWrapper.remove();\n\t\t};\n\t});\n\n\tuseMountEffect(() => {\n\t\tif (!to || insertPosition) return;\n\n\t\tconst destination = isString(to) ? document.querySelector<HTMLElement>(to) : to;\n\n\t\tdestination && setReactPortal(createPortal(children, destination));\n\t});\n\n\treturn reactPortal;\n}\n\nexport { Teleport };\n"]}

package/dist/esm/chunk-E3UC4AGS.js

@@ -0,0 +1,119 @@
+import { cnMerge } from './chunk-OHG7GB7O.js';
+import { off, on, checkIsDeviceMobileOrTablet } from '@zayne-labs/toolkit-core';
+import { useCallbackRef } from '@zayne-labs/toolkit-react';
+import { mergeTwoProps, composeRefs } from '@zayne-labs/toolkit-react/utils';
+import { useRef } from 'react';
+
+var updateCursor = (element) => {
+  element.style.cursor = "grabbing";
+  element.style.userSelect = "none";
+};
+var onScrollSnap = (action, element) => {
+  if (action === "remove") {
+    element.style.scrollSnapType = "none";
+    return;
+  }
+  element.style.scrollSnapType = "";
+};
+var resetCursor = (element) => {
+  element.style.cursor = "";
+  element.style.userSelect = "";
+};
+var handleScrollSnap = (dragContainer) => {
+  const isMobileOrTablet = checkIsDeviceMobileOrTablet();
+  if (!isMobileOrTablet) {
+    onScrollSnap("remove", dragContainer);
+  } else {
+    onScrollSnap("reset", dragContainer);
+  }
+};
+
+// src/components/ui/drag-scroll/use-drag-scroll.ts
+var useDragScroll = (props = {}) => {
+  const {
+    classNames,
+    extraItemProps,
+    extraRootProps,
+    orientation = "horizontal",
+    usage = "allScreens"
+  } = props;
+  const dragContainerRef = useRef(null);
+  const positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });
+  const handleMouseMove = useCallbackRef((event) => {
+    if (!dragContainerRef.current) return;
+    if (orientation === "horizontal" || orientation === "both") {
+      const dx = event.clientX - positionRef.current.x;
+      dragContainerRef.current.scrollLeft = positionRef.current.left - dx;
+    }
+    if (orientation === "vertical" || orientation === "both") {
+      const dy = event.clientY - positionRef.current.y;
+      dragContainerRef.current.scrollTop = positionRef.current.top - dy;
+    }
+  });
+  const handleMouseUpOrLeave = useCallbackRef(() => {
+    if (!dragContainerRef.current) return;
+    off("mousemove", dragContainerRef.current, handleMouseMove);
+    off("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
+    off("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
+    resetCursor(dragContainerRef.current);
+  });
+  const handleMouseDown = useCallbackRef((event) => {
+    if (usage === "mobileAndTabletOnly" && window.innerWidth >= 768) return;
+    if (usage === "desktopOnly" && window.innerWidth < 768) return;
+    if (!dragContainerRef.current) return;
+    if (orientation === "horizontal" || orientation === "both") {
+      positionRef.current.x = event.clientX;
+      positionRef.current.left = dragContainerRef.current.scrollLeft;
+    }
+    if (orientation === "vertical" || orientation === "both") {
+      positionRef.current.y = event.clientY;
+      positionRef.current.top = dragContainerRef.current.scrollTop;
+    }
+    updateCursor(dragContainerRef.current);
+    on("mousemove", dragContainerRef.current, handleMouseMove);
+    on("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
+    on("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
+  });
+  const refCallBack = useCallbackRef((node) => {
+    dragContainerRef.current = node;
+    node && handleScrollSnap(node);
+    const cleanup = on("mousedown", dragContainerRef.current, handleMouseDown);
+    return cleanup;
+  });
+  const getRootProps = (rootProps) => {
+    const mergedRootProps = mergeTwoProps(extraRootProps, rootProps);
+    return {
+      ...mergedRootProps,
+      className: cnMerge(
+        `flex w-full cursor-grab snap-x snap-mandatory overflow-y-clip overflow-x-scroll
+				[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]: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,
+        mergedRootProps.className
+      ),
+      "data-part": "root",
+      "data-scope": "drag-scroll",
+      ref: composeRefs([
+        refCallBack,
+        mergedRootProps?.ref
+      ])
+    };
+  };
+  const getItemProps = (itemProps) => {
+    const mergedItemProps = mergeTwoProps(extraItemProps, itemProps);
+    return {
+      ...mergedItemProps,
+      className: cnMerge("snap-center snap-always", classNames?.item, mergedItemProps.className),
+      "data-part": "item",
+      "data-scope": "drag-scroll"
+    };
+  };
+  return { getItemProps, getRootProps };
+};
+
+export { useDragScroll };
+//# sourceMappingURL=chunk-E3UC4AGS.js.map
+//# sourceMappingURL=chunk-E3UC4AGS.js.map

package/dist/esm/chunk-E3UC4AGS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ui/drag-scroll/utils.ts","../../src/components/ui/drag-scroll/use-drag-scroll.ts"],"names":[],"mappings":"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","file":"chunk-E3UC4AGS.js","sourcesContent":["import { checkIsDeviceMobileOrTablet } from \"@zayne-labs/toolkit-core\";\n\n/* eslint-disable no-param-reassign -- Mutation is needed here since it's an element */\nexport const updateCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"grabbing\";\n\telement.style.userSelect = \"none\";\n};\n\nexport const onScrollSnap = <TElement extends HTMLElement>(\n\taction: \"remove\" | \"reset\",\n\telement: TElement\n) => {\n\tif (action === \"remove\") {\n\t\telement.style.scrollSnapType = \"none\";\n\t\treturn;\n\t}\n\n\telement.style.scrollSnapType = \"\";\n};\n\nexport const resetCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"\";\n\telement.style.userSelect = \"\";\n};\n/* eslint-enable no-param-reassign  -- Mutation is needed here since it's an element */\n\nexport const handleScrollSnap = (dragContainer: HTMLElement) => {\n\tconst isMobileOrTablet = checkIsDeviceMobileOrTablet();\n\n\tif (!isMobileOrTablet) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { cnMerge } from \"@/lib/utils/cn\";\nimport { off, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { type InferProps, composeRefs, mergeTwoProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type RefCallback, useRef } from \"react\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype DragScrollProps<TElement extends HTMLElement> = {\n\tclassNames?: { base?: string; item?: string };\n\textraItemProps?: InferProps<HTMLElement>;\n\textraRootProps?: Omit<InferProps<TElement>, \"children\">;\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\nconst useDragScroll = <TElement extends HTMLElement>(props: DragScrollProps<TElement> = {}) => {\n\tconst {\n\t\tclassNames,\n\t\textraItemProps,\n\t\textraRootProps,\n\t\torientation = \"horizontal\",\n\t\tusage = \"allScreens\",\n\t} = props;\n\n\tconst dragContainerRef = useRef<TElement>(null);\n\n\tconst positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });\n\n\tconst handleMouseMove = useCallbackRef((event: MouseEvent) => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the horizontal scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dx = event.clientX - positionRef.current.x;\n\n\t\t\t// == Assign the scrollLeft of the container to the difference between its previous horizontal scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the vertical scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dy = event.clientY - positionRef.current.y;\n\n\t\t\t// == Assign the scrollTop of the container to the difference between its previous vertical scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollTop = positionRef.current.top - dy;\n\t\t}\n\t});\n\n\tconst handleMouseUpOrLeave = useCallbackRef(() => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\toff(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\toff(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\toff(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\n\t\tresetCursor(dragContainerRef.current);\n\t});\n\n\tconst handleMouseDown = useCallbackRef((event: MouseEvent) => {\n\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\tif (!dragContainerRef.current) return;\n\n\t\t// == Update all initial position properties stored in the positionRef\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\tpositionRef.current.x = event.clientX;\n\t\t\tpositionRef.current.left = dragContainerRef.current.scrollLeft;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\tpositionRef.current.y = event.clientY;\n\t\t\tpositionRef.current.top = dragContainerRef.current.scrollTop;\n\t\t}\n\n\t\tupdateCursor(dragContainerRef.current);\n\n\t\ton(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\ton(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\ton(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\t});\n\n\tconst refCallBack: RefCallback<TElement> = useCallbackRef((node) => {\n\t\tdragContainerRef.current = node;\n\n\t\tnode && handleScrollSnap(node);\n\n\t\tconst cleanup = on(\"mousedown\", dragContainerRef.current, handleMouseDown);\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps = (rootProps?: DragScrollProps<TElement>[\"extraRootProps\"]) => {\n\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\treturn {\n\t\t\t...mergedRootProps,\n\t\t\tclassName: cnMerge(\n\t\t\t\t`flex w-full cursor-grab snap-x snap-mandatory overflow-y-clip overflow-x-scroll\n\t\t\t\t[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,\n\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\tclassNames?.base,\n\t\t\t\tmergedRootProps.className\n\t\t\t),\n\t\t\t\"data-part\": \"root\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\tref: composeRefs([\n\t\t\t\trefCallBack,\n\t\t\t\t(mergedRootProps as { ref?: React.Ref<TElement> } | undefined)?.ref,\n\t\t\t]),\n\t\t};\n\t};\n\n\tconst getItemProps = <TItemElement extends HTMLElement>(\n\t\titemProps?: DragScrollProps<TItemElement>[\"extraItemProps\"]\n\t) => {\n\t\tconst mergedItemProps = mergeTwoProps(extraItemProps, itemProps);\n\n\t\treturn {\n\t\t\t...mergedItemProps,\n\t\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item, mergedItemProps.className),\n\t\t\t\"data-part\": \"item\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t};\n\t};\n\n\treturn { getItemProps, getRootProps };\n};\n\nexport { useDragScroll };\n"]}

package/dist/esm/chunk-HKPJTORQ.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-HKPJTORQ.js.map
+//# sourceMappingURL=chunk-HKPJTORQ.js.map

package/dist/esm/chunk-HKPJTORQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-HKPJTORQ.js"}

package/dist/esm/chunk-JKLRBPJZ.js

@@ -0,0 +1,40 @@
+import { __export } from './chunk-PZ5AY32C.js';
+import 'react';
+import { getSlotElement, getOtherChildren } from '@zayne-labs/toolkit-react/utils';
+import { isFunction } from '@zayne-labs/toolkit-type-helpers';
+
+var defaultConditionSymbol = Symbol("condition-default");
+function SwitchRoot(props) {
+  const { children, condition = defaultConditionSymbol } = props;
+  const defaultCase = getSlotElement(children, SwitchDefault, {
+    errorMessage: "Only one <Switch.Default> component is allowed",
+    throwOnMultipleSlotMatch: true
+  });
+  const childrenCasesArray = getOtherChildren(children, SwitchDefault);
+  const matchedCase = childrenCasesArray.find(
+    (child) => condition === defaultConditionSymbol ? child.props.when : child.props.when === condition
+  );
+  return matchedCase ?? defaultCase;
+}
+function SwitchMatch({ children, when }) {
+  if (when == null || when === false) {
+    return null;
+  }
+  return isFunction(children) ? children(when) : children;
+}
+function SwitchDefault({ children }) {
+  return children;
+}
+SwitchDefault.slot = Symbol.for("switch-default");
+
+// src/components/common/switch/switch-parts.ts
+var switch_parts_exports = {};
+__export(switch_parts_exports, {
+  Default: () => SwitchDefault,
+  Match: () => SwitchMatch,
+  Root: () => SwitchRoot
+});
+
+export { SwitchDefault, SwitchMatch, SwitchRoot, switch_parts_exports };
+//# sourceMappingURL=chunk-JKLRBPJZ.js.map
+//# sourceMappingURL=chunk-JKLRBPJZ.js.map

package/dist/esm/chunk-JKLRBPJZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/common/switch/switch.tsx","../../src/components/common/switch/switch-parts.ts"],"names":[],"mappings":";;;;;AAmBA,IAAM,sBAAA,GAAyB,OAAO,mBAAmB,CAAA;AAElD,SAAS,WAA8B,KAAgC,EAAA;AAC7E,EAAA,MAAM,EAAE,QAAA,EAAU,SAAY,GAAA,sBAAA,EAA2B,GAAA,KAAA;AAEzD,EAAM,MAAA,WAAA,GAAc,cAAe,CAAA,QAAA,EAAU,aAAe,EAAA;AAAA,IAC3D,YAAc,EAAA,gDAAA;AAAA,IACd,wBAA0B,EAAA;AAAA,GAC1B,CAAA;AAED,EAAM,MAAA,kBAAA,GAAqB,gBAAiB,CAAA,QAAA,EAAU,aAAa,CAAA;AAEnE,EAAA,MAAM,cAAc,kBAAmB,CAAA,IAAA;AAAA,IAAK,CAAC,UAC5C,SAAc,KAAA,sBAAA,GAAyB,MAAM,KAAM,CAAA,IAAA,GAAO,KAAM,CAAA,KAAA,CAAM,IAAS,KAAA;AAAA,GAChF;AAEA,EAAA,OAAO,WAAe,IAAA,WAAA;AACvB;AAEO,SAAS,WAAmB,CAAA,EAAE,QAAU,EAAA,IAAA,EAAiC,EAAA;AAC/E,EAAI,IAAA,IAAA,IAAQ,IAAQ,IAAA,IAAA,KAAS,KAAO,EAAA;AACnC,IAAO,OAAA,IAAA;AAAA;AAGR,EAAA,OAAO,UAAW,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,IAAI,CAAI,GAAA,QAAA;AAChD;AAEO,SAAS,aAAA,CAAc,EAAE,QAAA,EAA2C,EAAA;AAC1E,EAAO,OAAA,QAAA;AACR;AACA,aAAc,CAAA,IAAA,GAAO,MAAO,CAAA,GAAA,CAAI,gBAAgB,CAAA;;;ACjDhD,IAAA,oBAAA,GAAA;AAAA,QAAA,CAAA,oBAAA,EAAA;AAAA,EAAA,OAAA,EAAA,MAAA,aAAA;AAAA,EAAA,KAAA,EAAA,MAAA,WAAA;AAAA,EAAA,IAAA,EAAA,MAAA;AAAA,CAAA,CAAA","file":"chunk-JKLRBPJZ.js","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { getOtherChildren, getSlotElement } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\n\ntype ValidSwitchComponentType = React.ReactElement<SwitchMatchProps>;\n\ntype SwitchProps<TCondition> = {\n\tchildren: ValidSwitchComponentType | ValidSwitchComponentType[];\n\tcondition?: TCondition;\n};\n\ntype SwitchMatchProps<TWhen = unknown> = {\n\tchildren: React.ReactNode | ((whenValue: TWhen) => React.ReactNode);\n\twhen: false | TWhen | null | undefined;\n};\n\nconst defaultConditionSymbol = Symbol(\"condition-default\");\n\nexport function SwitchRoot<TCondition = true>(props: SwitchProps<TCondition>) {\n\tconst { children, condition = defaultConditionSymbol } = props;\n\n\tconst defaultCase = getSlotElement(children, SwitchDefault, {\n\t\terrorMessage: \"Only one <Switch.Default> component is allowed\",\n\t\tthrowOnMultipleSlotMatch: true,\n\t});\n\n\tconst childrenCasesArray = getOtherChildren(children, SwitchDefault);\n\n\tconst matchedCase = childrenCasesArray.find((child) =>\n\t\tcondition === defaultConditionSymbol ? child.props.when : child.props.when === condition\n\t);\n\n\treturn matchedCase ?? defaultCase;\n}\n\nexport function SwitchMatch<TWhen>({ children, when }: SwitchMatchProps<TWhen>) {\n\tif (when == null || when === false) {\n\t\treturn null;\n\t}\n\n\treturn isFunction(children) ? children(when) : children;\n}\n\nexport function SwitchDefault({ children }: { children: React.ReactNode }) {\n\treturn children;\n}\nSwitchDefault.slot = Symbol.for(\"switch-default\");\n","export { SwitchDefault as Default, SwitchMatch as Match, SwitchRoot as Root } from \"./switch\";\n"]}

package/dist/esm/chunk-NCS3WKFW.js

@@ -0,0 +1,50 @@
+import { __export } from './chunk-PZ5AY32C.js';
+import 'react';
+import { getSlotElement, getOtherChildren } from '@zayne-labs/toolkit-react/utils';
+import { isFunction, AssertionError } from '@zayne-labs/toolkit-type-helpers';
+
+function ShowRoot({ children, fallback, when }) {
+  if ((when == null || when === false) && !isFunction(children)) {
+    const fallBackSlot = getSlotElement(children, ShowFallback, {
+      errorMessage: "Only one <Show.Fallback> or <Show.OtherWise> component is allowed",
+      throwOnMultipleSlotMatch: true
+    });
+    if (fallBackSlot && fallback) {
+      throw new AssertionError(`
+			The fallback prop and <Show.Fallback>/<Show.OtherWise> cannot be used at the same time.
+		`);
+    }
+    return fallBackSlot ?? fallback;
+  }
+  if (when == null || when === false) {
+    return fallback;
+  }
+  const resolvedChildren = isFunction(children) ? children(when) : children;
+  const contentSlot = getSlotElement(resolvedChildren, ShowContent, {
+    errorMessage: "Only one <Show.Content> component is allowed",
+    throwOnMultipleSlotMatch: true
+  });
+  const otherChildren = getOtherChildren(resolvedChildren, [ShowFallback, ShowContent]);
+  return contentSlot ?? otherChildren;
+}
+function ShowContent({ children }) {
+  return children;
+}
+ShowContent.slot = Symbol.for("content");
+function ShowFallback({ children }) {
+  return children;
+}
+ShowFallback.slot = Symbol.for("show-fallback");
+
+// src/components/common/show/show-parts.ts
+var show_parts_exports = {};
+__export(show_parts_exports, {
+  Content: () => ShowContent,
+  Fallback: () => ShowFallback,
+  OtherWise: () => ShowFallback,
+  Root: () => ShowRoot
+});
+
+export { ShowContent, ShowFallback, ShowRoot, show_parts_exports };
+//# sourceMappingURL=chunk-NCS3WKFW.js.map
+//# sourceMappingURL=chunk-NCS3WKFW.js.map

package/dist/esm/chunk-NCS3WKFW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/common/show/show.tsx","../../src/components/common/show/show-parts.ts"],"names":[],"mappings":";;;;;AAaO,SAAS,QAAgB,CAAA,EAAE,QAAU,EAAA,QAAA,EAAU,MAA0B,EAAA;AAC/E,EAAA,IAAA,CAAK,QAAQ,IAAQ,IAAA,IAAA,KAAS,UAAU,CAAC,UAAA,CAAW,QAAQ,CAAG,EAAA;AAC9D,IAAM,MAAA,YAAA,GAAe,cAAe,CAAA,QAAA,EAAU,YAAc,EAAA;AAAA,MAC3D,YAAc,EAAA,mEAAA;AAAA,MACd,wBAA0B,EAAA;AAAA,KAC1B,CAAA;AAED,IAAA,IAAI,gBAAgB,QAAU,EAAA;AAC7B,MAAA,MAAM,IAAI,cAAe,CAAA;AAAA;AAAA,EAEzB,CAAA,CAAA;AAAA;AAGD,IAAA,OAAO,YAAgB,IAAA,QAAA;AAAA;AAGxB,EAAI,IAAA,IAAA,IAAQ,IAAQ,IAAA,IAAA,KAAS,KAAO,EAAA;AACnC,IAAO,OAAA,QAAA;AAAA;AAGR,EAAA,MAAM,mBAAmB,UAAW,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,IAAI,CAAI,GAAA,QAAA;AAEjE,EAAM,MAAA,WAAA,GAAc,cAAe,CAAA,gBAAA,EAAkB,WAAa,EAAA;AAAA,IACjE,YAAc,EAAA,8CAAA;AAAA,IACd,wBAA0B,EAAA;AAAA,GAC1B,CAAA;AAED,EAAA,MAAM,gBAAgB,gBAAiB,CAAA,gBAAA,EAAkB,CAAC,YAAA,EAAc,WAAW,CAAC,CAAA;AAEpF,EAAA,OAAO,WAAe,IAAA,aAAA;AACvB;AAEO,SAAS,WAAA,CAAY,EAAE,QAAA,EAA2C,EAAA;AACxE,EAAO,OAAA,QAAA;AACR;AACA,WAAY,CAAA,IAAA,GAAO,MAAO,CAAA,GAAA,CAAI,SAAS,CAAA;AAEhC,SAAS,YAAA,CAAa,EAAE,QAAA,EAA2C,EAAA;AACzE,EAAO,OAAA,QAAA;AACR;AACA,YAAa,CAAA,IAAA,GAAO,MAAO,CAAA,GAAA,CAAI,eAAe,CAAA;;;ACrD9C,IAAA,kBAAA,GAAA;AAAA,QAAA,CAAA,kBAAA,EAAA;AAAA,EAAA,OAAA,EAAA,MAAA,WAAA;AAAA,EAAA,QAAA,EAAA,MAAA,YAAA;AAAA,EAAA,SAAA,EAAA,MAAA,YAAA;AAAA,EAAA,IAAA,EAAA,MAAA;AAAA,CAAA,CAAA","file":"chunk-NCS3WKFW.js","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { getOtherChildren, getSlotElement } from \"@zayne-labs/toolkit-react/utils\";\nimport { AssertionError, isFunction } from \"@zayne-labs/toolkit-type-helpers\";\n\ntype ShowProps<TWhen> = {\n\tchildren: React.ReactNode | ((whenValue: TWhen) => React.ReactNode);\n\tfallback?: React.ReactNode;\n\twhen: false | TWhen | null | undefined;\n};\n\nexport function ShowRoot<TWhen>({ children, fallback, when }: ShowProps<TWhen>) {\n\tif ((when == null || when === false) && !isFunction(children)) {\n\t\tconst fallBackSlot = getSlotElement(children, ShowFallback, {\n\t\t\terrorMessage: \"Only one <Show.Fallback> or <Show.OtherWise> component is allowed\",\n\t\t\tthrowOnMultipleSlotMatch: true,\n\t\t});\n\n\t\tif (fallBackSlot && fallback) {\n\t\t\tthrow new AssertionError(`\n\t\t\tThe fallback prop and <Show.Fallback>/<Show.OtherWise> cannot be used at the same time.\n\t\t`);\n\t\t}\n\n\t\treturn fallBackSlot ?? fallback;\n\t}\n\n\tif (when == null || when === false) {\n\t\treturn fallback;\n\t}\n\n\tconst resolvedChildren = isFunction(children) ? children(when) : children;\n\n\tconst contentSlot = getSlotElement(resolvedChildren, ShowContent, {\n\t\terrorMessage: \"Only one <Show.Content> component is allowed\",\n\t\tthrowOnMultipleSlotMatch: true,\n\t});\n\n\tconst otherChildren = getOtherChildren(resolvedChildren, [ShowFallback, ShowContent]);\n\n\treturn contentSlot ?? otherChildren;\n}\n\nexport function ShowContent({ children }: { children: React.ReactNode }) {\n\treturn children;\n}\nShowContent.slot = Symbol.for(\"content\");\n\nexport function ShowFallback({ children }: { children: React.ReactNode }) {\n\treturn children;\n}\nShowFallback.slot = Symbol.for(\"show-fallback\");\n","export {\n\tShowContent as Content,\n\tShowFallback as Fallback,\n\tShowFallback as OtherWise,\n\tShowRoot as Root,\n} from \"./show\";\n"]}

package/dist/esm/chunk-PKN52DWQ.js

@@ -0,0 +1,363 @@
+import { cnMerge } from './chunk-OHG7GB7O.js';
+import { getElementList } from './chunk-RJQIINNX.js';
+import { __export } from './chunk-PZ5AY32C.js';
+import * as React2 from 'react';
+import { useId, useMemo, useRef, useEffect, Fragment } from 'react';
+import { toArray } from '@zayne-labs/toolkit-core';
+import { createCustomContext, useToggle, ContextError } from '@zayne-labs/toolkit-react';
+import { getSlotElement, getOtherChildren } from '@zayne-labs/toolkit-react/utils';
+import { Controller, FormProvider, useFormState, useFormContext } from 'react-hook-form';
+
+var EyeIconInvisible = (props) => /* @__PURE__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React2.createElement(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M15.175 8.325q.725.725 1.063 1.65t.237 1.9q0 .375-.275.638t-.65.262t-.638-.262t-.262-.638q.125-.65-.075-1.25T13.95 9.6t-1.025-.65t-1.275-.1q-.375 0-.638-.275t-.262-.65t.263-.637t.637-.263q.95-.1 1.875.238t1.65 1.062M12 6q-.475 0-.925.037t-.9.138q-.425.075-.763-.125t-.462-.6t.088-.775t.612-.45q.575-.125 1.163-.175T12 4q3.425 0 6.263 1.8t4.337 4.85q.1.2.15.413t.05.437t-.038.438t-.137.412q-.45 1-1.112 1.875t-1.463 1.6q-.3.275-.7.225t-.65-.4t-.212-.763t.337-.687q.6-.575 1.1-1.25t.875-1.45q-1.25-2.525-3.613-4.012T12 6m0 13q-3.35 0-6.125-1.812T1.5 12.425q-.125-.2-.187-.437T1.25 11.5t.05-.475t.175-.45q.5-1 1.163-1.912T4.15 7L2.075 4.9q-.275-.3-.262-.712T2.1 3.5t.7-.275t.7.275l17 17q.275.275.288.688t-.288.712q-.275.275-.7.275t-.7-.275l-3.5-3.45q-.875.275-1.775.413T12 19M5.55 8.4q-.725.65-1.325 1.425T3.2 11.5q1.25 2.525 3.613 4.013T12 17q.5 0 .975-.062t.975-.138l-.9-.95q-.275.075-.525.113T12 16q-1.875 0-3.188-1.312T7.5 11.5q0-.275.038-.525t.112-.525zm4.2 4.2"
+  }
+));
+var EyeIconVisible = (props) => /* @__PURE__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React2.createElement(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M12 16q1.875 0 3.188-1.312T16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.788T9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2m0 4.8q-3.35 0-6.113-1.8t-4.362-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q1.6-2.95 4.363-4.75T12 4t6.113 1.8t4.362 4.75q.125.225.188.463t.062.487t-.062.488t-.188.462q-1.6 2.95-4.362 4.75T12 19m0-2q2.825 0 5.188-1.487T20.8 11.5q-1.25-2.525-3.613-4.012T12 6T6.813 7.488T3.2 11.5q1.25 2.525 3.613 4.013T12 17"
+  }
+));
+var useFormFieldContext = () => {
+  const formContext = useFormContext();
+  if (!formContext) {
+    throw new ContextError(
+      `useFormFieldContext returned "null". Did you forget to wrap the necessary components within FormRoot?`
+    );
+  }
+  return formContext;
+};
+var [StrictFormItemProvider, useStrictFormItemContext] = createCustomContext({
+  hookName: "useFormItemContext",
+  providerName: "FormItem"
+});
+var [LaxFormItemProvider, useLaxFormItemContext] = createCustomContext({
+  hookName: "useLaxFormItemContext",
+  providerName: "FormItem",
+  strict: false
+});
+
+// src/components/ui/form/form.tsx
+function FormRoot(props) {
+  const { children, className, methods, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement(FormProvider, { ...methods }, /* @__PURE__ */ React2.createElement(
+    "form",
+    {
+      className: cnMerge("flex flex-col", className),
+      ...restOfProps,
+      "data-scope": "form",
+      "data-part": "root"
+    },
+    children
+  ));
+}
+function FormItem(props) {
+  const { children, className, name, withWrapper = true } = props;
+  const uniqueId = useId();
+  const value = useMemo(
+    () => ({ name: String(name), uniqueId: `${String(name)}-(${uniqueId})` }),
+    [name, uniqueId]
+  );
+  const WrapperElement = withWrapper ? "div" : Fragment;
+  const wrapperElementProps = withWrapper && {
+    className: cnMerge("flex flex-col", className),
+    "data-part": "item",
+    "data-scope": "form"
+  };
+  return /* @__PURE__ */ React2.createElement(StrictFormItemProvider, { value }, /* @__PURE__ */ React2.createElement(LaxFormItemProvider, { value }, /* @__PURE__ */ React2.createElement(WrapperElement, { ...wrapperElementProps }, children)));
+}
+function FormItemContext(props) {
+  const { children, render } = props;
+  const contextValues = useStrictFormItemContext();
+  if (typeof children === "function") {
+    return children(contextValues);
+  }
+  return render(contextValues);
+}
+function FormLabel(props) {
+  const { uniqueId } = useStrictFormItemContext();
+  const { children, className, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement("label", { "data-scope": "form", "data-part": "label", htmlFor: uniqueId, className, ...restOfProps }, children);
+}
+function FormInputGroup(props) {
+  const { children, className, ...restOfProps } = props;
+  const LeftItemSlot = getSlotElement(children, FormInputLeftItem);
+  const RightItemSlot = getSlotElement(children, FormInputRightItem);
+  const otherChildren = getOtherChildren(children, [FormInputLeftItem, FormInputRightItem]);
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      "data-scope": "form",
+      "data-part": "input-group",
+      className: cnMerge("flex items-center justify-between gap-2", className),
+      ...restOfProps
+    },
+    LeftItemSlot,
+    otherChildren,
+    RightItemSlot
+  );
+}
+function FormInputLeftItem(props) {
+  const { as: Element = "span", children, className, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement(
+    Element,
+    {
+      "data-scope": "form",
+      "data-part": "left-item",
+      className: cnMerge("inline-flex items-center justify-center", className),
+      ...restOfProps
+    },
+    children
+  );
+}
+FormInputLeftItem.slot = Symbol.for("leftItem");
+function FormInputRightItem(props) {
+  const { as: Element = "span", children, className, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement(
+    Element,
+    {
+      "data-scope": "form",
+      "data-part": "right-item",
+      className: cnMerge("inline-flex items-center justify-center", className),
+      ...restOfProps
+    },
+    children
+  );
+}
+FormInputRightItem.slot = Symbol.for("rightItem");
+var inputTypesWithoutFullWith = /* @__PURE__ */ new Set(["checkbox", "radio"]);
+function FormInputPrimitive(props) {
+  const contextValues = useLaxFormItemContext();
+  const {
+    className,
+    classNames,
+    control,
+    formState,
+    id = contextValues?.uniqueId,
+    name = contextValues?.name,
+    type = "text",
+    withEyeIcon = true,
+    ...restOfProps
+  } = props;
+  const getFormState = control ? useFormState : () => formState;
+  const { errors } = getFormState({ control }) ?? {};
+  const [isPasswordVisible, toggleVisibility] = useToggle(false);
+  const shouldHaveEyeIcon = withEyeIcon && type === "password";
+  const WrapperElement = shouldHaveEyeIcon ? FormInputGroup : Fragment;
+  const wrapperElementProps = shouldHaveEyeIcon && {
+    className: cnMerge("w-full", classNames?.inputGroup, name && errors?.[name] && classNames?.error)
+  };
+  return /* @__PURE__ */ React2.createElement(WrapperElement, { ...wrapperElementProps }, /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      "data-scope": "form",
+      "data-part": "input",
+      id,
+      name,
+      type: type === "password" && isPasswordVisible ? "text" : type,
+      className: cnMerge(
+        !inputTypesWithoutFullWith.has(type) && "flex w-full",
+        `bg-transparent text-sm file:border-0 file:bg-transparent
+					placeholder:text-shadcn-muted-foreground focus-visible:outline-none
+					disabled:cursor-not-allowed disabled:opacity-50`,
+        className,
+        classNames?.input,
+        type !== "password" && name && errors?.[name] && classNames?.error
+      ),
+      ...restOfProps
+    }
+  ), shouldHaveEyeIcon && /* @__PURE__ */ React2.createElement(
+    FormInputRightItem,
+    {
+      as: "button",
+      type: "button",
+      onClick: toggleVisibility,
+      className: "size-5 shrink-0 lg:size-6"
+    },
+    isPasswordVisible ? /* @__PURE__ */ React2.createElement(EyeIconInvisible, { className: cnMerge("size-full", classNames?.eyeIcon) }) : /* @__PURE__ */ React2.createElement(EyeIconVisible, { className: cnMerge("size-full", classNames?.eyeIcon) })
+  ));
+}
+function FormInput(props) {
+  const { rules, ...restOfProps } = props;
+  const { name } = useStrictFormItemContext();
+  const { formState, register } = useFormFieldContext();
+  return /* @__PURE__ */ React2.createElement(
+    FormInputPrimitive,
+    {
+      name,
+      formState,
+      ...Boolean(name) && register(name, rules),
+      ...restOfProps
+    }
+  );
+}
+function FormTextAreaPrimitive(props) {
+  const contextValues = useLaxFormItemContext();
+  const {
+    className,
+    control,
+    errorClassName,
+    formState,
+    id = contextValues?.uniqueId,
+    name = contextValues?.name,
+    ...restOfProps
+  } = props;
+  const getFormState = control ? useFormState : () => formState;
+  const { errors } = getFormState({ control }) ?? {};
+  return /* @__PURE__ */ React2.createElement(
+    "textarea",
+    {
+      "data-scope": "form",
+      "data-part": "textarea",
+      id,
+      name,
+      className: cnMerge(
+        `w-full bg-transparent text-sm placeholder:text-shadcn-muted-foreground
+				focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50`,
+        className,
+        name && errors?.[name] && errorClassName
+      ),
+      ...restOfProps
+    }
+  );
+}
+function FormTextArea(props) {
+  const { rules, ...restOfProps } = props;
+  const { name } = useStrictFormItemContext();
+  const { formState, register } = useFormFieldContext();
+  return /* @__PURE__ */ React2.createElement(
+    FormTextAreaPrimitive,
+    {
+      name,
+      formState,
+      ...Boolean(name) && register(name, rules),
+      ...restOfProps
+    }
+  );
+}
+function FormController(props) {
+  const { control } = useFormFieldContext();
+  const { name } = useStrictFormItemContext();
+  return /* @__PURE__ */ React2.createElement(Controller, { name, control, ...props });
+}
+function FormDescription(props) {
+  const { className, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement("p", { className: cnMerge("text-[12px]", className), ...restOfProps });
+}
+var FormErrorMessagePrimitive = (props) => {
+  const {
+    className,
+    classNames,
+    control,
+    errorField,
+    render,
+    type = "regular",
+    withAnimationOnInvalid = true
+  } = props;
+  const formState = useFormState({ control });
+  const wrapperRef = useRef(null);
+  const errorAnimationClass = classNames?.errorMessageAnimation ?? "animate-shake";
+  useEffect(() => {
+    if (!withAnimationOnInvalid) return;
+    const errorMessageElements = wrapperRef.current?.children;
+    if (!errorMessageElements) return;
+    for (const element of errorMessageElements) {
+      element.classList.add(errorAnimationClass);
+    }
+  }, [errorAnimationClass, withAnimationOnInvalid]);
+  useEffect(() => {
+    const errorMessageElements = wrapperRef.current?.children;
+    if (!errorMessageElements) return;
+    if (Object.keys(formState.errors).indexOf(errorField) === 0) {
+      errorMessageElements[0]?.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+      window.scrollBy({ behavior: "smooth", top: -100 });
+    }
+  }, [errorField, formState.errors]);
+  const message = type === "root" ? formState.errors.root?.[errorField]?.message : formState.errors[errorField]?.message;
+  if (!message) {
+    return null;
+  }
+  const errorMessageArray = toArray(message);
+  const [ErrorMessageList] = getElementList();
+  const onAnimationEnd = withAnimationOnInvalid ? (event) => event.currentTarget.classList.remove(errorAnimationClass) : undefined;
+  const getRenderProps = ({ index }) => ({
+    className: cnMerge(errorAnimationClass, className, classNames?.errorMessage),
+    "data-index": index,
+    "data-part": "error-message",
+    "data-scope": "form",
+    onAnimationEnd
+  });
+  const getRenderState = ({ errorMessage, index }) => ({
+    errorMessage,
+    errorMessageArray,
+    index
+  });
+  return /* @__PURE__ */ React2.createElement(
+    ErrorMessageList,
+    {
+      ref: wrapperRef,
+      each: errorMessageArray,
+      className: cnMerge("flex flex-col", classNames?.container),
+      render: (errorMessage, index) => {
+        return render({
+          props: getRenderProps({ index }),
+          state: getRenderState({ errorMessage, index })
+        });
+      }
+    }
+  );
+};
+function FormErrorMessage(props) {
+  const contextValues = useLaxFormItemContext();
+  const { className, errorField = contextValues?.name, type = "regular" } = props;
+  const { control } = useFormFieldContext();
+  return /* @__PURE__ */ React2.createElement(
+    FormErrorMessagePrimitive,
+    {
+      control,
+      errorField,
+      type,
+      render: ({ props: renderProps, state: { errorMessage } }) => /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          ...renderProps,
+          key: errorMessage,
+          className: cnMerge("text-[13px]", "data-[index=0]:mt-1", renderProps.className, className)
+        },
+        errorMessage
+      )
+    }
+  );
+}
+
+// src/components/ui/form/form-parts.ts
+var form_parts_exports = {};
+__export(form_parts_exports, {
+  Controller: () => FormController,
+  ControllerPrimitive: () => Controller,
+  Description: () => FormDescription,
+  ErrorMessage: () => FormErrorMessage,
+  ErrorMessagePrimitive: () => FormErrorMessagePrimitive,
+  Input: () => FormInput,
+  InputGroup: () => FormInputGroup,
+  InputLeftItem: () => FormInputLeftItem,
+  InputPrimitive: () => FormInputPrimitive,
+  InputRightItem: () => FormInputRightItem,
+  Item: () => FormItem,
+  ItemContext: () => FormItemContext,
+  Label: () => FormLabel,
+  Root: () => FormRoot,
+  TextArea: () => FormTextArea,
+  TextAreaPrimitive: () => FormTextAreaPrimitive
+});
+
+export { FormController, FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormItem, FormItemContext, FormLabel, FormRoot, FormTextArea, FormTextAreaPrimitive, form_parts_exports, useStrictFormItemContext };
+//# sourceMappingURL=chunk-PKN52DWQ.js.map
+//# sourceMappingURL=chunk-PKN52DWQ.js.map