@yelison/forma-ui 0.0.1-bootstrap.0 → 0.1.0

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+/** The props that bind a control to the label, hint and error of its {@link Field}. */
+export interface FieldControlProps {
+    /** Id that links the control to its label. */
+    id: string;
+    /** Ids of the hint, the error and any other text that describes the control. */
+    'aria-describedby'?: string;
+    /** `true` when there is an error; left undefined otherwise. */
+    'aria-invalid'?: true;
+}
+/** The props of {@link Field}. */
+export interface FieldProps {
+    /** Visible label of the control. */
+    label: ReactNode;
+    /** Permanent help text under the control. */
+    hint?: ReactNode;
+    /**
+     * Error message; marks the control as invalid and describes it. It is announced when it appears, unless `announce`
+     * says otherwise. It is the only thing that sets `aria-invalid`: a consumer value for that attribute is overwritten.
+     */
+    error?: ReactNode;
+    /**
+     * Whether the error is announced when it appears. `'assertive'`, the default, renders it with `role="alert"`, so a
+     * screen reader interrupts to read it: right for a real form, where the error answers what the user just did.
+     *
+     * `'off'` renders plain text: nothing is announced, and the control stays invalid and described by the error.
+     * Use it where an error is shown without anyone having caused it, such as a documentation specimen or a
+     * catalogue that mounts several invalid fields on load. Do not use it in a form that people fill in: they would
+     * not hear that their input was rejected.
+     */
+    announce?: 'assertive' | 'off';
+    /** Id of the control; one is generated when omitted. */
+    id?: string;
+    /** Extra ids that describe the control, after the error and the hint. */
+    describedBy?: string;
+    /** Class name of the field container. */
+    className?: string;
+    /** Receives the linking props and returns the control. */
+    children: (control: FieldControlProps) => ReactNode;
+}
+/** A label, hint and error linked to a control through its id and `aria-describedby`. */
+export declare function Field({ label, hint, error, announce, id, describedBy: extraDescribedBy, className, children, }: FieldProps): import("react").JSX.Element;

package/dist/components/Field/Field.js

