@pyck/react 0.0.6 → 0.0.8

package/dist/components/spotlight/index.js

@@ -3,14 +3,15 @@ import { c } from "react/compiler-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { Box, Center, Grid, HStack } from "@pyck/styled-system/jsx";
 import { ArrowDownIcon, ArrowUpIcon, ChevronRightIcon, CommandIcon, CornerDownLeftIcon, SearchIcon, UserIcon } from "lucide-react";
-import { useDebounce, useHotkey } from "@pyck/react/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Show } from "@pyck/react/show";
+import { useDebounce, useHotkey } from "@pyck/react/utils";
 import { Span } from "@pyck/react/span";
 import { Button } from "@pyck/react/button";
 import { Icon } from "@pyck/react/icon";
 import { Combobox } from "@pyck/react/combobox";
-import { Text } from "@pyck/react/text";
 import { ScrollArea } from "@pyck/react/scroll-area";
+import { Text } from "@pyck/react/text";
 import { Dialog } from "@pyck/react/dialog";
 import { InputGroup } from "@pyck/react/input-group";
 import { Kbd } from "@pyck/react/kbd";
@@ -23,22 +24,46 @@ const KeyboardHints = () => {
 	const $ = c(4);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = <KeyboardKey><ArrowUpIcon /></KeyboardKey>;
+		t0 = /* @__PURE__ */ jsx(KeyboardKey, { children: /* @__PURE__ */ jsx(ArrowUpIcon, {}) });
 		$[0] = t0;
 	} else t0 = $[0];
 	let t1;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = <Shortcut label="to navigate"><HStack gap="1.5">{t0}<KeyboardKey><ArrowDownIcon /></KeyboardKey></HStack></Shortcut>;
+		t1 = /* @__PURE__ */ jsx(Shortcut, {
+			label: "to navigate",
+			children: /* @__PURE__ */ jsxs(HStack, {
+				gap: "1.5",
+				children: [t0, /* @__PURE__ */ jsx(KeyboardKey, { children: /* @__PURE__ */ jsx(ArrowDownIcon, {}) })]
+			})
+		});
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = <Shortcut label="to select"><KeyboardKey><CornerDownLeftIcon /></KeyboardKey></Shortcut>;
+		t2 = /* @__PURE__ */ jsx(Shortcut, {
+			label: "to select",
+			children: /* @__PURE__ */ jsx(KeyboardKey, { children: /* @__PURE__ */ jsx(CornerDownLeftIcon, {}) })
+		});
 		$[2] = t2;
 	} else t2 = $[2];
 	let t3;
 	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = <HStack gap="4">{t1}{t2}<Shortcut label="to close"><Kbd variant="surface" size="2xl" color="fg.muted">Esc</Kbd></Shortcut></HStack>;
+		t3 = /* @__PURE__ */ jsxs(HStack, {
+			gap: "4",
+			children: [
+				t1,
+				t2,
+				/* @__PURE__ */ jsx(Shortcut, {
+					label: "to close",
+					children: /* @__PURE__ */ jsx(Kbd, {
+						variant: "surface",
+						size: "2xl",
+						color: "fg.muted",
+						children: "Esc"
+					})
+				})
+			]
+		});
 		$[3] = t3;
 	} else t3 = $[3];
 	return t3;
