@mrintel/villain-ui 0.2.0 → 0.3.0

package/dist/components/buttons/Button.svelte

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

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

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

package/dist/components/buttons/ButtonGroup.svelte

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

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,44 @@
+<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>

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

@@ -0,0 +1,11 @@
+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;
+}
+declare const FloatingActionButton: import("svelte").Component<Props, {}, "">;
+type FloatingActionButton = ReturnType<typeof FloatingActionButton>;
+export default FloatingActionButton;

package/dist/components/buttons/IconButton.svelte

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

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

@@ -0,0 +1,13 @@
+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;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/buttons/LinkButton.svelte

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

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

@@ -0,0 +1,12 @@
+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;
+}
+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,10 @@
+export declare const variantClasses: {
+    primary: string;
+    secondary: string;
+    ghost: string;
+};
+export declare const sizeClasses: {
+    sm: string;
+    md: string;
+    lg: string;
+};

package/dist/components/buttons/buttonClasses.js

@@ -0,0 +1,10 @@
+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',
+    md: 'px-4 py-2 text-base',
+    lg: 'px-6 py-3 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,46 @@
+<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>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hoverable?: boolean;
+    children?: Snippet;
+    header?: Snippet;
+    footer?: 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,33 @@
+<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>

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,52 @@
+<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}

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

@@ -0,0 +1,9 @@
+interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+    thickness?: 'thin' | 'normal' | 'thick';
+    variant?: 'default' | 'strong';
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/cards/Grid.svelte

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

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,32 @@
+<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>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    rounded?: boolean;
+    glass?: boolean;
+    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,38 @@
+<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>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    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';