@aspect-ops/exon-ui 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,438 @@
+# @aspect-ops/exon-ui
+
+A modern, accessible UI component library for **Svelte 5** with first-class support for **Capacitor** mobile apps.
+
+[![npm version](https://img.shields.io/npm/v/@aspect-ops/exon-ui.svg)](https://www.npmjs.com/package/@aspect-ops/exon-ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- **Svelte 5** - Built with runes and modern Svelte patterns
+- **Mobile-first** - Designed for Capacitor native app conversion
+- **Accessible** - WCAG 2.1 compliant with proper ARIA attributes
+- **Themeable** - CSS custom properties for light/dark themes
+- **Tree-shakeable** - Import only what you need
+- **TypeScript** - Full type definitions included
+
+## Installation
+
+```bash
+npm install @aspect-ops/exon-ui
+```
+
+## Quick Start
+
+```svelte
+<script>
+	import { Button, Typography } from '@aspect-ops/exon-ui';
+	import '@aspect-ops/exon-ui/styles';
+</script>
+
+<Typography variant="h1">Hello World</Typography>
+<Button variant="primary">Click Me</Button>
+```
+
+## Components
+
+### Core Components
+
+| Component    | Description                                   |
+| ------------ | --------------------------------------------- |
+| `Button`     | Buttons with variants, sizes, loading states  |
+| `Typography` | Semantic text with heading and body variants  |
+| `Icon`       | SVG icon component with size options          |
+| `Badge`      | Status badges with color variants             |
+| `Link`       | Accessible links with external link detection |
+
+### 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     |
+
+### Navigation Components
+
+| Component                                        | Description                        |
+| ------------------------------------------------ | ---------------------------------- |
+| `Tabs`, `TabList`, `TabTrigger`, `TabContent`    | Accessible tabs with Bits UI       |
+| `Menu`, `MenuTrigger`, `MenuContent`, `MenuItem` | Dropdown menus with submenus       |
+| `Breadcrumbs`, `BreadcrumbItem`                  | Navigation breadcrumbs             |
+| `BottomNav`, `BottomNavItem`                     | Mobile bottom navigation           |
+| `Navbar`, `NavItem`                              | Responsive header with mobile menu |
+| `Sidebar`, `SidebarItem`, `SidebarGroup`         | Collapsible sidebar navigation     |
+
+## Usage Examples
+
+### Button
+
+```svelte
+<script>
+	import { Button } from '@aspect-ops/exon-ui';
+</script>
+
+<!-- Variants -->
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="destructive">Delete</Button>
+
+<!-- Sizes -->
+<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>
+
+<!-- States -->
+<Button loading>Loading...</Button>
+<Button disabled>Disabled</Button>
+<Button fullWidth>Full Width</Button>
+```
+
+### Typography
+
+```svelte
+<script>
+	import { Typography } from '@aspect-ops/exon-ui';
+</script>
+
+<Typography variant="h1">Heading 1</Typography>
+<Typography variant="h2">Heading 2</Typography>
+<Typography variant="body">Body text</Typography>
+<Typography variant="body-sm">Small text</Typography>
+<Typography variant="caption">Caption text</Typography>
+```
+
+### Form Components
+
+```svelte
+<script>
+	import { FormField, TextInput, Select, Checkbox, Switch } from '@aspect-ops/exon-ui';
+
+	let email = $state('');
+	let country = $state('');
+	let newsletter = $state(false);
+	let darkMode = $state(false);
+</script>
+
+<FormField label="Email" required helperText="We'll never share your email">
+	<TextInput type="email" bind:value={email} placeholder="you@example.com" />
+</FormField>
+
+<FormField label="Country">
+	<Select
+		bind:value={country}
+		options={[
+			{ value: 'us', label: 'United States' },
+			{ value: 'uk', label: 'United Kingdom' },
+			{ value: 'in', label: 'India' }
+		]}
+	/>
+</FormField>
+
+<Checkbox bind:checked={newsletter}>
+	{#snippet children()}
+		Subscribe to newsletter
+	{/snippet}
+</Checkbox>
+
+<Switch bind:checked={darkMode}>
+	{#snippet children()}
+		Dark Mode
+	{/snippet}
+</Switch>
+```
+
+### Tabs
+
+```svelte
+<script>
+	import { Tabs, TabList, TabTrigger, TabContent } from '@aspect-ops/exon-ui';
+
+	let activeTab = $state('tab1');
+</script>
+
+<Tabs bind:value={activeTab}>
+	<TabList>
+		<TabTrigger value="tab1">Account</TabTrigger>
+		<TabTrigger value="tab2">Security</TabTrigger>
+		<TabTrigger value="tab3">Notifications</TabTrigger>
+	</TabList>
+
+	<TabContent value="tab1">
+		<p>Account settings content</p>
+	</TabContent>
+	<TabContent value="tab2">
+		<p>Security settings content</p>
+	</TabContent>
+	<TabContent value="tab3">
+		<p>Notification preferences</p>
+	</TabContent>
+</Tabs>
+
+<!-- Scrollable tabs -->
+<Tabs>
+	<TabList scrollable>
+		{#each Array(10) as _, i}
+			<TabTrigger value="tab-{i}">Tab {i + 1}</TabTrigger>
+		{/each}
+	</TabList>
+</Tabs>
+
+<!-- Vertical tabs -->
+<Tabs orientation="vertical">
+	<TabList>
+		<TabTrigger value="v1">Item 1</TabTrigger>
+		<TabTrigger value="v2">Item 2</TabTrigger>
+	</TabList>
+</Tabs>
+```
+
+### Menu / Dropdown
+
+```svelte
+<script>
+	import {
+		Menu,
+		MenuTrigger,
+		MenuContent,
+		MenuItem,
+		MenuSeparator,
+		MenuSub,
+		MenuSubTrigger,
+		MenuSubContent
+	} from '@aspect-ops/exon-ui';
+</script>
+
+<Menu>
+	<MenuTrigger>
+		<button>Open Menu</button>
+	</MenuTrigger>
+	<MenuContent>
+		<MenuItem icon="📝">Edit</MenuItem>
+		<MenuItem icon="📋">Copy</MenuItem>
+		<MenuSeparator />
+		<MenuSub>
+			<MenuSubTrigger>More Options</MenuSubTrigger>
+			<MenuSubContent>
+				<MenuItem>Option 1</MenuItem>
+				<MenuItem>Option 2</MenuItem>
+			</MenuSubContent>
+		</MenuSub>
+		<MenuSeparator />
+		<MenuItem icon="🗑️">Delete</MenuItem>
+	</MenuContent>
+</Menu>
+```
+
+### Breadcrumbs
+
+```svelte
+<script>
+	import { Breadcrumbs } from '@aspect-ops/exon-ui';
+
+	const items = [
+		{ label: 'Home', href: '/' },
+		{ label: 'Products', href: '/products' },
+		{ label: 'Category', href: '/products/category' },
+		{ label: 'Current Page' }
+	];
+</script>
+
+<Breadcrumbs {items} />
+
+<!-- Custom separator -->
+<Breadcrumbs {items}>
+	{#snippet separator()}
+		→
+	{/snippet}
+</Breadcrumbs>
+```
+
+### Bottom Navigation (Mobile)
+
+```svelte
+<script>
+	import { BottomNav } from '@aspect-ops/exon-ui';
+
+	let activeIndex = $state(0);
+
+	const items = [
+		{ label: 'Home', icon: '🏠' },
+		{ label: 'Search', icon: '🔍' },
+		{ label: 'Inbox', icon: '📬', badge: 5 },
+		{ label: 'Profile', icon: '👤' }
+	];
+</script>
+
+<BottomNav {items} {activeIndex} onchange={(index) => (activeIndex = index)} />
+```
+
+### Navbar
+
+```svelte
+<script>
+	import { Navbar, NavItem, Button } from '@aspect-ops/exon-ui';
+</script>
+
+<Navbar>
+	{#snippet logo()}
+		<span>MyApp</span>
+	{/snippet}
+
+	<NavItem label="Home" href="/" active />
+	<NavItem label="Products" href="/products" />
+	<NavItem label="About" href="/about" />
+
+	{#snippet actions()}
+		<Button size="sm">Sign In</Button>
+	{/snippet}
+</Navbar>
+```
+
+### Sidebar
+
+```svelte
+<script>
+	import { Sidebar, SidebarItem, SidebarGroup } from '@aspect-ops/exon-ui';
+
+	let collapsed = $state(false);
+</script>
+
+<Sidebar bind:collapsed>
+	<SidebarGroup label="Main">
+		<SidebarItem icon="🏠" label="Dashboard" active />
+		<SidebarItem icon="📊" label="Analytics" badge={3} />
+		<SidebarItem icon="📁" label="Projects" />
+	</SidebarGroup>
+
+	<SidebarGroup label="Settings" collapsible>
+		<SidebarItem icon="👤" label="Profile" />
+		<SidebarItem icon="🔒" label="Security" />
+	</SidebarGroup>
+</Sidebar>
+```
+
+## Theming
+
+### CSS Custom Properties
+
+Import the default styles and customize with CSS variables:
+
+```svelte
+<script>
+	import '@aspect-ops/exon-ui/styles';
+</script>
+
+<style>
+	:root {
+		/* Colors */
+		--color-primary: #3b82f6;
+		--color-primary-hover: #2563eb;
+		--color-bg: #ffffff;
+		--color-bg-muted: #f9fafb;
+		--color-text: #1f2937;
+		--color-border: #e5e7eb;
+
+		/* Spacing */
+		--space-xs: 0.25rem;
+		--space-sm: 0.5rem;
+		--space-md: 1rem;
+		--space-lg: 1.5rem;
+		--space-xl: 2rem;
+
+		/* Border Radius */
+		--radius-sm: 0.25rem;
+		--radius-md: 0.5rem;
+		--radius-lg: 0.75rem;
+
+		/* Transitions */
+		--transition-fast: 150ms ease;
+		--transition-base: 200ms ease;
+	}
+</style>
+```
+
+### Dark Mode
+
+Toggle dark mode by setting `data-theme="dark"` on the html element:
+
+```svelte
+<script>
+	function toggleTheme() {
+		const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+		document.documentElement.setAttribute('data-theme', isDark ? 'light' : 'dark');
+	}
+</script>
+
+<button onclick={toggleTheme}>Toggle Theme</button>
+```
+
+Dark theme variables are automatically applied:
+
+```css
+[data-theme='dark'] {
+	--color-bg: #111827;
+	--color-bg-muted: #1f2937;
+	--color-bg-elevated: #1f2937;
+	--color-text: #f9fafb;
+	--color-border: #374151;
+}
+```
+
+## Mobile / Capacitor Support
+
+Components are designed with mobile-first principles:
+
+- **44px minimum touch targets** for buttons and interactive elements
+- **Safe area inset handling** for notched devices (iPhone, Android gesture bar)
+- **Responsive breakpoints** for adaptive layouts
+- **Hardware-accelerated animations** for smooth 60fps performance
+
+### Safe Area Example
+
+```svelte
+<BottomNav {items} />
+<!-- Automatically includes padding-bottom: env(safe-area-inset-bottom) -->
+```
+
+## TypeScript
+
+All components include TypeScript definitions:
+
+```typescript
+import type {
+	ButtonProps,
+	ButtonVariant,
+	TypographyProps,
+	TabsProps,
+	MenuItemProps
+} from '@aspect-ops/exon-ui';
+```
+
+## Browser Support
+
+- Chrome/Edge 88+
+- Firefox 78+
+- Safari 14+
+- iOS Safari 14+
+- Chrome for Android 88+
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting a PR.
+
+## License
+
+MIT License - see [LICENSE](LICENSE) for details.
+
+---
+
+Built with Svelte 5 and Bits UI

package/dist/components/ActionSheet/ActionSheet.svelte

@@ -0,0 +1,270 @@
+<script lang="ts">
+	import type { ActionSheetProps } from '../../types/index.js';
+	import { Dialog } from 'bits-ui';
+
+	interface Props extends ActionSheetProps {
+		/** Bindable open state */
+		open?: boolean;
+		/** Slot for ActionSheetItem children */
+		actions?: import('svelte').Snippet;
+		/** Default slot for custom content */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		cancelLabel = 'Cancel',
+		showCancel = true,
+		closeOnSelect = true,
+		class: className = '',
+		actions,
+		children
+	}: Props = $props();
+
+	function handleOpenChange(value: boolean) {
+		open = value;
+	}
+
+	function handleBackdropClick() {
+		open = false;
+	}
+
+	function handleCancel() {
+		open = false;
+	}
+
+	// Provide context for ActionSheetItem to access closeOnSelect
+	import { setContext } from 'svelte';
+
+	setContext('actionsheet', {
+		get closeOnSelect() {
+			return closeOnSelect;
+		},
+		close: () => {
+			open = false;
+		}
+	});
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Portal>
+		<Dialog.Overlay class="actionsheet-overlay" onclick={handleBackdropClick} />
+		<Dialog.Content
+			class="actionsheet-content {className}"
+			aria-labelledby={title ? 'actionsheet-title' : undefined}
+		>
+			<!-- Header section (optional) -->
+			{#if title || description}
+				<div class="actionsheet-header">
+					{#if title}
+						<Dialog.Title id="actionsheet-title" class="actionsheet-title">{title}</Dialog.Title>
+					{/if}
+					{#if description}
+						<Dialog.Description class="actionsheet-description">{description}</Dialog.Description>
+					{/if}
+				</div>
+			{/if}
+
+			<!-- Actions section -->
+			<div class="actionsheet-actions" role="group">
+				{#if actions}
+					{@render actions()}
+				{/if}
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+
+			<!-- Cancel button (separated) -->
+			{#if showCancel}
+				<div class="actionsheet-cancel-container">
+					<button
+						type="button"
+						class="actionsheet-cancel"
+						onclick={handleCancel}
+						aria-label="Cancel"
+					>
+						{cancelLabel}
+					</button>
+				</div>
+			{/if}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+
+<style>
+	/* Overlay */
+	:global(.actionsheet-overlay) {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.4);
+		z-index: 100;
+	}
+
+	:global(.actionsheet-overlay[data-state='open']) {
+		animation: actionsheet-fade-in 200ms ease-out;
+	}
+
+	:global(.actionsheet-overlay[data-state='closed']) {
+		animation: actionsheet-fade-out 150ms ease-in;
+	}
+
+	@keyframes -global-actionsheet-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes -global-actionsheet-fade-out {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+	/* Content */
+	:global(.actionsheet-content) {
+		/* F33: Must set font-family explicitly - portal doesn't inherit */
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 101;
+		display: flex;
+		flex-direction: column;
+		max-height: 90vh;
+		padding: var(--space-sm, 0.5rem);
+		padding-bottom: calc(var(--space-sm, 0.5rem) + env(safe-area-inset-bottom, 0px));
+	}
+
+	:global(.actionsheet-content[data-state='open']) {
+		animation: actionsheet-slide-up 250ms cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	:global(.actionsheet-content[data-state='closed']) {
+		animation: actionsheet-slide-down 200ms cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	@keyframes -global-actionsheet-slide-up {
+		from {
+			opacity: 0;
+			transform: translateY(100%);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes -global-actionsheet-slide-down {
+		from {
+			opacity: 1;
+			transform: translateY(0);
+		}
+		to {
+			opacity: 0;
+			transform: translateY(100%);
+		}
+	}
+
+	/* Header */
+	:global(.actionsheet-header) {
+		text-align: center;
+		padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
+		background: var(--color-bg, #ffffff);
+		border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0;
+		border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
+	}
+
+	:global(.actionsheet-title) {
+		margin: 0;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 600;
+		color: var(--color-text-secondary, #6b7280);
+	}
+
+	:global(.actionsheet-description) {
+		margin: var(--space-xs, 0.25rem) 0 0;
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	/* Actions container */
+	:global(.actionsheet-actions) {
+		display: flex;
+		flex-direction: column;
+		background: var(--color-bg, #ffffff);
+		border-radius: var(--radius-lg, 0.75rem);
+		overflow: hidden;
+	}
+
+	/* When there's a header, remove top border radius from actions */
+	:global(.actionsheet-header + .actionsheet-actions) {
+		border-radius: 0 0 var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem);
+	}
+
+	/* Cancel button container */
+	:global(.actionsheet-cancel-container) {
+		margin-top: var(--space-sm, 0.5rem);
+	}
+
+	/* Cancel button - iOS style */
+	:global(.actionsheet-cancel) {
+		/* F33: Font inheritance for portal */
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		width: 100%;
+		/* F20: Minimum touch target */
+		min-height: 56px;
+		padding: var(--space-md, 1rem);
+		border: none;
+		border-radius: var(--radius-lg, 0.75rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-primary, #3b82f6);
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: 600;
+		cursor: pointer;
+		transition: background-color var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:global(.actionsheet-cancel:hover) {
+		background: var(--color-bg-hover, #f9fafb);
+	}
+
+	:global(.actionsheet-cancel:active) {
+		background: var(--color-bg-active, #f3f4f6);
+	}
+
+	:global(.actionsheet-cancel:focus-visible) {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	/* Platform-specific styling */
+	:global([data-platform='ios']) :global(.actionsheet-content) {
+		padding: var(--space-sm, 0.5rem);
+	}
+
+	:global([data-platform='android']) :global(.actionsheet-content) {
+		padding: 0;
+		padding-bottom: env(safe-area-inset-bottom, 0px);
+	}
+
+	:global([data-platform='android']) :global(.actionsheet-actions),
+	:global([data-platform='android']) :global(.actionsheet-cancel) {
+		border-radius: 0;
+	}
+
+	:global([data-platform='android']) :global(.actionsheet-cancel-container) {
+		margin-top: 0;
+		border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { ActionSheetProps } from '../../types/index.js';
+interface Props extends ActionSheetProps {
+    /** Bindable open state */
+    open?: boolean;
+    /** Slot for ActionSheetItem children */
+    actions?: import('svelte').Snippet;
+    /** Default slot for custom content */
+    children?: import('svelte').Snippet;
+}
+declare const ActionSheet: import("svelte").Component<Props, {}, "open">;
+type ActionSheet = ReturnType<typeof ActionSheet>;
+export default ActionSheet;