@hemerson/design-system 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Hemerson Oliveira
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,92 @@
-# Temporary Holding Version
+# Hemerson Design System
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![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
+npm install @hemerson/design-system
+```
+
+React 18.2 or later is required.
+
+```tsx
+import "@hemerson/design-system/styles.css";
+import { Button } from "@hemerson/design-system";
+
+export function Toolbar() {
+  return <Button variant="primary">Novo boleto</Button>;
+}
+```
+
+- **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.
+- **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.
+- **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
+
+| Export | Contents |
+| --- | --- |
+| `@hemerson/design-system` | React components |
+| `@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 |
+
+## Development
+
+```bash
+npm install
+npm run dev          # Storybook on http://localhost:6006
+npm test             # unit tests
+npm run typecheck
+npm run lint
+npm run build        # the package, into dist/
+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.
+
+## Contributors
+
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/github/all-contributors/hemerson-git/hemerson-design-system?color=7ea8a7&style=flat-square)](#contributors)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
+Thanks to everyone who has contributed ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://hemerson-dev.vercel.app/pt-BR"><img src="https://avatars.githubusercontent.com/u/48595787?v=4?s=100" width="100px;" alt="Hemerson Oliveira"/><br /><sub><b>Hemerson Oliveira</b></sub></a><br /><a href="https://github.com/hemerson-git/hemerson-design-system/commits?author=hemerson-git" title="Code">💻</a> <a href="#design-hemerson-git" title="Design">🎨</a> <a href="https://github.com/hemerson-git/hemerson-design-system/commits?author=hemerson-git" title="Documentation">📖</a> <a href="https://github.com/hemerson-git/hemerson-design-system/commits?author=hemerson-git" title="Tests">⚠️</a> <a href="#infra-hemerson-git" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-hemerson-git" title="Maintenance">🚧</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+## License
+
+[MIT](LICENSE)

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger";
+export interface BadgeProps {
+    tone?: BadgeTone;
+    /** A Lucide icon, or `false` for none. Status tones show their own icon by default. */
+    icon?: ReactNode | false;
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * A small pill that states a status or a category in one or two words.
+ * The word stays in ink; the tone shows in the icon and the tint, so color never carries the meaning alone.
+ */
+export declare function Badge({ tone, icon, children, className }: BadgeProps): import("react").JSX.Element;

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,17 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export type ButtonVariant = "primary" | "secondary" | "glass" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** primary (one per view) · secondary · glass (over content or in glass bars) · ghost · danger (destructive). */
+    variant?: ButtonVariant;
+    /** sm 32px · md 40px · lg 56px, as on the portfolio. */
+    size?: ButtonSize;
+    /** A Lucide icon, shown before the label. */
+    icon?: ReactNode;
+    /** Shows only the icon. Requires `aria-label`. */
+    iconOnly?: boolean;
+    /** Shows a spinner, disables the button and sets `aria-busy`. */
+    loading?: boolean;
+}
+/** Triggers an action. Labels are set uppercase and bold, verb first. */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,19 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+export interface CardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** The element to render. Default `article`; use `a` with `href` for a link card. */
+    as?: ElementType;
+    href?: string;
+    /** An uppercase label above the title. */
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    media?: {
+        src: string;
+        alt?: string;
+    };
+    /** Actions or badges at the bottom. */
+    footer?: ReactNode;
+    /** The whole card is clickable; it scales up slightly on hover. */
+    interactive?: boolean;
+}
+/** A solid raised block that groups one item's content. */
+export declare function Card({ as: Tag, eyebrow, title, media, footer, interactive, className, children, ...rest }: CardProps): import("react").JSX.Element;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** States the "yes" ("Pago"), never a negative. */
+    label: ReactNode;
+    hint?: ReactNode;
+}
+/** A checkbox whose whole label is clickable. */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,9 @@
+import type { ElementType, HTMLAttributes } from "react";
+export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    /** The element to render. Default `section`. */
+    as?: ElementType;
+    /** Adds the sidebar's width as left padding from 768px up. */
+    withSidebar?: boolean;
+}
+/** Centres page content at content-max, with a section's vertical rhythm and the side gutter. */
+export declare function Container({ as: Tag, withSidebar, className, ...rest }: ContainerProps): import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface DialogProps {
+    open: boolean;
+    /** Called on Escape, on the close button and on a click outside the panel. */
+    onClose: () => void;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    /** The buttons, main action last. */
+    footer?: ReactNode;
+    /** Accessible name of the close button. Default "Fechar". */
+    closeLabel?: string;
+    /** `panel` focuses the panel itself instead of its first control. */
+    initialFocus?: "first" | "panel";
+    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;

package/dist/components/FloatingButton/FloatingButton.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonHTMLAttributes } from "react";
+export type FloatingButtonPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+export interface FloatingButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Accessible name and tooltip. */
+    label: string;
+    position?: FloatingButtonPosition;
+}
+/** A round glass button fixed to a corner of the viewport, for one persistent action. */
+export declare const FloatingButton: import("react").ForwardRefExoticComponent<FloatingButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/GlassPanel/GlassPanel.d.ts

@@ -0,0 +1,13 @@
+import { type ElementType, type HTMLAttributes } from "react";
+export type GlassTone = "regular" | "clear" | "thick" | "accent";
+export interface GlassPanelProps extends HTMLAttributes<HTMLElement> {
+    /** The element to render. Default `div`. */
+    as?: ElementType;
+    /**
+     * regular (default, the only tone for text) · clear (icon-only controls over the app's own surfaces)
+     * · thick (dialogs and sheets) · accent (one prominent floating control per view).
+     */
+    tone?: GlassTone;
+}
+/** Liquid glass: the material of every surface that floats above the content. */
+export declare const GlassPanel: import("react").ForwardRefExoticComponent<GlassPanelProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/GlowAvatar/GlowAvatar.d.ts

@@ -0,0 +1,10 @@
+export interface GlowAvatarProps {
+    src: string;
+    /** The person's name. */
+    alt: string;
+    /** Diameter in px. Default 96. */
+    size?: number;
+    className?: string;
+}
+/** A round photo ringed in the accent with a soft glow behind it. One per view. */
+export declare function GlowAvatar({ src, alt, size, className }: GlowAvatarProps): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Always visible, written as a noun ("Beneficiário"). */
+    label: ReactNode;
+    hint?: ReactNode;
+    /** Says how to fix the value; also marks the input invalid. */
+    error?: ReactNode;
+    /** Mono, tabular figures and a decimal keyboard, for amounts and codes. */
+    numeric?: boolean;
+}
+/** A labelled text field on a solid, recessed well. */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Loading/Loading.d.ts

@@ -0,0 +1,11 @@
+export interface LoadingProps {
+    /** sm 16px · md 24px · lg 32px. */
+    size?: "sm" | "md" | "lg";
+    /** Announced to screen readers. Default "Carregando…". */
+    label?: string;
+    /** Shows the label beside the spinner. */
+    showLabel?: boolean;
+    className?: string;
+}
+/** A spinner that tells assistive technology something is loading. */
+export declare function Loading({ size, label, showLabel, className }: LoadingProps): import("react").JSX.Element;

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+import { type ButtonVariant } from "../Button/Button";
+export type MenuItem = {
+    label: string;
+    icon?: ReactNode;
+    onSelect?: () => void;
+    danger?: boolean;
+    separator?: never;
+} | {
+    separator: true;
+};
+export interface MenuProps {
+    /** Trigger text, or its accessible name with `iconOnly`. */
+    label: string;
+    icon?: ReactNode;
+    iconOnly?: boolean;
+    items: MenuItem[];
+    /** Which edge of the trigger the list lines up with. Default `end`. */
+    align?: "start" | "end";
+    /** Default `glass`. */
+    triggerVariant?: ButtonVariant;
+    className?: string;
+}
+/** A button that opens a glass list of actions. */
+export declare function Menu({ label, icon, iconOnly, items, align, triggerVariant, className }: MenuProps): import("react").JSX.Element;

package/dist/components/NavBar/NavBar.d.ts

@@ -0,0 +1,20 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+export interface NavBarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Product or page name on the left. */
+    title?: ReactNode;
+    /** Buttons on the right. */
+    actions?: ReactNode;
+    /** Name of the navigation landmark. Default "Principal". */
+    navLabel?: string;
+}
+export interface NavBarLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Marks the current page. */
+    active?: boolean;
+}
+declare function NavBarLink({ active, className, ...rest }: NavBarLinkProps): import("react").JSX.Element;
+declare function NavBarRoot({ title, actions, navLabel, className, children, ...rest }: NavBarProps): import("react").JSX.Element;
+/** The app's top bar: a floating glass capsule with the product name, the main sections and the global actions. */
+export declare const NavBar: typeof NavBarRoot & {
+    Link: typeof NavBarLink;
+};
+export {};

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from "react";
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+    /** Accessible name of the region. */
+    label: string;
+    maxHeight?: number | string;
+}
+/** A focusable scrollable region with the brand's slim scrollbars. */
+export declare function ScrollArea({ label, maxHeight, className, style, ...rest }: ScrollAreaProps): import("react").JSX.Element;

package/dist/components/SectionTitle/SectionTitle.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export interface SectionTitleProps {
+    children: ReactNode;
+    /** Shown zero-padded (3 → "03") before the heading, only when sections are a sequence. */
+    index?: number;
+    /** Heading level. Default `h2`. */
+    as?: "h1" | "h2" | "h3" | "h4";
+    id?: string;
+    className?: string;
+}
+/** A page-section heading led by a glowing mono index, the portfolio's signature heading. */
+export declare function SectionTitle({ children, index, as: Tag, id, className }: SectionTitleProps): import("react").JSX.Element;

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export interface SegmentedOption<T extends string | number = string> {
+    value: T;
+    label?: ReactNode;
+    icon?: ReactNode;
+    /** Accessible name when the label is only an icon or a flag. */
+    ariaLabel?: string;
+}
+export interface SegmentedControlProps<T extends string | number = string> {
+    options: SegmentedOption<T>[];
+    /** The selected value, for a controlled control. */
+    value?: T;
+    /** The initially selected value, for an uncontrolled control. */
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    /** Name of the group. */
+    label: string;
+    className?: string;
+}
+/** Switches between two to four exclusive options with a lit thumb that slides between them. */
+export declare function SegmentedControl<T extends string | number = string>({ options, value, defaultValue, onChange, label, className, }: SegmentedControlProps<T>): import("react").JSX.Element;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode, type SelectHTMLAttributes } from "react";
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    label: ReactNode;
+    options: SelectOption[];
+    /** Shown as a disabled first option. */
+    placeholder?: string;
+    hint?: ReactNode;
+    error?: ReactNode;
+}
+/** A labelled native dropdown, styled like Input, for choosing one option from a short list. */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,8 @@
+export interface SeparatorProps {
+    orientation?: "horizontal" | "vertical";
+    /** Hides the line from screen readers when it only decorates. */
+    decorative?: boolean;
+    className?: string;
+}
+/** A 1px line that divides groups of content. */
+export declare function Separator({ orientation, decorative, className }: SeparatorProps): import("react").JSX.Element;

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export interface SidebarItem {
+    /** Accessible name and tooltip. */
+    label: string;
+    icon: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    active?: boolean;
+}
+export interface SidebarProps {
+    items: SidebarItem[];
+    /** Items pinned to the bottom, such as settings. */
+    footer?: ReactNode;
+    /** A free-floating capsule instead of a rail attached to the edge. */
+    floating?: boolean;
+    /** Name of the navigation landmark. Default "Navegação". */
+    label?: string;
+    className?: string;
+}
+/** A slim glass rail of icon buttons for the app's main sections. */
+export declare function Sidebar({ items, footer, floating, label, className }: SidebarProps): import("react").JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export interface TableColumn<Row> {
+    key: string;
+    header: ReactNode;
+    /** Mono, tabular figures, right-aligned. */
+    numeric?: boolean;
+    align?: "start" | "center";
+    /** Renders the cell from the row; by default the cell shows `row[key]`. */
+    render?: (row: Row) => ReactNode;
+}
+export interface TableProps<Row> {
+    columns: TableColumn<Row>[];
+    rows: Row[];
+    /** Key of each row's unique id. Default `id`. */
+    rowKey?: keyof Row & string;
+    /** Names the table and its scroll region. */
+    caption?: string;
+    /** Keeps the caption for screen readers only. */
+    hideCaption?: boolean;
+    /** Shown when there are no rows. Default "Nada para mostrar.". */
+    empty?: ReactNode;
+    maxHeight?: number | string;
+    className?: string;
+}
+/** A solid data table with a sticky header, roomy rows and aligned numbers. */
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, empty, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export type ToastTone = "neutral" | "success" | "warning" | "danger";
+export interface ToastProps {
+    open: boolean;
+    onClose?: () => void;
+    tone?: ToastTone;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Milliseconds before it closes itself; 0 keeps it open. Default 5000. */
+    duration?: number;
+    /** Accessible name of the close button. Default "Fechar aviso". */
+    closeLabel?: string;
+    className?: string;
+}
+/** A short glass notice at the bottom of the screen that confirms an action or reports a problem. */
+export declare function Toast({ open, onClose, tone, title, description, duration, closeLabel, className, }: ToastProps): import("react").ReactPortal | null;

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":";AAQA,SAAgBA,EAAoB,GAAe,GAAgB,GAAgB,GAAgC;CACjH,IAAMC,IAAO,IAAI,kBAAkBC,IAAQC,IAAS,CAAC,GAC/CC,IAAI,KAAK,IAAI,GAAG,KAAK,IAAIC,GAAQH,IAAQ,GAAGC,IAAS,CAAC,CAAC;CAE7D,KAAK,IAAIG,IAAI,GAAGA,IAAIH,GAAQ,KAC1B,KAAK,IAAII,IAAI,GAAGA,IAAIL,GAAO,KAAK;EAE9B,IAAMM,IAAKD,IAAI,KAAML,IAAQ,GACvBO,IAAKH,IAAI,KAAMH,IAAS,GACxBO,IAAK,KAAK,IAAIF,CAAE,KAAKN,IAAQ,IAAIE,IACjCO,IAAK,KAAK,IAAIF,CAAE,KAAKN,IAAS,IAAIC,IACpCQ,GACAC,IAAK,GACLC,IAAK;EAET,IAAIJ,IAAK,KAAKC,IAAK,GAAG;GACpB,IAAMI,IAAS,KAAK,MAAML,GAAIC,CAAE;GAGhC,AAFA,IAAWP,IAAIW,GACf,IAAML,IAAKK,IAAU,KAAK,KAAKP,CAAE,GACjC,IAAMG,IAAKI,IAAU,KAAK,KAAKN,CAAE;EACnC,OAAO,AAAIC,IAAKC,KACd,IAAWT,IAAQ,IAAI,KAAK,IAAIM,CAAE,GAClC,IAAK,KAAK,KAAKA,CAAE,MAEjB,IAAWL,IAAS,IAAI,KAAK,IAAIM,CAAE,GACnC,IAAK,KAAK,KAAKA,CAAE;EAGnB,IAAMO,IAAI,KAAK,IAAI,GAAG,IAAIJ,IAAWK,CAAG,GAClCC,IAAWF,IAAIA,GACfG,KAAKb,IAAIJ,IAAQK,KAAK;EAI5B,AAHA,EAAKY,KAAK,MAAMN,IAAKK,IAAW,KAChC,EAAKC,IAAI,KAAK,MAAML,IAAKI,IAAW,KACpC,EAAKC,IAAI,KAAK,KACd,EAAKA,IAAI,KAAK;CAChB;CAGF,OAAOlB;AACT;AAGA,SAAgBmB,EAAa,GAAgB;CAC3C,IAAMH,IAAM,KAAK,IAAI,GAAG,KAAK,IAAI,IAAId,IAAS,CAAC,CAAC,GAC1CkB,IAAWJ,IAAM;CAGvB,OAAO;EAAE;EAAK;EAAU,OADVI,KAAY,MAAM;CACF;AAChC;;;ACtDA,IAAMC,IAAM,8BACNC,IAAQ,qCAEVC,IAA6B,MAC3BC,oBAAU,IAAI,IAAoB;AAExC,SAASC,IAAa;CAEpB,QADgB,UAA8E,eAAe,UAAU,CAAC,EAAA,CAC1G,MAAM,EAAE,eAAYC,EAAM,SAAS,UAAU,CAAC;AAC9D;AAEA,SAASC,IAAa;CASpB,OARIJ,GAAM,gBACV,IAAO,SAAS,gBAAgBF,GAAK,KAAK,GAC1CE,EAAK,aAAa,MAAM,gBAAgB,GACxCA,EAAK,aAAa,SAAS,GAAG,GAC9BA,EAAK,aAAa,UAAU,GAAG,GAC/BA,EAAK,aAAa,eAAe,MAAM,GACvC,EAAK,MAAM,WAAW,YACtB,SAAS,KAAK,YAAYA,CAAI,IACvBA;AACT;AAGA,SAASK,EAAU,GAAe,GAAgB,GAA+B;CAC/E,IAAMC,IAAM,GAAG5B,EAAM,GAAGC,EAAO,GAAGE,KAC5B0B,IAAWN,EAAQ,IAAIK,CAAG;CAChC,IAAIC,GAAU,OAAOA;CAErB,IAAMC,IAAS,SAAS,cAAc,QAAQ;CAE9C,AADA,EAAO,QAAQ9B,GACf,EAAO,SAASC;CAChB,IAAM8B,IAAUD,EAAO,WAAW,IAAI;CACtC,IAAI,CAACC,GAAS,OAAO;CAErB,IAAM,EAAE,QAAK,aAAUb,EAAajB,CAAM,GACpC+B,IAAQD,EAAQ,gBAAgB/B,GAAOC,CAAM;CAEnD,AADA+B,EAAM,KAAK,IAAIlC,EAAoBE,GAAOC,GAAQE,GAAQY,CAAG,CAAC,GAC9DgB,EAAQ,aAAaC,GAAO,GAAG,CAAC;CAEhC,IAAMC,IAAK,kBAAkBV,EAAQ,QAC/BW,IAAS,SAAS,gBAAgBd,GAAK,QAAQ;CAUrD,OAAO,QAAQ;EARb;EACA,GAAG;EACH,GAAG;EACH,OAAO,OAAOpB,CAAK;EACnB,QAAQ,OAAOC,CAAM;EACrB,aAAa;EACb,+BAA+B;CAElB,CAAU,CAAC,CAAC,SAAS,CAACkC,GAAMC,OAAWF,EAAO,aAAaC,GAAMC,CAAK,CAAC;CAEtF,IAAMC,IAAM,SAAS,gBAAgBjB,GAAK,SAAS;CAMnD,AALAiB,EAAI,aAAa,QAAQP,EAAO,UAAU,CAAC,GAC3CO,EAAI,aAAa,KAAK,GAAG,GACzBA,EAAI,aAAa,KAAK,GAAG,GACzBA,EAAI,aAAa,SAAS,OAAOrC,CAAK,CAAC,GACvCqC,EAAI,aAAa,UAAU,OAAOpC,CAAM,CAAC,GACzCoC,EAAI,aAAa,UAAU,KAAK;CAEhC,IAAMC,IAAW,SAAS,gBAAgBlB,GAAK,mBAAmB;CAUlE,OATAkB,EAAS,aAAa,MAAM,eAAe,GAC3CA,EAAS,aAAa,OAAO,KAAK,GAClCA,EAAS,aAAa,SAASC,EAAM,QAAQ,CAAC,CAAC,GAC/CD,EAAS,aAAa,oBAAoB,GAAG,GAC7CA,EAAS,aAAa,oBAAoB,GAAG,GAE7CJ,EAAO,OAAOG,GAAKC,CAAQ,GAC3BZ,EAAW,CAAC,CAAC,YAAYQ,CAAM,GAC/BX,EAAQ,IAAIK,GAAKK,CAAE,GACZA;AACT;AAEA,SAASO,EAAU,GAAsB;CACvC,IAAMxC,IAAQ,KAAK,MAAMyC,EAAQ,WAAW,GACtCxC,IAAS,KAAK,MAAMwC,EAAQ,YAAY;CAC9C,IAAIzC,IAAQ,KAAKC,IAAS,GAAG;CAE7B,IAAME,IAAS,WAAW,iBAAiBsC,CAAO,CAAC,CAAC,mBAAmB,KAAK,GACtER,IAAKN,EAAU3B,GAAOC,GAAQ,KAAK,IAAIE,GAAQF,IAAS,CAAC,CAAC;CAChE,AAAIgC,KAAIQ,EAAQ,MAAM,YAAY,oBAAoB,QAAQR,EAAG,EAAE;AACrE;AAEA,IAAIS,IAAS;AAWb,SAAgBC,IAAiC;CAC/C,IAAI,OAAO,WAAa,KAAa,OAAO;CAE5C,IAAMC,IAAsB,OAAO,aAAa,wCAAwC,CAAC,CAAC,WAAW;CACrG,IAAI,CAACpB,EAAW,KAAKoB,GAAqB,OAAO;CACjD,IAAIF,GAAQ,OAAO;CACnB,IAAS;CAET,IAAMG,IAAiB,IAAI,gBAAgB,MAAY;EACrD,KAAK,IAAMC,KAASC,GAAS,EAAUD,EAAM,MAAqB;CACpE,CAAC,GACKE,KAAS,MAAqB;EAClC,EAAK,iBAA8B3B,CAAK,CAAC,CAAC,SAAS,MAAY;GAE7D,AADAmB,EAAUC,CAAO,GACjBI,EAAe,QAAQJ,CAAO;EAChC,CAAC;CACH;CAiBA,OAfAO,EAAM,QAAQ,GACd,IAAI,kBAAkB,MAAc;EAClC,KAAK,IAAMC,KAAYC,GACrB,EAAS,WAAW,SAAS,MAAS;GACpC,AAAMC,aAAgB,gBAClBA,EAAK,QAAQ9B,CAAK,MACpBmB,EAAUW,CAAI,GACdN,EAAe,QAAQM,CAAI,IAE7BH,EAAMG,CAAI;EACZ,CAAC;CAEL,CAAC,CAAC,CAAC,QAAQ,SAAS,MAAM;EAAE,WAAW;EAAM,SAAS;CAAK,CAAC,GAE5D,SAAS,gBAAgB,aAAa,yBAAyB,EAAE,GAC1D;AACT"}

package/dist/glass/enableGlassRefraction.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 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";