@bfrs/agentic-components 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BFRS_AGENTIC_COMPONENTS.md +10 -8
- package/package.json +1 -1
|
@@ -39,7 +39,7 @@ import { Button, Input, Modal, DataTable, DateRangePicker, ToastProvider, useToa
|
|
|
39
39
|
|
|
40
40
|
## Design System Conventions
|
|
41
41
|
|
|
42
|
-
- **
|
|
42
|
+
- **Control sizes** use `"xs" | "sm" | "md" | "lg"` where supported — default is `"md"` unless noted. Use `xs` for extra-compact dashboard toolbar/filter controls.
|
|
43
43
|
- **Tones** are always `"neutral" | "primary" | "brand" | "success" | "warning" | "danger" | "info"`
|
|
44
44
|
- **Variants** control visual style (filled vs. outline vs. ghost, etc.)
|
|
45
45
|
- All interactive components forward refs and spread native HTML props
|
|
@@ -173,7 +173,7 @@ import { MagnifyingGlass } from "@phosphor-icons/react";
|
|
|
173
173
|
| Prop | Type | Default |
|
|
174
174
|
|------|------|---------|
|
|
175
175
|
| `icon` | `PhosphorIconComponent` | **required** |
|
|
176
|
-
| `size` | `"sm" \| "md" \| "lg" \| number` | `"md"` |
|
|
176
|
+
| `size` | `"xs" \| "sm" \| "md" \| "lg" \| number` | `"md"` |
|
|
177
177
|
| `weight` | `"thin" \| "light" \| "regular" \| "bold" \| "fill" \| "duotone"` | `"regular"` |
|
|
178
178
|
| `decorative` | `boolean` | `true` |
|
|
179
179
|
|
|
@@ -208,7 +208,7 @@ Primary interactive element. Covers all CTA patterns.
|
|
|
208
208
|
| Prop | Type | Default |
|
|
209
209
|
|------|------|---------|
|
|
210
210
|
| `variant` | `"primary" \| "secondary" \| "tertiary" \| "outline" \| "ghost" \| "danger" \| "destructive" \| "link"` | `"primary"` |
|
|
211
|
-
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
|
|
211
|
+
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
|
|
212
212
|
| `fullWidth` | `boolean` | `false` |
|
|
213
213
|
| `leftIcon` | `ReactNode` | — |
|
|
214
214
|
| `rightIcon` | `ReactNode` | — |
|
|
@@ -236,7 +236,7 @@ Square button for icon-only actions. Always provide `aria-label`.
|
|
|
236
236
|
| `icon` | `ReactNode` | **required** |
|
|
237
237
|
| `aria-label` | `string` | **required** |
|
|
238
238
|
| `variant` | `"primary" \| "secondary" \| "outline" \| "ghost" \| "danger"` | `"ghost"` |
|
|
239
|
-
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
|
|
239
|
+
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
|
|
240
240
|
| `loading` | `boolean` | `false` |
|
|
241
241
|
|
|
242
242
|
---
|
|
@@ -305,7 +305,7 @@ Standard text input.
|
|
|
305
305
|
|
|
306
306
|
| Prop | Type | Default |
|
|
307
307
|
|------|------|---------|
|
|
308
|
-
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
|
|
308
|
+
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
|
|
309
309
|
| `error` | `boolean` | `false` |
|
|
310
310
|
| `prefix` | `ReactNode` | — |
|
|
311
311
|
| `suffix` | `ReactNode` | — |
|
|
@@ -387,7 +387,7 @@ const [range, setRange] = useState<DateRangeValue>({
|
|
|
387
387
|
| `value` | `DateRangeValue` | — |
|
|
388
388
|
| `onChange` | `(value: DateRangeValue) => void` | — |
|
|
389
389
|
| `presets` | `DateRangePreset[]` | default presets |
|
|
390
|
-
| `size` | `"sm" \| "md" \| "lg"` | `"sm"` |
|
|
390
|
+
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"sm"` |
|
|
391
391
|
| `maxRangeDays` | `number` | — |
|
|
392
392
|
| `months` | `1 \| 2` | `2` |
|
|
393
393
|
| `open` / `onOpenChange` | controlled popover state | — |
|
|
@@ -515,7 +515,7 @@ Small inline status label.
|
|
|
515
515
|
|
|
516
516
|
| Prop | Type | Default |
|
|
517
517
|
|------|------|---------|
|
|
518
|
-
| `size` | `"sm" \| "md" \| "lg"` | `"sm"` |
|
|
518
|
+
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"sm"` |
|
|
519
519
|
| `variant` | `"default" \| "neutral" \| "primary" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"default"` |
|
|
520
520
|
| `tone` | `"neutral" \| "primary" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` |
|
|
521
521
|
| `dot` | `boolean` | `false` |
|
|
@@ -543,6 +543,7 @@ Removable tag. Use in filter bars and multi-select UIs.
|
|
|
543
543
|
|------|------|---------|
|
|
544
544
|
| `variant` | `"default" \| "filled" \| "soft" \| "outline"` | `"default"` |
|
|
545
545
|
| `tone` | `"neutral" \| "primary" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` |
|
|
546
|
+
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"sm"` |
|
|
546
547
|
| `leftIcon` | `ReactNode` | — |
|
|
547
548
|
| `removable` | `boolean` | `false` |
|
|
548
549
|
| `onRemove` | `() => void` | — |
|
|
@@ -755,7 +756,7 @@ Context menu attached to a trigger. Items support destructive and checked states
|
|
|
755
756
|
| `trigger` | `ReactNode` | **required** |
|
|
756
757
|
| `items` | `{ label: string; onSelect: () => void; disabled?: boolean; destructive?: boolean; checked?: boolean }[]` | **required** |
|
|
757
758
|
| `align` | `"start" \| "center" \| "end"` | `"end"` |
|
|
758
|
-
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
|
|
759
|
+
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
|
|
759
760
|
|
|
760
761
|
---
|
|
761
762
|
|
|
@@ -943,6 +944,7 @@ Tabbed content switcher.
|
|
|
943
944
|
|------|------|---------|
|
|
944
945
|
| `items` | `{ value: string; label: ReactNode; content?: ReactNode; badge?: ReactNode }[]` | — |
|
|
945
946
|
| `variant` | `"line" \| "pill"` | `"line"` |
|
|
947
|
+
| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` |
|
|
946
948
|
| `defaultValue` | `string` | — |
|
|
947
949
|
| `value` | `string` | — |
|
|
948
950
|
| `onValueChange` | `(value: string) => void` | — |
|