@autumnsgrove/groveengine 0.3.3 → 0.4.0

package/dist/ui/components/states/ThemeToggle.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { themeStore } from '../../stores/theme';
+
+	let { compact = false }: { compact?: boolean } = $props();
+
+	// Subscribe to stores
+	const { theme, resolvedTheme: resolvedThemeStore, toggle, setTheme } = themeStore;
+
+	// Derive title from resolved theme
+	let toggleTitle = $derived($resolvedThemeStore === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
+</script>
+
+{#if compact}
+	<button
+		class="theme-toggle-compact"
+		onclick={() => toggle()}
+		aria-label="Toggle theme"
+		title={toggleTitle}
+	>
+		{#if $resolvedThemeStore === 'dark'}
+			<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<circle cx="12" cy="12" r="5" />
+				<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+			</svg>
+		{:else}
+			<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+			</svg>
+		{/if}
+	</button>
+{:else}
+	<div class="theme-selector">
+		<div class="theme-label">Theme</div>
+		<div class="theme-options">
+			<button
+				class="theme-option"
+				class:active={$theme === 'light'}
+				onclick={() => setTheme('light')}
+			>
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<circle cx="12" cy="12" r="5" />
+					<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+				</svg>
+				Light
+			</button>
+			<button
+				class="theme-option"
+				class:active={$theme === 'dark'}
+				onclick={() => setTheme('dark')}
+			>
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+				</svg>
+				Dark
+			</button>
+			<button
+				class="theme-option"
+				class:active={$theme === 'system'}
+				onclick={() => setTheme('system')}
+			>
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+					<path d="M8 21h8M12 17v4" />
+				</svg>
+				System
+			</button>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.theme-toggle-compact {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		border: none;
+		background: transparent;
+		color: var(--color-text-secondary);
+		border-radius: var(--radius-md);
+		cursor: pointer;
+		transition: all var(--transition-fast);
+	}
+
+	.theme-toggle-compact:hover {
+		background: var(--color-bg-secondary);
+		color: var(--color-text);
+	}
+
+	.theme-selector {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.theme-label {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--color-text-secondary);
+	}
+
+	.theme-options {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.theme-option {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		border: 1px solid var(--color-border);
+		background: var(--color-bg);
+		color: var(--color-text-secondary);
+		border-radius: var(--radius-md);
+		font-size: 0.875rem;
+		cursor: pointer;
+		transition: all var(--transition-fast);
+	}
+
+	.theme-option:hover {
+		border-color: var(--color-primary);
+		color: var(--color-text);
+	}
+
+	.theme-option.active {
+		border-color: var(--color-primary);
+		background: var(--color-primary-light);
+		color: var(--color-primary);
+	}
+
+	@media (max-width: 480px) {
+		.theme-options {
+			flex-direction: column;
+		}
+	}
+</style>

package/dist/ui/components/states/ThemeToggle.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    compact?: boolean;
+};
+declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

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

@@ -0,0 +1,5 @@
+export { default as LoadingSkeleton } from './LoadingSkeleton.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Loading } from './Loading.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export declare const STATES_VERSION = "0.2.0";

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

@@ -0,0 +1,11 @@
+// GroveUI - State Components
+//
+// This module exports loading, empty, and theme state components
+//
+// Usage:
+//   import { LoadingSkeleton, EmptyState, Loading, ThemeToggle } from '@groveengine/ui/states';
+export { default as LoadingSkeleton } from './LoadingSkeleton.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Loading } from './Loading.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export const STATES_VERSION = '0.2.0';

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

@@ -4,7 +4,7 @@
 		AccordionItem,
 		AccordionTrigger,
 		AccordionContent
-	} from "./accordion";
+	} from "../primitives/accordion";
 	import type { Snippet } from "svelte";
 
 	interface AccordionItemConfig {

package/dist/ui/components/ui/Badge.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Badge as ShadcnBadge } from "../primitives/badge";
+	import type { Snippet } from "svelte";
+
+	type BadgeVariant = "default" | "secondary" | "destructive" | "tag";
+
+	/**
+	 * Badge component wrapper for displaying small labels, tags, or status indicators
+	 *
+	 * @prop {BadgeVariant} [variant="default"] - Badge style variant (default|secondary|destructive|tag)
+	 * @prop {string} [class] - Additional CSS classes to apply
+	 * @prop {Snippet} [children] - Badge content (typically short text)
+	 *
+	 * @example
+	 * <Badge variant="default">New</Badge>
+	 *
+	 * @example
+	 * <Badge variant="destructive">Error</Badge>
+	 *
+	 * @example
+	 * <Badge variant="tag">TypeScript</Badge>
+	 */
+	interface Props {
+		variant?: BadgeVariant;
+		class?: string;
+		children?: Snippet;
+		onclick?: (e: MouseEvent) => void;
+		[key: string]: unknown;
+	}
+
+	let {
+		variant = "default",
+		class: className,
+		children,
+		onclick,
+		...restProps
+	}: Props = $props();
+
+	// Map tag variant to secondary styling
+	const variantMap: Record<BadgeVariant, "default" | "secondary" | "destructive"> = {
+		default: "default",
+		secondary: "secondary",
+		destructive: "destructive",
+		tag: "secondary"
+	};
+
+	const shadcnVariant = $derived(variantMap[variant]);
+</script>
+
+<ShadcnBadge variant={shadcnVariant} class={className} {onclick} {...restProps}>
+	{@render children?.()}
+</ShadcnBadge>

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

@@ -0,0 +1,28 @@
+import type { Snippet } from "svelte";
+type BadgeVariant = "default" | "secondary" | "destructive" | "tag";
+/**
+ * Badge component wrapper for displaying small labels, tags, or status indicators
+ *
+ * @prop {BadgeVariant} [variant="default"] - Badge style variant (default|secondary|destructive|tag)
+ * @prop {string} [class] - Additional CSS classes to apply
+ * @prop {Snippet} [children] - Badge content (typically short text)
+ *
+ * @example
+ * <Badge variant="default">New</Badge>
+ *
+ * @example
+ * <Badge variant="destructive">Error</Badge>
+ *
+ * @example
+ * <Badge variant="tag">TypeScript</Badge>
+ */
+interface Props {
+    variant?: BadgeVariant;
+    class?: string;
+    children?: Snippet;
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/ui/components/ui/Button.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { Button as ShadcnButton } from "../primitives/button";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	type ButtonVariant = "primary" | "secondary" | "danger" | "ghost" | "link" | "default" | "outline";
+	type ButtonSize = "sm" | "md" | "lg" | "icon";
+
+	/**
+	 * Button component wrapper around shadcn-svelte Button
+	 *
+	 * @prop {ButtonVariant} [variant="primary"] - Button style variant (primary|secondary|danger|ghost|link)
+	 * @prop {ButtonSize} [size="md"] - Button size (sm|md|lg)
+	 * @prop {boolean} [disabled=false] - Whether button is disabled
+	 * @prop {Function} [onclick] - Click handler function
+	 * @prop {string} [href] - Optional link href (renders as anchor element)
+	 * @prop {string} [class] - Additional CSS classes to apply
+	 * @prop {Snippet} [children] - Button content (text/icons/etc)
+	 *
+	 * @example
+	 * <Button variant="primary" size="lg">Save Changes</Button>
+	 *
+	 * @example
+	 * <Button variant="danger" onclick={() => handleDelete()}>Delete</Button>
+	 *
+	 * @example
+	 * <Button variant="ghost" href="/settings">Settings</Button>
+	 */
+	interface Props extends Omit<HTMLButtonAttributes, "class"> {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		disabled?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		variant = "primary",
+		size = "md",
+		disabled = false,
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+
+	// Map our simplified variants to shadcn variants
+	const variantMap: Record<ButtonVariant, "default" | "secondary" | "destructive" | "ghost" | "link" | "outline"> = {
+		primary: "default",
+		secondary: "secondary",
+		danger: "destructive",
+		ghost: "ghost",
+		link: "link",
+		default: "default",
+		outline: "outline"
+	};
+
+	// Map our size variants to shadcn sizes
+	const sizeMap: Record<ButtonSize, "sm" | "default" | "lg" | "icon"> = {
+		sm: "sm",
+		md: "default",
+		lg: "lg",
+		icon: "icon"
+	};
+
+	const shadcnVariant = $derived(variantMap[variant]);
+	const shadcnSize = $derived(sizeMap[size]);
+</script>
+
+<ShadcnButton
+	variant={shadcnVariant}
+	size={shadcnSize}
+	disabled={disabled}
+	class={className}
+	{...restProps}
+>
+	{@render children?.()}
+</ShadcnButton>

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

@@ -0,0 +1,34 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type ButtonVariant = "primary" | "secondary" | "danger" | "ghost" | "link" | "default" | "outline";
+type ButtonSize = "sm" | "md" | "lg" | "icon";
+/**
+ * Button component wrapper around shadcn-svelte Button
+ *
+ * @prop {ButtonVariant} [variant="primary"] - Button style variant (primary|secondary|danger|ghost|link)
+ * @prop {ButtonSize} [size="md"] - Button size (sm|md|lg)
+ * @prop {boolean} [disabled=false] - Whether button is disabled
+ * @prop {Function} [onclick] - Click handler function
+ * @prop {string} [href] - Optional link href (renders as anchor element)
+ * @prop {string} [class] - Additional CSS classes to apply
+ * @prop {Snippet} [children] - Button content (text/icons/etc)
+ *
+ * @example
+ * <Button variant="primary" size="lg">Save Changes</Button>
+ *
+ * @example
+ * <Button variant="danger" onclick={() => handleDelete()}>Delete</Button>
+ *
+ * @example
+ * <Button variant="ghost" href="/settings">Settings</Button>
+ */
+interface Props extends Omit<HTMLButtonAttributes, "class"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/ui/components/ui/Card.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import {
+		Card as ShadcnCard,
+		CardHeader,
+		CardTitle,
+		CardDescription,
+		CardContent,
+		CardFooter
+	} from "../primitives/card";
+	import type { Snippet } from "svelte";
+	import { cn } from "../../utils";
+
+	/**
+	 * Card component wrapper providing structured layout with header, content, and footer
+	 *
+	 * @prop {string} [title] - Card title (renders in CardHeader with CardTitle)
+	 * @prop {string} [description] - Card description (renders in CardHeader with CardDescription)
+	 * @prop {boolean} [hoverable=false] - Enable hover shadow effect for interactive cards
+	 * @prop {Snippet} [header] - Custom header content (overrides title/description)
+	 * @prop {Snippet} [footer] - Footer content (rendered in CardFooter)
+	 * @prop {Snippet} [children] - Main card content (rendered in CardContent)
+	 * @prop {string} [class] - Additional CSS classes for Card root
+	 *
+	 * @example
+	 * <Card title="Profile" description="Update your profile settings">
+	 *   <p>Card content here</p>
+	 * </Card>
+	 *
+	 * @example
+	 * <Card hoverable>
+	 *   {#snippet header()}
+	 *     <CustomHeader />
+	 *   {/snippet}
+	 *   Content here
+	 * </Card>
+	 *
+	 * @example
+	 * <Card title="Actions">
+	 *   {#snippet footer()}
+	 *     <Button>Save</Button>
+	 *   {/snippet}
+	 *   Form content
+	 * </Card>
+	 */
+	interface Props {
+		title?: string;
+		description?: string;
+		hoverable?: boolean;
+		class?: string;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+		[key: string]: any; // Allow any additional props to be forwarded
+	}
+
+	let {
+		title,
+		description,
+		hoverable = false,
+		class: className,
+		header,
+		footer,
+		children,
+		...restProps
+	}: Props = $props();
+
+	const cardClass = $derived(
+		cn(
+			hoverable && "hover:shadow-lg transition-shadow cursor-pointer",
+			className
+		)
+	);
+</script>
+
+<ShadcnCard class={cardClass} {...restProps}>
+	{#if header || title || description}
+		<CardHeader>
+			{#if header}
+				{@render header()}
+			{:else}
+				{#if title}
+					<CardTitle>{title}</CardTitle>
+				{/if}
+				{#if description}
+					<CardDescription>{description}</CardDescription>
+				{/if}
+			{/if}
+		</CardHeader>
+	{/if}
+
+	{#if children}
+		<CardContent>
+			{@render children()}
+		</CardContent>
+	{/if}
+
+	{#if footer}
+		<CardFooter>
+			{@render footer()}
+		</CardFooter>
+	{/if}
+</ShadcnCard>

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

@@ -0,0 +1,46 @@
+import type { Snippet } from "svelte";
+/**
+ * Card component wrapper providing structured layout with header, content, and footer
+ *
+ * @prop {string} [title] - Card title (renders in CardHeader with CardTitle)
+ * @prop {string} [description] - Card description (renders in CardHeader with CardDescription)
+ * @prop {boolean} [hoverable=false] - Enable hover shadow effect for interactive cards
+ * @prop {Snippet} [header] - Custom header content (overrides title/description)
+ * @prop {Snippet} [footer] - Footer content (rendered in CardFooter)
+ * @prop {Snippet} [children] - Main card content (rendered in CardContent)
+ * @prop {string} [class] - Additional CSS classes for Card root
+ *
+ * @example
+ * <Card title="Profile" description="Update your profile settings">
+ *   <p>Card content here</p>
+ * </Card>
+ *
+ * @example
+ * <Card hoverable>
+ *   {#snippet header()}
+ *     <CustomHeader />
+ *   {/snippet}
+ *   Content here
+ * </Card>
+ *
+ * @example
+ * <Card title="Actions">
+ *   {#snippet footer()}
+ *     <Button>Save</Button>
+ *   {/snippet}
+ *   Form content
+ * </Card>
+ */
+interface Props {
+    title?: string;
+    description?: string;
+    hoverable?: boolean;
+    class?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    [key: string]: any;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/ui/components/ui/CollapsibleSection.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		title: string;
+		defaultOpen?: boolean;
+		children?: Snippet;
+		class?: string;
+	}
+
+	let {
+		title,
+		defaultOpen = false,
+		children,
+		class: className = '',
+		...restProps
+	}: Props = $props();
+
+	let isOpen = $state(defaultOpen);
+
+	function toggle() {
+		isOpen = !isOpen;
+	}
+</script>
+
+<div class="collapsible-section {className}" {...restProps}>
+	<button
+		type="button"
+		class="collapsible-trigger w-full flex items-center justify-between px-4 py-3 text-left font-medium border-b hover:bg-muted/50 transition-colors"
+		onclick={toggle}
+		aria-expanded={isOpen}
+	>
+		<span>{title}</span>
+		<svg
+			class="w-5 h-5 transition-transform {isOpen ? 'rotate-180' : ''}"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+		</svg>
+	</button>
+
+	{#if isOpen}
+		<div class="collapsible-content px-4 py-4">
+			{@render children?.()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.collapsible-section {
+		border: 1px solid hsl(var(--border));
+		border-radius: var(--radius);
+		overflow: hidden;
+	}
+
+	.collapsible-trigger {
+		background: hsl(var(--background));
+	}
+
+	.collapsible-content {
+		background: hsl(var(--card));
+	}
+</style>

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

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

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

@@ -6,7 +6,7 @@
 		DialogTitle,
 		DialogDescription,
 		DialogFooter
-	} from "./dialog";
+	} from "../primitives/dialog";
 	import type { Snippet } from "svelte";
 
 	/**

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { Input as ShadcnInput } from "../primitives/input";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { cn } from "../../utils";
+
+	/**
+	 * 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;
+	}
+
+	let {
+		label,
+		error,
+		value = $bindable(""),
+		placeholder,
+		type = "text",
+		required = false,
+		disabled = false,
+		class: className,
+		...restProps
+	}: Props = $props();
+
+	const inputClass = $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}
+
+	<ShadcnInput
+		bind:value
+		{type}
+		{placeholder}
+		{required}
+		{disabled}
+		class={inputClass}
+		{...restProps}
+	/>
+
+	{#if error}
+		<p class="text-sm text-destructive">{error}</p>
+	{/if}
+</div>