@simplysm/solid 13.0.98 → 13.0.99

package/docs/feedback.md

@@ -1,81 +1,70 @@
 # Feedback Components
 
-Source: `src/components/feedback/**/*.tsx`
+Source: `src/components/feedback/**`
 
-## Progress
+## `Progress`
 
-Themed progress bar with percentage display.
+Progress bar component with theme colors and custom content support.
 
-```ts
-type ProgressTheme = SemanticTheme;
-
-interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  value: number;            // 0-100
-  theme?: ProgressTheme;    // default: "primary"
+```typescript
+export interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  value: number;
+  theme?: ProgressTheme;
   size?: ComponentSize;
   inset?: boolean;
 }
 ```
 
-Children override the default percentage text display.
-
-## NotificationProvider
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `number` | Progress value (0-100) |
+| `theme` | `SemanticTheme` | Bar color theme. Default: `"primary"` |
+| `size` | `ComponentSize` | Padding size |
+| `inset` | `boolean` | Borderless transparent background mode |
 
-Notification system provider. Maintains up to 50 notifications.
+### `ProgressTheme`
 
-```ts
-const NotificationProvider: ParentComponent;
+```typescript
+export type ProgressTheme = SemanticTheme;
 ```
 
-### useNotification()
+---
+
+## `NotificationProvider`
 
-Hook to create and manage notifications.
+Provider for the notification system. Maintains up to 50 notifications.
+
+### `useNotification`
+
+```typescript
+export function useNotification(): NotificationContextValue;
+```
 
-```ts
-function useNotification(): NotificationContextValue;
+### `NotificationContextValue`
 
-interface NotificationContextValue {
-  // State
+```typescript
+export interface NotificationContextValue {
   items: Accessor<NotificationItem[]>;
   unreadCount: Accessor<number>;
   latestUnread: Accessor<NotificationItem | undefined>;
-
-  // Create (returns id)
   info: (title: string, message?: string, options?: NotificationOptions) => string;
   success: (title: string, message?: string, options?: NotificationOptions) => string;
   warning: (title: string, message?: string, options?: NotificationOptions) => string;
   danger: (title: string, message?: string, options?: NotificationOptions) => string;
   error: (err?: any, header?: string) => void;
-
-  // Update
-  update: (
-    id: string,
-    updates: Partial<Pick<NotificationItem, "title" | "message" | "theme" | "action">>,
-    options?: NotificationUpdateOptions,
-  ) => void;
-
-  // Delete
+  update: (id: string, updates: Partial<Pick<NotificationItem, "title" | "message" | "theme" | "action">>, options?: NotificationUpdateOptions) => void;
   remove: (id: string) => void;
-
-  // Management
   markAsRead: (id: string) => void;
   markAllAsRead: () => void;
   dismissBanner: () => void;
   clear: () => void;
 }
