@mrintel/villain-ui 0.2.2 → 0.6.3

package/dist/components/buttons/Button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">import { variantClasses, sizeClasses, disabledClasses } from './buttonClasses';
+let { variant = 'primary', size = 'md', disabled = false, type = 'button', onclick, iconBefore, iconAfter, class: className = '', children, ...restProps } = $props();
+const baseClasses = 'inline-flex items-center justify-center rounded-[var(--radius-lg)] font-[var(--font-body)] transition-all duration-300 ease-[var(--ease-luxe)] cursor-pointer gap-2';
+const classes = $derived(`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${disabled ? disabledClasses : ''} ${className}`);
+</script>
+
+<button
+  {type}
+  {disabled}
+  onclick={onclick}
+  class={classes}
+  {...restProps}
+>
+  {#if iconBefore}
+    <span class="inline-flex items-center justify-center">
+      {@render iconBefore()}
+    </span>
+  {/if}
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if iconAfter}
+    <span class="inline-flex items-center justify-center">
+      {@render iconAfter()}
+    </span>
+  {/if}
+</button>

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

@@ -0,0 +1,14 @@
+export interface Props {
+    variant?: 'primary' | 'secondary' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    onclick?: (event: MouseEvent) => void;
+    iconBefore?: import('svelte').Snippet;
+    iconAfter?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    class?: string;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/buttons/ButtonGroup.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">"use strict";
+let { orientation = 'horizontal', spacing = false, children } = $props();
+const orientationClasses = {
+    horizontal: 'flex-row',
+    vertical: 'flex-col'
+};
+const mergedBorderClasses = {
+    horizontal: '[&>*:not(:first-child)]:ml-[-1px] [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none',
+    vertical: '[&>*:not(:first-child)]:mt-[-1px] [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none'
+};
+const spacingClasses = 'gap-2';
+const baseClasses = 'flex bg-transparent';
+</script>
+
+<div class="{baseClasses} {orientationClasses[orientation]} {spacing ? spacingClasses : mergedBorderClasses[orientation]}">
+  {@render children?.()}
+</div>

package/dist/components/buttons/ButtonGroup.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    spacing?: boolean;
+    children?: import('svelte').Snippet;
+}
+declare const ButtonGroup: import("svelte").Component<Props, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/buttons/FloatingActionButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">import { fabSizeClasses, disabledClasses } from './buttonClasses';
+let { position = 'bottom-right', size = 'lg', disabled = false, ariaLabel, onclick, children, class: className = '' } = $props();
+const positionClasses = {
+    'bottom-right': 'bottom-6 right-6',
+    'bottom-left': 'bottom-6 left-6',
+    'top-right': 'top-6 right-6',
+    'top-left': 'top-6 left-6'
+};
+const baseClasses = 'fixed z-[var(--z-50)] flex items-center justify-center rounded-[var(--radius-pill)] bg-[var(--color-accent)] text-[var(--color-text)] accent-glow hover-lift shadow-[var(--shadow-deep)] transition-all duration-300 ease-[var(--ease-luxe)] cursor-pointer animate-[glow-pulse_3s_ease-in-out_infinite] hover:scale-110';
+</script>
+
+<button
+  type="button"
+  {disabled}
+  aria-label={ariaLabel}
+  onclick={onclick}
+  class="{baseClasses} {positionClasses[position]} {fabSizeClasses[size]} {disabled ? disabledClasses : ''} {className}"
+>
+  {@render children?.()}
+</button>

package/dist/components/buttons/FloatingActionButton.svelte.d.ts

@@ -0,0 +1,12 @@
+export interface Props {
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    size?: 'md' | 'lg';
+    disabled?: boolean;
+    ariaLabel: string;
+    onclick?: (event: MouseEvent) => void;
+    children?: import('svelte').Snippet;
+    class?: string;
+}
+declare const FloatingActionButton: import("svelte").Component<Props, {}, "">;
+type FloatingActionButton = ReturnType<typeof FloatingActionButton>;
+export default FloatingActionButton;

package/dist/components/buttons/IconButton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">import { variantClasses, disabledClasses } from './buttonClasses';
+let { variant = 'ghost', size = 'md', shape = 'circle', disabled = false, type = 'button', ariaLabel, onclick, children, class: className = '' } = $props();
+const iconSizeClasses = {
+    sm: 'w-10 h-10 text-sm',
+    md: 'w-12 h-12 text-base',
+    lg: 'w-14 h-14 text-lg'
+};
+const shapeClasses = {
+    circle: 'rounded-[var(--radius-pill)]',
+    square: 'rounded-[var(--radius-lg)]'
+};
+const baseClasses = 'inline-flex items-center justify-center font-[var(--font-body)] transition-all duration-300 ease-[var(--ease-luxe)] cursor-pointer hover-lift';
+</script>
+
+<button
+  {type}
+  {disabled}
+  aria-label={ariaLabel}
+  onclick={onclick}
+  class="{baseClasses} {variantClasses[variant]} {iconSizeClasses[size]} {shapeClasses[shape]} {disabled ? disabledClasses : ''} {className}"
+>
+  {@render children?.()}
+</button>