@@ -48,13 +73,18 @@ const Shortcut = (t0) => {
 	const { children, label } = t0;
 	let t1;
 	if ($[0] !== label) {
-		t1 = <Text color="fg.muted" textStyle="sm" fontWeight="medium">{label}</Text>;
+		t1 = /* @__PURE__ */ jsx(Text, {
+			color: "fg.muted",
+			textStyle: "sm",
+			fontWeight: "medium",
+			children: label
+		});
 		$[0] = label;
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
 	if ($[2] !== children || $[3] !== t1) {
-		t2 = <HStack>{children}{t1}</HStack>;
+		t2 = /* @__PURE__ */ jsxs(HStack, { children: [children, t1] });
 		$[2] = children;
 		$[3] = t1;
 		$[4] = t2;
@@ -65,7 +95,11 @@ const KeyboardKey = (props) => {
 	const $ = c(2);
 	let t0;
 	if ($[0] !== props) {
-		t0 = <Kbd variant="surface" size="2xl"><Icon {...props} /></Kbd>;
+		t0 = /* @__PURE__ */ jsx(Kbd, {
+			variant: "surface",
+			size: "2xl",
+			children: /* @__PURE__ */ jsx(Icon, { ...props })
+		});
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
@@ -84,46 +118,81 @@ const SearchResultItem = (props) => {
 	} else t0 = $[0];
 	let t1;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = <Center borderWidth="1px" borderRadius="l2" boxSize="10"><Icon><UserIcon /></Icon></Center>;
+		t1 = /* @__PURE__ */ jsx(Center, {
+			borderWidth: "1px",
+			borderRadius: "l2",
+			boxSize: "10",
+			children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(UserIcon, {}) })
+		});
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
 	if ($[2] !== item.label) {
-		t2 = <Text fontWeight="medium">{item.label}</Text>;
+		t2 = /* @__PURE__ */ jsx(Text, {
+			fontWeight: "medium",
+			children: item.label
+		});
 		$[2] = item.label;
 		$[3] = t2;
 	} else t2 = $[3];
 	const t3 = item.matchReason?.property;
 	let t4;
 	if ($[4] !== t3) {
-		t4 = <Breadcrumb.Item>{t3}</Breadcrumb.Item>;
+		t4 = /* @__PURE__ */ jsx(Breadcrumb.Item, { children: t3 });
 		$[4] = t3;
 		$[5] = t4;
 	} else t4 = $[5];
 	let t5;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = <Breadcrumb.Separator><ChevronRightIcon /></Breadcrumb.Separator>;
+		t5 = /* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) });
 		$[6] = t5;
 	} else t5 = $[6];
 	const t6 = filterText ?? "";
 	const t7 = item.matchReason?.value ?? "";
 	let t8;
 	if ($[7] !== t6 || $[8] !== t7) {
-		t8 = <Breadcrumb.Item color="fg.muted"><Text><Highlight query={t6} variant="subtle" colorPalette="teal">{t7}</Highlight></Text></Breadcrumb.Item>;
+		t8 = /* @__PURE__ */ jsx(Breadcrumb.Item, {
+			color: "fg.muted",
+			children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx(Highlight, {
+				query: t6,
+				variant: "subtle",
+				colorPalette: "teal",
+				children: t7
+			}) })
+		});
 		$[7] = t6;
 		$[8] = t7;
 		$[9] = t8;
 	} else t8 = $[9];
 	let t9;
 	if ($[10] !== t4 || $[11] !== t8) {
-		t9 = <Breadcrumb.Root size="sm"><Breadcrumb.List gap="0.5">{t4}{t5}{t8}</Breadcrumb.List></Breadcrumb.Root>;
+		t9 = /* @__PURE__ */ jsx(Breadcrumb.Root, {
+			size: "sm",
+			children: /* @__PURE__ */ jsxs(Breadcrumb.List, {
+				gap: "0.5",
+				children: [
+					t4,
+					t5,
+					t8
+				]
+			})
+		});
 		$[10] = t4;
 		$[11] = t8;
 		$[12] = t9;
 	} else t9 = $[12];
 	let t10;
 	if ($[13] !== t2 || $[14] !== t9) {
-		t10 = <HStack py="2.5" px="3.5" borderRadius="l3" _hover={t0}>{t1}<Box textStyle="sm">{t2}{t9}</Box></HStack>;
+		t10 = /* @__PURE__ */ jsxs(HStack, {
+			py: "2.5",
+			px: "3.5",
+			borderRadius: "l3",
+			_hover: t0,
+			children: [t1, /* @__PURE__ */ jsxs(Box, {
+				textStyle: "sm",
+				children: [t2, t9]
+			})]
+		});
 		$[13] = t2;
 		$[14] = t9;
 		$[15] = t10;
@@ -184,8 +253,18 @@ const Spotlight = (props) => {
 	let t5;
 	let t6;
 	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = <Icon color="fg.muted" size="sm"><SearchIcon /></Icon>;
-		t6 = <Span fontWeight="normal" flex="1" minW="0" textAlign="start">Find...</Span>;
+		t5 = /* @__PURE__ */ jsx(Icon, {
+			color: "fg.muted",
+			size: "sm",
+			children: /* @__PURE__ */ jsx(SearchIcon, {})
+		});
+		t6 = /* @__PURE__ */ jsx(Span, {
+			fontWeight: "normal",
+			flex: "1",
+			minW: "0",
+			textAlign: "start",
+			children: "Find..."
+		});
 		$[10] = t5;
 		$[11] = t6;
 	} else {
@@ -194,12 +273,32 @@ const Spotlight = (props) => {
 	}
 	let t7;
 	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = <Dialog.Trigger asChild={true}><Button variant="outline" size="sm" minW="56">{t5}{t6}<Kbd variant="surface" size="sm" gap="0.5"><Icon boxSize="3"><CommandIcon /></Icon>K</Kbd></Button></Dialog.Trigger>;
+		t7 = /* @__PURE__ */ jsx(Dialog.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				size: "sm",
+				minW: "56",
+				children: [
+					t5,
+					t6,
+					/* @__PURE__ */ jsxs(Kbd, {
+						variant: "surface",
+						size: "sm",
+						gap: "0.5",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							boxSize: "3",
+							children: /* @__PURE__ */ jsx(CommandIcon, {})
+						}), "K"]
+					})
+				]
+			})
+		});
 		$[12] = t7;
 	} else t7 = $[12];
 	let t8;
 	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = <Dialog.Backdrop />;
