@jonmilner/ui 0.0.0-stage → 0.1.1

package/dist/Tabs/index.mjs

@@ -0,0 +1,88 @@
+import { join as e } from "../styles/join.mjs";
+import { splitStyleProps as t } from "../styles/split-style-props.mjs";
+import { Box as n } from "../Box/index.mjs";
+import { Clickable as r } from "../Clickable/index.mjs";
+import { Text as i } from "../Text/index.mjs";
+import { indicator as a, list as o, panel as s, tab as c } from "./Tabs.css.mjs";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Tabs as d } from "@base-ui/react/tabs";
+//#region src/Tabs/index.tsx
+function f({ orientation: e = "horizontal", display: r = "flex", flexDirection: i = e === "vertical" ? "row" : "column", flexWrap: a = e === "vertical" ? "wrap" : "nowrap", gap: o = "16", className: s, style: c, ...u }) {
+	let [f, p] = t(u);
+	return /* @__PURE__ */ l(d.Root, {
+		...p,
+		orientation: e,
+		render: /* @__PURE__ */ l(n, {
+			display: r,
+			flexDirection: i,
+			flexWrap: a,
+			gap: o,
+			...f,
+			className: s,
+			style: c
+		})
+	});
+}
+function p({ display: r = "flex", flexWrap: i = "wrap", gap: a = "4", position: s = "relative", className: c, style: u, ...f }) {
+	let [p, m] = t(f);
+	return /* @__PURE__ */ l(d.List, {
+		...m,
+		render: /* @__PURE__ */ l(n, {
+			display: r,
+			flexWrap: i,
+			gap: a,
+			position: s,
+			...p,
+			className: e(o, c),
+			style: u
+		})
+	});
+}
+function m({ children: o, size: s = "sm", font: f = "label", weight: p = "medium", leading: m, paddingInline: h = "12", justifyContent: g = "start", minBlockSize: _ = "med", position: v = "relative", color: y = "fgMuted", className: b, style: x, ...S }) {
+	let [C, w] = t(S);
+	return /* @__PURE__ */ u(d.Tab, {
+		...w,
+		render: /* @__PURE__ */ l(r, {
+			color: y,
+			justifyContent: g,
+			minBlockSize: _,
+			paddingInline: h,
+			position: v,
+			...C,
+			className: e(c, b),
+			style: x
+		}),
+		children: [/* @__PURE__ */ l(i, {
+			as: "span",
+			size: s,
+			font: f,
+			weight: p,
+			leading: m,
+			children: o
+		}), /* @__PURE__ */ l(n, {
+			"aria-hidden": !0,
+			as: "span",
+			className: a,
+			position: "absolute"
+		})]
+	});
+}
+function h({ flexGrow: r = 1, className: i, style: a, ...o }) {
+	let [c, u] = t(o);
+	return /* @__PURE__ */ l(d.Panel, {
+		...u,
+		render: /* @__PURE__ */ l(n, {
+			flexGrow: r,
+			...c,
+			className: e(s, i),
+			style: a
+		})
+	});
+}
+var g = Object.assign(f, {
+	List: p,
+	Tab: m,
+	Panel: h
+});
+//#endregion
+export { g as Tabs };

package/dist/Tag/Tag.css

