@mrintel/villain-ui 0.3.0 → 0.7.1

package/dist/components/buttons/Button.svelte

@@ -1,33 +1,27 @@
-<script lang="ts">
-  import { variantClasses, sizeClasses } from './buttonClasses';
-
-  interface Props {
-    variant?: 'primary' | 'secondary' | 'ghost';
-    size?: 'sm' | 'md' | 'lg';
-    disabled?: boolean;
-    type?: 'button' | 'submit' | 'reset';
-    onclick?: (event: MouseEvent) => void;
-    children?: import('svelte').Snippet;
-  }
-
-  let {
-    variant = 'primary',
-    size = 'md',
-    disabled = false,
-    type = 'button',
-    onclick,
-    children
-  }: Props = $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';
-  const disabledClasses = 'opacity-50 cursor-not-allowed pointer-events-none';
-</script>
-
-<button
-  {type}
-  {disabled}
-  onclick={onclick}
-  class="{baseClasses} {variantClasses[variant]} {sizeClasses[size]} {disabled ? disabledClasses : ''}"
->
-  {@render children?.()}
-</button>
+<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

@@ -1,10 +1,13 @@
-interface Props {
+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>;

package/dist/components/buttons/ButtonGroup.svelte

@@ -1,30 +1,17 @@
-<script lang="ts">
-  interface Props {
-    orientation?: 'horizontal' | 'vertical';
-    spacing?: boolean;
-    children?: import('svelte').Snippet;
-  }
-
-  let {
-    orientation = 'horizontal',
-    spacing = false,
-    children
-  }: Props = $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>
+<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/FloatingActionButton.svelte

@@ -1,44 +1,20 @@
-<script lang="ts">
-  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;
-  }
-
-  let {
-    position = 'bottom-right',
-    size = 'lg',
-    disabled = false,
-    ariaLabel,
-    onclick,
-    children
-  }: Props = $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 sizeClasses = {
-    md: 'w-14 h-14 text-base',
-    lg: 'w-16 h-16 text-lg'
-  };
-
-  const baseClasses = 'fixed 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';
-  const disabledClasses = 'opacity-50 cursor-not-allowed pointer-events-none';
-</script>
-
-<button
-  type="button"
-  {disabled}
-  aria-label={ariaLabel}
-  onclick={onclick}
-  class="{baseClasses} {positionClasses[position]} {sizeClasses[size]} {disabled ? disabledClasses : ''}"
->
-  {@render children?.()}
-</button>
+<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

@@ -1,10 +1,11 @@
-interface Props {
+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>;

package/dist/components/buttons/IconButton.svelte

@@ -1,53 +1,23 @@
-<script lang="ts">
-  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;
-  }
-
-  let {
-    variant = 'ghost',
-    size = 'md',
-    shape = 'circle',
-    disabled = false,
-    type = 'button',
-    ariaLabel,
-    onclick,
-    children
-  }: Props = $props();
-
-  const variantClasses = {
-    primary: 'bg-[var(--color-accent)] text-[var(--color-text)] accent-glow',
-    secondary: 'bg-transparent text-[var(--color-text)] border border-[var(--color-border-strong)] hover:border-[var(--color-accent)]',
-    ghost: 'bg-transparent text-[var(--color-text)] hover:bg-[var(--color-base-2)]'
-  };
-
-  const sizeClasses = {
-    sm: 'w-8 h-8 text-sm',
-    md: 'w-10 h-10 text-base',
-    lg: 'w-12 h-12 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';
-  const disabledClasses = 'opacity-50 cursor-not-allowed pointer-events-none';
-</script>
-
-<button
-  {type}
-  {disabled}
-  aria-label={ariaLabel}
-  onclick={onclick}
-  class="{baseClasses} {variantClasses[variant]} {sizeClasses[size]} {shapeClasses[shape]} {disabled ? disabledClasses : ''}"
->
-  {@render children?.()}
-</button>
+<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

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

package/dist/components/buttons/LinkButton.svelte

@@ -1,37 +1,24 @@
-<script lang="ts">
-  import { variantClasses, sizeClasses } from './buttonClasses';
-
-  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;
-  }
-
-  let {
-    href,
-    variant = 'primary',
-    size = 'md',
-    disabled = false,
-    target,
-    rel,
-    children
-  }: Props = $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';
-  const disabledClasses = 'opacity-50 pointer-events-none';
-
-  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 : ''}"
->
-  {@render children?.()}
-</a>
+<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

