@forte-ui/react 1.0.0-alpha.1

package/README.md

@@ -0,0 +1,240 @@
+# @forte-ui/react
+
+An accessible React component library built on [Base UI](https://base-ui.com)
+primitives. One CSS variable re-themes the entire system, motion respects every
+user preference, and nothing ships a runtime: theming, dark mode, density,
+radius presets and reduced motion are all resolved by the browser from plain
+CSS custom properties.
+
+- **One seed, whole palette.** Set `--forte-accent-seed` and every colour — all
+  twelve accent steps, brand-tinted neutrals, readable text on solid fills, in
+  light and dark — is derived from it with CSS relative colour syntax. The
+  derived pairs are contrast-checked against WCAG floors across ~119k seeds in
+  CI.
+- **Your CSS always wins.** Everything ships inside `@layer forte.*`,
+  which loses to unlayered author CSS by design. No `!important` anywhere, in
+  either direction.
+- **Styling-solution agnostic.** State is exposed as `data-*` attributes,
+  parts as stable `data-forte` markers, and every knob is a custom property — so
+  plain CSS, CSS Modules, Tailwind, or CSS-in-JS all work without wrappers.
+
+## Install
+
+```bash
+pnpm add @forte-ui/react
+```
+
+React 18 or 19 is a peer dependency. Then import the one required stylesheet
+once, at the root of your app, before any component renders:
+
+```tsx
+import "@forte-ui/react/theme.css";
+```
+
+Per-component styles load automatically with each component you import — they
+require a bundler that understands CSS imports from `node_modules` (Vite,
+Next.js and webpack all qualify).
+
+```tsx
+import { Button } from "@forte-ui/react";
+
+<Button variant="soft" tone="danger" size="lg">
+  Delete
+</Button>;
+```
+
+## Theming
+
+```css
+:root {
+  --forte-accent-seed: #7c3aed; /* one variable re-skins everything */
+}
+```
+
+Also available:
+
+| Control | Values | What it does |
+| :-- | :-- | :-- |
+| `--forte-secondary-seed` | any in-gamut colour | second brand colour, same derivation |
+| `--forte-neutral-tint` | `0` … `1` | pure grey → brand-tinted greys |
+| `data-theme` | `"light"` / `"dark"` | otherwise follows the OS |
+| `data-forte-radius` | `"none"` / `"soft"` / `"pill"` | radius preset |
+| `data-forte-density` | `"compact"` / `"spacious"` | control heights and padding |
+| `data-forte-motion` | `"reduce"` / `"off"` / `"full"` | motion preference override |
+
+The `data-forte-*` switches work on any element and apply to its whole subtree.
+To re-theme just a subtree (a different seed, a forced-dark panel), add
+`.forte-theme` or `data-forte-theme` to the subtree root and set the seed there —
+the ramps are re-declared on those selectors precisely so this works;
+overriding the seed on an arbitrary element does nothing.
+
+Supported seed envelope: lightness 0.45–0.90, chroma 0.02–0.30, inside the
+sRGB gamut. Outside it the ramp still renders, but the derived contrast
+guarantees no longer hold.
+
+## Styling and overriding
+
+The library's side of the contract, and what each part is for:
+
+**Layers — your CSS wins.** All shipped CSS lives in
+`@layer forte.reset → tokens → patterns → components → a11y → overrides`.
+Every layer loses to *unlayered* author CSS, so a flat rule in your stylesheet
+overrides anything the library sets, at any specificity, without
+`!important`. (The flip side is a documented opt-out: an unlayered
+`transition` or `--forte-motion-ok: 1` of yours will also defeat the library's
+reduced-motion handling.)
+
+**`className` on every part, applied last.** Every exported component and
+sub-component accepts `className` after the internal classes, so utility
+classes win their cascade ties.
+
+**State is `data-*`, never a class name.** `data-variant`, `data-tone`,
+`data-size`, `data-disabled`, `data-loading`, plus everything Base UI sets
+(`data-checked`, `data-open`, …). Target it from plain CSS
+(`[data-variant="solid"]`) or Tailwind arbitrary variants
+(`data-[variant=solid]:…`) without wrapping the component.
+
+**Parts are `data-forte`.** The hashed CSS Modules class names are not part of
+the API — they change between releases. Every element the library renders
+carries a stable `data-forte="<component>"` (root) or
+`data-forte="<component>-<part>"` marker instead:
+
+```css
+/* every dialog surface, forever, regardless of release */
+[data-forte="dialog-popup"] {
+  border: 2px solid var(--forte-color-border-strong);
+}
+
+/* the spinner inside a button, scoped by composition */
+[data-forte="button"] [data-forte="spinner"] {
+  opacity: 0.8;
+}
+```
+
+**Knobs are `--forte-<component>-*`.** Each component declares its knobs on its
+own root element, defaulting to a global token — `--forte-button-radius` starts
+at `var(--forte-radius-control)`. Set the knob on one element to re-skin one
+instance; re-point the global token on `:root` or a theme scope to re-skin
+every instance:
+
+```css
+.my-toolbar [data-forte="button"] {
+  --forte-button-radius: var(--forte-radius-pill);
+}
+```
+
+**Everything else is a token.** Colour, spacing, radius, control geometry,
+shadows, durations, easings — the full inventory is in
+[CONTRIBUTING.md](./CONTRIBUTING.md). Consume them in your own CSS freely;
+they are the same values the components use, so the two stay in step through
+every theme change.
+
+## Using Tailwind (v4)
+
+The package ships a bridge that points Tailwind's theme at the forte-ui
+tokens. Import it **before** Tailwind in the stylesheet that sets Tailwind up:
+
+```css
+@import "@forte-ui/react/tailwind.css";
+@import "tailwindcss";
+```
+
+(`theme.css` is still required once in the app; the bridge only teaches
+Tailwind the token names.)
+
+The order is load-bearing. Tailwind v4's own styles are *layered*, and
+cascade-layer order is fixed at first declaration — the bridge declares
+`theme, base, forte, components, utilities`, which places Preflight below
+the components (so `button { background: transparent }` cannot blank a Button)
+and utilities above them (so `p-4` on a Button beats the button's own
+padding). Import Tailwind first and `forte-ui` ends up above `utilities`
+instead, and utility overrides on components silently stop working.
+
+With the bridge in place, utilities and components are one system:
+
+| Write | Get |
+| :-- | :-- |
+| `bg-primary`, `text-foreground-muted`, `border-border` | the semantic colour slots the components use |
+| `bg-accent-9`, `bg-gray-3` | the raw 12-step ramps |
+| `gap-5`, `p-4` | the eight `--forte-space-*` steps (`gap-5` is 1.5rem — steps, not a multiplier) |
+| `p-surface` | density-aware surface padding |
+| `text-2`, `font-medium`, `leading-tight` | the type scale |
+| `rounded-control`, `rounded-surface`, `rounded-pill`, `rounded-1`…`6` | radius, following the `data-forte-radius` preset |
+| `shadow-1`…`4` | elevation |
+| `duration-fast`, `ease-spring-snappy` | the motion system (pair a spring easing with its matching duration) |
+| `h-(--forte-control-h-md)` | any other token, via v4's `var()` shorthand |
+
+Tailwind's stock `--color-*`, `--spacing-*`, `--text-*`, `--radius-*`,
+`--shadow-*`, `--ease-*` and `--animate-*` scales are deliberately **deleted**
+by the bridge: `bg-red-500` and `p-13` do not compile, because they would
+survive review and then ignore the seed, dark mode and every theme scope.
+(The stock spacing multiplier also cannot coexist with the token steps — the
+steps go non-linear past 4, so mixing the two would make `p-8` larger than
+`p-9`.) To opt back into a stock scale anyway, re-declare it in your own
+`@theme` after the import. The `--container-*` scale (`max-w-lg`, …) and the
+breakpoints are untouched.
+
+Component state composes as arbitrary variants, no wrappers needed:
+
+```tsx
+<Button className="data-[variant=solid]:shadow-2 data-[loading]:animate-pulse" />
+```
+
+### If you use `tailwind-merge`
+
+`tailwind-merge` ships knowing Tailwind's default theme, and the bridge
+replaced most of it. Unrecognised classes are not merged — both survive and
+the cascade decides — and, worse, the stock colour scale matches *any* name,
+so `text-2` (a font size here) parses as a text colour and
+`twMerge("text-2", "text-foreground-muted")` silently drops one. The package
+ships a `cn` already configured for the bridge:
+
+```ts
+import { cn } from "@forte-ui/react/cn";
+
+cn("p-4", condition && "p-6"); // -> "p-6" when condition holds
+```
+
+`tailwind-merge` is an *optional* peer dependency — install it alongside the
+package to use this subpath; apps that never import it pay nothing.
+
+If your app adds its own `@theme` keys, the bare `cn` cannot know them —
+extend it with `createCn`, which takes the same `{ extend, override }` shape
+as tailwind-merge itself and *appends* your names to the library's scales:
+
+```ts
+import { createCn } from "@forte-ui/react/cn";
+
+export const cn = createCn({
+  extend: {
+    theme: {
+      spacing: ["header"], // lands beside the library's `surface`
+      animate: ["reveal"],
+    },
+  },
+});
+```
+
+For setups that are not `cn`-shaped at all, the underlying
+`tailwindMergeConfig` stays exported from `@forte-ui/react/tailwind-merge`
+as a plain data object.
+
+Colours need no entry — the colour scale already matches any name — and
+neither do `font-*`, `font-weight-*`, `leading-*` or `tracking-*`, whose names
+are Tailwind's own. A missed name does not error, it just stops overriding
+its own family.
+
+## Other styling setups
+
+Nothing above is Tailwind-specific except the bridge. For CSS Modules,
+vanilla-extract, styled-components or plain stylesheets, the same three hooks
+carry the whole story: unlayered CSS beats the library, `data-*` selects
+state and parts, and custom properties re-skin one instance or every
+instance. If your setup puts *your* styles into cascade layers too, declare
+your layers after `forte-ui` (import `theme.css` first, or name `forte-ui`
+in your own `@layer` statement) so they keep winning.
+
+## Contributing
+
+Development conventions, the token inventory, and the accessibility rules
+live in [CONTRIBUTING.md](./CONTRIBUTING.md).

package/dist/Accordion-9JunkjgY.js

@@ -0,0 +1,111 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { Accordion as n } from "@base-ui/react/accordion";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import './styles/Accordion.css';var a = {
+	root: "_root_1vl8x_38",
+	item: "_item_1vl8x_146",
+	header: "_header_1vl8x_186",
+	trigger: "_trigger_1vl8x_193",
+	label: "_label_1vl8x_252",
+	icon: "_icon_1vl8x_268",
+	panel: "_panel_1vl8x_27",
+	content: "_content_1vl8x_288"
+}, o = t.createContext("divided");
+function s(e) {
+	return /* @__PURE__ */ r("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		style: {
+			display: "block",
+			...e.style
+		},
+		children: /* @__PURE__ */ r("path", { d: "m3.5 6 4.5 4.5L12.5 6" })
+	});
+}
+function c({ variant: t = "divided", className: i, dir: s, children: c, ...l }) {
+	return /* @__PURE__ */ r(o.Provider, {
+		value: t,
+		children: /* @__PURE__ */ r(n.Root, {
+			className: e(a.root, i),
+			"data-forte": "accordion",
+			dir: s,
+			"data-variant": t,
+			...l,
+			children: c
+		})
+	});
+}
+var l = {
+	Root: c,
+	Item: t.forwardRef(function({ className: i, children: s, ...c }, l) {
+		let u = t.useContext(o);
+		return /* @__PURE__ */ r(n.Item, {
+			ref: l,
+			className: e(a.item, i),
+			"data-forte": "accordion-item",
+			"data-variant": u,
+			...c,
+			children: s
+		});
+	}),
+	Header: t.forwardRef(function({ className: i, children: s, ...c }, l) {
+		let u = t.useContext(o);
+		return /* @__PURE__ */ r(n.Header, {
+			ref: l,
+			className: e(a.header, i),
+			"data-forte": "accordion-header",
+			"data-variant": u,
+			...c,
+			children: s
+		});
+	}),
+	Trigger: t.forwardRef(function({ icon: c = /* @__PURE__ */ r(s, {}), labelClassName: l, className: u, children: d, ...f }, p) {
+		let m = t.useContext(o);
+		return /* @__PURE__ */ i(n.Trigger, {
+			ref: p,
+			className: e(a.trigger, "forte-focus-ring", u),
+			"data-forte": "accordion-trigger",
+			"data-focus-inset": "",
+			"data-variant": m,
+			...f,
+			children: [/* @__PURE__ */ r("span", {
+				className: e(a.label, l),
+				"data-forte": "accordion-label",
+				children: d
+			}), c === null ? null : /* @__PURE__ */ r("span", {
+				className: a.icon,
+				"data-forte": "accordion-icon",
+				"aria-hidden": "true",
+				children: c
+			})]
+		});
+	}),
+	Panel: t.forwardRef(function({ contentClassName: i, className: s, children: c, ...l }, u) {
+		let d = t.useContext(o);
+		return /* @__PURE__ */ r(n.Panel, {
+			ref: u,
+			className: e(a.panel, s),
+			"data-forte": "accordion-panel",
+			"data-variant": d,
+			...l,
+			children: /* @__PURE__ */ r("div", {
+				className: e(a.content, i),
+				"data-forte": "accordion-content",
+				children: c
+			})
+		});
+	})
+};
+//#endregion
+export { l as t };

