@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

package/dist/components/divider/divider.module.js

@@ -0,0 +1,10 @@
+import './divider.css';// src/components/divider/divider.module.scss
+var container = "_container_1y7jl_3";
+var divider = "_divider_1y7jl_6";
+var subtitle = "_subtitle_1y7jl_11";
+var divider_module_default = {
+	container,
+	divider,
+	subtitle
+};
+export { container, divider_module_default as default, divider, subtitle };

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

@@ -0,0 +1,2 @@
+export * from "./divider.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/divider/index.js

@@ -0,0 +1 @@
+export { Divider } from "./divider.js";

package/dist/components/drawer/drawer.css

@@ -0,0 +1,168 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._backdrop_17y86_3 {
+    --overlay-dim: 0.4;
+    --overlay-opacity: 1;
+    position: fixed;
+    inset: 0;
+    background-color: rgb(0, 0, 0, var(--overlay-dim));
+    backdrop-filter: blur(1px);
+    opacity: var(--overlay-opacity);
+  }
+  @media not (prefers-reduced-motion) {
+    ._backdrop_17y86_3 {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  html[data-theme="dark"] ._backdrop_17y86_3 {
+    --overlay-dim: 0.6;
+  }
+  @media (prefers-color-scheme: dark) {
+    html:not([data-theme="light"]) ._backdrop_17y86_3 {
+      --overlay-dim: 0.6;
+    }
+  }
+  ._backdrop_17y86_3[data-starting-style], ._backdrop_17y86_3[data-ending-style] {
+    opacity: 0;
+  }
+  ._backdrop_17y86_3 {
+    --overlay-dim: 0.22;
+    --overlay-opacity: calc(
+    	1 - var(--drawer-swipe-progress)
+    );
+  }
+  @media not (prefers-reduced-motion) {
+    ._backdrop_17y86_3 {
+      transition-timing-function: var(--sys-motion-emphasized);
+    }
+  }
+  @supports (-webkit-touch-callout: none) {
+    ._backdrop_17y86_3 {
+      position: absolute;
+    }
+  }
+  html[data-theme="dark"] ._backdrop_17y86_3 {
+    --overlay-dim: 0.4;
+  }
+  @media (prefers-color-scheme: dark) {
+    html:not([data-theme="light"]) ._backdrop_17y86_3 {
+      --overlay-dim: 0.4;
+    }
+  }
+  ._backdrop_17y86_3[data-swiping] {
+    transition-duration: 0ms;
+  }
+  ._backdrop_17y86_3[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * 0.2s);
+  }
+  ._viewport_17y86_58 {
+    --drawer-viewport-padding: 0px;
+    position: fixed;
+    inset: 0;
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--drawer-viewport-padding);
+  }
+  @supports (-webkit-touch-callout: none) {
+    ._viewport_17y86_58 {
+      --drawer-viewport-padding: var(--sys-unit-8);
+    }
+  }
+  ._popup_17y86_71 {
+    --drawer-bleed: 3rem;
+    --drawer-inset: var(--sys-unit-16);
+    position: relative;
+    box-sizing: border-box;
+    inline-size: calc(33dvw + var(--drawer-bleed));
+    min-inline-size: 24rem;
+    block-size: 100%;
+    background: var(--drawer-surface, var(--sys-color-surface));
+    padding: var(--drawer-inset);
+    padding-right: calc(var(--drawer-inset) + var(--drawer-bleed));
+    margin-right: calc(-1 * var(--drawer-bleed));
+    color: var(--sys-color-text);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    touch-action: auto;
+    transform: translateX(var(--drawer-swipe-movement-x));
+  }
+  @media not (prefers-reduced-motion) {
+    ._popup_17y86_71 {
+      transition: transform var(--sys-motion-short) var(--sys-motion-emphasized);
+      will-change: transform;
+    }
+  }
+  ._popup_17y86_71::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: var(--sys-unit-3);
+    inset-block-start: 50%;
+    inline-size: var(--sys-unit-2);
+    block-size: var(--sys-unit-16);
+    border-radius: var(--sys-radius-full);
+    background: var(--sys-color-outline);
+    translate: 0 -50%;
+  }
+  ._popup_17y86_71[data-swiping] {
+    user-select: none;
+  }
+  ._popup_17y86_71[data-starting-style], ._popup_17y86_71[data-ending-style] {
+    transform: translateX(calc(100% - var(--drawer-bleed) + var(--drawer-viewport-padding) + 2px));
+  }
+  ._popup_17y86_71[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * 0.2s);
+  }
+  @supports (-webkit-touch-callout: none) {
+    ._popup_17y86_71 {
+      --drawer-bleed: 0px;
+      margin-right: 0;
+      border-radius: var(--sys-radius-lg);
+    }
+  }
+  ._popup_17y86_71[data-swipe-direction=down] {
+    align-self: flex-end;
+    inline-size: 100%;
+    min-inline-size: 0;
+    block-size: var(--drawer-sheet-block-size, auto);
+    max-block-size: var(--drawer-sheet-max, 85dvh);
+    border-radius: var(--sys-radius-xl) var(--sys-radius-xl) 0 0;
+    margin-right: 0;
+    margin-bottom: calc(-1 * var(--drawer-bleed));
+    padding-top: var(--sys-unit-6);
+    padding-right: var(--drawer-inset);
+    padding-bottom: calc(var(--drawer-inset) + var(--drawer-bleed) + 1.75rem);
+    transform: translateY(var(--drawer-swipe-movement-y));
+  }
+  ._popup_17y86_71[data-swipe-direction=down]::before {
+    position: static;
+    display: block;
+    flex-shrink: 0;
+    inline-size: var(--sys-unit-16);
+    block-size: var(--sys-unit-2);
+    margin-inline: auto;
+    margin-block-end: var(--sys-unit-6);
+    translate: none;
+  }
+  ._popup_17y86_71[data-swipe-direction=down][data-starting-style], ._popup_17y86_71[data-swipe-direction=down][data-ending-style] {
+    transform: translateY(calc(100% - var(--drawer-bleed) + var(--drawer-viewport-padding) + 2px));
+  }
+  ._filled_17y86_149 {
+    --drawer-sheet-block-size: var(
+    	--drawer-sheet-max,
+    	85dvh
+    );
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  ._header_17y86_158 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sys-unit-8);
+  }
+  ._title_17y86_164 {
+    color: var(--sys-color-text);
+    font: var(--sys-font-heading-small);
+  }
+}

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

