@viraui/react 2026.7.1 → 2026.9.0

package/dist/components/spinner/variants/dots.js

@@ -1,189 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-//#region src/components/spinner/variants/dots.tsx
-/** Sanitize React useId for SVG id / begin references (strip `:`). */
-var smilId = (reactId, name) => `${reactId.replaceAll(":", "")}${name}`;
-var spline = {
-	calcMode: "spline",
-	dur: "0.5s",
-	keySplines: ".36,.6,.31,1",
-	fill: "freeze"
-};
-var DotsGlyph = () => {
-	const reactId = useId();
-	const z0Or = smilId(reactId, "z0Or");
-	const lo66 = smilId(reactId, "lo66");
-	const OLMs = smilId(reactId, "OLMs");
-	const UHR2 = smilId(reactId, "UHR2");
-	const Aguh = smilId(reactId, "Aguh");
-	const JsnR = smilId(reactId, "JsnR");
-	const hSjk = smilId(reactId, "hSjk");
-	const v4v5M = smilId(reactId, "4v5M");
-	return /* @__PURE__ */ jsxs("g", {
-		fill: "currentColor",
-		children: [
-			/* @__PURE__ */ jsxs("circle", {
-				cx: "4",
-				cy: "12",
-				r: "0",
-				children: [
-					/* @__PURE__ */ jsx("animate", {
-						begin: `0;${z0Or}.end`,
-						attributeName: "r",
-						...spline,
-						values: "0;3"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						begin: `${OLMs}.end`,
-						attributeName: "cx",
-						...spline,
-						values: "4;12"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						begin: `${UHR2}.end`,
-						attributeName: "cx",
-						...spline,
-						values: "12;20"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						id: lo66,
-						begin: `${Aguh}.end`,
-						attributeName: "r",
-						...spline,
-						values: "3;0"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						id: z0Or,
-						begin: `${lo66}.end`,
-						attributeName: "cx",
-						dur: "0.001s",
-						values: "20;4",
-						fill: "freeze"
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("circle", {
-				cx: "4",
-				cy: "12",
-				r: "3",
-				children: [
-					/* @__PURE__ */ jsx("animate", {
-						begin: `0;${z0Or}.end`,
-						attributeName: "cx",
-						...spline,
-						values: "4;12"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						begin: `${OLMs}.end`,
-						attributeName: "cx",
-						...spline,
-						values: "12;20"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						id: JsnR,
-						begin: `${UHR2}.end`,
-						attributeName: "r",
-						...spline,
-						values: "3;0"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						id: Aguh,
-						begin: `${JsnR}.end`,
-						attributeName: "cx",
-						dur: "0.001s",
-						values: "20;4",
-						fill: "freeze"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						begin: `${Aguh}.end`,
-						attributeName: "r",
-						...spline,
-						values: "0;3"
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("circle", {
-				cx: "12",
-				cy: "12",
-				r: "3",
-				children: [
-					/* @__PURE__ */ jsx("animate", {
-						begin: `0;${z0Or}.end`,
-						attributeName: "cx",
-						...spline,
-						values: "12;20"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						id: hSjk,
-						begin: `${OLMs}.end`,
-						attributeName: "r",
-						...spline,
-						values: "3;0"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						id: UHR2,
-						begin: `${hSjk}.end`,
-						attributeName: "cx",
-						dur: "0.001s",
-						values: "20;4",
-						fill: "freeze"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						begin: `${UHR2}.end`,
-						attributeName: "r",
-						...spline,
-						values: "0;3"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						begin: `${Aguh}.end`,
-						attributeName: "cx",
-						...spline,
-						values: "4;12"
-					})
-				]
-			}),
-			/* @__PURE__ */ jsxs("circle", {
-				cx: "20",
-				cy: "12",
-				r: "3",
-				children: [
-					/* @__PURE__ */ jsx("animate", {
-						id: v4v5M,
-						begin: `0;${z0Or}.end`,
-						attributeName: "r",
-						...spline,
-						values: "3;0"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						id: OLMs,
-						begin: `${v4v5M}.end`,
-						attributeName: "cx",
-						dur: "0.001s",
-						values: "20;4",
-						fill: "freeze"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						begin: `${OLMs}.end`,
-						attributeName: "r",
-						...spline,
-						values: "0;3"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						begin: `${UHR2}.end`,
-						attributeName: "cx",
-						...spline,
-						values: "4;12"
-					}),
-					/* @__PURE__ */ jsx("animate", {
-						begin: `${Aguh}.end`,
-						attributeName: "cx",
-						...spline,
-						values: "12;20"
-					})
-				]
-			})
-		]
-	});
-};
-//#endregion
-export { DotsGlyph as default };

package/dist/specs/patterns/equal-width-actions.xml

@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<pattern id="equal-width-actions" title="Equal-width action row">
-  <uses>
-    <ref id="stack" units="meta,usage,props" />
-    <ref id="button" units="meta,props" />
-  </uses>
-  <do>Span or share space with Stack `fullWidth` and/or `expandChildren` (and control `fullWidth` when the surface owns it). Orthogonal: `fullWidth` sizes the Stack; `expandChildren` grows direct children on the main axis.</do>
-  <dont>Do not invent `width: 100%` / `w-full` / per-child `flex: 1` CSS on Button (or other content-sized controls) when Stack can own the fill.</dont>
-  <tsx><![CDATA[
-{/* Full-bleed column CTAs */}
-<Stack fullWidth rowGap="s">
-  <Button>Continue</Button>
-  <Button variant="secondary">Cancel</Button>
-</Stack>
-
-{/* Equal-width row actions — children grow on the main axis. Add fullWidth when the Stack itself should fill its parent width */}
-<Stack expandChildren direction="row" columnGap="s">
-  <Button>Continue</Button>
-  <Button variant="secondary">Cancel</Button>
-</Stack>
-]]></tsx>
-</pattern>

package/dist/specs/patterns/page-chrome.xml

@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<pattern id="page-chrome" title="Page chrome with Stack render">
-  <uses>
-    <ref id="stack" units="meta,usage,props" />
-    <ref id="title" units="meta" />
-    <ref id="button" units="meta" />
-  </uses>
-  <do>Own page/section flex with Stack. Pick semantic tags (`header`, `main`, `nav`, `section`, …) via `render={&lt;tag /&gt;}` — keep Stack as the layout engine. CSS modules may set min-block-size / scroll; never `display:flex`.</do>
-  <dont>Do not use raw `header`/`main`/`nav` + `display:flex` / CSS gap for jobs Stack owns. Tag choice ≠ layout engine. Do not pass `render={&lt;div /&gt;}` — Stack already defaults to `div`; omit `render` unless the host changes.</dont>
-  <tsx><![CDATA[
-<Stack rowGap="m" expandChildren>
-  <Stack
-    direction="row"
-    hAlign="space-between"
-    vAlign="center"
-    columnGap="m"
-    hPadding="m"
-    vPadding="m"
-    render={<header />}
-  >
-    <Title render={<h1 />}>Settings</Title>
-    <Button>Save</Button>
-  </Stack>
-  <Stack direction="row" columnGap="m" expandChildren render={<main />}>
-    <Stack rowGap="xs" hPadding="s" vPadding="s" render={<nav aria-label="Settings" />}>
-      {/* nav links */}
-    </Stack>
-    <Stack rowGap="l" expandChildren>
-      {/* content */}
-    </Stack>
-  </Stack>
-</Stack>
-]]></tsx>
-</pattern>

package/dist/specs/patterns/stack-as-surface.xml

@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<pattern id="stack-as-surface" title="Stack as Surface (avoid extra DOM)">
-  <uses>
-    <ref id="stack" units="meta,usage,props" />
-    <ref id="surface" units="meta,usage,props" />
-    <ref id="text" units="meta" />
-    <ref id="chip" units="meta" />
-  </uses>
-  <do>When a flex cluster also needs Surface chrome (border, color, radius, padding), prefer `Stack render={&lt;Surface … /&gt;}` so layout + chrome share one root. Put gap/align/`fullWidth`/`expandChildren` on Stack; put `border` / `color` / `radius` / padding on the Surface in `render`.</do>
-  <dont>Do not add a CSS class for border/background/radius on a Stack when Surface owns that chrome. Do not wrap Stack in an extra Surface solely for those props when `render` merge is enough. Nest Surface→Stack only when you need separate roots (e.g. Elevator around Surface, concentric nested Surfaces, or chrome that must not sit on the flex host).</dont>
-  <tsx><![CDATA[
-{/* Preferred: single node */}
-<Stack
-  direction="row"
-  columnGap="s"
-  vAlign="center"
-  fullWidth
-  render={<Surface border="all" color={1} radius="m" hPadding="m" vPadding="s" />}
->
-  <Text size="sm" color="muted">
-    Status
-  </Text>
-  <Chip>Active</Chip>
-</Stack>
-
-{/* OK when a separate Surface root is required (Elevator, nested radius="auto", …) */}
-{/*
-<Elevator elevation={1}>
-  <Surface border="all" color={1} radius="m" hPadding="m" vPadding="s">
-    <Stack direction="row" columnGap="s" vAlign="center" fullWidth>
-      …
-    </Stack>
-  </Surface>
-</Elevator>
-*/}
-]]></tsx>
-</pattern>