@simplysm/solid 13.0.78 → 13.0.81

package/docs/data.md

@@ -0,0 +1,204 @@
+# Data
+
+## Table
+
+```typescript
+interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {
+  inset?: boolean;
+}
+```
+
+Basic HTML table with consistent styling.
+
+**Sub-components:** `Table.Row`, `Table.HeaderCell`, `Table.Cell`
+
+---
+
+## List
+
+```typescript
+interface ListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  inset?: boolean;
+}
+```
+
+Vertical list with keyboard navigation (ArrowUp/Down, Home/End) and tree-view support (ArrowRight/Left to expand/collapse).
+
+**Sub-component:** `List.Item`
+
+---
+
+## Pagination
+
+```typescript
+interface PaginationProps extends JSX.HTMLAttributes<HTMLElement> {
+  page: number;
+  onPageChange?: (page: number) => void;
+  totalPageCount: number;
+  displayPageCount?: number;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+```
+
+Page navigation control. `page` is 1-based. `displayPageCount` controls how many page numbers are visible at once.
+
+---
+
+## DataSheet
+
+```typescript
+interface DataSheetProps<TItem> {
+  items?: TItem[];
+  storageKey?: string;
+  hideConfigBar?: boolean;
+  inset?: boolean;
+  contentStyle?: JSX.CSSProperties | string;
+
+  // Sorting
+  sorts?: SortingDef[];
+  onSortsChange?: (sorts: SortingDef[]) => void;
+  autoSort?: boolean;
+
+  // Pagination
+  page?: number;
+  onPageChange?: (page: number) => void;
+  totalPageCount?: number;
+  pageSize?: number;
+  displayPageCount?: number;
+
+  // Selection
+  selectionMode?: "single" | "multiple";
+  selection?: TItem[];
+  onSelectionChange?: (items: TItem[]) => void;
+  autoSelect?: boolean;
+  isItemSelectable?: (item: TItem) => boolean | string;
+
+  // Tree expansion
+  expandedItems?: TItem[];
+  onExpandedItemsChange?: (items: TItem[]) => void;
+  itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
+
+  // Cell styling
+  cellClass?: (item: TItem, colKey: string) => string | undefined;
+  cellStyle?: (item: TItem, colKey: string) => string | undefined;
+
+  // Reordering
+  onItemsReorder?: (event: DataSheetReorderEvent<TItem>) => void;
+
+  class?: string;
+  children: JSX.Element;
+}
+```
+
+Advanced data grid with sorting, pagination, row selection, tree expansion, column reordering, and column configuration persistence.
+
+- `storageKey` — persists column configuration (width, visibility, order) to sync storage
+- `autoSort` — sorts items client-side without `onSortsChange`
+- `autoSelect` — manages selection state internally
+- `itemChildren` — enables tree-structured rows
+
+**Sub-component:** `DataSheet.Column`
+
+```typescript
+interface DataSheetColumnProps<TItem> {
+  key: string;
+  header?: string | string[];
+  headerContent?: () => JSX.Element;
+  headerStyle?: string;
+  summary?: () => JSX.Element;
+  tooltip?: string;
+  fixed?: boolean;
+  hidden?: boolean;
+  collapse?: boolean;
+  width?: string;
+  class?: string;
+  sortable?: boolean;
+  resizable?: boolean;
+  children: (ctx: DataSheetCellContext<TItem>) => JSX.Element;
+}
+
+interface DataSheetCellContext<TItem> {
+  item: TItem;
+  index: number;
+  row: number;
+  depth: number;
+}
+
+interface SortingDef {
+  key: string;
+  desc: boolean;
+}
+
+interface DataSheetReorderEvent<TItem> {
+  item: TItem;
+  targetItem: TItem;
+  position: "before" | "after" | "inside";
+}
+```
+
+---
+
+## Calendar
+
+```typescript
+interface CalendarProps<TValue> extends Omit<JSX.HTMLAttributes<HTMLTableElement>, "children"> {
+  items: TValue[];
+  getItemDate: (item: TValue, index: number) => DateOnly;
+  renderItem: (item: TValue, index: number) => JSX.Element;
+  yearMonth?: DateOnly;
+  onYearMonthChange?: (value: DateOnly) => void;
+  weekStartDay?: number;
+  minDaysInFirstWeek?: number;
+}
+```
+
+Monthly calendar view that renders items on their corresponding dates. `getItemDate` maps items to dates. `renderItem` renders each item cell.
+
+---
+
+## Kanban
+
+```typescript
+interface KanbanProps<TCardValue, TLaneValue> extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onDrop"> {
+  onDrop?: (info: KanbanDropInfo<TLaneValue, TCardValue>) => void;
+  selectedValues?: TCardValue[];
+  onSelectedValuesChange?: (values: TCardValue[]) => void;
+  children?: JSX.Element;
+}
+```
+
+Kanban board with drag-and-drop card management.
+
+**Sub-components:**
+- `Kanban.Lane` — `{ value?: TLaneValue; busy?: boolean; collapsible?: boolean; collapsed?: boolean; onCollapsedChange?: (collapsed: boolean) => void }`
+- `Kanban.Card` — `{ value?: TCardValue; draggable?: boolean; selectable?: boolean; contentClass?: string }`
+- `Kanban.LaneTitle` — lane title slot
+- `Kanban.LaneTools` — lane toolbar slot
+
+---
+
+## Usage Examples
+
+```typescript
+import { DataSheet, Pagination } from "@simplysm/solid";
+
+<DataSheet
+  items={data()}
+  sorts={sorts()}
+  onSortsChange={setSorts}
+  page={page()}
+  onPageChange={setPage}
+  totalPageCount={totalPages()}
+  selectionMode="multiple"
+  selection={selected()}
+  onSelectionChange={setSelected}
+  storageKey="my-table"
+>
+  <DataSheet.Column key="name" header="Name" sortable>
+    {(ctx) => ctx.item.name}
+  </DataSheet.Column>
+  <DataSheet.Column key="age" header="Age" sortable width="80px">
+    {(ctx) => ctx.item.age}
+  </DataSheet.Column>
+</DataSheet>
+```

package/docs/disclosure.md

@@ -0,0 +1,139 @@
+# 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
+
+**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>;
+}
+```
+
+Use `DialogProvider` and `useDialog()` for programmatic dialog management. The shown component receives a `close(result?)` prop to close the dialog and return a value.
+
+```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

@@ -0,0 +1,125 @@
+# 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" | "success" | "warning" | "danger" | "danger-light" | "neutral";
+}
+```
+
+Inline badge/tag with semantic theming.
+
+---
+
+## Link
+
+```typescript
+interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  theme?: "base" | "primary" | "success" | "warning" | "danger" | "danger-light" | "neutral";
+  disabled?: boolean;
+}
+```
+
+Styled anchor link with theme and disabled state.
+
+---
+
+## Alert
+
+```typescript
+interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  theme?: "base" | "primary" | "success" | "warning" | "danger" | "danger-light" | "neutral";
+}
+```
+
+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" | "success" | "warning" | "danger" | "danger-light" | "neutral";
+  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>
+```