sveltacular 0.0.77 → 1.0.1

package/README.md

@@ -1,31 +1,158 @@
 ![Sveltacular](https://raw.githubusercontent.com/jasonbyrne/sveltacular/main/static/sveltacular.png)
 
-Sveltacular is TypeScript and SASS based component library for Svelte, with no other dependencies.
+Sveltacular is a TypeScript and SASS based component library for Svelte 5, with no other dependencies.
 
-Why did I create it when there are other options? Well, mainly because the best options out there were based on Tailwind. And, no disrespect to those who love it, but I didn't want to use Tailwind. So since I didn't find what I was loooking for, I made my own.
+Why did I create it when there are other options? Well, mainly because the best options out there were based on Tailwind. And, no disrespect to those who love it, but I didn't want to use Tailwind. So since I didn't find what I was looking for, I made my own.
 
-## Run Storybook
-
-I don't have great documentation for now, but you can browse all of the available components by running Storybook locally. Check out the repo and then run this command:
-
-```bash
-npm run storybook
-```
-
-## Usage
-
-Install it in your project
+## Installation
 
 ```bash
 npm i sveltacular
 ```
 
-Then use it like this:
+## Quick Start
 
 ```svelte
 <script lang="ts">
 	import { Button } from 'sveltacular';
 </script>
 
-<Button>Hello World</Button>
+<Button variant="primary" label="Hello World" />
+```
+
+## Component Catalog
+
+### Forms
+- **Button** - Multiple variants (primary, secondary, positive, danger, outline)
+- **TextBox** - Text input with validation and formatting options
+- **NumberBox** - Number input with min/max/decimals
+- **TextArea** - Multi-line text input
+- **CheckBox** / **CheckBoxGroup** - Checkbox inputs
+- **RadioGroup** / **RadioBox** - Radio button inputs
+- **ListBox** - Dropdown/select with search
+- **DateBox** - Date picker
+- **TimeBox** - Time picker
+- **PhoneBox** - Phone number input
+- **FileBox** / **FileArea** - File upload
+- **Slider** - Range slider input
+- **Form** - Form container with validation
+
+### Generic Components
+- **Card** - Card container
+- **Pill** - Badge/pill component
+- **Badge** - Notification badge
+- **Avatar** - User avatar with initials fallback
+- **Tooltip** - Hover tooltip
+- **Popover** - Popover dialog
+- **Spinner** - Loading spinner
+- **Rating** - Star rating component
+- **Chip** - Removable tag/chip
+- **Notice** - Alert/notice component
+- **Menu** - Dropdown menu
+- **List** - Styled list component
+
+### Navigation
+- **AppBar** - Application bar
+- **SideBar** - Side navigation
+- **Breadcrumbs** - Breadcrumb navigation
+- **Tabs** - Tab navigation
+- **Accordion** - Collapsible sections
+- **Wizard** - Multi-step wizard
+- **Pagination** - Page navigation
+- **Drawer** - Slide-out drawer
+
+### Modals
+- **Modal** - Generic modal dialog
+- **Alert** - Alert dialog
+- **Confirm** - Confirmation dialog
+- **Prompt** - Input prompt dialog
+
+### Tables
+- **Table** - Table component with header/body/footer
+- **DataGrid** - Advanced data grid
+
+### Typography
+- **Headline** - Heading component
+- **Subtitle** - Subtitle component
+- **Text** - Text component
+- **Paragraph** - Paragraph component
+- **CodeBlock** - Code block
+
+### Layout
+- **FlexRow** / **FlexCol** - Flexbox layout
+- **Grid** - Grid layout
+
+## Import Patterns
+
+Sveltacular supports multiple import patterns for flexibility:
+
+```typescript
+// Root-level imports (all components)
+import { Button, Card, Modal } from 'sveltacular';
+
+// Category-level imports
+import { Button, TextBox, Form } from 'sveltacular/forms';
+import { Card, Badge, Avatar } from 'sveltacular/generic';
+import { AppBar, Tabs, Wizard } from 'sveltacular/navigation';
+
+// Component-level imports
+import { Button } from 'sveltacular/forms/button';
+import { CheckBox, CheckBoxGroup } from 'sveltacular/forms/check-box';
+```
+
+## Theming
+
+Sveltacular uses CSS variables for theming. See [THEMING.md](./THEMING.md) for a complete list of available CSS variables.
+
+Example:
+
+```css
+:root {
+	--button-primary-bg: #1e88e5;
+	--form-input-border: #e0e0e0;
+	--base-color-bg: #ffffff;
+}
+```
+
+## Form Validation
+
+Sveltacular includes a validation system:
+
+```typescript
+import { createValidationRules, validate } from 'sveltacular/forms/validation';
+
+const rules = [
+	createValidationRules.required('Name is required'),
+	createValidationRules.minLength(3, 'Must be at least 3 characters'),
+	createValidationRules.email('Invalid email address')
+];
+
+const result = validate(emailValue, rules);
+if (!result.isValid) {
+	console.error(result.message);
+}
 ```
+
+## Accessibility
+
+Sveltacular components include:
+- ARIA attributes for screen readers
+- Keyboard navigation support
+- Focus management utilities
+- Semantic HTML structure
+
+## Run Storybook
+
+Browse all available components and their props by running Storybook locally:
+
+```bash
+npm run storybook
+```
+
+## Contributing
+
+Contributions are welcome! Please see the contributing guidelines (coming soon).
+
+## License
+
+MIT

package/dist/forms/base-input-wrapper.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FormFieldSizeOptions } from '../types/form.js';
+
+	let {
+		id,
+		disabled = false,
+		error = false,
+		prefix = undefined,
+		suffix = undefined,
+		helperText = undefined,
+		errorMessage = undefined,
+		inputElement,
+		labelElement
+	}: {
+		id: string;
+		disabled?: boolean;
+		error?: boolean;
+		prefix?: string | undefined;
+		suffix?: string | undefined;
+		helperText?: string | undefined;
+		errorMessage?: string | undefined;
+		inputElement: Snippet;
+		labelElement?: Snippet | undefined;
+	} = $props();
+</script>
+
+{#if labelElement}
+	{@render labelElement()}
+{/if}
+<div class="input {disabled ? 'disabled' : 'enabled'} {error ? 'error' : ''}">
+	{#if prefix}
+		<div class="prefix">{prefix}</div>
+	{/if}
+	{@render inputElement()}
+	{#if suffix}
+		<div class="suffix">{suffix}</div>
+	{/if}
+</div>
+{#if errorMessage}
+	<div class="error-text">{errorMessage}</div>
+{:else if helperText}
+	<div class="helper-text">{helperText}</div>
+{/if}
+
+<style>.input {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-md);
+  border: var(--border-thin) solid var(--form-input-border);
+  background-color: var(--form-input-bg);
+  color: var(--form-input-fg);
+  font-size: var(--font-md);
+  font-weight: 500;
+  line-height: 2rem;
+  transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out), fill var(--transition-base) var(--ease-in-out), stroke var(--transition-base) var(--ease-in-out);
+  user-select: none;
+  white-space: nowrap;
+}
+.input.disabled {
+  opacity: 0.5;
+}
+.input.error {
+  border-color: var(--form-input-border-error);
+}
+.input .prefix,
+.input .suffix {
+  font-size: var(--font-md);
+  line-height: 2rem;
+  padding-left: var(--spacing-base);
+  padding-right: var(--spacing-base);
+  background-color: var(--form-input-accent-bg);
+  color: var(--form-input-accent-fg);
+}
+.input .prefix {
+  border-right: var(--border-thin) solid var(--form-input-border);
+}
+.input .suffix {
+  border-left: var(--border-thin) solid var(--form-input-border);
+}
+
+.helper-text {
+  font-size: var(--font-sm);
+  line-height: 1.25rem;
+  padding: var(--spacing-xs);
+  color: var(--form-input-helper-text-fg);
+}
+
+.error-text {
+  font-size: var(--font-sm);
+  line-height: 1.25rem;
+  padding: var(--spacing-xs);
+  color: var(--form-input-error-fg);
+}</style>
+

package/dist/forms/base-input-wrapper.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    id: string;
+    disabled?: boolean;
+    error?: boolean;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    helperText?: string | undefined;
+    errorMessage?: string | undefined;
+    inputElement: Snippet;
+    labelElement?: Snippet | undefined;
+};
+declare const BaseInputWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type BaseInputWrapper = ReturnType<typeof BaseInputWrapper>;
+export default BaseInputWrapper;

package/dist/forms/bool-box/bool-box.svelte

@@ -1,18 +1,32 @@
-<script>import { createEventDispatcher } from "svelte";
-import ListBox from "../list-box/list-box.svelte";
-const dispatch = createEventDispatcher();
-export let value = false;
-export let options = ["Yes", "No"];
-export let size = "md";
-let stringValue = value ? "true" : "false";
-const onChange = () => {
-  value = stringValue == "true";
-  dispatch("change", value);
-};
-$: items = [
-  { value: "true", name: options[0] },
-  { value: "false", name: options[1] }
-];
+<script lang="ts">
+	import ListBox from '../list-box/list-box.svelte';
+	import type { FormFieldSizeOptions } from '../../index.js';
+
+	let {
+		value = $bindable(false),
+		options = ['Yes', 'No'] as [yes: string, no: string],
+		size = 'md' as FormFieldSizeOptions,
+		onChange = undefined,
+		label = undefined
+	}: {
+		value?: boolean;
+		options?: [yes: string, no: string];
+		size?: FormFieldSizeOptions;
+		onChange?: ((value: boolean) => void) | undefined;
+		label?: string;
+	} = $props();
+
+	let stringValue = $state(value ? 'true' : 'false');
+
+	const handleChange = () => {
+		value = stringValue == 'true';
+		onChange?.(value);
+	};
+
+	let items = $derived([
+		{ value: 'true', name: options[0] },
+		{ value: 'false', name: options[1] }
+	]);
 </script>
 
-<ListBox {items} bind:value={stringValue} {size} on:change={onChange}><slot /></ListBox>
+<ListBox {items} bind:value={stringValue} {size} onChange={handleChange} {label} />

package/dist/forms/bool-box/bool-box.svelte.d.ts

@@ -1,25 +1,11 @@
-import { SvelteComponent } from "svelte";
 import type { FormFieldSizeOptions } from '../../index.js';
-declare const __propDef: {
-    props: {
-        value?: boolean;
-        options?: [yes: string, no: string];
-        size?: FormFieldSizeOptions;
-    };
-    events: {
-        change: CustomEvent<boolean>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type $$ComponentProps = {
+    value?: boolean;
+    options?: [yes: string, no: string];
+    size?: FormFieldSizeOptions;
+    onChange?: ((value: boolean) => void) | undefined;
+    label?: string;
 };
-export type BoolBoxProps = typeof __propDef.props;
-export type BoolBoxEvents = typeof __propDef.events;
-export type BoolBoxSlots = typeof __propDef.slots;
-export default class BoolBox extends SvelteComponent<BoolBoxProps, BoolBoxEvents, BoolBoxSlots> {
-}
-export {};
+declare const BoolBox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type BoolBox = ReturnType<typeof BoolBox>;
+export default BoolBox;

package/dist/forms/button/button.svelte

@@ -1,61 +1,125 @@
-<script>import { navigateTo } from "../../helpers/navigate-to.js";
-import { createEventDispatcher } from "svelte";
-export let href = void 0;
-export let size = "md";
-export let style = "secondary";
-export let type = "button";
-export let block = false;
-export let flex = false;
-export let disabled = false;
-export let noMargin = false;
-export let collapse = false;
-export let repeatSubmitDelay = 500;
-const dispatch = createEventDispatcher();
-const click = (e) => {
-  if (disabled) {
-    e.preventDefault();
-    e.stopPropagation();
-    return;
-  }
-  dispatch("click");
-  if (repeatSubmitDelay) {
-    disabled = true;
-    if (repeatSubmitDelay !== "infinite") {
-      setTimeout(() => disabled = false, repeatSubmitDelay);
-    }
-  }
-  if (href) {
-    navigateTo(href);
-  }
-};
+<script lang="ts">
+	/**
+	 * Button component with multiple variants and sizes
+	 * @component
+	 */
+	import type { Snippet } from 'svelte';
+	import { navigateTo } from '../../helpers/navigate-to.js';
+	import type { ButtonVariant, FormFieldSizeOptions } from '../../types/form.js';
+
+	let {
+		/** Button label text */
+		label,
+		/** Optional href for navigation */
+		href = undefined,
+		/** Button size */
+		size = 'md',
+		/** Button variant/style */
+		variant = 'secondary',
+		/** HTML button type */
+		type = 'button',
+		/** Display as block (full width) */
+		block = false,
+		/** Allow flex growth */
+		flex = false,
+		/** Disabled state */
+		disabled = $bindable(false),
+		/** Loading state */
+		loading = false,
+		/** ARIA label override */
+		ariaLabel = undefined,
+		/** Remove margins */
+		noMargin = false,
+		/** Collapse padding */
+		collapse = false,
+		/** Delay before re-enabling after click (prevents double-clicks) */
+		repeatSubmitDelay = 500,
+		/** Click handler */
+		onClick = undefined,
+		/** Optional children snippet */
+		children
+	}: {
+		label?: string;
+		href?: string | undefined;
+		size?: FormFieldSizeOptions;
+		variant?: ButtonVariant;
+		type?: 'button' | 'submit' | 'reset';
+		block?: boolean;
+		flex?: boolean;
+		disabled?: boolean;
+		loading?: boolean;
+		ariaLabel?: string | undefined;
+		noMargin?: boolean;
+		collapse?: boolean;
+		repeatSubmitDelay?: number | 'infinite';
+		onClick?: ((e?: Event) => void) | undefined;
+		children?: Snippet;
+	} = $props();
+
+	let isDisabled = $derived(disabled || loading);
+
+	const click = (e: Event) => {
+		if (isDisabled) {
+			e.preventDefault();
+			e.stopPropagation();
+			return;
+		}
+		onClick?.(e);
+		if (repeatSubmitDelay) {
+			disabled = true;
+			if (repeatSubmitDelay !== 'infinite') {
+				setTimeout(() => (disabled = false), repeatSubmitDelay);
+			}
+		}
+		if (href) {
+			navigateTo(href);
+		}
+	};
 </script>
 
-<button {type} on:click={click} class="{size} {style} {flex ? 'flex' : ''}" class:block class:noMargin class:collapse {disabled}>
-	<slot />
+<button
+	{type}
+	onclick={click}
+	class="{size} {variant} {flex ? 'flex' : ''}"
+	class:block
+	class:noMargin
+	class:collapse
+	class:loading
+	disabled={isDisabled}
+	aria-label={ariaLabel || label}
+	aria-busy={loading}
+	aria-disabled={isDisabled}
+>
+	{#if loading}
+		<span class="loading-indicator" aria-hidden="true">⏳</span>
+	{/if}
+	{#if children}
+		{@render children()}
+	{:else if label}
+		<span class="label">{label}</span>
+	{/if}
 </button>
 
 <style>button {
   display: inline-block;
   min-width: 10rem;
   cursor: pointer;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  border-width: 1px;
+  margin-top: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+  border-width: var(--border-thin);
   border-style: solid;
-  border-radius: 0.25rem;
-  color: #e2e2e2;
-  cursor: pointer;
-  display: inline-block;
-  font-size: 0.875rem;
+  border-radius: var(--radius-md);
+  color: var(--button-secondary-fg);
+  font-size: var(--font-base);
   font-weight: 500;
   line-height: 1.25rem;
-  padding: 0.5rem 1rem;
+  padding: var(--spacing-sm) var(--spacing-base);
   text-align: center;
   text-decoration: none;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
+  transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out), fill var(--transition-base) var(--ease-in-out), stroke var(--transition-base) var(--ease-in-out);
   user-select: none;
   white-space: nowrap;
-  font-family: var(--base-font-family, sans-serif);
+  font-family: var(--base-font-family);
   text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
 }
 button[disabled] {
@@ -67,7 +131,7 @@ button.noMargin {
 }
 button.collapse {
   min-width: auto;
-  padding: 0.5rem;
+  padding: var(--spacing-sm);
 }
 button.flex {
   flex-grow: 1;
@@ -77,91 +141,91 @@ button.block {
   width: 100%;
 }
 button.sm {
-  font-size: 0.75rem;
+  font-size: var(--font-sm);
   line-height: 1rem;
-  padding: 0.25rem 0.5rem;
+  padding: var(--spacing-xs) var(--spacing-sm);
 }
 button.lg {
-  font-size: 1rem;
+  font-size: var(--font-md);
   line-height: 1.5rem;
-  padding: 0.75rem 1.5rem;
+  padding: var(--spacing-md) var(--spacing-lg);
 }
 button.xl {
-  font-size: 1.25rem;
+  font-size: var(--font-xl);
   line-height: 1.75rem;
-  padding: 1rem 2rem;
+  padding: var(--spacing-base) var(--spacing-xl);
 }
 button.full {
   width: 100%;
-  padding: 0.5rem 0;
+  padding: var(--spacing-sm) 0;
   display: block;
   min-width: auto;
   flex-grow: 1;
 }
 button:hover {
-  background-color: #4c4c4c;
+  background-color: var(--gray-600);
+}
+button:active:not([disabled]) {
+  transform: scale(0.98);
+}
+@media (prefers-reduced-motion: no-preference) {
+  button {
+    transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out), fill var(--transition-base) var(--ease-in-out), stroke var(--transition-base) var(--ease-in-out), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+  }
 }
 button.primary {
-  background-color: var(--button-primary-bg, #1e88e5);
-  border-color: var(--button-primary-border, #1e88e5);
-  color: var(--button-primary-fg, #fff);
+  background-color: var(--button-primary-bg);
+  border-color: var(--button-primary-border);
+  color: var(--button-primary-fg);
 }
 button.primary:hover {
-  background-color: var(--button-primary-hover-bg, #0052a3);
-  color: var(--button-primary-hover-fg, #fff);
+  background-color: var(--button-primary-hover-bg);
+  color: var(--button-primary-hover-fg);
 }
 button.secondary {
-  background-color: var(--button-secondary-bg, #555);
-  border-color: var(--button-secondary-border, #aaa);
-  color: var(--button-secondary-fg, #fff);
+  background-color: var(--button-secondary-bg);
+  border-color: var(--button-secondary-border);
+  color: var(--button-secondary-fg);
 }
 button.secondary:hover {
-  background-color: var(--button-secondary-hover-bg, #333);
-  color: var(--button-secondary-hover-fg, #fff);
-}
-button.ghost {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--base-fg, #ccc);
-  text-decoration: none;
-}
-button.ghost:hover {
-  background-color: var(--button-ghost-hover-bg, #e0e0e0);
-  color: var(--button-ghost-hover-fg, #1e88e5);
+  background-color: var(--button-secondary-hover-bg);
+  color: var(--button-secondary-hover-fg);
 }
 button.positive {
-  background-color: var(--button-positive-bg, #43a047);
-  border-color: var(--button-positive-border, #43a047);
-  color: var(--button-positive-fg, #fff);
+  background-color: var(--button-positive-bg);
+  border-color: var(--button-positive-border);
+  color: var(--button-positive-fg);
 }
 button.positive:hover {
-  background-color: var(--button-positive-hover-bg, #388e3c);
-  color: var(--button-positive-hover-fg, #fff);
+  background-color: var(--button-positive-hover-bg);
+  color: var(--button-positive-hover-fg);
 }
 button.danger {
-  background-color: var(--button-danger-bg, #e53935);
-  border-color: var(--button-danger-border, #e53935);
-  color: var(--button-danger-fg, #fff);
+  background-color: var(--button-danger-bg);
+  border-color: var(--button-danger-border);
+  color: var(--button-danger-fg);
 }
 button.danger:hover {
-  background-color: var(--button-danger-hover-bg, #c62828);
-  color: var(--button-danger-hover-fg, #fff);
+  background-color: var(--button-danger-hover-bg);
+  color: var(--button-danger-hover-fg);
 }
 button.outline {
-  background-color: transparent;
-  border-color: var(--button-outline-border, #e2e2e2);
-  color: var(--button-outline-fg, #e2e2e2);
+  background-color: var(--body-bg);
+  border-color: var(--gray-400);
+  color: var(--body-fg);
+  text-shadow: none;
+  font-weight: 400;
 }
 button.outline:hover {
-  background-color: var(--button-outline-hover-bg, #e2e2e2);
-  color: var(--button-outline-hover-fg, #000);
+  background-color: var(--button-outline-hover-bg);
+  color: var(--button-outline-hover-fg);
 }
 button.link {
   background-color: transparent;
   border-color: transparent;
-  color: var(--base-link-fg, #1e88e5);
+  color: var(--base-link-fg);
   text-decoration: underline;
 }
 button.link:hover {
-  color: var(--base-link-hover-fg, #1e88e5);
+  color: var(--base-link-hover-fg);
 }</style>