@@ -0,0 +1,68 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type { ComponentProps, ReactNode } from "react";
+declare const Backdrop: ({ className, ...props }: ComponentProps<typeof BaseDrawer.Backdrop>) => ReactNode;
+declare const Viewport: ({ className, ...props }: ComponentProps<typeof BaseDrawer.Viewport>) => ReactNode;
+export type DrawerPopupProps = ComponentProps<typeof BaseDrawer.Popup> & Readonly<{
+    /**
+     * Takes the full height of the bottom sheet, for content that scrolls
+     * inside it rather than sizing it.
+     */
+    filled?: boolean;
+}>;
+declare const Popup: ({ className, filled, ...props }: DrawerPopupProps) => ReactNode;
+declare const Title: ({ className, ...props }: ComponentProps<typeof BaseDrawer.Title>) => ReactNode;
+export type DrawerHeaderProps = Readonly<{
+    children?: ReactNode;
+    className?: string;
+}>;
+/** The title's line. Put a `Drawer.CloseButton` in it to trail a way out. */
+declare const Header: ({ children, className, }: DrawerHeaderProps) => ReactNode;
+export type DrawerCloseButtonProps = Readonly<{
+    /** Accessible name, surfaced as the tooltip hint and the `aria-label`. */
+    label: string;
+}>;
+/** The icon-only way out, for a header or a footer. */
+declare const CloseButton: ({ label, }: DrawerCloseButtonProps) => ReactNode;
+type DrawerParts = Readonly<{
+    Root: typeof BaseDrawer.Root;
+    Trigger: typeof BaseDrawer.Trigger;
+    Portal: typeof BaseDrawer.Portal;
+    Backdrop: typeof Backdrop;
+    Viewport: typeof Viewport;
+    Popup: typeof Popup;
+    Content: typeof BaseDrawer.Content;
+    Header: typeof Header;
+    Title: typeof Title;
+    Close: typeof BaseDrawer.Close;
+    CloseButton: typeof CloseButton;
+    createHandle: typeof BaseDrawer.createHandle;
+}>;
+/**
+ * Shared wrapper over base-ui's Drawer, mirroring its parts. Its look follows
+ * `swipeDirection` on `Drawer.Root`: `"right"` slides a side panel in from the
+ * right, `"down"` raises a bottom sheet up to 85dvh tall. The caller picks the
+ * direction, for example from its own viewport query.
+ *
+ * @example
+ * const handle = Drawer.createHandle();
+ * const narrow = useMediaQuery("(width < 40rem)");
+ *
+ * <Drawer.Root handle={handle} swipeDirection={narrow ? "down" : "right"}>
+ *   <Drawer.Trigger handle={handle}>Open</Drawer.Trigger>
+ *   <Drawer.Portal>
+ *     <Drawer.Backdrop />
+ *     <Drawer.Viewport>
+ *       <Drawer.Popup>
+ *         <Drawer.Content>
+ *           <Drawer.Title>Filters</Drawer.Title>
+ *           ...
+ *           <Drawer.Close>Done</Drawer.Close>
+ *         </Drawer.Content>
+ *       </Drawer.Popup>
+ *     </Drawer.Viewport>
+ *   </Drawer.Portal>
+ * </Drawer.Root>
+ */
+export declare const Drawer: DrawerParts;
+export {};
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAG7D,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,QAAA,MAAM,QAAQ,4BAGX,cAAc,CAChB,OAAO,UAAU,CAAC,QAAQ,CAC1B,KAAG,SAKH,CAAC;AAEF,QAAA,MAAM,QAAQ,4BAGX,cAAc,CAChB,OAAO,UAAU,CAAC,QAAQ,CAC1B,KAAG,SAKH,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAC5C,OAAO,UAAU,CAAC,KAAK,CACvB,GACA,QAAQ,CAAC;IACR;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC,CAAC;AAEJ,QAAA,MAAM,KAAK,oCAIR,gBAAgB,KAAG,SASrB,CAAC;AAEF,QAAA,MAAM,KAAK,4BAGR,cAAc,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,KAAG,SAK5C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,6EAA6E;AAC7E,QAAA,MAAM,MAAM,6BAGT,iBAAiB,KAAG,SAItB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC7C,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,uDAAuD;AACvD,QAAA,MAAM,WAAW,eAEd,sBAAsB,KAAG,SAQ3B,CAAC;AAEF,KAAK,WAAW,GAAG,QAAQ,CAAC;IAC3B,IAAI,EAAE,OAAO,UAAU,CAAC,IAAI,CAAC;IAC7B,OAAO,EAAE,OAAO,UAAU,CAAC,OAAO,CAAC;IACnC,MAAM,EAAE,OAAO,UAAU,CAAC,MAAM,CAAC;IACjC,QAAQ,EAAE,OAAO,QAAQ,CAAC;IAC1B,QAAQ,EAAE,OAAO,QAAQ,CAAC;IAC1B,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,OAAO,EAAE,OAAO,UAAU,CAAC,OAAO,CAAC;IACnC,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,UAAU,CAAC,KAAK,CAAC;IAC/B,WAAW,EAAE,OAAO,WAAW,CAAC;IAChC,YAAY,EAAE,OAAO,UAAU,CAAC,YAAY,CAAC;CAC7C,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,WAapB,CAAC"}