@@ -0,0 +1,2 @@
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
+@layer components.tag{._1jsyd8s0{border-width:var(--space-1);border-style:solid;border-color:#0000}._1jsyd8s1{overflow-wrap:anywhere}._1jsyd8s0:hover ._1jsyd8s1,._1jsyd8s0:focus-within ._1jsyd8s1{white-space:normal;text-overflow:clip;padding-block:var(--space-4);margin-block:0}._1jsyd8s2{text-decoration:underline}._1jsyd8s3:hover{background-color:var(--color-bg)}@media (forced-colors:active){._1jsyd8s0{color:canvastext;background-color:canvas;border-color:canvastext}}}

package/dist/Tag/Tag.css.mjs

@@ -0,0 +1,17 @@
+import "../styles/layers.css";
+import "./Tag.css";
+/* empty css                               */
+/* empty css                    */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/Tag/Tag.css.ts
+var t = "_1jsyd8s0", n = "_1jsyd8s1", r = "_1jsyd8s2", i = "_1jsyd8s3", a = e({
+	defaultClassName: "_1jsyd8s4",
+	variantClassNames: { size: {
+		sm: "_1jsyd8s5",
+		med: "_1jsyd8s6"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+//#endregion
+export { n as label, r as link, i as remove, t as root, a as tag };

package/dist/Tag/index.d.mts

@@ -0,0 +1,13 @@
+import { OmitEach } from "../types.mjs";
+import { StyleProps } from "../Box/index.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/Tag/index.d.ts
+export type TagOwnProps = {
+  href?: string;
+  onRemove?: () => void;
+  removeLabel?: string;
+  size?: "sm" | "med";
+};
+export type TagProps = StyleProps & TagOwnProps & OmitEach<ComponentPropsWithRef<"span">, keyof StyleProps | keyof TagOwnProps>;
+export declare function Tag({ size, href, onRemove, removeLabel, display, alignItems, gap, minBlockSize, paddingInlineStart, paddingInlineEnd, borderRadius, backgroundColor, color, maxInlineSize, className, style, children, ...props }: TagProps): import("react").JSX.Element | null;
+//#endregion

package/dist/Tag/index.mjs

@@ -0,0 +1,82 @@
+import { join as e } from "../styles/join.mjs";
+import { Box as t } from "../Box/index.mjs";
+import { Clickable as n } from "../Clickable/index.mjs";
+import { Text as r } from "../Text/index.mjs";
+import { XIcon as i } from "../icons/XIcon.mjs";
+import { size as a } from "../tokens/scales.mjs";
+import { label as o, link as s, root as c, tag as l } from "./Tag.css.mjs";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/Tag/index.tsx
+function f(e) {
+	if (typeof e == "string" || typeof e == "number") return String(e);
+	if (!Array.isArray(e)) return;
+	let t = e.map(f);
+	return t.every((e) => e !== void 0) ? t.join("") : void 0;
+}
+var p = /* @__PURE__ */ new Set([...Object.keys(a), "full"]), m = /* @__PURE__ */ new Set([
+	"",
+	"none",
+	"auto",
+	"initial",
+	"unset"
+]);
+function h(e, t) {
+	let n = t?.maxInlineSize ?? t?.maxWidth;
+	return n == null ? typeof e != "object" || !e ? p.has(e) : e.base != null && Object.values(e).every((e) => e == null || p.has(e)) : !m.has(String(n).trim()) && !/-content\b/.test(String(n));
+}
+var g = {
+	sm: {
+		paddingInlineStart: "6",
+		paddingInlineEnd: "6"
+	},
+	med: {
+		paddingInlineStart: "8",
+		paddingInlineEnd: "8"
+	}
+};
+function _({ size: a = "med", href: p, onRemove: m, removeLabel: _, display: v = "inline-flex", alignItems: y = "center", gap: b = "2", minBlockSize: x = "xs", paddingInlineStart: S = g[a].paddingInlineStart, paddingInlineEnd: C = m ? "2" : g[a].paddingInlineEnd, borderRadius: w = "lg", backgroundColor: T = "bgMuted", color: E = "fg", maxInlineSize: D, className: O, style: k, children: A, ...j }) {
+	if (A == null || typeof A == "boolean" || A === "" || f(A) === "") return null;
+	let M = h(D, k), N = /* @__PURE__ */ u(r, {
+		as: "span",
+		className: o,
+		font: "label",
+		paddingBlock: M ? void 0 : "4",
+		size: a,
+		truncate: M,
+		weight: "medium",
+		children: A
+	}), P = f(A), F = _ ?? (P === void 0 ? void 0 : `Remove ${P}`);
+	return /* @__PURE__ */ d(t, {
+		...j,
+		alignItems: y,
+		as: "span",
+		backgroundColor: T,
+		borderRadius: w,
+		className: e(c, l({ size: a }), O),
+		color: E,
+		display: v,
+		gap: b,
+		maxInlineSize: D,
+		minBlockSize: x,
+		paddingInlineEnd: C,
+		paddingInlineStart: S,
+		style: k,
+		children: [p ? /* @__PURE__ */ u(n, {
+			as: "a",
+			className: s,
+			href: p,
+			overflow: "hidden",
+			children: N
+		}) : N, m && /* @__PURE__ */ u(n, {
+			alignSelf: "start",
+			"aria-label": F ?? "Remove",
+			borderRadius: "full",
+			className: "_1jsyd8s3",
+			flexShrink: 0,
+			onClick: m,
+			children: /* @__PURE__ */ u(i, { size: a })
+		})]
+	});
+}
+//#endregion
+export { _ as Tag };

package/dist/Text/Text.css

@@ -0,0 +1,2 @@
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
+@layer components.text{._1mgdisq3{--_1mgdisq0:var(--line-height-med);--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body);font-size:var(--font-size-med);font-weight:var(--font-weight-regular);line-height:var(--_1mgdisq0)}._1mgdisq3:before{content:"";margin-block-end:var(--_1mgdisq1);display:table}._1mgdisq3:after{content:"";margin-block-start:var(--_1mgdisq2);display:table}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var){--_1mgdisq0:inherit;--_1mgdisq1:inherit;--_1mgdisq2:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;display:inline}:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):before,:where(._1mgdisq3)>._1mgdisq3:where(a,abbr,b,bdi,bdo,cite,code,data,del,dfn,em,i,ins,kbd,label,mark,output,q,s,samp,small,span,strong,sub,sup,time,u,var):after{content:none}._1mgdisq4{--_1mgdisq1:calc((var(--font-trim-body-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-body-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-body)}._1mgdisq5{--_1mgdisq1:calc((var(--font-trim-heading-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-heading-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-heading)}._1mgdisq6{--_1mgdisq1:calc((var(--font-trim-display-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-display-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-display)}._1mgdisq7{--_1mgdisq1:calc((var(--font-trim-label-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-label-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-label)}._1mgdisq8{--_1mgdisq1:calc((var(--font-trim-mono-cap) - var(--_1mgdisq0) / 2) * 1em);--_1mgdisq2:calc((var(--font-trim-mono-baseline) - var(--_1mgdisq0) / 2) * 1em);font-family:var(--font-mono)}._1mgdisq9{font-size:var(--font-size-xs)}._1mgdisqa{font-size:var(--font-size-sm)}._1mgdisqb{font-size:var(--font-size-med)}._1mgdisqc{font-size:var(--font-size-lg)}._1mgdisqd{font-size:var(--font-size-xl)}._1mgdisqe{font-size:var(--font-size-2xl)}._1mgdisqf{font-size:var(--font-size-3xl)}._1mgdisqg{font-size:var(--font-size-4xl)}._1mgdisqh{font-weight:var(--font-weight-regular)}._1mgdisqi{font-weight:var(--font-weight-medium)}._1mgdisqj{font-weight:var(--font-weight-semibold)}._1mgdisqk{font-weight:var(--font-weight-bold)}._1mgdisql{--_1mgdisq0:var(--line-height-sm);line-height:var(--_1mgdisq0)}._1mgdisqm{--_1mgdisq0:var(--line-height-med);line-height:var(--_1mgdisq0)}._1mgdisqn{--_1mgdisq0:var(--line-height-lg);line-height:var(--_1mgdisq0)}._1mgdisqo{text-overflow:ellipsis;white-space:nowrap;margin-block-start:var(--_1mgdisq1);margin-block-end:var(--_1mgdisq2);padding-block-start:calc(-1 * var(--_1mgdisq1));padding-block-end:calc(-1 * var(--_1mgdisq2))}}

package/dist/Text/Text.css.mjs

@@ -0,0 +1,32 @@
+import "../styles/layers.css";
+import "./Text.css";
+/* empty css                               */
+/* empty css                     */
+//#region src/Text/Text.css.ts
+var e = "_1mgdisq3", t = {
+	body: "_1mgdisq4",
+	heading: "_1mgdisq5",
+	display: "_1mgdisq6",
+	label: "_1mgdisq7",
+	mono: "_1mgdisq8"
+}, n = {
+	xs: "_1mgdisq9",
+	sm: "_1mgdisqa",
+	med: "_1mgdisqb",
+	lg: "_1mgdisqc",
+	xl: "_1mgdisqd",
+	"2xl": "_1mgdisqe",
+	"3xl": "_1mgdisqf",
+	"4xl": "_1mgdisqg"
+}, r = {
+	regular: "_1mgdisqh",
+	medium: "_1mgdisqi",
+	semibold: "_1mgdisqj",
+	bold: "_1mgdisqk"
+}, i = {
+	sm: "_1mgdisql",
+	med: "_1mgdisqm",
+	lg: "_1mgdisqn"
+}, a = "_1mgdisqo";
+//#endregion
+export { t as font, i as leading, e as root, n as size, a as truncate, r as weight };

package/dist/Text/index.d.mts

@@ -0,0 +1,16 @@
+import { PolymorphicProps } from "../types.mjs";
+import { StyleProps } from "../Box/index.mjs";
+import { tokens } from "../tokens/scales.mjs";
+import { FontRole } from "../tokens/roles.mjs";
+import { ElementType } from "react";
+//#region src/Text/index.d.ts
+export type TextOwnProps = {
+  font?: FontRole;
+  leading?: keyof typeof tokens.lineHeight;
+  size?: keyof typeof tokens.fontSize;
+  truncate?: boolean;
+  weight?: keyof typeof tokens.fontWeight;
+};
+export type TextProps<T extends ElementType = "p"> = PolymorphicProps<T, StyleProps & TextOwnProps>;
+export declare function Text<T extends ElementType = "p">({ as, size, font, weight, leading, truncate, display, overflow, className, ...props }: TextProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/Text/index.mjs

@@ -0,0 +1,25 @@
+import { join as e } from "../styles/join.mjs";
+import { Box as t } from "../Box/index.mjs";
+import { font as n, leading as r, root as i, size as a, weight as o } from "./Text.css.mjs";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/Text/index.tsx
+function c({ as: c, size: l, font: u, weight: d, leading: f, truncate: p, display: m = "block", overflow: h = p ? "hidden" : void 0, className: g, ..._ }) {
+	let v = [
+		i,
+		u && n[u],
+		l && a[l],
+		d && o[d],
+		f && r[f],
+		p && "_1mgdisqo",
+		g
+	];
+	return /* @__PURE__ */ s(t, {
+		as: c ?? "p",
+		display: m,
+		overflow: h,
+		..._,
+		className: e(...v)
+	});
+}
+//#endregion
+export { c as Text };

package/dist/Toast/Toast.css

@@ -0,0 +1,2 @@
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
+@layer components.toast{.hcnvsc1{inline-size:min(100% - 2 * var(--space-16), 6 * var(--space-64));inset-block-end:var(--space-16);inset-inline-end:var(--space-16);container:hcnvsc0/inline-size}.hcnvsc1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc2{gap:var(--space-8);margin:calc(-1 * var(--space-16));padding:var(--space-16);overscroll-behavior:contain;flex-direction:column;max-block-size:100dvh;margin-inline-start:calc(-1 * var(--space-24));padding-inline-start:var(--space-24);display:flex;overflow:hidden auto}.hcnvsc2:empty{padding:0}.hcnvsc2:has([data-swiping],[data-swipe-direction=down]){overflow-y:hidden}.hcnvsc3{border:var(--space-1) solid var(--color-border);transform:translate(var(--toast-swipe-movement-x,0), var(--toast-swipe-movement-y,0));transition:opacity var(--duration-med) var(--easing-standard), translate var(--duration-med) var(--easing-enter), transform var(--duration-med) var(--easing-enter)}.hcnvsc3:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.hcnvsc3[data-starting-style],.hcnvsc3[data-ending-style]{opacity:0;translate:0 var(--distance-med)}.hcnvsc3[data-swiping]{transition:none}.hcnvsc3[data-limited]{display:none}.hcnvsc4{overflow-wrap:anywhere}.hcnvsca{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden}@container hcnvsc0 (inline-size<16rem){.hcnvsc3{flex-wrap:wrap}.hcnvsc4{flex-basis:100%;order:1}.hcnvsc5{margin-inline-start:auto}}}

package/dist/Toast/Toast.css.mjs

@@ -0,0 +1,18 @@
+import "../styles/layers.css";
+import "./Toast.css";
+/* empty css                               */
+/* empty css                      */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/Toast/Toast.css.ts
+var t = "hcnvsc1", n = "hcnvsc2", r = "hcnvsc3", i = "hcnvsc4", a = "hcnvsc5", o = e({
+	defaultClassName: "hcnvsc6",
+	variantClassNames: { variant: {
+		info: "hcnvsc7",
+		success: "hcnvsc8",
+		error: "hcnvsc9"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+}), s = "hcnvsca";
+//#endregion
+export { s as announcer, a as close, i as content, n as list, r as root, o as toast, t as viewport };

package/dist/Toast/client.d.mts

@@ -0,0 +1,46 @@
+import { CircleAlertIcon } from "../icons/CircleAlertIcon.mjs";
+import { CircleCheckIcon } from "../icons/CircleCheckIcon.mjs";
+import { InfoIcon } from "../icons/InfoIcon.mjs";
+import { CSSProperties, ReactNode } from "react";
+import "@base-ui/react/toast";
+//#region src/Toast/client.d.ts
+export type ToastVariant = keyof typeof icons;
+export type ToastOptions = {
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  description?: string;
+  duration?: number;
+  title: string;
+  variant?: ToastVariant;
+};
+export type ToastProviderProps = {
+  children?: ReactNode;
+  className?: string;
+  closeLabel?: string;
+  limit?: number;
+  regionLabel?: string;
+  style?: CSSProperties;
+};
+declare const icons: {
+  readonly info: {
+    readonly Icon: typeof InfoIcon;
+    readonly color: "fgMuted";
+  };
+  readonly success: {
+    readonly Icon: typeof CircleCheckIcon;
+    readonly color: "accent";
+  };
+  readonly error: {
+    readonly Icon: typeof CircleAlertIcon;
+    readonly color: "danger";
+  };
+};
+declare function ToastProvider({ limit, closeLabel, regionLabel, className, style, children }: ToastProviderProps): import("react").JSX.Element;
+export declare function useToast(): {
+  add: ({ title, description, variant, duration, action }: ToastOptions) => string;
+  close: (id: string) => void;
+};
+//#endregion
+export { ToastProvider };

package/dist/Toast/client.mjs

@@ -0,0 +1,219 @@
+"use client";
+import { join as e } from "../styles/join.mjs";
+import { Box as t } from "../Box/index.mjs";
+import { Clickable as n } from "../Clickable/index.mjs";
+import { Text as r } from "../Text/index.mjs";
+import { Button as i } from "../Button/index.mjs";
+import { useThemeContainer as a } from "../theme/use-theme-container.mjs";
+import { CircleAlertIcon as o } from "../icons/CircleAlertIcon.mjs";
+import { XIcon as s } from "../icons/XIcon.mjs";
+import { CircleCheckIcon as c } from "../icons/CircleCheckIcon.mjs";
+import { InfoIcon as l } from "../icons/InfoIcon.mjs";
+import { announcer as u, close as d, content as f, list as p, root as m, toast as h, viewport as g } from "./Toast.css.mjs";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { createContext as y, use as b, useCallback as x, useMemo as S, useRef as C, useState as w } from "react";
+import { Toast as T } from "@base-ui/react/toast";
+//#region src/Toast/client.tsx
+var E = {
+	info: {
+		Icon: l,
+		color: "fgMuted"
+	},
+	success: {
+		Icon: c,
+		color: "accent"
+	},
+	error: {
+		Icon: o,
+		color: "danger"
+	}
+}, D = y(null), O = y(null), k = (e) => e !== void 0 && Object.hasOwn(E, e);
+function A({ limit: e = 3, closeLabel: n = "Dismiss", regionLabel: r = "Notifications", className: i, style: o, children: s }) {
+	let { container: c, ref: l } = a(), [u] = w(T.createToastManager);
+	return /* @__PURE__ */ _(T.Provider, {
+		limit: e,
+		toastManager: u,
+		children: /* @__PURE__ */ v(D, {
+			value: u,
+			children: [
+				/* @__PURE__ */ _(t, {
+					as: "span",
+					hidden: !0,
+					ref: l
+				}),
+				s,
+				/* @__PURE__ */ _(M, {}),
+				/* @__PURE__ */ _(T.Portal, {
+					container: c,
+					children: /* @__PURE__ */ _(j, {
+						className: i,
+						regionLabel: r,
+						style: o,
+						children: /* @__PURE__ */ _(N, { closeLabel: n })
+					})
+				})
+			]
+		})
+	});
+}
+function j({ regionLabel: n, className: r, style: i, children: a }) {
+	let o = C(null);
+	return /* @__PURE__ */ _(T.Viewport, {
+		"aria-atomic": void 0,
+		"aria-label": n,
+		"aria-live": "off",
+		"aria-relevant": void 0,
+		onFocus: (e) => {
+			let t = e.relatedTarget;
+			t && !e.currentTarget.contains(t) && (o.current = t);
+		},
+		render: /* @__PURE__ */ _(t, {
+			className: e(g, r),
+			position: "fixed",
+			style: i,
+			zIndex: "toast"
+		}),
+		children: /* @__PURE__ */ _("div", {
+			className: p,
+			children: /* @__PURE__ */ _(O, {
+				value: o,
+				children: a
+			})
+		})
+	});
+}
+function M() {
+	let { toasts: e } = T.useToastManager(), t = (t) => e.filter((e) => e.type === "error" === t).map((e) => /* @__PURE__ */ v("div", { children: [
+		e.title,
+		" ",
+		e.description
+	] }, e.id));
+	return /* @__PURE__ */ v("div", {
+		className: u,
+		children: [/* @__PURE__ */ _("div", {
+			"aria-atomic": !1,
+			"aria-live": "polite",
+			role: "status",
+			children: t(!1)
+		}), /* @__PURE__ */ _("div", {
+			"aria-atomic": !1,
+			"aria-live": "assertive",
+			role: "alert",
+			children: t(!0)
+		})]
+	});
+}
+function N({ closeLabel: e }) {
+	let { toasts: t } = T.useToastManager();
+	return t.map((t) => /* @__PURE__ */ _(P, {
+		closeLabel: e,
+		toast: t
+	}, t.id));
+}
+function P({ toast: a, closeLabel: o }) {
+	let c = k(a.type) ? a.type : "info", { Icon: l, color: u } = E[c], p = b(D), g = b(O), [y, S] = w(!1), C = x((e) => {
+		e && S(getComputedStyle(e).direction === "rtl");
+	}, []);
+	return /* @__PURE__ */ v(T.Root, {
+		"aria-modal": void 0,
+		ref: C,
+		render: /* @__PURE__ */ _(t, {
+			alignItems: "start",
+			backgroundColor: "bgRaised",
+			borderRadius: "med",
+			boxShadow: "lg",
+			className: e(m, h({ variant: c })),
+			display: "flex",
+			gap: "12",
+			padding: "12"
+		}),
+		role: "group",
+		swipeDirection: ["down", y ? "left" : "right"],
+		toast: a,
+		children: [
+			/* @__PURE__ */ _(t, {
+				display: "flex",
+				flexShrink: 0,
+				paddingBlock: "2",
+				children: /* @__PURE__ */ _(l, { color: u })
+			}),
+			/* @__PURE__ */ v(t, {
+				alignItems: "start",
+				className: f,
+				display: "flex",
+				flexDirection: "column",
+				flexGrow: 1,
+				gap: "8",
+				children: [
+					/* @__PURE__ */ _(T.Title, { render: /* @__PURE__ */ _(r, {
+						as: "div",
+						weight: "medium"
+					}) }),
+					/* @__PURE__ */ _(T.Description, { render: /* @__PURE__ */ _(r, {
+						as: "div",
+						color: "fgMuted",
+						size: "sm"
+					}) }),
+					/* @__PURE__ */ _(T.Action, { render: /* @__PURE__ */ _(i, {
+						size: "sm",
+						variant: "secondary"
+					}) })
+				]
+			}),
+			/* @__PURE__ */ _(T.Close, {
+				"aria-hidden": !1,
+				"aria-label": o,
+				onClick: (e) => {
+					if (e.detail !== 0 || !p) return;
+					let t = a.ref?.current, n = (t && F(t)) ?? g?.current;
+					n instanceof HTMLElement && (e.preventBaseUIHandler(), p.close(a.id), requestAnimationFrame(() => {
+						n.isConnected && n.focus();
+					}));
+				},
+				render: /* @__PURE__ */ _(n, {
+					borderRadius: "sm",
+					className: d,
+					flexShrink: 0,
+					padding: "4"
+				}),
+				children: /* @__PURE__ */ _(s, {})
+			})
+		]
+	});
+}
+function F(e) {
+	let t = (e, n) => !e || !e.matches("[data-ending-style]") ? e : t(n ? e.nextElementSibling : e.previousElementSibling, n);
+	return (t(e.nextElementSibling, !0) ?? t(e.previousElementSibling, !1))?.querySelector(`.${d}`);
+}
+function I() {
+	let e = b(D);
+	if (!e) throw Error("useToast must be called under Toast.Provider.");
+	return S(() => {
+		let t = (t) => e.close(t);
+		return {
+			add: ({ title: n, description: r, variant: i = "info", duration: a = i === "error" ? 0 : 5e3, action: o }) => {
+				let s = e.add({
+					title: n,
+					description: r,
+					type: i,
+					timeout: a,
+					priority: "low",
+					actionProps: o && {
+						children: o.label,
+						onClick: () => {
+							try {
+								o.onClick();
+							} finally {
+								t(s);
+							}
+						}
+					}
+				});
+				return s;
+			},
+			close: t
+		};
+	}, [e]);
+}
+//#endregion
+export { M as ToastAnnouncer, P as ToastItem, A as ToastProvider, j as ToastStack, I as useToast };

package/dist/Toast/index.d.mts

@@ -0,0 +1,7 @@
+import { ToastOptions, ToastProvider, ToastProviderProps, ToastVariant, useToast } from "./client.mjs";
+//#region src/Toast/index.d.ts
+export declare const Toast: {
+  Provider: typeof ToastProvider;
+};
+//#endregion
+export { type ToastOptions, type ToastProviderProps, type ToastVariant, useToast };

package/dist/Toast/index.mjs

@@ -0,0 +1,5 @@
+import { ToastProvider as e, useToast as t } from "./client.mjs";
+//#region src/Toast/index.tsx
+var n = { Provider: e };
+//#endregion
+export { n as Toast, t as useToast };

package/dist/base.css

@@ -0,0 +1,6 @@
+@layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
+@layer tokens{:root{--space-0:0rem;--space-1:.0625rem;--space-2:.125rem;--space-4:.25rem;--space-6:.375rem;--space-8:.5rem;--space-12:.75rem;--space-16:1rem;--space-20:1.25rem;--space-24:1.5rem;--space-32:2rem;--space-40:2.5rem;--space-48:3rem;--space-64:4rem;--space-80:5rem;--space-96:6rem;--size-xs:1.5rem;--size-sm:2rem;--size-med:2.5rem;--size-lg:3rem;--size-xl:3.5rem;--container-prose:40rem;--container-page:64rem;--container-wide:80rem;--radius-none:0;--radius-sm:.25rem;--radius-med:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-med:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-sm:1.25;--line-height-med:1.5;--line-height-lg:1.75;--z-index-base:0;--z-index-raised:1;--z-index-dropdown:1000;--z-index-sticky:1100;--z-index-overlay:1200;--z-index-modal:1300;--z-index-popover:1400;--z-index-toast:1500;--z-index-tooltip:1600;--duration-fast:.12s;--duration-med:.2s;--duration-slow:.32s;--easing-standard:cubic-bezier(.2, 0, 0, 1);--easing-enter:cubic-bezier(0, 0, 0, 1);--easing-exit:cubic-bezier(.3, 0, 1, 1);--distance-sm:.25rem;--distance-med:.5rem;--distance-lg:1rem;--scale-sm:.02;--scale-med:.05;--scale-lg:.1}[data-brand]{--shadow-sm:0 1px 2px color-mix(in srgb, var(--color-shadow) 12%, transparent);--shadow-med:0 2px 8px color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 8%, transparent);--shadow-lg:0 8px 24px color-mix(in srgb, var(--color-shadow) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 8%, transparent)}[data-brand][data-mode=light]{color-scheme:light}[data-brand][data-mode=dark]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent);color-scheme:dark}[data-brand][data-mode=system]{color-scheme:light dark}:dir(ltr){--dir:1}:dir(rtl){--dir:-1}@media (prefers-color-scheme:dark){[data-brand][data-mode=system]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent)}}@media (prefers-reduced-motion:reduce){:root{--distance-sm:0rem;--distance-med:0rem;--distance-lg:0rem;--scale-sm:0;--scale-med:0;--scale-lg:0;--duration-fast:.12s;--duration-med:.12s;--duration-slow:.12s}}}
+
+@font-face{src:local(Arial),local(ArialMT);size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback}@font-face{src:local(Courier New),local(CourierNewPSMT);size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback}@layer tokens{[data-brand=default]{--color-bg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-bg-muted:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-bg-raised:light-dark(oklch(100% 0 0),oklch(20.5% .008 265));--color-fg:light-dark(oklch(14.5% .006 265),oklch(98.5% .002 265));--color-fg-muted:light-dark(oklch(44.5% .014 265),oklch(71% .012 265));--color-border:light-dark(oklch(92.5% .006 265),oklch(27% .01 265));--color-border-strong:oklch(55.5% .014 265);--color-accent:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-accent-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-danger:light-dark(oklch(56% .2 25),oklch(70.4% .17 25));--color-danger-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-focus:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-shadow:light-dark(oklch(14.5% .006 265),oklch(0% 0 0));--font-body:"Inter", "Inter Fallback", sans-serif;--font-heading:"Inter", "Inter Fallback", sans-serif;--font-display:"Inter", "Inter Fallback", sans-serif;--font-label:"Inter", "Inter Fallback", sans-serif;--font-mono:"JetBrains Mono", "JetBrains Mono Fallback", monospace;--font-trim-body-cap:.36377;--font-trim-body-baseline:.36377;--font-trim-heading-cap:.36377;--font-trim-heading-baseline:.36377;--font-trim-display-cap:.36377;--font-trim-display-baseline:.36377;--font-trim-label-cap:.36377;--font-trim-label-baseline:.36377;--font-trim-mono-cap:.37;--font-trim-mono-baseline:.36}@media (forced-colors:active){[data-brand][data-brand]{--color-bg:Canvas;--color-bg-muted:Canvas;--color-bg-raised:Canvas;--color-fg:CanvasText;--color-fg-muted:CanvasText;--color-border:CanvasText;--color-border-strong:CanvasText;--color-accent:LinkText;--color-accent-fg:Canvas;--color-danger:CanvasText;--color-danger-fg:Canvas;--color-focus:Highlight;--color-shadow:CanvasText}}}
+
+@layer reset{*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-block-size:100dvb;line-height:1.5}img,picture,video,canvas,svg{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{text-wrap:balance}}

package/dist/brands/brand.d.mts

@@ -0,0 +1,9 @@
+import { ColorRole, FontRole } from "../tokens/roles.mjs";
+import { BrandFont } from "./font.mjs";
+//#region src/brands/brand.d.ts
+export interface Brand {
+  readonly name: string;
+  readonly color: Readonly<Record<ColorRole, string>>;
+  readonly font: Readonly<Record<FontRole, BrandFont>>;
+}
+//#endregion

package/dist/brands/brand.mjs

@@ -0,0 +1,4 @@
+//#region src/brands/brand.ts
+var e = (e, t) => `light-dark(${e}, ${t})`;
+//#endregion
+export { e as lightDark };

package/dist/brands/check-fonts.mjs

@@ -0,0 +1,15 @@
+//#region src/brands/check-fonts.ts
+var e = /* @__PURE__ */ new Set();
+async function t(t, n = 5e3) {
+	if (process.env.NODE_ENV === "production" || typeof document > "u") return;
+	await new Promise((e) => setTimeout(e, n)), await document.fonts.ready;
+	let r = [...document.fonts];
+	for (let n of Object.values(t.font)) {
+		let t = n.metrics.familyName;
+		if (e.has(t)) continue;
+		let i = r.filter((e) => e.family.replace(/^["']|["']$/g, "").toLowerCase() === t.toLowerCase()), a = i.length === 0 ? "has no @font-face" : i.some((e) => e.status === "error") ? "has a face that failed to load" : void 0;
+		a && (e.add(t), console.warn(`@jonmilner/ui: font "${t}" ${a}, so text uses its fallback. Load the font files for this brand (see the brand docs).`));
+	}
+}
+//#endregion
+export { t as checkFonts };

package/dist/brands/default.d.mts

@@ -0,0 +1,4 @@
+import { Brand } from "./brand.mjs";
+//#region src/brands/default.d.ts
+export declare const defaultBrand: Brand;
+//#endregion