@simplysm/solid 13.0.84 → 13.0.86

package/docs/display.md

@@ -1,125 +0,0 @@
-# Display
-
-## Card
-
-```typescript
-interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {}
-```
-
-Simple card container with default border and background styling.
-
----
-
-## Icon
-
-```typescript
-interface IconProps extends Omit<TablerIconProps, "size"> {
-  icon: Component<TablerIconProps>;
-  size?: string | number;
-}
-```
-
-Renders a Tabler icon. Pass the icon component via the `icon` prop.
-
-```typescript
-import { Icon } from "@simplysm/solid";
-import { IconUser } from "@tabler/icons-solidjs";
-
-<Icon icon={IconUser} size={24} />
-```
-
----
-
-## Tag
-
-```typescript
-interface TagProps extends JSX.HTMLAttributes<HTMLSpanElement> {
-  theme?: "base" | "primary" | "info" | "success" | "warning" | "danger";
-}
-```
-
-Inline badge/tag with semantic theming.
-
----
-
-## Link
-
-```typescript
-interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
-  theme?: "base" | "primary" | "info" | "success" | "warning" | "danger";
-  disabled?: boolean;
-}
-```
-
-Styled anchor link with theme and disabled state.
-
----
-
-## Alert
-
-```typescript
-interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  theme?: "base" | "primary" | "info" | "success" | "warning" | "danger";
-}
-```
-
-Alert banner with semantic theming.
-
----
-
-## Barcode
-
-```typescript
-interface BarcodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  type: BarcodeType;
-  value?: string;
-}
-```
-
-Renders barcodes and QR codes using bwip-js. `type` supports 111+ barcode formats including `"qrcode"`, `"code128"`, `"ean13"`, `"datamatrix"`, etc.
-
----
-
-## Echarts
-
-```typescript
-interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  option: echarts.EChartsOption;
-  busy?: boolean;
-}
-```
-
-Apache ECharts wrapper. Requires `echarts` as a peer dependency. Set `busy` to show a loading overlay.
-
----
-
-## Progress
-
-```typescript
-interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  value: number;
-  theme?: "base" | "primary" | "info" | "success" | "warning" | "danger";
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  inset?: boolean;
-}
-```
-
-Progress bar. `value` is in the range 0--100 (0 = 0%, 100 = 100%). Pass `children` to display custom content instead of the default percentage text.
-
----
-
-## Usage Examples
-
-```typescript
-import { Card, Tag, Alert, Progress, Icon } from "@simplysm/solid";
-import { IconCheck } from "@tabler/icons-solidjs";
-
-<Card>
-  <Tag theme="success">Active</Tag>
-  <Progress value={75} theme="primary" />
-</Card>
-
-<Alert theme="warning">
-  <Icon icon={IconCheck} /> Operation completed with warnings.
-</Alert>
-```

package/docs/feedback.md

