@jfrader/ui 0.5.0 → 0.6.0

package/dist/user-menu.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as UserMenu } from "./user-menu-DzELTg1x.js";

package/dist/{visually-hidden-BJdvqqvn.js → visually-hidden-DgVO3NaB.js}

@@ -1,5 +1,5 @@
 'use client';
-import { r as e } from "./sx-Dx9JUKp5.js";
+import { i as e } from "./css-BYJhdGh-.js";
 //#region src/styling/visually-hidden.ts
 var t = e({
 	position: "absolute",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jfrader/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "React components styled with Emotion and themed through CSS custom properties.",
   "keywords": [
     "react",
@@ -30,6 +30,10 @@
       "types": "./dist/types/components/accordion/index.d.ts",
       "import": "./dist/accordion.js"
     },
+    "./activity-rings": {
+      "types": "./dist/types/components/activity-rings/index.d.ts",
+      "import": "./dist/activity-rings.js"
+    },
     "./alert": {
       "types": "./dist/types/components/alert/index.d.ts",
       "import": "./dist/alert.js"
@@ -50,6 +54,10 @@
       "types": "./dist/types/components/badge/index.d.ts",
       "import": "./dist/badge.js"
     },
+    "./billing-toggle": {
+      "types": "./dist/types/components/billing-toggle/index.d.ts",
+      "import": "./dist/billing-toggle.js"
+    },
     "./bottom-sheet": {
       "types": "./dist/types/components/bottom-sheet/index.d.ts",
       "import": "./dist/bottom-sheet.js"
@@ -62,6 +70,10 @@
       "types": "./dist/types/components/button/index.d.ts",
       "import": "./dist/button.js"
     },
+    "./button-group": {
+      "types": "./dist/types/components/button-group/index.d.ts",
+      "import": "./dist/button-group.js"
+    },
     "./calendar": {
       "types": "./dist/types/components/calendar/index.d.ts",
       "import": "./dist/calendar.js"
@@ -74,6 +86,10 @@
       "types": "./dist/types/components/carousel/index.d.ts",
       "import": "./dist/carousel.js"
     },
+    "./chat-thread": {
+      "types": "./dist/types/components/chat-thread/index.d.ts",
+      "import": "./dist/chat-thread.js"
+    },
     "./checkbox": {
       "types": "./dist/types/components/checkbox/index.d.ts",
       "import": "./dist/checkbox.js"
@@ -98,10 +114,18 @@
       "types": "./dist/types/components/command-palette/index.d.ts",
       "import": "./dist/command-palette.js"
     },
+    "./comment-thread": {
+      "types": "./dist/types/components/comment-thread/index.d.ts",
+      "import": "./dist/comment-thread.js"
+    },
     "./container": {
       "types": "./dist/types/components/container/index.d.ts",
       "import": "./dist/container.js"
     },
+    "./context-menu": {
+      "types": "./dist/types/components/context-menu/index.d.ts",
+      "import": "./dist/context-menu.js"
+    },
     "./copy-button": {
       "types": "./dist/types/components/copy-button/index.d.ts",
       "import": "./dist/copy-button.js"
@@ -138,6 +162,10 @@
       "types": "./dist/types/components/expandable-card/index.d.ts",
       "import": "./dist/expandable-card.js"
     },
+    "./expanding-search": {
+      "types": "./dist/types/components/expanding-search/index.d.ts",
+      "import": "./dist/expanding-search.js"
+    },
     "./file-dropzone": {
       "types": "./dist/types/components/file-dropzone/index.d.ts",
       "import": "./dist/file-dropzone.js"
@@ -174,6 +202,22 @@
       "types": "./dist/types/components/kbd/index.d.ts",
       "import": "./dist/kbd.js"
     },
+    "./keycap-keyboard": {
+      "types": "./dist/types/components/keycap-keyboard/index.d.ts",
+      "import": "./dist/keycap-keyboard.js"
+    },
+    "./lightbox-gallery": {
+      "types": "./dist/types/components/lightbox-gallery/index.d.ts",
+      "import": "./dist/lightbox-gallery.js"
+    },
+    "./link-unfurl": {
+      "types": "./dist/types/components/link-unfurl/index.d.ts",
+      "import": "./dist/link-unfurl.js"
+    },
+    "./locale-switcher": {
+      "types": "./dist/types/components/locale-switcher/index.d.ts",
+      "import": "./dist/locale-switcher.js"
+    },
     "./mention-input": {
       "types": "./dist/types/components/mention-input/index.d.ts",
       "import": "./dist/mention-input.js"
@@ -194,6 +238,14 @@
       "types": "./dist/types/components/navigation/index.d.ts",
       "import": "./dist/navigation.js"
     },
+    "./next": {
+      "types": "./dist/types/components/next/index.d.ts",
+      "import": "./dist/next.js"
+    },
+    "./now-playing": {
+      "types": "./dist/types/components/now-playing/index.d.ts",
+      "import": "./dist/now-playing.js"
+    },
     "./pagination": {
       "types": "./dist/types/components/pagination/index.d.ts",
       "import": "./dist/pagination.js"
@@ -202,6 +254,10 @@
       "types": "./dist/types/components/password-field/index.d.ts",
       "import": "./dist/password-field.js"
     },
+    "./photo-grid": {
+      "types": "./dist/types/components/photo-grid/index.d.ts",
+      "import": "./dist/photo-grid.js"
+    },
     "./pill": {
       "types": "./dist/types/components/pill/index.d.ts",
       "import": "./dist/pill.js"
@@ -242,6 +298,14 @@
       "types": "./dist/types/components/select/index.d.ts",
       "import": "./dist/select.js"
     },
+    "./sheet-stack": {
+      "types": "./dist/types/components/sheet-stack/index.d.ts",
+      "import": "./dist/sheet-stack.js"
+    },
+    "./shortcut-recorder": {
+      "types": "./dist/types/components/shortcut-recorder/index.d.ts",
+      "import": "./dist/shortcut-recorder.js"
+    },
     "./signature-pad": {
       "types": "./dist/types/components/signature-pad/index.d.ts",
       "import": "./dist/signature-pad.js"
@@ -274,6 +338,10 @@
       "types": "./dist/types/components/stepper/index.d.ts",
       "import": "./dist/stepper.js"
     },
+    "./stretch-refresh": {
+      "types": "./dist/types/components/stretch-refresh/index.d.ts",
+      "import": "./dist/stretch-refresh.js"
+    },
     "./swipe-actions": {
       "types": "./dist/types/components/swipe-actions/index.d.ts",
       "import": "./dist/swipe-actions.js"
@@ -302,6 +370,10 @@
       "types": "./dist/types/components/theme-root/index.d.ts",
       "import": "./dist/theme-root.js"
     },
+    "./theme-switch": {
+      "types": "./dist/types/components/theme-switch/index.d.ts",
+      "import": "./dist/theme-switch.js"
+    },
     "./time-picker": {
       "types": "./dist/types/components/time-picker/index.d.ts",
       "import": "./dist/time-picker.js"
@@ -333,6 +405,10 @@
     "./usage-meter": {
       "types": "./dist/types/components/usage-meter/index.d.ts",
       "import": "./dist/usage-meter.js"
+    },
+    "./user-menu": {
+      "types": "./dist/types/components/user-menu/index.d.ts",
+      "import": "./dist/user-menu.js"
     }
   },
   "publishConfig": {
@@ -343,23 +419,33 @@
     "@emotion/styled": "^11.14.0",
     "@floating-ui/react": "^0.27.20",
     "motion": "^14.1.0",
-    "@jfrader/tokens": "0.5.0"
+    "@jfrader/tokens": "0.6.0"
   },
   "peerDependencies": {
+    "@emotion/cache": "^11.14.0",
+    "next": "^15.0.0 || ^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "shiki": "^4.4.3"
   },
   "peerDependenciesMeta": {
+    "@emotion/cache": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
     "shiki": {
       "optional": true
     }
   },
   "devDependencies": {
+    "@emotion/cache": "^11.14.0",
     "@storybook/react-vite": "^10.6.1",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.2",
+    "next": "^16.4.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "shiki": "^4.4.3",

package/dist/accordion-xCI_u0BV.js

@@ -1,198 +0,0 @@
-'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { t as n } from "./disclosure-caret-C5T3fcl6.js";
-import { t as r } from "./focus-ring-BK5W5_NY.js";
-import { r as i } from "./media-8yrN85VT.js";
-import { n as a } from "./roving-focus-CYlo_Kf8.js";
-import { t as o } from "./use-controlled-state-DpeVQZNR.js";
-import { createContext 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 = s(null), m = s(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": { ...n },
-	"&[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": { ...r },
-	[i]: {
-		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" }
-});
-function w({ ref: e, value: n, defaultValue: r, onValueChange: i, type: s = "single", collapsible: c = !0, onKeyDown: l, className: d, sx: m, ...h }) {
-	let [g, b] = o(n, r, i), x = u(() => {
-		let e = y(g, s), t = c || e.length > 1;
-		return {
-			openValues: e,
-			toggle: (n) => {
-				let r = e.includes(n);
-				(!r || t) && b(s === "multiple" ? r ? e.filter((e) => e !== n) : [...e, n] : r ? _ : n);
-			},
-			canCollapse: t
-		};
-	}, [
-		g,
-		b,
-		s,
-		c
-	]), S = (e) => {
-		l?.(e), !e.defaultPrevented && a(e, e.currentTarget, "vertical", v);
-	};
-	return /* @__PURE__ */ f(p.Provider, {
-		value: x,
-		children: /* @__PURE__ */ f(t, {
-			className: d,
-			sx: m,
-			children: (t) => /* @__PURE__ */ f("div", {
-				...h,
-				ref: e,
-				"data-ui": "accordion",
-				onKeyDown: S,
-				className: t
-			})
-		})
-	});
-}
-w.displayName = "Accordion";
-function T({ ref: e, value: n, disabled: r = !1, className: i, sx: a, ...o }) {
-	let { openValues: s } = h("Item"), c = l(), d = s.includes(n), p = u(() => ({
-		value: n,
-		disabled: r,
-		expanded: d,
-		triggerId: `${c}-trigger`,
-		panelId: `${c}-panel`
-	}), [
-		n,
-		r,
-		d,
-		c
-	]);
-	return /* @__PURE__ */ f(m.Provider, {
-		value: p,
-		children: /* @__PURE__ */ f(t, {
-			className: i,
-			styles: b,
-			sx: a,
-			children: (t) => /* @__PURE__ */ f("div", {
-				...o,
-				ref: e,
-				"data-ui": "accordion-item",
-				"data-state": d ? "open" : "closed",
-				"data-disabled": r ? "" : void 0,
-				className: t
-			})
-		})
-	});
-}
-T.displayName = "Accordion.Item";
-function E({ ref: e, onClick: n, disabled: r, className: i, sx: a, ...o }) {
-	let { toggle: s, canCollapse: c } = h("Trigger"), { value: l, disabled: u, expanded: d, triggerId: p, panelId: m } = g("Trigger"), _ = d && !c, v = (e) => {
-		n?.(e), !e.defaultPrevented && s(l);
-	};
-	return /* @__PURE__ */ f("h3", {
-		"data-ui": "accordion-heading",
-		css: x,
-		children: /* @__PURE__ */ f(t, {
-			className: i,
-			styles: S,
-			sx: a,
-			children: (t) => /* @__PURE__ */ f("button", {
-				...o,
-				ref: e,
-				type: "button",
-				id: p,
-				"data-ui": "accordion-trigger",
-				"data-state": d ? "open" : "closed",
-				"aria-expanded": d,
-				"aria-controls": m,
-				"aria-disabled": _ || void 0,
-				disabled: u || r,
-				onClick: v,
-				className: t
-			})
-		})
-	});
-}
-E.displayName = "Accordion.Trigger";
-function D({ ref: e, "aria-labelledby": n, className: r, sx: i, ...a }) {
-	let { expanded: o, triggerId: s, panelId: c } = g("Panel"), l = [n, s].filter(Boolean).join(" ");
-	return /* @__PURE__ */ f(t, {
-		className: r,
-		styles: C,
-		sx: i,
-		children: (t) => /* @__PURE__ */ f("div", {
-			...a,
-			ref: e,
-			role: "region",
-			id: c,
-			"aria-labelledby": l,
-			hidden: !o,
-			"data-ui": "accordion-panel",
-			"data-state": o ? "open" : "closed",
-			className: t
-		})
-	});
-}
-D.displayName = "Accordion.Panel";
-var O = Object.assign(w, {
-	Item: T,
-	Trigger: E,
-	Panel: D
-});
-//#endregion
-export { O as t };

package/dist/avatar-BahDVO9t.js

@@ -1,132 +0,0 @@
-'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { 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%"
-	} })
-};
-function h({ ref: e, name: r, src: o, size: s = "md", status: c, statusLabel: h, slotProps: g, className: _, sx: v, ...y }) {
-	let [b, x] = n(), S = o !== void 0 && o !== "" && o !== b, C = c === void 0 ? r : `${r}, ${h ?? c}`;
-	return /* @__PURE__ */ i(t, {
-		className: _,
-		styles: [u, d[s]],
-		sx: v,
-		children: (t) => /* @__PURE__ */ a("span", {
-			...y,
-			ref: e,
-			"data-ui": "avatar",
-			role: "img",
-			"aria-label": C,
-			className: t,
-			children: [S ? /* @__PURE__ */ i("img", {
-				src: o,
-				alt: "",
-				onError: () => x(o),
-				className: g?.image?.className,
-				css: [f, g?.image?.css]
-			}) : /* @__PURE__ */ i("span", {
-				"aria-hidden": "true",
-				className: g?.fallback?.className,
-				css: g?.fallback?.css,
-				children: l(r)
-			}), c !== void 0 && /* @__PURE__ */ i("span", {
-				"aria-hidden": "true",
-				"data-status": c,
-				className: g?.status?.className,
-				css: [
-					p,
-					m[c],
-					g?.status?.css
-				]
-			})]
-		})
-	});
-}
-h.displayName = "Avatar";
-//#endregion
-export { h as t };

