@synthaxai/ui 1.0.0

package/README.md

@@ -0,0 +1,262 @@
+# @synthaxai/ui — Component Library
+
+Production-quality UI component library for Synthax healthcare applications.
+
+## Features
+
+- **23 Components** — Comprehensive set of UI components for healthcare apps
+- **Svelte 5** — Built with modern runes and snippets
+- **TypeScript** — Full type definitions for all components
+- **Accessible** — WCAG 2.1 AA compliant with screen reader support
+- **Dark Mode** — Automatic theme support via CSS variables
+- **Healthcare-Ready** — Designed for critical healthcare application requirements
+- **463 Tests** — Comprehensive unit tests with Vitest
+- **E2E Testing Ready** — All components support `testId` prop for Playwright/Cypress
+- **Focus Management** — Proper focus restoration for modals and dialogs
+- **Reduced Motion** — Respects `prefers-reduced-motion` user preference
+
+## Components
+
+### Primitives
+- **Button** — Multi-variant with loading states and icon-only mode
+- **Badge** — Status indicators with semantic colors
+
+### Forms
+- **TextInput** — Text, email, password, tel input with validation
+- **Textarea** — Multi-line input for clinical notes with auto-resize
+- **Select** — Dropdown with grouped options support
+- **Checkbox** — Accessible checkbox with indeterminate state
+- **RadioGroup** — Accessible radio group with descriptions
+- **FormField** — Wrapper for consistent form layouts
+
+### Feedback
+- **Alert** — Inline/banner alerts with clinical type support
+- **Toast** — Temporary notifications
+- **Spinner** — Loading indicators
+- **ProgressBar** — Determinate and indeterminate progress
+- **Skeleton** — Loading placeholders with shimmer/pulse animations
+- **EmptyState** — Empty data placeholders
+
+### Layout
+- **Card** — Glass morphism cards with header/footer slots
+- **Container** — Responsive content containers
+
+### Data Display
+- **StatCard** — Dashboard statistics with trends
+- **DataTable** — Sortable tables with mobile-responsive design
+
+### Navigation
+- **StepIndicator** — Multi-step workflow progress
+
+### Dialogs
+- **Modal** — Accessible modal with focus trap
+- **ConfirmDialog** — Confirmation dialogs for critical actions
+
+## Structure
+
+```
+src/
+├── index.ts              # Main exports
+├── types/                # TypeScript type definitions
+├── utils/                # Utility functions (cn, keyboard, a11y)
+├── styles/               # Design tokens CSS
+├── primitives/           # Button, Badge
+├── forms/                # TextInput, Textarea, Select, Checkbox, RadioGroup, FormField
+├── feedback/             # Alert, Toast, Spinner, ProgressBar, Skeleton, EmptyState
+├── layout/               # Card, Container
+├── data-display/         # StatCard, DataTable
+├── navigation/           # StepIndicator
+└── dialogs/              # Modal, ConfirmDialog
+```
+
+## Installation
+
+### For synthaxweb or other Synthax apps
+
+Add the library as a local dependency in your `package.json`:
+
+```json
+{
+  "dependencies": {
+    "@synthaxai/ui": "file:../ui/lib"
+  }
+}
+```
+
+Then install:
+
+```bash
+pnpm install
+```
+
+### Peer Dependencies
+
+The library requires:
+- `svelte` ^5.0.0
+- `lucide-svelte` ^0.400.0
+
+## Usage
+
+### 1. Import styles in your app's CSS
+
+```css
+/* app.css */
+@import '@synthaxai/ui/styles';
+```
+
+### 2. Use components in your Svelte files
+
+```svelte
+<script>
+  import { Button, Card, TextInput } from '@synthaxai/ui';
+</script>
+
+<Card>
+  <TextInput label="Patient Name" bind:value={patientName} />
+  <Button variant="primary" onclick={handleSubmit}>Save</Button>
+</Card>
+```
+
+### Import by category (tree-shaking friendly)
+
+```svelte
+<script>
+  import { Button } from '@synthaxai/ui/primitives';
+  import { TextInput, Select } from '@synthaxai/ui/forms';
+  import { Modal } from '@synthaxai/ui/dialogs';
+  import { Alert } from '@synthaxai/ui/feedback';
+</script>
+```
+
+### Using utilities
+
+```typescript
+import { cn, announce, generateId } from '@synthaxai/ui/utils';
+
+// Merge class names conditionally
+const className = cn('base-class', isActive && 'active-class');
+
+// Announce to screen readers
+announce('Form submitted successfully');
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start dev server
+pnpm dev
+
+# Run tests
+pnpm test
+
+# Run tests in watch mode
+pnpm test:watch
+
+# Build the library
+pnpm build
+
+# Type check
+pnpm check
+
+# Lint (with Biome)
+pnpm lint
+
+# Lint and fix
+pnpm lint:fix
+
+# Format (with Biome)
+pnpm format
+
+# Check format
+pnpm format:check
+
+# Lint + format + organize imports
+pnpm check:all
+```
+
+## E2E Testing Support
+
+All interactive components support the `testId` prop for Playwright or Cypress selectors:
+
+```svelte
+<Button testId="submit-button" onclick={handleSubmit}>Submit</Button>
+<TextInput testId="patient-name" label="Patient Name" bind:value={name} />
+<Modal testId="confirm-modal" open={isOpen} onclose={() => isOpen = false}>
+  ...
+</Modal>
+```
+
+In Playwright tests:
+
+```typescript
+await page.getByTestId('submit-button').click();
+await page.getByTestId('patient-name').fill('John Doe');
+```
+
+## Component Guidelines
+
+Each component:
+
+1. **Is self-contained** — Own styles, types, and tests
+2. **Supports dark mode** — Uses CSS variables for theming
+3. **Is accessible** — Proper ARIA attributes and keyboard navigation
+4. **Is typed** — Exports TypeScript interfaces for all props
+5. **Is documented** — JSDoc comments and usage examples
+6. **Is tested** — Unit tests covering rendering, states, and accessibility
+7. **Supports E2E testing** — Optional `testId` prop for test selectors
+
+## Theme Support
+
+The library supports light and dark themes in three modes:
+
+### 1. Automatic (System Preference)
+
+By default, the library respects `prefers-color-scheme`:
+
+```css
+/* Just import the styles - theme auto-detected */
+@import '@synthaxai/ui/styles';
+```
+
+### 2. Explicit Theme Control
+
+Set `data-theme` on the root element:
+
+```html
+<!-- Force light mode -->
+<html data-theme="light">
+
+<!-- Force dark mode -->
+<html data-theme="dark">
+```
+
+### 3. Toggle with JavaScript
+
+```javascript
+// Toggle theme
+function toggleTheme() {
+  const current = document.documentElement.dataset.theme;
+  document.documentElement.dataset.theme = current === 'dark' ? 'light' : 'dark';
+}
+```
+
+**Theme precedence:**
+1. `data-theme="dark"` → dark mode
+2. `data-theme="light"` → light mode  
+3. No `data-theme` → follows system preference
+
+## Design System
+
+The library follows Synthax's design system:
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| Primary | `#124545` | Brand color, CTAs |
+| Radius (buttons) | `8px` | rounded-lg |
+| Radius (cards) | `12px` | rounded-xl |
+| Radius (modals) | `16px` | rounded-2xl |
+
+See `src/styles/tokens.css` for all design tokens.

package/dist/app.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import './styles/tokens.css';

package/dist/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>