@simplysm/solid 13.0.98 → 13.0.99

package/docs/disclosure.md

@@ -1,61 +1,70 @@
 # Disclosure Components
 
-Source: `src/components/disclosure/**/*.tsx`
+Source: `src/components/disclosure/**`
 
-## Collapse
+## `Collapse`
 
-Animated expand/collapse container using margin-top transition.
+Animated collapsible container using CSS margin-top transition.
 
-```ts
-interface CollapseProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  open?: boolean;  // default: false
+```typescript
+export interface CollapseProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  open?: boolean;
 }
 ```
 
-- Uses `ResizeObserver` to track content height.
-- Disables transition on initial render to prevent flicker.
-- Sets `visibility: hidden` when closed to prevent focusable element access.
+| Prop | Type | Description |
+|------|------|-------------|
+| `open` | `boolean` | Whether content is visible. Default: `false` |
+
+---
 
-## Dropdown
+## `Dropdown`
 
-Positioned popup with trigger element. Uses Portal for rendering.
+Popup dropdown component with trigger/content slot pattern. Supports auto-positioning, keyboard navigation, and context menu mode.
 
-```ts
-interface DropdownProps {
-  position?: { x: number; y: number };  // absolute position (for context menus)
+```typescript
+export interface DropdownProps {
+  position?: { x: number; y: number };
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  maxHeight?: number;            // default: 300
+  maxHeight?: number;
   disabled?: boolean;
-  keyboardNav?: boolean;         // arrow key navigation
+  keyboardNav?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   children: JSX.Element;
 }
 ```
 
-- Auto-positions above or below trigger based on available viewport space.
-- Closes on outside click, Escape key, scroll, and resize.
-- `keyboardNav`: ArrowDown/Up navigates between tabbable items in popup.
+| Prop | Type | Description |
+|------|------|-------------|
+| `position` | `{ x: number; y: number }` | Absolute position for context menu mode |
+| `open` | `boolean` | Popup open state |
+| `onOpenChange` | `(open: boolean) => void` | Open state change callback |
+| `maxHeight` | `number` | Popup max height in px. Default: `300` |
+| `disabled` | `boolean` | Disable trigger click |
+| `keyboardNav` | `boolean` | Enable ArrowUp/ArrowDown keyboard navigation |
 
 ### Sub-components
 
-- **`Dropdown.Trigger`** -- Click target that toggles the dropdown. Slot component.
-- **`Dropdown.Content`** -- Popup content. Slot component.
+- **`Dropdown.Trigger`** -- Trigger element slot (click toggles popup)
+- **`Dropdown.Content`** -- Popup content slot
 
-## Dialog
+---
 
-Modal or floating dialog with drag, resize, z-index management, and animation.
+## `Dialog`
 
-```ts
-interface DialogProps {
+Modal/float dialog with dragging, 8-directional resizing, automatic z-index management, and slot-based header/action areas.
+
+```typescript
+export interface DialogProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  withCloseButton?: boolean;           // default: true
-  closeOnInteractOutside?: boolean;    // default: false (uses DialogDefaults)
-  closeOnEscape?: boolean;             // default: true (uses DialogDefaults)
-  resizable?: boolean;                 // default: false
-  draggable?: boolean;                 // default: true
+  withCloseButton?: boolean;
+  closeOnInteractOutside?: boolean;
+  closeOnEscape?: boolean;
+  resizable?: boolean;
+  draggable?: boolean;
   mode?: "float" | "fill";
   width?: number;
   height?: number;
@@ -63,51 +72,64 @@ interface DialogProps {
   minHeight?: number;
   position?: "bottom-right" | "top-right";
   headerStyle?: JSX.CSSProperties | string;
-  beforeClose?: () => boolean;         // return false to prevent close
+  beforeClose?: () => boolean;
   onCloseComplete?: () => void;
   class?: string;
 }
 ```
 
-- `mode="float"`: no backdrop, pointer-events pass through.
-- `mode="fill"`: full-screen dialog.
-- 8-direction resize handles when `resizable=true`.
-- Automatic z-index stacking across multiple open dialogs.
+| Prop | Type | Description |
+|------|------|-------------|
+| `open` | `boolean` | Dialog open state |
+| `onOpenChange` | `(open: boolean) => void` | Open state change callback |
+| `withCloseButton` | `boolean` | Show close button. Default: `true` |
+| `closeOnInteractOutside` | `boolean` | Close on backdrop click. Default: `false` |
+| `closeOnEscape` | `boolean` | Close on ESC key. Default: `true` |
+| `resizable` | `boolean` | Enable 8-directional resizing. Default: `false` |
+| `draggable` | `boolean` | Enable header dragging. Default: `true` |
+| `mode` | `"float" \| "fill"` | Display mode |
+| `width` / `height` | `number` | Initial dimensions in px |
+| `minWidth` / `minHeight` | `number` | Minimum dimensions in px |
+| `position` | `"bottom-right" \| "top-right"` | Absolute position mode |
+| `beforeClose` | `() => boolean` | Close guard (return `false` to cancel) |
+| `onCloseComplete` | `() => void` | Callback after close animation completes |
 
 ### Sub-components
 
-- **`Dialog.Header`** -- Dialog title bar. Enables drag when `draggable=true`.
-- **`Dialog.Action`** -- Action buttons rendered in the header next to the close button.
+- **`Dialog.Header`** -- Header slot (enables dragging)
+- **`Dialog.Action`** -- Action slot in header area (before close button)
 
-## DialogProvider
+### `DialogProvider`
 
-Programmatic dialog provider. Enables `useDialog().show()` to open dialogs as Promises.
+Provider for programmatic dialog management via `useDialog().show()`.
 
-```ts
-interface DialogProviderProps extends DialogDefaults {}
+```typescript
+export interface DialogProviderProps extends DialogDefaults {}
 
-interface DialogDefaults {
+export interface DialogDefaults {
   closeOnEscape?: boolean;
   closeOnInteractOutside?: boolean;
 }
 ```
 
-### useDialog()
-
-Hook to open dialogs programmatically.
+### `useDialog`
 
-```ts
-function useDialog(): DialogContextValue;
+```typescript
+export function useDialog(): DialogContextValue;
 
-interface DialogContextValue {
+export interface DialogContextValue {
   show<P extends Record<string, any>>(
     component: Component<P>,
     props: Omit<P, "close">,
     options?: DialogShowOptions,
   ): Promise<ExtractCloseResult<P> | undefined>;
 }
+```
+
+### `DialogShowOptions`
 
-interface DialogShowOptions {
+```typescript
+export interface DialogShowOptions {
   header?: JSX.Element;
   withCloseButton?: boolean;
   closeOnInteractOutside?: boolean;
@@ -125,21 +147,17 @@ interface DialogShowOptions {
 }
 ```
 
-The dialog component receives a `close` prop. Call `close(result)` to resolve the Promise.
+### `DialogDefaultsContext`
 
-### DialogDefaultsContext
+Context for setting default dialog options across the app.
 
-Context providing default dialog configuration. Used by `Dialog` when per-instance props are not set.
+---
 
-```ts
-const DialogDefaultsContext: Context<Accessor<DialogDefaults>>;
-```
-
-## Tabs
+## `Tabs`
 
-Tab bar with value-based selection.
+Tab bar component with underline indicator and keyboard support.
 
-```ts
+```typescript
 interface TabsProps {
   value?: string;
   onValueChange?: (value: string) => void;
@@ -150,11 +168,17 @@ interface TabsProps {
 }
 ```
 
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | Currently selected tab value |
+| `onValueChange` | `(value: string) => void` | Tab change callback |
+| `size` | `ComponentSize` | Tab size |
+
 ### Sub-components
 
-- **`Tabs.Tab`** -- Individual tab button.
+- **`Tabs.Tab`** -- Individual tab button
 
-```ts
+```typescript
 interface TabsTabProps {
   value: string;
   disabled?: boolean;

package/docs/display.md

@@ -1,94 +1,137 @@
 # Display Components
 
-Source: `src/components/display/**/*.tsx`
+Source: `src/components/display/**`
 
-## Barcode
+## `Barcode`
 
-SVG barcode renderer powered by bwip-js.
+SVG barcode renderer using bwip-js. Supports 100+ barcode formats.
 
-```ts
-interface BarcodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
+```typescript
+export interface BarcodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
   type: BarcodeType;
   value?: string;
 }
 ```
 
-### BarcodeType
+| Prop | Type | Description |
+|------|------|-------------|
+| `type` | `BarcodeType` | Barcode format (e.g., `"qrcode"`, `"code128"`, `"ean13"`) |
+| `value` | `string` | Data to encode |
 
-Union type of all supported barcode formats. Common values include: `"qrcode"`, `"code128"`, `"ean13"`, `"datamatrix"`, `"pdf417"`, `"azteccode"`, `"code39"`, `"upca"`, `"isbn"`.
+### `BarcodeType`
 
-Full list exported from `src/components/display/Barcode.types.ts` with 100+ formats.
+Union of 100+ barcode format strings including `"qrcode"`, `"code128"`, `"ean13"`, `"datamatrix"`, `"pdf417"`, `"azteccode"`, etc.
 
-## Card
+---
 
-Elevated container with shadow and fade-in animation.
+## `Card`
 
-```ts
-interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+Surface container with shadow, hover effects, and fade-in animation.
+
+```typescript
+export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {}
 ```
 
-Applies surface background, rounded corners, shadow with hover/focus-within elevation.
+---
 
-## Echarts
+## `Echarts`
 
-Apache ECharts wrapper with reactive option updates and resize handling.
+Apache ECharts wrapper with auto-resize and loading state support.
 
-```ts
-interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+```typescript
+export interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
   option: echarts.EChartsOption;
-  busy?: boolean;  // shows/hides loading indicator
+  busy?: boolean;
 }
 ```
 
-- Uses SVG renderer.
-- Automatically resizes with container via `ResizeObserver`.
+| Prop | Type | Description |
+|------|------|-------------|
+| `option` | `echarts.EChartsOption` | ECharts configuration object |
+| `busy` | `boolean` | Show loading overlay |
+
+---
 
-## Icon
+## `Icon`
 
-Tabler icon wrapper using `Dynamic` rendering.
+Wrapper for Tabler Icons with consistent sizing and vertical alignment.
 
-```ts
-interface IconProps extends Omit<TablerIconProps, "size"> {
+```typescript
+export interface IconProps extends Omit<TablerIconProps, "size"> {
   icon: Component<TablerIconProps>;
-  size?: string | number;  // default: "1.25em"
+  size?: string | number;
 }
 ```
 
-Adds `inline` display and vertical alignment.
+| Prop | Type | Description |
+|------|------|-------------|
+| `icon` | `Component<TablerIconProps>` | Tabler icon component |
+| `size` | `string \| number` | Icon size. Default: `"1.25em"` |
 
-## Tag
+---
 
-Themed inline tag/badge with solid background.
+## `Tag`
 
-```ts
-type TagTheme = SemanticTheme;
+Inline badge/tag with semantic theme colors.
 
-interface TagProps extends JSX.HTMLAttributes<HTMLSpanElement> {
-  theme?: TagTheme;  // default: "base"
+```typescript
+export interface TagProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  theme?: TagTheme;
 }
 ```
 
-## Link
+| Prop | Type | Description |
+|------|------|-------------|
+| `theme` | `SemanticTheme` | Color theme. Default: `"base"` |
 
-Themed anchor link with hover underline.
+### `TagTheme`
+
+```typescript
+export type TagTheme = SemanticTheme;
+```
 
-```ts
-type LinkTheme = SemanticTheme;
+---
 
-interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
-  theme?: LinkTheme;    // default: "primary"
+## `Link`
+
+Styled anchor element with theme colors and disabled state.
+
+```typescript
+export interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  theme?: LinkTheme;
   disabled?: boolean;
 }
 ```
 
-## Alert
+| Prop | Type | Description |
+|------|------|-------------|
+| `theme` | `SemanticTheme` | Color theme. Default: `"primary"` |
+| `disabled` | `boolean` | Disabled state |
+
+### `LinkTheme`
+
+```typescript
+export type LinkTheme = SemanticTheme;
+```
+
+---
 
-Themed alert/callout box with light background.
+## `Alert`
 
-```ts
-type AlertTheme = SemanticTheme;
+Block-level alert container with semantic theme background.
 
-interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  theme?: AlertTheme;  // default: "base"
+```typescript
+export interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  theme?: AlertTheme;
 }
 ```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `theme` | `SemanticTheme` | Color theme. Default: `"base"` |
+
+### `AlertTheme`
+
+```typescript
+export type AlertTheme = SemanticTheme;
+```