@pyck/react 0.0.3 → 0.0.6

package/dist/components/slider/index.js

@@ -1,4 +1,5 @@
 import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";
 import { ark } from "@ark-ui/react/factory";
 import { HStack, VisuallyHidden, createStyleContext } from "@pyck/styled-system/jsx";
@@ -40,54 +41,150 @@ const Track = withContext(Slider$1.Track, "track");
 const ValueText = withContext(Slider$1.ValueText, "valueText");
 const HiddenInput = Slider$1.HiddenInput;
 const Marks = forwardRef(function Marks(props, ref) {
-	const { marks, ...rest } = props;
+	const $ = c(9);
+	let marks;
+	let rest;
+	if ($[0] !== props) {
+		({marks, ...rest} = props);
+		$[0] = props;
+		$[1] = marks;
+		$[2] = rest;
+	} else {
+		marks = $[1];
+		rest = $[2];
+	}
 	if (!marks?.length) return null;
-	return <MarkerGroup ref={ref} {...rest}>
-      <For each={marks}>
-        {(mark, index) => {
-		const value = typeof mark === "number" ? mark : mark.value;
-		const label = typeof mark === "number" ? void 0 : mark.label;
-		return <Marker key={index} value={value}>
-              <MarkerIndicator />
-              {label != null && <span>{label}</span>}
-            </Marker>;
-	}}
-      </For>
-    </MarkerGroup>;
+	let t0;
+	if ($[3] !== marks) {
+		t0 = <For each={marks}>{_temp$1}</For>;
+		$[3] = marks;
+		$[4] = t0;
+	} else t0 = $[4];
+	let t1;
+	if ($[5] !== ref || $[6] !== rest || $[7] !== t0) {
+		t1 = <MarkerGroup ref={ref} {...rest}>{t0}</MarkerGroup>;
+		$[5] = ref;
+		$[6] = rest;
+		$[7] = t0;
+		$[8] = t1;
+	} else t1 = $[8];
+	return t1;
 });
 const Thumbs = (props) => {
+	const $ = c(5);
 	const slider = useSliderContext();
-	return <For each={slider.value}>
-      {(_, index) => <Thumb key={index} index={index} {...props}>
-          <HiddenInput />
-        </Thumb>}
-    </For>;
+	let t0;
+	if ($[0] !== props) {
+		t0 = (_, index) => <Thumb key={index} index={index} {...props}><HiddenInput /></Thumb>;
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== slider.value || $[3] !== t0) {
+		t1 = <For each={slider.value}>{t0}</For>;
+		$[2] = slider.value;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 };
+function _temp$1(mark, index) {
+	const value = typeof mark === "number" ? mark : mark.value;
+	const label = typeof mark === "number" ? void 0 : mark.label;
+	return <Marker key={index} value={value}><MarkerIndicator />{label != null && <span>{label}</span>}</Marker>;
+}
 
 //#endregion
 //#region src/components/slider/sllider.closed.tsx
 const Slider = forwardRef(function Slider(props, ref) {
-	const { label, hideLabel, showValue, children, marks, ...rest } = props;
-	return <slider_exports.Root ref={ref} {...rest}>
-      <Wrap when={hideLabel} with={(node) => <VisuallyHidden>{node}</VisuallyHidden>}>
-        <HStack justify="space-between">
-          <slider_exports.Label>{label}</slider_exports.Label>
-          <Show when={showValue}>
-            <slider_exports.ValueText />
-          </Show>
-        </HStack>
-      </Wrap>
-      <slider_exports.Control>
-        <slider_exports.Track>
-          <slider_exports.Range />
-        </slider_exports.Track>
-        <slider_exports.Thumbs />
-        <slider_exports.Marks marks={marks} />
-      </slider_exports.Control>
-      {children}
-    </slider_exports.Root>;
+	const $ = c(28);
+	let children;
+	let hideLabel;
+	let label;
+	let marks;
+	let rest;
+	let showValue;
+	if ($[0] !== props) {
+		({label, hideLabel, showValue, children, marks, ...rest} = props);
+		$[0] = props;
+		$[1] = children;
+		$[2] = hideLabel;
+		$[3] = label;
+		$[4] = marks;
+		$[5] = rest;
+		$[6] = showValue;
+	} else {
+		children = $[1];
+		hideLabel = $[2];
+		label = $[3];
+		marks = $[4];
+		rest = $[5];
+		showValue = $[6];
+	}
+	let t0;
+	if ($[7] !== label) {
+		t0 = <slider_exports.Label>{label}</slider_exports.Label>;
+		$[7] = label;
+		$[8] = t0;
+	} else t0 = $[8];
+	let t1;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = <slider_exports.ValueText />;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== showValue) {
+		t2 = <Show when={showValue}>{t1}</Show>;
+		$[10] = showValue;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== t0 || $[13] !== t2) {
+		t3 = <HStack justify="space-between">{t0}{t2}</HStack>;
+		$[12] = t0;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== hideLabel || $[16] !== t3) {
+		t4 = <Wrap when={hideLabel} with={_temp}>{t3}</Wrap>;
+		$[15] = hideLabel;
+		$[16] = t3;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	let t6;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = <slider_exports.Track><slider_exports.Range /></slider_exports.Track>;
+		t6 = <slider_exports.Thumbs />;
+		$[18] = t5;
+		$[19] = t6;
+	} else {
+		t5 = $[18];
+		t6 = $[19];
+	}
+	let t7;
+	if ($[20] !== marks) {
+		t7 = <slider_exports.Control>{t5}{t6}<slider_exports.Marks marks={marks} /></slider_exports.Control>;
+		$[20] = marks;
+		$[21] = t7;
+	} else t7 = $[21];
+	let t8;
+	if ($[22] !== children || $[23] !== ref || $[24] !== rest || $[25] !== t4 || $[26] !== t7) {
+		t8 = <slider_exports.Root ref={ref} {...rest}>{t4}{t7}{children}</slider_exports.Root>;
+		$[22] = children;
+		$[23] = ref;
+		$[24] = rest;
+		$[25] = t4;
+		$[26] = t7;
+		$[27] = t8;
+	} else t8 = $[27];
+	return t8;
 });
 const SliderContext = Context;