@@ -1,156 +0,0 @@
-# Feedback
-
-## Notification System
-
-### NotificationProvider / useNotification
-
-```typescript
-type NotificationTheme = "info" | "success" | "warning" | "danger";
-
-interface NotificationAction {
-  label: string;
-  onClick: () => void;
-}
-
-interface NotificationOptions {
-  action?: NotificationAction;
-}
-
-interface NotificationUpdateOptions {
-  renotify?: boolean;
-}
-
-interface NotificationContextValue {
-  items: Accessor<NotificationItem[]>;
-  unreadCount: Accessor<number>;
-  latestUnread: Accessor<NotificationItem | undefined>;
-
-  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(id: string, updates: Partial<NotificationItem>, options?: NotificationUpdateOptions): void;
-  remove(id: string): void;
-  markAsRead(id: string): void;
-  markAllAsRead(): void;
-  dismissBanner(): void;
-  clear(): void;
-}
-```
-
-Centralized notification management. Each `info`/`success`/`warning`/`danger` call creates a notification and returns its `id`. Use `error(err)` to display an error object as a danger notification. Maintains up to 50 notifications; older items are removed when exceeded.
-
-Notifications can include an `action` button via the `options` parameter.
-
-### NotificationBell
-
-```typescript
-interface NotificationBellProps {
-  showBanner?: boolean;
-}
-```
-
-Bell icon button showing unread notification count. Set `showBanner` to display the latest notification as a banner.
-
-### NotificationBanner
-
-Displays the latest unread notification as a dismissible banner. No props.
-
----
-
-## Busy Overlay
-
-### BusyProvider / useBusy
-
-```typescript
-type BusyVariant = "spinner" | "bar";
-
-interface BusyContextValue {
-  variant: Accessor<BusyVariant>;
-  show(message?: string): void;
-  hide(): void;
-  setProgress(percent: number | undefined): void;
-}
-
-interface BusyProviderProps {
-  variant?: BusyVariant;
-}
-```
-
-Full-screen loading overlay with nestable `show`/`hide` calls (managed with an internal counter). Each `show` must have a matching `hide`.
-
-- `variant="spinner"` -- centered spinner (default)
-- `variant="bar"` -- top progress bar animation
-- `setProgress(percent)` -- display a determinate progress bar (0--100, `undefined` for indeterminate)
-
-### BusyContainer
-
-```typescript
-interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
-  busy?: boolean;
-  ready?: boolean;
-  variant?: BusyVariant;
-  message?: string;
-  progressPercent?: number;
-  children?: JSX.Element;
-}
-```
-
-Local loading overlay for a specific container. Two modes:
-- `busy` -- shows overlay while preserving children
-- `ready={false}` -- hides children entirely until data is loaded
-
----
-
-## Print System
-
-### PrintProvider / usePrint
-
-```typescript
-interface PrintContextValue {
-  toPrinter(factory: () => JSX.Element, options?: PrintOptions): Promise<void>;
-  toPdf(factory: () => JSX.Element, options?: PrintOptions): Promise<Uint8Array>;
-}
-
-interface PrintOptions {
-  size?: string;
-  margin?: string;
-}
-```
-
-Print and PDF generation. `toPrinter` opens the browser print dialog. `toPdf` generates a PDF as a byte array.
-
-### Print
-
-Component used inside the print factory to signal readiness via `usePrintInstance().ready()`.
-
----
-
-## Usage Examples
-
-```typescript
-import { useNotification, useBusy, BusyContainer } from "@simplysm/solid";
-
-// Notifications
-const notification = useNotification();
-notification.success("Saved", "Record updated successfully");
-notification.error(new Error("Connection failed"));
-
-// Notification with action button
-notification.info("Update available", "A new version is ready", {
-  action: { label: "Refresh", onClick: () => location.reload() },
-});
-
-// Global loading
-const busy = useBusy();
-busy.show("Loading data...");
-try { await fetchData(); }
-finally { busy.hide(); }
-
-// Local loading container
-<BusyContainer busy={isLoading()} variant="spinner">
-  <DataContent />
-</BusyContainer>
-```

package/docs/helpers.md

