@pyck/react 0.0.5 → 0.0.7

package/dist/components/select/index.js

@@ -1,10 +1,12 @@
 import { t as __exportAll } from "../../chunk-BYypO7fO.js";
 import { createListCollection } from "@ark-ui/react/collection";
+import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";
 import { ark } from "@ark-ui/react/factory";
 import { createStyleContext } from "@pyck/styled-system/jsx";
 import { select } from "@pyck/styled-system/recipes";
 import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@pyck/react/field";
 import { Controller, useFormContext } from "react-hook-form";
 import { Show } from "@pyck/react/show";
@@ -48,16 +50,48 @@ const List = withContext(Select$1.List, "list");
 const Positioner = withContext(Select$1.Positioner, "positioner");
 const Trigger = withContext(Select$1.Trigger, "trigger");
 const ValueText = withContext(Select$1.ValueText, "valueText");
-const Indicator = withContext(Select$1.Indicator, "indicator", { defaultProps: { children: <ChevronsUpDownIcon /> } });
+const Indicator = withContext(Select$1.Indicator, "indicator", { defaultProps: { children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {}) } });
 const HiddenSelect = Select$1.HiddenSelect;
 const StyledItemIndicator = withContext(Select$1.ItemIndicator, "itemIndicator");
 const ItemIndicator$1 = forwardRef(function ItemIndicator(props, ref) {
+	const $ = c(8);
 	const item = useSelectItemContext();
-	return <Show when={item.selected} fallback={<svg aria-hidden="true" focusable="false" />}>
-        <StyledItemIndicator ref={ref} {...props}>
-          <CheckIcon />
-        </StyledItemIndicator>
-      </Show>;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			focusable: "false"
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(CheckIcon, {});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== props || $[3] !== ref) {
+		t2 = /* @__PURE__ */ jsx(StyledItemIndicator, {
+			ref,
+			...props,
+			children: t1
+		});
+		$[2] = props;
+		$[3] = ref;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== item.selected || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Show, {
+			when: item.selected,
+			fallback: t0,
+			children: t2
+		});
+		$[5] = item.selected;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
 });
 
 //#endregion
@@ -68,23 +102,86 @@ var select_field_exports = /* @__PURE__ */ __exportAll({
 	Root: () => Root
 });
 const Root = (props) => {
-	const { name, label, placeholder, hideLabel, helperText, disabled, required, ...selectProps } = props;
+	const $ = c(22);
+	let disabled;
+	let helperText;
+	let hideLabel;
+	let label;
+	let name;
+	let placeholder;
+	let required;
+	let selectProps;
+	if ($[0] !== props) {
+		({name, label, placeholder, hideLabel, helperText, disabled, required, ...selectProps} = props);
+		$[0] = props;
+		$[1] = disabled;
+		$[2] = helperText;
+		$[3] = hideLabel;
+		$[4] = label;
+		$[5] = name;
+		$[6] = placeholder;
+		$[7] = required;
+		$[8] = selectProps;
+	} else {
+		disabled = $[1];
+		helperText = $[2];
+		hideLabel = $[3];
+		label = $[4];
+		name = $[5];
+		placeholder = $[6];
+		required = $[7];
+		selectProps = $[8];
+	}
 	const { control } = useFormContext();
-	return <Controller name={name} control={control} render={({ field, fieldState }) => <Field label={label} helperText={helperText} hideLabel={hideLabel} disabled={field.disabled || disabled} invalid={!!fieldState.error} errorText={fieldState.error?.message} required={required}>
-          <Select.Root {...selectProps} name={field.name} onBlur={field.onBlur} onInteractOutside={field.onBlur} onValueChange={({ value }) => field.onChange(selectProps.multiple ? value : value[0])} value={[field.value].flat().filter(Boolean)}>
-            <Select.Control>
-              <Select.Trigger>
-                <Select.ValueText placeholder={placeholder} />
-                <Select.IndicatorGroup>
-                  <Select.Indicator />
-                </Select.IndicatorGroup>
-              </Select.Trigger>
-            </Select.Control>
-            <Select.Positioner>
-              <Select.Content>{props.children}</Select.Content>
-            </Select.Positioner>
-          </Select.Root>
-        </Field>} />;
+	let t0;
+	if ($[9] !== disabled || $[10] !== helperText || $[11] !== hideLabel || $[12] !== label || $[13] !== placeholder || $[14] !== props.children || $[15] !== required || $[16] !== selectProps) {
+		t0 = (t1) => {
+			const { field, fieldState } = t1;
+			return /* @__PURE__ */ jsx(Field, {
+				label,
+				helperText,
+				hideLabel,
+				disabled: field.disabled || disabled,
+				invalid: !!fieldState.error,
+				errorText: fieldState.error?.message,
+				required,
+				children: /* @__PURE__ */ jsxs(Select.Root, {
+					...selectProps,
+					name: field.name,
+					onBlur: field.onBlur,
+					onInteractOutside: field.onBlur,
+					onValueChange: (t2) => {
+						const { value } = t2;
+						return field.onChange(selectProps.multiple ? value : value[0]);
+					},
+					value: [field.value].flat().filter(Boolean),
+					children: [/* @__PURE__ */ jsx(Select.Control, { children: /* @__PURE__ */ jsxs(Select.Trigger, { children: [/* @__PURE__ */ jsx(Select.ValueText, { placeholder }), /* @__PURE__ */ jsx(Select.IndicatorGroup, { children: /* @__PURE__ */ jsx(Select.Indicator, {}) })] }) }), /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { children: props.children }) })]
+				})
+			});
+		};
+		$[9] = disabled;
+		$[10] = helperText;
+		$[11] = hideLabel;
+		$[12] = label;
+		$[13] = placeholder;
+		$[14] = props.children;
+		$[15] = required;
+		$[16] = selectProps;
+		$[17] = t0;
+	} else t0 = $[17];
+	let t1;
+	if ($[18] !== control || $[19] !== name || $[20] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Controller, {
+			name,
+			control,
+			render: t0
+		});
+		$[18] = control;
+		$[19] = name;
+		$[20] = t0;
+		$[21] = t1;
+	} else t1 = $[21];
+	return t1;
 };
 const Item = Select.Item;
 const ItemIndicator = Select.ItemIndicator;

