@imfusion/web-ui 0.11.1-dev.7.gf073da2b → 0.11.1-dev.72.g7dc184e8

package/src/llms/skills/imf-web-ui-ux/references/forms.md

@@ -1,7 +1,8 @@
 # Form UX
 
-Read this before building a form with more than two fields. The library supplies controls; the form library owns state and
-validation. These rules cover structure and feedback.
+Read this before building a form with more than two fields. Build it with TanStack Form, the form library the
+`imf-web-ui-conventions` tooling topic names: it owns state and validation, and Web UI supplies the controls. These rules
+cover structure and feedback.
 
 ## Structure
 

package/src/llms/tokens.gen.json

@@ -253,7 +253,7 @@
       },
       {
         "name": "--imf-ui-color-primary-bg-luma-dark",
-        "value": "0.6"
+        "value": "0.66"
       },
       {
         "name": "--imf-ui-color-primary-bg-luma-light",
@@ -265,7 +265,7 @@
       },
       {
         "name": "--imf-ui-color-primary-fg-luma-dark",
-        "value": "0.8"
+        "value": "0.72"
       },
       {
         "name": "--imf-ui-color-primary-fg-luma-light",
@@ -462,6 +462,24 @@
         "value": "cubic-bezier(0, 0, 0.05, 1)"
       }
     ],
+    "focus": [
+      {
+        "name": "--imf-ui-focus-ring-color",
+        "value": "var(--imf-ui-color-fg-primary)"
+      },
+      {
+        "name": "--imf-ui-focus-ring-offset",
+        "value": "2px"
+      },
+      {
+        "name": "--imf-ui-focus-ring-offset-inset",
+        "value": "calc(var(--imf-ui-focus-ring-width) * -1)"
+      },
+      {
+        "name": "--imf-ui-focus-ring-width",
+        "value": "var(--imf-ui-border-size-2)"
+      }
+    ],
     "font": [
       {
         "name": "--imf-ui-font-family-body",
@@ -955,5 +973,5 @@
       }
     ]
   },
-  "count": 233
+  "count": 237
 }

package/dist/tabs-DsDSCA--.js

