@pyck/react 0.0.5 → 0.0.7

package/dist/components/dialog/index.js

@@ -1,11 +1,13 @@
 import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { c } from "react/compiler-runtime";
 import { forwardRef, useId, useSyncExternalStore } from "react";
 import { ark } from "@ark-ui/react/factory";
 import { Stack, createStyleContext } from "@pyck/styled-system/jsx";
 import { dialog } from "@pyck/styled-system/recipes";
 import { CheckCircleIcon, FilePenLineIcon, Trash2Icon } from "lucide-react";
-import { omit } from "@pyck/react/utils";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useForm } from "react-hook-form";
+import { omit } from "@pyck/react/utils";
 import { Show } from "@pyck/react/show";
 import { Portal } from "@ark-ui/react/portal";
 import { Button, CloseButton } from "@pyck/react/button";
@@ -116,14 +118,25 @@ function createOverlay(Component, options) {
 		publish();
 	};
 	function Viewport() {
+		const $ = c(4);
 		const overlays = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-		return <>
-        {overlays.map((props) => {
-			const { _id, ...componentProps } = props;
-			const Comp = Component;
-			return <Comp key={_id} {...componentProps} />;
-		})}
-      </>;
+		let t0;
+		if ($[0] !== overlays) {
+			t0 = overlays.map(_temp);
+			$[0] = overlays;
+			$[1] = t0;
+		} else t0 = $[1];
+		let t1;
+		if ($[2] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Fragment$1, { children: t0 });
+			$[2] = t0;
+			$[3] = t1;
+		} else t1 = $[3];
+		return t1;
+	}
+	function _temp(props) {
+		const { _id, ...componentProps } = props;
+		return /* @__PURE__ */ jsx(Component, { ...componentProps }, _id);
 	}
 	return {
 		Viewport,
@@ -176,106 +189,151 @@ const Body = withContext(ark.div, "body");
 const Header = withContext(ark.div, "header");
 const Footer = withContext(ark.div, "footer");
 const ActionTrigger = forwardRef(function ActionTrigger(props, ref) {
+	const $ = c(6);
 	const dialog = useDialogContext();
-	return <ark.button {...props} ref={ref} onClick={() => dialog.setOpen(false)} />;
+	let t0;
+	if ($[0] !== dialog) {
+		t0 = () => dialog.setOpen(false);
+		$[0] = dialog;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== ref || $[4] !== t0) {
+		t1 = /* @__PURE__ */ jsx(ark.button, {
+			...props,
+			ref,
+			onClick: t0
+		});
+		$[2] = props;
+		$[3] = ref;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
 });
 
 //#endregion
 //#region src/components/dialog/confirm-dialog.tsx
 const ConfirmDialog = createOverlay((props) => {
 	const { title, description, onConfirm, intent = "default", ...rest } = props;
-	return <dialog_exports.Root size="sm" {...rest}>
-      <Portal>
-        <dialog_exports.Backdrop />
-        <dialog_exports.Positioner>
-          <dialog_exports.Content backgroundImage={{
-		_light: "url(/public/images/pattern-light.svg)",
-		_dark: "url(/public/images/pattern-dark.svg)"
-	}} backgroundPosition="center" backgroundRepeat="no-repeat" backgroundPositionX="-25" backgroundPositionY="-73">
-            <dialog_exports.Header pb="0">
-              <Stack gap="4">
-                <Show when={intent === "destructive"} fallback={<FeaturedIcon variant="embedded">
-                      <CheckCircleIcon />
-                    </FeaturedIcon>}>
-                  <FeaturedIcon variant="embedded">
-                    <Trash2Icon />
-                  </FeaturedIcon>
-                </Show>
-                <Stack gap="0.5">
-                  <dialog_exports.Title>{title}</dialog_exports.Title>
-                  {description && <dialog_exports.Description>{description}</dialog_exports.Description>}
-                </Stack>
-              </Stack>
-            </dialog_exports.Header>
-            <dialog_exports.Footer>
-              <dialog_exports.ActionTrigger asChild>
-                <Button variant="outline" flex="1">
-                  Cancel
-                </Button>
-              </dialog_exports.ActionTrigger>
-              <dialog_exports.ActionTrigger asChild>
-                <Button onClick={onConfirm} flex="1" colorPalette={intent === "destructive" ? "red" : "teal"}>
-                  {intent === "destructive" ? "Delete" : "Confirm"}
-                </Button>
-              </dialog_exports.ActionTrigger>
-            </dialog_exports.Footer>
-            <dialog_exports.CloseTrigger asChild>
-              <CloseButton />
-            </dialog_exports.CloseTrigger>
-          </dialog_exports.Content>
-        </dialog_exports.Positioner>
-      </Portal>
-    </dialog_exports.Root>;
+	return /* @__PURE__ */ jsx(Root, {
+		size: "sm",
+		...rest,
+		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Backdrop, {}), /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, {
+			backgroundImage: {
+				_light: "url(/public/images/pattern-light.svg)",
+				_dark: "url(/public/images/pattern-dark.svg)"
+			},
+			backgroundPosition: "center",
+			backgroundRepeat: "no-repeat",
+			backgroundPositionX: "-25",
+			backgroundPositionY: "-73",
+			children: [
+				/* @__PURE__ */ jsx(Header, {
+					pb: "0",
+					children: /* @__PURE__ */ jsxs(Stack, {
+						gap: "4",
+						children: [/* @__PURE__ */ jsx(Show, {
+							when: intent === "destructive",
+							fallback: /* @__PURE__ */ jsx(FeaturedIcon, {
+								variant: "embedded",
+								children: /* @__PURE__ */ jsx(CheckCircleIcon, {})
+							}),
+							children: /* @__PURE__ */ jsx(FeaturedIcon, {
+								variant: "embedded",
+								children: /* @__PURE__ */ jsx(Trash2Icon, {})
+							})
+						}), /* @__PURE__ */ jsxs(Stack, {
+							gap: "0.5",
+							children: [/* @__PURE__ */ jsx(Title, { children: title }), description && /* @__PURE__ */ jsx(Description, { children: description })]
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsxs(Footer, { children: [/* @__PURE__ */ jsx(ActionTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						flex: "1",
+						children: "Cancel"
+					})
+				}), /* @__PURE__ */ jsx(ActionTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						onClick: onConfirm,
+						flex: "1",
+						colorPalette: intent === "destructive" ? "red" : "teal",
+						children: intent === "destructive" ? "Delete" : "Confirm"
+					})
+				})] }),
+				/* @__PURE__ */ jsx(CloseTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(CloseButton, {})
+				})
+			]
+		}) })] })
+	});
 });
 
 //#endregion
 //#region src/components/dialog/form-dialog.tsx
 const FormDialogBase = createOverlay((props) => {
-	const { content, defaultValues, description, onSubmit, schema, title, icon = <FilePenLineIcon />, submitLabel = "Submit", ...rest } = props;
+	const { content, defaultValues, description, onSubmit, schema, title, icon = /* @__PURE__ */ jsx(FilePenLineIcon, {}), submitLabel = "Submit", ...rest } = props;
 	const form = useForm({
 		resolver: zodResolver(schema),
 		defaultValues
 	});
 	const id = useId();
-	return <dialog_exports.Root size="sm" {...rest}>
-      <Portal>
-        <dialog_exports.Backdrop />
-        <dialog_exports.Positioner>
-          <dialog_exports.Content backgroundImage={{
-		_light: "url(/public/images/pattern-light.svg)",
-		_dark: "url(/public/images/pattern-dark.svg)"
-	}} backgroundPosition="center" backgroundRepeat="no-repeat" backgroundPositionX="-25" backgroundPositionY="-73">
-            <dialog_exports.Header>
-              <Stack gap="4">
-                <FeaturedIcon variant="embedded">{icon}</FeaturedIcon>
-                <Stack gap="0.5">
-                  <dialog_exports.Title>{title}</dialog_exports.Title>
-                  {description && <dialog_exports.Description>{description}</dialog_exports.Description>}
-                </Stack>
-              </Stack>
-            </dialog_exports.Header>
-            <dialog_exports.Body>
-              <Form id={id} value={form} onSubmit={form.handleSubmit(onSubmit)}>
-                {content}
-              </Form>
-            </dialog_exports.Body>
-            <dialog_exports.Footer>
-              <dialog_exports.ActionTrigger asChild>
-                <Button variant="outline" flex="1">
-                  Cancel
-                </Button>
-              </dialog_exports.ActionTrigger>
-              <Button form={id} type="submit" loading={form.formState.isSubmitting} colorPalette="teal" flex="1">
-                {submitLabel}
-              </Button>
-            </dialog_exports.Footer>
-            <dialog_exports.CloseTrigger asChild>
-              <CloseButton />
-            </dialog_exports.CloseTrigger>
-          </dialog_exports.Content>
-        </dialog_exports.Positioner>
-      </Portal>
-    </dialog_exports.Root>;
+	return /* @__PURE__ */ jsx(Root, {
+		size: "sm",
+		...rest,
+		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Backdrop, {}), /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, {
+			backgroundImage: {
+				_light: "url(/public/images/pattern-light.svg)",
+				_dark: "url(/public/images/pattern-dark.svg)"
+			},
+			backgroundPosition: "center",
+			backgroundRepeat: "no-repeat",
+			backgroundPositionX: "-25",
+			backgroundPositionY: "-73",
+			children: [
+				/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Stack, {
+					gap: "4",
+					children: [/* @__PURE__ */ jsx(FeaturedIcon, {
+						variant: "embedded",
+						children: icon
+					}), /* @__PURE__ */ jsxs(Stack, {
+						gap: "0.5",
+						children: [/* @__PURE__ */ jsx(Title, { children: title }), description && /* @__PURE__ */ jsx(Description, { children: description })]
+					})]
+				}) }),
+				/* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Form, {
+					id,
+					value: form,
+					onSubmit: form.handleSubmit(onSubmit),
+					children: content
+				}) }),
+				/* @__PURE__ */ jsxs(Footer, { children: [/* @__PURE__ */ jsx(ActionTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						flex: "1",
+						children: "Cancel"
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					form: id,
+					type: "submit",
+					loading: form.formState.isSubmitting,
+					colorPalette: "teal",
+					flex: "1",
+					children: submitLabel
+				})] }),
+				/* @__PURE__ */ jsx(CloseTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(CloseButton, {})
+				})
+			]
+		}) })] })
+	});
 });
 const FormDialog = {
 	...FormDialogBase,
@@ -285,10 +343,13 @@ const FormDialog = {
 //#endregion
 //#region src/components/dialog/overlay-manager.tsx
 const OverlayManager = () => {
-	return <>
-      <FormDialog.Viewport />
-      <ConfirmDialog.Viewport />
-    </>;
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FormDialog.Viewport, {}), /* @__PURE__ */ jsx(ConfirmDialog.Viewport, {})] });
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
 };
 
 //#endregion

