@aspect-ops/exon-ui 0.1.0 → 0.2.1

package/README.md

@@ -46,22 +46,24 @@ npm install @aspect-ops/exon-ui
 
 ### Form Components
 
-| Component       | Description                              |
-| --------------- | ---------------------------------------- |
-| `TextInput`     | Text input with validation states        |
-| `Textarea`      | Multi-line input with auto-resize        |
-| `Select`        | Dropdown select with keyboard navigation |
-| `Checkbox`      | Single checkbox with indeterminate state |
-| `CheckboxGroup` | Group of checkboxes with shared state    |
-| `Radio`         | Single radio button                      |
-| `RadioGroup`    | Radio button group with orientation      |
-| `Switch`        | Toggle switch component                  |
-| `FormField`     | Label wrapper with helper/error text     |
-| `SearchInput`   | Search with autocomplete suggestions     |
-| `DatePicker`    | Date selection with calendar popup       |
-| `TimePicker`    | Time selection with hour/minute picker   |
-| `FileUpload`    | Drag-drop file upload with previews      |
-| `OTPInput`      | One-time password input                  |
+| Component       | Description                                |
+| --------------- | ------------------------------------------ |
+| `TextInput`     | Text input with validation states          |
+| `Textarea`      | Multi-line input with auto-resize          |
+| `Select`        | Dropdown select with keyboard navigation   |
+| `Checkbox`      | Single checkbox with indeterminate state   |
+| `CheckboxGroup` | Group of checkboxes with shared state      |
+| `Radio`         | Single radio button                        |
+| `RadioGroup`    | Radio button group with orientation        |
+| `Switch`        | Toggle switch component                    |
+| `FormField`     | Label wrapper with helper/error text       |
+| `SearchInput`   | Search with autocomplete suggestions       |
+| `DatePicker`    | Date selection with calendar popup         |
+| `TimePicker`    | Time selection with hour/minute picker     |
+| `FileUpload`    | Drag-drop file upload with previews        |
+| `OTPInput`      | One-time password input                    |
+| `NumberInput`   | Number input with +/- buttons and keyboard |
+| `ToggleGroup`   | Single/multi select button group           |
 
 ### Navigation Components
 
@@ -74,6 +76,7 @@ npm install @aspect-ops/exon-ui
 | `Navbar`, `NavItem`                              | Responsive header with mobile menu |
 | `Sidebar`, `SidebarItem`, `SidebarGroup`         | Collapsible sidebar navigation     |
 | `Stepper`, `StepperStep`                         | Multi-step progress indicator      |
+| `Pagination`                                     | Page navigation with ellipsis      |
 
 ### Data Display Components
 
