@autumnsgrove/groveengine 0.6.4 → 0.7.0

package/dist/ui/components/ui/Glass.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../utils";
+
+	/**
+	 * Glass component for creating glassmorphism effects
+	 *
+	 * A reusable component that provides translucent, frosted-glass effects
+	 * perfect for overlays, cards, navbars, and text containers while
+	 * maintaining visibility of background elements.
+	 *
+	 * @example Basic usage
+	 * ```svelte
+	 * <Glass variant="card">
+	 *   <p>Content with glass background</p>
+	 * </Glass>
+	 * ```
+	 *
+	 * @example As a navbar
+	 * ```svelte
+	 * <Glass variant="surface" as="header" class="sticky top-0">
+	 *   <nav>...</nav>
+	 * </Glass>
+	 * ```
+	 *
+	 * @example Accent tint for callouts
+	 * ```svelte
+	 * <Glass variant="accent" intensity="light" class="p-6 rounded-xl">
+	 *   <p>Important message here</p>
+	 * </Glass>
+	 * ```
+	 */
+
+	type Variant =
+		| "surface"   // Headers, navbars - high opacity, subtle blur
+		| "overlay"   // Modal backdrops - dark, medium blur
+		| "card"      // Content cards - medium opacity, clean look
+		| "tint"      // Text containers - light background for readability
+		| "accent"    // Accent-colored glass for callouts/highlights
+		| "muted";    // Subtle background, barely visible
+
+	type Intensity =
+		| "none"      // No blur (just transparency)
+		| "light"     // backdrop-blur-sm (4px)
+		| "medium"    // backdrop-blur (8px)
+		| "strong";   // backdrop-blur-md (12px)
+
+	type Element = "div" | "section" | "article" | "aside" | "header" | "footer" | "nav" | "main";
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		/** Visual style variant */
+		variant?: Variant;
+		/** Blur intensity */
+		intensity?: Intensity;
+		/** HTML element to render */
+		as?: Element;
+		/** Include subtle border */
+		border?: boolean;
+		/** Include shadow */
+		shadow?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Content */
+		children?: Snippet;
+	}
+
+	let {
+		variant = "card",
+		intensity = "light",
+		as: element = "div",
+		border = true,
+		shadow = false,
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+
+	// Background colors per variant - warm grove tones, translucent for glass effect
+	const variantClasses: Record<Variant, string> = {
+		// High opacity for sticky headers/navbars (uses background color)
+		surface: "bg-background/90 dark:bg-background/90",
+
+		// Dark overlay for modals/sheets
+		overlay: "bg-black/50 dark:bg-black/60",
+
+		// Medium opacity for content cards - translucent with grove warmth
+		card: "bg-white/60 dark:bg-emerald-950/25",
+
+		// Light tint for text readability
+		tint: "bg-white/50 dark:bg-emerald-950/20",
+
+		// Accent-colored glass for highlights/callouts
+		accent: "bg-accent/25 dark:bg-accent/15",
+
+		// Barely visible, very subtle
+		muted: "bg-white/30 dark:bg-emerald-950/15"
+	};
+
+	// Blur intensity classes - default to medium blur for true glass effect
+	const intensityClasses: Record<Intensity, string> = {
+		none: "",
+		light: "backdrop-blur",         // 8px
+		medium: "backdrop-blur-md",     // 12px
+		strong: "backdrop-blur-lg"      // 16px
+	};
+
+	// Border classes per variant - subtle borders that complement the glass
+	const borderClasses: Record<Variant, string> = {
+		surface: "border-border",
+		overlay: "border-white/10",
+		card: "border-white/40 dark:border-emerald-800/25",
+		tint: "border-white/30 dark:border-emerald-800/20",
+		accent: "border-accent/30 dark:border-accent/20",
+		muted: "border-white/20 dark:border-emerald-800/15"
+	};
+
+	// Shadow classes
+	const shadowClasses: Record<Variant, string> = {
+		surface: "shadow-sm",
+		overlay: "shadow-2xl",
+		card: "shadow-sm",
+		tint: "shadow-sm",
+		accent: "shadow-sm",
+		muted: ""
+	};
+
+	const computedClass = $derived(
+		cn(
+			variantClasses[variant],
+			intensityClasses[intensity],
+			border && `border ${borderClasses[variant]}`,
+			shadow && shadowClasses[variant],
+			className
+		)
+	);
+</script>
+
+<!--
+  Glassmorphism component for Grove
+
+  CSS Properties used:
+  - backdrop-filter: blur() - Creates the frosted glass effect
+  - Background with alpha - Semi-transparent backgrounds (e.g., bg-white/80)
+  - Border with alpha - Subtle borders that complement the glass effect
+
+  Browser Support:
+  - backdrop-filter is supported in all modern browsers
+  - Falls back gracefully to solid backgrounds in older browsers
+-->
+
+<svelte:element
+	this={element}
+	class={computedClass}
+	{...restProps}
+>
+	{#if children}{@render children()}{/if}
+</svelte:element>

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

@@ -0,0 +1,52 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * Glass component for creating glassmorphism effects
+ *
+ * A reusable component that provides translucent, frosted-glass effects
+ * perfect for overlays, cards, navbars, and text containers while
+ * maintaining visibility of background elements.
+ *
+ * @example Basic usage
+ * ```svelte
+ * <Glass variant="card">
+ *   <p>Content with glass background</p>
+ * </Glass>
+ * ```
+ *
+ * @example As a navbar
+ * ```svelte
+ * <Glass variant="surface" as="header" class="sticky top-0">
+ *   <nav>...</nav>
+ * </Glass>
+ * ```
+ *
+ * @example Accent tint for callouts
+ * ```svelte
+ * <Glass variant="accent" intensity="light" class="p-6 rounded-xl">
+ *   <p>Important message here</p>
+ * </Glass>
+ * ```
+ */
+type Variant = "surface" | "overlay" | "card" | "tint" | "accent" | "muted";
+type Intensity = "none" | "light" | "medium" | "strong";
+type Element = "div" | "section" | "article" | "aside" | "header" | "footer" | "nav" | "main";
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Visual style variant */
+    variant?: Variant;
+    /** Blur intensity */
+    intensity?: Intensity;
+    /** HTML element to render */
+    as?: Element;
+    /** Include subtle border */
+    border?: boolean;
+    /** Include shadow */
+    shadow?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Content */
+    children?: Snippet;
+}
+declare const Glass: import("svelte").Component<Props, {}, "">;
+type Glass = ReturnType<typeof Glass>;
+export default Glass;

package/dist/ui/components/ui/GlassButton.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
+	import { cn } from "../../utils";
+
+	/**
+	 * GlassButton - A button with glassmorphism styling
+	 *
+	 * Beautiful translucent buttons with backdrop blur effects.
+	 * Perfect for floating actions, overlays, and modern UI designs.
+	 *
+	 * @example Basic glass button
+	 * ```svelte
+	 * <GlassButton>Click me</GlassButton>
+	 * ```
+	 *
+	 * @example Accent glass button
+	 * ```svelte
+	 * <GlassButton variant="accent">Subscribe</GlassButton>
+	 * ```
+	 *
+	 * @example Ghost glass with icon
+	 * ```svelte
+	 * <GlassButton variant="ghost" size="icon">
+	 *   <X class="w-4 h-4" />
+	 * </GlassButton>
+	 * ```
+	 */
+
+	type GlassVariant =
+		| "default"   // Light translucent background
+		| "accent"    // Accent-colored glass
+		| "dark"      // Dark translucent background
+		| "ghost"     // No background until hover
+		| "outline";  // Transparent with glass border
+
+	type ButtonSize = "sm" | "md" | "lg" | "icon";
+
+	interface Props extends Omit<HTMLButtonAttributes, "class"> {
+		variant?: GlassVariant;
+		size?: ButtonSize;
+		disabled?: boolean;
+		href?: string;
+		class?: string;
+		children?: Snippet;
+		ref?: HTMLButtonElement | HTMLAnchorElement | null;
+	}
+
+	let {
+		variant = "default",
+		size = "md",
+		disabled = false,
+		href,
+		class: className,
+		children,
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: Props = $props();
+
+	// Base styles shared by all variants - medium blur for glass effect
+	const baseClasses = `
+		inline-flex items-center justify-center gap-2
+		font-medium rounded-lg
+		transition-all duration-200
+		backdrop-blur-md
+		outline-none
+		focus-visible:ring-2 focus-visible:ring-accent/50 focus-visible:ring-offset-2
+		disabled:opacity-50 disabled:pointer-events-none
+		[&_svg]:w-4 [&_svg]:h-4 [&_svg]:shrink-0
+	`.trim().replace(/\s+/g, ' ');
+
+	// Variant-specific styles - warm grove tones with true glass transparency
+	const variantClasses: Record<GlassVariant, string> = {
+		default: `
+			bg-white/60 dark:bg-emerald-950/25
+			border border-white/40 dark:border-emerald-800/25
+			text-foreground
+			hover:bg-white/75 dark:hover:bg-emerald-950/35
+			hover:border-white/50 dark:hover:border-emerald-700/30
+			shadow-sm hover:shadow-md
+		`.trim().replace(/\s+/g, ' '),
+
+		accent: `
+			bg-accent/70 dark:bg-accent/60
+			border border-accent/40 dark:border-accent/30
+			text-white
+			hover:bg-accent/85 dark:hover:bg-accent/75
+			hover:border-accent/60 dark:hover:border-accent/50
+			shadow-sm hover:shadow-md shadow-accent/20
+		`.trim().replace(/\s+/g, ' '),
+
+		dark: `
+			bg-slate-900/50 dark:bg-slate-950/50
+			border border-slate-700/30 dark:border-slate-600/30
+			text-white
+			hover:bg-slate-900/65 dark:hover:bg-slate-950/65
+			hover:border-slate-600/40 dark:hover:border-slate-500/35
+			shadow-md hover:shadow-lg
+		`.trim().replace(/\s+/g, ' '),
+
+		ghost: `
+			bg-transparent
+			border border-transparent
+			text-foreground
+			hover:bg-white/40 dark:hover:bg-emerald-950/25
+			hover:border-white/25 dark:hover:border-emerald-800/20
+		`.trim().replace(/\s+/g, ' '),
+
+		outline: `
+			bg-transparent
+			border border-white/40 dark:border-emerald-800/30
+			text-foreground
+			hover:bg-white/25 dark:hover:bg-emerald-950/20
+			hover:border-white/55 dark:hover:border-emerald-700/40
+		`.trim().replace(/\s+/g, ' ')
+	};
+
+	// Size-specific styles
+	const sizeClasses: Record<ButtonSize, string> = {
+		sm: "h-8 px-3 text-sm",
+		md: "h-10 px-4 text-sm",
+		lg: "h-12 px-6 text-base",
+		icon: "h-10 w-10 p-0"
+	};
+
+	const computedClass = $derived(
+		cn(
+			baseClasses,
+			variantClasses[variant],
+			sizeClasses[size],
+			className
+		)
+	);
+</script>
+
+{#if href && !disabled}
+	<a
+		bind:this={ref}
+		{href}
+		class={computedClass}
+		aria-disabled={disabled}
+		{...restProps}
+	>
+		{#if children}{@render children()}{/if}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		{type}
+		{disabled}
+		class={computedClass}
+		{...restProps}
+	>
+		{#if children}{@render children()}{/if}
+	</button>
+{/if}

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

@@ -0,0 +1,39 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+/**
+ * GlassButton - A button with glassmorphism styling
+ *
+ * Beautiful translucent buttons with backdrop blur effects.
+ * Perfect for floating actions, overlays, and modern UI designs.
+ *
+ * @example Basic glass button
+ * ```svelte
+ * <GlassButton>Click me</GlassButton>
+ * ```
+ *
+ * @example Accent glass button
+ * ```svelte
+ * <GlassButton variant="accent">Subscribe</GlassButton>
+ * ```
+ *
+ * @example Ghost glass with icon
+ * ```svelte
+ * <GlassButton variant="ghost" size="icon">
+ *   <X class="w-4 h-4" />
+ * </GlassButton>
+ * ```
+ */
+type GlassVariant = "default" | "accent" | "dark" | "ghost" | "outline";
+type ButtonSize = "sm" | "md" | "lg" | "icon";
+interface Props extends Omit<HTMLButtonAttributes, "class"> {
+    variant?: GlassVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    href?: string;
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLButtonElement | HTMLAnchorElement | null;
+}
+declare const GlassButton: import("svelte").Component<Props, {}, "ref">;
+type GlassButton = ReturnType<typeof GlassButton>;
+export default GlassButton;

package/dist/ui/components/ui/GlassCard.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../utils";
+
+	/**
+	 * GlassCard - A card component with glassmorphism styling
+	 *
+	 * Beautiful translucent cards with backdrop blur effects.
+	 * Includes optional header, footer, and hoverable state.
+	 *
+	 * @example Basic glass card
+	 * ```svelte
+	 * <GlassCard title="Settings" description="Manage your preferences">
+	 *   <p>Card content here</p>
+	 * </GlassCard>
+	 * ```
+	 *
+	 * @example Accent card with footer
+	 * ```svelte
+	 * <GlassCard variant="accent" hoverable>
+	 *   {#snippet header()}<CustomHeader />{/snippet}
+	 *   Content here
+	 *   {#snippet footer()}<Button>Save</Button>{/snippet}
+	 * </GlassCard>
+	 * ```
+	 */
+
+	type GlassVariant =
+		| "default"   // Light translucent background
+		| "accent"    // Accent-colored glass
+		| "dark"      // Dark translucent background
+		| "muted"     // Very subtle, barely visible
+		| "frosted";  // Stronger blur effect, more opaque
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+		variant?: GlassVariant;
+		title?: string;
+		description?: string;
+		hoverable?: boolean;
+		border?: boolean;
+		class?: string;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		variant = "default",
+		title,
+		description,
+		hoverable = false,
+		border = true,
+		class: className,
+		header,
+		footer,
+		children,
+		...restProps
+	}: Props = $props();
+
+	// Variant-specific styles - warm grove tones with true glass transparency
+	const variantClasses: Record<GlassVariant, string> = {
+		default: `
+			bg-white/60 dark:bg-emerald-950/25
+			backdrop-blur-md
+		`.trim().replace(/\s+/g, ' '),
+
+		accent: `
+			bg-accent/20 dark:bg-accent/15
+			backdrop-blur-md
+		`.trim().replace(/\s+/g, ' '),
+
+		dark: `
+			bg-slate-900/40 dark:bg-slate-950/40
+			backdrop-blur-md
+			text-white
+		`.trim().replace(/\s+/g, ' '),
+
+		muted: `
+			bg-white/30 dark:bg-emerald-950/15
+			backdrop-blur
+		`.trim().replace(/\s+/g, ' '),
+
+		frosted: `
+			bg-white/70 dark:bg-emerald-950/35
+			backdrop-blur-lg
+		`.trim().replace(/\s+/g, ' ')
+	};
+
+	// Border colors per variant - subtle, warm borders
+	const borderClasses: Record<GlassVariant, string> = {
+		default: "border-white/40 dark:border-emerald-800/25",
+		accent: "border-accent/30 dark:border-accent/20",
+		dark: "border-slate-700/30 dark:border-slate-600/30",
+		muted: "border-white/20 dark:border-emerald-800/15",
+		frosted: "border-white/50 dark:border-emerald-800/30"
+	};
+
+	// Hover styles - slightly more visible on hover
+	const hoverClasses: Record<GlassVariant, string> = {
+		default: "hover:bg-white/70 dark:hover:bg-emerald-950/35 hover:shadow-lg hover:border-white/50 dark:hover:border-emerald-700/30",
+		accent: "hover:bg-accent/30 dark:hover:bg-accent/25 hover:shadow-lg hover:shadow-accent/10 hover:border-accent/40",
+		dark: "hover:bg-slate-900/50 dark:hover:bg-slate-950/50 hover:shadow-xl hover:border-slate-600/40",
+		muted: "hover:bg-white/40 dark:hover:bg-emerald-950/25 hover:shadow-md hover:border-white/30",
+		frosted: "hover:bg-white/80 dark:hover:bg-emerald-950/45 hover:shadow-lg hover:border-white/60"
+	};
+
+	const computedClass = $derived(
+		cn(
+			"rounded-xl transition-all duration-200",
+			variantClasses[variant],
+			border && `border ${borderClasses[variant]}`,
+			hoverable && `cursor-pointer ${hoverClasses[variant]}`,
+			"shadow-sm",
+			className
+		)
+	);
+
+	// Text color adjustments for dark variant
+	const titleClass = $derived(
+		variant === "dark"
+			? "text-white"
+			: "text-foreground"
+	);
+
+	const descriptionClass = $derived(
+		variant === "dark"
+			? "text-slate-300"
+			: "text-muted-foreground"
+	);
+</script>
+
+<div class={computedClass} {...restProps}>
+	{#if header || title || description}
+		<div class="px-6 py-4 {(children || footer) ? 'border-b border-inherit' : ''}">
+			{#if header}
+				{@render header()}
+			{:else}
+				{#if title}
+					<h3 class="text-lg font-semibold {titleClass}">{title}</h3>
+				{/if}
+				{#if description}
+					<p class="text-sm {descriptionClass} mt-1">{description}</p>
+				{/if}
+			{/if}
+		</div>
+	{/if}
+
+	{#if children}
+		<div class="px-6 py-4">
+			{@render children()}
+		</div>
+	{/if}
+
+	{#if footer}
+		<div class="px-6 py-4 border-t border-inherit">
+			{@render footer()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,39 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * GlassCard - A card component with glassmorphism styling
+ *
+ * Beautiful translucent cards with backdrop blur effects.
+ * Includes optional header, footer, and hoverable state.
+ *
+ * @example Basic glass card
+ * ```svelte
+ * <GlassCard title="Settings" description="Manage your preferences">
+ *   <p>Card content here</p>
+ * </GlassCard>
+ * ```
+ *
+ * @example Accent card with footer
+ * ```svelte
+ * <GlassCard variant="accent" hoverable>
+ *   {#snippet header()}<CustomHeader />{/snippet}
+ *   Content here
+ *   {#snippet footer()}<Button>Save</Button>{/snippet}
+ * </GlassCard>
+ * ```
+ */
+type GlassVariant = "default" | "accent" | "dark" | "muted" | "frosted";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    variant?: GlassVariant;
+    title?: string;
+    description?: string;
+    hoverable?: boolean;
+    border?: boolean;
+    class?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+}
+declare const GlassCard: import("svelte").Component<Props, {}, "">;
+type GlassCard = ReturnType<typeof GlassCard>;
+export default GlassCard;