package/dist/components/show/index.js

@@ -1,3 +1,3 @@
-import { t as Show } from "../../show-IaI-36v9.js";
+import { t as Show } from "../../show-B7zG1Vci.js";
 
 export { Show };

package/dist/components/skeleton/index.js

@@ -1,16 +1,67 @@
+import { c } from "react/compiler-runtime";
 import { forwardRef } from "react";
 import { ark } from "@ark-ui/react/factory";
 import { Stack, styled } from "@pyck/styled-system/jsx";
 import { skeleton } from "@pyck/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/skeleton/skeleton.tsx
 const Skeleton = styled(ark.div, skeleton);
 const SkeletonCircle = styled(ark.div, skeleton, { defaultProps: { circle: true } });
 const SkeletonText = forwardRef(function SkeletonText(props, ref) {
-	const { noOfLines = 3, gap, rootProps, ...skeletonProps } = props;
-	return <Stack ref={ref} gap={gap} width="full" {...rootProps}>
-        {[...Array(noOfLines).keys()].map((index) => <Skeleton key={index} height="4" _last={{ maxW: noOfLines === 1 ? "100%" : "80%" }} {...skeletonProps} />)}
-      </Stack>;
+	const $ = c(16);
+	let gap;
+	let rootProps;
+	let skeletonProps;
+	let t0;
+	if ($[0] !== props) {
+		({noOfLines: t0, gap, rootProps, ...skeletonProps} = props);
+		$[0] = props;
+		$[1] = gap;
+		$[2] = rootProps;
+		$[3] = skeletonProps;
+		$[4] = t0;
+	} else {
+		gap = $[1];
+		rootProps = $[2];
+		skeletonProps = $[3];
+		t0 = $[4];
+	}
+	const noOfLines = t0 === void 0 ? 3 : t0;
+	let t1;
+	if ($[5] !== noOfLines) {
+		t1 = [...Array(noOfLines).keys()];
+		$[5] = noOfLines;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== noOfLines || $[8] !== skeletonProps || $[9] !== t1) {
+		t2 = t1.map((index) => /* @__PURE__ */ jsx(Skeleton, {
+			height: "4",
+			_last: { maxW: noOfLines === 1 ? "100%" : "80%" },
+			...skeletonProps
+		}, index));
+		$[7] = noOfLines;
+		$[8] = skeletonProps;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== gap || $[12] !== ref || $[13] !== rootProps || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Stack, {
+			ref,
+			gap,
+			width: "full",
+			...rootProps,
+			children: t2
+		});
+		$[11] = gap;
+		$[12] = ref;
+		$[13] = rootProps;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
 });
 
 //#endregion

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

