@hemerson/design-system 0.1.0 → 0.3.0

package/README.md

@@ -1,7 +1,14 @@
 # Hemerson Design System
 
+[![npm](https://img.shields.io/npm/v/@hemerson/design-system?color=7ea8a7)](https://www.npmjs.com/package/@hemerson/design-system)
+[![CI](https://github.com/hemerson-git/hemerson-design-system/actions/workflows/ci.yml/badge.svg)](https://github.com/hemerson-git/hemerson-design-system/actions/workflows/ci.yml)
+[![Storybook](https://img.shields.io/badge/Storybook-live-ff4785?logo=storybook&logoColor=white)](https://hemerson-git.github.io/hemerson-design-system/)
+[![License: MIT](https://img.shields.io/badge/license-MIT-78718e)](LICENSE)
+
 A dark-first design system with a sage-teal accent and liquid-glass navigation, built for React. It ships design tokens for a dark and a light theme, a stylesheet, and React components with a Storybook to browse them.
 
+**[Browse the components in Storybook →](https://hemerson-git.github.io/hemerson-design-system/)**
+
 ## Install
 
 ```bash
@@ -19,8 +26,37 @@ export function Toolbar() {
 }
 ```
 
-- **Themes:** set `data-theme="dark"` (the default) or `data-theme="light"` on `<html>`.
-- **Reduced transparency:** set `data-transparency="reduced"` on `<html>` to turn every glass surface solid. Offer it as a setting in your app.
+- **Themes and transparency:** apps open dark. Call `applyStoredAppearance()` before the first render to restore what the visitor chose last time, and put `ThemeToggle` and `TransparencyToggle` in your toolbar. Without React, `setTheme` and `setTransparency` do the same job. Under the hood these set `data-theme` and `data-transparency` on `<html>`.
+- **Toasts:** wrap the app in `ToastProvider` and call `useToast()` to stack up to three at a time.
+- **Edge lens:** call `enableGlassRefraction()` from `@hemerson/design-system/glass` once at startup to bend the content at the glass edges in Chromium. Other browsers keep frosted glass.
+
+```ts
+// main.tsx, before the first render, so the page never flashes the wrong theme
+import { applyStoredAppearance } from "@hemerson/design-system/appearance";
+
+applyStoredAppearance();
+```
+
+```tsx
+import { ThemeToggle, TransparencyToggle } from "@hemerson/design-system";
+
+<ThemeToggle />          // dark ↔ light, remembered
+<TransparencyToggle />   // solid glass, remembered
+```
+
+```tsx
+import { ToastProvider, useToast } from "@hemerson/design-system";
+
+<ToastProvider>
+  <App />
+</ToastProvider>;
+
+// anywhere inside
+const toast = useToast();
+toast.success("Boleto salvo", "Fulano de Tal · R$ 1.234,56");
+toast.error("Não foi possível salvar");
+```
+
 - **Fonts:** `styles.css` loads Raleway and JetBrains Mono from Google Fonts. To self-host them, import `tokens.css` and your own font files instead.
 
 ## What's inside
@@ -28,6 +64,8 @@ export function Toolbar() {
 | Export | Contents |
 | --- | --- |
 | `@hemerson/design-system` | React components |
+| `@hemerson/design-system/appearance` | `applyStoredAppearance()`, `setTheme()`, `setTransparency()`, without React |
+| `@hemerson/design-system/glass` | `enableGlassRefraction()`, the Chromium edge lens, without React |
 | `@hemerson/design-system/styles.css` | Fonts, tokens and component styles |
 | `@hemerson/design-system/tokens.css` | CSS custom properties for both themes |
 | `@hemerson/design-system/tokens.json` | The tokens as data |
@@ -46,6 +84,10 @@ npm run build-storybook
 
 Tokens live in [`tokens/tokens.json`](tokens/tokens.json); `npm run tokens` turns them into `src/styles/tokens.css`. Each component lives in `src/components/<Name>/` with its stories and tests.
 
+## Releases
+
+Versions follow [semver](https://semver.org) and are managed with [Changesets](https://github.com/changesets/changesets). Every change to the package comes with a changeset (`npx changeset`). Merging to `master` opens a "version packages" pull request that bumps the version and updates the [changelog](CHANGELOG.md); merging that pull request publishes to npm from GitHub Actions. Storybook redeploys on every push to `master`.
+
 ## Contributing
 
 Contributions are welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) for how to set up the project and how contributors are credited.

package/dist/appearance/appearance.d.ts

@@ -0,0 +1,23 @@
+export type Theme = "dark" | "light";
+export type Transparency = "full" | "reduced";
+export interface Appearance {
+    theme: Theme;
+    transparency: Transparency;
+}
+export declare const APPEARANCE_STORAGE_KEYS: {
+    readonly theme: "hds-theme";
+    readonly transparency: "hds-transparency";
+};
+/** The saved choices, or dark with full transparency when nothing is saved. */
+export declare function readStoredAppearance(): Appearance;
+/** What <html> currently shows. */
+export declare function getAppearance(): Appearance;
+/**
+ * Puts the saved theme and transparency on <html>, dark when nothing is saved.
+ * Call it as early as possible, before the first paint, so the page never flashes the other theme.
+ */
+export declare function applyStoredAppearance(): Appearance;
+export declare function setTheme(theme: Theme): void;
+export declare function setTransparency(transparency: Transparency): void;
+/** Runs `listener` whenever the theme or transparency changes through these helpers. */
+export declare function subscribeToAppearance(listener: () => void): () => void;

package/dist/appearance/index.d.ts

@@ -0,0 +1,2 @@
+export { APPEARANCE_STORAGE_KEYS, applyStoredAppearance, getAppearance, readStoredAppearance, setTheme, setTransparency, subscribeToAppearance, } from "./appearance";
+export type { Appearance, Theme, Transparency } from "./appearance";

package/dist/appearance/useAppearance.d.ts

@@ -0,0 +1,13 @@
+import { type Appearance, type Theme, type Transparency } from "./appearance";
+export interface UseAppearance extends Appearance {
+    setTheme: (theme: Theme) => void;
+    setTransparency: (transparency: Transparency) => void;
+    toggleTheme: () => void;
+    toggleTransparency: () => void;
+}
+/**
+ * The page's theme and transparency, kept in sync across every component that uses it.
+ * The first use applies the saved choice (dark when nothing is saved), unless the app already
+ * called applyStoredAppearance() at startup.
+ */
+export declare function useAppearance(): UseAppearance;

package/dist/appearance-J15aUjQp.js

@@ -0,0 +1,57 @@
+//#region src/appearance/appearance.ts
+var e = {
+	theme: "hds-theme",
+	transparency: "hds-transparency"
+}, t = /* @__PURE__ */ new Set();
+function n(e) {
+	try {
+		return localStorage.getItem(e);
+	} catch {
+		return null;
+	}
+}
+function r(e, t) {
+	try {
+		localStorage.setItem(e, t);
+	} catch {}
+}
+function i() {
+	return {
+		theme: n(e.theme) === "light" ? "light" : "dark",
+		transparency: n(e.transparency) === "reduced" ? "reduced" : "full"
+	};
+}
+function a() {
+	let e = document.documentElement;
+	return {
+		theme: e.getAttribute("data-theme") === "light" ? "light" : "dark",
+		transparency: e.getAttribute("data-transparency") === "reduced" ? "reduced" : "full"
+	};
+}
+function o({ theme: e, transparency: n }) {
+	let r = document.documentElement;
+	r.setAttribute("data-theme", e), n === "reduced" ? r.setAttribute("data-transparency", "reduced") : r.removeAttribute("data-transparency"), t.forEach((e) => e());
+}
+function s() {
+	let e = i();
+	return o(e), e;
+}
+function c(t) {
+	r(e.theme, t), o({
+		...a(),
+		theme: t
+	});
+}
+function l(t) {
+	r(e.transparency, t), o({
+		...a(),
+		transparency: t
+	});
+}
+function u(e) {
+	return t.add(e), () => t.delete(e);
+}
+//#endregion
+export { c as a, i, s as n, l as o, a as r, u as s, e as t };
+
+//# sourceMappingURL=appearance-J15aUjQp.js.map

package/dist/appearance-J15aUjQp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance-J15aUjQp.js","names":["APPEARANCE_STORAGE_KEYS","listeners","read","key","write","value","readStoredAppearance","getAppearance","root","apply","theme","transparency","listener","applyStoredAppearance","appearance","setTheme","setTransparency","subscribeToAppearance"],"sources":["../src/appearance/appearance.ts"],"sourcesContent":["/*\n * Theme and transparency for the whole page, kept on <html> and remembered in localStorage.\n * Projects open in the dark theme whatever the system setting: light, and reduced\n * transparency, are the visitor's own choices. No React here, so plain HTML pages can use it.\n */\n\nexport type Theme = \"dark\" | \"light\";\nexport type Transparency = \"full\" | \"reduced\";\n\nexport interface Appearance {\n  theme: Theme;\n  transparency: Transparency;\n}\n\nexport const APPEARANCE_STORAGE_KEYS = {\n  theme: \"hds-theme\",\n  transparency: \"hds-transparency\",\n} as const;\n\nconst listeners = new Set<() => void>();\n\nfunction read(key: string): string | null {\n  try {\n    return localStorage.getItem(key);\n  } catch {\n    // Private windows and blocked storage: fall back to the defaults\n    return null;\n  }\n}\n\nfunction write(key: string, value: string) {\n  try {\n    localStorage.setItem(key, value);\n  } catch {\n    // The choice still applies for this visit\n  }\n}\n\n/** The saved choices, or dark with full transparency when nothing is saved. */\nexport function readStoredAppearance(): Appearance {\n  return {\n    theme: read(APPEARANCE_STORAGE_KEYS.theme) === \"light\" ? \"light\" : \"dark\",\n    transparency: read(APPEARANCE_STORAGE_KEYS.transparency) === \"reduced\" ? \"reduced\" : \"full\",\n  };\n}\n\n/** What <html> currently shows. */\nexport function getAppearance(): Appearance {\n  const root = document.documentElement;\n  return {\n    theme: root.getAttribute(\"data-theme\") === \"light\" ? \"light\" : \"dark\",\n    transparency: root.getAttribute(\"data-transparency\") === \"reduced\" ? \"reduced\" : \"full\",\n  };\n}\n\nfunction apply({ theme, transparency }: Appearance) {\n  const root = document.documentElement;\n  root.setAttribute(\"data-theme\", theme);\n  if (transparency === \"reduced\") {\n    root.setAttribute(\"data-transparency\", \"reduced\");\n  } else {\n    root.removeAttribute(\"data-transparency\");\n  }\n  listeners.forEach((listener) => listener());\n}\n\n/**\n * Puts the saved theme and transparency on <html>, dark when nothing is saved.\n * Call it as early as possible, before the first paint, so the page never flashes the other theme.\n */\nexport function applyStoredAppearance(): Appearance {\n  const appearance = readStoredAppearance();\n  apply(appearance);\n  return appearance;\n}\n\nexport function setTheme(theme: Theme) {\n  write(APPEARANCE_STORAGE_KEYS.theme, theme);\n  apply({ ...getAppearance(), theme });\n}\n\nexport function setTransparency(transparency: Transparency) {\n  write(APPEARANCE_STORAGE_KEYS.transparency, transparency);\n  apply({ ...getAppearance(), transparency });\n}\n\n/** Runs `listener` whenever the theme or transparency changes through these helpers. */\nexport function subscribeToAppearance(listener: () => void): () => void {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n}\n"],"mappings":";AAcA,IAAaA,IAA0B;CACrC,OAAO;CACP,cAAc;AAChB,GAEMC,oBAAY,IAAI,IAAgB;AAEtC,SAASC,EAAK,GAA4B;CACxC,IAAI;EACF,OAAO,aAAa,QAAQC,CAAG;CACjC,QAAQ;EAEN,OAAO;CACT;AACF;AAEA,SAASC,EAAM,GAAa,GAAe;CACzC,IAAI;EACF,aAAa,QAAQD,GAAKE,CAAK;CACjC,QAAQ,CAER;AACF;AAGA,SAAgBC,IAAmC;CACjD,OAAO;EACL,OAAOJ,EAAKF,EAAwB,KAAK,MAAM,UAAU,UAAU;EACnE,cAAcE,EAAKF,EAAwB,YAAY,MAAM,YAAY,YAAY;CACvF;AACF;AAGA,SAAgBO,IAA4B;CAC1C,IAAMC,IAAO,SAAS;CACtB,OAAO;EACL,OAAOA,EAAK,aAAa,YAAY,MAAM,UAAU,UAAU;EAC/D,cAAcA,EAAK,aAAa,mBAAmB,MAAM,YAAY,YAAY;CACnF;AACF;AAEA,SAASC,EAAM,EAAE,UAAO,mBAA4B;CAClD,IAAMD,IAAO,SAAS;CAOtB,AANAA,EAAK,aAAa,cAAcE,CAAK,GACjCC,MAAiB,YACnBH,EAAK,aAAa,qBAAqB,SAAS,IAEhDA,EAAK,gBAAgB,mBAAmB,GAE1CP,EAAU,SAAS,MAAaW,EAAS,CAAC;AAC5C;AAMA,SAAgBC,IAAoC;CAClD,IAAMC,IAAaR,EAAqB;CAExC,OADAG,EAAMK,CAAU,GACTA;AACT;AAEA,SAAgBC,EAAS,GAAc;CAErC,AADAX,EAAMJ,EAAwB,OAAOU,CAAK,GAC1CD,EAAM;EAAE,GAAGF,EAAc;EAAG;CAAM,CAAC;AACrC;AAEA,SAAgBS,EAAgB,GAA4B;CAE1D,AADAZ,EAAMJ,EAAwB,cAAcW,CAAY,GACxDF,EAAM;EAAE,GAAGF,EAAc;EAAG;CAAa,CAAC;AAC5C;AAGA,SAAgBU,EAAsB,GAAkC;CAEtE,OADAhB,EAAU,IAAIW,CAAQ,SACTX,EAAU,OAAOW,CAAQ;AACxC"}

package/dist/appearance.js

@@ -0,0 +1 @@
+export { t as APPEARANCE_STORAGE_KEYS, n as applyStoredAppearance, r as getAppearance, i as readStoredAppearance, a as setTheme, o as setTransparency, s as subscribeToAppearance } from "./appearance-J15aUjQp.js";

package/dist/components/AppearanceToggles/AppearanceToggles.d.ts

@@ -0,0 +1,17 @@
+import { type ButtonProps } from "../Button/Button";
+type ToggleProps = Omit<ButtonProps, "onClick" | "children" | "icon" | "iconOnly" | "aria-label" | "aria-pressed">;
+export interface ThemeToggleProps extends ToggleProps {
+    /** Accessible name while dark. Default "Mudar para o tema claro". */
+    lightLabel?: string;
+    /** Accessible name while light. Default "Mudar para o tema escuro". */
+    darkLabel?: string;
+}
+/** Switches between the dark theme (the default) and the light one, and remembers the choice. */
+export declare function ThemeToggle({ lightLabel, darkLabel, variant, ...rest }: ThemeToggleProps): import("react").JSX.Element;
+export interface TransparencyToggleProps extends ToggleProps {
+    /** Accessible name. Default "Reduzir transparência"; the pressed state says whether it is on. */
+    label?: string;
+}
+/** Turns every glass surface solid, or back to glass, and remembers the choice. */
+export declare function TransparencyToggle({ label, variant, ...rest }: TransparencyToggleProps): import("react").JSX.Element;
+export {};

package/dist/components/Dialog/Dialog.d.ts

@@ -12,7 +12,9 @@ export interface DialogProps {
     closeLabel?: string;
     /** `panel` focuses the panel itself instead of its first control. */
     initialFocus?: "first" | "panel";
+    /** md (default, 560px) for forms and confirmations · lg (880px) for wide content such as a print preview. */
+    size?: "md" | "lg";
     className?: string;
 }
 /** A modal panel of thick glass for a focused task or a confirmation. */
-export declare function Dialog({ open, onClose, title, description, children, footer, closeLabel, initialFocus, className, }: DialogProps): import("react").ReactPortal | null;
+export declare function Dialog({ open, onClose, title, description, children, footer, closeLabel, initialFocus, size, className, }: DialogProps): import("react").ReactPortal | null;

package/dist/components/Toast/Toast.d.ts

@@ -1,5 +1,6 @@
-import { type ReactNode } from "react";
-export type ToastTone = "neutral" | "success" | "warning" | "danger";
+import type { ReactNode } from "react";
+import { type ToastTone } from "./ToastView";
+export type { ToastTone } from "./ToastView";
 export interface ToastProps {
     open: boolean;
     onClose?: () => void;
@@ -12,5 +13,8 @@ export interface ToastProps {
     closeLabel?: string;
     className?: string;
 }
-/** A short glass notice at the bottom of the screen that confirms an action or reports a problem. */
+/**
+ * A short glass notice at the bottom of the screen that confirms an action or reports a problem.
+ * To raise toasts from anywhere in an app, wrap it in ToastProvider and use `useToast()` instead.
+ */
 export declare function Toast({ open, onClose, tone, title, description, duration, closeLabel, className, }: ToastProps): import("react").ReactPortal | null;

package/dist/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+import { type ToastTone } from "./ToastView";
+export interface ToastOptions {
+    title: ReactNode;
+    description?: ReactNode;
+    tone?: ToastTone;
+    /** Milliseconds before it closes itself; 0 keeps it open until dismissed. Default 5000. */
+    duration?: number;
+}
+export interface ToastApi {
+    /** Shows a toast and returns its id, for `dismiss`. */
+    show: (options: ToastOptions) => string;
+    success: (title: ReactNode, description?: ReactNode) => string;
+    error: (title: ReactNode, description?: ReactNode) => string;
+    warning: (title: ReactNode, description?: ReactNode) => string;
+    info: (title: ReactNode, description?: ReactNode) => string;
+    dismiss: (id: string) => void;
+}
+export interface ToastProviderProps {
+    children?: ReactNode;
+    /** Most toasts shown at once; the oldest goes first. Default 3. */
+    max?: number;
+    /** Accessible name of each close button. Default "Fechar aviso". */
+    closeLabel?: string;
+}
+/** Shows the toasts raised with `useToast()` anywhere inside it, stacked at the bottom of the screen. */
+export declare function ToastProvider({ children, max, closeLabel }: ToastProviderProps): import("react").JSX.Element;
+/** Raises toasts from anywhere inside a ToastProvider: `toast.success("Boleto salvo")`. */
+export declare function useToast(): ToastApi;

package/dist/components/Toast/ToastView.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+export type ToastTone = "neutral" | "success" | "warning" | "danger";
+export interface ToastViewProps {
+    tone: ToastTone;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Milliseconds before it closes itself; 0 keeps it open. */
+    duration: number;
+    onClose?: () => void;
+    closeLabel: string;
+    className?: string;
+}
+/** One toast: the glass card, its icon and close button, and a timer that pauses on hover or focus. */
+export declare function ToastView({ tone, title, description, duration, onClose, closeLabel, className }: ToastViewProps): import("react").JSX.Element;

package/dist/enableGlassRefraction-CgDeg-2E.js

@@ -0,0 +1,88 @@
+//#region src/glass/lens.ts
+function e(e, t, n, r) {
+	let i = new Uint8ClampedArray(e * t * 4), a = Math.max(0, Math.min(n, e / 2, t / 2));
+	for (let n = 0; n < t; n++) for (let o = 0; o < e; o++) {
+		let s = o + .5 - e / 2, c = n + .5 - t / 2, l = Math.abs(s) - (e / 2 - a), u = Math.abs(c) - (t / 2 - a), d, f = 0, p = 0;
+		if (l > 0 && u > 0) {
+			let e = Math.hypot(l, u);
+			d = a - e, f = l / e * Math.sign(s), p = u / e * Math.sign(c);
+		} else l > u ? (d = e / 2 - Math.abs(s), f = Math.sign(s)) : (d = t / 2 - Math.abs(c), p = Math.sign(c));
+		let m = Math.max(0, 1 - d / r), h = m * m, g = (n * e + o) * 4;
+		i[g] = 128 - f * h * 127, i[g + 1] = 128 - p * h * 127, i[g + 2] = 128, i[g + 3] = 255;
+	}
+	return i;
+}
+function t(e) {
+	let t = Math.max(4, Math.min(16, e / 3)), n = t * .45;
+	return {
+		rim: t,
+		maxShift: n,
+		scale: n / (127 / 255)
+	};
+}
+//#endregion
+//#region src/glass/enableGlassRefraction.ts
+var n = "http://www.w3.org/2000/svg", r = ".hds-glass:not(.hds-glass--thick)", i = null, a = /* @__PURE__ */ new Map();
+function o() {
+	return (navigator.userAgentData?.brands ?? []).some(({ brand: e }) => e.includes("Chromium"));
+}
+function s() {
+	return i?.isConnected || (i = document.createElementNS(n, "svg"), i.setAttribute("id", "hds-glass-defs"), i.setAttribute("width", "0"), i.setAttribute("height", "0"), i.setAttribute("aria-hidden", "true"), i.style.position = "absolute", document.body.appendChild(i)), i;
+}
+function c(r, i, o) {
+	let c = `${r}x${i}r${o}`, l = a.get(c);
+	if (l) return l;
+	let u = document.createElement("canvas");
+	u.width = r, u.height = i;
+	let d = u.getContext("2d");
+	if (!d) return null;
+	let { rim: f, scale: p } = t(i), m = d.createImageData(r, i);
+	m.data.set(e(r, i, o, f)), d.putImageData(m, 0, 0);
+	let h = `hds-glass-lens-${a.size}`, g = document.createElementNS(n, "filter");
+	Object.entries({
+		id: h,
+		x: "0",
+		y: "0",
+		width: String(r),
+		height: String(i),
+		filterUnits: "userSpaceOnUse",
+		"color-interpolation-filters": "sRGB"
+	}).forEach(([e, t]) => g.setAttribute(e, t));
+	let _ = document.createElementNS(n, "feImage");
+	_.setAttribute("href", u.toDataURL()), _.setAttribute("x", "0"), _.setAttribute("y", "0"), _.setAttribute("width", String(r)), _.setAttribute("height", String(i)), _.setAttribute("result", "map");
+	let v = document.createElementNS(n, "feDisplacementMap");
+	return v.setAttribute("in", "SourceGraphic"), v.setAttribute("in2", "map"), v.setAttribute("scale", p.toFixed(2)), v.setAttribute("xChannelSelector", "R"), v.setAttribute("yChannelSelector", "G"), g.append(_, v), s().appendChild(g), a.set(c, h), h;
+}
+function l(e) {
+	let t = Math.round(e.offsetWidth), n = Math.round(e.offsetHeight);
+	if (t < 8 || n < 8) return;
+	let r = parseFloat(getComputedStyle(e).borderTopLeftRadius) || 0, i = c(t, n, Math.min(r, n / 2));
+	i && e.style.setProperty("--hds-glass-lens", `url(#${i})`);
+}
+var u = !1;
+function d() {
+	if (typeof document > "u") return !1;
+	let e = window.matchMedia?.("(prefers-reduced-transparency: reduce)").matches ?? !1;
+	if (!o() || e) return !1;
+	if (u) return !0;
+	u = !0;
+	let t = new ResizeObserver((e) => {
+		for (let t of e) l(t.target);
+	}), n = (e) => {
+		e.querySelectorAll(r).forEach((e) => {
+			l(e), t.observe(e);
+		});
+	};
+	return n(document), new MutationObserver((e) => {
+		for (let i of e) i.addedNodes.forEach((e) => {
+			e instanceof HTMLElement && (e.matches(r) && (l(e), t.observe(e)), n(e));
+		});
+	}).observe(document.body, {
+		childList: !0,
+		subtree: !0
+	}), document.documentElement.setAttribute("data-glass-refraction", ""), !0;
+}
+//#endregion
+export { d as t };
+
+//# sourceMappingURL=enableGlassRefraction-CgDeg-2E.js.map

package/dist/enableGlassRefraction-CgDeg-2E.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enableGlassRefraction-CgDeg-2E.js","names":["lensDisplacementMap","data","width","height","r","radius","y","x","px","py","qx","qy","distance","nx","ny","length","t","rim","strength","i","lensSettings","maxShift","SVG","GLASS","defs","filters","isChromium","brand","ensureDefs","filterFor","key","existing","canvas","context","image","id","filter","name","value","map","displace","scale","applyLens","element","active","enableGlassRefraction","reducesTransparency","resizeObserver","entry","entries","watch","mutation","mutations","node"],"sources":["../src/glass/lens.ts","../src/glass/enableGlassRefraction.ts"],"sourcesContent":["/**\n * A displacement map for the edge lens: near the rim the backdrop is sampled from further\n * inside the shape, so content appears to bend towards the edge; the middle is untouched.\n *\n * Red holds the horizontal shift and green the vertical one, with 128 meaning \"no shift\".\n * The shift never exceeds `maxShift`, and `maxShift` stays below the rim width, so content\n * is compressed towards the edge but never flipped.\n */\nexport function lensDisplacementMap(width: number, height: number, radius: number, rim: number): Uint8ClampedArray {\n  const data = new Uint8ClampedArray(width * height * 4);\n  const r = Math.max(0, Math.min(radius, width / 2, height / 2));\n\n  for (let y = 0; y < height; y++) {\n    for (let x = 0; x < width; x++) {\n      // Distance to the edge of the rounded rectangle and the outward normal there\n      const px = x + 0.5 - width / 2;\n      const py = y + 0.5 - height / 2;\n      const qx = Math.abs(px) - (width / 2 - r);\n      const qy = Math.abs(py) - (height / 2 - r);\n      let distance: number;\n      let nx = 0;\n      let ny = 0;\n\n      if (qx > 0 && qy > 0) {\n        const length = Math.hypot(qx, qy);\n        distance = r - length;\n        nx = (qx / length) * Math.sign(px);\n        ny = (qy / length) * Math.sign(py);\n      } else if (qx > qy) {\n        distance = width / 2 - Math.abs(px);\n        nx = Math.sign(px);\n      } else {\n        distance = height / 2 - Math.abs(py);\n        ny = Math.sign(py);\n      }\n\n      const t = Math.max(0, 1 - distance / rim);\n      const strength = t * t;\n      const i = (y * width + x) * 4;\n      data[i] = 128 - nx * strength * 127;\n      data[i + 1] = 128 - ny * strength * 127;\n      data[i + 2] = 128;\n      data[i + 3] = 255;\n    }\n  }\n\n  return data;\n}\n\n/** Rim width and the filter scale that keep the largest shift at 45% of the rim. */\nexport function lensSettings(height: number) {\n  const rim = Math.max(4, Math.min(16, height / 3));\n  const maxShift = rim * 0.45;\n  // feDisplacementMap moves by scale × (channel / 255 − 0.5); the map uses at most ±127\n  const scale = maxShift / (127 / 255);\n  return { rim, maxShift, scale };\n}\n","import { lensDisplacementMap, lensSettings } from \"./lens\";\n\nconst SVG = \"http://www.w3.org/2000/svg\";\nconst GLASS = \".hds-glass:not(.hds-glass--thick)\";\n\nlet defs: SVGSVGElement | null = null;\nconst filters = new Map<string, string>();\n\nfunction isChromium() {\n  const brands = (navigator as Navigator & { userAgentData?: { brands: { brand: string }[] } }).userAgentData?.brands ?? [];\n  return brands.some(({ brand }) => brand.includes(\"Chromium\"));\n}\n\nfunction ensureDefs() {\n  if (defs?.isConnected) return defs;\n  defs = document.createElementNS(SVG, \"svg\");\n  defs.setAttribute(\"id\", \"hds-glass-defs\");\n  defs.setAttribute(\"width\", \"0\");\n  defs.setAttribute(\"height\", \"0\");\n  defs.setAttribute(\"aria-hidden\", \"true\");\n  defs.style.position = \"absolute\";\n  document.body.appendChild(defs);\n  return defs;\n}\n\n/** One SVG filter per element size and corner radius, shared by elements that match. */\nfunction filterFor(width: number, height: number, radius: number): string | null {\n  const key = `${width}x${height}r${radius}`;\n  const existing = filters.get(key);\n  if (existing) return existing;\n\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = width;\n  canvas.height = height;\n  const context = canvas.getContext(\"2d\");\n  if (!context) return null;\n\n  const { rim, scale } = lensSettings(height);\n  const image = context.createImageData(width, height);\n  image.data.set(lensDisplacementMap(width, height, radius, rim));\n  context.putImageData(image, 0, 0);\n\n  const id = `hds-glass-lens-${filters.size}`;\n  const filter = document.createElementNS(SVG, \"filter\");\n  const attributes: Record<string, string> = {\n    id,\n    x: \"0\",\n    y: \"0\",\n    width: String(width),\n    height: String(height),\n    filterUnits: \"userSpaceOnUse\",\n    \"color-interpolation-filters\": \"sRGB\",\n  };\n  Object.entries(attributes).forEach(([name, value]) => filter.setAttribute(name, value));\n\n  const map = document.createElementNS(SVG, \"feImage\");\n  map.setAttribute(\"href\", canvas.toDataURL());\n  map.setAttribute(\"x\", \"0\");\n  map.setAttribute(\"y\", \"0\");\n  map.setAttribute(\"width\", String(width));\n  map.setAttribute(\"height\", String(height));\n  map.setAttribute(\"result\", \"map\");\n\n  const displace = document.createElementNS(SVG, \"feDisplacementMap\");\n  displace.setAttribute(\"in\", \"SourceGraphic\");\n  displace.setAttribute(\"in2\", \"map\");\n  displace.setAttribute(\"scale\", scale.toFixed(2));\n  displace.setAttribute(\"xChannelSelector\", \"R\");\n  displace.setAttribute(\"yChannelSelector\", \"G\");\n\n  filter.append(map, displace);\n  ensureDefs().appendChild(filter);\n  filters.set(key, id);\n  return id;\n}\n\nfunction applyLens(element: HTMLElement) {\n  const width = Math.round(element.offsetWidth);\n  const height = Math.round(element.offsetHeight);\n  if (width < 8 || height < 8) return;\n\n  const radius = parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0;\n  const id = filterFor(width, height, Math.min(radius, height / 2));\n  if (id) element.style.setProperty(\"--hds-glass-lens\", `url(#${id})`);\n}\n\nlet active = false;\n\n/**\n * Turns on the edge lens: glass bends the backdrop near its rim, like Apple's Liquid Glass.\n * Every glass element present now or added later gets a lens sized to it.\n *\n * Only Chromium renders SVG filters in backdrop-filter. Firefox accepts them and then\n * drops the whole backdrop-filter, blur included, so other browsers keep plain frosted\n * glass. Nothing happens when the user reduces transparency.\n * Returns whether the lens was turned on.\n */\nexport function enableGlassRefraction(): boolean {\n  if (typeof document === \"undefined\") return false;\n\n  const reducesTransparency = window.matchMedia?.(\"(prefers-reduced-transparency: reduce)\").matches ?? false;\n  if (!isChromium() || reducesTransparency) return false;\n  if (active) return true;\n  active = true;\n\n  const resizeObserver = new ResizeObserver((entries) => {\n    for (const entry of entries) applyLens(entry.target as HTMLElement);\n  });\n  const watch = (root: ParentNode) => {\n    root.querySelectorAll<HTMLElement>(GLASS).forEach((element) => {\n      applyLens(element);\n      resizeObserver.observe(element);\n    });\n  };\n\n  watch(document);\n  new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      mutation.addedNodes.forEach((node) => {\n        if (!(node instanceof HTMLElement)) return;\n        if (node.matches(GLASS)) {\n          applyLens(node);\n          resizeObserver.observe(node);\n        }\n        watch(node);\n      });\n    }\n  }).observe(document.body, { childList: true, subtree: true });\n\n  document.documentElement.setAttribute(\"data-glass-refraction\", \"\");\n  return true;\n}\n"],"mappings":"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"}

package/dist/glass/enableGlassRefraction.d.ts

@@ -1,9 +1,10 @@
 /**
- * Adds the SVG filter that makes glass refract its backdrop, and marks
- * `<html data-glass-refraction>` so the styles use it.
+ * Turns on the edge lens: glass bends the backdrop near its rim, like Apple's Liquid Glass.
+ * Every glass element present now or added later gets a lens sized to it.
  *
- * Only Chromium renders the effect. Firefox accepts it in `@supports` and then
- * drops the whole backdrop-filter, blur included, so other browsers are left alone.
- * Returns whether refraction was turned on.
+ * Only Chromium renders SVG filters in backdrop-filter. Firefox accepts them and then
+ * drops the whole backdrop-filter, blur included, so other browsers keep plain frosted
+ * glass. Nothing happens when the user reduces transparency.
+ * Returns whether the lens was turned on.
  */
 export declare function enableGlassRefraction(): boolean;

package/dist/glass/index.d.ts

@@ -0,0 +1 @@
+export { enableGlassRefraction } from "./enableGlassRefraction";

package/dist/glass/lens.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A displacement map for the edge lens: near the rim the backdrop is sampled from further
+ * inside the shape, so content appears to bend towards the edge; the middle is untouched.
+ *
+ * Red holds the horizontal shift and green the vertical one, with 128 meaning "no shift".
+ * The shift never exceeds `maxShift`, and `maxShift` stays below the rim width, so content
+ * is compressed towards the edge but never flipped.
+ */
+export declare function lensDisplacementMap(width: number, height: number, radius: number, rim: number): Uint8ClampedArray;
+/** Rim width and the filter scale that keep the largest shift at 45% of the rim. */
+export declare function lensSettings(height: number): {
+    rim: number;
+    maxShift: number;
+    scale: number;
+};

package/dist/glass.js

@@ -0,0 +1 @@
+export { t as enableGlassRefraction } from "./enableGlassRefraction-CgDeg-2E.js";

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export { Dialog } from "./components/Dialog/Dialog";
 export type { DialogProps } from "./components/Dialog/Dialog";
 export { Toast } from "./components/Toast/Toast";
 export type { ToastProps, ToastTone } from "./components/Toast/Toast";
+export { ToastProvider, useToast } from "./components/Toast/ToastProvider";
+export type { ToastApi, ToastOptions, ToastProviderProps } from "./components/Toast/ToastProvider";
 export { Input } from "./components/Input/Input";
 export type { InputProps } from "./components/Input/Input";
 export { Select } from "./components/Select/Select";
@@ -28,6 +30,11 @@ export { Badge } from "./components/Badge/Badge";
 export type { BadgeProps, BadgeTone } from "./components/Badge/Badge";
 export { Table } from "./components/Table/Table";
 export type { TableColumn, TableProps } from "./components/Table/Table";
+export { ThemeToggle, TransparencyToggle } from "./components/AppearanceToggles/AppearanceToggles";
+export type { ThemeToggleProps, TransparencyToggleProps } from "./components/AppearanceToggles/AppearanceToggles";
+export { useAppearance } from "./appearance/useAppearance";
+export type { UseAppearance } from "./appearance/useAppearance";
+export * from "./appearance";
 export { Container } from "./components/Container/Container";
 export type { ContainerProps } from "./components/Container/Container";
 export { SectionTitle } from "./components/SectionTitle/SectionTitle";