@autumnsgrove/groveengine 0.6.5 → 0.8.0

package/dist/ui/components/nature/weather/Snowflake.svelte

@@ -0,0 +1,99 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { winter } from '../palette';
+
+	type SnowflakeVariant = 'crystal' | 'simple' | 'star' | 'delicate' | 'dot';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		variant?: SnowflakeVariant;
+		/** Opacity for depth effect */
+		opacity?: number;
+	}
+
+	let {
+		class: className = 'w-4 h-4',
+		color = winter.snow,
+		variant = 'crystal',
+		opacity = 1
+	}: Props = $props();
+</script>
+
+<!-- Snowflake - various crystalline shapes -->
+<svg
+	class={className}
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 40 40"
+	style="opacity: {opacity};"
+>
+	{#if variant === 'crystal'}
+		<!-- Classic 6-pointed crystal snowflake -->
+		<g fill="none" stroke={color} stroke-width="1.5" stroke-linecap="round">
+			<!-- Main axes -->
+			<line x1="20" y1="4" x2="20" y2="36" />
+			<line x1="6" y1="12" x2="34" y2="28" />
+			<line x1="6" y1="28" x2="34" y2="12" />
+			<!-- Branch details on vertical axis -->
+			<line x1="20" y1="8" x2="16" y2="12" />
+			<line x1="20" y1="8" x2="24" y2="12" />
+			<line x1="20" y1="32" x2="16" y2="28" />
+			<line x1="20" y1="32" x2="24" y2="28" />
+			<!-- Branch details on diagonal axes -->
+			<line x1="10" y1="14" x2="12" y2="10" />
+			<line x1="10" y1="14" x2="8" y2="18" />
+			<line x1="30" y1="26" x2="28" y2="30" />
+			<line x1="30" y1="26" x2="32" y2="22" />
+			<line x1="10" y1="26" x2="12" y2="30" />
+			<line x1="10" y1="26" x2="8" y2="22" />
+			<line x1="30" y1="14" x2="28" y2="10" />
+			<line x1="30" y1="14" x2="32" y2="18" />
+		</g>
+		<!-- Center crystal -->
+		<circle fill={color} cx="20" cy="20" r="2" />
+	{:else if variant === 'simple'}
+		<!-- Simple 6-pointed star snowflake -->
+		<g fill="none" stroke={color} stroke-width="2" stroke-linecap="round">
+			<line x1="20" y1="5" x2="20" y2="35" />
+			<line x1="7" y1="12.5" x2="33" y2="27.5" />
+			<line x1="7" y1="27.5" x2="33" y2="12.5" />
+		</g>
+		<circle fill={color} cx="20" cy="20" r="3" />
+	{:else if variant === 'star'}
+		<!-- Decorative star snowflake with filled points -->
+		<polygon
+			fill={color}
+			points="20,2 22,15 35,12 25,20 35,28 22,25 20,38 18,25 5,28 15,20 5,12 18,15"
+		/>
+		<circle fill={color} cx="20" cy="20" r="4" opacity="0.8" />
+	{:else if variant === 'delicate'}
+		<!-- Delicate branching snowflake -->
+		<g fill="none" stroke={color} stroke-width="1" stroke-linecap="round">
+			<!-- Main spokes -->
+			<line x1="20" y1="4" x2="20" y2="36" />
+			<line x1="6" y1="12" x2="34" y2="28" />
+			<line x1="6" y1="28" x2="34" y2="12" />
+			<!-- Delicate inner branches -->
+			<line x1="20" y1="10" x2="14" y2="13" />
+			<line x1="20" y1="10" x2="26" y2="13" />
+			<line x1="20" y1="30" x2="14" y2="27" />
+			<line x1="20" y1="30" x2="26" y2="27" />
+			<!-- Tiny end crystals -->
+			<circle cx="20" cy="4" r="1.5" fill={color} />
+			<circle cx="20" cy="36" r="1.5" fill={color} />
+			<circle cx="6" cy="12" r="1.5" fill={color} />
+			<circle cx="34" cy="28" r="1.5" fill={color} />
+			<circle cx="6" cy="28" r="1.5" fill={color} />
+			<circle cx="34" cy="12" r="1.5" fill={color} />
+		</g>
+		<circle fill={color} cx="20" cy="20" r="2.5" />
+	{:else if variant === 'dot'}
+		<!-- Simple snow dot/orb (for distant flakes) -->
+		<circle fill={color} cx="20" cy="20" r="8" />
+		<circle fill="white" cx="17" cy="17" r="2" opacity="0.6" />
+	{/if}
+</svg>

package/dist/ui/components/nature/weather/Snowflake.svelte.d.ts

@@ -0,0 +1,11 @@
+type SnowflakeVariant = 'crystal' | 'simple' | 'star' | 'delicate' | 'dot';
+interface Props {
+    class?: string;
+    color?: string;
+    variant?: SnowflakeVariant;
+    /** Opacity for depth effect */
+    opacity?: number;
+}
+declare const Snowflake: import("svelte").Component<Props, {}, "">;
+type Snowflake = ReturnType<typeof Snowflake>;
+export default Snowflake;

package/dist/ui/components/nature/weather/SnowflakeFalling.svelte

@@ -0,0 +1,162 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { winter } from '../palette';
+	import Snowflake from './Snowflake.svelte';
+	import { browser } from '$app/environment';
+
+	type SnowflakeVariant = 'crystal' | 'simple' | 'star' | 'delicate' | 'dot';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		variant?: SnowflakeVariant;
+		/** Fall animation duration in seconds */
+		duration?: number;
+		/** Animation delay in seconds */
+		delay?: number;
+		/** Horizontal drift amount in vw units */
+		drift?: number;
+		/** Vertical fall distance in vh units */
+		fallDistance?: number;
+		/** Enable falling animation */
+		animate?: boolean;
+		/** Random seed for rotation variation */
+		seed?: number;
+		/** Opacity for depth effect */
+		opacity?: number;
+	}
+
+	let {
+		class: className = 'w-4 h-4',
+		color = winter.snow,
+		variant = 'crystal',
+		duration = 12,
+		delay = 0,
+		drift = 0,
+		fallDistance = 100,
+		animate = true,
+		seed = 0,
+		opacity = 1
+	}: Props = $props();
+
+	// Deterministic rotation based on seed - gentle swaying for snow
+	const initialRotation = $derived((seed * 37) % 360);
+	const rotationDirection = $derived(seed % 2 === 0 ? 1 : -1);
+	const rotationAmount = $derived(180 + (seed % 180)); // 180-360 degrees total rotation - gentler than petals
+
+	// Gentle horizontal sway - snow drifts more subtly than petals
+	const swayAmplitude = $derived(40 + (seed % 60)); // 40-100px horizontal sway - lighter than petals
+	const swayFrequency = $derived(1 + (seed % 3)); // 1-3 complete waves during fall - fewer than petals
+
+	// Unique animation name to prevent conflicts
+	const animId = $derived(`snow-${seed}`);
+
+	// Inject dynamic keyframes at runtime
+	$effect(() => {
+		if (!browser || !animate) return;
+
+		const styleId = `snow-style-${seed}`;
+		// Check if already injected
+		if (document.getElementById(styleId)) return;
+
+		const style = document.createElement('style');
+		style.id = styleId;
+		// Create gentle drifting motion with sine wave horizontal movement
+		// Snowflakes are lighter and more delicate than petals
+		style.textContent = `
+			@keyframes ${animId}-fall {
+				0% {
+					transform: translateY(0) translateX(0) rotate(${initialRotation}deg);
+					opacity: 0;
+				}
+				5% {
+					opacity: ${opacity};
+				}
+				12.5% {
+					transform: translateY(${fallDistance * 0.125}vh) translateX(${Math.sin(Math.PI * 0.25 * swayFrequency) * swayAmplitude + drift * 0.125}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.125}deg);
+				}
+				25% {
+					transform: translateY(${fallDistance * 0.25}vh) translateX(${Math.sin(Math.PI * 0.5 * swayFrequency) * swayAmplitude + drift * 0.25}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.25}deg);
+				}
+				37.5% {
+					transform: translateY(${fallDistance * 0.375}vh) translateX(${Math.sin(Math.PI * 0.75 * swayFrequency) * swayAmplitude + drift * 0.375}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.375}deg);
+				}
+				50% {
+					transform: translateY(${fallDistance * 0.5}vh) translateX(${Math.sin(Math.PI * swayFrequency) * swayAmplitude + drift * 0.5}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.5}deg);
+				}
+				62.5% {
+					transform: translateY(${fallDistance * 0.625}vh) translateX(${Math.sin(Math.PI * 1.25 * swayFrequency) * swayAmplitude + drift * 0.625}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.625}deg);
+				}
+				75% {
+					transform: translateY(${fallDistance * 0.75}vh) translateX(${Math.sin(Math.PI * 1.5 * swayFrequency) * swayAmplitude + drift * 0.75}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.75}deg);
+				}
+				87.5% {
+					transform: translateY(${fallDistance * 0.875}vh) translateX(${Math.sin(Math.PI * 1.75 * swayFrequency) * swayAmplitude + drift * 0.875}px) rotate(${initialRotation + rotationAmount * rotationDirection * 0.875}deg);
+				}
+				95% {
+					opacity: ${opacity};
+				}
+				100% {
+					transform: translateY(${fallDistance}vh) translateX(${Math.sin(Math.PI * 2 * swayFrequency) * swayAmplitude + drift}px) rotate(${initialRotation + rotationAmount * rotationDirection}deg);
+					opacity: 0;
+				}
+			}
+			@keyframes ${animId}-flutter {
+				0%, 100% {
+					transform: rotateX(0deg) rotateY(0deg) scale(1);
+				}
+				20% {
+					transform: rotateX(20deg) rotateY(25deg) scale(0.95);
+				}
+				40% {
+					transform: rotateX(-15deg) rotateY(-20deg) scale(1.05);
+				}
+				60% {
+					transform: rotateX(25deg) rotateY(20deg) scale(0.92);
+				}
+				80% {
+					transform: rotateX(-20deg) rotateY(-25deg) scale(1.03);
+				}
+			}
+		`;
+		document.head.appendChild(style);
+
+		return () => {
+			// Cleanup on component destroy
+			const el = document.getElementById(styleId);
+			if (el) el.remove();
+		};
+	});
+</script>
+
+<!-- Snowflake - delicate and drifting -->
+<!-- Wrapper div for fall animation (translateY/X/rotate), inner div for flutter (3D rotations) -->
+<div
+	class="snowflake-wrapper"
+	style="{animate ? `animation: ${animId}-fall ${duration}s linear ${delay}s infinite;` : `opacity: ${opacity};`}"
+>
+	<div
+		class="snowflake-flutter"
+		style="{animate ? `animation: ${animId}-flutter ${duration / 3}s ease-in-out ${delay}s infinite;` : ''}"
+	>
+		<Snowflake class={className} {color} {variant} opacity={1} />
+	</div>
+</div>
+
+<style>
+	/* Dynamic keyframes are injected via $effect */
+	.snowflake-wrapper {
+		display: inline-block;
+		will-change: transform, opacity;
+	}
+
+	.snowflake-flutter {
+		display: inline-block;
+		transform-style: preserve-3d;
+		will-change: transform;
+	}
+</style>