+		t8 = /* @__PURE__ */ jsx(Dialog.Backdrop, {});
 		$[13] = t8;
 	} else t8 = $[13];
 	let t9;
@@ -223,7 +322,14 @@ const Spotlight = (props) => {
 	} else t11 = $[17];
 	let t12;
 	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = <Dialog.Header px="1" p="2"><InputGroup startElement={<SearchIcon />}><Combobox.Input /></InputGroup></Dialog.Header>;
+		t12 = /* @__PURE__ */ jsx(Dialog.Header, {
+			px: "1",
+			p: "2",
+			children: /* @__PURE__ */ jsx(InputGroup, {
+				startElement: /* @__PURE__ */ jsx(SearchIcon, {}),
+				children: /* @__PURE__ */ jsx(Combobox.Input, {})
+			})
+		});
 		$[18] = t12;
 	} else t12 = $[18];
 	let t13;
@@ -233,14 +339,22 @@ const Spotlight = (props) => {
 	} else t13 = $[19];
 	let t14;
 	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = <Combobox.Empty>No results found.</Combobox.Empty>;
+		t14 = /* @__PURE__ */ jsx(Combobox.Empty, { children: "No results found." });
 		$[20] = t14;
 	} else t14 = $[20];
 	let t15;
 	if ($[21] !== collection.items || $[22] !== debouncedValue) {
 		let t16;
 		if ($[24] !== debouncedValue) {
-			t16 = (item) => <Combobox.Item key={item.value} item={item} persistFocus={true} p="0"><SearchResultItem item={item} filterText={debouncedValue} /></Combobox.Item>;
+			t16 = (item) => /* @__PURE__ */ jsx(Combobox.Item, {
+				item,
+				persistFocus: true,
+				p: "0",
+				children: /* @__PURE__ */ jsx(SearchResultItem, {
+					item,
+					filterText: debouncedValue
+				})
+			}, item.value);
 			$[24] = debouncedValue;
 			$[25] = t16;
 		} else t16 = $[25];
@@ -251,44 +365,101 @@ const Spotlight = (props) => {
 	} else t15 = $[23];
 	let t16;
 	if ($[26] !== t15) {
-		t16 = <ScrollArea size="sm" ids={t13}><Combobox.List gap="1" p="2">{t14}{t15}</Combobox.List></ScrollArea>;
+		t16 = /* @__PURE__ */ jsx(ScrollArea, {
+			size: "sm",
+			ids: t13,
+			children: /* @__PURE__ */ jsxs(Combobox.List, {
+				gap: "1",
+				p: "2",
+				children: [t14, t15]
+			})
+		});
 		$[26] = t15;
 		$[27] = t16;
 	} else t16 = $[27];
 	const t17 = children !== null;
 	let t18;
 	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-		t18 = <Center>Placeholder to explain how search works</Center>;
+		t18 = /* @__PURE__ */ jsx(Center, { children: "Placeholder to explain how search works" });
 		$[28] = t18;
 	} else t18 = $[28];
 	let t19;
 	if ($[29] !== children || $[30] !== t17) {
-		t19 = <ScrollArea size="sm" h="full"><Box py="4" ps="4" pe="8"><Show when={t17} fallback={t18}>{children}</Show></Box></ScrollArea>;
+		t19 = /* @__PURE__ */ jsx(ScrollArea, {
+			size: "sm",
+			h: "full",
+			children: /* @__PURE__ */ jsx(Box, {
+				py: "4",
+				ps: "4",
+				pe: "8",
+				children: /* @__PURE__ */ jsx(Show, {
+					when: t17,
+					fallback: t18,
+					children
+				})
+			})
+		});
 		$[29] = children;
 		$[30] = t17;
 		$[31] = t19;
 	} else t19 = $[31];
 	let t20;
 	if ($[32] !== t16 || $[33] !== t19) {
-		t20 = <Dialog.Body px="0"><Grid columns={2} gridTemplateColumns="2fr 3fr" width="full" h="xl" divideX="1px">{t16}{t19}</Grid></Dialog.Body>;
+		t20 = /* @__PURE__ */ jsx(Dialog.Body, {
+			px: "0",
+			children: /* @__PURE__ */ jsxs(Grid, {
+				columns: 2,
+				gridTemplateColumns: "2fr 3fr",
+				width: "full",
+				h: "xl",
+				divideX: "1px",
+				children: [t16, t19]
+			})
+		});
 		$[32] = t16;
 		$[33] = t19;
 		$[34] = t20;
 	} else t20 = $[34];
 	let t21;
 	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
