@simplysm/solid 13.0.85 → 13.0.86

package/docs/disclosure.md

@@ -1,146 +0,0 @@
-# Disclosure
-
-## Collapse
-
-```typescript
-interface CollapseProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  open?: boolean;
-}
-```
-
-Collapsible content panel with CSS transition. Content is hidden when `open` is `false`.
-
----
-
-## Dropdown
-
-```typescript
-interface DropdownProps {
-  position?: { x: number; y: number };
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  maxHeight?: number;
-  disabled?: boolean;
-  keyboardNav?: boolean;
-  class?: string;
-  style?: JSX.CSSProperties;
-  children: JSX.Element;
-}
-```
-
-Dropdown popup anchored to a trigger element. When `position` is provided instead of a trigger, the popup appears at the given absolute coordinates (useful for context menus). `keyboardNav` enables ArrowUp/Down navigation. Default `maxHeight` is 300px.
-
-**Sub-components:**
-- `Dropdown.Trigger` -- the element that opens the dropdown on click
-- `Dropdown.Content` -- the popup content
-
----
-
-## Dialog
-
-```typescript
-interface DialogProps {
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  withCloseButton?: boolean;
-  closeOnInteractOutside?: boolean;
-  closeOnEscape?: boolean;
-  resizable?: boolean;
-  draggable?: boolean;
-  mode?: "float" | "fill";
-  width?: number;
-  height?: number;
-  minWidth?: number;
-  minHeight?: number;
-  position?: "bottom-right" | "top-right";
-  headerStyle?: JSX.CSSProperties | string;
-  beforeClose?: () => boolean;
-  onCloseComplete?: () => void;
-  class?: string;
-}
-```
-
-Modal dialog with overlay. Supports both declarative (template) and programmatic usage.
-
-- `mode="float"` -- centered floating dialog (default)
-- `mode="fill"` -- full-screen dialog
-- `beforeClose` -- return `false` to prevent closing
-- `resizable` / `draggable` -- enable resize handles / drag-to-move (draggable defaults to `true`)
-- `withCloseButton` -- show close button (defaults to `true`)
-- `closeOnEscape` -- close on Escape key (defaults to `true`)
-
-**Sub-components:**
-- `Dialog.Header` -- dialog title bar
-- `Dialog.Action` -- dialog action buttons area
-
-### Programmatic API
-
-```typescript
-interface DialogContextValue {
-  show<P>(
-    component: Component<P>,
-    props: Omit<P, "close">,
-    options?: DialogShowOptions,
-  ): Promise<ExtractCloseResult<P> | undefined>;
-}
-
-interface DialogProviderProps {
-  closeOnEscape?: boolean;
-  closeOnInteractOutside?: boolean;
-}
-```
-
-Use `DialogProvider` and `useDialog()` for programmatic dialog management. The shown component receives a `close(result?)` prop to close the dialog and return a value. `DialogProvider` accepts default options for `closeOnEscape` and `closeOnInteractOutside`.
-
-```typescript
-const dialog = useDialog();
-const result = await dialog.show(MyDialogContent, { data }, {
-  width: 600,
-  withCloseButton: true,
-});
-```
-
----
-
-## Tabs
-
-```typescript
-interface TabsProps {
-  value?: string;
-  onValueChange?: (value: string) => void;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  class?: string;
-  style?: JSX.CSSProperties;
-  children?: JSX.Element;
-}
-```
-
-Tab navigation. Content rendering is managed externally based on the selected `value`.
-
-**Sub-component:** `Tabs.Tab` -- `{ value: string; disabled?: boolean; class?: string; children?: JSX.Element }`
-
----
-
-## Usage Examples
-
-```typescript
-import { Dialog, Dropdown, Tabs, Collapse } from "@simplysm/solid";
-
-// Declarative dialog
-<Dialog open={isOpen()} onOpenChange={setIsOpen} width={500} withCloseButton>
-  <Dialog.Header>Edit User</Dialog.Header>
-  <form>...</form>
-  <Dialog.Action>
-    <Button onClick={() => setIsOpen(false)}>Cancel</Button>
-    <Button theme="primary" onClick={save}>Save</Button>
-  </Dialog.Action>
-</Dialog>
-
-// Tabs
-<Tabs value={tab()} onValueChange={setTab}>
-  <Tabs.Tab value="general">General</Tabs.Tab>
-  <Tabs.Tab value="settings">Settings</Tabs.Tab>
-</Tabs>
-<Show when={tab() === "general"}>General content</Show>
-<Show when={tab() === "settings"}>Settings content</Show>
-```

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");
-```