@pyck/react 0.0.1

package/dist/components/dialog/index.js

@@ -0,0 +1,295 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+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 { useForm } from "react-hook-form";
+import { Show } from "@pyck/react/show";
+import { Portal } from "@ark-ui/react/portal";
+import { Button, CloseButton } from "@pyck/react/button";
+import { FeaturedIcon } from "@pyck/react/icon";
+import { shallow } from "zustand/shallow";
+import { Dialog, DialogContext as Context, useDialogContext } from "@ark-ui/react/dialog";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form } from "@pyck/react/form";
+
+//#region src/components/dialog/create-overlay.tsx
+function createOverlay(Component, options) {
+	const map = /* @__PURE__ */ new Map();
+	const exitPromises = /* @__PURE__ */ new Map();
+	const exitResolvers = /* @__PURE__ */ new Map();
+	const subscribers = /* @__PURE__ */ new Set();
+	const subscribe = (callback) => {
+		subscribers.add(callback);
+		return () => subscribers.delete(callback);
+	};
+	const publish = () => {
+		for (const callback of subscribers) callback(getSnapshot());
+	};
+	let lastSnapshot = [];
+	const getSnapshot = () => {
+		const nextSnapshot = Array.from(map.values());
+		if (shallow(lastSnapshot, nextSnapshot)) return lastSnapshot;
+		lastSnapshot = nextSnapshot;
+		return lastSnapshot;
+	};
+	const waitForExit = (id) => {
+		return exitPromises.get(id) || Promise.resolve();
+	};
+	const open = (id, props) => {
+		return new Promise((resolve) => {
+			const overlayProps = {
+				...options?.props,
+				...props,
+				_id: id,
+				open: true,
+				onOpenChange: (e) => {
+					if (!e.open) close(id);
+				},
+				onExitComplete: () => {
+					const resolver = exitResolvers.get(id);
+					if (resolver) {
+						resolver();
+						exitResolvers.delete(id);
+					}
+					remove(id);
+				},
+				setReturnValue: resolve,
+				setExitComplete: void 0
+			};
+			map.set(id, overlayProps);
+			publish();
+		});
+	};
+	const close = (id, value) => {
+		const prevProps = get(id);
+		if (!prevProps) return Promise.resolve();
+		const castedProps = prevProps;
+		if (castedProps.setReturnValue) castedProps.setReturnValue(value);
+		map.set(id, {
+			...castedProps,
+			open: false
+		});
+		publish();
+		const exitPromise = new Promise((resolve) => {
+			exitResolvers.set(id, resolve);
+		});
+		exitPromises.set(id, exitPromise);
+		return exitPromise;
+	};
+	const remove = (id) => {
+		const resolver = exitResolvers.get(id);
+		if (resolver) {
+			resolver();
+			exitResolvers.delete(id);
+		}
+		map.delete(id);
+		exitPromises.delete(id);
+		publish();
+	};
+	const update = (id, props) => {
+		const prevProps = get(id);
+		if (!prevProps) {
+			console.warn(`[@pyck/react] Cannot update overlay with id ${id} - not found`);
+			return;
+		}
+		map.set(id, {
+			...prevProps,
+			...omit(props, [
+				"open",
+				"onOpenChange",
+				"onExitComplete"
+			])
+		});
+		publish();
+	};
+	const get = (id) => {
+		return map.get(id);
+	};
+	const removeAll = () => {
+		for (const resolver of exitResolvers.values()) resolver();
+		map.clear();
+		exitPromises.clear();
+		exitResolvers.clear();
+		publish();
+	};
+	function Viewport() {
+		const overlays = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+		return <>
+        {overlays.map((props) => {
+			const { _id, ...componentProps } = props;
+			const Comp = Component;
+			return <Comp key={_id} {...componentProps} />;
+		})}
+      </>;
+	}
+	return {
+		Viewport,
+		open,
+		close,
+		update,
+		remove,
+		removeAll,
+		get,
+		getSnapshot,
+		waitForExit
+	};
+}
+
+//#endregion
+//#region src/components/dialog/dialog.tsx
+var dialog_exports = /* @__PURE__ */ __exportAll({
+	ActionTrigger: () => ActionTrigger,
+	Backdrop: () => Backdrop,
+	Body: () => Body,
+	CloseTrigger: () => CloseTrigger,
+	Content: () => Content,
+	Context: () => Context,
+	Description: () => Description,
+	Footer: () => Footer,
+	Header: () => Header,
+	Positioner: () => Positioner,
+	Root: () => Root,
+	RootProvider: () => RootProvider,
+	Title: () => Title,
+	Trigger: () => Trigger
+});
+const { withRootProvider, withContext } = createStyleContext(dialog);
+const Root = withRootProvider(Dialog.Root, { defaultProps: {
+	unmountOnExit: true,
+	lazyMount: true
+} });
+const RootProvider = withRootProvider(Dialog.RootProvider, { defaultProps: {
+	unmountOnExit: true,
+	lazyMount: true
+} });
+const Backdrop = withContext(Dialog.Backdrop, "backdrop");
+const CloseTrigger = withContext(Dialog.CloseTrigger, "closeTrigger");
+const Content = withContext(Dialog.Content, "content");
+const Description = withContext(Dialog.Description, "description");
+const Positioner = withContext(Dialog.Positioner, "positioner");
+const Title = withContext(Dialog.Title, "title");
+const Trigger = withContext(Dialog.Trigger, "trigger");
+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 dialog = useDialogContext();
+	return <ark.button {...props} ref={ref} onClick={() => dialog.setOpen(false)} />;
+});
+
+//#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>;
+});
+
+//#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 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>;
+});
+const FormDialog = {
+	...FormDialogBase,
+	open: (id, props) => FormDialogBase.open(id, props)
+};
+
+//#endregion
+//#region src/components/dialog/overlay-manager.tsx
+const OverlayManager = () => {
+	return <>
+      <FormDialog.Viewport />
+      <ConfirmDialog.Viewport />
+    </>;
+};
+
+//#endregion
+export { ConfirmDialog, dialog_exports as Dialog, FormDialog, OverlayManager };

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { n as DisplayValueProps, t as DisplayValue } from "../../display-value-IyQT1429.js";
+export { DisplayValue, type DisplayValueProps };

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

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

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

