@aspect-ops/exon-ui 0.0.1

package/dist/components/Tabs/TabTrigger.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import type { TabTriggerProps } from '../../types/index.js';
+
+	interface Props extends TabTriggerProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { value, disabled = false, class: className = '', children }: Props = $props();
+</script>
+
+<TabsPrimitive.Trigger {value} {disabled} class="tab-trigger {className}">
+	{#if children}
+		{@render children()}
+	{/if}
+</TabsPrimitive.Trigger>
+
+<style>
+	:global(.tab-trigger) {
+		position: relative;
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 500;
+		color: var(--color-text-muted, #6b7280);
+		background: transparent;
+		border: none;
+		border-bottom: 2px solid transparent;
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:global(.tab-trigger:hover:not(:disabled)) {
+		color: var(--color-text, #1f2937);
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	:global(.tab-trigger:focus-visible) {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+		z-index: 1;
+	}
+
+	:global(.tab-trigger:disabled) {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	/* Active state - horizontal */
+	:global(.tab-trigger[data-state='active']) {
+		color: var(--color-primary, #3b82f6);
+		border-bottom-color: var(--color-primary, #3b82f6);
+	}
+
+	/* Vertical orientation */
+	:global(.tab-trigger[data-orientation='vertical']) {
+		border-bottom: none;
+		border-left: 2px solid transparent;
+	}
+
+	:global(.tab-trigger[data-orientation='vertical'][data-state='active']) {
+		border-left-color: var(--color-primary, #3b82f6);
+		border-bottom-color: transparent;
+	}
+</style>

package/dist/components/Tabs/TabTrigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TabTriggerProps } from '../../types/index.js';
+interface Props extends TabTriggerProps {
+    children?: import('svelte').Snippet;
+}
+declare const TabTrigger: import("svelte").Component<Props, {}, "">;
+type TabTrigger = ReturnType<typeof TabTrigger>;
+export default TabTrigger;

package/dist/components/Tabs/Tabs.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import type { TabsProps } from '../../types/index.js';
+
+	interface Props extends TabsProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		value = $bindable(undefined),
+		orientation = 'horizontal',
+		class: className = '',
+		children
+	}: Props = $props();
+
+	// Track internal value for uncontrolled mode
+	let internalValue = $state(value);
+
+	// Sync internal value when external value changes
+	$effect(() => {
+		if (value !== undefined) {
+			internalValue = value;
+		}
+	});
+
+	// Update external value when internal changes
+	function handleValueChange(newValue: string) {
+		internalValue = newValue;
+		if (value !== undefined) {
+			value = newValue;
+		}
+	}
+</script>
+
+{#if value !== undefined}
+	<TabsPrimitive.Root bind:value {orientation} class="tabs tabs--{orientation} {className}">
+		{#if children}
+			{@render children()}
+		{/if}
+	</TabsPrimitive.Root>
+{:else}
+	<TabsPrimitive.Root
+		value={internalValue}
+		onValueChange={handleValueChange}
+		{orientation}
+		class="tabs tabs--{orientation} {className}"
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</TabsPrimitive.Root>
+{/if}
+
+<style>
+	:global(.tabs) {
+		font-family: inherit;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-md, 1rem);
+	}
+
+	:global(.tabs--vertical) {
+		flex-direction: row;
+	}
+
+	:global(.tabs--horizontal) {
+		flex-direction: column;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import type { TabsProps } from '../../types/index.js';
+interface Props extends TabsProps {
+    children?: import('svelte').Snippet;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/TextInput/TextInput.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+	import type { TextInputType, InputSize } from '../../types/index.js';
+
+	interface Props {
+		type?: TextInputType;
+		value?: string;
+		placeholder?: string;
+		name?: string;
+		id?: string;
+		size?: InputSize;
+		disabled?: boolean;
+		readonly?: boolean;
+		required?: boolean;
+		error?: boolean;
+		maxlength?: number;
+		minlength?: number;
+		pattern?: string;
+		autocomplete?: HTMLInputElement['autocomplete'];
+		leadingIcon?: import('svelte').Snippet;
+		trailingIcon?: import('svelte').Snippet;
+		class?: string;
+		oninput?: (e: Event & { currentTarget: HTMLInputElement }) => void;
+		onchange?: (e: Event & { currentTarget: HTMLInputElement }) => void;
+		onblur?: (e: FocusEvent & { currentTarget: HTMLInputElement }) => void;
+		onfocus?: (e: FocusEvent & { currentTarget: HTMLInputElement }) => void;
+	}
+
+	let {
+		type = 'text',
+		value = $bindable(''),
+		placeholder,
+		name,
+		id,
+		size = 'md',
+		disabled = false,
+		readonly = false,
+		required = false,
+		error = false,
+		maxlength,
+		minlength,
+		pattern,
+		autocomplete,
+		leadingIcon,
+		trailingIcon,
+		class: className = '',
+		oninput,
+		onchange,
+		onblur,
+		onfocus
+	}: Props = $props();
+
+	const hasLeadingIcon = $derived(!!leadingIcon);
+	const hasTrailingIcon = $derived(!!trailingIcon);
+</script>
+
+<div
+	class="text-input text-input--{size} {error ? 'text-input--error' : ''} {disabled
+		? 'text-input--disabled'
+		: ''} {className}"
+>
+	{#if hasLeadingIcon}
+		<span class="text-input__icon text-input__icon--leading" aria-hidden="true">
+			{@render leadingIcon?.()}
+		</span>
+	{/if}
+
+	<input
+		class="text-input__field"
+		class:text-input__field--has-leading={hasLeadingIcon}
+		class:text-input__field--has-trailing={hasTrailingIcon}
+		{type}
+		bind:value
+		{placeholder}
+		{name}
+		{id}
+		{disabled}
+		{readonly}
+		{required}
+		{maxlength}
+		{minlength}
+		{pattern}
+		{autocomplete}
+		aria-invalid={error}
+		aria-required={required}
+		{oninput}
+		{onchange}
+		{onblur}
+		{onfocus}
+	/>
+
+	{#if hasTrailingIcon}
+		<span class="text-input__icon text-input__icon--trailing" aria-hidden="true">
+			{@render trailingIcon?.()}
+		</span>
+	{/if}
+</div>
+
+<style>
+	.text-input {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
+
+	.text-input--disabled {
+		opacity: 0.5;
+	}
+
+	.text-input__field {
+		width: 100%;
+		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-radius: var(--radius-md, 0.375rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.text-input__field::placeholder {
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	.text-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));
+	}
+
+	.text-input__field:disabled {
+		background: var(--color-bg-muted, #f3f4f6);
+		cursor: not-allowed;
+	}
+
+	.text-input__field:read-only {
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	/* Sizes */
+	.text-input--sm .text-input__field {
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		font-size: var(--text-xs, 0.75rem);
+	}
+
+	.text-input--md .text-input__field {
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	.text-input--lg .text-input__field {
+		min-height: 3.25rem;
+		padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
+		font-size: var(--text-base, 1rem);
+	}
+
+	/* Error state */
+	.text-input--error .text-input__field {
+		border-color: var(--color-error, #ef4444);
+	}
+
+	.text-input--error .text-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));
+	}
+
+	/* Icons */
+	.text-input__icon {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-text-muted, #6b7280);
+		pointer-events: none;
+	}
+
+	.text-input__icon--leading {
+		left: var(--space-md, 1rem);
+	}
+
+	.text-input__icon--trailing {
+		right: var(--space-md, 1rem);
+	}
+
+	.text-input__field--has-leading {
+		padding-left: calc(var(--space-md, 1rem) * 2 + 1.25rem);
+	}
+
+	.text-input__field--has-trailing {
+		padding-right: calc(var(--space-md, 1rem) * 2 + 1.25rem);
+	}
+</style>

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

@@ -0,0 +1,35 @@
+import type { TextInputType, InputSize } from '../../types/index.js';
+interface Props {
+    type?: TextInputType;
+    value?: string;
+    placeholder?: string;
+    name?: string;
+    id?: string;
+    size?: InputSize;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    error?: boolean;
+    maxlength?: number;
+    minlength?: number;
+    pattern?: string;
+    autocomplete?: HTMLInputElement['autocomplete'];
+    leadingIcon?: import('svelte').Snippet;
+    trailingIcon?: import('svelte').Snippet;
+    class?: string;
+    oninput?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    onchange?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    onblur?: (e: FocusEvent & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    onfocus?: (e: FocusEvent & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+}
+declare const TextInput: import("svelte").Component<Props, {}, "value">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;

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

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

package/dist/components/TextInput/index.js

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

package/dist/components/Textarea/Textarea.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+	import type { InputSize } from '../../types/index.js';
+
+	interface Props {
+		value?: string;
+		placeholder?: string;
+		name?: string;
+		id?: string;
+		size?: InputSize;
+		disabled?: boolean;
+		readonly?: boolean;
+		required?: boolean;
+		error?: boolean;
+		maxlength?: number;
+		minlength?: number;
+		rows?: number;
+		autoResize?: boolean;
+		showCharacterCount?: boolean;
+		class?: string;
+		oninput?: (e: Event & { currentTarget: HTMLTextAreaElement }) => void;
+		onchange?: (e: Event & { currentTarget: HTMLTextAreaElement }) => void;
+		onblur?: (e: FocusEvent & { currentTarget: HTMLTextAreaElement }) => void;
+		onfocus?: (e: FocusEvent & { currentTarget: HTMLTextAreaElement }) => void;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder,
+		name,
+		id,
+		size = 'md',
+		disabled = false,
+		readonly = false,
+		required = false,
+		error = false,
+		maxlength,
+		minlength,
+		rows = 3,
+		autoResize = false,
+		showCharacterCount = false,
+		class: className = '',
+		oninput,
+		onchange,
+		onblur,
+		onfocus
+	}: Props = $props();
+
+	let textareaElement: HTMLTextAreaElement | undefined = $state();
+
+	const characterCount = $derived(value?.length ?? 0);
+
+	function handleInput(e: Event & { currentTarget: HTMLTextAreaElement }) {
+		if (autoResize && textareaElement) {
+			textareaElement.style.height = 'auto';
+			textareaElement.style.height = `${textareaElement.scrollHeight}px`;
+		}
+		oninput?.(e);
+	}
+
+	$effect(() => {
+		if (autoResize && textareaElement && value) {
+			textareaElement.style.height = 'auto';
+			textareaElement.style.height = `${textareaElement.scrollHeight}px`;
+		}
+	});
+</script>
+
+<div
+	class="textarea textarea--{size} {error ? 'textarea--error' : ''} {disabled
+		? 'textarea--disabled'
+		: ''} {className}"
+>
+	<textarea
+		bind:this={textareaElement}
+		class="textarea__field"
+		bind:value
+		{placeholder}
+		{name}
+		{id}
+		{disabled}
+		{readonly}
+		{required}
+		{maxlength}
+		{minlength}
+		{rows}
+		aria-invalid={error}
+		aria-required={required}
+		oninput={handleInput}
+		{onchange}
+		{onblur}
+		{onfocus}
+	></textarea>
+
+	{#if showCharacterCount}
+		<div class="textarea__footer">
+			<span
+				class="textarea__count"
+				class:textarea__count--error={maxlength && characterCount > maxlength}
+			>
+				{characterCount}{#if maxlength}/{maxlength}{/if}
+			</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.textarea {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.textarea--disabled {
+		opacity: 0.5;
+	}
+
+	.textarea__field {
+		width: 100%;
+		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-radius: var(--radius-md, 0.375rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		resize: vertical;
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.textarea__field::placeholder {
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	.textarea__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));
+	}
+
+	.textarea__field:disabled {
+		background: var(--color-bg-muted, #f3f4f6);
+		cursor: not-allowed;
+	}
+
+	.textarea__field:read-only {
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	/* Sizes */
+	.textarea--sm .textarea__field {
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		font-size: var(--text-xs, 0.75rem);
+	}
+
+	.textarea--md .textarea__field {
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	.textarea--lg .textarea__field {
+		min-height: 3.25rem;
+		padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
+		font-size: var(--text-base, 1rem);
+	}
+
+	/* Error state */
+	.textarea--error .textarea__field {
+		border-color: var(--color-error, #ef4444);
+	}
+
+	.textarea--error .textarea__field:focus {
+		border-color: var(--color-error, #ef4444);
+		box-shadow: 0 0 0 3px var(--color-error-alpha, rgba(239, 68, 68, 0.1));
+	}
+
+	/* Footer with character count */
+	.textarea__footer {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: var(--space-xs, 0.25rem);
+	}
+
+	.textarea__count {
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-text-muted, #6b7280);
+	}
+
+	.textarea__count--error {
+		color: var(--color-error, #ef4444);
+	}
+</style>

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

@@ -0,0 +1,33 @@
+import type { InputSize } from '../../types/index.js';
+interface Props {
+    value?: string;
+    placeholder?: string;
+    name?: string;
+    id?: string;
+    size?: InputSize;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    error?: boolean;
+    maxlength?: number;
+    minlength?: number;
+    rows?: number;
+    autoResize?: boolean;
+    showCharacterCount?: boolean;
+    class?: string;
+    oninput?: (e: Event & {
+        currentTarget: HTMLTextAreaElement;
+    }) => void;
+    onchange?: (e: Event & {
+        currentTarget: HTMLTextAreaElement;
+    }) => void;
+    onblur?: (e: FocusEvent & {
+        currentTarget: HTMLTextAreaElement;
+    }) => void;
+    onfocus?: (e: FocusEvent & {
+        currentTarget: HTMLTextAreaElement;
+    }) => void;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

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

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

package/dist/components/Textarea/index.js

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