@autumnsgrove/groveengine 0.3.2 → 0.4.0

package/dist/ui/components/ui/Input.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+/**
+ * Input component wrapper with label, error handling, and validation
+ *
+ * @prop {string} [label] - Input label text (renders above input)
+ * @prop {string} [error] - Error message to display (turns border red)
+ * @prop {string|number} [value] - Input value (bindable for two-way binding)
+ * @prop {string} [placeholder] - Placeholder text
+ * @prop {string} [type="text"] - Input type (text|email|password|number)
+ * @prop {boolean} [required=false] - Whether input is required (shows asterisk)
+ * @prop {boolean} [disabled=false] - Whether input is disabled
+ * @prop {string} [class] - Additional CSS classes to apply
+ *
+ * @example
+ * <Input label="Email" type="email" bind:value={email} required />
+ *
+ * @example
+ * <Input label="Password" type="password" bind:value={password} error={passwordError} />
+ *
+ * @example
+ * <Input placeholder="Search..." bind:value={searchQuery} />
+ */
+interface Props extends Omit<HTMLInputAttributes, "class"> {
+    label?: string;
+    error?: string;
+    value?: string | number;
+    placeholder?: string;
+    type?: "text" | "email" | "password" | "number";
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/{components → ui/components}/ui/Select.svelte

@@ -4,7 +4,7 @@
 		SelectContent,
 		SelectItem,
 		SelectTrigger
-	} from "./select";
+	} from "../primitives/select";
 	import type { Snippet } from "svelte";
 
 	interface Option {

package/dist/{components → ui/components}/ui/Sheet.svelte

@@ -8,7 +8,7 @@
 		SheetTitle,
 		SheetDescription,
 		SheetFooter
-	} from "./sheet";
+	} from "../primitives/sheet";
 	import type { Snippet } from "svelte";
 
 	/**

package/dist/ui/components/ui/Skeleton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Skeleton as ShadcnSkeleton } from "../primitives/skeleton";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	/**
+	 * Skeleton component wrapper for loading placeholders
+	 * Creates animated gray rectangles that indicate loading content
+	 *
+	 * @prop {string} [class] - CSS classes to customize size/shape (e.g., "h-12 w-12 rounded-full")
+	 *
+	 * @example
+	 * <Skeleton class="h-4 w-full" />
+	 *
+	 * @example
+	 * <Skeleton class="h-12 w-12 rounded-full" />
+	 *
+	 * @example
+	 * <div class="flex flex-col gap-2">
+	 *   <Skeleton class="h-6 w-3/4" />
+	 *   <Skeleton class="h-4 w-full" />
+	 *   <Skeleton class="h-4 w-5/6" />
+	 * </div>
+	 */
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		class?: string;
+	}
+
+	let { class: className, ...restProps }: Props = $props();
+</script>
+
+<ShadcnSkeleton class={className} {...restProps} />

package/dist/ui/components/ui/Skeleton.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * Skeleton component wrapper for loading placeholders
+ * Creates animated gray rectangles that indicate loading content
+ *
+ * @prop {string} [class] - CSS classes to customize size/shape (e.g., "h-12 w-12 rounded-full")
+ *
+ * @example
+ * <Skeleton class="h-4 w-full" />
+ *
+ * @example
+ * <Skeleton class="h-12 w-12 rounded-full" />
+ *
+ * @example
+ * <div class="flex flex-col gap-2">
+ *   <Skeleton class="h-6 w-3/4" />
+ *   <Skeleton class="h-4 w-full" />
+ *   <Skeleton class="h-4 w-5/6" />
+ * </div>
+ */
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/ui/components/ui/Spinner.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	/**
+	 * Spinner loading indicator
+	 * A simple spinning loader for indicating loading states
+	 *
+	 * @prop {string} [size="md"] - Size variant (sm|md|lg)
+	 * @prop {string} [class] - Additional CSS classes
+	 */
+	type SpinnerSize = 'sm' | 'md' | 'lg';
+
+	interface Props {
+		size?: SpinnerSize;
+		class?: string;
+	}
+
+	let { size = 'md', class: className = '' }: Props = $props();
+
+	const sizeClasses: Record<SpinnerSize, string> = {
+		sm: 'h-4 w-4',
+		md: 'h-8 w-8',
+		lg: 'h-12 w-12'
+	};
+</script>
+
+<div
+	class="animate-spin rounded-full border-2 border-current border-t-transparent {sizeClasses[size]} {className}"
+	role="status"
+	aria-label="Loading"
+>
+	<span class="sr-only">Loading...</span>
+</div>
+
+<style>
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+</style>