@@ -0,0 +1,28 @@
+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 { 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 {
+  export { ActionTrigger, Backdrop, Body, CloseTrigger, Content, Context, Description, Footer, Header, Positioner, Root, RootProps, RootProvider, Title, Trigger };
+}
+type RootProps = ComponentProps<typeof Root>;
+declare const Root: _pyck_styled_system_jsx0.StyleContextRootProvider<(props: Dialog.RootProps) => react_jsx_runtime0.JSX.Element, _pyck_styled_system_recipes0.DrawerRecipe>;
+declare const RootProvider: _pyck_styled_system_jsx0.StyleContextRootProvider<(props: Dialog.RootProps) => react_jsx_runtime0.JSX.Element, _pyck_styled_system_recipes0.DrawerRecipe>;
+declare const Backdrop: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Dialog.BackdropProps & react.RefAttributes<HTMLDivElement>>>;
+declare const Positioner: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Dialog.PositionerProps & react.RefAttributes<HTMLDivElement>>>;
+declare const CloseTrigger: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Dialog.CloseTriggerProps & react.RefAttributes<HTMLButtonElement>>>;
+declare const Content: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Dialog.ContentProps & react.RefAttributes<HTMLDivElement>>>;
+declare const Description: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Dialog.DescriptionProps & react.RefAttributes<HTMLDivElement>>>;
+declare const Title: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Dialog.TitleProps & react.RefAttributes<HTMLHeadingElement>>>;
+declare const Trigger: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Dialog.TriggerProps & react.RefAttributes<HTMLButtonElement>>>;
+declare const Body: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Header: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Footer: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const ActionTrigger: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & _ark_ui_react0.PolymorphicProps & react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { drawer_d_exports as Drawer, type RootProps as DrawerRootProps };

package/dist/components/drawer/index.js

@@ -0,0 +1,50 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+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 { Dialog, DialogContext as Context, useDialogContext } from "@ark-ui/react/dialog";
+
+//#region src/components/drawer/drawer.tsx
+var drawer_exports = /* @__PURE__ */ __exportAll({
+	ActionTrigger: () => ActionTrigger,
+	Backdrop: () => Backdrop,
+	Body: () => Body,
+	CloseTrigger: () => CloseTrigger,
+	Content: () => Content,
+	Context: () => Context,
+	Description: () => Description,
+	Footer: () => Footer,
+	Header: () => Header,
+	Positioner: () => Positioner,
+	Root: () => Root,
+	RootProvider: () => RootProvider,
+	Title: () => Title,
+	Trigger: () => Trigger
+});
+const { withRootProvider, withContext } = createStyleContext(drawer);
+const Root = withRootProvider(Dialog.Root, { defaultProps: {
+	unmountOnExit: true,
+	lazyMount: true
+} });
+const RootProvider = withRootProvider(Dialog.Root, { defaultProps: {
+	unmountOnExit: true,
+	lazyMount: true
+} });
+const Backdrop = withContext(Dialog.Backdrop, "backdrop");
+const Positioner = withContext(Dialog.Positioner, "positioner");
+const CloseTrigger = withContext(Dialog.CloseTrigger, "closeTrigger");
+const Content = withContext(Dialog.Content, "content");
+const Description = withContext(Dialog.Description, "description");
+const Title = withContext(Dialog.Title, "title");
+const Trigger = withContext(Dialog.Trigger, "trigger");
+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 dialog = useDialogContext();
+	return <ark.button {...props} ref={ref} onClick={() => dialog.setOpen(false)} />;
+});
+
+//#endregion
+export { drawer_exports as Drawer };

