@yelison/forma-ui 0.0.0-stage → 0.1.0

package/dist/contrast-pairs.json

@@ -0,0 +1,368 @@
+{
+  "thresholds": {
+    "text": 4.5,
+    "nonText": 3
+  },
+  "pairs": [
+    {
+      "foreground": "ink",
+      "background": "bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "ink",
+      "background": "surface",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "ink",
+      "background": "surface-hover",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "ink",
+      "background": "blue-bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "muted",
+      "background": "bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "muted",
+      "background": "surface",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "muted",
+      "background": "surface-hover",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "muted",
+      "background": "blue-bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "blue-ink",
+      "background": "bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "blue-ink",
+      "background": "surface",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "blue-ink",
+      "background": "surface-hover",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "green-ink",
+      "background": "bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "green-ink",
+      "background": "surface",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "green-ink",
+      "background": "surface-hover",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "amber-ink",
+      "background": "bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "amber-ink",
+      "background": "surface",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "amber-ink",
+      "background": "surface-hover",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "red-ink",
+      "background": "bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "red-ink",
+      "background": "surface",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "red-ink",
+      "background": "surface-hover",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "green-ink",
+      "background": "blue-bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "amber-ink",
+      "background": "blue-bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "red-ink",
+      "background": "blue-bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "blue-ink",
+      "background": "blue-bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "green-ink",
+      "background": "green-bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "amber-ink",
+      "background": "amber-bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "red-ink",
+      "background": "red-bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "ink",
+      "background": "amber-bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "muted",
+      "background": "amber-bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "link",
+      "background": "surface",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "link",
+      "background": "bg",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "nav-text",
+      "background": "nav",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "nav-text",
+      "background": "nav-active",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "nav-ink",
+      "background": "nav",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "nav-ink",
+      "background": "nav-active",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "on-brand",
+      "background": "brand",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "on-brand",
+      "background": "brand-hover",
+      "kind": "text",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "brand",
+      "background": "surface",
+      "kind": "nonText",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "brand",
+      "background": "bg",
+      "kind": "nonText",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "foreground": "brand",
+      "background": "progress-track",
+      "kind": "nonText",
+      "themes": [
+        "light",
+        "dark"
+      ]
+    }
+  ]
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { contrastRatio, relativeLuminance } from './tokens/contrast.js';
+export { tokenNames, type TokenName } from './tokens/tokens.js';
+export { createThemeStore, themeScript, useTheme } from './theme/index.js';
+export type { ResolvedTheme, ThemePreference, ThemeStore, ThemeStoreOptions, UseThemeResult } from './theme/index.js';
+export { FormaProvider, useFormaStrings, defaultStrings, type FormaProviderProps, type FormaStrings, } from './provider/index.js';
+export { Badge, type BadgeProps, type BadgeTone } from './components/Badge/index.js';
+export { Icon, type IconName, type IconProps } from './components/Icon/index.js';
+export { Field, type FieldControlProps, type FieldProps } from './components/Field/index.js';
+export { Input, type InputProps } from './components/Input/index.js';
+export { Button, IconButton, buttonClassName, type ButtonProps, type IconButtonProps, type ButtonStyleOptions, type ButtonVariant, } from './components/Button/index.js';
+export { Tooltip, type TooltipPlacement, type TooltipProps, type TooltipTriggerProps, } from './components/Tooltip/index.js';
+export { Dialog, Modal, type DialogProps, type ModalProps } from './components/Dialog/index.js';
+export { useScrollLock } from './lib/scrollLock.js';

package/dist/index.js

@@ -0,0 +1,19 @@
+import { contrastRatio as e, relativeLuminance as t } from "./tokens/contrast.js";
+import { tokenNames as n } from "./tokens/tokens.js";
+import { createThemeStore as r } from "./theme/themeStore.js";
+import { themeScript as i } from "./theme/themeScript.js";
+import { useTheme as a } from "./theme/useTheme.js";
+import { defaultStrings as o } from "./provider/strings.js";
+import { FormaProvider as s } from "./provider/FormaProvider.js";
+import { useFormaStrings as c } from "./provider/useFormaStrings.js";
+import { Badge as l } from "./components/Badge/Badge.js";
+import { Icon as u } from "./components/Icon/Icon.js";
+import { Field as d } from "./components/Field/Field.js";
+import { Input as f } from "./components/Input/Input.js";
+import { buttonClassName as p } from "./components/Button/buttonClassName.js";
+import { Button as m } from "./components/Button/Button.js";
+import { IconButton as h } from "./components/Button/IconButton.js";
+import { Tooltip as g } from "./components/Tooltip/Tooltip.js";
+import { useScrollLock as _ } from "./lib/scrollLock.js";
+import { Dialog as v, Modal as y } from "./components/Dialog/Dialog.js";
+export { l as Badge, m as Button, v as Dialog, d as Field, s as FormaProvider, u as Icon, h as IconButton, f as Input, y as Modal, g as Tooltip, p as buttonClassName, e as contrastRatio, r as createThemeStore, o as defaultStrings, t as relativeLuminance, i as themeScript, n as tokenNames, c as useFormaStrings, _ as useScrollLock, a as useTheme };

package/dist/lib/cx.d.ts

@@ -0,0 +1,4 @@
+type ClassValue = string | false | null | undefined;
+/** Joins class names, skipping the empty values. */
+export declare function cx(...values: ClassValue[]): string;
+export {};

package/dist/lib/cx.js

@@ -0,0 +1,6 @@
+//#region src/lib/cx.ts
+function e(...e) {
+	return e.filter(Boolean).join(" ");
+}
+//#endregion
+export { e as cx };

package/dist/lib/position.d.ts

@@ -0,0 +1,22 @@
+export type Placement = 'right' | 'bottom-start' | 'bottom-end';
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Rect extends Size {
+    top: number;
+    left: number;
+}
+export interface Position {
+    top: number;
+    left: number;
+    placement: Placement | 'left' | 'top-start' | 'top-end';
+}
+/**
+ * Places a floating element next to its anchor without leaving the viewport.
+ * If it does not fit on the requested side it flips (right → left, below → above) and then clamps to the edges.
+ */
+export declare function computePosition(anchor: Rect, floating: Size, placement: Placement, viewport: Size, { gap, margin }?: {
+    gap?: number | undefined;
+    margin?: number | undefined;
+}): Position;

package/dist/lib/position.js

@@ -0,0 +1,21 @@
+//#region src/lib/position.ts
+var e = (e, t, n) => Math.min(Math.max(e, t), Math.max(t, n));
+function t(t, n, r, i, { gap: a = 8, margin: o = 8 } = {}) {
+	let s = i.width - n.width - o, c = i.height - n.height - o;
+	if (r === "right") {
+		let r = t.top + t.height / 2 - n.height / 2, l = t.left + t.width + a, u = l + n.width + o <= i.width, d = u ? l : t.left - a - n.width;
+		return {
+			top: e(r, o, c),
+			left: e(d, o, s),
+			placement: u ? "right" : "left"
+		};
+	}
+	let l = t.top + t.height + a, u = l + n.height + o <= i.height, d = t.top - a - n.height, f = !u && d >= o, p = r === "bottom-start" ? t.left : t.left + t.width - n.width, m = r === "bottom-start" ? "start" : "end";
+	return {
+		top: e(f ? d : l, o, c),
+		left: e(p, o, s),
+		placement: f ? `top-${m}` : `bottom-${m}`
+	};
+}
+//#endregion
+export { t as computePosition };

package/dist/lib/scrollLock.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Locks the document scroll while at least one modal overlay is open.
+ * The lock is a counter: the returned function releases one lock, and only the last release unlocks the page.
+ */
+export declare function lockScroll(): () => void;
+/**
+ * Locks the document scroll while `active` is `true`, for an overlay of your own such as a drawer.
+ *
+ * Every overlay of the library shares one counter, so two overlays open at once keep the page locked until the last of
+ * them closes. The lock is the `forma-scroll-locked` class on `<html>`, which `@yelison/forma-ui/base.css` defines:
+ * without that stylesheet the hook still counts, but the page keeps scrolling.
+ */
+export declare function useScrollLock(active: boolean): void;

package/dist/lib/scrollLock.js

@@ -0,0 +1,22 @@
+import { useEffect as e } from "react";
+//#region src/lib/scrollLock.ts
+var t = 0;
+function n() {
+	let e = document.documentElement;
+	if (t === 0) {
+		let t = window.innerWidth - e.clientWidth;
+		t > 0 && (e.style.paddingRight = `${t}px`);
+	}
+	t += 1, e.classList.add("forma-scroll-locked");
+	let n = !1;
+	return () => {
+		n || (n = !0, --t, t === 0 && (e.classList.remove("forma-scroll-locked"), e.style.removeProperty("padding-right")));
+	};
+}
+function r(t) {
+	e(() => {
+		if (t) return n();
+	}, [t]);
+}
+//#endregion
+export { n as lockScroll, r as useScrollLock };

package/dist/lib/useFloating.d.ts

@@ -0,0 +1,25 @@
+import { type Placement } from './position.js';
+/**
+ * Positions a floating element (fixed, in a portal) next to its anchor and places it again on scroll and window
+ * resize while it is open.
+ * The anchor and the floating element are kept in state: `setAnchor` and `setFloating` work as callback refs.
+ */
+export declare function useFloating<TAnchor extends HTMLElement, TFloating extends HTMLElement>(open: boolean, placement: Placement): {
+    anchor: TAnchor | null;
+    setAnchor: import("react").Dispatch<import("react").SetStateAction<TAnchor | null>>;
+    floating: TFloating | null;
+    setFloating: import("react").Dispatch<import("react").SetStateAction<TFloating | null>>;
+    style: {
+        position: "fixed";
+        top: number;
+        left: number;
+        visibility?: undefined;
+    } | {
+        position: "fixed";
+        top: number;
+        left: number;
+        visibility: "hidden";
+    };
+    positioned: boolean;
+    portalContainer: HTMLElement;
+};

package/dist/lib/useFloating.js

@@ -0,0 +1,48 @@
+import { computePosition as e } from "./position.js";
+import { useCallback as t, useLayoutEffect as n, useState as r } from "react";
+//#region src/lib/useFloating.ts
+function i(i, a) {
+	let [o, s] = r(null), [c, l] = r(null), [u, d] = r(null), f = t(() => {
+		o && c && d(e(o.getBoundingClientRect(), {
+			width: c.offsetWidth,
+			height: c.offsetHeight
+		}, a, {
+			width: document.documentElement.clientWidth,
+			height: window.innerHeight
+		}));
+	}, [
+		o,
+		c,
+		a
+	]);
+	n(() => {
+		if (i && c) return f(), window.addEventListener("resize", f), window.addEventListener("scroll", f, !0), () => {
+			window.removeEventListener("resize", f), window.removeEventListener("scroll", f, !0);
+		};
+	}, [
+		i,
+		c,
+		f
+	]);
+	let p = i && u ? {
+		position: "fixed",
+		top: u.top,
+		left: u.left
+	} : {
+		position: "fixed",
+		top: 0,
+		left: 0,
+		visibility: "hidden"
+	}, m = o?.closest("dialog") ?? globalThis.document?.body;
+	return {
+		anchor: o,
+		setAnchor: s,
+		floating: c,
+		setFloating: l,
+		style: p,
+		positioned: i && u !== null,
+		portalContainer: m
+	};
+}
+//#endregion
+export { i as useFloating };

package/dist/lib/useModalDialog.d.ts

@@ -0,0 +1,15 @@
+import { type MouseEvent, type PointerEvent, type SyntheticEvent } from 'react';
+/**
+ * Manages a controlled native <dialog>: it opens it as a modal (focus trapped, background inert), locks the scroll,
+ * closes on Escape or a click on the backdrop, and returns the focus to the element that had it before.
+ * The content must go in a child that fills the whole dialog, so that a click on the backdrop can be told apart.
+ */
+export declare function useModalDialog(open: boolean, onClose: () => void): {
+    ref: import("react").RefObject<HTMLDialogElement | null>;
+    onCancel(event: SyntheticEvent<HTMLDialogElement>): void;
+    /** Native closes that do not go through cancel, such as a form with method="dialog". */
+    onClose(): void;
+    onPointerDown(event: PointerEvent<HTMLDialogElement>): void;
+    onPointerUp(event: PointerEvent<HTMLDialogElement>): void;
+    onClick(event: MouseEvent<HTMLDialogElement>): void;
+};

package/dist/lib/useModalDialog.js

@@ -0,0 +1,42 @@
+import { lockScroll as e } from "./scrollLock.js";
+import { useEffect as t, useRef as n } from "react";
+//#region src/lib/useModalDialog.ts
+function r(r, i) {
+	let a = n(null), o = n(i), s = n(!1), c = n(!1);
+	return t(() => {
+		o.current = i;
+	}), t(() => {
+		let t = a.current;
+		if (!r || !t) return;
+		let n = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		t.showModal();
+		let i = e();
+		return () => {
+			t.open && (s.current = !0, t.close()), i(), n?.focus();
+		};
+	}, [r]), {
+		ref: a,
+		onCancel(e) {
+			e.preventDefault(), o.current();
+		},
+		onClose() {
+			if (s.current) {
+				s.current = !1;
+				return;
+			}
+			o.current();
+		},
+		onPointerDown(e) {
+			c.current = e.target === e.currentTarget;
+		},
+		onPointerUp(e) {
+			e.target !== e.currentTarget && (c.current = !1);
+		},
+		onClick(e) {
+			let t = c.current;
+			c.current = !1, t && e.target === e.currentTarget && o.current();
+		}
+	};
+}
+//#endregion
+export { r as useModalDialog };

package/dist/provider/FormaProvider.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import type { FormaStrings } from './strings.js';
+/** The props of `FormaProvider`. */
+export interface FormaProviderProps {
+    /**
+     * Replaces the library's built-in text, for example `{ buttonLoading: 'Enviando…' }`. Entries left out keep the
+     * value of the closest provider above, or the English default.
+     */
+    strings?: Partial<FormaStrings>;
+    /** The part of the application whose components read these strings. */
+    children: ReactNode;
+}
+/**
+ * Supplies the text that the components show on their own. A prop on a component wins over the provider, and the
+ * provider over the English default. Nothing else is needed for an application in English.
+ */
+export declare function FormaProvider({ strings, children }: FormaProviderProps): import("react").JSX.Element;

package/dist/provider/FormaProvider.js

@@ -0,0 +1,16 @@
+import { StringsContext as e } from "./stringsContext.js";
+import { useContext as t, useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/provider/FormaProvider.tsx
+function i({ strings: i, children: a }) {
+	let o = t(e), s = i?.buttonLoading ?? o.buttonLoading, c = i?.dialogClose ?? o.dialogClose, l = n(() => ({
+		buttonLoading: s,
+		dialogClose: c
+	}), [s, c]);
+	return /* @__PURE__ */ r(e, {
+		value: l,
+		children: a
+	});
+}
+//#endregion
+export { i as FormaProvider };

package/dist/provider/index.d.ts

@@ -0,0 +1,3 @@
+export { FormaProvider, type FormaProviderProps } from './FormaProvider.js';
+export { useFormaStrings } from './useFormaStrings.js';
+export { defaultStrings, type FormaStrings } from './strings.js';

package/dist/provider/strings.d.ts

@@ -0,0 +1,14 @@
+/** The text the library shows on its own, one entry per string. Components also accept a prop that wins over it. */
+export interface FormaStrings {
+    /** The accessible name of a button while it is loading. */
+    buttonLoading: string;
+    /** The accessible name of a dialog's close button, for a dialog that opts into one. */
+    dialogClose: string;
+}
+/**
+ * The English text that `FormaProvider` replaces and `useFormaStrings` returns without a provider.
+ * It is frozen: a consumer that changed it would change the default of every component at once.
+ * The pure annotation lets a bundler drop the object when nothing imports it: it cannot know that `Object.freeze`
+ * has no side effect.
+ */
+export declare const defaultStrings: Readonly<FormaStrings>;