@@ -1,173 +0,0 @@
-# Helpers
-
-## mergeStyles
-
-```typescript
-function mergeStyles(
-  ...styles: (JSX.CSSProperties | string | undefined)[]
-): JSX.CSSProperties;
-```
-
-Merges multiple style objects or CSS strings into a single `JSX.CSSProperties` object. Handles `undefined` values gracefully.
-
----
-
-## createAppStructure
-
-```typescript
-function createAppStructure<TModule, const TItems extends AppStructureItem<TModule>[]>(
-  getOpts: () => {
-    items: TItems;
-    usableModules?: Accessor<TModule[] | undefined>;
-    permRecord?: Accessor<Record<string, boolean> | undefined>;
-  },
-): {
-  AppStructureProvider: ParentComponent;
-  useAppStructure(): AppStructure<TModule>;
-};
-```
-
-Creates an application navigation/permission structure from a declarative item tree. Returns a provider and a hook.
-
-### AppStructure types
-
-```typescript
-interface AppStructureGroupItem<TModule> {
-  code: string;
-  title: string;
-  icon?: Component<IconProps>;
-  modules?: TModule[];
-  requiredModules?: TModule[];
-  children: AppStructureItem<TModule>[];
-}
-
-interface AppStructureLeafItem<TModule> {
-  code: string;
-  title: string;
-  icon?: Component<IconProps>;
-  modules?: TModule[];
-  requiredModules?: TModule[];
-  component?: Component;
-  perms?: ("use" | "edit")[];
-  subPerms?: AppStructureSubPerm<TModule>[];
-  isNotMenu?: boolean;
-}
-
-interface AppMenu {
-  title: string;
-  href?: string;
-  icon?: Component<IconProps>;
-  children?: AppMenu[];
-}
-
-interface AppStructure<TModule> {
-  items: AppStructureItem<TModule>[];
-  usableRoutes: Accessor<AppRoute[]>;
-  usableMenus: Accessor<AppMenu[]>;
-  usableFlatMenus: Accessor<AppFlatMenu[]>;
-  usablePerms: Accessor<AppPerm<TModule>[]>;
-  allFlatPerms: AppFlatPerm<TModule>[];
-  getTitleChainByHref(href: string): string[];
-}
-```
-
-The structure automatically derives routes, menus, and permissions from the item tree, filtering by `usableModules` and `permRecord`.
-
----
-
-## createSlot
-
-```typescript
-function createSlot<TProps extends { children: JSX.Element }>():
-  [Component<TProps>, () => [Accessor<TProps | undefined>, ParentComponent]];
-```
-
-Creates a slot pattern for compound components. Returns a slot component and a hook to access the slot content.
-
----
-
-## createSlots
-
-```typescript
-interface SlotRegistrar<TItem> {
-  add(item: TItem): void;
-  remove(item: TItem): void;
-}
-
-function createSlots<TItem>():
-  [Component, () => [Accessor<TItem[]>, ParentComponent]];
-```
-
-Like `createSlot` but for multiple items. Items are collected from all rendered slot components.
-
----
-
-## ripple (Directive)
-
-```typescript
-function ripple(el: HTMLElement, accessor: Accessor<boolean>): void;
-```
-
-SolidJS directive that adds a Material-style ripple effect on click.
-
-```typescript
-import { ripple } from "@simplysm/solid";
-
-// Register the directive (required for TypeScript)
-void ripple;
-
-<div use:ripple={true}>Click me</div>
-```
-
----
-
-## Style Constants
-
-### base.styles
-
-Background, border, and text color utilities mapped to the theme system:
-
-- `bg.surface`, `bg.muted`, `bg.subtle` -- background colors
-- `border.default`, `border.subtle` -- border colors
-- `text.default`, `text.muted`, `text.placeholder` -- text colors
-
-### control.styles
-
-Component sizing and state utilities:
-
-- `pad.xs`, `pad.sm`, `pad.md`, `pad.lg`, `pad.xl` -- padding by size
-- `gap.xs` ... `gap.xl` -- gap by size
-- `state.disabled` -- disabled state styling
-- `ComponentSize` -- `"xs" | "sm" | "md" | "lg" | "xl"`
-
-### theme.styles
-
-Semantic theme tokens:
-
-- `SemanticTheme` -- `"base" | "primary" | "info" | "success" | "warning" | "danger"`
-- `themeTokens` -- maps each theme to `{ solid, solidHover, light, text, hoverBg, border }` Tailwind class sets
-
----
-
-## Usage Examples
-
-```typescript
-import { createAppStructure, mergeStyles } from "@simplysm/solid";
-
-// App structure
-const { AppStructureProvider, useAppStructure } = createAppStructure(() => ({
-  items: [
-    { code: "home", title: "Home", component: HomePage },
-    {
-      code: "admin", title: "Admin", children: [
-        { code: "users", title: "Users", component: UsersPage, perms: ["use", "edit"] },
-      ],
-    },
-  ],
-  usableModules: () => currentModules(),
-  permRecord: () => userPerms(),
-}));
-
-// Merge styles
-const style = mergeStyles(props.style, { padding: "8px" }, "color: red");
-```