+function _temp(node) {
+	return <VisuallyHidden>{node}</VisuallyHidden>;
+}
 
 //#endregion
 export { Slider, SliderContext };

package/dist/components/spotlight/index.js

@@ -1,4 +1,5 @@
 import { createListCollection } from "@ark-ui/react/collection";
+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";
@@ -19,146 +20,289 @@ import { Highlight } from "@pyck/react/highlight";
 
 //#region src/components/spotlight/keyboard-hints.tsx
 const KeyboardHints = () => {
-	return <HStack gap="4">
-      <Shortcut label="to navigate">
-        <HStack gap="1.5">
-          <KeyboardKey>
-            <ArrowUpIcon />
-          </KeyboardKey>
-          <KeyboardKey>
-            <ArrowDownIcon />
-          </KeyboardKey>
-        </HStack>
-      </Shortcut>
-
-      <Shortcut label="to select">
-        <KeyboardKey>
-          <CornerDownLeftIcon />
-        </KeyboardKey>
-      </Shortcut>
-
-      <Shortcut label="to close">
-        <Kbd variant="surface" size="2xl" color="fg.muted">
-          Esc
-        </Kbd>
-      </Shortcut>
-    </HStack>;
+	const $ = c(4);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = <KeyboardKey><ArrowUpIcon /></KeyboardKey>;
+		$[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>;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = <Shortcut label="to select"><KeyboardKey><CornerDownLeftIcon /></KeyboardKey></Shortcut>;
+		$[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>;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+};
+const Shortcut = (t0) => {
+	const $ = c(5);
+	const { children, label } = t0;
+	let t1;
+	if ($[0] !== label) {
+		t1 = <Text color="fg.muted" textStyle="sm" fontWeight="medium">{label}</Text>;
+		$[0] = label;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = <HStack>{children}{t1}</HStack>;
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+const KeyboardKey = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = <Kbd variant="surface" size="2xl"><Icon {...props} /></Kbd>;
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
 };
-const Shortcut = ({ children, label }) => <HStack>
-    {children}
-    <Text color="fg.muted" textStyle="sm" fontWeight="medium">
-      {label}
-    </Text>
-  </HStack>;
-const KeyboardKey = (props) => <Kbd variant="surface" size="2xl">
-    <Icon {...props} />
-  </Kbd>;
 
 //#endregion
 //#region src/components/spotlight/search-result-item.tsx
 const SearchResultItem = (props) => {
+	const $ = c(16);
 	const { item, filterText } = props;
-	return <HStack py="2.5" px="3.5" borderRadius="l3" _hover={{ bg: "gray.surface.bg.hover" }}>
-      <Center borderWidth="1px" borderRadius="l2" boxSize="10">
-        <Icon>
-          <UserIcon />
-        </Icon>
-      </Center>
-      <Box textStyle="sm">
-        <Text fontWeight="medium">{item.label}</Text>
-        <Breadcrumb.Root size="sm">
-          <Breadcrumb.List gap="0.5">
-            <Breadcrumb.Item>{item.matchReason?.property}</Breadcrumb.Item>
-            <Breadcrumb.Separator>
-              <ChevronRightIcon />
-            </Breadcrumb.Separator>
-            <Breadcrumb.Item color="fg.muted">
-              <Text>
-                <Highlight query={filterText ?? ""} variant="subtle" colorPalette="teal">
-                  {item.matchReason?.value ?? ""}
-                </Highlight>
-              </Text>
-            </Breadcrumb.Item>
-          </Breadcrumb.List>
-        </Breadcrumb.Root>
-      </Box>
-    </HStack>;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { bg: "gray.surface.bg.hover" };
+		$[0] = t0;
+	} 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>;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== item.label) {
+		t2 = <Text fontWeight="medium">{item.label}</Text>;
+		$[2] = item.label;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = item.matchReason?.property;
+	let t4;
+	if ($[4] !== t3) {
+		t4 = <Breadcrumb.Item>{t3}</Breadcrumb.Item>;
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = <Breadcrumb.Separator><ChevronRightIcon /></Breadcrumb.Separator>;
+		$[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>;
+		$[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>;
+		$[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>;
+		$[13] = t2;
+		$[14] = t9;
+		$[15] = t10;
+	} else t10 = $[15];
+	return t10;
 };
 
 //#endregion
 //#region src/components/spotlight/spotlight.tsx
 const Spotlight = (props) => {
+	const $ = c(46);
 	const { searchList, children, onHighlightChange } = props;
 	const [open, setOpen] = useState(false);
 	useHotkey(setOpen);
 	const [filterText, setFilterText] = useState("");
-	const debouncedValue = useDebounce(filterText, { wait: 250 });
-	useEffect(() => {
-		console.log("Setting filter text to:", debouncedValue);
-		searchList.setFilterText(debouncedValue);
-	}, [debouncedValue]);
-	const collection = useMemo(() => createListCollection({ items: searchList.items }), [searchList.items]);
-	const id = "list";
-	return <Dialog.Root open={open} onOpenChange={(event) => {
-		setOpen(event.open);
-		if (!event.open) {
-			setFilterText("");
-			searchList.setFilterText("");
-		}
-	}} motionPreset="slide-in-bottom" scrollBehavior="inside">
-      <Dialog.Trigger asChild>
-        <Button variant="outline" size="sm" minW="56">
-          <Icon color="fg.muted" size="sm">
-            <SearchIcon />
-          </Icon>
-          <Span fontWeight="normal" flex="1" minW="0" textAlign="start">
-            Find...
-          </Span>
-          <Kbd variant="surface" size="sm" gap="0.5">
-            <Icon boxSize="3">
-              <CommandIcon />
-            </Icon>
-            K
-          </Kbd>
-        </Button>
-      </Dialog.Trigger>
-      <Portal>
-        <Dialog.Backdrop />
-        <Dialog.Positioner>
-          <Combobox.Root open disableLayer inputBehavior="autohighlight" placeholder="Search..." selectionBehavior="preserve" collection={collection} loopFocus={false} onInputValueChange={({ inputValue }) => setFilterText(inputValue || "")} onHighlightChange={(e) => onHighlightChange?.(e.highlightedItem)} variant="plain" ids={{ content: id }}>
-            <Dialog.Content maxW="4xl" divideY="1px">
-              <Dialog.Header px="1" p="2">
-                <InputGroup startElement={<SearchIcon />}>
-                  <Combobox.Input />
-                </InputGroup>
-              </Dialog.Header>
-              <Dialog.Body px="0">
-                <Grid columns={2} gridTemplateColumns="2fr 3fr" width="full" h="xl" divideX="1px">
-                  <ScrollArea size="sm" ids={{ viewport: id }}>
-                    <Combobox.List gap="1" p="2">
-                      <Combobox.Empty>No results found.</Combobox.Empty>
-                      {collection.items.map((item) => <Combobox.Item key={item.value} item={item} persistFocus p="0">
-                          <SearchResultItem item={item} filterText={debouncedValue} />
-                        </Combobox.Item>)}
-                    </Combobox.List>
-                  </ScrollArea>
-                  <ScrollArea size="sm" h="full">
-                    <Box py="4" ps="4" pe="8">
-                      <Show when={children !== null} fallback={<Center>Placeholder to explain how search works</Center>}>
-                        {children}
-                      </Show>
-                    </Box>
-                  </ScrollArea>
-                </Grid>
-              </Dialog.Body>
-              <Dialog.Footer py="3.5" px="4" justifyContent="start">
-                <KeyboardHints />
-              </Dialog.Footer>
-            </Dialog.Content>
-          </Combobox.Root>
-        </Dialog.Positioner>
-      </Portal>
-    </Dialog.Root>;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { wait: 250 };
+		$[0] = t0;
+	} else t0 = $[0];
+	const debouncedValue = useDebounce(filterText, t0);
+	let t1;
+	if ($[1] !== debouncedValue || $[2] !== searchList) {
+		t1 = () => {
+			console.log("Setting filter text to:", debouncedValue);
+			searchList.setFilterText(debouncedValue);
+		};
+		$[1] = debouncedValue;
+		$[2] = searchList;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== debouncedValue) {
+		t2 = [debouncedValue];
+		$[4] = debouncedValue;
+		$[5] = t2;
+	} else t2 = $[5];
+	useEffect(t1, t2);
+	let t3;
+	if ($[6] !== searchList.items) {
+		t3 = createListCollection({ items: searchList.items });
+		$[6] = searchList.items;
+		$[7] = t3;
+	} else t3 = $[7];
+	const collection = t3;
+	let t4;
+	if ($[8] !== searchList) {
+		t4 = (event) => {
+			setOpen(event.open);
+			if (!event.open) {
+				setFilterText("");
+				searchList.setFilterText("");
+			}
+		};
+		$[8] = searchList;
+		$[9] = t4;
+	} else t4 = $[9];
+	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>;
+		$[10] = t5;
+		$[11] = t6;
+	} else {
+		t5 = $[10];
+		t6 = $[11];
+	}
+	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>;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = <Dialog.Backdrop />;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = (t10) => {
+			const { inputValue } = t10;
+			return setFilterText(inputValue || "");
+		};
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== onHighlightChange) {
+		t10 = (e) => onHighlightChange?.(e.highlightedItem);
+		$[15] = onHighlightChange;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = { content: "list" };
+		$[17] = t11;
+	} 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>;
+		$[18] = t12;
+	} else t12 = $[18];
+	let t13;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = { viewport: "list" };
+		$[19] = t13;
+	} else t13 = $[19];
+	let t14;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = <Combobox.Empty>No results found.</Combobox.Empty>;
+		$[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>;
+			$[24] = debouncedValue;
+			$[25] = t16;
+		} else t16 = $[25];
+		t15 = collection.items.map(t16);
+		$[21] = collection.items;
+		$[22] = debouncedValue;
+		$[23] = t15;
+	} 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>;
+		$[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>;
+		$[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>;
+		$[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>;
+		$[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>;
+		$[35] = t21;
+	} else t21 = $[35];
+	let t22;
+	if ($[36] !== t20) {
+		t22 = <Dialog.Content maxW="4xl" divideY="1px">{t12}{t20}{t21}</Dialog.Content>;
+		$[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>;
+		$[38] = collection;
+		$[39] = t10;
+		$[40] = t22;
+		$[41] = t23;
+	} 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>;
+		$[42] = open;
+		$[43] = t23;
+		$[44] = t4;
+		$[45] = t24;
+	} else t24 = $[45];
+	return t24;
 };
 
 //#endregion

package/dist/components/steps/index.js

@@ -1,4 +1,5 @@
 import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";
 import { ark } from "@ark-ui/react/factory";
 import { Box, createStyleContext } from "@pyck/styled-system/jsx";
@@ -39,19 +40,32 @@ const Separator = withContext(Steps.Separator, "separator");
 const Trigger = withContext(Steps.Trigger, "trigger");
 const Title = withContext(ark.div, "title");
 const Description = withContext(ark.div, "description");
-const Status = (props) => <Steps.ItemContext>
-    {(api) => {
-	if (api.current) return <>{props.current ?? props.incomplete}</>;
-	if (api.completed) return <>{props.complete}</>;
-	return <>{props.incomplete ?? props.current}</>;
-}}
-  </Steps.ItemContext>;
+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>;
+		$[0] = props.complete;
+		$[1] = props.current;
+		$[2] = props.incomplete;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
+};
 const StepNumber = forwardRef(function StepNumber(props, ref) {
-	return <Steps.ItemContext>
-        {(api) => <Box ref={ref} {...props}>
-            {api.index + 1}
-          </Box>}
-      </Steps.ItemContext>;
+	const $ = c(3);
+	let t0;
+	if ($[0] !== props || $[1] !== ref) {
+		t0 = <Steps.ItemContext>{(api) => <Box ref={ref} {...props}>{api.index + 1}</Box>}</Steps.ItemContext>;
+		$[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 Context = Steps.Context;