@mrintel/villain-ui 0.3.0 → 0.6.3

package/dist/components/cards/Divider.svelte

@@ -1,52 +1,36 @@
-<script lang="ts">
-  interface Props {
-    orientation?: 'horizontal' | 'vertical';
-    spacing?: 'none' | 'sm' | 'md' | 'lg';
-    thickness?: 'thin' | 'normal' | 'thick';
-    variant?: 'default' | 'strong';
-  }
-
-  let {
-    orientation = 'horizontal',
-    spacing = 'md',
-    thickness = 'normal',
-    variant = 'default'
-  }: Props = $props();
-
-  const horizontalThicknessMap = {
-    thin: 'border-t-[1px]',
-    normal: 'border-t-[1px]',
-    thick: 'border-t-[2px]'
-  };
-
-  const verticalThicknessMap = {
-    thin: 'border-l-[1px]',
-    normal: 'border-l-[1px]',
-    thick: 'border-l-[2px]'
-  };
-
-  const horizontalSpacing = {
-    none: 'my-0',
-    sm: 'my-2',
-    md: 'my-4',
-    lg: 'my-6'
-  };
-
-  const verticalSpacing = {
-    none: 'mx-0',
-    sm: 'mx-2',
-    md: 'mx-4',
-    lg: 'mx-6'
-  };
-
-  const borderColor = variant === 'strong' ? 'border-[var(--color-border-strong)]' : 'border-[var(--color-border)]';
-
-  const horizontalClasses = `w-full ${horizontalThicknessMap[thickness]} ${borderColor} ${horizontalSpacing[spacing]}`;
-  const verticalClasses = `h-full ${verticalThicknessMap[thickness]} ${borderColor} ${verticalSpacing[spacing]}`;
-</script>
-
-{#if orientation === 'horizontal'}
-  <hr class={horizontalClasses} />
-{:else}
-  <div class={verticalClasses}></div>
-{/if}
+<script lang="ts">"use strict";
+let { orientation = 'horizontal', spacing = 'md', thickness = 'normal', variant = 'default', height, class: className = '', ...restProps } = $props();
+const horizontalThicknessMap = {
+    thin: 'border-t-[1px]',
+    normal: 'border-t-[1px]',
+    thick: 'border-t-[2px]'
+};
+const verticalThicknessMap = {
+    thin: 'border-l-[1px]',
+    normal: 'border-l-[1px]',
+    thick: 'border-l-[2px]'
+};
+const horizontalSpacing = {
+    none: 'my-0',
+    sm: 'my-2',
+    md: 'my-4',
+    lg: 'my-6'
+};
+const verticalSpacing = {
+    none: 'mx-0',
+    sm: 'mx-2',
+    md: 'mx-4',
+    lg: 'mx-6'
+};
+const borderColor = variant === 'strong' ? 'border-[var(--color-border-strong)]' : 'border-[var(--color-border)]';
+const horizontalClasses = `w-full ${horizontalThicknessMap[thickness]} ${borderColor} ${horizontalSpacing[spacing]} ${className}`;
+const verticalClasses = `self-stretch ${verticalThicknessMap[thickness]} ${borderColor} ${verticalSpacing[spacing]} ${className}`;
+// For vertical dividers, use custom height or default min-height
+const verticalStyle = height ? `height: ${height}` : 'min-height: 2rem';
+</script>
+
+{#if orientation === 'horizontal'}
+  <hr class={horizontalClasses} {...restProps} />
+{:else}
+  <div class={verticalClasses} style={verticalStyle} {...restProps}></div>
+{/if}

package/dist/components/cards/Divider.svelte.d.ts

@@ -3,6 +3,8 @@ interface Props {
     spacing?: 'none' | 'sm' | 'md' | 'lg';
     thickness?: 'thin' | 'normal' | 'thick';
     variant?: 'default' | 'strong';
+    height?: string;
+    class?: string;
 }
 declare const Divider: import("svelte").Component<Props, {}, "">;
 type Divider = ReturnType<typeof Divider>;

package/dist/components/cards/Grid.svelte

@@ -1,44 +1,55 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    cols?: 1 | 2 | 3 | 4 | 6 | 12;
-    gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-    responsive?: boolean;
-    children?: Snippet;
-  }
-
-  let {
-    cols = 3,
-    gap = 'md',
-    responsive = true,
-    children
-  }: Props = $props();
-
-  const colsClasses = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-2',
-    3: 'grid-cols-3',
-    4: 'grid-cols-4',
-    6: 'grid-cols-6',
-    12: 'grid-cols-12'
-  };
-
-  const gapClasses = {
-    none: 'gap-0',
-    sm: 'gap-2',
-    md: 'gap-4',
-    lg: 'gap-6',
-    xl: 'gap-8'
-  };
-
-  const responsiveClasses = responsive
-    ? `grid-cols-1 ${cols >= 2 ? 'md:grid-cols-2' : ''} lg:${colsClasses[cols]}`
-    : colsClasses[cols];
-
-  const baseClasses = 'grid w-full';
-</script>
-
-<div class="{baseClasses} {responsiveClasses} {gapClasses[gap]}">
-  {@render children?.()}
-</div>
+<script lang="ts">let { cols = 3, gap = 'md', responsive = true, class: className = '', children, ...restProps } = $props();
+const gapClasses = {
+    none: 'gap-0',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8'
+};
+const baseClasses = 'grid w-full';
+// Build complete class string with all possible classes visible to Tailwind
+const gridClasses = $derived.by(() => {
+    const classes = [];
+    if (responsive) {
+        // Mobile: always 1 column
+        classes.push('grid-cols-1');
+        // Tablet: 2 columns if cols >= 2
+        if (cols >= 2)
+            classes.push('md:grid-cols-2');
+        // Desktop: use specified cols
+        if (cols === 1)
+            classes.push('lg:grid-cols-1');
+        if (cols === 2)
+            classes.push('lg:grid-cols-2');
+        if (cols === 3)
+            classes.push('lg:grid-cols-3');
+        if (cols === 4)
+            classes.push('lg:grid-cols-4');
+        if (cols === 6)
+            classes.push('lg:grid-cols-6');
+        if (cols === 12)
+            classes.push('lg:grid-cols-12');
+    }
+    else {
+        // Non-responsive: use specified cols at all breakpoints
+        if (cols === 1)
+            classes.push('grid-cols-1');
+        if (cols === 2)
+            classes.push('grid-cols-2');
+        if (cols === 3)
+            classes.push('grid-cols-3');
+        if (cols === 4)
+            classes.push('grid-cols-4');
+        if (cols === 6)
+            classes.push('grid-cols-6');
+        if (cols === 12)
+            classes.push('grid-cols-12');
+    }
+    return classes.join(' ');
+});
+export {};
+</script>
+
+<div class="{baseClasses} {gridClasses} {gapClasses[gap]} {className}" {...restProps}>
+  {@render children?.()}
+</div>

