@bfrs/agentic-components 0.3.0 → 0.3.1

package/BFRS_AGENTIC_COMPONENTS.md

@@ -24,6 +24,15 @@ import "@bfrs/agentic-components/styles";
 
 The stylesheet is safe to import globally. It does not ship Tailwind preflight, page-level resets, font-face declarations, unprefixed utilities, or generic keyframes.
 
+The main stylesheet references the SF Pro family by name only (`--bfrs-font-sans`) and ships no font files. To have the library download and apply SF Pro across the **whole app**, additionally import the opt-in font stylesheet:
+
+```tsx
+import "@bfrs/agentic-components/styles";
+import "@bfrs/agentic-components/fonts.css";
+```
+
+`fonts.css` bundles the SF Pro Display webfont (relative URLs, so any base path works), defines `--bfrs-font-sans` at the document root, and applies it to `html, body`. Angular consumers import it the same way (`@import "@bfrs/agentic-components/fonts.css";` in `styles.scss`, or add `dist/fonts.css` to the `angular.json` styles array). Skip it if the host app provides its own font.
+
 Import components by name:
 
 ```tsx
@@ -248,14 +257,19 @@ Semantic typography. Always use this instead of raw `<p>`, `<h1>`, `<span>` for
 ```tsx
 <Text variant="h2">Welcome back</Text>
 <Text variant="body" tone="muted">Last seen 2 hours ago</Text>
+<Text variant="caption" weight="bold">Bold small label</Text>
+<Text variant="h1" weight="normal">Light large heading</Text>
 ```
 
 | Prop | Type | Default |
 |------|------|---------|
-| `variant` | `"display" \| "h1" \| "h2" \| "h3" \| "title" \| "body" \| "body-sm" \| "caption" \| "label"` | `"body"` |
+| `variant` | `"display" \| "h1" \| "h2" \| "h3" \| "title" \| "body" \| "body-sm" \| "body-xs" \| "caption" \| "label"` | `"body"` |
 | `tone` | `"primary" \| "secondary" \| "muted" \| "disabled" \| "danger" \| "success" \| "accent"` | `"primary"` |
+| `weight` | `"normal" \| "medium" \| "semibold" \| "bold"` | per variant |
 | `as` | `ElementType` | inferred from variant |
 
+Each variant ships a sensible default weight; pass `weight` to override it — e.g. make a small `caption`/`body-xs` bold, or a large `h1`/`display` normal.
+
 ---
 
 #### `Icon`

package/README.md

@@ -42,6 +42,17 @@ export function Example() {
 
 The stylesheet is safe to import globally: it does not ship Tailwind preflight, page-level resets, global font-face declarations, unprefixed utilities, or generic keyframes. React surfaces should still render inside `BfrsProvider`; the provider owns `--bfrs-*` theme variables and passes the same scope to Radix portals.
 
+### Optional: bundled SF Pro font
+
+The main stylesheet only references the SF Pro family by name (`--bfrs-font-sans`) — it ships no font files, so by default you supply the font. To have the library download and apply SF Pro across your **whole app**, additionally import the opt-in font stylesheet once at your entry point:
+
+```tsx
+import "@bfrs/agentic-components/styles";
+import "@bfrs/agentic-components/fonts.css";
+```
+
+This bundles the SF Pro Display webfont (relative URLs, so any base path works), defines `--bfrs-font-sans` at the document root, and applies it to `html, body`. Keeping it separate means the main stylesheet stays free of global `@font-face`/`html`/`body` rules.
+
 Most DOM-backed components forward compatible React props such as `onClick`, `onKeyDown`, `aria-*`, `data-*`, `className`, `style`, and refs. Controlled components expose explicit callbacks such as `onValueChange`, `onOpenChange`, `onSort`, `onRowClick`, and `onPageChange`.
 
 Library-owned Tailwind utilities are prefixed with `bfrs-`, for example `bfrs-flex`, `hover:bfrs-bg-primary`, and `bfrs-animate-shimmer`. Unprefixed classes passed through `className` are treated as host-app classes.
@@ -60,14 +71,17 @@ import "@bfrs/agentic-components/custom-elements";
 ```scss
 /* styles.scss */
 @import "@bfrs/agentic-components/styles";
+/* Optional — bundled SF Pro, applied to the whole app: */
+@import "@bfrs/agentic-components/fonts.css";
 ```
 
-If Angular does not resolve the package style export, add the built CSS file in `angular.json`:
+If Angular does not resolve the package style export, add the built CSS files in `angular.json`:
 
 ```json
 {
   "styles": [
     "node_modules/@bfrs/agentic-components/dist/style.css",
+    "node_modules/@bfrs/agentic-components/dist/fonts.css",
     "src/styles.scss"
   ]
 }