-		t21 = <Dialog.Footer py="3.5" px="4" justifyContent="start"><KeyboardHints /></Dialog.Footer>;
+		t21 = /* @__PURE__ */ jsx(Dialog.Footer, {
+			py: "3.5",
+			px: "4",
+			justifyContent: "start",
+			children: /* @__PURE__ */ jsx(KeyboardHints, {})
+		});
 		$[35] = t21;
 	} else t21 = $[35];
 	let t22;
 	if ($[36] !== t20) {
-		t22 = <Dialog.Content maxW="4xl" divideY="1px">{t12}{t20}{t21}</Dialog.Content>;
+		t22 = /* @__PURE__ */ jsxs(Dialog.Content, {
+			maxW: "4xl",
+			divideY: "1px",
+			children: [
+				t12,
+				t20,
+				t21
+			]
+		});
 		$[36] = t20;
 		$[37] = t22;
 	} else t22 = $[37];
 	let t23;
 	if ($[38] !== collection || $[39] !== t10 || $[40] !== t22) {
-		t23 = <Portal>{t8}<Dialog.Positioner><Combobox.Root open={true} disableLayer={true} inputBehavior="autohighlight" placeholder="Search..." selectionBehavior="preserve" collection={collection} loopFocus={false} onInputValueChange={t9} onHighlightChange={t10} variant="plain" ids={t11}>{t22}</Combobox.Root></Dialog.Positioner></Portal>;
+		t23 = /* @__PURE__ */ jsxs(Portal, { children: [t8, /* @__PURE__ */ jsx(Dialog.Positioner, { children: /* @__PURE__ */ jsx(Combobox.Root, {
+			open: true,
+			disableLayer: true,
+			inputBehavior: "autohighlight",
+			placeholder: "Search...",
+			selectionBehavior: "preserve",
+			collection,
+			loopFocus: false,
+			onInputValueChange: t9,
+			onHighlightChange: t10,
+			variant: "plain",
+			ids: t11,
+			children: t22
+		}) })] });
 		$[38] = collection;
 		$[39] = t10;
 		$[40] = t22;
@@ -296,7 +467,13 @@ const Spotlight = (props) => {
 	} else t23 = $[41];
 	let t24;
 	if ($[42] !== open || $[43] !== t23 || $[44] !== t4) {
-		t24 = <Dialog.Root open={open} onOpenChange={t4} motionPreset="slide-in-bottom" scrollBehavior="inside">{t7}{t23}</Dialog.Root>;
+		t24 = /* @__PURE__ */ jsxs(Dialog.Root, {
+			open,
+			onOpenChange: t4,
+			motionPreset: "slide-in-bottom",
+			scrollBehavior: "inside",
+			children: [t7, t23]
+		});
 		$[42] = open;
 		$[43] = t23;
 		$[44] = t4;

package/dist/components/steps/index.js

@@ -5,6 +5,7 @@ import { ark } from "@ark-ui/react/factory";
 import { Box, createStyleContext } from "@pyck/styled-system/jsx";
 import { steps } from "@pyck/styled-system/recipes";
 import { CheckIcon } from "lucide-react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import { Steps } from "@ark-ui/react/steps";
 
 //#region src/components/steps/steps.tsx
@@ -44,11 +45,11 @@ const Status = (props) => {
 	const $ = c(4);
 	let t0;
 	if ($[0] !== props.complete || $[1] !== props.current || $[2] !== props.incomplete) {
-		t0 = <Steps.ItemContext>{(api) => {
-			if (api.current) return <>{props.current ?? props.incomplete}</>;
-			if (api.completed) return <>{props.complete}</>;
-			return <>{props.incomplete ?? props.current}</>;
-		}}</Steps.ItemContext>;
+		t0 = /* @__PURE__ */ jsx(Steps.ItemContext, { children: (api) => {
+			if (api.current) return /* @__PURE__ */ jsx(Fragment$1, { children: props.current ?? props.incomplete });
+			if (api.completed) return /* @__PURE__ */ jsx(Fragment$1, { children: props.complete });
+			return /* @__PURE__ */ jsx(Fragment$1, { children: props.incomplete ?? props.current });
+		} });
 		$[0] = props.complete;
 		$[1] = props.current;
 		$[2] = props.incomplete;
@@ -60,14 +61,21 @@ const StepNumber = forwardRef(function StepNumber(props, ref) {
 	const $ = c(3);
 	let t0;
 	if ($[0] !== props || $[1] !== ref) {
-		t0 = <Steps.ItemContext>{(api) => <Box ref={ref} {...props}>{api.index + 1}</Box>}</Steps.ItemContext>;
+		t0 = /* @__PURE__ */ jsx(Steps.ItemContext, { children: (api) => /* @__PURE__ */ jsx(Box, {
+			ref,
+			...props,
+			children: api.index + 1
+		}) });
 		$[0] = props;
 		$[1] = ref;
 		$[2] = t0;
 	} else t0 = $[2];
 	return t0;
 });
-const Indicator = withContext(Steps.Indicator, "indicator", { defaultProps: { children: <Status complete={<CheckIcon />} incomplete={<StepNumber />} /> } });
+const Indicator = withContext(Steps.Indicator, "indicator", { defaultProps: { children: /* @__PURE__ */ jsx(Status, {
+	complete: /* @__PURE__ */ jsx(CheckIcon, {}),
+	incomplete: /* @__PURE__ */ jsx(StepNumber, {})
+}) } });
 const Context = Steps.Context;
 const ItemContext = Steps.ItemContext;
 

package/dist/components/switch/index.d.ts

@@ -2,12 +2,12 @@ import * as react from "react";
 import { ComponentProps, ReactNode, RefObject } from "react";
 import * as _pyck_styled_system_jsx0 from "@pyck/styled-system/jsx";
 import * as _pyck_styled_system_recipes0 from "@pyck/styled-system/recipes";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { FieldProps } from "@pyck/react/field";
 import { FieldPath, FieldValues } from "react-hook-form";
 import "@ark-ui/react";
 import { Switch as Switch$1 } from "@ark-ui/react/switch";
 import "@pyck/styled-system/types";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/switch/switch.d.ts
 type RootProps = ComponentProps<typeof Root>;

package/dist/components/switch/index.js

@@ -1,32 +1,21 @@
-import { t as __exportAll } from "../../chunk-BYypO7fO.js";
 import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";
 import { VisuallyHidden, createStyleContext, styled } from "@pyck/styled-system/jsx";
 import { switchRecipe } from "@pyck/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@pyck/react/field";
 import { Controller, useFormContext } from "react-hook-form";
 import { ark } from "@ark-ui/react";
-import { Switch as Switch$1, SwitchContext as Context, useSwitchContext } from "@ark-ui/react/switch";
+import { Switch as Switch$1, useSwitchContext } from "@ark-ui/react/switch";
 
 //#region src/components/switch/switch.tsx
-var switch_exports = /* @__PURE__ */ __exportAll({
-	Context: () => Context,
-	Control: () => Control,
-	HiddenInput: () => HiddenInput,
-	Indicator: () => Indicator,
-	Label: () => Label,
-	Root: () => Root,
-	RootProvider: () => RootProvider,
-	Thumb: () => Thumb,
-	ThumbIndicator: () => ThumbIndicator
-});
 const { withProvider, withContext } = createStyleContext(switchRecipe);
 const Root = withProvider(Switch$1.Root, "root");
 const RootProvider = withProvider(Switch$1.RootProvider, "root");
 const Label = withContext(Switch$1.Label, "label");
 const Thumb = withContext(Switch$1.Thumb, "thumb");
 const HiddenInput = Switch$1.HiddenInput;
-const Control = withContext(Switch$1.Control, "control", { defaultProps: { children: <Thumb /> } });
+const Control = withContext(Switch$1.Control, "control", { defaultProps: { children: /* @__PURE__ */ jsx(Thumb, {}) } });
 const StyledIndicator = withContext(ark.span, "indicator");
 const Indicator = forwardRef(function Indicator(props, ref) {
 	const $ = c(9);
@@ -49,7 +38,12 @@ const Indicator = forwardRef(function Indicator(props, ref) {
 	const t1 = api.checked ? children : fallback;
 	let t2;
 	if ($[4] !== ref || $[5] !== rest || $[6] !== t0 || $[7] !== t1) {
-		t2 = <StyledIndicator ref={ref} data-checked={t0} {...rest}>{t1}</StyledIndicator>;
+		t2 = /* @__PURE__ */ jsx(StyledIndicator, {
+			ref,
+			"data-checked": t0,
+			...rest,
+			children: t1
+		});
 		$[4] = ref;
 		$[5] = rest;
 		$[6] = t0;
@@ -80,7 +74,12 @@ const ThumbIndicator = forwardRef(function SwitchThumbIndicator(props, ref) {
 	const t1 = api.checked ? children : fallback;
 	let t2;
 	if ($[4] !== ref || $[5] !== rest || $[6] !== t0 || $[7] !== t1) {
-		t2 = <StyledThumbIndicator ref={ref} data-checked={t0} {...rest}>{t1}</StyledThumbIndicator>;
+		t2 = /* @__PURE__ */ jsx(StyledThumbIndicator, {
+			ref,
+			"data-checked": t0,
+			...rest,
+			children: t1
+		});
 		$[4] = ref;
 		$[5] = rest;
 		$[6] = t0;
@@ -120,51 +119,72 @@ const Switch = forwardRef(function Switch(props, ref) {
 	const rootRef = t0 === void 0 ? null : t0;
 	let t1;
 	if ($[7] !== inputProps || $[8] !== ref) {
-		t1 = <switch_exports.HiddenInput ref={ref} {...inputProps} />;
+		t1 = /* @__PURE__ */ jsx(HiddenInput, {
+			ref,
+			...inputProps
+		});
 		$[7] = inputProps;
 		$[8] = ref;
 		$[9] = t1;
 	} else t1 = $[9];
 	let t2;
 	if ($[10] !== thumbLabel) {
-		t2 = thumbLabel && <switch_exports.ThumbIndicator fallback={thumbLabel?.off}>{thumbLabel?.on}</switch_exports.ThumbIndicator>;
+		t2 = thumbLabel && /* @__PURE__ */ jsx(ThumbIndicator, {
+			fallback: thumbLabel?.off,
+			children: thumbLabel?.on
+		});
 		$[10] = thumbLabel;
 		$[11] = t2;
 	} else t2 = $[11];
 	let t3;
 	if ($[12] !== t2) {
-		t3 = <switch_exports.Thumb>{t2}</switch_exports.Thumb>;
+		t3 = /* @__PURE__ */ jsx(Thumb, { children: t2 });
 		$[12] = t2;
 		$[13] = t3;
 	} else t3 = $[13];
 	let t4;
 	if ($[14] !== trackLabel) {
-		t4 = trackLabel && <switch_exports.Indicator fallback={trackLabel.off}>{trackLabel.on}</switch_exports.Indicator>;
+		t4 = trackLabel && /* @__PURE__ */ jsx(Indicator, {
+			fallback: trackLabel.off,
+			children: trackLabel.on
+		});
 		$[14] = trackLabel;
 		$[15] = t4;
 	} else t4 = $[15];
 	let t5;
 	if ($[16] !== t3 || $[17] !== t4) {
-		t5 = <switch_exports.Control>{t3}{t4}</switch_exports.Control>;
+		t5 = /* @__PURE__ */ jsxs(Control, { children: [t3, t4] });
 		$[16] = t3;
 		$[17] = t4;
 		$[18] = t5;
 	} else t5 = $[18];
 	let t6;
 	if ($[19] !== children) {
-		t6 = children && <switch_exports.Label>{children}</switch_exports.Label>;
+		t6 = children && /* @__PURE__ */ jsx(Label, { children });
 		$[19] = children;
 		$[20] = t6;
 	} else t6 = $[20];
 	let t7;
 	if ($[21] !== props) {
-		t7 = props["aria-label"] && <switch_exports.Label asChild={true}><VisuallyHidden>{props["aria-label"]}</VisuallyHidden></switch_exports.Label>;
+		t7 = props["aria-label"] && /* @__PURE__ */ jsx(Label, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(VisuallyHidden, { children: props["aria-label"] })
+		});
 		$[21] = props;
 		$[22] = t7;
 	} else t7 = $[22];
 	let t8;
 	if ($[23] !== rest || $[24] !== rootRef || $[25] !== t1 || $[26] !== t5 || $[27] !== t6 || $[28] !== t7) {
-		t8 = <switch_exports.Root ref={rootRef} {...rest}>{t1}{t5}{t6}{t7}</switch_exports.Root>;
+		t8 = /* @__PURE__ */ jsxs(Root, {
+			ref: rootRef,
+			...rest,
+			children: [
+				t1,
+				t5,
+				t6,
+				t7
+			]
+		});
 		$[23] = rest;
 		$[24] = rootRef;
 		$[25] = t1;
@@ -186,10 +206,22 @@ const SwitchField = (props) => {
 	if ($[0] !== disabled || $[1] !== helperText || $[2] !== label) {
 		t0 = (t1) => {
 			const { field, fieldState } = t1;
-			return <Field helperText={helperText} disabled={field.disabled || disabled} invalid={!!fieldState.error} errorText={fieldState.error?.message}><Switch name={field.name} checked={field.value} onCheckedChange={(t2) => {
-				const { checked } = t2;
-				return field.onChange(checked);
-			}} inputProps={{ onBlur: field.onBlur }}>{label}</Switch></Field>;
+			return /* @__PURE__ */ jsx(Field, {
+				helperText,
+				disabled: field.disabled || disabled,
+				invalid: !!fieldState.error,
+				errorText: fieldState.error?.message,
+				children: /* @__PURE__ */ jsx(Switch, {
+					name: field.name,
+					checked: field.value,
+					onCheckedChange: (t2) => {
+						const { checked } = t2;
+						return field.onChange(checked);
+					},
+					inputProps: { onBlur: field.onBlur },
+					children: label
+				})
+			});
 		};
 		$[0] = disabled;
 		$[1] = helperText;
@@ -198,7 +230,11 @@ const SwitchField = (props) => {
 	} else t0 = $[3];
 	let t1;
 	if ($[4] !== control || $[5] !== name || $[6] !== t0) {
-		t1 = <Controller name={name} control={control} render={t0} />;
+		t1 = /* @__PURE__ */ jsx(Controller, {
+			name,
+			control,
+			render: t0
+		});
 		$[4] = control;
 		$[5] = name;
 		$[6] = t0;

package/dist/components/table/index.d.ts

@@ -2,11 +2,11 @@ import * as react from "react";
 import { ComponentProps, ComponentType, ReactNode } from "react";
 import * as _pyck_styled_system_jsx0 from "@pyck/styled-system/jsx";
 import * as _pyck_styled_system_recipes0 from "@pyck/styled-system/recipes";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { DateInput, Locale } from "@pyck/react/utils";
 import * as _ark_ui_react0 from "@ark-ui/react";
 import { DisplayValueProps } from "@pyck/react/display-value";
 import { DateFormatType } from "@pyck/react/display-date-value";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/table/cells/table-cell-content.d.ts
 interface TableCellContentProps<IconProps extends object = object> {