@aspect-ops/exon-ui 0.1.0 → 0.2.0

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

package/dist/components/NumberInput/NumberInput.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+	interface Props {
+		value?: number | null;
+		min?: number;
+		max?: number;
+		step?: number;
+		disabled?: boolean;
+		placeholder?: string;
+		name?: string;
+		id?: string;
+		error?: boolean;
+		class?: string;
+		onValueChange?: (value: number | null) => void;
+	}
+
+	let {
+		value = $bindable(null),
+		min,
+		max,
+		step = 1,
+		disabled = false,
+		placeholder,
+		name,
+		id,
+		error = false,
+		class: className = '',
+		onValueChange
+	}: Props = $props();
+
+	let inputValue = $state(value?.toString() ?? '');
+
+	// Sync internal state with external value prop
+	$effect(() => {
+		inputValue = value?.toString() ?? '';
+	});
+
+	const isDecrementDisabled = $derived(
+		disabled || (min !== undefined && value !== null && value <= min)
+	);
+	const isIncrementDisabled = $derived(
+		disabled || (max !== undefined && value !== null && value >= max)
+	);
+
+	function handleIncrement() {
+		if (isIncrementDisabled) return;
+
+		const currentVal = value ?? 0;
+		const newValue = currentVal + step;
+		const clampedValue = max !== undefined ? Math.min(newValue, max) : newValue;
+
+		value = clampedValue;
+		onValueChange?.(clampedValue);
+	}
+
+	function handleDecrement() {
+		if (isDecrementDisabled) return;
+
+		const currentVal = value ?? 0;
+		const newValue = currentVal - step;
+		const clampedValue = min !== undefined ? Math.max(newValue, min) : newValue;
+
+		value = clampedValue;
+		onValueChange?.(clampedValue);
+	}
+
+	function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
+		inputValue = e.currentTarget.value;
+
+		if (inputValue === '') {
+			value = null;
+			onValueChange?.(null);
+			return;
+		}
+
+		const parsed = parseFloat(inputValue);
+		if (!isNaN(parsed)) {
+			value = parsed;
+			onValueChange?.(parsed);
+		}
+	}
+
+	function handleBlur() {
+		if (value === null) {
+			inputValue = '';
+			return;
+		}
+
+		// Clamp value to min/max on blur
+		let clampedValue = value;
+		if (min !== undefined && clampedValue < min) {
+			clampedValue = min;
+		}
+		if (max !== undefined && clampedValue > max) {
+			clampedValue = max;
+		}
+
+		if (clampedValue !== value) {
+			value = clampedValue;
+			onValueChange?.(clampedValue);
+		}
+
+		inputValue = clampedValue.toString();
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			handleIncrement();
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			handleDecrement();
+		}
+	}
+</script>
+
+<div
+	class="number-input {error ? 'number-input--error' : ''} {disabled
+		? 'number-input--disabled'
+		: ''} {className}"
+>
+	<button
+		type="button"
+		class="number-input__button number-input__button--decrement"
+		disabled={isDecrementDisabled}
+		onclick={handleDecrement}
+		aria-label="Decrement value"
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<line x1="5" y1="12" x2="19" y2="12"></line>
+		</svg>
+	</button>
+
+	<input
+		type="text"
+		inputmode="decimal"
+		class="number-input__field"
+		role="spinbutton"
+		aria-valuemin={min}
+		aria-valuemax={max}
+		aria-valuenow={value ?? undefined}
+		{name}
+		{id}
+		{placeholder}
+		{disabled}
+		aria-invalid={error}
+		value={inputValue}
+		oninput={handleInput}
+		onblur={handleBlur}
+		onkeydown={handleKeyDown}
+	/>
+
+	<button
+		type="button"
+		class="number-input__button number-input__button--increment"
+		disabled={isIncrementDisabled}
+		onclick={handleIncrement}
+		aria-label="Increment value"
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="16"
+			height="16"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<line x1="12" y1="5" x2="12" y2="19"></line>
+			<line x1="5" y1="12" x2="19" y2="12"></line>
+		</svg>
+	</button>
+</div>
+
+<style>
+	.number-input {
+		display: flex;
+		align-items: stretch;
+		width: 100%;
+		gap: 0;
+	}
+
+	.number-input--disabled {
+		opacity: 0.5;
+	}
+
+	.number-input__button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+		padding: 0;
+		border: 1px solid var(--color-border, #e5e7eb);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.number-input__button:hover:not(:disabled) {
+		background: var(--color-bg-muted, #f3f4f6);
+		border-color: var(--color-border-hover, #d1d5db);
+	}
+
+	.number-input__button:active:not(:disabled) {
+		background: var(--color-border, #e5e7eb);
+	}
+
+	.number-input__button:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+		z-index: 1;
+	}
+
+	.number-input__button:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	.number-input__button--decrement {
+		border-top-left-radius: var(--radius-md, 0.375rem);
+		border-bottom-left-radius: var(--radius-md, 0.375rem);
+		border-right: none;
+	}
+
+	.number-input__button--increment {
+		border-top-right-radius: var(--radius-md, 0.375rem);
+		border-bottom-right-radius: var(--radius-md, 0.375rem);
+		border-left: none;
+	}
+
+	.number-input__field {
+		flex: 1;
+		min-width: 0;
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-left: none;
+		border-right: none;
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		text-align: center;
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.number-input__field::placeholder {
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	.number-input__field:focus {
+		outline: none;
+		border-color: var(--color-primary, #3b82f6);
+		box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+		z-index: 1;
+	}
+
+	.number-input__field:disabled {
+		background: var(--color-bg-muted, #f3f4f6);
+		cursor: not-allowed;
+	}
+
+	/* Error state */
+	.number-input--error .number-input__field,
+	.number-input--error .number-input__button {
+		border-color: var(--color-error, #ef4444);
+	}
+
+	.number-input--error .number-input__field:focus {
+		border-color: var(--color-error, #ef4444);
+		box-shadow: 0 0 0 3px var(--color-error-alpha, rgba(239, 68, 68, 0.1));
+	}
+</style>

package/dist/components/NumberInput/NumberInput.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    value?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    placeholder?: string;
+    name?: string;
+    id?: string;
+    error?: boolean;
+    class?: string;
+    onValueChange?: (value: number | null) => void;
+}
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/components/NumberInput/index.d.ts

@@ -0,0 +1 @@
+export { default as NumberInput } from './NumberInput.svelte';

package/dist/components/NumberInput/index.js

@@ -0,0 +1 @@
+export { default as NumberInput } from './NumberInput.svelte';

package/dist/components/Pagination/Pagination.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+	interface Props {
+		currentPage: number;
+		totalPages: number;
+		siblingCount?: number;
+		onPageChange?: (page: number) => void;
+		class?: string;
+	}
+
+	let {
+		currentPage,
+		totalPages,
+		siblingCount = 1,
+		onPageChange,
+		class: className = ''
+	}: Props = $props();
+
+	const canGoPrevious = $derived(currentPage > 1);
+	const canGoNext = $derived(currentPage < totalPages);
+
+	// Generate page numbers with ellipsis logic
+	const pageNumbers = $derived(() => {
+		const pages: (number | 'ellipsis-start' | 'ellipsis-end')[] = [];
+
+		// Always show first page
+		pages.push(1);
+
+		// Calculate the range around current page
+		const leftSibling = Math.max(currentPage - siblingCount, 2);
+		const rightSibling = Math.min(currentPage + siblingCount, totalPages - 1);
+
+		// Add ellipsis after first page if needed
+		if (leftSibling > 2) {
+			pages.push('ellipsis-start');
+		}
+
+		// Add sibling pages
+		for (let i = leftSibling; i <= rightSibling; i++) {
+			pages.push(i);
+		}
+
+		// Add ellipsis before last page if needed
+		if (rightSibling < totalPages - 1) {
+			pages.push('ellipsis-end');
+		}
+
+		// Always show last page (if more than 1 page)
+		if (totalPages > 1) {
+			pages.push(totalPages);
+		}
+
+		return pages;
+	});
+
+	function handlePageClick(page: number) {
+		if (page !== currentPage && page >= 1 && page <= totalPages) {
+			onPageChange?.(page);
+		}
+	}
+
+	function handlePrevious() {
+		if (canGoPrevious) {
+			onPageChange?.(currentPage - 1);
+		}
+	}
+
+	function handleNext() {
+		if (canGoNext) {
+			onPageChange?.(currentPage + 1);
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		switch (event.key) {
+			case 'ArrowLeft':
+				event.preventDefault();
+				handlePrevious();
+				break;
+			case 'ArrowRight':
+				event.preventDefault();
+				handleNext();
+				break;
+			case 'Home':
+				event.preventDefault();
+				handlePageClick(1);
+				break;
+			case 'End':
+				event.preventDefault();
+				handlePageClick(totalPages);
+				break;
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<nav class="pagination {className}" aria-label="Pagination">
+	<div class="pagination-wrapper" role="group" onkeydown={handleKeyDown}>
+		<button
+			class="pagination-button pagination-button--previous"
+			disabled={!canGoPrevious}
+			onclick={handlePrevious}
+			aria-label="Previous page"
+		>
+			Previous
+		</button>
+
+		<div class="pagination-pages">
+			{#each pageNumbers() as item}
+				{#if typeof item === 'number'}
+					<button
+						class="pagination-button pagination-button--page"
+						class:pagination-button--current={item === currentPage}
+						onclick={() => handlePageClick(item)}
+						aria-label={item === currentPage ? `Current page, page ${item}` : `Go to page ${item}`}
+						aria-current={item === currentPage ? 'page' : undefined}
+					>
+						{item}
+					</button>
+				{:else}
+					<span class="pagination-ellipsis" aria-hidden="true">...</span>
+				{/if}
+			{/each}
+		</div>
+
+		<button
+			class="pagination-button pagination-button--next"
+			disabled={!canGoNext}
+			onclick={handleNext}
+			aria-label="Next page"
+		>
+			Next
+		</button>
+	</div>
+</nav>
+
+<style>
+	.pagination {
+		font-family: inherit;
+	}
+
+	.pagination-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.pagination-pages {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.pagination-button {
+		min-width: 2.75rem;
+		min-height: 2.75rem; /* 44px minimum touch target */
+		padding: 0.5rem 0.75rem;
+		border: 1px solid var(--pagination-border-color, #d1d5db);
+		border-radius: var(--pagination-border-radius, 0.375rem);
+		background-color: var(--pagination-bg-color, #ffffff);
+		color: var(--pagination-text-color, #374151);
+		font-family: inherit;
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.pagination-button:hover:not(:disabled) {
+		background-color: var(--pagination-hover-bg-color, #f3f4f6);
+		border-color: var(--pagination-hover-border-color, #9ca3af);
+	}
+
+	.pagination-button:focus-visible {
+		outline: 2px solid var(--pagination-focus-color, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.pagination-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.pagination-button--page {
+		min-width: 2.75rem;
+	}
+
+	.pagination-button--current {
+		background-color: var(--pagination-current-bg-color, #3b82f6);
+		color: var(--pagination-current-text-color, #ffffff);
+		border-color: var(--pagination-current-border-color, #3b82f6);
+	}
+
+	.pagination-button--current:hover {
+		background-color: var(--pagination-current-hover-bg-color, #2563eb);
+		border-color: var(--pagination-current-hover-border-color, #2563eb);
+	}
+
+	.pagination-button--previous,
+	.pagination-button--next {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
+	.pagination-ellipsis {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 2.75rem;
+		min-height: 2.75rem;
+		padding: 0.5rem;
+		color: var(--pagination-ellipsis-color, #6b7280);
+		font-size: 0.875rem;
+	}
+
+	/* Mobile responsive: hide some siblings on small screens */
+	@media (max-width: 640px) {
+		.pagination-wrapper {
+			gap: 0.25rem;
+		}
+
+		.pagination-pages {
+			gap: 0.125rem;
+		}
+
+		.pagination-button--previous,
+		.pagination-button--next {
+			padding-left: 0.75rem;
+			padding-right: 0.75rem;
+			font-size: 0.75rem;
+		}
+
+		.pagination-button--page {
+			min-width: 2.75rem;
+			padding: 0.5rem;
+			font-size: 0.75rem;
+		}
+
+		.pagination-ellipsis {
+			min-width: 2rem;
+			padding: 0.25rem;
+		}
+	}
+</style>

package/dist/components/Pagination/Pagination.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    currentPage: number;
+    totalPages: number;
+    siblingCount?: number;
+    onPageChange?: (page: number) => void;
+    class?: string;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1 @@
+export { default as Pagination } from './Pagination.svelte';

package/dist/components/Pagination/index.js

@@ -0,0 +1 @@
+export { default as Pagination } from './Pagination.svelte';

package/dist/components/ToggleGroup/ToggleGroup.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { ToggleGroupType, ToggleGroupOrientation } from '../../types/index.js';
+
+	interface Props {
+		type?: ToggleGroupType;
+		value?: string | string[];
+		onValueChange?: (value: string | string[]) => void;
+		disabled?: boolean;
+		orientation?: ToggleGroupOrientation;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		type = 'single',
+		value = $bindable(type === 'single' ? '' : []),
+		onValueChange,
+		disabled = false,
+		orientation = 'horizontal',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	const handleToggle = (itemValue: string) => {
+		if (disabled) return;
+
+		let newValue: string | string[];
+
+		if (type === 'single') {
+			// Single mode: toggle or select new value
+			newValue = (value as string) === itemValue ? '' : itemValue;
+		} else {
+			// Multiple mode: toggle item in array
+			const currentArray = (value as string[]) || [];
+			if (currentArray.includes(itemValue)) {
+				newValue = currentArray.filter((v) => v !== itemValue);
+			} else {
+				newValue = [...currentArray, itemValue];
+			}
+		}
+
+		value = newValue;
+		onValueChange?.(newValue);
+	};
+
+	const isSelected = (itemValue: string): boolean => {
+		if (type === 'single') {
+			return (value as string) === itemValue;
+		} else {
+			return ((value as string[]) || []).includes(itemValue);
+		}
+	};
+
+	// Set context for child items
+	setContext('toggleGroup', {
+		get type() {
+			return type;
+		},
+		get disabled() {
+			return disabled;
+		},
+		onToggle: handleToggle,
+		isSelected
+	});
+</script>
+
+<div
+	class="toggle-group toggle-group--{orientation} {className}"
+	role={type === 'single' ? 'radiogroup' : 'group'}
+	aria-disabled={disabled}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.toggle-group {
+		display: inline-flex;
+		font-family: inherit;
+	}
+
+	.toggle-group--horizontal {
+		flex-direction: row;
+	}
+
+	.toggle-group--vertical {
+		flex-direction: column;
+	}
+</style>

package/dist/components/ToggleGroup/ToggleGroup.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ToggleGroupType, ToggleGroupOrientation } from '../../types/index.js';
+interface Props {
+    type?: ToggleGroupType;
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    disabled?: boolean;
+    orientation?: ToggleGroupOrientation;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const ToggleGroup: import("svelte").Component<Props, {}, "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/components/ToggleGroup/ToggleGroupItem.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+
+	interface Props {
+		value: string;
+		disabled?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { value, disabled = false, class: className = '', children }: Props = $props();
+
+	const context = getContext<{
+		type: 'single' | 'multiple';
+		disabled: boolean;
+		onToggle: (value: string) => void;
+		isSelected: (value: string) => boolean;
+	}>('toggleGroup');
+
+	const isGroupDisabled = context?.disabled ?? false;
+	const isDisabled = $derived(disabled || isGroupDisabled);
+	const isPressed = $derived(context?.isSelected(value) ?? false);
+
+	const handleClick = () => {
+		if (isDisabled) return;
+		context?.onToggle(value);
+	};
+
+	const handleKeydown = (e: KeyboardEvent) => {
+		const target = e.currentTarget as HTMLElement;
+		const group = target.parentElement;
+		if (!group) return;
+
+		const items = Array.from(group.querySelectorAll('[role="radio"], [role="button"]'));
+		const currentIndex = items.indexOf(target);
+
+		let nextIndex = currentIndex;
+
+		switch (e.key) {
+			case 'ArrowRight':
+			case 'ArrowDown':
+				e.preventDefault();
+				nextIndex = (currentIndex + 1) % items.length;
+				break;
+			case 'ArrowLeft':
+			case 'ArrowUp':
+				e.preventDefault();
+				nextIndex = currentIndex - 1;
+				if (nextIndex < 0) nextIndex = items.length - 1;
+				break;
+			case ' ':
+			case 'Enter':
+				e.preventDefault();
+				handleClick();
+				return;
+			default:
+				return;
+		}
+
+		(items[nextIndex] as HTMLElement)?.focus();
+	};
+</script>
+
+<button
+	class="toggle-group-item {isPressed ? 'toggle-group-item--pressed' : ''} {className}"
+	role={context?.type === 'single' ? 'radio' : 'button'}
+	aria-pressed={isPressed}
+	aria-checked={context?.type === 'single' ? isPressed : undefined}
+	aria-disabled={isDisabled}
+	disabled={isDisabled}
+	tabindex={isDisabled ? -1 : 0}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</button>
+
+<style>
+	.toggle-group-item {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-height: var(--touch-target-min, 44px);
+		min-width: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		border: 1px solid var(--color-border, #e5e7eb);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 500;
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+		margin-left: -1px;
+	}
+
+	.toggle-group-item:first-child {
+		margin-left: 0;
+		border-top-left-radius: var(--radius-md, 0.375rem);
+		border-bottom-left-radius: var(--radius-md, 0.375rem);
+	}
+
+	.toggle-group-item:last-child {
+		border-top-right-radius: var(--radius-md, 0.375rem);
+		border-bottom-right-radius: var(--radius-md, 0.375rem);
+	}
+
+	:global(.toggle-group--vertical) .toggle-group-item {
+		margin-left: 0;
+		margin-top: -1px;
+	}
+
+	:global(.toggle-group--vertical) .toggle-group-item:first-child {
+		margin-top: 0;
+		border-top-left-radius: var(--radius-md, 0.375rem);
+		border-top-right-radius: var(--radius-md, 0.375rem);
+		border-bottom-left-radius: 0;
+	}
+
+	:global(.toggle-group--vertical) .toggle-group-item:last-child {
+		border-top-right-radius: 0;
+		border-bottom-left-radius: var(--radius-md, 0.375rem);
+		border-bottom-right-radius: var(--radius-md, 0.375rem);
+	}
+
+	.toggle-group-item:hover:not(:disabled) {
+		background: var(--color-bg-muted, #f3f4f6);
+		z-index: 1;
+	}
+
+	.toggle-group-item:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+		z-index: 2;
+	}
+
+	.toggle-group-item--pressed {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		border-color: var(--color-primary, #3b82f6);
+		z-index: 1;
+	}
+
+	.toggle-group-item--pressed:hover:not(:disabled) {
+		background: var(--color-primary-hover, #2563eb);
+		border-color: var(--color-primary-hover, #2563eb);
+	}
+
+	.toggle-group-item:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+</style>

package/dist/components/ToggleGroup/ToggleGroupItem.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    value: string;
+    disabled?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const ToggleGroupItem: import("svelte").Component<Props, {}, "">;
+type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
+export default ToggleGroupItem;

package/dist/components/ToggleGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ToggleGroup } from './ToggleGroup.svelte';
+export { default as ToggleGroupItem } from './ToggleGroupItem.svelte';
+export type { ToggleGroupType, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupItemProps } from '../../types/index.js';

package/dist/components/ToggleGroup/index.js

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.svelte';
+export { default as ToggleGroupItem } from './ToggleGroupItem.svelte';

package/dist/index.d.ts

@@ -16,6 +16,9 @@ export { SearchInput } from './components/SearchInput/index.js';
 export { DatePicker } from './components/DatePicker/index.js';
 export { FileUpload } from './components/FileUpload/index.js';
 export { OTPInput } from './components/OTPInput/index.js';
+export { TimePicker } from './components/TimePicker/index.js';
+export { Rating } from './components/Rating/index.js';
+export { ToggleGroup, ToggleGroupItem } from './components/ToggleGroup/index.js';
 export { default as Tabs } from './components/Tabs/Tabs.svelte';
 export { default as TabList } from './components/Tabs/TabList.svelte';
 export { default as TabTrigger } from './components/Tabs/TabTrigger.svelte';
@@ -71,4 +74,4 @@ export { ActionSheet, ActionSheetItem } from './components/ActionSheet/index.js'
 export { PullToRefresh } from './components/PullToRefresh/index.js';
 export { SwipeActions, SwipeAction } from './components/SwipeActions/index.js';
 export { FAB, FABGroup } from './components/FAB/index.js';
-export type { ButtonProps, ButtonVariant, ButtonSize, TypographyProps, TypographyVariant, IconProps, IconSize, BadgeProps, BadgeVariant, LinkProps, InputSize, TextInputType, FormFieldProps, TextInputProps, TextareaProps, SelectOption, SelectProps, CheckboxProps, RadioProps, RadioGroupProps, SwitchProps, SearchInputProps, DatePickerProps, FileUploadProps, OTPInputProps, TimeFormat, TimePickerProps, RatingProps, TabsOrientation, TabsProps, TabListProps, TabTriggerProps, TabContentProps, MenuProps, MenuTriggerProps, MenuContentProps, MenuItemProps, MenuSeparatorProps, MenuSubProps, MenuSubTriggerProps, MenuSubContentProps, BreadcrumbItemData, BreadcrumbsProps, BreadcrumbItemProps, BottomNavItemData, BottomNavProps, BottomNavItemProps, NavItemProps, NavbarProps, SidebarItemData, SidebarProps, SidebarItemProps, SidebarGroupProps, StepperOrientation, StepperProps, StepperStepProps, AlertVariant, AlertProps, ToastVariant, ToastPosition, ToastData, ToastProps, ToastContainerProps, ModalSize, ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps, ProgressSize, ProgressBarProps, ProgressCircleProps, SpinnerProps, TooltipSide, TooltipProps, PopoverSide, PopoverProps, PopoverTriggerProps, PopoverContentProps, SkeletonVariant, SkeletonProps, CardVariant, CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, AvatarSize, AvatarShape, AvatarProps, AvatarGroupProps, TagVariant, TagSize, TagProps, ChipVariant, ChipColor, ChipSize, ChipProps, ChipGroupProps, EmptyStateSize, EmptyStateProps, ListProps, ListItemProps, TableProps, TableHeadProps, TableHeaderAlign, TableHeaderSortDirection, TableHeaderProps, TableBodyProps, TableRowProps, TableCellAlign, TableCellProps, AccordionProps, AccordionItemProps, SliderProps, CarouselProps, CarouselSlideProps, ImageObjectFit, ImageRounded, ImageProps, ContainerSize, ContainerProps, GridAlign, GridJustify, SpacingToken, GridProps, GridItemProps, StackDirection, StackProps, DividerOrientation, DividerProps, SpacerSize, SpacerProps, AspectRatioPreset, AspectRatioProps, CenterProps, BoxProps, SafeAreaEdge, SafeAreaProps, BottomSheetSnapPoint, BottomSheetProps, BottomSheetHeaderProps, BottomSheetBodyProps, ActionSheetAction, ActionSheetProps, ActionSheetItemProps, PullToRefreshProps, SwipeActionSide, SwipeActionData, SwipeActionsProps, SwipeActionProps, FABSize, FABPosition, FABProps, FABAction, FABGroupProps } from './types/index.js';
+export type { ButtonProps, ButtonVariant, ButtonSize, TypographyProps, TypographyVariant, IconProps, IconSize, BadgeProps, BadgeVariant, LinkProps, InputSize, TextInputType, FormFieldProps, TextInputProps, TextareaProps, SelectOption, SelectProps, CheckboxProps, RadioProps, RadioGroupProps, SwitchProps, SearchInputProps, DatePickerProps, FileUploadProps, OTPInputProps, TimeFormat, TimePickerProps, RatingProps, ToggleGroupType, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupItemProps, TabsOrientation, TabsProps, TabListProps, TabTriggerProps, TabContentProps, MenuProps, MenuTriggerProps, MenuContentProps, MenuItemProps, MenuSeparatorProps, MenuSubProps, MenuSubTriggerProps, MenuSubContentProps, BreadcrumbItemData, BreadcrumbsProps, BreadcrumbItemProps, BottomNavItemData, BottomNavProps, BottomNavItemProps, NavItemProps, NavbarProps, SidebarItemData, SidebarProps, SidebarItemProps, SidebarGroupProps, StepperOrientation, StepperProps, StepperStepProps, AlertVariant, AlertProps, ToastVariant, ToastPosition, ToastData, ToastProps, ToastContainerProps, ModalSize, ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps, ProgressSize, ProgressBarProps, ProgressCircleProps, SpinnerProps, TooltipSide, TooltipProps, PopoverSide, PopoverProps, PopoverTriggerProps, PopoverContentProps, SkeletonVariant, SkeletonProps, CardVariant, CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, AvatarSize, AvatarShape, AvatarProps, AvatarGroupProps, TagVariant, TagSize, TagProps, ChipVariant, ChipColor, ChipSize, ChipProps, ChipGroupProps, EmptyStateSize, EmptyStateProps, ListProps, ListItemProps, TableProps, TableHeadProps, TableHeaderAlign, TableHeaderSortDirection, TableHeaderProps, TableBodyProps, TableRowProps, TableCellAlign, TableCellProps, AccordionProps, AccordionItemProps, SliderProps, CarouselProps, CarouselSlideProps, ImageObjectFit, ImageRounded, ImageProps, ContainerSize, ContainerProps, GridAlign, GridJustify, SpacingToken, GridProps, GridItemProps, StackDirection, StackProps, DividerOrientation, DividerProps, SpacerSize, SpacerProps, AspectRatioPreset, AspectRatioProps, CenterProps, BoxProps, SafeAreaEdge, SafeAreaProps, BottomSheetSnapPoint, BottomSheetProps, BottomSheetHeaderProps, BottomSheetBodyProps, ActionSheetAction, ActionSheetProps, ActionSheetItemProps, PullToRefreshProps, SwipeActionSide, SwipeActionData, SwipeActionsProps, SwipeActionProps, FABSize, FABPosition, FABProps, FABAction, FABGroupProps } from './types/index.js';

package/dist/index.js

@@ -20,6 +20,9 @@ export { SearchInput } from './components/SearchInput/index.js';
 export { DatePicker } from './components/DatePicker/index.js';
 export { FileUpload } from './components/FileUpload/index.js';
 export { OTPInput } from './components/OTPInput/index.js';
+export { TimePicker } from './components/TimePicker/index.js';
+export { Rating } from './components/Rating/index.js';
+export { ToggleGroup, ToggleGroupItem } from './components/ToggleGroup/index.js';
 // Navigation Components
 export { default as Tabs } from './components/Tabs/Tabs.svelte';
 export { default as TabList } from './components/Tabs/TabList.svelte';

package/dist/types/index.d.ts

@@ -131,4 +131,4 @@ export type { AlertVariant, AlertProps, ToastVariant, ToastPosition, ToastData,
 export type { CardVariant, CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, AvatarSize, AvatarShape, AvatarProps, AvatarGroupProps, TagVariant, TagSize, TagProps, ChipVariant, ChipColor, ChipSize, ChipProps, ChipGroupProps, EmptyStateSize, EmptyStateProps, ListProps, ListItemProps, TableProps, TableHeadProps, TableHeaderAlign, TableHeaderSortDirection, TableHeaderProps, TableBodyProps, TableRowProps, TableCellAlign, TableCellProps, AccordionProps, AccordionItemProps, SliderProps, CarouselProps, CarouselSlideProps, ImageObjectFit, ImageRounded, ImageProps } from './data-display.js';
 export type { ContainerSize, ContainerProps, GridAlign, GridJustify, SpacingToken, GridProps, GridItemProps, StackDirection, StackProps, DividerOrientation, DividerProps, SpacerSize, SpacerProps, AspectRatioPreset, AspectRatioProps, CenterProps, BoxProps } from './layout.js';
 export type { SafeAreaEdge, SafeAreaProps, BottomSheetSnapPoint, BottomSheetProps, BottomSheetHeaderProps, BottomSheetBodyProps, ActionSheetAction, ActionSheetProps, ActionSheetItemProps, PullToRefreshProps, SwipeActionSide, SwipeActionData, SwipeActionsProps, SwipeActionProps, FABSize, FABPosition, FABProps, FABAction, FABGroupProps } from './mobile.js';
-export type { SearchInputProps, DatePickerProps, FileUploadProps, OTPInputProps, TimeFormat, TimePickerProps, RatingProps } from './input.js';
+export type { SearchInputProps, DatePickerProps, FileUploadProps, OTPInputProps, TimeFormat, TimePickerProps, RatingProps, ToggleGroupType, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupItemProps } from './input.js';

package/dist/types/input.d.ts

@@ -65,3 +65,18 @@ export interface RatingProps {
     showValue?: boolean;
     class?: string;
 }
+export type ToggleGroupType = 'single' | 'multiple';
+export type ToggleGroupOrientation = 'horizontal' | 'vertical';
+export interface ToggleGroupProps {
+    type?: ToggleGroupType;
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    disabled?: boolean;
+    orientation?: ToggleGroupOrientation;
+    class?: string;
+}
+export interface ToggleGroupItemProps {
+    value: string;
+    disabled?: boolean;
+    class?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@aspect-ops/exon-ui",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "Reusable Svelte UI components for web and Capacitor mobile apps",
 	"author": "Exon Team",
 	"license": "MIT",