@autumnsgrove/groveengine 0.1.0

package/dist/components/ui/Card.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import {
+		Card as ShadcnCard,
+		CardHeader,
+		CardTitle,
+		CardDescription,
+		CardContent,
+		CardFooter
+	} from "./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/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/components/ui/Dialog.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import {
+		Dialog as ShadcnDialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogDescription,
+		DialogFooter
+	} from "./dialog";
+	import type { Snippet } from "svelte";
+
+	/**
+	 * Dialog (modal) component wrapper for displaying overlay content
+	 *
+	 * @prop {boolean} [open=false] - Dialog open state (bindable for two-way binding)
+	 * @prop {string} [title] - Dialog title (renders in DialogHeader)
+	 * @prop {string} [description] - Dialog description (renders in DialogHeader)
+	 * @prop {Snippet} [header] - Custom header content (overrides title/description)
+	 * @prop {Snippet} [footer] - Footer content (rendered in DialogFooter)
+	 * @prop {Snippet} [children] - Main dialog content
+	 *
+	 * @example
+	 * <Dialog bind:open={isOpen} title="Confirm Delete" description="This action cannot be undone">
+	 *   <p>Are you sure?</p>
+	 *   {#snippet footer()}
+	 *     <Button onclick={() => isOpen = false}>Cancel</Button>
+	 *   {/snippet}
+	 * </Dialog>
+	 *
+	 * @example
+	 * <Dialog bind:open={showProfile}>
+	 *   {#snippet header()}
+	 *     <CustomHeader />
+	 *   {/snippet}
+	 *   <ProfileForm />
+	 * </Dialog>
+	 *
+	 * @example
+	 * <Dialog bind:open={modalOpen} title="Settings">
+	 *   <SettingsPanel />
+	 * </Dialog>
+	 */
+	interface Props {
+		open?: boolean;
+		title?: string;
+		description?: string;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		header,
+		footer,
+		children
+	}: Props = $props();
+</script>
+
+<ShadcnDialog bind:open>
+	<DialogContent>
+		{#if header || title || description}
+			<DialogHeader>
+				{#if header}
+					{@render header()}
+				{:else}
+					{#if title}
+						<DialogTitle>{title}</DialogTitle>
+					{/if}
+					{#if description}
+						<DialogDescription>{description}</DialogDescription>
+					{/if}
+				{/if}
+			</DialogHeader>
+		{/if}
+
+		{#if children}
+			<div class="py-4">
+				{@render children()}
+			</div>
+		{/if}
+
+		{#if footer}
+			<DialogFooter>
+				{@render footer()}
+			</DialogFooter>
+		{/if}
+	</DialogContent>
+</ShadcnDialog>

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

@@ -0,0 +1,43 @@
+import type { Snippet } from "svelte";
+/**
+ * Dialog (modal) component wrapper for displaying overlay content
+ *
+ * @prop {boolean} [open=false] - Dialog open state (bindable for two-way binding)
+ * @prop {string} [title] - Dialog title (renders in DialogHeader)
+ * @prop {string} [description] - Dialog description (renders in DialogHeader)
+ * @prop {Snippet} [header] - Custom header content (overrides title/description)
+ * @prop {Snippet} [footer] - Footer content (rendered in DialogFooter)
+ * @prop {Snippet} [children] - Main dialog content
+ *
+ * @example
+ * <Dialog bind:open={isOpen} title="Confirm Delete" description="This action cannot be undone">
+ *   <p>Are you sure?</p>
+ *   {#snippet footer()}
+ *     <Button onclick={() => isOpen = false}>Cancel</Button>
+ *   {/snippet}
+ * </Dialog>
+ *
+ * @example
+ * <Dialog bind:open={showProfile}>
+ *   {#snippet header()}
+ *     <CustomHeader />
+ *   {/snippet}
+ *   <ProfileForm />
+ * </Dialog>
+ *
+ * @example
+ * <Dialog bind:open={modalOpen} title="Settings">
+ *   <SettingsPanel />
+ * </Dialog>
+ */
+interface Props {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+}
+declare const Dialog: import("svelte").Component<Props, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/ui/Input.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { Input as ShadcnInput } from "./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>

package/dist/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/Select.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import {
+		Select as ShadcnSelect,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from "./select";
+	import type { Snippet } from "svelte";
+
+	interface Option {
+		value: string;
+		label: string;
+		disabled?: boolean;
+	}
+
+	/**
+	 * Select component wrapper providing dropdown selection with options
+	 *
+	 * @prop {string} [value] - Selected value (bindable for two-way binding)
+	 * @prop {Option[]} options - Array of options with value, label, and optional disabled flag
+	 * @prop {string} [placeholder="Select an option"] - Placeholder text when no value selected
+	 * @prop {boolean} [disabled=false] - Whether select is disabled
+	 * @prop {string} [class] - Additional CSS classes for trigger element
+	 *
+	 * @example
+	 * <Select bind:value={selectedValue} options={[
+	 *   { value: "opt1", label: "Option 1" },
+	 *   { value: "opt2", label: "Option 2", disabled: true }
+	 * ]} />
+	 *
+	 * @example
+	 * <Select bind:value={theme} placeholder="Choose theme" options={themeOptions} />
+	 *
+	 * @example
+	 * <Select bind:value={country} options={countries} disabled={loading} />
+	 */
+	interface Props {
+		value?: string | undefined;
+		options: Option[];
+		placeholder?: string;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(undefined),
+		options,
+		placeholder = "Select an option",
+		disabled = false,
+		class: className
+	}: Props = $props();
+
+	const selectedLabel = $derived(
+		value ? options.find(opt => opt.value === value)?.label ?? placeholder : placeholder
+	);
+</script>
+
+<ShadcnSelect bind:value {disabled}>
+	<SelectTrigger class={className}>
+		{selectedLabel}
+	</SelectTrigger>
+	<SelectContent>
+		{#each options as option (option.value)}
+			<SelectItem value={option.value} disabled={option.disabled ?? false}>
+				{option.label}
+			</SelectItem>
+		{/each}
+	</SelectContent>
+</ShadcnSelect>

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

@@ -0,0 +1,36 @@
+interface Option {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Select component wrapper providing dropdown selection with options
+ *
+ * @prop {string} [value] - Selected value (bindable for two-way binding)
+ * @prop {Option[]} options - Array of options with value, label, and optional disabled flag
+ * @prop {string} [placeholder="Select an option"] - Placeholder text when no value selected
+ * @prop {boolean} [disabled=false] - Whether select is disabled
+ * @prop {string} [class] - Additional CSS classes for trigger element
+ *
+ * @example
+ * <Select bind:value={selectedValue} options={[
+ *   { value: "opt1", label: "Option 1" },
+ *   { value: "opt2", label: "Option 2", disabled: true }
+ * ]} />
+ *
+ * @example
+ * <Select bind:value={theme} placeholder="Choose theme" options={themeOptions} />
+ *
+ * @example
+ * <Select bind:value={country} options={countries} disabled={loading} />
+ */
+interface Props {
+    value?: string | undefined;
+    options: Option[];
+    placeholder?: string;
+    disabled?: boolean;
+    class?: string;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/ui/Sheet.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import {
+		Sheet as ShadcnSheet,
+		SheetTrigger,
+		SheetClose,
+		SheetContent,
+		SheetHeader,
+		SheetTitle,
+		SheetDescription,
+		SheetFooter
+	} from "./sheet";
+	import type { Snippet } from "svelte";
+
+	/**
+	 * Sheet component wrapper for slide-out panels (drawers) from screen edges
+	 *
+	 * @prop {boolean} [open=false] - Sheet open state (bindable for two-way binding)
+	 * @prop {string} [side="right"] - Which edge sheet slides from (left|right|top|bottom)
+	 * @prop {string} [title] - Sheet title (renders in SheetHeader)
+	 * @prop {string} [description] - Sheet description (renders in SheetHeader)
+	 * @prop {Snippet} [trigger] - Trigger element to open sheet (renders in SheetTrigger)
+	 * @prop {Snippet} [footer] - Footer content (rendered in SheetFooter)
+	 * @prop {Snippet} [children] - Main sheet content
+	 *
+	 * @example
+	 * <Sheet bind:open={isOpen} side="right" title="Settings">
+	 *   <SettingsForm />
+	 *   {#snippet footer()}
+	 *     <Button onclick={() => isOpen = false}>Close</Button>
+	 *   {/snippet}
+	 * </Sheet>
+	 *
+	 * @example
+	 * <Sheet side="left">
+	 *   {#snippet trigger()}
+	 *     <Button>Open Menu</Button>
+	 *   {/snippet}
+	 *   <Navigation />
+	 * </Sheet>
+	 *
+	 * @example
+	 * <Sheet bind:open={showCart} side="right" title="Shopping Cart" description="Review your items">
+	 *   <CartItems />
+	 * </Sheet>
+	 */
+	interface Props {
+		open?: boolean;
+		side?: "left" | "right" | "top" | "bottom";
+		title?: string;
+		description?: string;
+		trigger?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		side = "right",
+		title,
+		description,
+		trigger,
+		footer,
+		children
+	}: Props = $props();
+</script>
+
+<ShadcnSheet bind:open>
+	{#if trigger}
+		<SheetTrigger>
+			{@render trigger()}
+		</SheetTrigger>
+	{/if}
+
+	<SheetContent {side}>
+		{#if title || description}
+			<SheetHeader>
+				{#if title}
+					<SheetTitle>{title}</SheetTitle>
+				{/if}
+				{#if description}
+					<SheetDescription>{description}</SheetDescription>
+				{/if}
+			</SheetHeader>
+		{/if}
+
+		{#if children}
+			<div class="py-4">
+				{@render children()}
+			</div>
+		{/if}
+
+		{#if footer}
+			<SheetFooter>
+				{@render footer()}
+			</SheetFooter>
+		{/if}
+	</SheetContent>
+</ShadcnSheet>

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

@@ -0,0 +1,45 @@
+import type { Snippet } from "svelte";
+/**
+ * Sheet component wrapper for slide-out panels (drawers) from screen edges
+ *
+ * @prop {boolean} [open=false] - Sheet open state (bindable for two-way binding)
+ * @prop {string} [side="right"] - Which edge sheet slides from (left|right|top|bottom)
+ * @prop {string} [title] - Sheet title (renders in SheetHeader)
+ * @prop {string} [description] - Sheet description (renders in SheetHeader)
+ * @prop {Snippet} [trigger] - Trigger element to open sheet (renders in SheetTrigger)
+ * @prop {Snippet} [footer] - Footer content (rendered in SheetFooter)
+ * @prop {Snippet} [children] - Main sheet content
+ *
+ * @example
+ * <Sheet bind:open={isOpen} side="right" title="Settings">
+ *   <SettingsForm />
+ *   {#snippet footer()}
+ *     <Button onclick={() => isOpen = false}>Close</Button>
+ *   {/snippet}
+ * </Sheet>
+ *
+ * @example
+ * <Sheet side="left">
+ *   {#snippet trigger()}
+ *     <Button>Open Menu</Button>
+ *   {/snippet}
+ *   <Navigation />
+ * </Sheet>
+ *
+ * @example
+ * <Sheet bind:open={showCart} side="right" title="Shopping Cart" description="Review your items">
+ *   <CartItems />
+ * </Sheet>
+ */
+interface Props {
+    open?: boolean;
+    side?: "left" | "right" | "top" | "bottom";
+    title?: string;
+    description?: string;
+    trigger?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+}
+declare const Sheet: import("svelte").Component<Props, {}, "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/components/ui/Skeleton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Skeleton as ShadcnSkeleton } from "./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} />