package/dist/components/display-date-value/index.d.ts

@@ -1,3 +1,3 @@
-import { n as DisplayDateValue, r as DisplayDateValueProps, t as DateFormatType } from "../../display-date-value-CdfgVuB7.js";
+import { n as DisplayDateValue, r as DisplayDateValueProps, t as DateFormatType } from "../../display-date-value-RbzRgYHt.js";
 import { DateInput } from "@pyck/react/utils";
 export { type DateFormatType, type DateInput, DisplayDateValue, type DisplayDateValueProps };

package/dist/components/display-date-value/index.js

@@ -1,4 +1,4 @@
-import "../../display-value-BNKxQ99u.js";
-import { t as DisplayDateValue } from "../../display-date-value-gTlidtNz.js";
+import "../../display-value-R2nHrGQo.js";
+import { t as DisplayDateValue } from "../../display-date-value-CSPbdE60.js";
 
 export { DisplayDateValue };

package/dist/components/display-value/index.js

@@ -1,3 +1,3 @@
-import { t as DisplayValue } from "../../display-value-BNKxQ99u.js";
+import { t as DisplayValue } from "../../display-value-R2nHrGQo.js";
 
 export { DisplayValue };

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

@@ -2,9 +2,9 @@ import * as react from "react";
 import { ComponentProps } 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 { Dialog, DialogContext as Context } from "@ark-ui/react/dialog";
 import * as _ark_ui_react0 from "@ark-ui/react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/drawer/drawer.d.ts
 declare namespace drawer_d_exports {

package/dist/components/drawer/index.js

@@ -1,8 +1,10 @@
 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 { createStyleContext } from "@pyck/styled-system/jsx";
 import { drawer } from "@pyck/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
 import { Dialog, DialogContext as Context, useDialogContext } from "@ark-ui/react/dialog";
 
 //#region src/components/drawer/drawer.tsx
@@ -42,8 +44,27 @@ const Body = withContext(ark.div, "body");
 const Header = withContext(ark.div, "header");
 const Footer = withContext(ark.div, "footer");
 const ActionTrigger = forwardRef(function ActionTrigger(props, ref) {
+	const $ = c(6);
 	const dialog = useDialogContext();
-	return <ark.button {...props} ref={ref} onClick={() => dialog.setOpen(false)} />;
+	let t0;
+	if ($[0] !== dialog) {
+		t0 = () => dialog.setOpen(false);
+		$[0] = dialog;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== ref || $[4] !== t0) {
+		t1 = /* @__PURE__ */ jsx(ark.button, {
+			...props,
+			ref,
+			onClick: t0
+		});
+		$[2] = props;
+		$[3] = ref;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
 });
 
 //#endregion