bonsaif-ui 0.1.8 → 0.1.10

package/README.md

@@ -21,16 +21,82 @@ export function Example() {
 
 ## Components
 
-The package includes reusable components migrated from `prime-auth`:
+The package includes reusable components migrated from `prime-auth` and new shared primitives for Bonsaif apps.
 
-- UI: `Button`, `CalendarPicker`, `CompactFilterSelect`, `CompactSearchInput`, `ConfirmDialog`, `CopyButton`, `CopyLinkButton`, `DataTable`, `DateRangePicker`, `Drawer`, `InputField`, `LoadingState`, `Modal`, `MouseTooltip`, `SearchableSelect`, `StepWizard`, `TextInput`, `Toggle`.
-- Composition: `DynamicDetailTabs`.
-- Layout: `AuthShell`, `GlobalScrollbars`, `PageHeader`, `PageSearchInput`, `PrimeAuthRouteShell`.
-- Messaging and services: `PrimeSuiteChatFrame`, `MicroserviceFrame`.
-- Notifications and users: `PrimeAuthToaster`, `UserAvatar`.
+### Layout
+
+- `AuthShell`, `PrimeAuthRouteShell`: authenticated application shells.
+- `PageHeader`, `PageSearchInput`: page title, breadcrumbs, metadata, actions, and page-level search.
+- `GlobalScrollbars`: global OverlayScrollbars setup.
+- `SectionPanel`: reusable section container with header, actions, body, and footer.
+
+### Forms
+
+- `InputField`, `TextInput`, `Textarea`: text inputs with Bonsaif styling.
+- `SearchableSelect`, `CompactFilterSelect`, `CompactSearchInput`: select and filter controls.
+- `CalendarPicker`, `DateRangePicker`: single-date and range selection.
+- `Checkbox`, `RadioGroup`, `Toggle`: boolean and option controls.
+- `FormField`: label, helper, error, and required wrapper for custom controls.
+
+### Actions And Overlays
+
+- `Button`, `BonsaifButton`: action buttons.
+- `DropdownMenu`: contextual action menu.
+- `CopyButton`, `CopyLinkButton`: clipboard utilities.
+- `Modal`, `Drawer`, `ConfirmDialog`: overlays and confirmations.
+- `MouseTooltip`: lightweight hover tooltip.
+
+### Feedback And Data
+
+- `Alert`, `StatusBadge`, `EmptyState`, `LoadingState`: visible states and feedback.
+- `DataTable`, `Pagination`: tabular data and standalone pagination.
+- `Tabs`, `StepWizard`: local navigation and guided flows.
+
+### Composition And Services
+
+- `DynamicDetailTabs`: parent-detail layout with lazy loaded child modules.
+- `MicroserviceFrame`, `PrimeSuiteChatFrame`: embedded service frames.
+- `PrimeAuthToaster`: Sonner toaster configured for Bonsaif themes.
+- `UserAvatar`: user and bot avatars with tooltip support.
 
 App-coupled components were adapted to receive routing, session, and navigation data through props so the library does not import private `prime-auth` modules.
 
+## Playground Documentation
+
+Run the playground to browse the components by category. Each code example includes a copy action powered by `CopyButton`.
+
+```bash
+npm run playground
+```
+
+## UI Primitives
+
+Small primitives cover common product UI patterns while keeping the same Bonsaif visual tokens.
+
+```tsx
+import {
+  Alert,
+  EmptyState,
+  SectionPanel,
+  StatusBadge,
+  Tabs,
+} from "bonsaif-ui";
+
+<StatusBadge tone="success" dot>
+  Activo
+</StatusBadge>
+
+<Alert variant="warning" title="Revision pendiente">
+  Hay cambios sin publicar.
+</Alert>
+
+<SectionPanel title="Actividad" actions={<Button>Revisar</Button>}>
+  <Tabs activeTabId={tab} onTabChange={setTab} tabs={tabs} />
+</SectionPanel>
+
+<EmptyState title="Sin registros" action={<Button>Crear</Button>} />
+```
+
 ## Copy Buttons
 
 `CopyButton` copies any text value. `CopyLinkButton` copies URLs and accepts `resolveUrl` when an app needs to convert relative paths into public absolute URLs.