package/dist/components/cards/Panel.svelte

@@ -1,32 +1,18 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    padding?: 'none' | 'sm' | 'md' | 'lg';
-    rounded?: boolean;
-    glass?: boolean;
-    children?: Snippet;
-  }
-
-  let {
-    padding = 'md',
-    rounded = true,
-    glass = true,
-    children
-  }: Props = $props();
-
-  const paddingClasses = {
-    none: 'p-0',
-    sm: 'p-4',
-    md: 'p-6',
-    lg: 'p-8'
-  };
-
-  const glassClasses = glass ? 'glass-panel' : 'bg-[var(--color-panel)]';
-  const roundedClasses = rounded ? 'rounded-[var(--radius-lg)]' : '';
-  const baseClasses = 'transition-all duration-300 ease-[var(--ease-luxe)]';
-</script>
-
-<div class="{baseClasses} {glassClasses} {roundedClasses} {paddingClasses[padding]}">
-  {@render children?.()}
-</div>
+<script lang="ts">let { padding = 'md', rounded = true, variant = 'default', class: className = '', children, ...restProps } = $props();
+const paddingClasses = {
+    none: 'p-0',
+    sm: 'p-5',
+    md: 'p-8',
+    lg: 'p-10'
+};
+const glassClasses = $derived(variant === 'glass'
+    ? 'glass-panel bg-[var(--color-accent-overlay-5)] border-[var(--color-border-glow)]'
+    : 'panel-raised');
+const roundedClasses = $derived(rounded ? 'rounded-[var(--radius-lg)]' : '');
+const baseClasses = 'transition-all duration-300 ease-[var(--ease-luxe)]';
+export {};
+</script>
+
+<div class="{baseClasses} {glassClasses} {roundedClasses} {paddingClasses[padding]} {className}" {...restProps}>
+  {@render children?.()}
+</div>

