@bfrs/agentic-components 0.3.0 → 0.3.1

package/dist/fonts.css

@@ -0,0 +1,152 @@
+/*
+ * @bfrs/agentic-components/fonts.css — OPT-IN SF Pro Display webfont.
+ *
+ * The main stylesheet (`@bfrs/agentic-components/styles`) only references the
+ * font family by NAME (`--bfrs-font-sans`) and intentionally ships no
+ * `@font-face` so it never leaks into a host document. Import THIS file once,
+ * in addition, when you want the library to provide and apply SF Pro itself:
+ *
+ *   import "@bfrs/agentic-components/styles";
+ *   import "@bfrs/agentic-components/fonts.css";
+ *
+ * It bundles the font files (relative URLs, so any base path works), defines
+ * `--bfrs-font-sans` at the document root, and applies it to `html, body` so
+ * the WHOLE app uses SF Pro — not just BFRS-scoped components.
+ */
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-Ultralight.otf") format("opentype");
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-UltralightItalic.otf") format("opentype");
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-Light.otf") format("opentype");
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-LightItalic.otf") format("opentype");
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-Regular.otf") format("opentype");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-RegularItalic.otf") format("opentype");
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-Medium.otf") format("opentype");
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-MediumItalic.otf") format("opentype");
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-Semibold.otf") format("opentype");
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-SemiboldItalic.otf") format("opentype");
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-Bold.otf") format("opentype");
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-BoldItalic.otf") format("opentype");
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-Heavy.otf") format("opentype");
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-HeavyItalic.otf") format("opentype");
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-Black.otf") format("opentype");
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SF Pro Display";
+  src: url("./font/sfprofonts/SF-Pro-Display-BlackItalic.otf") format("opentype");
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+}
+
+:root {
+  --bfrs-font-sans: "SF Pro Display", "SF Pro Text", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+html,
+body {
+  font-family: var(--bfrs-font-sans);
+}

package/dist/index.js

@@ -3230,6 +3230,7 @@ const Cd = je("bfrs-tracking-normal", {
       title: "bfrs-text-xl bfrs-font-semibold bfrs-leading-snug",
       body: "bfrs-text-base bfrs-font-normal bfrs-leading-7",
       "body-sm": "bfrs-text-sm bfrs-font-normal bfrs-leading-[1.45]",
+      "body-xs": "bfrs-text-[12px] bfrs-font-normal bfrs-leading-[1.4]",
       caption: "bfrs-text-xs bfrs-font-normal bfrs-leading-normal",
       label: "bfrs-text-[10px] bfrs-font-bold bfrs-uppercase bfrs-leading-normal bfrs-tracking-[0.16em]"
     },
@@ -3241,6 +3242,15 @@ const Cd = je("bfrs-tracking-normal", {
       danger: "bfrs-text-danger",
       success: "bfrs-text-success",
       accent: "bfrs-text-accent"
+    },
+    // Optional override for each variant's default weight — e.g. make a small
+    // caption bold, or a large heading normal. Applied after the variant class,
+    // so it wins the font-weight conflict via tailwind-merge in cn().
+    weight: {
+      normal: "bfrs-font-normal",
+      medium: "bfrs-font-medium",
+      semibold: "bfrs-font-semibold",
+      bold: "bfrs-font-bold"
     }
   },
   defaultVariants: {
@@ -3255,11 +3265,12 @@ const Cd = je("bfrs-tracking-normal", {
   title: "p",
   body: "p",
   "body-sm": "p",
+  "body-xs": "p",
   caption: "p",
   label: "span"
-}, bn = G(({ as: e, className: r, variant: t, tone: s, ...a }, o) => {
-  const l = t ?? "body", c = e ?? Md[l];
-  return /* @__PURE__ */ i(c, { ref: o, className: E(Cd({ variant: l, tone: s }), r), ...a });
+}, bn = G(({ as: e, className: r, variant: t, tone: s, weight: a, ...o }, l) => {
+  const c = t ?? "body", f = e ?? Md[c];
+  return /* @__PURE__ */ i(f, { ref: l, className: E(Cd({ variant: c, tone: s, weight: a }), r), ...o });
 });
 bn.displayName = "Text";
 const Ad = {
@@ -8465,10 +8476,10 @@ const ym = G(
     const p = l !== void 0, [v, h] = ae(c), g = p ? l : v, x = (k = e.find((M) => M.value === g)) == null ? void 0 : k.label, y = Fr(null), [w, C] = ae(!1);
     Pr(() => {
       const M = y.current;
-      if (!M || typeof ResizeObserver > "u") return;
+      if (!M || typeof globalThis.ResizeObserver > "u") return;
       const V = () => C(M.scrollWidth > M.clientWidth + 1);
       V();
-      const $ = new ResizeObserver(V);
+      const $ = new globalThis.ResizeObserver(V);
       return $.observe(M), () => $.disconnect();
     }, [x]);
     const A = (M) => {
@@ -13984,7 +13995,7 @@ function G6({
                 {
                   "aria-label": o,
                   title: o,
-                  variant: "ghost",
+                  variant: "secondary",
                   size: "sm",
                   className: E(
                     "bfrs-size-[26px] bfrs-rounded-[6px] bfrs-bg-surface-card bfrs-text-text-muted hover:bfrs-bg-primary-soft",