@bfrs/agentic-components 0.3.0 → 0.3.2

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`
@@ -1544,10 +1558,13 @@ Chat input with attachment and action slots. Submits on `Ctrl+Enter`.
 | `onSubmit` | `() => void` | — |
 | `loading` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
+| `size` | `"sm" \| "md"` | `"md"` |
 | `placeholder` | `string` | `"Ask me anything"` |
 | `attachmentSlot` | `ReactNode` | — |
 | `actionSlot` | `ReactNode` | — |
 
+Use `size="sm"` for a compact composer in sidebars, inline threads, or dense workspace rails.
+
 ---
 
 #### `FullPageLoader`

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/patterns/ChatComposer/ChatComposer.d.ts

@@ -5,6 +5,8 @@ export type ChatComposerProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
     onSubmit?: () => void;
     loading?: boolean;
     disabled?: boolean;
+    /** `"sm"` is a compact composer for inline/sidebar placements; `"md"` is the default. */
+    size?: "sm" | "md";
     attachmentSlot?: ReactNode;
     actionSlot?: ReactNode;
 };
@@ -14,6 +16,8 @@ export declare const ChatComposer: import('react').ForwardRefExoticComponent<Omi
     onSubmit?: () => void;
     loading?: boolean;
     disabled?: boolean;
+    /** `"sm"` is a compact composer for inline/sidebar placements; `"md"` is the default. */
+    size?: "sm" | "md";
     attachmentSlot?: ReactNode;
     actionSlot?: ReactNode;
 } & import('react').RefAttributes<HTMLTextAreaElement>>;

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>>;