package/dist/components/buttons/IconButton.svelte.d.ts

@@ -0,0 +1,14 @@
+export interface Props {
+    variant?: 'primary' | 'secondary' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    shape?: 'circle' | 'square';
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    ariaLabel: string;
+    onclick?: (event: MouseEvent) => void;
+    children?: import('svelte').Snippet;
+    class?: string;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/buttons/LinkButton.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">import { variantClasses, sizeClasses, disabledClasses } from './buttonClasses';
+let { href, variant = 'primary', size = 'md', disabled = false, target, rel, children, iconBefore, iconAfter, class: className = '' } = $props();
+const baseClasses = 'inline-flex items-center justify-center rounded-[var(--radius-lg)] font-[var(--font-body)] transition-all duration-300 ease-[var(--ease-luxe)] no-underline gap-2';
+const computedRel = $derived(target === '_blank' ? (rel || 'noopener noreferrer') : rel);
+</script>
+
+<a
+  href={disabled ? undefined : href}
+  {target}
+  rel={computedRel}
+  class="{baseClasses} {variantClasses[variant]} {sizeClasses[size]} {disabled ? disabledClasses : ''} {className}"
+>
+  {#if iconBefore}
+    <span class="inline-flex items-center justify-center">
+      {@render iconBefore()}
+    </span>
+  {/if}
+  {@render children?.()}
+  {#if iconAfter}
+    <span class="inline-flex items-center justify-center">
+      {@render iconAfter()}
+    </span>
+  {/if}
+</a>

package/dist/components/buttons/LinkButton.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface Props {
+    href: string;
+    variant?: 'primary' | 'secondary' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    rel?: string;
+    children?: import('svelte').Snippet;
+    iconBefore?: import('svelte').Snippet;
+    iconAfter?: import('svelte').Snippet;
+    class?: string;
+}
+declare const LinkButton: import("svelte").Component<Props, {}, "">;
+type LinkButton = ReturnType<typeof LinkButton>;
+export default LinkButton;

package/dist/components/buttons/buttonClasses.d.ts

@@ -0,0 +1,15 @@
+export declare const variantClasses: {
+    primary: string;
+    secondary: string;
+    ghost: string;
+};
+export declare const sizeClasses: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const disabledClasses = "opacity-50 cursor-not-allowed pointer-events-none";
+export declare const fabSizeClasses: {
+    md: string;
+    lg: string;
+};

package/dist/components/buttons/buttonClasses.js

@@ -0,0 +1,15 @@
+export const variantClasses = {
+    primary: 'bg-[var(--color-accent)] text-[var(--color-text)] accent-glow hover-lift',
+    secondary: 'bg-transparent text-[var(--color-text)] border border-[var(--color-border-strong)] hover:border-[var(--color-accent)] hover-lift',
+    ghost: 'bg-transparent text-[var(--color-text)] hover:bg-[var(--color-base-2)] hover-lift'
+};
+export const sizeClasses = {
+    sm: 'px-3 py-1.5 text-sm font-medium',
+    md: 'px-4 py-2 text-base font-medium',
+    lg: 'px-5 py-2.5 text-lg font-semibold'
+};
+export const disabledClasses = 'opacity-50 cursor-not-allowed pointer-events-none';
+export const fabSizeClasses = {
+    md: 'w-16 h-16 text-base',
+    lg: 'w-18 h-18 text-lg'
+};

package/dist/components/buttons/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Button } from './Button.svelte';
+export { default as IconButton } from './IconButton.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
+export { default as LinkButton } from './LinkButton.svelte';
+export { default as FloatingActionButton } from './FloatingActionButton.svelte';

package/dist/components/buttons/index.js

@@ -0,0 +1,5 @@
+export { default as Button } from './Button.svelte';
+export { default as IconButton } from './IconButton.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
+export { default as LinkButton } from './LinkButton.svelte';
+export { default as FloatingActionButton } from './FloatingActionButton.svelte';

package/dist/components/cards/Card.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">let { padding = 'md', href, target = '_self', rel, class: className = '', children, header, footer, iconBefore, ...restProps } = $props();
+// Compute rel attribute: use explicit rel if provided, otherwise default to 'noopener noreferrer' for target='_blank'
+const relValue = $derived(rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined));
+const paddingClasses = {
+    none: 'p-0',
+    sm: 'p-4',
+    md: 'p-6',
+    lg: 'p-8'
+};
+const baseClasses = $derived(`panel-raised rounded-[var(--radius-lg)] transition-all duration-300 ease-[var(--ease-luxe)] ${href ? 'no-underline' : ''}`);
+export {};
+</script>
+
+{#if href}
+  <a {href} {target} rel={relValue} class="{baseClasses} {paddingClasses[padding]} {className}" {...restProps}>
+    {#if iconBefore}
+      <div class="card-icon">
+        {@render iconBefore()}
+      </div>
+    {/if}
+    {#if header}
+      <div class="pb-3 mb-3 border-b border-border-strong">
+        {@render header()}
+      </div>
+    {/if}
+
+    <div>
+      {@render children?.()}
+    </div>
+
+    {#if footer}
+      <div class="pt-3 mt-3 border-t border-border-strong">
+        {@render footer()}
+      </div>
+    {/if}
+  </a>
+{:else}
+  <div class="{baseClasses} {paddingClasses[padding]} {className}" {...restProps}>
+    {#if iconBefore}
+      <div class="card-icon">
+        {@render iconBefore()}
+      </div>
+    {/if}
+    {#if header}
+      <div class="pb-3 mb-3 border-b border-border-strong">
+        {@render header()}
+      </div>
+    {/if}
+
+    <div>
+      {@render children?.()}
+    </div>
+
+    {#if footer}
+      <div class="pt-3 mt-3 border-t border-border-strong">
+        {@render footer()}
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    rel?: string;
+    class?: string;
+    children?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    iconBefore?: Snippet;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/cards/Container.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">let { size = 'lg', centered = true, padding = true, class: className = '', children, ...restProps } = $props();
+const sizeClasses = {
+    sm: 'max-w-screen-sm',
+    md: 'max-w-screen-md',
+    lg: 'max-w-screen-lg',
+    xl: 'max-w-screen-xl',
+    full: 'max-w-full'
+};
+const centeredClasses = centered ? 'mx-auto' : '';
+const paddingClasses = padding ? 'px-4 md:px-6 lg:px-8 py-8 md:py-12 lg:py-16' : '';
+const baseClasses = 'w-full';
+export {};
+</script>
+
+<div class="{baseClasses} {sizeClasses[size]} {centeredClasses} {paddingClasses} {className}" {...restProps}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    centered?: boolean;
+    padding?: boolean;
+    children?: Snippet;
+}
+declare const Container: import("svelte").Component<Props, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/components/cards/Divider.svelte

@@ -0,0 +1,36 @@
+<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

@@ -0,0 +1,11 @@
+interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    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>;
+export default Divider;

package/dist/components/cards/Grid.svelte

@@ -0,0 +1,55 @@
+<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/Grid.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    cols?: 1 | 2 | 3 | 4 | 6 | 12;
+    gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    responsive?: boolean;
+    children?: Snippet;
+}
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/components/cards/Panel.svelte

@@ -0,0 +1,18 @@
+<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

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

package/dist/components/cards/SectionHeader.svelte

@@ -0,0 +1,24 @@
+<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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    glow?: boolean;
+    subtitle?: string;
+    align?: 'left' | 'center' | 'right';
+    children?: Snippet;
+}
+declare const SectionHeader: import("svelte").Component<Props, {}, "">;
+type SectionHeader = ReturnType<typeof SectionHeader>;
+export default SectionHeader;

package/dist/components/cards/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.svelte';
+export { default as Panel } from './Panel.svelte';
+export { default as Grid } from './Grid.svelte';
+export { default as Container } from './Container.svelte';
+export { default as SectionHeader } from './SectionHeader.svelte';
+export { default as Divider } from './Divider.svelte';

package/dist/components/cards/index.js

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.svelte';
+export { default as Panel } from './Panel.svelte';
+export { default as Grid } from './Grid.svelte';
+export { default as Container } from './Container.svelte';
+export { default as SectionHeader } from './SectionHeader.svelte';
+export { default as Divider } from './Divider.svelte';

package/dist/components/data/Avatar.svelte

@@ -0,0 +1,48 @@
+<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/Avatar.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    src?: string;
+    alt: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    fallback?: string;
+    glow?: boolean;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/data/Badge.svelte

@@ -0,0 +1,45 @@
+<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>