@jfrader/ui 0.5.0 → 0.6.0

package/dist/bottom-sheet.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as BottomSheet } from "./bottom-sheet-DPJBFkie.js";
+export { t as BottomSheet } from "./bottom-sheet-BFQKO0Wo.js";

package/dist/{breadcrumbs-Cfw_hgt2.js → breadcrumbs-CG3akw-b.js}

@@ -1,7 +1,8 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./focus-ring-BK5W5_NY.js";
-import { r } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { r as n } from "./media-8yrN85VT.js";
+import { t as r } from "./sx-BJXJ2xJK.js";
 import { createContext as i, useCallback as a, useContext as o, useId as s, useImperativeHandle as c, useLayoutEffect as l, useMemo as u, useRef as d, useState as f } from "react";
 import { vars as p } from "@jfrader/tokens/vars";
 import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
@@ -25,15 +26,22 @@ var v = ([, e], [, t]) => e.node.compareDocumentPosition(t.node) & Node.DOCUMENT
 	lineHeight: p.lineHeight.tight
 }), b = e({
 	display: "inline-flex",
+	minInlineSize: 0,
+	maxInlineSize: "100%",
 	alignItems: "center",
 	gap: p.space[2],
 	color: p.color.textMuted,
 	"&:first-of-type > [data-ui=\"breadcrumbs-separator\"]": { display: "none" }
-}), x = e({ display: "inline-flex" }), S = e({
+}), x = e({
+	display: "inline-flex",
+	flexShrink: 0
+}), S = e({
 	display: "inline-flex",
 	alignItems: "center",
 	gap: p.space[1],
-	minBlockSize: "24px",
+	minBlockSize: p.space[8],
+	minInlineSize: 0,
+	overflowWrap: "anywhere",
 	borderRadius: p.radius.sm,
 	color: "inherit",
 	"& svg": {
@@ -56,10 +64,10 @@ var v = ([, e], [, t]) => e.node.compareDocumentPosition(t.node) & Node.DOCUMENT
 		color: p.color.text,
 		textDecorationColor: "currentColor"
 	},
-	"&:focus-visible": { ...n },
-	[r]: { transitionDuration: "0s" }
+	"&:focus-visible": { ...t },
+	[n]: { transitionDuration: "0s" }
 });