package/dist/components/cards/Panel.svelte.d.ts

@@ -2,7 +2,8 @@ import type { Snippet } from 'svelte';
 interface Props {
     padding?: 'none' | 'sm' | 'md' | 'lg';
     rounded?: boolean;
-    glass?: boolean;
+    variant?: 'default' | 'glass';
+    class?: string;
     children?: Snippet;
 }
 declare const Panel: import("svelte").Component<Props, {}, "">;

package/dist/components/cards/SectionHeader.svelte

@@ -1,38 +1,24 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-    glow?: boolean;
-    subtitle?: string;
-    align?: 'left' | 'center' | 'right';
-    children?: Snippet;
-  }
-
-  let {
-    level = 2,
-    glow = true,
-    subtitle,
-    align = 'left',
-    children
-  }: Props = $props();
-
-  const headingTag = `h${level}`;
-  const glowClasses = glow ? 'text-glow' : '';
-  const alignClasses = `text-${align}`;
-  
-  const headingClasses = `font-[var(--font-heading)] text-[length:var(--text-h${level}-size)] font-[number:var(--text-h${level}-weight)] leading-[var(--text-h${level}-line-height)] text-[var(--color-text)] ${glowClasses} ${alignClasses}`;
-  const subtitleClasses = `mt-2 font-[var(--font-body)] text-[length:var(--text-body-size)] text-[var(--color-text-soft)] ${alignClasses}`;
-</script>
-
-<div class="mb-8">
-  <svelte:element this={headingTag} class={headingClasses}>
-    {@render children?.()}
-  </svelte:element>
-
-  {#if subtitle}
-    <p class={subtitleClasses}>
-      {subtitle}
-    </p>
-  {/if}
-</div>
+<script lang="ts">let { title, level = 2, glow = true, subtitle, align = 'left', children } = $props();
+const headingTag = $derived(`h${level}`);
+const glowClasses = $derived(glow ? 'text-glow' : '');
+const alignClasses = $derived(`text-${align}`);
+const headingClasses = $derived(`font-[var(--font-heading)] text-[length:var(--text-h${level}-size)] font-[number:var(--text-h${level}-weight)] leading-[var(--text-h${level}-line-height)] text-[var(--color-text)] ${glowClasses} ${alignClasses}`);
+const subtitleClasses = $derived(`mt-2 font-[var(--font-body)] text-[length:var(--text-body-size)] text-[var(--color-text-soft)] ${alignClasses}`);
+export {};
+</script>
+
+<div class="mb-8">
+  <svelte:element this={headingTag} class={headingClasses}>
+    {#if title}
+      {title}
+    {:else}
+      {@render children?.()}
+    {/if}
+  </svelte:element>
+
+  {#if subtitle}
+    <p class={subtitleClasses}>
+      {subtitle}
+    </p>
+  {/if}
+</div>

package/dist/components/cards/SectionHeader.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 interface Props {
+    title?: string;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     glow?: boolean;
     subtitle?: string;

package/dist/components/data/Avatar.svelte

@@ -1,67 +1,48 @@
-<script lang="ts">
-	interface Props {
-		src?: string;
-		alt: string;
-		size?: 'sm' | 'md' | 'lg' | 'xl';
-		fallback?: string;
-		glow?: boolean;
-	}
-
-	let { src, alt, size = 'md', fallback, glow = false }: Props = $props();
-
-	let imageLoaded = $state(!!src);
-	let imageError = $state(false);
-
-	const sizeClasses = {
-		sm: 'w-8 h-8',
-		md: 'w-12 h-12',
-		lg: 'w-16 h-16',
-		xl: 'w-24 h-24'
-	};
-
-	const fontSizes = {
-		sm: '0.75rem',
-		md: '1rem',
-		lg: '1.25rem',
-		xl: '1.5rem'
-	};
-
-	const classes = $derived(
-		`${sizeClasses[size]} rounded-full overflow-hidden inline-flex items-center justify-center transition-all duration-300 hover:scale-105 ${glow ? 'border-2 border-[var(--color-accent)] accent-glow' : ''}`
-	);
-
-	const fallbackText = $derived(
-		fallback || alt.charAt(0).toUpperCase()
-	);
-
-	function handleImageError() {
-		imageError = true;
-		imageLoaded = false;
-	}
-
-	function handleImageLoad() {
-		imageLoaded = true;
-		imageError = false;
-	}
-</script>
-
-{#if src && !imageError}
-	<div class={classes}>
-		<img
-			{src}
-			{alt}
-			class="w-full h-full object-cover"
-			onerror={handleImageError}
-			onload={handleImageLoad}
-		/>
-	</div>
-{:else}
-	<div
-		class={classes}
-		style="background: linear-gradient(135deg, var(--color-accent) 0%, rgba(127, 61, 255, 0.7) 100%); color: var(--color-text); font-weight: 600; text-transform: uppercase; font-size: {fontSizes[size]};"
-		role="img"
-		aria-label={alt}
-	>
-		{fallbackText}
-	</div>
-{/if}
+<script lang="ts">"use strict";
+let { src, alt, size = 'md', fallback, glow = false } = $props();
+let imageLoaded = $state(!!src);
+let imageError = $state(false);
+const sizeClasses = {
+    sm: 'w-8 h-8',
+    md: 'w-12 h-12',
+    lg: 'w-16 h-16',
+    xl: 'w-24 h-24'
+};
+const fontSizes = {
+    sm: '0.75rem',
+    md: '1rem',
+    lg: '1.25rem',
+    xl: '1.5rem'
+};
+const classes = $derived(`${sizeClasses[size]} rounded-full overflow-hidden inline-flex items-center justify-center transition-all duration-300 hover:scale-105 ${glow ? 'border-2 border-[var(--color-accent)] accent-glow' : ''}`);
+const fallbackText = $derived(fallback || alt.charAt(0).toUpperCase());
+function handleImageError() {
+    imageError = true;
+    imageLoaded = false;
+}
+function handleImageLoad() {
+    imageLoaded = true;
+    imageError = false;
+}
+</script>
+
+{#if src && !imageError}
+	<div class={classes}>
+		<img
+			{src}
+			{alt}
+			class="w-full h-full object-cover"
+			onerror={handleImageError}
+			onload={handleImageLoad}
+		/>
+	</div>
+{:else}
+	<div
+		class={classes}
+		style="background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-overlay-70) 100%); color: var(--color-text); font-weight: 600; text-transform: uppercase; font-size: {fontSizes[size]};"
+		role="img"
+		aria-label={alt}
+	>
+		{fallbackText}
+	</div>
+{/if}

package/dist/components/data/Badge.svelte

@@ -1,32 +1,45 @@
-<script lang="ts">
-	interface Props {
-		variant?: 'default' | 'success' | 'warning' | 'error' | 'accent';
-		size?: 'sm' | 'md';
-		children?: import('svelte').Snippet;
-	}
-
-	let { variant = 'default', size = 'md', children }: Props = $props();
-
-	const variantClasses = {
-		default: 'bg-[var(--color-base-3)] text-[var(--color-text-soft)] border-[var(--color-base-3)]',
-		success:
-			'bg-[rgba(0,232,151,0.15)] text-[var(--color-success)] border-[var(--color-success)]',
-		warning:
-			'bg-[rgba(255,200,97,0.15)] text-[var(--color-warning)] border-[var(--color-warning)]',
-		error: 'bg-[rgba(255,74,106,0.15)] text-[var(--color-error)] border-[var(--color-error)]',
-		accent: 'bg-[rgba(127,61,255,0.15)] text-[var(--color-accent-soft)] border-[var(--color-accent)] accent-glow'
-	};
-
-	const sizeClasses = {
-		sm: 'px-2 py-0.5 text-xs',
-		md: 'px-2.5 py-1 text-sm'
-	};
-
-	const classes = $derived(
-		`inline-flex items-center justify-center rounded-[var(--radius-pill)] border font-[var(--font-body)] font-medium transition-all duration-300 ${variantClasses[variant]} ${sizeClasses[size]}`
-	);
-</script>
-
-<span class={classes}>
-	{@render children?.()}
-</span>
+<script lang="ts">"use strict";
+let { variant = 'default', size = 'md', icon, children, hover = false, glow = false, statusDot = false, uppercase = false, class: className = '', ...restProps } = $props();
+const variantClasses = {
+    default: 'bg-[var(--color-base-3)] text-[var(--color-text-soft)] border-[var(--color-border)]',
+    success: 'bg-[var(--color-success-overlay-15)] text-[var(--color-success)] border-[var(--color-success)]',
+    warning: 'bg-[var(--color-warning-overlay-15)] text-[var(--color-warning)] border-[var(--color-warning)]',
+    error: 'bg-[var(--color-error-overlay-15)] text-[var(--color-error)] border-[var(--color-error)]',
+    accent: 'bg-[var(--color-secondary-overlay-10)] text-[var(--color-accent-soft)] border-[var(--color-accent)]',
+    feature: 'bg-[var(--color-accent-overlay-20)] text-[var(--color-accent-soft)] border-[var(--color-border-glow)]'
+};
+const hoverClasses = {
+    default: 'hover:bg-[var(--color-base-2)]',
+    success: 'hover:bg-[var(--color-success-overlay-30)]',
+    warning: 'hover:bg-[var(--color-warning-overlay-30)]',
+    error: 'hover:bg-[var(--color-error-overlay-30)]',
+    accent: 'hover:bg-[var(--color-secondary-overlay-20)] hover:shadow-[var(--shadow-accent-glow)]',
+    feature: 'hover:bg-[var(--color-accent-overlay-30)] hover:shadow-[var(--shadow-accent-glow)]'
+};
+const sizeClasses = {
+    sm: 'px-2 py-0.5 text-[var(--text-xs)] gap-1',
+    md: 'px-3 py-1 text-[0.75rem] gap-1.5'
+};
+const classes = $derived(`inline-flex items-center justify-center rounded-[var(--radius-pill)] border font-[var(--font-body)] font-semibold transition-all duration-[var(--duration-300)] ease-[var(--ease-sharp)] ${variantClasses[variant]} ${sizeClasses[size]} ${hover ? hoverClasses[variant] : ''} ${glow ? 'accent-glow' : ''} ${uppercase ? 'uppercase tracking-wider' : ''} ${className}`.trim());
+</script>
+
+<span class={classes} {...restProps}>
+	{#if statusDot}
+		<span class="status-dot"></span>
+	{/if}
+	{#if icon}
+		<span class="inline-flex items-center justify-center">
+			{@render icon()}
+		</span>
+	{/if}
+	{@render children?.()}
+</span>
+
+<style>
+	.status-dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+		background: currentColor;
+		box-shadow: 0 0 8px currentColor;
+	}</style>

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

@@ -1,7 +1,13 @@
 interface Props {
-    variant?: 'default' | 'success' | 'warning' | 'error' | 'accent';
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'accent' | 'feature';
     size?: 'sm' | 'md';
+    icon?: import('svelte').Snippet;
     children?: import('svelte').Snippet;
+    hover?: boolean;
+    glow?: boolean;
+    statusDot?: boolean;
+    uppercase?: boolean;
+    class?: string;
 }
 declare const Badge: import("svelte").Component<Props, {}, "">;
 type Badge = ReturnType<typeof Badge>;