@@ -1,376 +0,0 @@
-import { n as e, r as t, t as n } from "./resolve-state-props-DQf9WiGv.js";
-import { _M as r, mh as i } from "./icons-vc1WZCxX.js";
-import { t as a } from "./meta-V_KyLeGn.js";
-import { cva as o } from "class-variance-authority";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Children as l, createContext as u, useCallback as d, useContext as f } from "react";
-import { Toggle as p } from "@base-ui/react/toggle";
-import { ToggleGroup as ee } from "@base-ui/react/toggle-group";
-import { Switch as m } from "@base-ui/react/switch";
-import { Tabs as h } from "@base-ui/react/tabs";
-var g = {
-	flat: "imf-ui-kbd-module-flat",
-	icon: "imf-ui-kbd-module-icon",
-	primary: "imf-ui-kbd-module-primary",
-	root: "imf-ui-kbd-module-root"
-}, _ = o(g.root, { variants: { variant: {
-	default: null,
-	primary: g.primary,
-	flat: g.flat
-} } });
-function v({ variant: e = "default", icon: t = !1, children: n, ...a }) {
-	return /* @__PURE__ */ c("kbd", {
-		...a,
-		"data-imf-ui-component": "Kbd",
-		className: _({
-			variant: e,
-			className: a.className
-		}),
-		children: [t && /* @__PURE__ */ s(r, {
-			glyph: i,
-			strokeWidth: 2,
-			"aria-hidden": !0,
-			className: g.icon
-		}), n]
-	});
-}
-//#endregion
-//#region src/components/kbd/kbd.meta.ts
-var te = {
-	name: "Kbd",
-	category: a.display,
-	status: "experimental",
-	description: "Shows a keyboard key or shortcut, such as the letter that activates a button. Also called a key hint; Button and Toggle render it through their `shortcut` prop.",
-	origin: "native",
-	internalDependencies: ["Icon"]
-}, y = {
-	ctrl: "Control",
-	control: "Control",
-	cmd: "Meta",
-	"⌘": "Meta",
-	meta: "Meta",
-	opt: "Alt",
-	option: "Alt",
-	"⌥": "Alt",
-	alt: "Alt",
-	shift: "Shift",
-	"⇧": "Shift",
-	esc: "Escape",
-	escape: "Escape"
-};
-function b(e) {
-	let t = e.trim().split(/\s+/).filter(Boolean);
-	if (t.length !== 0) return t.map((e) => y[e.toLowerCase()] ?? (e.length === 1 ? e.toUpperCase() : e)).join("+");
-}
-//#endregion
-//#region src/components/toggle-group/toggle-group-size.ts
-var x = u("md"), S = {
-	root: "imf-ui-toggle-module-root",
-	shortcut: "imf-ui-toggle-module-shortcut",
-	sizeSm: "imf-ui-toggle-module-sizeSm"
-}, C = o(S.root, { variants: { size: {
-	sm: S.sizeSm,
-	md: null
-} } }), w = 2;
-function T(e) {
-	let t = 0;
-	return l.forEach(e, (e) => {
-		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += w);
-	}), t;
-}
-function ne({ style: t, shortcut: r, size: i, children: a, ...o }) {
-	let l = f(x), u = {
-		"--glyph-count": T(a),
-		"--max-glyphs": w
-	};
-	return /* @__PURE__ */ c(p, {
-		"aria-keyshortcuts": r ? b(r) : void 0,
-		...o,
-		"data-imf-ui-component": "Toggle",
-		style: (n) => ({
-			...u,
-			...e(t, n)
-		}),
-		className: (e) => C({
-			size: i ?? l,
-			className: n(o.className, e)
-		}),
-		children: [a, r && /* @__PURE__ */ s(v, {
-			variant: "flat",
-			className: S.shortcut,
-			"aria-hidden": !0,
-			children: r
-		})]
-	});
-}
-var E = {
-	root: "imf-ui-toggle-group-module-root",
-	sizeSm: "imf-ui-toggle-group-module-sizeSm"
-}, re = o(E.root, { variants: { size: {
-	sm: E.sizeSm,
-	md: null
-} } });
-function ie({ size: e = "md", ...t }) {
-	return /* @__PURE__ */ s(x.Provider, {
-		value: e ?? "md",
-		children: /* @__PURE__ */ s(ee, {
-			...t,
-			"data-imf-ui-component": "ToggleGroup",
-			className: (r) => re({
-				size: e,
-				className: n(t.className, r)
-			})
-		})
-	});
-}
-var D = {
-	root: "imf-ui-switch-module-root",
-	thumb: "imf-ui-switch-module-thumb"
-}, ae = /* @__PURE__ */ t({
-	Root: () => A,
-	Thumb: () => j
-}), O = o(D.root), k = o(D.thumb);
-function A(e) {
-	return /* @__PURE__ */ s(m.Root, {
-		...e,
-		"data-imf-ui-component": "Switch.Root",
-		className: (t) => O({ className: n(e.className, t) })
-	});
-}
-A.displayName = "Switch.Root";
-function j(e) {
-	return /* @__PURE__ */ s(m.Thumb, {
-		...e,
-		"data-imf-ui-component": "Switch.Thumb",
-		className: (t) => k({ className: n(e.className, t) })
-	});
-}
-j.displayName = "Switch.Thumb";
-var M = {
-	alignCenter: "imf-ui-row-module-alignCenter",
-	alignEnd: "imf-ui-row-module-alignEnd",
-	alignStart: "imf-ui-row-module-alignStart",
-	alignStretch: "imf-ui-row-module-alignStretch",
-	gap1: "imf-ui-row-module-gap1",
-	gap10: "imf-ui-row-module-gap10",
-	gap2: "imf-ui-row-module-gap2",
-	gap3: "imf-ui-row-module-gap3",
-	gap4: "imf-ui-row-module-gap4",
-	gap5: "imf-ui-row-module-gap5",
-	gap6: "imf-ui-row-module-gap6",
-	gap7: "imf-ui-row-module-gap7",
-	gap8: "imf-ui-row-module-gap8",
-	gap9: "imf-ui-row-module-gap9",
-	justifyAround: "imf-ui-row-module-justifyAround",
-	justifyBetween: "imf-ui-row-module-justifyBetween",
-	justifyCenter: "imf-ui-row-module-justifyCenter",
-	justifyEnd: "imf-ui-row-module-justifyEnd",
-	justifyEvenly: "imf-ui-row-module-justifyEvenly",
-	justifyStart: "imf-ui-row-module-justifyStart",
-	root: "imf-ui-row-module-root",
-	wrap: "imf-ui-row-module-wrap"
-}, N = o(M.root, { variants: {
-	gap: {
-		1: M.gap1,
-		2: M.gap2,
-		3: M.gap3,
-		4: M.gap4,
-		5: M.gap5,
-		6: M.gap6,
-		7: M.gap7,
-		8: M.gap8,
-		9: M.gap9,
-		10: M.gap10
-	},
-	align: {
-		start: M.alignStart,
-		center: M.alignCenter,
-		end: M.alignEnd,
-		stretch: M.alignStretch
-	},
-	justify: {
-		start: M.justifyStart,
-		center: M.justifyCenter,
-		end: M.justifyEnd,
-		between: M.justifyBetween,
-		around: M.justifyAround,
-		evenly: M.justifyEvenly
-	},
-	wrap: {
-		true: M.wrap,
-		false: null
-	}
-} });
-function P({ gap: e = "2", align: t = "stretch", justify: n = "start", wrap: r = !1, ...i }) {
-	return /* @__PURE__ */ s("div", {
-		...i,
-		"data-imf-ui-component": "Row",
-		className: N({
-			gap: e,
-			align: t,
-			justify: n,
-			wrap: r,
-			className: i.className
-		})
-	});
-}
-var F = {
-	alignCenter: "imf-ui-stack-module-alignCenter",
-	alignEnd: "imf-ui-stack-module-alignEnd",
-	alignStart: "imf-ui-stack-module-alignStart",
-	alignStretch: "imf-ui-stack-module-alignStretch",
-	gap0: "imf-ui-stack-module-gap0",
-	gap1: "imf-ui-stack-module-gap1",
-	gap10: "imf-ui-stack-module-gap10",
-	gap2: "imf-ui-stack-module-gap2",
-	gap3: "imf-ui-stack-module-gap3",
-	gap4: "imf-ui-stack-module-gap4",
-	gap5: "imf-ui-stack-module-gap5",
-	gap6: "imf-ui-stack-module-gap6",
-	gap7: "imf-ui-stack-module-gap7",
-	gap8: "imf-ui-stack-module-gap8",
-	gap9: "imf-ui-stack-module-gap9",
-	justifyAround: "imf-ui-stack-module-justifyAround",
-	justifyBetween: "imf-ui-stack-module-justifyBetween",
-	justifyCenter: "imf-ui-stack-module-justifyCenter",
-	justifyEnd: "imf-ui-stack-module-justifyEnd",
-	justifyEvenly: "imf-ui-stack-module-justifyEvenly",
-	justifyStart: "imf-ui-stack-module-justifyStart",
-	root: "imf-ui-stack-module-root"
-}, I = o(F.root, { variants: {
-	gap: {
-		0: F.gap0,
-		1: F.gap1,
-		2: F.gap2,
-		3: F.gap3,
-		4: F.gap4,
-		5: F.gap5,
-		6: F.gap6,
-		7: F.gap7,
-		8: F.gap8,
-		9: F.gap9,
-		10: F.gap10
-	},
-	align: {
-		start: F.alignStart,
-		center: F.alignCenter,
-		end: F.alignEnd,
-		stretch: F.alignStretch
-	},
-	justify: {
-		start: F.justifyStart,
-		center: F.justifyCenter,
-		end: F.justifyEnd,
-		between: F.justifyBetween,
-		around: F.justifyAround,
-		evenly: F.justifyEvenly
-	}
-} });
-function L({ gap: e = "4", align: t = "stretch", justify: n = "start", ...r }) {
-	return /* @__PURE__ */ s("div", {
-		...r,
-		"data-imf-ui-component": "Stack",
-		className: I({
-			gap: e,
-			align: t,
-			justify: n,
-			className: r.className
-		})
-	});
-}
-var R = {
-	indicator: "imf-ui-tabs-module-indicator",
-	list: "imf-ui-tabs-module-list",
-	listFill: "imf-ui-tabs-module-listFill",
-	panel: "imf-ui-tabs-module-panel",
-	panelViewport: "imf-ui-tabs-module-panelViewport",
-	root: "imf-ui-tabs-module-root",
-	tab: "imf-ui-tabs-module-tab"
-}, z = /* @__PURE__ */ t({
-	Indicator: () => Z,
-	List: () => Y,
-	Panel: () => $,
-	PanelViewport: () => Q,
-	Root: () => J,
-	Tab: () => X
-}), B = o(R.list, { variants: { fill: {
-	true: R.listFill,
-	false: null
-} } }), V = o(R.root), H = o(R.tab), U = o(R.indicator), W = o(R.panelViewport), G = o(R.panel);
-function K(e, t) {
-	typeof e == "function" ? e(t) : e && (e.current = t);
-}
-function q(e) {
-	let t = new ResizeObserver(() => {
-		let t = e.dataset.orientation === "vertical" ? e.scrollHeight > e.clientHeight : e.scrollWidth > e.clientWidth;
-		e.toggleAttribute("data-overflowing", t);
-	}), n = () => {
-		t.disconnect(), t.observe(e);
-		for (let n of e.children) t.observe(n);
-	}, r = new MutationObserver(n);
-	return r.observe(e, { childList: !0 }), n(), () => {
-		t.disconnect(), r.disconnect();
-	};
-}
-function J(e) {
-	return /* @__PURE__ */ s(h.Root, {
-		...e,
-		"data-imf-ui-component": "Tabs.Root",
-		className: (t) => V({ className: n(e.className, t) })
-	});
-}
-J.displayName = "Tabs.Root";
-function Y({ fill: e = !1, ref: t, ...r }) {
-	let i = d((e) => {
-		if (!e) return;
-		K(t, e);
-		let n = q(e);
-		return () => {
-			n(), K(t, null);
-		};
-	}, [t]);
-	return /* @__PURE__ */ s(h.List, {
-		...r,
-		ref: i,
-		"data-imf-ui-component": "Tabs.List",
-		className: (t) => B({
-			fill: e,
-			className: n(r.className, t)
-		})
-	});
-}
-Y.displayName = "Tabs.List";
-function X(e) {
-	return /* @__PURE__ */ s(h.Tab, {
-		...e,
-		"data-imf-ui-component": "Tabs.Tab",
-		className: (t) => H({ className: n(e.className, t) })
-	});
-}
-X.displayName = "Tabs.Tab";
-function Z(e) {
-	return /* @__PURE__ */ s(h.Indicator, {
-		...e,
-		"data-imf-ui-component": "Tabs.Indicator",
-		className: (t) => U({ className: n(e.className, t) })
-	});
-}
-Z.displayName = "Tabs.Indicator";
-function Q(e) {
-	return /* @__PURE__ */ s("div", {
-		...e,
-		"data-imf-ui-component": "Tabs.PanelViewport",
-		className: W({ className: e.className })
-	});
-}
-Q.displayName = "Tabs.PanelViewport";
-function $(e) {
-	return /* @__PURE__ */ s(h.Panel, {
-		...e,
-		"data-imf-ui-component": "Tabs.Panel",
-		className: (t) => G({ className: n(e.className, t) })
-	});
-}
-$.displayName = "Tabs.Panel";
-//#endregion
-export { v as _, J as a, L as c, j as d, ae as f, te as g, b as h, Q as i, P as l, ne as m, Y as n, X as o, ie as p, $ as r, z as s, Z as t, A as u };