package/dist/ui/components/nature/weather/SnowflakeFalling.svelte.d.ts

@@ -0,0 +1,23 @@
+type SnowflakeVariant = 'crystal' | 'simple' | 'star' | 'delicate' | 'dot';
+interface Props {
+    class?: string;
+    color?: string;
+    variant?: SnowflakeVariant;
+    /** Fall animation duration in seconds */
+    duration?: number;
+    /** Animation delay in seconds */
+    delay?: number;
+    /** Horizontal drift amount in vw units */
+    drift?: number;
+    /** Vertical fall distance in vh units */
+    fallDistance?: number;
+    /** Enable falling animation */
+    animate?: boolean;
+    /** Random seed for rotation variation */
+    seed?: number;
+    /** Opacity for depth effect */
+    opacity?: number;
+}
+declare const SnowflakeFalling: import("svelte").Component<Props, {}, "">;
+type SnowflakeFalling = ReturnType<typeof SnowflakeFalling>;
+export default SnowflakeFalling;

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

@@ -0,0 +1,3 @@
+export { default as SnowfallLayer } from './SnowfallLayer.svelte';
+export { default as Snowflake } from './Snowflake.svelte';
+export { default as SnowflakeFalling } from './SnowflakeFalling.svelte';

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

@@ -0,0 +1,4 @@
+// Weather components - seasonal weather effects
+export { default as SnowfallLayer } from './SnowfallLayer.svelte';
+export { default as Snowflake } from './Snowflake.svelte';
+export { default as SnowflakeFalling } from './SnowflakeFalling.svelte';

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}