package/docs/hooks.md

@@ -1,146 +0,0 @@
-# Hooks
-
-## useLocalStorage
-
-```typescript
-function useLocalStorage<TValue>(
-  key: string,
-  initialValue?: TValue,
-): [Accessor<TValue | undefined>, StorageSetter<TValue>];
-```
-
-Reactive `localStorage` binding. Returns a signal-like tuple. Automatically serializes/deserializes values as JSON.
-
----
-
-## useSyncConfig
-
-```typescript
-function useSyncConfig<TValue>(
-  key: string,
-  defaultValue: TValue,
-): [Accessor<TValue>, Setter<TValue>, Accessor<boolean>];
-```
-
-Persisted configuration backed by `SyncStorageProvider`. Returns `[value, setValue, ready]`. The `ready` accessor becomes `true` once the stored value has been loaded.
-
----
-
-## useLogger
-
-```typescript
-interface Logger {
-  log(...args: unknown[]): void;
-  info(...args: unknown[]): void;
-  warn(...args: unknown[]): void;
-  error(...args: unknown[]): void;
-  configure(fn: (origin: LogAdapter) => LogAdapter): void;
-}
-
-function useLogger(): Logger;
-```
-
-Access the logging system from `LoggerProvider`. Supports middleware composition via `configure()`.
-
----
-
-## createControllableSignal
-
-```typescript
-function createControllableSignal<TValue>(options: {
-  value: Accessor<TValue>;
-  onChange: Accessor<((value: TValue) => void) | undefined>;
-}): [Accessor<TValue>, (newValue: TValue | ((prev: TValue) => TValue)) => TValue];
-```
-
-Creates a signal that supports both controlled and uncontrolled modes. When `onChange` is provided, the component is controlled; otherwise, internal state is used. This is the primitive behind all form control `value`/`onValueChange` pairs.
-
----
-
-## createControllableStore
-
-```typescript
-function createControllableStore<TValue extends object>(options: {
-  value: () => TValue;
-  onChange: () => ((value: TValue) => void) | undefined;
-}): [TValue, SetStoreFunction<TValue>];
-```
-
-Like `createControllableSignal` but for SolidJS stores (deep reactive objects).
-
----
-
-## createIMEHandler
-
-```typescript
-function createIMEHandler(setValue: (value: string) => void): {
-  composingValue: Accessor<string | null>;
-  handleCompositionStart(): void;
-  handleInput(value: string, isComposing: boolean): void;
-  handleCompositionEnd(value: string): void;
-  flushComposition(): void;
-};
-```
-
-Handles IME composition events (Korean, Chinese, Japanese input). Buffers intermediate composition states and only commits the final value. Used internally by `TextInput` and `Textarea`.
-
----
-
-## createMountTransition
-
-```typescript
-function createMountTransition(
-  open: () => boolean,
-): {
-  mounted: () => boolean;
-  animating: () => boolean;
-  unmount: () => void;
-};
-```
-
-Manages mount/unmount transitions. While `open()` is true, `mounted` and `animating` are true. When `open()` becomes false, `animating` becomes false (triggering CSS transition), and `unmount()` should be called after the transition ends to set `mounted` to false.
-
----
-
-## useRouterLink
-
-```typescript
-interface RouterLinkOptions {
-  href: string;
-  state?: Record<string, unknown>;
-  window?: { width?: number; height?: number };
-}
-
-function useRouterLink(): (options: RouterLinkOptions) => (e: MouseEvent | KeyboardEvent) => void;
-```
-
-Creates click handlers for SolidJS Router navigation. Supports opening links in new windows with specified dimensions via the `window` option.
-
----
-
-## Usage Examples
-
-```typescript
-import {
-  useLocalStorage,
-  useSyncConfig,
-  createControllableSignal,
-  useLogger,
-} from "@simplysm/solid";
-
-// Local storage
-const [theme, setTheme] = useLocalStorage<string>("app-theme", "light");
-
-// Sync config (persisted to SyncStorageProvider)
-const [pageSize, setPageSize, ready] = useSyncConfig("pageSize", 20);
-
-// Logger
-const logger = useLogger();
-logger.info("Application started");
-
-// Controlled/uncontrolled primitive
-const [value, setValue] = createControllableSignal({
-  value: () => props.value,
-  onChange: () => props.onValueChange,
-});
-```