package/dist/Alert-Cn_WUF3L.js

@@ -0,0 +1,183 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import './styles/Alert.css';var i = {
+	root: "_root_6hqok_83",
+	icon: "_icon_6hqok_178",
+	title: "_title_6hqok_201",
+	description: "_description_6hqok_215",
+	action: "_action_6hqok_244",
+	close: "_close_6hqok_150"
+}, a = t.createContext({
+	tone: "neutral",
+	dismiss: () => {}
+}), o = typeof window > "u" ? t.useEffect : t.useLayoutEffect;
+function s({ children: e, ...t }) {
+	return /* @__PURE__ */ n("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.6",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...t,
+		children: e
+	});
+}
+var c = {
+	success: /* @__PURE__ */ r(s, { children: [/* @__PURE__ */ n("circle", {
+		cx: "8",
+		cy: "8",
+		r: "6.4"
+	}), /* @__PURE__ */ n("path", { d: "m5.2 8.2 2 2 3.6-4.4" })] }),
+	danger: /* @__PURE__ */ r(s, { children: [/* @__PURE__ */ n("circle", {
+		cx: "8",
+		cy: "8",
+		r: "6.4"
+	}), /* @__PURE__ */ n("path", { d: "m5.8 5.8 4.4 4.4M10.2 5.8l-4.4 4.4" })] }),
+	warning: /* @__PURE__ */ r(s, { children: [
+		/* @__PURE__ */ n("path", { d: "M8 2.2 1.6 13.4h12.8L8 2.2Z" }),
+		/* @__PURE__ */ n("path", { d: "M8 6.4v3.1" }),
+		/* @__PURE__ */ n("path", { d: "M8 11.4h.01" })
+	] }),
+	info: /* @__PURE__ */ r(s, { children: [
+		/* @__PURE__ */ n("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.4"
+		}),
+		/* @__PURE__ */ n("path", { d: "M8 7.4v3.6" }),
+		/* @__PURE__ */ n("path", { d: "M8 5h.01" })
+	] })
+}, l = {
+	off: void 0,
+	polite: "status",
+	assertive: "alert"
+}, u = {
+	Root: t.forwardRef(function({ variant: r = "soft", tone: s = "neutral", live: c = "off", open: u, defaultOpen: d = !0, onOpenChange: f, onExitComplete: p, className: m, children: h, style: g, ..._ }, v) {
+		let [y, b] = t.useState(d), x = u ?? y, [S, C] = t.useState(x), [w, T] = t.useState(null), E = t.useRef(0), D = t.useRef(null), O = t.useCallback((e) => {
+			D.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
+		}, [v]);
+		o(() => {
+			if (x) {
+				C(!0), T(null);
+				return;
+			}
+			T((e) => {
+				if (e !== null) return e;
+				let t = D.current;
+				return t ? (E.current = t.getBoundingClientRect().height, "measured") : e;
+			});
+		}, [x]), o(() => {
+			if (w !== "measured") return;
+			let e = D.current;
+			e && (e.getBoundingClientRect(), T("leaving"));
+		}, [w]), o(() => {
+			if (w !== "leaving") return;
+			let e = D.current, t = () => {
+				C(!1), T(null), u === void 0 && b(!1), p?.();
+			}, n = e?.getAnimations() ?? [];
+			if (n.length === 0) {
+				t();
+				return;
+			}
+			let r = !1;
+			return Promise.allSettled(n.map((e) => e.finished)).then(() => {
+				r || t();
+			}), () => {
+				r = !0;
+			};
+		}, [w]);
+		let k = t.useCallback(() => {
+			u === void 0 && b(!1), f?.(!1);
+		}, [u, f]), A = t.useMemo(() => ({
+			tone: s,
+			dismiss: k
+		}), [s, k]);
+		return S ? /* @__PURE__ */ n(a.Provider, {
+			value: A,
+			children: /* @__PURE__ */ n("div", {
+				ref: O,
+				role: l[c],
+				className: e(i.root, m),
+				"data-forte": "alert",
+				"data-variant": r,
+				"data-tone": s,
+				"data-exiting": w ? "" : void 0,
+				"data-ending-style": w === "leaving" ? "" : void 0,
+				style: w ? {
+					"--forte-alert-exit-from": `${E.current}px`,
+					...g
+				} : g,
+				..._,
+				children: h
+			})
+		}) : null;
+	}),
+	Icon: t.forwardRef(function({ className: r, children: o, ...s }, l) {
+		let { tone: u } = t.useContext(a), d = o ?? c[u];
+		return d == null || d === !1 ? null : /* @__PURE__ */ n("span", {
+			ref: l,
+			className: e(i.icon, r),
+			"data-forte": "alert-icon",
+			...s,
+			children: d
+		});
+	}),
+	Title: t.forwardRef(function({ className: t, children: r, ...a }, o) {
+		return /* @__PURE__ */ n("div", {
+			ref: o,
+			className: e(i.title, t),
+			"data-forte": "alert-title",
+			...a,
+			children: r
+		});
+	}),
+	Description: t.forwardRef(function({ className: t, children: r, ...a }, o) {
+		return /* @__PURE__ */ n("div", {
+			ref: o,
+			className: e(i.description, t),
+			"data-forte": "alert-description",
+			...a,
+			children: r
+		});
+	}),
+	Action: t.forwardRef(function({ className: t, children: r, ...a }, o) {
+		return /* @__PURE__ */ n("div", {
+			ref: o,
+			className: e(i.action, t),
+			"data-forte": "alert-action",
+			...a,
+			children: r
+		});
+	}),
+	Close: t.forwardRef(function({ className: r, children: o, onClick: s, ...c }, l) {
+		let { dismiss: u } = t.useContext(a);
+		return /* @__PURE__ */ n("button", {
+			ref: l,
+			type: "button",
+			className: e(i.close, "forte-focus-ring", r),
+			"data-forte": "alert-close",
+			"aria-label": "Dismiss",
+			onClick: (e) => {
+				s?.(e), e.defaultPrevented || u();
+			},
+			...c,
+			children: o ?? /* @__PURE__ */ n("svg", {
+				viewBox: "0 0 16 16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.6",
+				strokeLinecap: "round",
+				"aria-hidden": "true",
+				focusable: "false",
+				children: /* @__PURE__ */ n("path", { d: "m4.5 4.5 7 7M11.5 4.5l-7 7" })
+			})
+		});
+	})
+};
+//#endregion
+export { u as t };