@@ -492,6 +495,128 @@ One-time password input with auto-focus and paste support.
 <OTPInput bind:value={otp} length={6} oncomplete={(code) => console.log('OTP:', code)} />
 ```
 
+### NumberInput
+
+Number input with increment/decrement buttons and keyboard support.
+
+**Props:**
+
+| Prop            | Type                      | Default | Description                 |
+| --------------- | ------------------------- | ------- | --------------------------- |
+| `value`         | `number \| null`          | `null`  | Bindable number value       |
+| `min`           | `number`                  | -       | Minimum allowed value       |
+| `max`           | `number`                  | -       | Maximum allowed value       |
+| `step`          | `number`                  | `1`     | Increment/decrement step    |
+| `disabled`      | `boolean`                 | `false` | Disabled state              |
+| `placeholder`   | `string`                  | -       | Input placeholder           |
+| `error`         | `boolean`                 | `false` | Error state styling         |
+| `onValueChange` | `(value: number) => void` | -       | Callback when value changes |
+
+**Usage:**
+
+```svelte
+<script>
+	import { NumberInput } from '@aspect-ops/exon-ui';
+
+	let quantity = $state(1);
+</script>
+
+<NumberInput bind:value={quantity} min={1} max={99} step={1} />
+
+<!-- With error state -->
+<NumberInput bind:value={quantity} min={0} max={10} error={quantity > 10} />
+```
+
+### ToggleGroup
+
+Button group for single or multiple selection.
+
+**Props (ToggleGroup):**
+
+| Prop            | Type                         | Default        | Description                 |
+| --------------- | ---------------------------- | -------------- | --------------------------- |
+| `type`          | `'single' \| 'multiple'`     | `'single'`     | Selection mode              |
+| `value`         | `string \| string[]`         | `'' \| []`     | Bindable selected value(s)  |
+| `onValueChange` | `(value) => void`            | -              | Callback when value changes |
+| `disabled`      | `boolean`                    | `false`        | Disabled state              |
+| `orientation`   | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction            |
+
+**Props (ToggleGroupItem):**
+
+| Prop       | Type      | Default | Description           |
+| ---------- | --------- | ------- | --------------------- |
+| `value`    | `string`  | -       | Item value (required) |
+| `disabled` | `boolean` | `false` | Disabled state        |
+
+**Usage:**
+
+```svelte
+<script>
+	import { ToggleGroup, ToggleGroupItem } from '@aspect-ops/exon-ui';
+
+	let alignment = $state('left');
+	let formats = $state([]);
+</script>
+
+<!-- Single selection (radio-like) -->
+<ToggleGroup bind:value={alignment} type="single">
+	{#snippet children()}
+		<ToggleGroupItem value="left">Left</ToggleGroupItem>
+		<ToggleGroupItem value="center">Center</ToggleGroupItem>
+		<ToggleGroupItem value="right">Right</ToggleGroupItem>
+	{/snippet}
+</ToggleGroup>
+
+<!-- Multiple selection (checkbox-like) -->
+<ToggleGroup bind:value={formats} type="multiple">
+	{#snippet children()}
+		<ToggleGroupItem value="bold">B</ToggleGroupItem>
+		<ToggleGroupItem value="italic">I</ToggleGroupItem>
+		<ToggleGroupItem value="underline">U</ToggleGroupItem>
+	{/snippet}
+</ToggleGroup>
+```
+
+### Pagination
+
+Page navigation with ellipsis for large page ranges.
+
+**Props:**
+
+| Prop           | Type                     | Default | Description                       |
+| -------------- | ------------------------ | ------- | --------------------------------- |
+| `currentPage`  | `number`                 | -       | Current page number (required)    |
+| `totalPages`   | `number`                 | -       | Total number of pages (required)  |
+| `siblingCount` | `number`                 | `1`     | Pages to show around current page |
+| `onPageChange` | `(page: number) => void` | -       | Callback when page changes        |
+
+**Usage:**
+
+```svelte
+<script>
+	import { Pagination } from '@aspect-ops/exon-ui';
+
+	let currentPage = $state(1);
+	const totalPages = 20;
+</script>
+
+<Pagination {currentPage} {totalPages} onPageChange={(page) => (currentPage = page)} />
+
+<!-- With more visible siblings -->
+<Pagination
+	{currentPage}
+	{totalPages}
+	siblingCount={2}
+	onPageChange={(page) => (currentPage = page)}
+/>
+```
+
+**Keyboard Navigation:**
+
+- `←` / `→`: Previous / Next page
+- `Home`: First page
+- `End`: Last page
+
 ## Data Display Components
 
 ### Accordion
@@ -922,6 +1047,206 @@ Components optimized for Capacitor mobile apps with gesture support, haptic feed
 
 - `edges` - Array of edges: `'top'` | `'right'` | `'bottom'` | `'left'` (default: all)
 
+## Website Components
+
+### Chatbot
+
+AI-ready chat widget with session management, typing indicators, and lead capture.
+
+```svelte
+<script>
+	import { Chatbot } from '@aspect-ops/exon-ui';
+
+	async function handleMessage(message, sessionId) {
+		// Call your AI backend (OpenAI, Claude, etc.)
+		const response = await fetch('/api/chat', {
+			method: 'POST',
+			body: JSON.stringify({ message, sessionId })
+		});
+		return (await response.json()).reply;
+	}
+
+	async function handleLeadCapture(data, sessionId) {
+		// Send to your CRM
+		await fetch('/api/leads', {
+			method: 'POST',
+			body: JSON.stringify({ ...data, sessionId })
+		});
+	}
+</script>
+
+<Chatbot
+	title="Support Chat"
+	subtitle="We typically reply within minutes"
+	welcomeMessage="Hello! How can I help you today?"
+	onSendMessage={handleMessage}
+	onLeadCapture={handleLeadCapture}
+	position="bottom-right"
+/>
+```
+
+**Props:**
+
+| Prop                | Type       | Default          | Description                               |
+| ------------------- | ---------- | ---------------- | ----------------------------------------- |
+| `title`             | `string`   | `'Chat Support'` | Chat header title                         |
+| `subtitle`          | `string`   | -                | Chat header subtitle                      |
+| `welcomeMessage`    | `string`   | -                | Initial welcome message                   |
+| `placeholder`       | `string`   | `'Type...'`      | Input placeholder text                    |
+| `defaultOpen`       | `boolean`  | `false`          | Open chat on mount                        |
+| `position`          | `string`   | `'bottom-right'` | Position: bottom-right, bottom-left       |
+| `inactivityTimeout` | `number`   | `40000`          | Auto-open after inactivity (ms), 0=off    |
+| `onSendMessage`     | `function` | -                | Callback: `(msg, sessionId) => reply`     |
+| `onLeadCapture`     | `function` | -                | Callback: `(data, sessionId) => void`     |
+| `onEscalate`        | `function` | -                | Callback: `(sessionId, messages) => void` |
+
+### ContactForm
+
+Customizable contact form with real-time validation and UTM tracking.
+
+```svelte
+<script>
+	import { ContactForm } from '@aspect-ops/exon-ui';
+
+	async function handleSubmit(data) {
+		const response = await fetch('/api/contact', {
+			method: 'POST',
+			body: JSON.stringify(data)
+		});
+		return { success: response.ok };
+	}
+</script>
+
+<ContactForm
+	submitText="Send Message"
+	successMessage="Thank you! We'll be in touch soon."
+	onSubmit={handleSubmit}
+/>
+```
+
+**Props:**
+
+| Prop               | Type            | Default        | Description                           |
+| ------------------ | --------------- | -------------- | ------------------------------------- |
+| `fields`           | `FieldConfig[]` | Default fields | Array of field configurations         |
+| `initialValues`    | `object`        | `{}`           | Initial form values                   |
+| `submitText`       | `string`        | `'Submit'`     | Submit button text                    |
+| `successMessage`   | `string`        | `'Thank you!'` | Success message after submit          |
+| `privacyNotice`    | `string`        | -              | Privacy policy text                   |
+| `extractUtmParams` | `boolean`       | `true`         | Extract UTM params from URL           |
+| `onSubmit`         | `function`      | -              | Callback: `(data) => { success }`     |
+| `onValidate`       | `function`      | -              | Callback: `(isValid, errors) => void` |
+
+**Default fields:** firstName, lastName, email, phone, company, message
+
+### ViewCounter
+
+Track and display page views with session-based deduplication.
+
+```svelte
+<script>
+	import { ViewCounter } from '@aspect-ops/exon-ui';
+
+	async function getCount(slug) {
+		const res = await fetch(`/api/views/${slug}`);
+		return (await res.json()).count;
+	}
+
+	async function trackView(slug) {
+		const res = await fetch(`/api/views/${slug}`, { method: 'POST' });
+		return (await res.json()).count;
+	}
+</script>
+
+<ViewCounter slug="blog-post-123" onGetCount={getCount} onTrackView={trackView} />
+```
+
+**Props:**
+
+| Prop          | Type       | Default | Description                  |
+| ------------- | ---------- | ------- | ---------------------------- |
+| `slug`        | `string`   | -       | Unique content identifier    |
+| `showLabel`   | `boolean`  | `true`  | Show "views" label           |
+| `trackView`   | `boolean`  | `true`  | Track view (or just display) |
+| `onGetCount`  | `function` | -       | Callback: `(slug) => count`  |
+| `onTrackView` | `function` | -       | Callback: `(slug) => count`  |
+
+### DoughnutChart
+
+Pure SVG doughnut chart with interactive legend (no external dependencies).
+
+```svelte
+<script>
+	import { DoughnutChart } from '@aspect-ops/exon-ui';
+
+	const data = [
+		{ label: 'Direct', value: 45000 },
+		{ label: 'Referral', value: 28000 },
+		{ label: 'Organic', value: 32000 },
+		{ label: 'Social', value: 15000 }
+	];
+</script>
+
+<DoughnutChart title="Traffic Sources" {data} size={200} showLegend showTotal />
+```
+
+**Props:**
+
+| Prop         | Type       | Default         | Description               |
+| ------------ | ---------- | --------------- | ------------------------- |
+| `title`      | `string`   | -               | Chart title               |
+| `data`       | `array`    | `[]`            | `[{ label, value }, ...]` |
+| `size`       | `number`   | `200`           | Chart size in pixels      |
+| `thickness`  | `number`   | `0.6`           | Doughnut thickness (0-1)  |
+| `colors`     | `string[]` | Default palette | Custom color array        |
+| `showLegend` | `boolean`  | `true`          | Show legend               |
+| `showTotal`  | `boolean`  | `true`          | Show center total         |
+
+### Mermaid
+
+Render Mermaid diagrams with customizable theming.
+
+**Note:** Requires `mermaid` package: `npm install mermaid`
+
+```svelte
+<script>
+	import { Mermaid } from '@aspect-ops/exon-ui';
+
+	const diagram = `flowchart TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[Action 1]
+    B -->|No| D[Action 2]
+    C --> E[End]
+    D --> E`;
+</script>
+
+<!-- Using code prop -->
+<Mermaid code={diagram} />
+
+<!-- Using slot -->
+<Mermaid>flowchart LR A --> B --> C</Mermaid>
+```
+
+**Props:**
+
+| Prop    | Type     | Default       | Description            |
+| ------- | -------- | ------------- | ---------------------- |
+| `code`  | `string` | -             | Mermaid diagram code   |
+| `theme` | `object` | ExonPro theme | Custom theme variables |
+
+**Theme variables:**
+
+```javascript
+const theme = {
+	primaryColor: '#4654A3',
+	primaryTextColor: '#270949',
+	primaryBorderColor: '#4654A3',
+	lineColor: '#270949',
+	secondaryColor: '#FF3131',
+	tertiaryColor: '#f3f4f6'
+};
+```
+
 ## Theming & Customization
 
 ### Quick Setup

package/dist/components/Accordion/Accordion.svelte

@@ -25,8 +25,8 @@
 		return value ? [value] : [];
 	});
 
-	// Context key
-	const ACCORDION_KEY = Symbol('accordion');
+	// Context key - must match AccordionItem
+	const ACCORDION_KEY = 'exon-accordion-context';
 
 	// Context API
 	const accordionContext = {

package/dist/components/Accordion/AccordionItem.svelte

@@ -11,8 +11,8 @@
 
 	let { value, disabled = false, class: className = '', header, children }: Props = $props();
 
-	// Context key (must match parent)
-	const ACCORDION_KEY = Symbol('accordion');
+	// Context key (must match parent Accordion)
+	const ACCORDION_KEY = 'exon-accordion-context';
 
 	// Get context from parent Accordion
 	const ctx = getContext<{

package/dist/components/Chatbot/ChatMessage.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { ChatMessage } from './types.js';
+
+	interface Props {
+		message: ChatMessage;
+		class?: string;
+	}
+
+	let { message, class: className = '' }: Props = $props();
+
+	// Format message content (bold, links)
+	function formatContent(content: string): string {
+		// Convert **text** to bold
+		let formatted = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+		// Convert [text](url) to links
+		formatted = formatted.replace(
+			/\[([^\]]+)\]\(([^)]+)\)/g,
+			'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+		);
+		return formatted;
+	}
+
+	const formattedContent = $derived(formatContent(message.content));
+	const isUser = $derived(message.role === 'user');
+	const isSystem = $derived(message.role === 'system');
+</script>
+
+<div
+	class="chat-message chat-message--{message.role} {className}"
+	class:chat-message--user={isUser}
+	class:chat-message--assistant={!isUser && !isSystem}
+	class:chat-message--system={isSystem}
+>
+	{#if !isUser && !isSystem}
+		<div class="chat-message__avatar">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="20"
+				height="20"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M12 8V4H8" />
+				<rect width="16" height="12" x="4" y="8" rx="2" />
+				<path d="M2 14h2" />
+				<path d="M20 14h2" />
+				<path d="M15 13v2" />
+				<path d="M9 13v2" />
+			</svg>
+		</div>
+	{/if}
+	<div class="chat-message__bubble">
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html formattedContent}
+	</div>
+	{#if message.timestamp}
+		<div class="chat-message__time">
+			{new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.chat-message {
+		display: flex;
+		gap: var(--space-sm, 0.5rem);
+		max-width: 85%;
+		margin-bottom: var(--space-sm, 0.5rem);
+	}
+
+	.chat-message--user {
+		margin-left: auto;
+		flex-direction: row-reverse;
+	}
+
+	.chat-message--assistant {
+		margin-right: auto;
+	}
+
+	.chat-message--system {
+		margin: var(--space-sm, 0.5rem) auto;
+		max-width: 90%;
+	}
+
+	.chat-message__avatar {
+		flex-shrink: 0;
+		width: 2rem;
+		height: 2rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--radius-full, 9999px);
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.chat-message__bubble {
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		border-radius: var(--radius-lg, 0.75rem);
+		font-size: var(--text-sm, 0.875rem);
+		line-height: var(--leading-relaxed, 1.625);
+		word-wrap: break-word;
+	}
+
+	.chat-message--user .chat-message__bubble {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		border-bottom-right-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.chat-message--assistant .chat-message__bubble {
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text, #1f2937);
+		border-bottom-left-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.chat-message--system .chat-message__bubble {
+		background: var(--color-bg-elevated, #ffffff);
+		border: 1px solid var(--color-border, #e5e7eb);
+		color: var(--color-text-muted, #6b7280);
+		font-style: italic;
+		text-align: center;
+	}
+
+	.chat-message__bubble :global(a) {
+		color: inherit;
+		text-decoration: underline;
+	}
+
+	.chat-message__bubble :global(strong) {
+		font-weight: var(--font-semibold, 600);
+	}
+
+	.chat-message__time {
+		align-self: flex-end;
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-text-subtle, #9ca3af);
+	}
+</style>

package/dist/components/Chatbot/ChatMessage.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ChatMessage } from './types.js';
+interface Props {
+    message: ChatMessage;
+    class?: string;
+}
+declare const ChatMessage: import("svelte").Component<Props, {}, "">;
+type ChatMessage = ReturnType<typeof ChatMessage>;
+export default ChatMessage;