@simplysm/solid 13.0.69 → 13.0.71

package/docs/disclosure.md

@@ -1,254 +0,0 @@
-# Disclosure Components
-
-## Tabs
-
-Tab navigation component.
-
-```tsx
-import { Tabs } from "@simplysm/solid";
-
-<Tabs value={activeTab()} onValueChange={setActiveTab}>
-  <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
-  <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
-  <Tabs.Tab value="tab3" disabled>Tab 3</Tabs.Tab>
-</Tabs>
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `string` | - | Selected tab value |
-| `onValueChange` | `(value: string) => void` | - | Tab change callback |
-| `size` | `"xs" \| "sm" \| "lg" \| "xl"` | - | Size |
-| `class` | `string` | - | Additional CSS class |
-| `style` | `JSX.CSSProperties` | - | Inline style |
-
-**Sub-components:**
-- `Tabs.Tab` -- Individual tab (`value: string`, `disabled?: boolean`, `class?: string`)
-
----
-
-## Collapse
-
-Content collapse/expand animation component. Uses `margin-top`-based transition for smooth open/close effects.
-
-```tsx
-import { Collapse, Button } from "@simplysm/solid";
-import { createSignal } from "solid-js";
-
-const [open, setOpen] = createSignal(false);
-
-<Button
-  aria-expanded={open()}
-  aria-controls="content"
-  onClick={() => setOpen(!open())}
->
-  Toggle
-</Button>
-<Collapse id="content" open={open()}>
-  <p>Collapsible content</p>
-</Collapse>
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `open` | `boolean` | `false` | Open state |
-
-Animation is automatically disabled when `prefers-reduced-motion` is set.
-
----
-
-## Dropdown
-
-Positioned dropdown popup using compound components. Trigger click auto-toggles open state.
-
-```tsx
-import { Dropdown, Button, List } from "@simplysm/solid";
-
-// Trigger/Content compound components
-<Dropdown>
-  <Dropdown.Trigger>
-    <Button>Open</Button>
-  </Dropdown.Trigger>
-  <Dropdown.Content>
-    <p class="p-3">Dropdown content</p>
-  </Dropdown.Content>
-</Dropdown>
-
-// Controlled open state
-<Dropdown open={open()} onOpenChange={setOpen}>
-  <Dropdown.Trigger>
-    <Button>Open</Button>
-  </Dropdown.Trigger>
-  <Dropdown.Content>
-    <p class="p-3">Dropdown content</p>
-  </Dropdown.Content>
-</Dropdown>
-
-// Context menu (absolute position, no Trigger)
-<Dropdown position={{ x: 100, y: 200 }} open={menuOpen()} onOpenChange={setMenuOpen}>
-  <Dropdown.Content>
-    <List inset>
-      <List.Item>Menu item 1</List.Item>
-      <List.Item>Menu item 2</List.Item>
-    </List>
-  </Dropdown.Content>
-</Dropdown>
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `position` | `{ x: number; y: number }` | - | Absolute position (context menu mode, no Trigger needed) |
-| `open` | `boolean` | - | Open state |
-| `onOpenChange` | `(open: boolean) => void` | - | State change callback |
-| `maxHeight` | `number` | `300` | Maximum height (px) |
-| `disabled` | `boolean` | - | Disabled state (Trigger click ignored) |
-| `keyboardNav` | `boolean` | - | Enable keyboard navigation (used by Select, etc.) |
-| `class` | `string` | - | Additional CSS class for popup |
-| `style` | `JSX.CSSProperties` | - | Inline style for popup |
-
-**Sub-components:**
-- `Dropdown.Trigger` -- Trigger element wrapper (click to toggle)
-- `Dropdown.Content` -- Dropdown popup content
-
----
-
-## Dialog
-
-Modal dialog component. Supports drag movement, resize, floating mode, fullscreen mode, and programmatic opening via `useDialog`.
-
-**Declarative usage:**
-
-```tsx
-import { Dialog, Button } from "@simplysm/solid";
-import { createSignal } from "solid-js";
-
-const [open, setOpen] = createSignal(false);
-
-<Button onClick={() => setOpen(true)}>Open</Button>
-<Dialog open={open()} onOpenChange={setOpen} closeOnBackdrop width={600}>
-  <Dialog.Header>Dialog Title</Dialog.Header>
-  <div class="p-4">
-    Dialog content
-  </div>
-</Dialog>
-
-// With header action buttons
-<Dialog open={open()} onOpenChange={setOpen}>
-  <Dialog.Header>My Dialog</Dialog.Header>
-  <Dialog.Action>
-    <Button size="sm" variant="ghost">Help</Button>
-  </Dialog.Action>
-  <div class="p-4">Dialog content</div>
-</Dialog>
-
-// Floating mode (no backdrop)
-<Dialog open={open()} onOpenChange={setOpen} float position="bottom-right">
-  <Dialog.Header>Notification</Dialog.Header>
-  <div class="p-4">Floating dialog</div>
-</Dialog>
-
-// No header (content only)
-<Dialog open={open()} onOpenChange={setOpen}>
-  <div class="p-4">Dialog without header</div>
-</Dialog>
-```
-
-**Programmatic usage with `useDialog`:**
-
-```tsx
-import { useDialog, useDialogInstance, Button, TextInput } from "@simplysm/solid";
-import { createSignal } from "solid-js";
-
-// Dialog content component
-function EditDialog() {
-  const dialogInstance = useDialogInstance<string>();
-  const [name, setName] = createSignal("");
-
-  return (
-    <div class="p-4 space-y-4">
-      <TextInput value={name()} onValueChange={setName} placeholder="Enter name" />
-      <Button theme="primary" onClick={() => dialogInstance?.close(name())}>
-        Save
-      </Button>
-    </div>
-  );
-}
-
-// Opening dialog programmatically
-function MyPage() {
-  const dialog = useDialog();
-
-  const handleOpen = async () => {
-    const result = await dialog.show<string>(
-      () => <EditDialog />,
-      { header: "Edit Name", width: 400, closeOnBackdrop: true },
-    );
-    if (result != null) {
-      // result is the value passed to dialogInstance.close()
-      console.log("Saved:", result);
-    }
-  };
-
-  return <Button onClick={handleOpen}>Open Editor</Button>;
-}
-```
-
-**Dialog Props:**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `open` | `boolean` | - | Open state |
-| `onOpenChange` | `(open: boolean) => void` | - | State change callback |
-| `closable` | `boolean` | `true` | Show close button |
-| `closeOnBackdrop` | `boolean` | - | Close on backdrop click |
-| `closeOnEscape` | `boolean` | `true` | Close on Escape key |
-| `resizable` | `boolean` | `false` | Resizable |
-| `movable` | `boolean` | `true` | Draggable |
-| `float` | `boolean` | - | Floating mode (no backdrop) |
-| `fill` | `boolean` | - | Fullscreen mode |
-| `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 |
-| `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 |
-
-**Sub-components:**
-- `Dialog.Header` -- Dialog title (renders as `<h5>`, sets `aria-labelledby` on the dialog)
-- `Dialog.Action` -- Header action area (rendered between header text and close button)
-
-> The header bar (including close button) is only rendered when `Dialog.Header` is present. If no `Dialog.Header` is provided, the dialog renders content only with no header bar.
-
-**useDialog API:**
-
-| Method | Signature | Description |
-|--------|-----------|-------------|
-| `show` | `<T>(factory: () => JSX.Element, options: DialogShowOptions) => Promise<T \| undefined>` | Open dialog, returns result on close |
-
-`DialogShowOptions` accepts all Dialog props except `open`, `onOpenChange`, `onCloseComplete`, and `children`, plus:
-
-| Option | Type | Description |
-|--------|------|-------------|
-| `header` | `JSX.Element` | Dialog header content (renders inside `Dialog.Header`) |
-
-**useDialogInstance API:**
-
-| Method | Signature | Description |
-|--------|-----------|-------------|
-| `close` | `(result?: T) => void` | Close dialog with optional return value |
-
-**Dialog Defaults:**
-
-`DialogDefaultsContext` and `DialogDefaults` are exported for advanced use cases such as providing default dialog options to a subtree. Add `<DialogProvider>` to your provider tree to enable `useDialog()`. See [Provider Placement Guide](providers.md#provider-placement-guide).
-
-```typescript
-import { DialogDefaultsContext, type DialogDefaults } from "@simplysm/solid";
-```
-
-| Export | Kind | Description |
-|--------|------|-------------|
-| `DialogDefaultsContext` | context | Context for providing default dialog options |
-| `DialogDefaults` | interface | `{ closeOnEscape?: boolean; closeOnBackdrop?: boolean }` |

package/docs/display.md

@@ -1,153 +0,0 @@
-# Display Components
-
-## Card
-
-Container with shadow effect.
-
-```tsx
-import { Card } from "@simplysm/solid";
-
-<Card>Card content</Card>
-<Card class="p-4">Card with padding</Card>
-```
-
----
-
-## Tag
-
-Inline tag/badge component.
-
-```tsx
-import { Tag } from "@simplysm/solid";
-
-<Tag theme="primary">New</Tag>
-<Tag theme="success">Complete</Tag>
-<Tag theme="danger">Urgent</Tag>
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `theme` | `"primary" \| "info" \| "success" \| "warning" \| "danger" \| "base"` | `"base"` | Color theme |
-
----
-
-## 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.
-
-```tsx
-import { Alert } from "@simplysm/solid";
-
-<Alert theme="info">This is an information message.</Alert>
-<Alert theme="warning">Please pay attention to this.</Alert>
-<Alert theme="danger">An error has occurred.</Alert>
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `theme` | `"primary" \| "info" \| "success" \| "warning" \| "danger" \| "base"` | `"base"` | Color theme |
-
----
-
-## Icon
-
-Tabler Icons wrapper component. Displayed in `em` units to scale proportionally with surrounding text.
-
-```tsx
-import { Icon } from "@simplysm/solid";
-import { IconCheck, IconAlertTriangle } from "@tabler/icons-solidjs";
-
-<Icon icon={IconCheck} />
-<Icon icon={IconAlertTriangle} size="2em" />
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `icon` | `Component` | **(required)** | Tabler icon component |
-| `size` | `string \| number` | `"1.25em"` | Icon size |
-
----
-
-## Progress
-
-Progress indicator component.
-
-```tsx
-import { Progress } from "@simplysm/solid";
-
-<Progress value={0.65} />
-<Progress value={0.8} theme="success" size="lg" />
-
-// Custom text
-<Progress value={progress()}>
-  {Math.round(progress() * 100)}% complete
-</Progress>
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `number` | **(required)** | Progress (0~1) |
-| `theme` | `"primary" \| "info" \| "success" \| "warning" \| "danger" \| "base"` | `"primary"` | Color theme |
-| `size` | `"sm" \| "lg"` | - | Size |
-| `inset` | `boolean` | - | Inset style |
-
----
-
-## Barcode
-
-bwip-js-based barcode/QR code rendering component. Supports over 100 barcode types.
-
-```tsx
-import { Barcode } from "@simplysm/solid";
-
-<Barcode type="qrcode" value="https://example.com" />
-<Barcode type="code128" value="ABC-12345" />
-<Barcode type="ean13" value="4901234567890" />
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `type` | `BarcodeType` | **(required)** | Barcode type (`"qrcode"`, `"code128"`, `"ean13"`, etc.) |
-| `value` | `string` | - | Barcode value |
-
----
-
-## Echarts
-
-Apache ECharts chart wrapper component. Requires `echarts` peer dependency installation.
-
-```tsx
-import { Echarts } from "@simplysm/solid";
-
-<Echarts
-  option={{
-    xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
-    yAxis: { type: "value" },
-    series: [{ data: [120, 200, 150], type: "bar" }],
-  }}
-/>
-
-<Echarts option={chartOption()} busy={isBusy()} />
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `option` | `echarts.EChartsOption` | **(required)** | ECharts option object |
-| `busy` | `boolean` | - | Show busy state |

package/docs/feedback.md

@@ -1,238 +0,0 @@
-# Feedback Components
-
-## Notification
-
-Notification system. Set up `NotificationProvider` and `NotificationBanner` in your provider tree. Use the `useNotification` hook to show notifications and optionally add `NotificationBell` in your layout.
-
-```tsx
-import {
-  NotificationBell,
-  useNotification,
-} from "@simplysm/solid";
-
-// Trigger notifications within components
-function MyComponent() {
-  const notification = useNotification();
-
-  const handleSave = () => {
-    notification.success("Success", "Saved successfully.");
-  };
-
-  const handleError = () => {
-    notification.danger("Error", "An issue occurred.", {
-      action: { label: "Retry", onClick: handleRetry },
-    });
-  };
-
-  // Error handling with error()
-  const handleLoad = async () => {
-    try {
-      const data = await fetchData();
-    } catch (err) {
-      notification.error(err, "Failed to load data"); // optional header
-      // Shows danger notification with header + err.message,
-      // logs err.stack via useLogger
-    }
-  };
-
-  return <Button onClick={handleSave}>Save</Button>;
-}
-```
-
-**useNotification API:**
-
-| 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 |
-| `danger` | `(title: string, message?: string, options?: NotificationOptions) => string` | Error notification |
-| `error` | `(err?: any, header?: string) => void` | Show error notification from caught error (shows danger notification + logs to `useLogger`). Re-throws if `err` is not an `Error` instance. |
-| `update` | `(id: string, updates: Partial<NotificationItem>, options?: { renotify?: boolean }) => void` | Update notification |
-| `remove` | `(id: string) => void` | Remove notification |
-| `markAsRead` | `(id: string) => void` | Mark as read |
-| `markAllAsRead` | `() => void` | Mark all as read |
-| `dismissBanner` | `() => void` | Dismiss banner |
-| `clear` | `() => void` | Clear all |
-
-**Components:**
-- `NotificationBanner` -- Top-of-screen notification banner. Automatically included by `SystemProvider`.
-- `NotificationBell` -- Notification bell icon (shows unread count badge; click to view history). Add to your layout as needed. By default includes its own `NotificationBanner` instance via `showBanner` prop — set `showBanner={false}` when using with `SystemProvider` to avoid a duplicate banner.
-
-**NotificationBell Props:**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `showBanner` | `boolean` | `true` | Render a `NotificationBanner` alongside the bell. Set to `false` when `SystemProvider` already provides one. |
-
----
-
-## Busy
-
-Busy overlay system. Set up `BusyProvider` in your provider tree. Pass `variant` prop to choose between `"spinner"` (default) and `"bar"` variants. Control the busy state using the `useBusy` hook.
-
-```tsx
-import { useBusy } from "@simplysm/solid";
-
-// Control busy within components
-function MyComponent() {
-  const busy = useBusy();
-
-  const fetchData = async () => {
-    busy.show("Loading data...");
-    try {
-      await fetch("/api/data");
-    } finally {
-      busy.hide();
-    }
-  };
-
-  return <Button onClick={fetchData}>Load Data</Button>;
-}
-```
-
-**useBusy API:**
-
-| Method | Signature | Description |
-|--------|-----------|-------------|
-| `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
-
-Browser printing and PDF generation. Requires `<PrintProvider>` in the component tree.
-
-```tsx
-// Provider setup:
-<SystemProvider clientName="my-app">
-  <PrintProvider>
-    <App />
-  </PrintProvider>
-</SystemProvider>
-```
-
-```tsx
-import { Print, usePrint } from "@simplysm/solid";
-
-function MyComponent() {
-  const { toPrinter, toPdf } = usePrint();
-
-  const handlePrint = async () => {
-    await toPrinter(
-      () => (
-        <Print>
-          <Print.Page>
-            <h1>Print content</h1>
-            <p>Page 1</p>
-          </Print.Page>
-          <Print.Page>
-            <p>Page 2</p>
-          </Print.Page>
-        </Print>
-      ),
-      { size: "A4", margin: "10mm" },
-    );
-  };
-
-  const handlePdf = async () => {
-    const pdfData = await toPdf(
-      () => (
-        <Print>
-          <Print.Page>
-            <h1>PDF content</h1>
-          </Print.Page>
-        </Print>
-      ),
-      { size: "A4 landscape" },
-    );
-    // pdfData: Uint8Array
-  };
-
-  return (
-    <>
-      <Button onClick={handlePrint}>Print</Button>
-      <Button onClick={handlePdf}>Download PDF</Button>
-    </>
-  );
-}
-```
-
-**usePrint API:**
-
-| Method | Signature | Description |
-|--------|-----------|-------------|
-| `toPrinter` | `(factory: () => JSX.Element, options?: PrintOptions) => Promise<void>` | Browser print |
-| `toPdf` | `(factory: () => JSX.Element, options?: PrintOptions) => Promise<Uint8Array>` | PDF generation |
-
-**PrintOptions:**
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `size` | `string` | `"A4"` | Paper size (`"A4"`, `"A3"`, `"A4 landscape"`, `"210mm 297mm"`, etc.) |
-| `margin` | `string` | `"0"` | Margins (`"10mm"`, `"1cm"`, etc.) |
-
-**Sub-components:**
-- `Print.Page` -- Explicit page breaks (auto-breaks if not used)
-
-**usePrintInstance (for async data in print content):**
-
-Use `usePrintInstance` inside print content components when you need to load async data before rendering. Call `ready()` to signal that the content is ready to print.
-
-```tsx
-import { usePrintInstance } from "@simplysm/solid";
-import { createResource, Show } from "solid-js";
-
-function InvoicePrintContent(props: { invoiceId: number }) {
-  const printInstance = usePrintInstance();
-  const [invoice] = createResource(() => fetchInvoice(props.invoiceId));
-
-  createEffect(() => {
-    if (invoice()) {
-      printInstance?.ready();  // signal that content is ready
-    }
-  });
-
-  return (
-    <Show when={invoice()}>
-      {(inv) => (
-        <Print>
-          <Print.Page>
-            <h1>Invoice #{inv().id}</h1>
-            {/* invoice content */}
-          </Print.Page>
-        </Print>
-      )}
-    </Show>
-  );
-}
-
-// Usage
-const { toPrinter } = usePrint();
-await toPrinter(() => <InvoicePrintContent invoiceId={123} />, { size: "A4", margin: "10mm" });
-```