@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,65 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type { ComponentProps, ReactNode } from "react";
+import { type CloseButtonProps } from "../button/close-button.tsx";
+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 = Pick<CloseButtonProps, "closeLabel">;
+/** The icon-only way out, for a header or a footer. */
+declare const CloseButton: ({ closeLabel, }: 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 {};

package/dist/components/drawer/drawer.js

@@ -0,0 +1,219 @@
+import { CloseButton as CloseButton$1 } from "../button/close-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 { closeLabel } = 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] !== closeLabel) {
+		t2 = /* @__PURE__ */ jsx(CloseButton$1, {
+			closeLabel,
+			render: t1
+		});
+		$[1] = closeLabel;
+		$[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 @@
+export * from "./drawer.tsx";

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,11 @@
+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;

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,2 @@
+export * from "./email-field.tsx";
+export * from "./tsf-email-field.tsx";

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,13 @@
+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;

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,16 @@
+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;

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 @@
+export * from "./empty-message.tsx";

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

@@ -0,0 +1 @@
+export { EmptyMessage } from "./empty-message.js";

package/dist/components/error-boundary/error-boundary.d.ts

@@ -0,0 +1,43 @@
+import type { ErrorInfo, ReactNode } from "react";
+import { type ErrorBoundaryPropsWithRender, type FallbackProps } from "react-error-boundary";
+import type { SvgComponent } from "../icon/icon.tsx";
+type SharedProps = Readonly<{
+    children: ReactNode;
+    /** Called with what was thrown, such as to log it. */
+    onError?: (error: unknown, info: ErrorInfo) => void;
+    /** Called when the boundary resets, from a retry or a change in `resetKeys`. */
+    onReset?: ErrorBoundaryPropsWithRender["onReset"];
+    /** Values that reset the boundary when one of them changes. */
+    resetKeys?: ReadonlyArray<unknown>;
+}>;
+type DefaultFallbackProps = SharedProps & Readonly<{
+    /** The fallback's title: what happened. */
+    title: string;
+    /** The fallback's description: what to do next, or who can help. */
+    description?: string;
+    /** A glyph on the fallback's error disc. */
+    icon?: SvgComponent;
+    /** The retry button's label; without it, the fallback offers no retry. */
+    retryLabel?: string;
+    fallbackRender?: never;
+}>;
+type CustomFallbackProps = SharedProps & Readonly<{
+    /** Renders the fallback in place of `ErrorMessage`. */
+    fallbackRender: (props: FallbackProps) => ReactNode;
+    title?: never;
+    description?: never;
+    icon?: never;
+    retryLabel?: never;
+}>;
+export type ErrorBoundaryProps = DefaultFallbackProps | CustomFallbackProps;
+/**
+ * Renders a fallback in place of `children` once rendering them throws: an
+ * `ErrorMessage` with the given copy, or whatever `fallbackRender` returns.
+ *
+ * @example
+ * <ErrorBoundary title="This widget failed to load" retryLabel="Try again">
+ * 	<Widget />
+ * </ErrorBoundary>
+ */
+export declare const ErrorBoundary: (props: ErrorBoundaryProps) => ReactNode;
+export {};

package/dist/components/error-boundary/error-boundary.js

@@ -0,0 +1,60 @@
+import SvgRestartAlt from "../../vendor/@material-design-icons/svg/outlined/restart_alt.js";
+import { Button } from "../button/button.js";
+import { ErrorMessage } from "../error-message/error-message.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { ErrorBoundary } from "react-error-boundary";
+// src/components/error-boundary/error-boundary.tsx
+var defaultFallback = ({ title, description, icon, retryLabel }) => ({ resetErrorBoundary }) => /* @__PURE__ */ jsx(ErrorMessage, {
+	title,
+	description,
+	icon,
+	action: retryLabel === void 0 ? void 0 : /* @__PURE__ */ jsx(Button, {
+		variant: "primary",
+		icon: SvgRestartAlt,
+		onClick: () => resetErrorBoundary(),
+		children: retryLabel
+	})
+});
+/**
+* Renders a fallback in place of `children` once rendering them throws: an
+* `ErrorMessage` with the given copy, or whatever `fallbackRender` returns.
+*
+* @example
+* <ErrorBoundary title="This widget failed to load" retryLabel="Try again">
+* 	<Widget />
+* </ErrorBoundary>
+*/
+var ErrorBoundary$1 = (props) => {
+	const $ = c(10);
+	let t0;
+	if ($[0] !== props) {
+		t0 = props.fallbackRender === void 0 ? defaultFallback(props) : props.fallbackRender;
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props.resetKeys) {
+		t1 = props.resetKeys === void 0 ? void 0 : [...props.resetKeys];
+		$[2] = props.resetKeys;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props.children || $[5] !== props.onError || $[6] !== props.onReset || $[7] !== t0 || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ErrorBoundary, {
+			fallbackRender: t0,
+			onError: props.onError,
+			onReset: props.onReset,
+			resetKeys: t1,
+			children: props.children
+		});
+		$[4] = props.children;
+		$[5] = props.onError;
+		$[6] = props.onReset;
+		$[7] = t0;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+};
+export { ErrorBoundary$1 as ErrorBoundary };

package/dist/components/error-boundary/index.d.ts

@@ -0,0 +1 @@
+export * from "./error-boundary.tsx";

package/dist/components/error-boundary/index.js

@@ -0,0 +1 @@
+export { ErrorBoundary } from "./error-boundary.js";

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type StatusPresetProps } from "../status-message/status-preset.tsx";
+export type ErrorMessageProps = StatusPresetProps;
+/**
+ * What a region shows when its content failed to arrive: an icon on an error
+ * disc, a title, a description and a way on. Announced at once as an alert.
+ *
+ * @example
+ * <ErrorMessage
+ * 	title="The declarations could not be loaded"
+ * 	description="Check your connection and try again."
+ * 	action={<Button onClick={refetch}>Try again</Button>}
+ * />
+ */
+export declare const ErrorMessage: (props: ErrorMessageProps) => ReactNode;

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

@@ -0,0 +1,30 @@
+import { StatusPreset } from "../status-message/status-preset.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/error-message/error-message.tsx
+/**
+* What a region shows when its content failed to arrive: an icon on an error
+* disc, a title, a description and a way on. Announced at once as an alert.
+*
+* @example
+* <ErrorMessage
+* 	title="The declarations could not be loaded"
+* 	description="Check your connection and try again."
+* 	action={<Button onClick={refetch}>Try again</Button>}
+* />
+*/
+var ErrorMessage = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(StatusPreset, {
+			live: "alert",
+			tone: "error",
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+export { ErrorMessage };

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

@@ -0,0 +1 @@
+export * from "./error-message.tsx";

package/dist/components/error-message/index.js

@@ -0,0 +1 @@
+export { ErrorMessage } from "./error-message.js";

package/dist/components/error-text/error-cascade.d.ts

@@ -0,0 +1,32 @@
+import { type Context } from "react";
+/** Hands each block of error messages its place in the wave it arrives with. */
+export type ErrorCascade = Readonly<{
+    /**
+     * The number of messages ahead of `block` in its wave. A block keeps the index
+     * it was first given; one that appears after the wave has ended starts the
+     * next one at zero.
+     */
+    claim: (block: object, count: number) => number;
+}>;
+/**
+ * A cascade whose waves end at the next `schedule` callback, by default the
+ * next animation frame, so blocks that appear together drop in one after
+ * another.
+ *
+ * @example
+ * const cascade = createErrorCascade();
+ * cascade.claim(firstBlock, 2); // 0
+ * cascade.claim(secondBlock, 1); // 2
+ */
+export declare const createErrorCascade: (schedule?: (endWave: () => void) => void) => ErrorCascade;
+declare const ErrorCascadeContext: Context<ErrorCascade | undefined>;
+/** Provides the cascade the error texts inside it share. */
+export declare const ErrorCascadeProvider: typeof ErrorCascadeContext.Provider;
+/**
+ * The cascade of the enclosing `Form.Root`, if any.
+ *
+ * @example
+ * const cascade = useErrorCascade();
+ */
+export declare const useErrorCascade: () => ErrorCascade | undefined;
+export {};