-function w({ ref: e, label: n = "Breadcrumb", separator: r = "/", children: i, className: o, sx: s, ...c }) {
+function w({ ref: e, label: t = "Breadcrumb", separator: n = "/", children: i, className: o, sx: s, ...c }) {
 	let l = d(/* @__PURE__ */ new Map()), [p, h] = f(null), _ = d(null), b = a(() => {
 		let e = Array.from(l.current).sort(v), t = e.some(([, e]) => e.current === !0) ? null : e.at(-1)?.[0] ?? null;
 		_.current !== t && (_.current = t, h(t));
@@ -68,27 +76,27 @@ function w({ ref: e, label: n = "Breadcrumb", separator: r = "/", children: i, c
 	}, [b]), S = a((e) => {
 		l.current.delete(e), b();
 	}, [b]), C = u(() => ({
-		separator: r,
+		separator: n,
 		autoCurrentId: p,
 		register: x,
 		unregister: S
 	}), [
-		r,
+		n,
 		p,
 		x,
 		S
 	]);
 	return /* @__PURE__ */ m(g.Provider, {
 		value: C,
-		children: /* @__PURE__ */ m(t, {
+		children: /* @__PURE__ */ m(r, {
 			className: o,
 			sx: s,
-			children: (t) => /* @__PURE__ */ m("nav", {
+			children: (n) => /* @__PURE__ */ m("nav", {
 				...c,
 				ref: e,
-				"aria-label": n,
+				"aria-label": c["aria-label"] ?? t,
 				"data-ui": "breadcrumbs",
-				className: t,
+				className: n,
 				children: /* @__PURE__ */ m("ol", {
 					css: y,
 					children: i
@@ -98,17 +106,17 @@ function w({ ref: e, label: n = "Breadcrumb", separator: r = "/", children: i, c
 	});
 }
 w.displayName = "Breadcrumbs";
-function T({ ref: e, href: n, current: r, children: i, className: a, sx: o, ...u }) {
+function T({ ref: e, href: t, current: n, children: i, className: a, sx: o, ...u }) {
 	let { separator: f, autoCurrentId: p, register: g, unregister: v } = _("Item"), y = s(), w = d(null);
 	c(e, () => w.current, []), l(() => {
 		let e = w.current;
 		e && g(y, {
 			node: e,
-			current: r
+			current: n
 		});
 	}), l(() => () => v(y), [y, v]);
-	let T = r ?? p === y ? "page" : void 0;
-	return /* @__PURE__ */ m(t, {
+	let T = n ?? p === y ? "page" : void 0;
+	return /* @__PURE__ */ m(r, {
 		className: a,
 		styles: b,
 		sx: o,
@@ -122,12 +130,12 @@ function T({ ref: e, href: n, current: r, children: i, className: a, sx: o, ...u
 				"data-ui": "breadcrumbs-separator",
 				css: x,
 				children: f
-			}), n === void 0 ? /* @__PURE__ */ m("span", {
+			}), t === void 0 ? /* @__PURE__ */ m("span", {
 				"aria-current": T,
 				css: S,
 				children: i
 			}) : /* @__PURE__ */ m("a", {
-				href: n,
+				href: t,
 				"aria-current": T,
 				css: [S, C],
 				children: i

package/dist/breadcrumbs.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Breadcrumbs } from "./breadcrumbs-Cfw_hgt2.js";
+export { t as Breadcrumbs } from "./breadcrumbs-CG3akw-b.js";

package/dist/{button-C92uYFJW.js → button-C6OV0C7J.js}

@@ -1,9 +1,10 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./focus-ring-BK5W5_NY.js";
-import { r } from "./media-8yrN85VT.js";
-import { t as i } from "./icon-wrapper-stN8sD7R.js";
-import { n as a, t as o } from "./loading-ring-B8-30Dl1.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { r as n } from "./media-8yrN85VT.js";
+import { t as r } from "./sx-BJXJ2xJK.js";
+import { t as i } from "./icon-wrapper-C-zMD0uL.js";
+import { n as a, t as o } from "./loading-ring-D0lGrK8z.js";
 import "react";
 import { vars as s } from "@jfrader/tokens/vars";
 import { Fragment as c, jsx as l, jsxs as u } from "@emotion/react/jsx-runtime";
@@ -25,25 +26,25 @@ var f = "&:hover:not(:disabled):not([aria-disabled=\"true\"])", p = e({
 	transitionProperty: "background-color, border-color, color",
 	transitionDuration: s.motion.duration.fast,
 	transitionTimingFunction: s.motion.easeStandard,
-	"&:focus-visible": { ...n },
+	"&:focus-visible": { ...t },
 	"&:disabled, &[aria-disabled=\"true\"]": {
 		cursor: "not-allowed",
 		opacity: .55
 	},
-	[r]: { transitionDuration: "0s" }
+	[n]: { transitionDuration: "0s" }
 }), m = {
 	sm: e({
-		blockSize: "32px",
+		blockSize: s.space[8],
 		paddingInline: s.space[3],
 		fontSize: s.textSize.sm
 	}),
 	md: e({
-		blockSize: "40px",
+		blockSize: s.space[10],
 		paddingInline: s.space[4],
 		fontSize: s.textSize.sm
 	}),
 	lg: e({
-		blockSize: "48px",
+		blockSize: s.space[12],
 		paddingInline: s.space[5],
 		fontSize: s.textSize.md
 	})
@@ -62,7 +63,7 @@ var f = "&:hover:not(:disabled):not([aria-disabled=\"true\"])", p = e({
 		neutral: e({
 			backgroundColor: s.color.surfaceRaised,
 			color: s.color.text,
-			borderColor: s.color.border,
+			borderColor: s.color.borderControl,
 			[f]: { backgroundColor: s.color.surfaceHover }
 		})
 	},
@@ -86,19 +87,19 @@ var f = "&:hover:not(:disabled):not([aria-disabled=\"true\"])", p = e({
 	outline: {
 		accent: e({
 			backgroundColor: "transparent",
-			borderColor: s.color.accentBorder,
+			borderColor: s.color.borderControl,
 			color: s.color.accentText,
 			[f]: { backgroundColor: s.color.accentSoft }
 		}),
 		danger: e({
 			backgroundColor: "transparent",
-			borderColor: s.color.dangerBorder,
+			borderColor: s.color.borderControl,
 			color: s.color.dangerText,
 			[f]: { backgroundColor: s.color.dangerSoft }
 		}),
 		neutral: e({
 			backgroundColor: "transparent",
-			borderColor: s.color.borderStrong,
+			borderColor: s.color.borderControl,
 			color: s.color.text,
 			[f]: { backgroundColor: s.color.surfaceHover }
 		})
@@ -130,9 +131,9 @@ var f = "&:hover:not(:disabled):not([aria-disabled=\"true\"])", p = e({
 	...o,
 	inlineSize: "1em",
 	blockSize: "1em",
-	[r]: { animation: `${a} 1.2s ease-in-out infinite alternate` }
+	[n]: { animation: `${a} 1.2s ease-in-out infinite alternate` }
 });
-function v({ ref: e, variant: n = "solid", tone: r = "neutral", size: a = "md", loading: o = !1, startIcon: s, endIcon: f, type: v, children: y, onClick: b, className: x, css: S, sx: C, render: w, ...T }) {
+function v({ ref: e, variant: t = "solid", tone: n = "neutral", size: a = "md", loading: o = !1, startIcon: s, endIcon: f, type: v, children: y, onClick: b, className: x, css: S, sx: C, render: w, ...T }) {
 	let { "data-ui": E, ...D } = T, O = w && E !== void 0 ? `${E} button` : "button", k = d([e]), A = D["aria-disabled"], j = o || A === !0 || A === "true" || w !== void 0 && D.disabled === !0, M = b, N = (e) => {
 		j ? e.preventDefault() : M?.(e);
 	}, P = o ? /* @__PURE__ */ l("span", { css: _ }) : s, F = /* @__PURE__ */ u(c, { children: [
@@ -150,7 +151,7 @@ function v({ ref: e, variant: n = "solid", tone: r = "neutral", size: a = "md",
 	] });
 	if (w) {
 		let { disabled: e, ...i } = D;
-		return /* @__PURE__ */ l(t, {
+		return /* @__PURE__ */ l(r, {
 			className: x,
 			sx: C,
 			children: (e) => w({
@@ -166,19 +167,19 @@ function v({ ref: e, variant: n = "solid", tone: r = "neutral", size: a = "md",
 					p,
 					g,
 					m[a],
-					h[n][r],
+					h[t][n],
 					S
 				],
 				children: F
 			})
 		});
 	}
-	return /* @__PURE__ */ l(t, {
+	return /* @__PURE__ */ l(r, {
 		className: x,
 		styles: [
 			p,
 			m[a],
-			h[n][r],
+			h[t][n],
 			S
 		],
 		sx: C,