@@ -1,4 +1,4 @@
-interface Props {
+export interface Props {
     href: string;
     variant?: 'primary' | 'secondary' | 'ghost';
     size?: 'sm' | 'md' | 'lg';
@@ -6,6 +6,9 @@ interface Props {
     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>;

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

@@ -8,3 +8,8 @@ export declare const sizeClasses: {
     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

@@ -4,7 +4,12 @@ export const variantClasses = {
     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',
-    md: 'px-4 py-2 text-base',
-    lg: 'px-6 py-3 text-lg'
+    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/cards/Card.svelte

@@ -1,46 +1,54 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    padding?: 'none' | 'sm' | 'md' | 'lg';
-    hoverable?: boolean;
-    children?: Snippet;
-    header?: Snippet;
-    footer?: Snippet;
-  }
-
-  let {
-    padding = 'md',
-    hoverable = false,
-    children,
-    header,
-    footer
-  }: Props = $props();
-
-  const paddingClasses = {
-    none: 'p-0',
-    sm: 'p-4',
-    md: 'p-6',
-    lg: 'p-8'
-  };
-
-  const baseClasses = 'glass-panel rounded-xl transition-all duration-300 ease-[var(--ease-luxe)]';
-</script>
-
-<div class="{baseClasses} {hoverable ? 'hover-lift' : ''} {paddingClasses[padding]}">
-  {#if header}
-    <div class="pb-4 mb-4 border-b border-border">
-      {@render header()}
-    </div>
-  {/if}
-
-  <div>
-    {@render children?.()}
-  </div>
-
-  {#if footer}
-    <div class="pt-4 mt-4 border-t border-border">
-      {@render footer()}
-    </div>
-  {/if}
-</div>
+<script lang="ts">let { padding = 'md', href, target = '_self', rel, onclick, selected = false, disabled = false, 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 isInteractive = $derived(!!href || !!onclick);
+const baseClasses = $derived(`panel-raised rounded-[var(--radius-lg)] transition-all duration-300 ease-[var(--ease-luxe)]` +
+    `${href ? ' no-underline' : ''}` +
+    `${isInteractive ? ' cursor-pointer hover-lift' : ''}` +
+    `${selected ? ' ring-2 ring-accent ring-offset-2 ring-offset-base-0' : ''}` +
+    `${disabled ? ' opacity-50 pointer-events-none' : ''}`);
+export {};
+</script>
+
+{#snippet cardContent()}
+  {#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}
+{/snippet}
+
+{#if href}
+  <a {href} {target} rel={relValue} class="{baseClasses} {paddingClasses[padding]} {className}" aria-disabled={disabled || undefined} {...restProps}>
+    {@render cardContent()}
+  </a>
+{:else if onclick}
+  <button type="button" {onclick} {disabled} aria-pressed={selected} class="{baseClasses} {paddingClasses[padding]} {className} text-left w-full" {...restProps}>
+    {@render cardContent()}
+  </button>
+{:else}
+  <div class="{baseClasses} {paddingClasses[padding]} {className}" {...restProps}>
+    {@render cardContent()}
+  </div>
+{/if}

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

@@ -1,10 +1,17 @@
 import type { Snippet } from 'svelte';
-interface Props {
+export interface Props {
     padding?: 'none' | 'sm' | 'md' | 'lg';
-    hoverable?: boolean;
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    rel?: string;
+    onclick?: (event: MouseEvent) => void;
+    selected?: boolean;
+    disabled?: boolean;
+    class?: string;
     children?: Snippet;
     header?: Snippet;
     footer?: Snippet;
+    iconBefore?: Snippet;
 }
 declare const Card: import("svelte").Component<Props, {}, "">;
 type Card = ReturnType<typeof Card>;

package/dist/components/cards/Container.svelte

@@ -1,33 +1,17 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
-    centered?: boolean;
-    padding?: boolean;
-    children?: Snippet;
-  }
-
-  let {
-    size = 'lg',
-    centered = true,
-    padding = true,
-    children
-  }: Props = $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' : '';
-  const baseClasses = 'w-full';
-</script>
-
-<div class="{baseClasses} {sizeClasses[size]} {centeredClasses} {paddingClasses}">
-  {@render children?.()}
-</div>
+<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>