package/dist/AspectRatio-gSjpTVk-.js

@@ -0,0 +1,39 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { useRender as n } from "@base-ui/react/use-render";
+import './styles/AspectRatio.css';var r = { root: "_root_1s91t_47" }, i = {
+	square: "1 / 1",
+	video: "16 / 9",
+	wide: "21 / 9",
+	photo: "4 / 3",
+	portrait: "3 / 4",
+	story: "9 / 16",
+	golden: "1.618 / 1"
+};
+function a(e) {
+	return typeof e == "number" ? Number.isFinite(e) && e > 0 ? String(e) : "1" : i[e] || (e.includes(":") ? e.replace(":", " / ") : e);
+}
+var o = t.forwardRef(function({ ratio: t = 1, fit: i = "cover", variant: o = "plain", basis: s = "inline", clip: c = !0, render: l, className: u, style: d, ...f }, p) {
+	let m = {
+		"--forte-aspect-ratio-seed": a(t),
+		...d
+	};
+	return n({
+		render: l,
+		ref: p,
+		defaultTagName: "div",
+		props: {
+			className: e(r.root, "forte-focus-ring", u),
+			style: m,
+			"data-forte": "aspect-ratio",
+			"data-variant": o,
+			"data-fit": i,
+			"data-basis": s,
+			"data-clip": c ? "" : void 0,
+			...f
+		}
+	});
+});
+//#endregion
+export { o as t };