package/dist/ui/components/ui/Spinner.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Spinner loading indicator
+ * A simple spinning loader for indicating loading states
+ *
+ * @prop {string} [size="md"] - Size variant (sm|md|lg)
+ * @prop {string} [class] - Additional CSS classes
+ */
+type SpinnerSize = 'sm' | 'md' | 'lg';
+interface Props {
+    size?: SpinnerSize;
+    class?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/{components → ui/components}/ui/Table.svelte

@@ -5,7 +5,7 @@
 		TableBody,
 		TableRow,
 		TableCell
-	} from "./table";
+	} from "../primitives/table";
 	import type { Snippet } from "svelte";
 
 	/**
@@ -42,7 +42,7 @@
 	 * </Table>
 	 *
 	 * @example
-	 * import { Table, TableHeader, TableBody, TableRow, TableCell } from "./";
+	 * import { Table, TableHeader, TableBody, TableRow, TableCell } from "../../../components/ui";
 	 */
 	interface Props {
 		class?: string;

package/dist/{components → ui/components}/ui/Table.svelte.d.ts

@@ -33,7 +33,7 @@ import type { Snippet } from "svelte";
  * </Table>
  *
  * @example
- * import { Table, TableHeader, TableBody, TableRow, TableCell } from "./";
+ * import { Table, TableHeader, TableBody, TableRow, TableCell } from "../../../components/ui";
  */
 interface Props {
     class?: string;

package/dist/{components → ui/components}/ui/Tabs.svelte

@@ -4,7 +4,7 @@
 		TabsContent,
 		TabsList,
 		TabsTrigger
-	} from "./tabs";
+	} from "../primitives/tabs";
 	import type { Snippet } from "svelte";
 
 	interface Tab {
@@ -47,8 +47,8 @@
 	}
 
 	let {
-		value = $bindable(tabs[0]?.value ?? ""),
 		tabs,
+		value = $bindable(tabs[0]?.value ?? ""),
 		content,
 		class: className,
 		children

package/dist/ui/components/ui/Textarea.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { Textarea as ShadcnTextarea } from "../primitives/textarea";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import { cn } from "../../utils";
+
+	/**
+	 * Textarea component wrapper with label, error handling, and validation
+	 *
+	 * @prop {string} [label] - Textarea label text (renders above textarea)
+	 * @prop {string} [error] - Error message to display (turns border red)
+	 * @prop {string} [value] - Textarea value (bindable for two-way binding)
+	 * @prop {string} [placeholder] - Placeholder text
+	 * @prop {number} [rows] - Number of visible text rows
+	 * @prop {boolean} [required=false] - Whether textarea is required (shows asterisk)
+	 * @prop {boolean} [disabled=false] - Whether textarea is disabled
+	 * @prop {string} [class] - Additional CSS classes to apply
+	 *
+	 * @example
+	 * <Textarea label="Description" bind:value={description} required />
+	 *
+	 * @example
+	 * <Textarea label="Notes" bind:value={notes} rows={5} error={notesError} />
+	 *
+	 * @example
+	 * <Textarea placeholder="Enter your message..." bind:value={message} />
+	 */
+	interface Props extends Omit<HTMLTextareaAttributes, "class"> {
+		label?: string;
+		error?: string;
+		value?: string;
+		placeholder?: string;
+		rows?: number;
+		required?: boolean;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let {
+		label,
+		error,
+		value = $bindable(""),
+		placeholder,
+		rows,
+		required = false,
+		disabled = false,
+		class: className,
+		...restProps
+	}: Props = $props();
+
+	const textareaClass = $derived(
+		cn(
+			error && "border-destructive focus-visible:ring-destructive/20",
+			className
+		)
+	);
+</script>
+
+<div class="flex flex-col gap-1.5">
+	{#if label}
+		<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+			{label}
+			{#if required}
+				<span class="text-destructive">*</span>
+			{/if}
+		</label>
+	{/if}
+
+	<ShadcnTextarea
+		bind:value
+		{placeholder}
+		{rows}
+		{required}
+		{disabled}
+		class={textareaClass}
+		{...restProps}
+	/>
+
+	{#if error}
+		<p class="text-sm text-destructive">{error}</p>
+	{/if}
+</div>

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

@@ -0,0 +1,35 @@
+import type { HTMLTextareaAttributes } from "svelte/elements";
+/**
+ * Textarea component wrapper with label, error handling, and validation
+ *
+ * @prop {string} [label] - Textarea label text (renders above textarea)
+ * @prop {string} [error] - Error message to display (turns border red)
+ * @prop {string} [value] - Textarea value (bindable for two-way binding)
+ * @prop {string} [placeholder] - Placeholder text
+ * @prop {number} [rows] - Number of visible text rows
+ * @prop {boolean} [required=false] - Whether textarea is required (shows asterisk)
+ * @prop {boolean} [disabled=false] - Whether textarea is disabled
+ * @prop {string} [class] - Additional CSS classes to apply
+ *
+ * @example
+ * <Textarea label="Description" bind:value={description} required />
+ *
+ * @example
+ * <Textarea label="Notes" bind:value={notes} rows={5} error={notesError} />
+ *
+ * @example
+ * <Textarea placeholder="Enter your message..." bind:value={message} />
+ */
+interface Props extends Omit<HTMLTextareaAttributes, "class"> {
+    label?: string;
+    error?: string;
+    value?: string;
+    placeholder?: string;
+    rows?: number;
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/{components → ui/components}/ui/Toast.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Toaster } from "svelte-sonner";
+	import { Toaster } from "sonner";
 
 	interface Props {
 		position?:

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

@@ -0,0 +1,18 @@
+export { default as Button } from './Button.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Dialog } from './Dialog.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export { default as Sheet } from './Sheet.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Table } from './Table.svelte';
+export { default as CollapsibleSection } from './CollapsibleSection.svelte';
+export { TableHeader, TableBody, TableRow, TableCell, TableHead, TableFooter, TableCaption, } from '../primitives/table';
+export * from './toast.js';
+export declare const UI_VERSION = "0.2.0";

package/dist/ui/components/ui/index.js

@@ -0,0 +1,28 @@
+// GroveUI - Basic UI Components
+//
+// This module exports all basic UI components:
+// Button, Card, Input, Dialog, Select, Tabs, Accordion, Badge, etc.
+//
+// Usage:
+//   import { Button, Card } from '@groveengine/ui/ui';
+// Wrapper components
+export { default as Button } from './Button.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Dialog } from './Dialog.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export { default as Sheet } from './Sheet.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Table } from './Table.svelte';
+export { default as CollapsibleSection } from './CollapsibleSection.svelte';
+// Table sub-components (from primitives)
+export { TableHeader, TableBody, TableRow, TableCell, TableHead, TableFooter, TableCaption, } from '../primitives/table';
+// Toast utility
+export * from './toast.js';
+export const UI_VERSION = '0.2.0';

package/dist/{components → ui/components}/ui/toast.d.ts

@@ -3,7 +3,7 @@
  * Wraps sonner toast with consistent defaults and API
  *
  * @example
- * import { toast } from "./";
+ * import { toast } from "../../../components/ui";
  * toast.success("Profile updated!");
  *
  * @example

package/dist/{components → ui/components}/ui/toast.js

@@ -1,10 +1,10 @@
-import { toast as sonnerToast } from "svelte-sonner";
+import { toast as sonnerToast } from "sonner";
 /**
  * Toast notification utility for displaying temporary messages
  * Wraps sonner toast with consistent defaults and API
  *
  * @example
- * import { toast } from "./";
+ * import { toast } from "../../../components/ui";
  * toast.success("Profile updated!");
  *
  * @example

package/dist/ui/index.d.ts

@@ -0,0 +1,10 @@
+export * from './components/ui/index.js';
+export * from './components/gallery/index.js';
+export * from './components/indicators/index.js';
+export * from './components/content/index.js';
+export * from './components/forms/index.js';
+export * from './components/icons/index.js';
+export * from './components/states/index.js';
+export * from './components/charts/index.js';
+export * from './tokens/index.js';
+export { cn } from './utils/cn.js';

package/dist/ui/index.js

@@ -0,0 +1,22 @@
+// GroveUI - Main Entry Point
+// @groveengine/ui v0.2.0
+//
+// A calm, organic design system for the Grove platform.
+// "a place to Be"
+// Re-export all component categories
+// Core UI (from GroveEngine)
+export * from './components/ui/index.js';
+export * from './components/gallery/index.js';
+// Editor component is in GroveEngine (domain-specific)
+// New categories (from GroveScout)
+export * from './components/indicators/index.js';
+export * from './components/content/index.js';
+export * from './components/forms/index.js';
+export * from './components/icons/index.js';
+export * from './components/states/index.js';
+// Charts (from AutumnsGrove)
+export * from './components/charts/index.js';
+// Export design tokens
+export * from './tokens/index.js';
+// Export utilities
+export { cn } from './utils/cn.js';

package/dist/ui/stores/theme.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Theme Store for GroveUI
+ * Manages light/dark/system theme preferences
+ */
+type Theme = 'light' | 'dark' | 'system';
+export declare const themeStore: {
+    theme: import("svelte/store").Writable<Theme>;
+    resolvedTheme: import("svelte/store").Readable<"light" | "dark">;
+    setTheme: (newTheme: Theme) => void;
+    toggle: () => void;
+};
+export {};

package/dist/ui/stores/theme.js

@@ -0,0 +1,52 @@
+/**
+ * Theme Store for GroveUI
+ * Manages light/dark/system theme preferences
+ */
+import { writable, derived, get } from 'svelte/store';
+import { browser } from '$app/environment';
+function createThemeStore() {
+    // Initialize theme from localStorage or default to 'system'
+    const initialTheme = browser
+        ? localStorage.getItem('theme') ?? 'system'
+        : 'system';
+    const theme = writable(initialTheme);
+    // Resolved theme (light/dark based on system preference if theme is 'system')
+    const resolvedTheme = derived(theme, ($theme) => {
+        if ($theme === 'system' && browser) {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        return $theme === 'system' ? 'light' : $theme;
+    });
+    // Apply theme to document
+    function applyTheme(t) {
+        if (browser) {
+            document.documentElement.classList.toggle('dark', t === 'dark');
+        }
+    }
+    // Subscribe to resolved theme changes and apply
+    if (browser) {
+        resolvedTheme.subscribe((t) => applyTheme(t));
+        // Listen for system preference changes
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            // Re-trigger derived store calculation
+            theme.update(t => t);
+        });
+    }
+    function setTheme(newTheme) {
+        theme.set(newTheme);
+        if (browser) {
+            localStorage.setItem('theme', newTheme);
+        }
+    }
+    function toggle() {
+        const current = get(resolvedTheme);
+        setTheme(current === 'dark' ? 'light' : 'dark');
+    }
+    return {
+        theme,
+        resolvedTheme,
+        setTheme,
+        toggle
+    };
+}
+export const themeStore = createThemeStore();