@@ -0,0 +1,40 @@
+import { cx as e } from "../../lib/cx.js";
+import t from "./Field.module.css.js";
+import { useId as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Field/Field.tsx
+function a({ label: a, hint: o, error: s, announce: c = "assertive", id: l, describedBy: u, className: d, children: f }) {
+	let p = n(), m = l ?? p, h = o ? `${m}-hint` : void 0, g = s ? `${m}-error` : void 0, _ = [
+		g,
+		h,
+		u
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ i("div", {
+		className: e(t.field, d),
+		children: [
+			/* @__PURE__ */ r("label", {
+				className: t.label,
+				htmlFor: m,
+				children: a
+			}),
+			f({
+				id: m,
+				"aria-describedby": _,
+				"aria-invalid": s ? !0 : void 0
+			}),
+			s && /* @__PURE__ */ r("p", {
+				id: g,
+				className: t.error,
+				role: c === "off" ? void 0 : "alert",
+				children: s
+			}),
+			o && /* @__PURE__ */ r("p", {
+				id: h,
+				className: t.hint,
+				children: o
+			})
+		]
+	});
+}
+//#endregion
+export { a as Field };

package/dist/components/Field/Field.module.css.js

@@ -0,0 +1,9 @@
+//#region src/components/Field/Field.module.css
+var e = "forma-field", t = "forma-field__label", n = "forma-field__hint", r = "forma-field__error", i = {
+	field: e,
+	label: t,
+	hint: n,
+	error: r
+};
+//#endregion
+export { i as default, r as error, e as field, n as hint, t as label };

package/dist/components/Field/control.module.css.js

@@ -0,0 +1,4 @@
+//#region src/components/Field/control.module.css
+var e = "forma-field-control", t = { control: e };
+//#endregion
+export { e as control, t as default };

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

@@ -0,0 +1 @@
+export { Field, type FieldControlProps, type FieldProps } from './Field.js';

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+import { type IconName } from './paths.js';
+export type { IconName };
+/** The props of `Icon`. Anything else is passed to the `<svg>` element and wins over the defaults below. */
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'children' | 'name'> {
+    /** The icon to draw, one of the names in the set. */
+    name: IconName;
+    /** Size in px. The stroke stays 1.7 px at any size, as in the design. */
+    size?: number;
+    /** Accessible text. Without it the icon is decorative and hidden from screen readers. */
+    label?: string;
+}
+/**
+ * Draws one of the library's icons as an inline SVG that takes the current text color.
+ *
+ * An icon next to text is decorative: leave `label` out. An icon that stands alone, such as the content of an icon
+ * button, needs a `label` that says what it does.
+ */
+export declare function Icon({ name, size, label, ...props }: IconProps): import("react").JSX.Element;

package/dist/components/Icon/Icon.js

@@ -0,0 +1,27 @@
+import { iconPaths as e } from "./paths.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Icon/Icon.tsx
+var n = 1.7;
+function r({ name: r, size: i = 20, label: a, ...o }) {
+	return /* @__PURE__ */ t("svg", {
+		width: i,
+		height: i,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: n,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		role: a ? "img" : void 0,
+		"aria-label": a,
+		"aria-hidden": !a || void 0,
+		...o,
+		children: e[r].map((e) => /* @__PURE__ */ t("path", {
+			d: e,
+			vectorEffect: "non-scaling-stroke"
+		}, e))
+	});
+}
+//#endregion
+export { r as Icon };

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

@@ -0,0 +1 @@
+export { Icon, type IconName, type IconProps } from './Icon.js';

package/dist/components/Icon/paths.d.ts

@@ -0,0 +1,26 @@
+export declare const iconPaths: {
+    readonly arrow: readonly ["M15 5L8 12L15 19"];
+    readonly attach: readonly ["M9.00001 17L17 9.00005C17.2674 8.44023 17.3546 7.8113 17.2497 7.19985C17.1448 6.5884 16.8529 6.02451 16.4142 5.58584C15.9755 5.14716 15.4117 4.85527 14.8002 4.75036C14.1888 4.64545 13.5598 4.73269 13 5.00005L5.00001 13C4.27786 13.9629 3.92727 15.1539 4.01259 16.3545C4.09791 17.555 4.61342 18.6845 5.46447 19.5356C6.31553 20.3866 7.44501 20.9022 8.64556 20.9875C9.84611 21.0728 11.0371 20.7222 12 20L20 12"];
+    readonly bell: readonly ["M10 21H14M6 8C6 6.4087 6.63214 4.88258 7.75736 3.75736C8.88258 2.63214 10.4087 2 12 2C13.5913 2 15.1174 2.63214 16.2426 3.75736C17.3679 4.88258 18 6.4087 18 8V15L20 18H4L6 15V8Z"];
+    readonly book: readonly ["M12 21.0001C15 18.0001 18 18.0001 22 19.0001V4.00005C19 3.00005 16 3.00005 12 6.00005C8 3.00005 5 3.00005 2 4.00005V19.0001C6 18.0001 9 18.0001 12 21.0001ZM12 6.00005V21.0001"];
+    readonly check: readonly ["M5 12L9 16L19 6"];
+    readonly chevron: readonly ["M7 10L12 15L17 10"];
+    readonly clients: readonly ["M9 11C10.6569 11 12 9.65685 12 8C12 6.34315 10.6569 5 9 5C7.34315 5 6 6.34315 6 8C6 9.65685 7.34315 11 9 11Z", "M3 21V18C3 16.4087 3.63214 14.8826 4.75736 13.7574C5.88258 12.6321 7.4087 12 9 12C10.5913 12 12.1174 12.6321 13.2426 13.7574C14.3679 14.8826 15 16.4087 15 18V21M16 5C16.7956 5 17.5587 5.31607 18.1213 5.87868C18.6839 6.44129 19 7.20435 19 8C19 8.79565 18.6839 9.55871 18.1213 10.1213C17.5587 10.6839 16.7956 11 16 11M18 15C18.8071 15.3448 19.5093 15.8959 20.0359 16.5981C20.5625 17.3002 20.895 18.1286 21 19V21"];
+    readonly collapse: readonly ["M19 4H5C3.89543 4 3 4.89543 3 6V18C3 19.1046 3.89543 20 5 20H19C20.1046 20 21 19.1046 21 18V6C21 4.89543 20.1046 4 19 4Z", "M9 4V20M16 9L13 12L16 15"];
+    readonly expand: readonly ["M19 4H5C3.89543 4 3 4.89543 3 6V18C3 19.1046 3.89543 20 5 20H19C20.1046 20 21 19.1046 21 18V6C21 4.89543 20.1046 4 19 4Z", "M9 4V20M13 9L16 12L13 15"];
+    readonly file: readonly ["M19 7L14 2H5V22H19V7ZM14 2V7H19M8 12H16M8 16H16"];
+    readonly home: readonly ["M3 10L12 3L21 10V20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21H15V14H9V21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V10Z"];
+    readonly lock: readonly ["M17 10H7C5.89543 10 5 10.8954 5 12V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V12C19 10.8954 18.1046 10 17 10Z", "M8 10V7C8 5.93913 8.42143 4.92172 9.17157 4.17157C9.92172 3.42143 10.9391 3 12 3C13.0609 3 14.0783 3.42143 14.8284 4.17157C15.5786 4.92172 16 5.93913 16 7V10"];
+    readonly menu: readonly ["M4 6H20M4 12H20M4 18H20"];
+    readonly moon: readonly ["M20 14C18.61 14.428 17.1297 14.469 15.7181 14.1185C14.3066 13.7681 13.0173 13.0395 11.9889 12.0111C10.9605 10.9827 10.2319 9.6934 9.88146 8.28187C9.53102 6.87034 9.572 5.38998 10 4C8.6818 4.40589 7.49094 5.1457 6.54301 6.14761C5.59508 7.14952 4.92229 8.3795 4.58995 9.71813C4.25761 11.0568 4.27702 12.4586 4.64627 13.7875C5.01553 15.1164 5.7221 16.3273 6.69739 17.3026C7.67269 18.2779 8.88357 18.9845 10.2125 19.3537C11.5414 19.723 12.9432 19.7424 14.2819 19.41C15.6205 19.0777 16.8505 18.4049 17.8524 17.457C18.8543 16.5091 19.5941 15.3182 20 14Z"];
+    readonly more: readonly ["M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z", "M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z", "M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z"];
+    readonly plus: readonly ["M12 5V19M5 12H19"];
+    readonly report: readonly ["M4 3V21H21M8 16V11M13 16V7M18 16V4"];
+    readonly search: readonly ["M10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16Z", "M15 15L21 21"];
+    readonly send: readonly ["M6 12L3 21L21 12L3 3L6 12ZM21 12H6"];
+    readonly settings: readonly ["M9 3L8.5 6L6.5 7L4 6L2 9L4 11V13L2 15L4 18L6.5 17L8.5 18L9 21H13L13.5 18L15.5 17L18 18L20 15L18 13V11L20 9L18 6L15.5 7L13.5 6L13 3H9Z", "M11 15C12.6569 15 14 13.6569 14 12C14 10.3431 12.6569 9 11 9C9.34315 9 8 10.3431 8 12C8 13.6569 9.34315 15 11 15Z"];
+    readonly sun: readonly ["M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z", "M12 2V4M12 20V22M2 12H4M20 12H22M5 5L6.5 6.5M17.5 17.5L19 19M5 19L6.5 17.5M17.5 6.5L19 5"];
+    readonly team: readonly ["M12 11C13.6569 11 15 9.65685 15 8C15 6.34315 13.6569 5 12 5C10.3431 5 9 6.34315 9 8C9 9.65685 10.3431 11 12 11Z", "M6 21V19C6 17.4087 6.63214 15.8826 7.75736 14.7574C8.88258 13.6321 10.4087 13 12 13C13.5913 13 15.1174 13.6321 16.2426 14.7574C17.3679 15.8826 18 17.4087 18 19V21M4 5C3.20435 5 2.44129 5.31607 1.87868 5.87868C1.31607 6.44129 1 7.20435 1 8C1 8.79565 1.31607 9.55871 1.87868 10.1213C2.44129 10.6839 3.20435 11 4 11M20 5C20.7956 5 21.5587 5.31607 22.1213 5.87868C22.6839 6.44129 23 7.20435 23 8C23 8.79565 22.6839 9.55871 22.1213 10.1213C21.5587 10.6839 20.7956 11 20 11M2 21V18M22 18V21"];
+    readonly ticket: readonly ["M4 5H20V10C19.4696 10 18.9609 10.2107 18.5858 10.5858C18.2107 10.9609 18 11.4696 18 12C18 12.5304 18.2107 13.0391 18.5858 13.4142C18.9609 13.7893 19.4696 14 20 14V19H4V14C4.53043 14 5.03914 13.7893 5.41421 13.4142C5.78929 13.0391 6 12.5304 6 12C6 11.4696 5.78929 10.9609 5.41421 10.5858C5.03914 10.2107 4.53043 10 4 10V5Z", "M15 5V8M15 11V13M15 16V19"];
+};
+export type IconName = keyof typeof iconPaths;

package/dist/components/Icon/paths.js

@@ -0,0 +1,32 @@
+//#region src/components/Icon/paths.ts
+var e = {
+	arrow: ["M15 5L8 12L15 19"],
+	attach: ["M9.00001 17L17 9.00005C17.2674 8.44023 17.3546 7.8113 17.2497 7.19985C17.1448 6.5884 16.8529 6.02451 16.4142 5.58584C15.9755 5.14716 15.4117 4.85527 14.8002 4.75036C14.1888 4.64545 13.5598 4.73269 13 5.00005L5.00001 13C4.27786 13.9629 3.92727 15.1539 4.01259 16.3545C4.09791 17.555 4.61342 18.6845 5.46447 19.5356C6.31553 20.3866 7.44501 20.9022 8.64556 20.9875C9.84611 21.0728 11.0371 20.7222 12 20L20 12"],
+	bell: ["M10 21H14M6 8C6 6.4087 6.63214 4.88258 7.75736 3.75736C8.88258 2.63214 10.4087 2 12 2C13.5913 2 15.1174 2.63214 16.2426 3.75736C17.3679 4.88258 18 6.4087 18 8V15L20 18H4L6 15V8Z"],
+	book: ["M12 21.0001C15 18.0001 18 18.0001 22 19.0001V4.00005C19 3.00005 16 3.00005 12 6.00005C8 3.00005 5 3.00005 2 4.00005V19.0001C6 18.0001 9 18.0001 12 21.0001ZM12 6.00005V21.0001"],
+	check: ["M5 12L9 16L19 6"],
+	chevron: ["M7 10L12 15L17 10"],
+	clients: ["M9 11C10.6569 11 12 9.65685 12 8C12 6.34315 10.6569 5 9 5C7.34315 5 6 6.34315 6 8C6 9.65685 7.34315 11 9 11Z", "M3 21V18C3 16.4087 3.63214 14.8826 4.75736 13.7574C5.88258 12.6321 7.4087 12 9 12C10.5913 12 12.1174 12.6321 13.2426 13.7574C14.3679 14.8826 15 16.4087 15 18V21M16 5C16.7956 5 17.5587 5.31607 18.1213 5.87868C18.6839 6.44129 19 7.20435 19 8C19 8.79565 18.6839 9.55871 18.1213 10.1213C17.5587 10.6839 16.7956 11 16 11M18 15C18.8071 15.3448 19.5093 15.8959 20.0359 16.5981C20.5625 17.3002 20.895 18.1286 21 19V21"],
+	collapse: ["M19 4H5C3.89543 4 3 4.89543 3 6V18C3 19.1046 3.89543 20 5 20H19C20.1046 20 21 19.1046 21 18V6C21 4.89543 20.1046 4 19 4Z", "M9 4V20M16 9L13 12L16 15"],
+	expand: ["M19 4H5C3.89543 4 3 4.89543 3 6V18C3 19.1046 3.89543 20 5 20H19C20.1046 20 21 19.1046 21 18V6C21 4.89543 20.1046 4 19 4Z", "M9 4V20M13 9L16 12L13 15"],
+	file: ["M19 7L14 2H5V22H19V7ZM14 2V7H19M8 12H16M8 16H16"],
+	home: ["M3 10L12 3L21 10V20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21H15V14H9V21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V10Z"],
+	lock: ["M17 10H7C5.89543 10 5 10.8954 5 12V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V12C19 10.8954 18.1046 10 17 10Z", "M8 10V7C8 5.93913 8.42143 4.92172 9.17157 4.17157C9.92172 3.42143 10.9391 3 12 3C13.0609 3 14.0783 3.42143 14.8284 4.17157C15.5786 4.92172 16 5.93913 16 7V10"],
+	menu: ["M4 6H20M4 12H20M4 18H20"],
+	moon: ["M20 14C18.61 14.428 17.1297 14.469 15.7181 14.1185C14.3066 13.7681 13.0173 13.0395 11.9889 12.0111C10.9605 10.9827 10.2319 9.6934 9.88146 8.28187C9.53102 6.87034 9.572 5.38998 10 4C8.6818 4.40589 7.49094 5.1457 6.54301 6.14761C5.59508 7.14952 4.92229 8.3795 4.58995 9.71813C4.25761 11.0568 4.27702 12.4586 4.64627 13.7875C5.01553 15.1164 5.7221 16.3273 6.69739 17.3026C7.67269 18.2779 8.88357 18.9845 10.2125 19.3537C11.5414 19.723 12.9432 19.7424 14.2819 19.41C15.6205 19.0777 16.8505 18.4049 17.8524 17.457C18.8543 16.5091 19.5941 15.3182 20 14Z"],
+	more: [
+		"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z",
+		"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z",
+		"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z"
+	],
+	plus: ["M12 5V19M5 12H19"],
+	report: ["M4 3V21H21M8 16V11M13 16V7M18 16V4"],
+	search: ["M10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16Z", "M15 15L21 21"],
+	send: ["M6 12L3 21L21 12L3 3L6 12ZM21 12H6"],
+	settings: ["M9 3L8.5 6L6.5 7L4 6L2 9L4 11V13L2 15L4 18L6.5 17L8.5 18L9 21H13L13.5 18L15.5 17L18 18L20 15L18 13V11L20 9L18 6L15.5 7L13.5 6L13 3H9Z", "M11 15C12.6569 15 14 13.6569 14 12C14 10.3431 12.6569 9 11 9C9.34315 9 8 10.3431 8 12C8 13.6569 9.34315 15 11 15Z"],
+	sun: ["M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z", "M12 2V4M12 20V22M2 12H4M20 12H22M5 5L6.5 6.5M17.5 17.5L19 19M5 19L6.5 17.5M17.5 6.5L19 5"],
+	team: ["M12 11C13.6569 11 15 9.65685 15 8C15 6.34315 13.6569 5 12 5C10.3431 5 9 6.34315 9 8C9 9.65685 10.3431 11 12 11Z", "M6 21V19C6 17.4087 6.63214 15.8826 7.75736 14.7574C8.88258 13.6321 10.4087 13 12 13C13.5913 13 15.1174 13.6321 16.2426 14.7574C17.3679 15.8826 18 17.4087 18 19V21M4 5C3.20435 5 2.44129 5.31607 1.87868 5.87868C1.31607 6.44129 1 7.20435 1 8C1 8.79565 1.31607 9.55871 1.87868 10.1213C2.44129 10.6839 3.20435 11 4 11M20 5C20.7956 5 21.5587 5.31607 22.1213 5.87868C22.6839 6.44129 23 7.20435 23 8C23 8.79565 22.6839 9.55871 22.1213 10.1213C21.5587 10.6839 20.7956 11 20 11M2 21V18M22 18V21"],
+	ticket: ["M4 5H20V10C19.4696 10 18.9609 10.2107 18.5858 10.5858C18.2107 10.9609 18 11.4696 18 12C18 12.5304 18.2107 13.0391 18.5858 13.4142C18.9609 13.7893 19.4696 14 20 14V19H4V14C4.53043 14 5.03914 13.7893 5.41421 13.4142C5.78929 13.0391 6 12.5304 6 12C6 11.4696 5.78929 10.9609 5.41421 10.5858C5.03914 10.2107 4.53043 10 4 10V5Z", "M15 5V8M15 11V13M15 16V19"]
+};
+//#endregion
+export { e as iconPaths };

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { type FieldProps } from '../Field/Field.js';
+/** The props of {@link Input}: every native `input` attribute, plus the label, hint and error of its field. */
+export interface InputProps extends Omit<ComponentProps<'input'>, 'children'> {
+    /** Visible label of the field. */
+    label: ReactNode;
+    /** Permanent help text under the field. */
+    hint?: ReactNode;
+    /**
+     * Error message; marks the field as invalid. It is the only thing that sets `aria-invalid`: a consumer value for
+     * that attribute is overwritten.
+     */
+    error?: ReactNode;
+    /**
+     * Whether the error is announced when it appears: `'assertive'` (the default) as an alert, `'off'` not at all. Use
+     * `'off'` for a specimen or a page that mounts fields with an error nobody caused, never in a form that people fill
+     * in. The error describes the input in both cases. It is the `announce` of `Field`, which has the details.
+     */
+    announce?: FieldProps['announce'];
+    /** Class name of the field container; `className` is applied to the input. */
+    fieldClassName?: string;
+}
+/** A native text input with its label, hint and error. `disabled` and `readOnly` are different states. */
+export declare function Input({ label, hint, error, announce, id, fieldClassName, className, ...props }: InputProps): import("react").JSX.Element;

package/dist/components/Input/Input.js

@@ -0,0 +1,23 @@
+import { cx as e } from "../../lib/cx.js";
+import { Field as t } from "../Field/Field.js";
+import n from "../Field/control.module.css.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Input/Input.tsx
+function i({ label: i, hint: a, error: o, announce: s, id: c, fieldClassName: l, className: u, ...d }) {
+	return /* @__PURE__ */ r(t, {
+		label: i,
+		hint: a,
+		error: o,
+		announce: s,
+		id: c,
+		describedBy: d["aria-describedby"],
+		className: l,
+		children: (t) => /* @__PURE__ */ r("input", {
+			className: e(n.control, u),
+			...d,
+			...t
+		})
+	});
+}
+//#endregion
+export { i as Input };

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

@@ -0,0 +1 @@
+export { Input, type InputProps } from './Input.js';

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,65 @@
+import { type ReactNode } from 'react';
+import type { Placement } from '../../lib/position.js';
+/** The side of the trigger where a tooltip appears. */
+export type TooltipPlacement = Placement;
+/**
+ * What {@link Tooltip} hands to its `children` render prop: spread all of it on the trigger element.
+ *
+ * `ref`, the four handlers and `aria-describedby` replace the ones the element has: spread after them, a
+ * `ref`, an `onFocus` or an `aria-describedby` of your own is lost, and spread before them, the tooltip stops
+ * describing the trigger. Call your own handlers from inside the ones you pass, and merge a ref yourself.
+ *
+ * When the trigger already has a description, join the ids instead of replacing them. `aria-describedby` is
+ * `undefined` while the tooltip is closed, so there is nothing to join then. A control in a {@link Field} takes it
+ * through `describedBy`, which adds it after the error and the hint, and the control's own props go last:
+ *
+ * ```tsx
+ * <Tooltip content="Used for receipts">
+ *   {(trigger) => (
+ *     <Field label="Email" hint="We only reply to this." describedBy={trigger['aria-describedby']}>
+ *       {(control) => <input {...trigger} {...control} />}
+ *     </Field>
+ *   )}
+ * </Tooltip>
+ * ```
+ */
+export interface TooltipTriggerProps {
+    /** Registers the trigger as the anchor the tooltip is positioned against. */
+    ref: (node: HTMLElement | null) => void;
+    /** Opens the tooltip when the pointer enters. */
+    onPointerEnter: () => void;
+    /** Closes the tooltip after a short delay when the pointer leaves. */
+    onPointerLeave: () => void;
+    /** Opens the tooltip when the trigger receives focus. */
+    onFocus: () => void;
+    /** Closes the tooltip when the trigger loses focus. */
+    onBlur: () => void;
+    /** The id of the tooltip while it is open and `describe` is `true`. */
+    'aria-describedby'?: string;
+}
+/** Props of {@link Tooltip}. */
+export interface TooltipProps {
+    /** What the tooltip says. */
+    content: ReactNode;
+    /** Side of the trigger where the tooltip appears. Flips when it does not fit. Defaults to `right`. */
+    placement?: TooltipPlacement;
+    /**
+     * Links the tooltip text to the trigger as its description. Turn it off when the trigger already has that same text
+     * as its accessible name, so a screen reader does not read it twice. Defaults to `true`.
+     */
+    describe?: boolean;
+    /**
+     * Suppresses the tooltip, for example while the trigger has a menu open: a tooltip that stays open under the pointer
+     * takes the first Escape and the menu would not close. Defaults to `false`.
+     */
+    disabled?: boolean;
+    /** Receives the props of the trigger, which must be spread on the trigger element. */
+    children: (trigger: TooltipTriggerProps) => ReactNode;
+}
+/**
+ * A short label for a control, shown on pointer hover and on keyboard focus, next to the trigger and inside the
+ * viewport. The pointer can travel from the trigger onto the tooltip and `Escape` hides it (WCAG 1.4.13).
+ *
+ * The tooltip is a description, not a place for interactive content or for information that is only there.
+ */
+export declare function Tooltip({ content, placement, describe, disabled, children }: TooltipProps): import("react").JSX.Element;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,51 @@
+import { useFloating as e } from "../../lib/useFloating.js";
+import { claimActiveTooltip as t, releaseActiveTooltip as n } from "./activeTooltip.js";
+import r from "./Tooltip.module.css.js";
+import { useCallback as i, useEffect as a, useId as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { createPortal as d } from "react-dom";
+//#region src/components/Tooltip/Tooltip.tsx
+var f = 120;
+function p({ content: p, placement: m = "right", describe: h = !0, disabled: g = !1, children: _ }) {
+	let v = o(), [y, b] = s(!1), [x, S] = s(!1), [C, w] = s(!1), [T, E] = s(!1), D = (x || C) && !T && !g, { setAnchor: O, setFloating: k, style: A, portalContainer: j } = e(D, m), M = i(() => {
+		b(!1), S(!1), w(!1);
+	}, []);
+	a(() => {
+		if (!D) return;
+		function e(e) {
+			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), E(!0));
+		}
+		return document.addEventListener("keydown", e, !0), () => document.removeEventListener("keydown", e, !0);
+	}, [D]), a(() => {
+		if (y || !x) return;
+		let e = window.setTimeout(() => S(!1), f);
+		return () => window.clearTimeout(e);
+	}, [y, x]), a(() => () => n(M), [M]);
+	function N() {
+		t(M), b(!0), S(!0), E(!1);
+	}
+	function P() {
+		b(!1);
+	}
+	return /* @__PURE__ */ u(c, { children: [_({
+		ref: O,
+		onPointerEnter: N,
+		onPointerLeave: P,
+		onFocus: () => {
+			t(M), E(!1), w(!0);
+		},
+		onBlur: () => w(!1),
+		"aria-describedby": h && D ? v : void 0
+	}), D && d(/* @__PURE__ */ l("div", {
+		ref: k,
+		id: v,
+		role: "tooltip",
+		className: r.tooltip,
+		style: A,
+		onPointerEnter: N,
+		onPointerLeave: P,
+		children: p
+	}), j)] });
+}
+//#endregion
+export { p as Tooltip };

package/dist/components/Tooltip/Tooltip.module.css.js

@@ -0,0 +1,4 @@
+//#region src/components/Tooltip/Tooltip.module.css
+var e = "forma-tooltip", t = { tooltip: e };
+//#endregion
+export { t as default, e as tooltip };

package/dist/components/Tooltip/activeTooltip.d.ts

@@ -0,0 +1,4 @@
+/** Makes `hide` the active tooltip's close, closing the previous one first. */
+export declare function claimActiveTooltip(hide: () => void): void;
+/** Forgets `hide` if it is still the active one; another tooltip's registration is left alone. */
+export declare function releaseActiveTooltip(hide: () => void): void;

package/dist/components/Tooltip/activeTooltip.js

@@ -0,0 +1,10 @@
+//#region src/components/Tooltip/activeTooltip.ts
+var e = null;
+function t(t) {
+	e && e !== t && e(), e = t;
+}
+function n(t) {
+	e === t && (e = null);
+}
+//#endregion
+export { t as claimActiveTooltip, n as releaseActiveTooltip };

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

@@ -0,0 +1 @@
+export { Tooltip, type TooltipPlacement, type TooltipProps, type TooltipTriggerProps } from './Tooltip.js';