package/dist/components/drilldown-menu/index.d.ts

@@ -0,0 +1,16 @@
+import { TreeCollection } from "@ark-ui/react/collection";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/drilldown-menu/drilldown-menu.closed.d.ts
+interface DrilldownMenuProps<T> {
+  collection: TreeCollection<T>;
+  renderItem?: (node: T) => React.ReactNode;
+  onLeafSelect?: (node: T) => void;
+}
+declare const DrilldownMenu: <T>({
+  collection,
+  renderItem,
+  onLeafSelect
+}: DrilldownMenuProps<T>) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DrilldownMenu, type DrilldownMenuProps };

package/dist/components/drilldown-menu/index.js

@@ -0,0 +1,123 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { n as Icon } from "../../featured-icon-DPysOpSf.js";
+import "../icon/index.js";
+import { t as Span } from "../../span-DWZSA3mH.js";
+import "../span/index.js";
+import { startTransition, useState } from "react";
+import { ark } from "@ark-ui/react/factory";
+import { Box, HStack, Stack, createStyleContext } from "@pyck/styled-system/jsx";
+import { drilldownMenu } from "@pyck/styled-system/recipes";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { Group } from "@pyck/react/group";
+import { Show } from "@pyck/react/show";
+
+//#region src/components/drilldown-menu/drilldown-menu.tsx
+var drilldown_menu_exports = /* @__PURE__ */ __exportAll({
+	Content: () => Content,
+	Item: () => Item,
+	List: () => List,
+	Root: () => Root,
+	Trigger: () => Trigger,
+	Viewport: () => Viewport
+});
+const { withProvider, withContext } = createStyleContext(drilldownMenu);
+const Root = withProvider(ark.div, "root");
+const Viewport = withContext(ark.div, "viewport");
+const Content = withContext(ark.div, "content");
+const List = withContext(ark.ul, "list");
+const Item = withContext(ark.li, "item");
+const Trigger = withContext(ark.button, "trigger");
+
+//#endregion
+//#region src/components/drilldown-menu/use-drilldown-menu.ts
+const useDrilldownMenu = ({ collection }) => {
+	const [currentValue, setCurrentValue] = useState(null);
+	const [direction, setDirection] = useState("forward");
+	const [isAnimating, setIsAnimating] = useState(false);
+	const currentNode = currentValue ? collection.findNode(currentValue) ?? collection.rootNode : collection.rootNode;
+	const current = collection.getNodeChildren(currentNode);
+	const next = (node) => {
+		if (collection.getNodeChildren(node).length > 0) {
+			setDirection("forward");
+			setIsAnimating(true);
+			startTransition(() => {
+				setCurrentValue(collection.getNodeValue(node));
+			});
+		}
+	};
+	const prev = () => {
+		const parentNode = currentValue ? collection.getParentNode(currentValue) : void 0;
+		setDirection("back");
+		setIsAnimating(true);
+		startTransition(() => {
+			setCurrentValue(parentNode && !collection.isRootNode(parentNode) ? collection.getNodeValue(parentNode) : null);
+		});
+	};
+	const depth = currentValue ? collection.getDepth(currentValue) : 0;
+	return {
+		current,
+		currentNode,
+		canGoBack: currentValue !== null,
+		direction,
+		prev,
+		next,
+		depth,
+		isAnimating,
+		setIsAnimating
+	};
+};
+
+//#endregion
+//#region src/components/drilldown-menu/drilldown-menu.closed.tsx
+const DrilldownMenu = ({ collection, renderItem, onLeafSelect }) => {
+	const menu = useDrilldownMenu({ collection });
+	const renderNode = (node) => {
+		if (!node) return null;
+		return renderItem ? renderItem(node) : collection.stringifyNode(node);
+	};
+	const handleNodeClick = (node) => {
+		if (collection.getNodeChildren(node).length > 0) menu.next(node);
+		else if (onLeafSelect) onLeafSelect(node);
+	};
+	const isLeafNode = (node) => collection.getNodeChildren(node).length === 0;
+	return <drilldown_menu_exports.Root>
+      <drilldown_menu_exports.Trigger onClick={menu.prev} disabled={!menu.canGoBack}>
+        <HStack justify="space-between" width="full">
+          <Icon size="sm" color="fg.subtle" opacity={menu.canGoBack ? "1" : "0"}>
+            <ChevronLeftIcon />
+          </Icon>
+          <Stack gap="0" alignItems="start" justify="center">
+            <Span textStyle="md" fontWeight="medium">
+              {menu.canGoBack ? renderNode(menu.currentNode) : "Menu"}
+            </Span>
+          </Stack>
+          <Box />
+        </HStack>
+      </drilldown_menu_exports.Trigger>
+      <drilldown_menu_exports.Viewport>
+        <drilldown_menu_exports.Content key={menu.depth} data-animating={menu.isAnimating || void 0} data-direction={menu.direction} onAnimationEnd={() => menu.setIsAnimating(false)}>
+          <Group attached orientation="vertical" width="full" asChild>
+            <drilldown_menu_exports.List>
+              {menu.current?.map((node) => <drilldown_menu_exports.Item key={collection.getNodeValue(node)}>
+                  <drilldown_menu_exports.Trigger onClick={() => handleNodeClick(node)}>
+                    <HStack justifyContent="space-between" width="full">
+                      <Stack gap="0" alignItems="start">
+                        <Span fontWeight="medium">{renderNode(node)}</Span>
+                      </Stack>
+                      <Show when={!isLeafNode(node)}>
+                        <Icon size="sm" color="fg.subtle">
+                          <ChevronRightIcon />
+                        </Icon>
+                      </Show>
+                    </HStack>
+                  </drilldown_menu_exports.Trigger>
+                </drilldown_menu_exports.Item>)}
+            </drilldown_menu_exports.List>
+          </Group>
+        </drilldown_menu_exports.Content>
+      </drilldown_menu_exports.Viewport>
+    </drilldown_menu_exports.Root>;
+};
+
+//#endregion
+export { DrilldownMenu };

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