+```
 
-interface NotificationOptions {
-  action?: NotificationAction;
-}
-
-interface NotificationAction {
-  label: string;
-  onClick: () => void;
-}
-
-type NotificationTheme = "info" | "success" | "warning" | "danger";
+### `NotificationItem`
 
-interface NotificationItem {
+```typescript
+export interface NotificationItem {
   id: string;
   theme: NotificationTheme;
   title: string;
@@ -86,46 +75,85 @@ interface NotificationItem {
 }
 ```
 
-## NotificationBell
+### `NotificationTheme`
 
-Bell icon button with unread badge and dropdown notification list.
+```typescript
+export type NotificationTheme = "info" | "success" | "warning" | "danger";
+```
+
+### `NotificationAction`
 
-```ts
-interface NotificationBellProps {
-  showBanner?: boolean;  // show NotificationBanner (default: true)
+```typescript
+export interface NotificationAction {
+  label: string;
+  onClick: () => void;
 }
 ```
 
-Marks all notifications as read when the dropdown opens.
+### `NotificationOptions`
 
-## NotificationBanner
+```typescript
+export interface NotificationOptions {
+  action?: NotificationAction;
+}
+```
 
-Toast-style notification banner that appears for the latest unread notification. Typically used inside `NotificationBell`.
+### `NotificationUpdateOptions`
 
-```ts
-const NotificationBanner: Component;
+```typescript
+export interface NotificationUpdateOptions {
+  renotify?: boolean;
+}
 ```
 
-## BusyProvider
+---
+
+## `NotificationBell`
 
-Global loading overlay provider. Show/hide is nestable (counter-based).
+Bell icon button that shows unread count badge and dropdown notification list.
 
-```ts
-interface BusyProviderProps {
-  variant?: BusyVariant;  // default: "spinner"
+```typescript
+export interface NotificationBellProps {
+  showBanner?: boolean;
 }
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `showBanner` | `boolean` | Show notification banner. Default: `true` |
+
+---
+
+## `NotificationBanner`
+
+Fixed-position banner showing the latest unread notification with dismiss and action buttons.
+
+No props (reads from `NotificationContext`).
+
+---
+
+## `BusyProvider`
+
+Provider for busy overlay state management. Supports nested show/hide calls.
 
-type BusyVariant = "spinner" | "bar";
+```typescript
+export interface BusyProviderProps {
+  variant?: BusyVariant;
+}
 ```
 
-### useBusy()
+### `BusyVariant`
+
+```typescript
+export type BusyVariant = "spinner" | "bar";
+```
 
-Hook to control the loading overlay.
+### `useBusy`
 
-```ts
-function useBusy(): BusyContextValue;
+```typescript
+export function useBusy(): BusyContextValue;
 
-interface BusyContextValue {
+export interface BusyContextValue {
   variant: Accessor<BusyVariant>;
   show: (message?: string) => void;
   hide: () => void;
@@ -133,16 +161,16 @@ interface BusyContextValue {
 }
 ```
 
-`show`/`hide` calls are stackable: the overlay hides only after all `show` calls have corresponding `hide` calls.
+---
 
-## BusyContainer
+## `BusyContainer`
 
-Local loading overlay container. Can be used standalone or inside `BusyProvider`.
+Inline loading overlay component with spinner or progress bar variants.
 
-```ts
-interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
-  busy?: boolean;             // show loading overlay
-  ready?: boolean;            // false = hide children and show overlay (initial loading)
+```typescript
+export interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+  busy?: boolean;
+  ready?: boolean;
   variant?: BusyVariant;
   message?: string;
   progressPercent?: number;
@@ -150,61 +178,56 @@ interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "c
 }
 ```
 
-- `busy=true`: overlay shown on top of children.
-- `ready=false`: children hidden, overlay shown.
-- Blocks keyboard input during busy state.
-
-## PrintProvider
-
-Print and PDF generation provider. Uses off-screen Portal rendering.
+| Prop | Type | Description |
+|------|------|-------------|
+| `busy` | `boolean` | Show loading overlay (children preserved) |
+| `ready` | `boolean` | If `false`, children hidden and loading shown (initial loading) |
+| `variant` | `BusyVariant` | Display style. Inherits from `BusyProvider` context |
+| `message` | `string` | Loading message text |
+| `progressPercent` | `number` | Progress bar value (0-100) |
 
-```ts
-const PrintProvider: ParentComponent;
-```
+---
 
-Requires `BusyProvider` as an ancestor.
+## `PrintProvider`
 
-### usePrint()
+Provider for print-to-printer and print-to-PDF functionality.
 
-Hook to print content or generate PDF.
+### `usePrint`
 
-```ts
-function usePrint(): PrintContextValue;
+```typescript
+export function usePrint(): PrintContextValue;
 
-interface PrintContextValue {
+export interface PrintContextValue {
   toPrinter: (factory: () => JSX.Element, options?: PrintOptions) => Promise<void>;
   toPdf: (factory: () => JSX.Element, options?: PrintOptions) => Promise<Uint8Array>;
 }
-
-interface PrintOptions {
-  size?: string;    // e.g., "A4", "A3 landscape", "100mm 200mm"
-  margin?: string;  // CSS margin, default: "0"
-}
 ```
 
-- `toPrinter`: renders content off-screen, then calls `window.print()`.
-- `toPdf`: renders content off-screen, converts to images via `html-to-image`, generates PDF via `jsPDF`.
+### `PrintOptions`
 
-### usePrintInstance()
+```typescript
+export interface PrintOptions {
+  size?: string;
+  margin?: string;
+}
+```
 
-Hook available inside print content factories. Call `ready()` to signal that async content (e.g., data loading) is complete.
+### `usePrintInstance`
 
-```ts
-function usePrintInstance(): PrintInstance | undefined;
+```typescript
+export function usePrintInstance(): PrintInstance | undefined;
 
-interface PrintInstance {
+export interface PrintInstance {
   ready: () => void;
 }
 ```
 
-## Print
+---
 
-Wrapper for print content.
+## `Print`
 
-```ts
-const Print: ParentComponent;
-```
+Wrapper component for print content with page separation.
 
 ### Sub-components
 
-- **`Print.Page`** -- Page break boundary. Each `Print.Page` becomes a separate PDF page.
+- **`Print.Page`** -- Individual print page container