@simplysm/solid 13.0.98 → 13.0.99

package/docs/styles.md

@@ -1,127 +1,133 @@
-# Styles + Directives
+# Styles & Directives
 
-Source: `src/styles/*.ts`, `src/directives/*.ts`
+Source: `src/styles/**`, `src/directives/**`
 
-## Base Styles
+## Base Styles (`base.styles`)
 
-Source: `src/styles/base.styles.ts`
+Foundational design tokens for borders, backgrounds, and text.
 
-Design tokens for borders, backgrounds, and text.
-
-```ts
-const border = {
-  default: "border-base-200 dark:border-base-700",
-  subtle: "border-base-200 dark:border-base-700",
+```typescript
+export const border: {
+  default: string;  // border-base-200 dark:border-base-700
+  subtle: string;   // border-base-200 dark:border-base-700
 };
 
-const bg = {
-  surface: "bg-white dark:bg-base-900",
-  muted: "bg-base-100 dark:bg-base-800",
-  subtle: "bg-base-200 dark:bg-base-700",
+export const bg: {
+  surface: string;  // bg-white dark:bg-base-900
+  muted: string;    // bg-base-100 dark:bg-base-800
+  subtle: string;   // bg-base-200 dark:bg-base-700
 };
 
-const text = {
-  default: "text-base-900 dark:text-base-100",
-  muted: "text-base-400 dark:text-base-500",
-  placeholder: "placeholder:text-base-400 dark:placeholder:text-base-500",
+export const text: {
+  default: string;      // text-base-900 dark:text-base-100
+  muted: string;        // text-base-400 dark:text-base-500
+  placeholder: string;  // placeholder:text-base-400 dark:placeholder:text-base-500
 };
 ```
 
-## Control Styles
+---
 
-Source: `src/styles/control.styles.ts`
+## Control Styles (`control.styles`)
 
-Tokens for interactive component sizing, padding, gaps, and states.
+Size and state tokens for interactive components.
 
-```ts
-const state = {
-  disabled: "pointer-events-none cursor-default opacity-30",
-};
+### `ComponentSize`
 
-type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
+```typescript
+export type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
+```
 
-const pad: Record<ComponentSize | string, string> = {
-  md: "px-2 py-1",
-  xs: "px-1 py-0",
-  sm: "px-1.5 py-0.5",
-  lg: "px-3 py-2",
-  xl: "px-4 py-3",
-};
+### `state`
 
-const gap: Record<ComponentSize | string, string> = {
-  md: "gap-1",
-  xs: "gap-0",
-  sm: "gap-0.5",
-  lg: "gap-1.5",
-  xl: "gap-2",
+```typescript
+export const state: {
+  disabled: string;  // pointer-events-none cursor-default opacity-30
 };
 ```
 
-## Theme Styles
+### `pad`
 
-Source: `src/styles/theme.styles.ts`
+Size-specific padding classes:
 
-Semantic color tokens for six themes: `primary`, `info`, `success`, `warning`, `danger`, `base`.
+| Size | Value |
+|------|-------|
+| `xs` | `px-1 py-0` |
+| `sm` | `px-1.5 py-0.5` |
+| `md` | `px-2 py-1` |
+| `lg` | `px-3 py-2` |
+| `xl` | `px-4 py-3` |
 
-```ts
-type SemanticTheme = "primary" | "info" | "success" | "warning" | "danger" | "base";
+### `gap`
 
-const themeTokens: Record<SemanticTheme, {
-  solid: string;       // solid background + white text
-  solidHover: string;  // hover state for solid
-  light: string;       // light background + dark text
-  text: string;        // text color only
-  hoverBg: string;     // hover background
-  border: string;      // border color
-}>;
-```
+Size-specific gap classes:
+
+| Size | Value |
+|------|-------|
+| `xs` | `gap-0` |
+| `sm` | `gap-0.5` |
+| `md` | `gap-1` |
+| `lg` | `gap-1.5` |
+| `xl` | `gap-2` |
+
+---
 
-Each theme provides six variants:
+## Theme Styles (`theme.styles`)
 
-| Variant | Usage |
-|---------|-------|
-| `solid` | Tag, Button(solid), Progress bar fill |
-| `solidHover` | Button(solid) hover state |
-| `light` | Alert background |
-| `text` | Link color, Tab selected |
-| `hoverBg` | Button(ghost) hover, List item hover |
-| `border` | Button(outline) border |
+Semantic color theme tokens for components.
 
-Example values for `primary`:
+### `SemanticTheme`
+
+```typescript
+export type SemanticTheme = "primary" | "info" | "success" | "warning" | "danger" | "base";
 ```
-solid:     "bg-primary-500 text-white"
-solidHover: "hover:bg-primary-600 dark:hover:bg-primary-400"
-light:     "bg-primary-100 text-primary-900 dark:bg-primary-900/40 dark:text-primary-100"
-text:      "text-primary-600 dark:text-primary-400"
-hoverBg:   "hover:bg-primary-100 dark:hover:bg-primary-800/30"
-border:    "border-primary-300 dark:border-primary-600"
+
+### `themeTokens`
+
+```typescript
+export const themeTokens: Record<SemanticTheme, {
+  solid: string;       // Solid background + white text
+  solidHover: string;  // Hover effect for solid
+  light: string;       // Light background + dark text
+  text: string;        // Text color only
+  hoverBg: string;     // Hover background
+  border: string;      // Border color
+}>;
 ```
 
-## Directives
+Each theme (`primary`, `info`, `success`, `warning`, `danger`, `base`) provides all six token fields.
 
-### ripple
+---
 
-Directive that adds a material-design-style ripple effect on pointer down.
+## Ripple Directive (`ripple`)
 
-```ts
-function ripple(el: HTMLElement, accessor: Accessor<boolean>): void;
+Directive that adds a material-design ripple effect to interactive elements.
+
+```typescript
+export function ripple(el: HTMLElement, accessor: Accessor<boolean>): void;
 ```
 
-Usage in TSX:
+### Usage
 
 ```tsx
 <button use:ripple={!props.disabled}>Click me</button>
 ```
 
-Behavior:
-- Creates an internal ripple container with `overflow: hidden`.
-- Changes element position to `relative` if it is `static` (restored on cleanup).
-- Single ripple mode: removes previous ripple on new click.
-- Respects `prefers-reduced-motion: reduce`.
-- Ripple radius based on distance from click point to farthest corner.
+### Behavior
 
-To use the directive, import and void it at the top of your file:
-```tsx
-import { ripple } from "@simplysm/solid";
-void ripple;
+- Creates an internal ripple container with `overflow: hidden`
+- Sets `position: relative` on static-positioned elements (restores on cleanup)
+- Single ripple mode: removes previous ripple on new click
+- Respects `prefers-reduced-motion: reduce`
+- Full cleanup on unmount
+
+### TypeScript Declaration
+
+```typescript
+declare module "solid-js" {
+  namespace JSX {
+    interface Directives {
+      ripple: boolean;
+    }
+  }
+}
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/solid",
-  "version": "13.0.98",
+  "version": "13.0.99",
   "description": "Simplysm package - SolidJS library",
   "author": "simplysm",
   "license": "Apache-2.0",
@@ -53,10 +53,10 @@
     "tabbable": "^6.4.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^3.4.19",
-    "@simplysm/core-browser": "13.0.98",
-    "@simplysm/core-common": "13.0.98",
-    "@simplysm/service-common": "13.0.98",
-    "@simplysm/service-client": "13.0.98"
+    "@simplysm/core-browser": "13.0.99",
+    "@simplysm/core-common": "13.0.99",
+    "@simplysm/service-common": "13.0.99",
+    "@simplysm/service-client": "13.0.99"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"