@@ -0,0 +1,21 @@
+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 { Field as Field$1 } from "@ark-ui/react/field";
+
+//#region src/components/field/field.d.ts
+type RootProps = ComponentProps<typeof Root>;
+declare const Root: _pyck_styled_system_jsx0.StyleContextProvider<react.ForwardRefExoticComponent<Field$1.RootProps & react.RefAttributes<HTMLDivElement>>, _pyck_styled_system_recipes0.FieldRecipe>;
+//#endregion
+//#region src/components/field/field.closed.d.ts
+interface FieldProps extends Omit<RootProps, 'label'> {
+  label?: ReactNode;
+  helperText?: ReactNode;
+  errorText?: ReactNode;
+  optionalText?: ReactNode;
+  hideLabel?: boolean;
+}
+declare const Field: react.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Field, type FieldProps };

package/dist/components/field/index.js

@@ -0,0 +1,49 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { forwardRef } from "react";
+import { VisuallyHidden, createStyleContext } from "@pyck/styled-system/jsx";
+import { field } from "@pyck/styled-system/recipes";
+import { Show } from "@pyck/react/show";
+import { Wrap } from "@pyck/react/wrap";
+import { Field as Field$1, FieldContext as Context } from "@ark-ui/react/field";
+
+//#region src/components/field/field.tsx
+var field_exports = /* @__PURE__ */ __exportAll({
+	Context: () => Context,
+	ErrorText: () => ErrorText,
+	HelperText: () => HelperText,
+	Label: () => Label,
+	RequiredIndicator: () => RequiredIndicator,
+	Root: () => Root,
+	RootProvider: () => RootProvider
+});
+const { withProvider, withContext } = createStyleContext(field);
+const Root = withProvider(Field$1.Root, "root");
+const RootProvider = withProvider(Field$1.RootProvider, "root");
+const ErrorText = withContext(Field$1.ErrorText, "errorText");
+const HelperText = withContext(Field$1.HelperText, "helperText");
+const Label = withContext(Field$1.Label, "label");
+const RequiredIndicator = withContext(Field$1.RequiredIndicator, "requiredIndicator");
+
+//#endregion
+//#region src/components/field/field.closed.tsx
+const Field = forwardRef(function Field(props, ref) {
+	const { label, children, hideLabel, helperText, errorText, optionalText, ...rest } = props;
+	return <field_exports.Root ref={ref} {...rest}>
+      <Show when={label}>
+        <Wrap when={hideLabel} with={(children) => <VisuallyHidden>{children}</VisuallyHidden>}>
+          <field_exports.Label>
+            {label}
+            <field_exports.RequiredIndicator fallback={optionalText} />
+          </field_exports.Label>
+        </Wrap>
+      </Show>
+      {children}
+      <Show when={helperText}>
+        <field_exports.HelperText>{helperText}</field_exports.HelperText>
+      </Show>
+      <field_exports.ErrorText>{errorText}</field_exports.ErrorText>
+    </field_exports.Root>;
+});
+
+//#endregion
+export { Field };

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

