@simplysm/solid 13.0.28 → 13.0.30

package/docs/disclosure.md

@@ -18,10 +18,12 @@ import { Tabs } from "@simplysm/solid";
 |------|------|---------|-------------|
 | `value` | `string` | - | Selected tab value |
 | `onValueChange` | `(value: string) => void` | - | Tab change callback |
-| `size` | `"sm" \| "lg"` | - | Size |
+| `size` | `"sm" \| "lg" \| "xl"` | - | Size |
+| `class` | `string` | - | Additional CSS class |
+| `style` | `JSX.CSSProperties` | - | Inline style |
 
 **Sub-components:**
-- `Tabs.Tab` -- Individual tab (`value: string`, `disabled?: boolean`)
+- `Tabs.Tab` -- Individual tab (`value: string`, `disabled?: boolean`, `class?: string`)
 
 ---
 
@@ -109,7 +111,7 @@ const [open, setOpen] = createSignal(false);
   open={open()}
   onOpenChange={setOpen}
   closeOnBackdrop
-  widthPx={600}
+  width={600}
 >
   <div class="p-4">
     Dialog content
@@ -156,7 +158,7 @@ function MyPage() {
   const handleOpen = async () => {
     const result = await dialog.show<string>(
       () => <EditDialog />,
-      { title: "Edit Name", widthPx: 400, closeOnBackdrop: true },
+      { title: "Edit Name", width: 400, closeOnBackdrop: true },
     );
     if (result != null) {
       // result is the value passed to dialogInstance.close()
@@ -183,15 +185,16 @@ function MyPage() {
 | `movable` | `boolean` | `true` | Draggable |
 | `float` | `boolean` | - | Floating mode (no backdrop) |
 | `fill` | `boolean` | - | Fullscreen mode |
-| `widthPx` | `number` | - | Width (px) |
-| `heightPx` | `number` | - | Height (px) |
-| `minWidthPx` | `number` | - | Minimum width (px) |
-| `minHeightPx` | `number` | - | Minimum height (px) |
+| `width` | `number` | - | Width (px) |
+| `height` | `number` | - | Height (px) |
+| `minWidth` | `number` | - | Minimum width (px) |
+| `minHeight` | `number` | - | Minimum height (px) |
 | `position` | `"bottom-right" \| "top-right"` | - | Fixed position |
 | `headerAction` | `JSX.Element` | - | Header action area |
 | `headerStyle` | `JSX.CSSProperties \| string` | - | Header style |
 | `canDeactivate` | `() => boolean` | - | Pre-close confirmation function |
 | `onCloseComplete` | `() => void` | - | Post-close animation callback |
+| `class` | `string` | - | Additional CSS class applied to the dialog element |
 
 **useDialog API:**
 
@@ -206,3 +209,20 @@ function MyPage() {
 | Method | Signature | Description |
 |--------|-----------|-------------|
 | `close` | `(result?: T) => void` | Close dialog with optional return value |
+
+**DialogProvider:**
+
+`DialogProvider` is the provider component that enables `useDialog`. It is automatically included by `InitializeProvider`. Use `DialogProvider` directly only when building a custom provider tree.
+
+```tsx
+import { DialogProvider } from "@simplysm/solid";
+
+<DialogProvider closeOnEscape closeOnBackdrop>
+  <App />
+</DialogProvider>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `closeOnEscape` | `boolean` | - | Default `closeOnEscape` for all dialogs opened via `useDialog` |
+| `closeOnBackdrop` | `boolean` | - | Default `closeOnBackdrop` for all dialogs opened via `useDialog` |

package/docs/display.md

@@ -31,6 +31,23 @@ import { Tag } from "@simplysm/solid";
 
 ---
 
+## Link
+
+Inline text link component. Renders an `<a>` element with primary color and hover underline.
+
+```tsx
+import { Link } from "@simplysm/solid";
+
+<Link href="https://example.com">Visit site</Link>
+<Link href="https://example.com" target="_blank" rel="noopener noreferrer">
+  Open in new tab
+</Link>
+```
+
+Accepts all standard HTML `<a>` attributes (`href`, `target`, `rel`, etc.).
+
+---
+
 ## Alert
 
 Block-level alert/notice component.
@@ -127,10 +144,10 @@ import { Echarts } from "@simplysm/solid";
   }}
 />
 
-<Echarts option={chartOption()} loading={isLoading()} />
+<Echarts option={chartOption()} busy={isBusy()} />
 ```
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `option` | `echarts.EChartsOption` | **(required)** | ECharts option object |
-| `loading` | `boolean` | - | Show loading state |
+| `busy` | `boolean` | - | Show busy state |

package/docs/feedback.md

@@ -40,8 +40,11 @@ function MyComponent() {
 
 **useNotification API:**
 
-| Method | Signature | Description |
-|--------|-----------|-------------|
+| Property/Method | Type/Signature | Description |
+|-----------------|----------------|-------------|
+| `items` | `Accessor<NotificationItem[]>` | Reactive notification list |
+| `unreadCount` | `Accessor<number>` | Unread notification count |
+| `latestUnread` | `Accessor<NotificationItem \| undefined>` | Most recent unread notification |
 | `info` | `(title: string, message?: string, options?: NotificationOptions) => string` | Info notification |
 | `success` | `(title: string, message?: string, options?: NotificationOptions) => string` | Success notification |
 | `warning` | `(title: string, message?: string, options?: NotificationOptions) => string` | Warning notification |
@@ -60,23 +63,23 @@ function MyComponent() {
 
 ---
 
-## Loading
+## Busy
 
-Loading overlay system. `InitializeProvider` automatically sets up `LoadingProvider` and `LoadingContainer`. Use the `loadingVariant` option in `AppConfig` to choose between `"spinner"` (default) and `"bar"` variants. Control the loading state using the `useLoading` hook.
+Busy overlay system. `InitializeProvider` automatically sets up `BusyProvider` and `BusyContainer`. Use the `busyVariant` option in `AppConfig` to choose between `"spinner"` (default) and `"bar"` variants. Control the busy state using the `useBusy` hook.
 
 ```tsx
-import { useLoading } from "@simplysm/solid";
+import { useBusy } from "@simplysm/solid";
 
-// Control loading within components
+// Control busy within components
 function MyComponent() {
-  const loading = useLoading();
+  const busy = useBusy();
 
   const fetchData = async () => {
-    loading.show("Loading data...");
+    busy.show("Loading data...");
     try {
       await fetch("/api/data");
     } finally {
-      loading.hide();
+      busy.hide();
     }
   };
 
@@ -84,14 +87,34 @@ function MyComponent() {
 }
 ```
 
-**useLoading API:**
+**useBusy API:**
 
 | Method | Signature | Description |
 |--------|-----------|-------------|
-| `show` | `(message?: string) => void` | Show loading |
-| `hide` | `() => void` | Hide loading |
+| `show` | `(message?: string) => void` | Show busy overlay |
+| `hide` | `() => void` | Hide busy overlay |
 | `setProgress` | `(percent: number \| undefined) => void` | Set progress |
 
+**BusyContainer Props:**
+
+`BusyContainer` can also be used directly to wrap content with busy state control:
+
+```tsx
+import { BusyContainer } from "@simplysm/solid";
+
+<BusyContainer busy={isLoading()} message="Loading...">
+  {/* wrapped content */}
+</BusyContainer>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `busy` | `boolean` | - | Show busy overlay |
+| `ready` | `boolean` | `true` | When `false`, shows busy and hides children; when `true`, shows children (controls rendering) |
+| `variant` | `"spinner" \| "bar"` | - | Busy overlay variant |
+| `message` | `string` | - | Message to display |
+| `progressPercent` | `number` | - | Progress percentage (0-100) |
+
 ---
 
 ## Print / usePrint