package/docs/layout.md

@@ -1,94 +0,0 @@
-# Layout
-
-## FormGroup
-
-```typescript
-interface FormGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  inline?: boolean;
-}
-```
-
-Groups form fields vertically (default) or horizontally with `inline`.
-
-**Sub-component:** `FormGroup.Item` — `{ label?: JSX.Element } & JSX.HTMLAttributes<HTMLDivElement>`
-
----
-
-## FormTable
-
-```typescript
-interface FormTableProps extends JSX.HTMLAttributes<HTMLTableElement> {}
-```
-
-Arranges form fields in a label-value table layout.
-
-**Sub-components:**
-- `FormTable.Row` — table row
-- `FormTable.Item` — `{ label?: JSX.Element } & JSX.TdHTMLAttributes<HTMLTableCellElement>`
-
----
-
-## Sidebar
-
-```typescript
-interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
-  children: JSX.Element;
-}
-```
-
-Collapsible sidebar navigation. Must be wrapped in `Sidebar.Container`.
-
-**Sub-components:**
-- `Sidebar.Container` — layout wrapper that includes both sidebar and main content
-- `Sidebar.Menu` — `{ menus: AppMenu[] }` — renders navigation tree from `AppMenu` data
-- `Sidebar.User` — `{ name: string; icon?: Component; description?: string; menus?: SidebarUserMenu[] }` — user profile section with optional dropdown menus
-
-**Hook:** `useSidebar()` — access sidebar state (collapsed, toggle, etc.)
-
----
-
-## Topbar
-
-```typescript
-interface TopbarProps extends JSX.HTMLAttributes<HTMLElement> {
-  children: JSX.Element;
-}
-```
-
-Top navigation bar. Must be wrapped in `Topbar.Container`.
-
-**Sub-components:**
-- `Topbar.Container` — layout wrapper
-- `Topbar.Menu` — `{ menus: TopbarMenuItem[] }` — renders top-level navigation
-- `Topbar.User` — `{ menus?: TopbarUserMenu[]; children: JSX.Element }` — user section with dropdown
-
-**Hooks:**
-- `useTopbarActionsAccessor()` — access topbar actions element
-- `useTopbarActions(accessor)` — register topbar actions from child components
-
----
-
-## Usage Examples
-
-```typescript
-import { Sidebar, FormGroup, FormTable } from "@simplysm/solid";
-
-// Sidebar layout
-<Sidebar.Container>
-  <Sidebar>
-    <Sidebar.User name="John" description="Admin" />
-    <Sidebar.Menu menus={appMenus} />
-  </Sidebar>
-  <main>Content</main>
-</Sidebar.Container>
-
-// Form with labeled fields
-<FormGroup>
-  <FormGroup.Item label="Name">
-    <TextInput value={name()} onValueChange={setName} />
-  </FormGroup.Item>
-  <FormGroup.Item label="Email">
-    <TextInput value={email()} onValueChange={setEmail} type="email" />
-  </FormGroup.Item>
-</FormGroup>
-```