@@ -2,6 +2,7 @@ import * as react from "react";
 import { ComponentProps, 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 "react/jsx-runtime";
 import * as _ark_ui_react0 from "@ark-ui/react";
 import { Slider as Slider$1 } from "@ark-ui/react/slider";
 

package/dist/components/slider/index.js

@@ -1,31 +1,15 @@
-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";
 import { slider } from "@pyck/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Show } from "@pyck/react/show";
 import { Wrap } from "@pyck/react/wrap";
 import { For } from "@pyck/react/for";
 import { Slider as Slider$1, SliderContext as Context, useSliderContext } from "@ark-ui/react/slider";
 
 //#region src/components/slider/slider.tsx
-var slider_exports = /* @__PURE__ */ __exportAll({
-	Context: () => Context,
-	Control: () => Control,
-	DraggingIndicator: () => DraggingIndicator,
-	HiddenInput: () => HiddenInput,
-	Label: () => Label,
-	Marker: () => Marker,
-	MarkerGroup: () => MarkerGroup,
-	MarkerIndicator: () => MarkerIndicator,
-	Marks: () => Marks,
-	Range: () => Range,
-	Root: () => Root,
-	Thumb: () => Thumb,
-	Thumbs: () => Thumbs,
-	Track: () => Track,
-	ValueText: () => ValueText
-});
 const { withProvider, withContext } = createStyleContext(slider);
 const Root = withProvider(Slider$1.Root, "root");
 const Control = withContext(Slider$1.Control, "control");
@@ -40,54 +24,189 @@ 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 = /* @__PURE__ */ jsx(For, {
+			each: marks,
+			children: _temp$1
+		});
+		$[3] = marks;
+		$[4] = t0;
+	} else t0 = $[4];
+	let t1;
+	if ($[5] !== ref || $[6] !== rest || $[7] !== t0) {
+		t1 = /* @__PURE__ */ jsx(MarkerGroup, {
+			ref,
+			...rest,
+			children: t0
+		});
+		$[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) => /* @__PURE__ */ jsx(Thumb, {
+			index,
+			...props,
+			children: /* @__PURE__ */ jsx(HiddenInput, {})
+		}, index);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== slider.value || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(For, {
+			each: slider.value,
+			children: t0
+		});
+		$[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 /* @__PURE__ */ jsxs(Marker, {
+		value,
+		children: [/* @__PURE__ */ jsx(MarkerIndicator, {}), label != null && /* @__PURE__ */ jsx("span", { children: label })]
+	}, index);
+}
 
 //#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 = /* @__PURE__ */ jsx(Label, { children: label });
+		$[7] = label;
+		$[8] = t0;
+	} else t0 = $[8];
+	let t1;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(ValueText, {});
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== showValue) {
+		t2 = /* @__PURE__ */ jsx(Show, {
+			when: showValue,
+			children: t1
+		});
+		$[10] = showValue;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== t0 || $[13] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(HStack, {
+			justify: "space-between",
+			children: [t0, t2]
+		});
+		$[12] = t0;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== hideLabel || $[16] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Wrap, {
+			when: hideLabel,
+			with: _temp,
+			children: t3
+		});
+		$[15] = hideLabel;
+		$[16] = t3;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	let t6;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Track, { children: /* @__PURE__ */ jsx(Range, {}) });
+		t6 = /* @__PURE__ */ jsx(Thumbs, {});
+		$[18] = t5;
+		$[19] = t6;
+	} else {
+		t5 = $[18];
+		t6 = $[19];
+	}
+	let t7;
+	if ($[20] !== marks) {
+		t7 = /* @__PURE__ */ jsxs(Control, { children: [
+			t5,
+			t6,
+			/* @__PURE__ */ jsx(Marks, { marks })
+		] });
+		$[20] = marks;
+		$[21] = t7;
+	} else t7 = $[21];
+	let t8;
+	if ($[22] !== children || $[23] !== ref || $[24] !== rest || $[25] !== t4 || $[26] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Root, {
+			ref,
+			...rest,
+			children: [
+				t4,
+				t7,
+				children
+			]
+		});
+		$[22] = children;
+		$[23] = ref;
+		$[24] = rest;
+		$[25] = t4;
+		$[26] = t7;
+		$[27] = t8;
+	} else t8 = $[27];
+	return t8;
 });
 const SliderContext = Context;
+function _temp(node) {
+	return /* @__PURE__ */ jsx(VisuallyHidden, { children: node });
+}
 
 //#endregion
 export { Slider, SliderContext };