package/dist/Avatar-BuitDluH.js

@@ -0,0 +1,87 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Avatar as i } from "@base-ui/react/avatar";
+import './styles/Avatar.css';var a = {
+	root: "_root_s5mge_42",
+	image: "_image_s5mge_161",
+	fallback: "_fallback_s5mge_190",
+	content: "_content_s5mge_208",
+	badge: "_badge_s5mge_105",
+	badgeContent: "_badgeContent_s5mge_449",
+	group: "_group_s5mge_52"
+}, o = {
+	Root: t.forwardRef(function({ size: t = "md", shape: r = "circle", variant: o = "soft", tone: s = "neutral", className: c, children: l, ...u }, d) {
+		return /* @__PURE__ */ n(i.Root, {
+			ref: d,
+			className: e(a.root, c),
+			"data-forte": "avatar",
+			"data-size": t,
+			"data-shape": r,
+			"data-variant": o,
+			"data-tone": s,
+			...u,
+			children: l
+		});
+	}),
+	Image: t.forwardRef(function({ className: t, ...r }, o) {
+		return /* @__PURE__ */ n(i.Image, {
+			ref: o,
+			className: e(a.image, t),
+			"data-forte": "avatar-image",
+			...r
+		});
+	}),
+	Fallback: t.forwardRef(function({ delay: t = 0, label: o, className: s, children: c, ...l }, u) {
+		return /* @__PURE__ */ r(i.Fallback, {
+			ref: u,
+			className: e(a.fallback, s),
+			"data-forte": "avatar-fallback",
+			delay: t,
+			...l,
+			children: [/* @__PURE__ */ n("span", {
+				className: a.content,
+				"data-forte": "avatar-fallback-content",
+				"aria-hidden": o ? "true" : void 0,
+				children: c
+			}), o ? /* @__PURE__ */ n("span", {
+				className: "forte-visually-hidden",
+				children: o
+			}) : null]
+		});
+	}),
+	Badge: t.forwardRef(function({ tone: t = "neutral", placement: i = "bottom-end", label: o, className: s, children: c, ...l }, u) {
+		let d = c == null || c === !1 || c === "";
+		return /* @__PURE__ */ r("span", {
+			ref: u,
+			className: e(a.badge, s),
+			"data-forte": "avatar-badge",
+			"data-tone": t,
+			"data-placement": i,
+			"data-dot": d ? "" : void 0,
+			"aria-hidden": o || !d ? void 0 : "true",
+			...l,
+			children: [/* @__PURE__ */ n("span", {
+				className: a.badgeContent,
+				"data-forte": "avatar-badge-content",
+				"aria-hidden": o ? "true" : void 0,
+				children: c
+			}), o ? /* @__PURE__ */ n("span", {
+				className: "forte-visually-hidden",
+				children: o
+			}) : null]
+		});
+	}),
+	Group: t.forwardRef(function({ className: t, children: r, ...i }, o) {
+		return /* @__PURE__ */ n("span", {
+			ref: o,
+			className: e(a.group, t),
+			"data-forte": "avatar-group",
+			...i,
+			children: r
+		});
+	})
+};
+//#endregion
+export { o as t };

package/dist/Badge-sArNWMre.js

@@ -0,0 +1,33 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useRender as a } from "@base-ui/react/use-render";
+import './styles/Badge.css';var o = {
+	root: "_root_3atzu_44",
+	dot: "_dot_3atzu_165"
+}, s = t.forwardRef(function({ variant: t = "soft", tone: s = "primary", size: c = "md", shape: l = "rounded", dot: u = !1, count: d, max: f = 99, render: p, className: m, children: h, ...g }, _) {
+	let v = d === void 0 ? void 0 : d > f ? `${f}+` : String(d);
+	return a({
+		render: p,
+		ref: _,
+		defaultTagName: "span",
+		props: {
+			className: e(o.root, "forte-focus-ring", m),
+			"data-forte": "badge",
+			"data-variant": t,
+			"data-tone": s,
+			"data-size": c,
+			"data-shape": l,
+			"data-count": d,
+			...g,
+			children: /* @__PURE__ */ i(n, { children: [u ? /* @__PURE__ */ r("span", {
+				className: o.dot,
+				"data-forte": "badge-dot",
+				"aria-hidden": "true"
+			}) : null, h ?? v] })
+		}
+	});
+});
+//#endregion
+export { s as t };