@jfrader/ui 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 jfrader
+
+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,124 @@
-# Temporary Holding Version
+# @jfrader/ui
 
-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.
+React components styled with Emotion and themed through the CSS custom properties from `@jfrader/tokens`.
+
+## Components
+
+| Subpath | Exports |
+| --- | --- |
+| `@jfrader/ui/accordion` | `Accordion` |
+| `@jfrader/ui/alert` | `Alert` |
+| `@jfrader/ui/avatar` | `Avatar` |
+| `@jfrader/ui/badge` | `Badge` |
+| `@jfrader/ui/breadcrumbs` | `Breadcrumbs` |
+| `@jfrader/ui/button` | `Button` |
+| `@jfrader/ui/calendar` | `Calendar` |
+| `@jfrader/ui/card` | `Card` |
+| `@jfrader/ui/checkbox` | `Checkbox` |
+| `@jfrader/ui/combobox` | `Combobox` |
+| `@jfrader/ui/command-palette` | `CommandPalette` |
+| `@jfrader/ui/container` | `Container` |
+| `@jfrader/ui/date-picker` | `DatePicker` |
+| `@jfrader/ui/dialog` | `Dialog` |
+| `@jfrader/ui/divider` | `Divider` |
+| `@jfrader/ui/flex` | `Flex` |
+| `@jfrader/ui/kbd` | `Kbd` |
+| `@jfrader/ui/menu` | `Menu` |
+| `@jfrader/ui/pagination` | `Pagination` |
+| `@jfrader/ui/pill` | `Pill` |
+| `@jfrader/ui/popover` | `Popover` |
+| `@jfrader/ui/progress` | `Progress` |
+| `@jfrader/ui/radio-group` | `RadioGroup` |
+| `@jfrader/ui/select` | `Select` |
+| `@jfrader/ui/skeleton` | `Skeleton` |
+| `@jfrader/ui/spinner` | `Spinner` |
+| `@jfrader/ui/stack` | `Stack` |
+| `@jfrader/ui/switch` | `Switch` |
+| `@jfrader/ui/tabs` | `Tabs` |
+| `@jfrader/ui/text-field` | `TextField` |
+| `@jfrader/ui/textarea` | `Textarea` |
+| `@jfrader/ui/theme-root` | `ThemeRoot` |
+| `@jfrader/ui/toast` | `Toast`, `useToast` |
+| `@jfrader/ui/toggle-group` | `ToggleGroup` |
+| `@jfrader/ui/tooltip` | `Tooltip` |
+
+Each subpath also exports its prop types. The package root re-exports everything.
+
+## Usage
+
+```tsx
+import { Button, Dialog, ThemeRoot } from '@jfrader/ui';
+```
+
+Or import per path:
+
+```tsx
+import { Button } from '@jfrader/ui/button';
+import { Dialog } from '@jfrader/ui/dialog';
+import { ThemeRoot } from '@jfrader/ui/theme-root';
+```
+
+`react` and `react-dom` (`>=18.2`) are peer dependencies.
+
+## Theming
+
+Components read CSS custom properties defined by `@jfrader/tokens`. Load the stylesheet once and wrap the app in `ThemeRoot`:
+
+```tsx
+import '@jfrader/tokens/tokens.css';
+import { ThemeRoot } from '@jfrader/ui/theme-root';
+
+<ThemeRoot theme="light">{app}</ThemeRoot>;
+```
+
+Token names and values live in `packages/tokens/src/tokens.ts`.
+
+## Build
+
+```sh
+pnpm --filter @jfrader/tokens build && pnpm --filter @jfrader/ui build
+```
+
+Writes ES modules to `dist/` (`dist/index.js` plus one `dist/<name>.js` per component) and declarations to `dist/types/`. `react`, `react-dom` and every package in `dependencies` stay external.
+
+## Publishing
+
+`@jfrader/ui` and `@jfrader/tokens` publish together from `.github/workflows/publish.yml` to npmjs and GitHub Packages.
+
+1. Set the same `version` in `packages/ui/package.json` and `packages/tokens/package.json` and merge to `master`.
+2. Push an annotated tag on that commit: `git tag -a vX.Y.Z -m vX.Y.Z && git push origin vX.Y.Z`.
+3. CI checks the tag against both manifests, runs typecheck, tests and `verify:exports`, builds both packages, switches `exports` to `dist/` and packs each package once with `pnpm pack`. `workspace:*` becomes the published version.
+4. CI verifies or publishes the same tarballs to npmjs, then to GitHub Packages, tokens before UI. A matching artifact already at that version is accepted; a different one fails the release.
+
+To re-run a release without re-tagging:
+
+```sh
+gh workflow run publish.yml --repo jfrader/jfrader-ui --ref v0.1.1
+```
+
+npmjs authenticates through the package's trusted publisher for `jfrader/jfrader-ui` → `.github/workflows/publish.yml`, configured on npmjs after the first version is published by hand. GitHub Packages uses the workflow's `GITHUB_TOKEN`. See the [root README](https://github.com/jfrader/jfrader-ui#publishing) for the full release setup.
+
+In the repo, `exports` point at `src/` so the workspace consumes source. `node scripts/flip-exports.mjs dist` validates and switches both packages to the publish layout; `node scripts/flip-exports.mjs src` switches both back. The UI `prepack` builds UI and flips only its manifest with `--package ui`; `postpack` restores only UI. Each flip validates only the selected package's export targets.
+
+Build tokens before packing UI: the published UI package depends on `@jfrader/tokens`, which stays external rather than being bundled. The UI hook does not build or validate tokens; prepare its published artifacts separately. Run from the repo root:
+
+```sh
+pnpm --filter @jfrader/tokens build && pnpm --filter @jfrader/ui build
+pnpm --filter @jfrader/ui exec npm pack --dry-run --json
+pnpm --filter @jfrader/ui pack --pack-destination /tmp/opencode
+```
+
+Root `pnpm build` builds Storybook, not the published packages. If packing fails after `prepack`, run `node scripts/flip-exports.mjs src` from the repo root to restore workspace exports.
+
+It must contain only `dist/**`, `package.json`, `README.md` and `LICENSE`.
+
+### Registry choice / installing
+
+npmjs needs no authentication; GitHub Packages requires authentication even for public packages. To install from GitHub Packages, add this to `.npmrc`:
+
+```ini
+@jfrader:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
+```
+
+See the [root README's registry section](https://github.com/jfrader/jfrader-ui#registry-choice) for details.

package/dist/accordion-Dl-kvgPQ.js

@@ -0,0 +1,168 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { t } from "./disclosure-caret-BC6P8AsM.js";
+import { t as n } from "./focus-ring-qOS3rPlM.js";
+import { n as r } from "./media-8K3xDAxM.js";
+import { n as i } from "./roving-focus-DeEZ55-T.js";
+import { t as a } from "./use-controlled-state-DQXkiTQI.js";
+import { createContext as o, forwardRef as s, useContext as c, useId as l, useMemo as u } from "react";
+import { vars as d } from "@jfrader/tokens/vars";
+import { jsx as f } from "@emotion/react/jsx-runtime";
+//#region src/components/accordion/accordion.tsx
+var p = o(null), m = o(null);
+function h(e) {
+	let t = c(p);
+	if (!t) throw Error(`Accordion.${e} must be rendered inside <Accordion>.`);
+	return t;
+}
+function g(e) {
+	let t = c(m);
+	if (!t) throw Error(`Accordion.${e} must be rendered inside <Accordion.Item>.`);
+	return t;
+}
+var _ = "", v = {
+	itemSelector: "[data-ui=\"accordion-trigger\"]:not([disabled])",
+	ownerSelector: "[data-ui=\"accordion\"]"
+}, y = (e, t) => {
+	if (t === "multiple" && Array.isArray(e)) return e;
+	let n = Array.isArray(e) ? e[0] : e;
+	return n === void 0 || n === _ ? [] : [n];
+}, b = e({
+	borderBlockEnd: `1px solid ${d.color.border}`,
+	"&:first-of-type": { borderBlockStart: `1px solid ${d.color.border}` }
+}), x = e({
+	margin: 0,
+	font: "inherit"
+}), S = e({
+	appearance: "none",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: d.space[3],
+	inlineSize: "100%",
+	border: 0,
+	background: "transparent",
+	cursor: "pointer",
+	paddingBlock: d.space[3],
+	paddingInline: d.space[4],
+	font: "inherit",
+	fontSize: d.textSize.sm,
+	fontWeight: d.fontWeight.medium,
+	color: d.color.text,
+	textAlign: "start",
+	transitionProperty: "background-color",
+	transitionDuration: d.motion.duration.fast,
+	transitionTimingFunction: d.motion.easeStandard,
+	"&::after": { ...t },
+	"&[aria-expanded=\"true\"]::after": { transform: "rotate(90deg)" },
+	"&[aria-expanded=\"true\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
+	"&:hover:not(:disabled):not([aria-disabled=\"true\"])": { backgroundColor: d.color.surfaceHover },
+	"&[aria-disabled=\"true\"]": { cursor: "default" },
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	"&:focus-visible": { ...n },
+	[r]: {
+		transitionDuration: "0s",
+		"&::after": { transitionDuration: "0s" }
+	}
+}), C = e({
+	paddingBlock: d.space[3],
+	paddingInline: d.space[4],
+	color: d.color.textMuted,
+	lineHeight: d.lineHeight.relaxed,
+	"&[hidden]": { display: "none" }
+}), w = s(function({ value: e, defaultValue: t, onValueChange: n, type: r = "single", collapsible: o = !0, onKeyDown: s, ...c }, l) {
+	let [d, m] = a(e, t, n), h = u(() => {
+		let e = y(d, r), t = o || e.length > 1;
+		return {
+			openValues: e,
+			toggle: (n) => {
+				let i = e.includes(n);
+				(!i || t) && m(r === "multiple" ? i ? e.filter((e) => e !== n) : [...e, n] : i ? _ : n);
+			},
+			canCollapse: t
+		};
+	}, [
+		d,
+		m,
+		r,
+		o
+	]), g = (e) => {
+		s?.(e), !e.defaultPrevented && i(e, e.currentTarget, "vertical", v);
+	};
+	return /* @__PURE__ */ f(p.Provider, {
+		value: h,
+		children: /* @__PURE__ */ f("div", {
+			...c,
+			ref: l,
+			"data-ui": "accordion",
+			onKeyDown: g
+		})
+	});
+}), T = s(function({ value: e, disabled: t = !1, ...n }, r) {
+	let { openValues: i } = h("Item"), a = l(), o = i.includes(e), s = u(() => ({
+		value: e,
+		disabled: t,
+		expanded: o,
+		triggerId: `${a}-trigger`,
+		panelId: `${a}-panel`
+	}), [
+		e,
+		t,
+		o,
+		a
+	]);
+	return /* @__PURE__ */ f(m.Provider, {
+		value: s,
+		children: /* @__PURE__ */ f("div", {
+			...n,
+			ref: r,
+			"data-ui": "accordion-item",
+			"data-state": o ? "open" : "closed",
+			"data-disabled": t ? "" : void 0,
+			css: b
+		})
+	});
+}), E = s(function({ onClick: e, disabled: t, ...n }, r) {
+	let { toggle: i, canCollapse: a } = h("Trigger"), { value: o, disabled: s, expanded: c, triggerId: l, panelId: u } = g("Trigger"), d = c && !a, p = (t) => {
+		e?.(t), !t.defaultPrevented && i(o);
+	};
+	return /* @__PURE__ */ f("h3", {
+		"data-ui": "accordion-heading",
+		css: x,
+		children: /* @__PURE__ */ f("button", {
+			...n,
+			ref: r,
+			type: "button",
+			id: l,
+			"data-ui": "accordion-trigger",
+			"data-state": c ? "open" : "closed",
+			"aria-expanded": c,
+			"aria-controls": u,
+			"aria-disabled": d || void 0,
+			disabled: s || t,
+			onClick: p,
+			css: S
+		})
+	});
+}), D = s(function({ "aria-labelledby": e, ...t }, n) {
+	let { expanded: r, triggerId: i, panelId: a } = g("Panel"), o = [e, i].filter(Boolean).join(" ");
+	return /* @__PURE__ */ f("div", {
+		...t,
+		ref: n,
+		role: "region",
+		id: a,
+		"aria-labelledby": o,
+		hidden: !r,
+		"data-ui": "accordion-panel",
+		"data-state": r ? "open" : "closed",
+		css: C
+	});
+}), O = Object.assign(w, {
+	Item: T,
+	Trigger: E,
+	Panel: D
+});
+//#endregion
+export { O as t };

package/dist/accordion.js

@@ -0,0 +1 @@
+export { t as Accordion } from "./accordion-Dl-kvgPQ.js";

package/dist/alert-BzntPa_5.js

@@ -0,0 +1,129 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { n as t } from "./focus-ring-qOS3rPlM.js";
+import { n } from "./media-8K3xDAxM.js";
+import { t as r } from "./visually-hidden-BXVyhj0y.js";
+import { t as i } from "./renderable-DwPvt1I8.js";
+import { forwardRef as a } from "react";
+import { vars as o } from "@jfrader/tokens/vars";
+import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";
+//#region src/components/alert/alert.tsx
+var l = {
+	info: "Information",
+	success: "Success",
+	warning: "Warning",
+	danger: "Error"
+}, u = e({
+	display: "grid",
+	gap: o.space[1],
+	boxSizing: "border-box",
+	backgroundColor: o.color.surfaceRaised,
+	border: `1px solid ${o.color.border}`,
+	borderInlineStartWidth: "3px",
+	borderInlineStartStyle: "solid",
+	borderRadius: o.radius.md,
+	paddingBlock: o.space[3],
+	paddingInline: o.space[4],
+	fontFamily: o.font.sans,
+	lineHeight: o.lineHeight.base
+}), d = e({
+	gridTemplateColumns: "minmax(0, 1fr) auto",
+	columnGap: o.space[3]
+}), f = e({
+	display: "grid",
+	gap: o.space[1],
+	minInlineSize: 0,
+	gridColumn: 1,
+	gridRow: 1
+}), p = {
+	info: e({ borderInlineStartColor: o.color.info }),
+	success: e({ borderInlineStartColor: o.color.success }),
+	warning: e({ borderInlineStartColor: o.color.warning }),
+	danger: e({ borderInlineStartColor: o.color.dangerText })
+}, m = e({
+	gridColumn: 1,
+	fontSize: o.textSize.sm,
+	fontWeight: o.fontWeight.semibold,
+	color: o.color.text
+}), h = e({
+	gridColumn: 1,
+	fontSize: o.textSize.sm,
+	color: o.color.textMuted
+}), g = e({
+	gridColumn: 2,
+	gridRow: 1,
+	alignSelf: "start",
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	minInlineSize: "24px",
+	minBlockSize: "24px",
+	margin: 0,
+	padding: 0,
+	border: "1px solid transparent",
+	borderRadius: o.radius.sm,
+	backgroundColor: "transparent",
+	fontFamily: "inherit",
+	fontSize: o.textSize.md,
+	lineHeight: 1,
+	color: o.color.textMuted,
+	cursor: "pointer",
+	transitionProperty: "background-color, color",
+	transitionDuration: o.motion.duration.fast,
+	transitionTimingFunction: o.motion.easeStandard,
+	"&:hover": {
+		backgroundColor: o.color.surfaceHover,
+		color: o.color.text
+	},
+	"&:focus-visible": { ...t },
+	[n]: { transitionDuration: "0s" }
+}), _ = a(function({ tone: e = "info", toneLabel: t = l[e], title: n, children: a, onDismiss: o, dismissLabel: _ = "Dismiss", slotProps: v, className: y, ...b }, x) {
+	let S = o !== void 0;
+	return /* @__PURE__ */ c("div", {
+		...b,
+		ref: x,
+		"data-ui": "alert",
+		"data-tone": e,
+		className: [y, v?.root?.className].filter(Boolean).join(" ") || void 0,
+		css: [
+			u,
+			p[e],
+			S && d,
+			v?.root?.css
+		],
+		children: [/* @__PURE__ */ c("div", {
+			role: e === "danger" ? "alert" : "status",
+			"aria-atomic": "true",
+			css: f,
+			children: [
+				/* @__PURE__ */ s("span", {
+					css: r,
+					children: t
+				}),
+				i(n) && /* @__PURE__ */ s("div", {
+					className: v?.title?.className,
+					css: [m, v?.title?.css],
+					children: n
+				}),
+				i(a) && /* @__PURE__ */ s("div", {
+					className: v?.body?.className,
+					css: [h, v?.body?.css],
+					children: a
+				})
+			]
+		}), S && /* @__PURE__ */ s("button", {
+			type: "button",
+			"data-ui": "alert-dismiss",
+			"aria-label": _,
+			onClick: () => o?.(),
+			className: v?.dismiss?.className,
+			css: [g, v?.dismiss?.css],
+			children: /* @__PURE__ */ s("span", {
+				"aria-hidden": !0,
+				children: "×"
+			})
+		})]
+	});
+});
+//#endregion
+export { _ as t };

package/dist/alert.js

@@ -0,0 +1 @@
+export { t as Alert } from "./alert-BzntPa_5.js";

package/dist/avatar-Dk2ES3ru.js

@@ -0,0 +1,124 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { forwardRef as t, useState as n } from "react";
+import { vars as r } from "@jfrader/tokens/vars";
+import { jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
+//#region src/components/avatar/avatar.tsx
+var o = 2, s = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+function c(e) {
+	let t = Array.from(s.segment(e), ({ segment: e }) => e), n = t[0] ?? "";
+	if (!/\p{Extended_Pictographic}/u.test(n)) return n;
+	let r = "";
+	for (let e of t) {
+		if (!/\p{Extended_Pictographic}/u.test(e)) break;
+		r += e;
+	}
+	return r;
+}
+function l(e) {
+	return e.trim().split(/\s+/).filter(Boolean).slice(0, o).map(c).join("").toLocaleUpperCase();
+}
+var u = e({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	borderRadius: r.radius.full,
+	backgroundColor: r.color.surfaceHover,
+	color: r.color.text,
+	fontWeight: r.fontWeight.medium,
+	lineHeight: 1,
+	userSelect: "none",
+	verticalAlign: "middle"
+}), d = {
+	sm: e({
+		inlineSize: r.space[6],
+		blockSize: r.space[6],
+		fontSize: r.textSize.xs
+	}),
+	md: e({
+		inlineSize: r.space[8],
+		blockSize: r.space[8],
+		fontSize: r.textSize.sm
+	}),
+	lg: e({
+		inlineSize: r.space[10],
+		blockSize: r.space[10],
+		fontSize: r.textSize.md
+	})
+}, f = e({
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "100%",
+	borderRadius: r.radius.full,
+	objectFit: "cover"
+}), p = e({
+	position: "absolute",
+	insetBlockEnd: 0,
+	insetInlineEnd: 0,
+	inlineSize: "25%",
+	blockSize: "25%",
+	"&::before": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		inlineSize: "100%",
+		blockSize: "100%",
+		boxSizing: "border-box",
+		borderRadius: r.radius.full,
+		boxShadow: `0 0 0 2px ${r.color.bg}`
+	}
+}), m = {
+	online: e({ "&::before": { backgroundColor: r.color.success } }),
+	away: e({ "&::before": {
+		border: `2px solid ${r.color.warning}`,
+		backgroundColor: "transparent"
+	} }),
+	busy: e({ "&::before": {
+		backgroundColor: r.color.danger,
+		blockSize: "30%",
+		insetBlockStart: "35%"
+	} }),
+	offline: e({ "&::before": {
+		backgroundColor: r.color.textSubtle,
+		inlineSize: "60%",
+		blockSize: "60%",
+		insetBlockStart: "20%",
+		insetInlineStart: "20%"
+	} })
+}, h = t(function({ name: e, src: t, size: r = "md", status: o, statusLabel: s, slotProps: c, ...h }, g) {
+	let [_, v] = n(), y = t !== void 0 && t !== "" && t !== _, b = o === void 0 ? e : `${e}, ${s ?? o}`;
+	return /* @__PURE__ */ a("span", {
+		...h,
+		ref: g,
+		"data-ui": "avatar",
+		role: "img",
+		"aria-label": b,
+		css: [u, d[r]],
+		children: [y ? /* @__PURE__ */ i("img", {
+			src: t,
+			alt: "",
+			onError: () => v(t),
+			className: c?.image?.className,
+			css: [f, c?.image?.css]
+		}) : /* @__PURE__ */ i("span", {
+			"aria-hidden": "true",
+			className: c?.fallback?.className,
+			css: c?.fallback?.css,
+			children: l(e)
+		}), o !== void 0 && /* @__PURE__ */ i("span", {
+			"aria-hidden": "true",
+			"data-status": o,
+			className: c?.status?.className,
+			css: [
+				p,
+				m[o],
+				c?.status?.css
+			]
+		})]
+	});
+});
+//#endregion
+export { h as t };

package/dist/avatar.js

@@ -0,0 +1 @@
+export { t as Avatar } from "./avatar-Dk2ES3ru.js";

package/dist/badge-DZefC7rm.js

@@ -0,0 +1,102 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { forwardRef as t } from "react";
+import { vars as n } from "@jfrader/tokens/vars";
+import { jsx as r, jsxs as i } from "@emotion/react/jsx-runtime";
+//#region src/components/badge/badge.tsx
+var a = 99, o = e({
+	position: "relative",
+	display: "inline-flex",
+	flexShrink: 0,
+	verticalAlign: "middle"
+}), s = e({
+	position: "absolute",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	boxSizing: "border-box",
+	boxShadow: `0 0 0 2px ${n.color.bg}`,
+	fontWeight: n.fontWeight.medium,
+	lineHeight: 1,
+	whiteSpace: "nowrap",
+	pointerEvents: "none"
+}), c = {
+	standard: e({
+		blockSize: n.space[5],
+		minInlineSize: n.space[5],
+		paddingInline: n.space[1],
+		fontSize: n.textSize.xs
+	}),
+	dot: e({
+		blockSize: n.space[2],
+		inlineSize: n.space[2],
+		borderRadius: n.radius.full
+	})
+}, l = {
+	rectangular: e({ borderRadius: n.radius.sm }),
+	circular: e({ borderRadius: n.radius.full })
+}, u = {
+	"top-start": e({
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		transform: "translate(-50%, -50%)",
+		"&:dir(rtl)": { transform: "translate(50%, -50%)" }
+	}),
+	"top-end": e({
+		insetBlockStart: 0,
+		insetInlineEnd: 0,
+		transform: "translate(50%, -50%)",
+		"&:dir(rtl)": { transform: "translate(-50%, -50%)" }
+	}),
+	"bottom-start": e({
+		insetBlockEnd: 0,
+		insetInlineStart: 0,
+		transform: "translate(-50%, 50%)",
+		"&:dir(rtl)": { transform: "translate(50%, 50%)" }
+	}),
+	"bottom-end": e({
+		insetBlockEnd: 0,
+		insetInlineEnd: 0,
+		transform: "translate(50%, 50%)",
+		"&:dir(rtl)": { transform: "translate(-50%, 50%)" }
+	})
+}, d = {
+	accent: e({
+		backgroundColor: n.color.accent,
+		color: n.color.accentContrast
+	}),
+	danger: e({
+		backgroundColor: n.color.danger,
+		color: n.color.dangerContrast
+	}),
+	neutral: e({
+		backgroundColor: n.color.textMuted,
+		color: n.color.bg
+	})
+}, f = t(function({ children: e, badgeContent: t, max: n = a, showZero: f = !1, invisible: p = !1, variant: m = "standard", tone: h = "accent", anchor: g, overlap: _ = "rectangular", slotProps: v, className: y, ...b }, x) {
+	let S = m === "dot", C = p || m !== "dot" && (t == null || t === !1 || t === 0 && !f), w = typeof t == "number" && t > n ? `${n}+` : t, T = `${g?.vertical ?? "top"}-${g?.horizontal ?? "end"}`, E = [y, v?.root?.className].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ i("span", {
+		...b,
+		ref: x,
+		"data-ui": "badge",
+		className: E,
+		css: [o, v?.root?.css],
+		children: [e, !C && /* @__PURE__ */ r("span", {
+			"data-ui": "badge-marker",
+			"data-variant": m,
+			"data-tone": h,
+			"aria-hidden": S ? "true" : void 0,
+			className: v?.badge?.className,
+			css: [
+				s,
+				c[m],
+				!S && l[_],
+				u[T],
+				d[h],
+				v?.badge?.css
+			],
+			children: S ? null : w
+		})]
+	});
+});
+//#endregion
+export { f as t };

package/dist/badge.js

@@ -0,0 +1 @@
+export { t as Badge } from "./badge-DZefC7rm.js";