package/dist/components/ui/primitives/Text/Text.d.ts

@@ -1,15 +1,17 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const textVariants: (props?: ({
-    variant?: "caption" | "display" | "body" | "title" | "h1" | "h2" | "h3" | "label" | "body-sm" | null | undefined;
+    variant?: "caption" | "display" | "body" | "title" | "h1" | "h2" | "h3" | "label" | "body-sm" | "body-xs" | null | undefined;
     tone?: "accent" | "primary" | "success" | "danger" | "disabled" | "muted" | "secondary" | null | undefined;
+    weight?: "normal" | "medium" | "bold" | "semibold" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TextProps = HTMLAttributes<HTMLElement> & VariantProps<typeof textVariants> & {
     as?: ElementType;
 };
 export declare const Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & VariantProps<(props?: ({
-    variant?: "caption" | "display" | "body" | "title" | "h1" | "h2" | "h3" | "label" | "body-sm" | null | undefined;
+    variant?: "caption" | "display" | "body" | "title" | "h1" | "h2" | "h3" | "label" | "body-sm" | "body-xs" | null | undefined;
     tone?: "accent" | "primary" | "success" | "danger" | "disabled" | "muted" | "secondary" | null | undefined;
+    weight?: "normal" | "medium" | "bold" | "semibold" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     as?: ElementType;
 } & import('react').RefAttributes<HTMLElement>>;

package/dist/custom-elements.js

@@ -34070,10 +34070,10 @@ const fR = f.forwardRef(
     const D = b !== void 0, [O, _] = f.useState(w), L = D ? b : O, z = (J = n.find((ee) => ee.value === L)) == null ? void 0 : J.label, F = f.useRef(null), [H, W] = f.useState(!1);
     f.useEffect(() => {
       const ee = F.current;
-      if (!ee || typeof ResizeObserver > "u") return;
+      if (!ee || typeof globalThis.ResizeObserver > "u") return;
       const ye = () => W(ee.scrollWidth > ee.clientWidth + 1);
       ye();
-      const je = new ResizeObserver(ye);
+      const je = new globalThis.ResizeObserver(ye);
       return je.observe(ee), () => je.disconnect();
     }, [z]);
     const Y = (ee) => {
@@ -34258,6 +34258,7 @@ const _U = Ki("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]"
     },
@@ -34269,6 +34270,15 @@ const _U = Ki("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: {
@@ -34283,11 +34293,12 @@ const _U = Ki("bfrs-tracking-normal", {
   title: "p",
   body: "p",
   "body-sm": "p",
+  "body-xs": "p",
   caption: "p",
   label: "span"
-}, O1 = f.forwardRef(({ as: n, className: i, variant: o, tone: d, ...m }, g) => {
-  const b = o ?? "body", w = n ?? LU[b];
-  return /* @__PURE__ */ p.jsx(w, { ref: g, className: G(_U({ variant: b, tone: d }), i), ...m });
+}, O1 = f.forwardRef(({ as: n, className: i, variant: o, tone: d, weight: m, ...g }, b) => {
+  const w = o ?? "body", E = n ?? LU[w];
+  return /* @__PURE__ */ p.jsx(E, { ref: b, className: G(_U({ variant: w, tone: d, weight: m }), i), ...g });
 });
 O1.displayName = "Text";
 const oS = {
@@ -35338,7 +35349,7 @@ function GR({
                 {
                   "aria-label": g,
                   title: g,
-                  variant: "ghost",
+                  variant: "secondary",
                   size: "sm",
                   className: G(
                     "bfrs-size-[26px] bfrs-rounded-[6px] bfrs-bg-surface-card bfrs-text-text-muted hover:bfrs-bg-primary-soft",
@@ -36201,7 +36212,7 @@ class ck extends ys {
 Re(ck, "tagName", "grid");
 class fk extends ys {
   static get observedAttributes() {
-    return ["as", "tone", "variant", ...Be];
+    return ["as", "tone", "variant", "weight", ...Be];
   }
   component() {
     return O1;
@@ -36211,7 +36222,8 @@ class fk extends ys {
       as: this.textAttribute("as"),
       className: this.classNameAttribute(),
       tone: this.textAttribute("tone", "primary"),
-      variant: this.textAttribute("variant", "body")
+      variant: this.textAttribute("variant", "body"),
+      weight: this.textAttribute("weight")
     };
   }
 }