package/dist/components/drawer/drawer.js

@@ -0,0 +1,223 @@
+import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
+import { Button } from "../button/button.js";
+import drawer_module_default from "./drawer.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Drawer } from "@base-ui/react/drawer";
+// src/components/drawer/drawer.tsx
+var Backdrop = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(drawer_module_default.backdrop, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Drawer.Backdrop, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Viewport = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(drawer_module_default.viewport, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Drawer.Viewport, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Popup = (t0) => {
+	const $ = c(10);
+	let className;
+	let filled;
+	let props;
+	if ($[0] !== t0) {
+		({className, filled, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = filled;
+		$[3] = props;
+	} else {
+		className = $[1];
+		filled = $[2];
+		props = $[3];
+	}
+	const t1 = filled === true && drawer_module_default.filled;
+	let t2;
+	if ($[4] !== className || $[5] !== t1) {
+		t2 = clsx(drawer_module_default.popup, t1, className);
+		$[4] = className;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Drawer.Popup, {
+			className: t2,
+			...props
+		});
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+};
+var Title = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(drawer_module_default.title, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Drawer.Title, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** The title's line. Put a `Drawer.CloseButton` in it to trail a way out. */
+var Header = (t0) => {
+	const $ = c(5);
+	const { children, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(drawer_module_default.header, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+/** The icon-only way out, for a header or a footer. */
+var CloseButton = (t0) => {
+	const $ = c(3);
+	const { label } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Drawer.Close, {});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== label) {
+		t2 = /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			iconOnly: true,
+			icon: SvgClose,
+			label,
+			render: t1
+		});
+		$[1] = label;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+};
+/**
+* Shared wrapper over base-ui's Drawer, mirroring its parts. Its look follows
+* `swipeDirection` on `Drawer.Root`: `"right"` slides a side panel in from the
+* right, `"down"` raises a bottom sheet up to 85dvh tall. The caller picks the
+* direction, for example from its own viewport query.
+*
+* @example
+* const handle = Drawer.createHandle();
+* const narrow = useMediaQuery("(width < 40rem)");
+*
+* <Drawer.Root handle={handle} swipeDirection={narrow ? "down" : "right"}>
+*   <Drawer.Trigger handle={handle}>Open</Drawer.Trigger>
+*   <Drawer.Portal>
+*     <Drawer.Backdrop />
+*     <Drawer.Viewport>
+*       <Drawer.Popup>
+*         <Drawer.Content>
+*           <Drawer.Title>Filters</Drawer.Title>
+*           ...
+*           <Drawer.Close>Done</Drawer.Close>
+*         </Drawer.Content>
+*       </Drawer.Popup>
+*     </Drawer.Viewport>
+*   </Drawer.Portal>
+* </Drawer.Root>
+*/
+var Drawer$1 = {
+	Root: Drawer.Root,
+	Trigger: Drawer.Trigger,
+	Portal: Drawer.Portal,
+	Backdrop,
+	Viewport,
+	Popup,
+	Content: Drawer.Content,
+	Header,
+	Title,
+	Close: Drawer.Close,
+	CloseButton,
+	createHandle: Drawer.createHandle
+};
+export { Drawer$1 as Drawer };

package/dist/components/drawer/drawer.module.js

@@ -0,0 +1,16 @@
+import './drawer.css';// src/components/drawer/drawer.module.scss
+var backdrop = "_backdrop_17y86_3";
+var viewport = "_viewport_17y86_58";
+var popup = "_popup_17y86_71";
+var filled = "_filled_17y86_149";
+var header = "_header_17y86_158";
+var title = "_title_17y86_164";
+var drawer_module_default = {
+	backdrop,
+	viewport,
+	popup,
+	filled,
+	header,
+	title
+};
+export { backdrop, drawer_module_default as default, filled, header, popup, title, viewport };

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

@@ -0,0 +1,2 @@
+export * from "./drawer.tsx";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer } from "./drawer.js";

package/dist/components/email-field/email-field.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { type TextFieldClearProps, type TextPresetProps } from "../text-field/index.ts";
+export type EmailFieldProps = TextPresetProps & TextFieldClearProps;
+/**
+ * An email address field, with the keyboard that carries an `@` and the
+ * platform's own address autofill.
+ *
+ * @example
+ * <EmailField label="Email address" optionalLabel="optional" value={email} onValueChange={setEmail} />
+ */
+export declare const EmailField: ({ enterKeyHint, ...props }: EmailFieldProps) => ReactNode;
+//# sourceMappingURL=email-field.d.ts.map

package/dist/components/email-field/email-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-field.d.ts","sourceRoot":"","sources":["../../../src/components/email-field/email-field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEN,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,eAAe,GAAG,eAAe,GAC5C,mBAAmB,CAAC;AAErB;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,+BAGpB,eAAe,KAAG,SAWpB,CAAC"}

package/dist/components/email-field/email-field.js

@@ -0,0 +1,45 @@
+import SvgMail from "../../vendor/@material-design-icons/svg/outlined/mail.js";
+import { TextField } from "../text-field/text-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/email-field/email-field.tsx
+/**
+* An email address field, with the keyboard that carries an `@` and the
+* platform's own address autofill.
+*
+* @example
+* <EmailField label="Email address" optionalLabel="optional" value={email} onValueChange={setEmail} />
+*/
+var EmailField = (t0) => {
+	const $ = c(6);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({enterKeyHint: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const enterKeyHint = t1 === void 0 ? "next" : t1;
+	let t2;
+	if ($[3] !== enterKeyHint || $[4] !== props) {
+		t2 = /* @__PURE__ */ jsx(TextField, {
+			...props,
+			enterKeyHint,
+			icon: SvgMail,
+			type: "email",
+			inputMode: "email",
+			autoComplete: "email",
+			autoCapitalize: "none",
+			spellCheck: false
+		});
+		$[3] = enterKeyHint;
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+export { EmailField };

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

@@ -0,0 +1,3 @@
+export * from "./email-field.tsx";
+export * from "./tsf-email-field.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/email-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/email-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC"}

package/dist/components/email-field/index.js

@@ -0,0 +1,3 @@
+import { EmailField } from "./email-field.js";
+import { TSFEmailField } from "./tsf-email-field.js";
+export { EmailField, TSFEmailField };

package/dist/components/email-field/tsf-email-field.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type TextFieldClearProps, type TSFTextPresetProps } from "../text-field/index.ts";
+export type TSFEmailFieldProps = TSFTextPresetProps<TextFieldClearProps>;
+/**
+ * `EmailField` bound to the TanStack Form field it renders in. Registered as
+ * `field.EmailField`.
+ *
+ * @example
+ * <form.AppField name="email">
+ * 	{field => <field.EmailField label="Email address" optionalLabel="optional" />}
+ * </form.AppField>
+ */
+export declare const TSFEmailField: (props: TSFEmailFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-email-field.d.ts.map

package/dist/components/email-field/tsf-email-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-email-field.d.ts","sourceRoot":"","sources":["../../../src/components/email-field/tsf-email-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEN,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,MAAM,wBAAwB,CAAC;AAGhC,MAAM,MAAM,kBAAkB,GAC7B,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;AAEzC;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,CAC3B,KAAK,EAAE,kBAAkB,KACrB,SAC8C,CAAC"}

package/dist/components/email-field/tsf-email-field.js

@@ -0,0 +1,14 @@
+import { connectTextPreset } from "../text-field/connect-text-preset.js";
+import { EmailField } from "./email-field.js";
+// src/components/email-field/tsf-email-field.tsx
+/**
+* `EmailField` bound to the TanStack Form field it renders in. Registered as
+* `field.EmailField`.
+*
+* @example
+* <form.AppField name="email">
+* 	{field => <field.EmailField label="Email address" optionalLabel="optional" />}
+* </form.AppField>
+*/
+var TSFEmailField = connectTextPreset(EmailField);
+export { TSFEmailField };

package/dist/components/empty-message/empty-message.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { type StatusPresetProps } from "../status-message/status-preset.tsx";
+export type EmptyMessageProps = StatusPresetProps;
+/**
+ * What a region shows when its content arrived and holds nothing: an icon on a
+ * neutral disc, a title, a description and a way on. Announced politely as a
+ * status.
+ *
+ * @example
+ * <EmptyMessage
+ * 	icon={InboxIcon}
+ * 	title="No declarations yet"
+ * 	description="Declarations you send show up here."
+ * />
+ */
+export declare const EmptyMessage: (props: EmptyMessageProps) => ReactNode;
+//# sourceMappingURL=empty-message.d.ts.map

package/dist/components/empty-message/empty-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-message.d.ts","sourceRoot":"","sources":["../../../src/components/empty-message/empty-message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEN,KAAK,iBAAiB,EACtB,MAAM,qCAAqC,CAAC;AAE7C,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,CAAC;AAElD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,UACjB,iBAAiB,KACtB,SAEF,CAAC"}

package/dist/components/empty-message/empty-message.js

@@ -0,0 +1,31 @@
+import { StatusPreset } from "../status-message/status-preset.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/empty-message/empty-message.tsx
+/**
+* What a region shows when its content arrived and holds nothing: an icon on a
+* neutral disc, a title, a description and a way on. Announced politely as a
+* status.
+*
+* @example
+* <EmptyMessage
+* 	icon={InboxIcon}
+* 	title="No declarations yet"
+* 	description="Declarations you send show up here."
+* />
+*/
+var EmptyMessage = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(StatusPreset, {
+			live: "status",
+			tone: "neutral",
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+export { EmptyMessage };

package/dist/components/empty-message/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./empty-message.tsx";
+//# sourceMappingURL=index.d.ts.map