package/dist/badge-B_sLygxU.js

@@ -1,108 +0,0 @@
-'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-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
-	})
-};
-function f({ ref: e, children: n, badgeContent: f, max: p = a, showZero: m = !1, invisible: h = !1, variant: g = "standard", tone: _ = "accent", anchor: v, overlap: y = "rectangular", slotProps: b, className: x, sx: S, ...C }) {
-	let w = g === "dot", T = h || g !== "dot" && (f == null || f === !1 || f === 0 && !m), E = typeof f == "number" && f > p ? `${p}+` : f, D = `${v?.vertical ?? "top"}-${v?.horizontal ?? "end"}`, O = [x, b?.root?.className].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ r(t, {
-		className: O,
-		styles: [o, b?.root?.css],
-		sx: S,
-		children: (t) => /* @__PURE__ */ i("span", {
-			...C,
-			ref: e,
-			"data-ui": "badge",
-			className: t,
-			children: [n, !T && /* @__PURE__ */ r("span", {
-				"data-ui": "badge-marker",
-				"data-variant": g,
-				"data-tone": _,
-				"aria-hidden": w ? "true" : void 0,
-				className: b?.badge?.className,
-				css: [
-					s,
-					c[g],
-					!w && l[y],
-					u[D],
-					d[_],
-					b?.badge?.css
-				],
-				children: w ? null : E
-			})]
-		})
-	});
-}
-f.displayName = "Badge";
-//#endregion
-export { f as t };