@simplysm/solid 13.0.96 → 13.0.98

package/docs/disclosure.md

@@ -0,0 +1,164 @@
+# Disclosure Components
+
+Source: `src/components/disclosure/**/*.tsx`
+
+## Collapse
+
+Animated expand/collapse container using margin-top transition.
+
+```ts
+interface CollapseProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  open?: boolean;  // default: false
+}
+```
+
+- Uses `ResizeObserver` to track content height.
+- Disables transition on initial render to prevent flicker.
+- Sets `visibility: hidden` when closed to prevent focusable element access.
+
+## Dropdown
+
+Positioned popup with trigger element. Uses Portal for rendering.
+
+```ts
+interface DropdownProps {
+  position?: { x: number; y: number };  // absolute position (for context menus)
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  maxHeight?: number;            // default: 300
+  disabled?: boolean;
+  keyboardNav?: boolean;         // arrow key navigation
+  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.
+
+### Sub-components
+
+- **`Dropdown.Trigger`** -- Click target that toggles the dropdown. Slot component.
+- **`Dropdown.Content`** -- Popup content. Slot component.
+
+## Dialog
+
+Modal or floating dialog with drag, resize, z-index management, and animation.
+
+```ts
+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
+  mode?: "float" | "fill";
+  width?: number;
+  height?: number;
+  minWidth?: number;
+  minHeight?: number;
+  position?: "bottom-right" | "top-right";
+  headerStyle?: JSX.CSSProperties | string;
+  beforeClose?: () => boolean;         // return false to prevent close
+  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.
+
+### 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.
+
+## DialogProvider
+
+Programmatic dialog provider. Enables `useDialog().show()` to open dialogs as Promises.
+
+```ts
+interface DialogProviderProps extends DialogDefaults {}
+
+interface DialogDefaults {
+  closeOnEscape?: boolean;
+  closeOnInteractOutside?: boolean;
+}
+```
+
+### useDialog()
+
+Hook to open dialogs programmatically.
+
+```ts
+function useDialog(): DialogContextValue;
+
+interface DialogContextValue {
+  show<P extends Record<string, any>>(
+    component: Component<P>,
+    props: Omit<P, "close">,
+    options?: DialogShowOptions,
+  ): Promise<ExtractCloseResult<P> | undefined>;
+}
+
+interface DialogShowOptions {
+  header?: JSX.Element;
+  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;
+}
+```
+
+The dialog component receives a `close` prop. Call `close(result)` to resolve the Promise.
+
+### DialogDefaultsContext
+
+Context providing default dialog configuration. Used by `Dialog` when per-instance props are not set.
+
+```ts
+const DialogDefaultsContext: Context<Accessor<DialogDefaults>>;
+```
+
+## Tabs
+
+Tab bar with value-based selection.
+
+```ts
+interface TabsProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  size?: ComponentSize;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+```
+
+### Sub-components
+
+- **`Tabs.Tab`** -- Individual tab button.
+
+```ts
+interface TabsTabProps {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+}
+```

package/docs/display.md

@@ -0,0 +1,94 @@
+# Display Components
+
+Source: `src/components/display/**/*.tsx`
+
+## Barcode
+
+SVG barcode renderer powered by bwip-js.
+
+```ts
+interface BarcodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  type: BarcodeType;
+  value?: string;
+}
+```
+
+### BarcodeType
+
+Union type of all supported barcode formats. Common values include: `"qrcode"`, `"code128"`, `"ean13"`, `"datamatrix"`, `"pdf417"`, `"azteccode"`, `"code39"`, `"upca"`, `"isbn"`.
+
+Full list exported from `src/components/display/Barcode.types.ts` with 100+ formats.
+
+## Card
+
+Elevated container with shadow and fade-in animation.
+
+```ts
+interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+```
+
+Applies surface background, rounded corners, shadow with hover/focus-within elevation.
+
+## Echarts
+
+Apache ECharts wrapper with reactive option updates and resize handling.
+
+```ts
+interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  option: echarts.EChartsOption;
+  busy?: boolean;  // shows/hides loading indicator
+}
+```
+
+- Uses SVG renderer.
+- Automatically resizes with container via `ResizeObserver`.
+
+## Icon
+
+Tabler icon wrapper using `Dynamic` rendering.
+
+```ts
+interface IconProps extends Omit<TablerIconProps, "size"> {
+  icon: Component<TablerIconProps>;
+  size?: string | number;  // default: "1.25em"
+}
+```
+
+Adds `inline` display and vertical alignment.
+
+## Tag
+
+Themed inline tag/badge with solid background.
+
+```ts
+type TagTheme = SemanticTheme;
+
+interface TagProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  theme?: TagTheme;  // default: "base"
+}
+```
+
+## Link
+
+Themed anchor link with hover underline.
+
+```ts
+type LinkTheme = SemanticTheme;
+
+interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  theme?: LinkTheme;    // default: "primary"
+  disabled?: boolean;
+}
+```
+
+## Alert
+
+Themed alert/callout box with light background.
+
+```ts
+type AlertTheme = SemanticTheme;
+
+interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  theme?: AlertTheme;  // default: "base"
+}
+```