@@ -0,0 +1,23 @@
+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 { Fieldset, FieldsetContext as Context } from "@ark-ui/react/fieldset";
+import * as _ark_ui_react0 from "@ark-ui/react";
+
+//#region src/components/fieldset/fieldset.d.ts
+declare namespace fieldset_d_exports {
+  export { Body, Context, Description, ErrorText, Footer, Header, HelperText, Legend, Root, RootProps, RootProvider };
+}
+type RootProps = ComponentProps<typeof Root>;
+declare const Root: _pyck_styled_system_jsx0.StyleContextProvider<react.ForwardRefExoticComponent<Fieldset.RootProps & react.RefAttributes<HTMLFieldSetElement>>, _pyck_styled_system_recipes0.FieldsetRecipe>;
+declare const RootProvider: _pyck_styled_system_jsx0.StyleContextProvider<react.ForwardRefExoticComponent<Fieldset.RootProviderProps & react.RefAttributes<HTMLFieldSetElement>>, _pyck_styled_system_recipes0.FieldsetRecipe>;
+declare const Legend: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Fieldset.LegendProps & react.RefAttributes<HTMLLegendElement>>>;
+declare const HelperText: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Fieldset.HelperTextProps & react.RefAttributes<HTMLSpanElement>>>;
+declare const ErrorText: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<Fieldset.ErrorTextProps & react.RefAttributes<HTMLSpanElement>>>;
+declare const Header: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Body: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Footer: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & _ark_ui_react0.PolymorphicProps>>;
+declare const Description: _pyck_styled_system_jsx0.StyleContextConsumer<react.ForwardRefExoticComponent<react.ClassAttributes<HTMLParagraphElement> & react.HTMLAttributes<HTMLParagraphElement> & _ark_ui_react0.PolymorphicProps>>;
+//#endregion
+export { fieldset_d_exports as Fieldset };

package/dist/components/fieldset/index.js

@@ -0,0 +1,32 @@
+import { t as __exportAll } from "../../chunk-BYypO7fO.js";
+import { ark } from "@ark-ui/react/factory";
+import { createStyleContext } from "@pyck/styled-system/jsx";
+import { fieldset } from "@pyck/styled-system/recipes";
+import { Fieldset, FieldsetContext as Context } from "@ark-ui/react/fieldset";
+
+//#region src/components/fieldset/fieldset.tsx
+var fieldset_exports = /* @__PURE__ */ __exportAll({
+	Body: () => Body,
+	Context: () => Context,
+	Description: () => Description,
+	ErrorText: () => ErrorText,
+	Footer: () => Footer,
+	Header: () => Header,
+	HelperText: () => HelperText,
+	Legend: () => Legend,
+	Root: () => Root,
+	RootProvider: () => RootProvider
+});
+const { withProvider, withContext } = createStyleContext(fieldset);
+const Root = withProvider(Fieldset.Root, "root");
+const RootProvider = withProvider(Fieldset.RootProvider, "root");
+const Legend = withContext(Fieldset.Legend, "legend");
+const HelperText = withContext(Fieldset.HelperText, "helperText");
+const ErrorText = withContext(Fieldset.ErrorText, "errorText");
+const Header = withContext(ark.div, "header");
+const Body = withContext(ark.div, "body");
+const Footer = withContext(ark.div, "footer");
+const Description = withContext(ark.p, "description");
+
+//#endregion
+export { fieldset_exports as Fieldset };