@mkatogui/uds-svelte 0.2.1

package/src/components/Footer.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  interface FooterColumn {
+    title: string;
+    links: { label: string; href: string }[];
+  }
+
+  interface Props {
+    variant?: 'simple' | 'multi-column' | 'newsletter' | 'mega-footer';
+    size?: 'standard' | 'compact';
+    columns?: FooterColumn[];
+    copyright?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+    newsletter?: import('svelte').Snippet;
+    legal?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'simple',
+    size = 'standard',
+    columns = [],
+    copyright = '',
+    class: className = '',
+    children,
+    newsletter,
+    legal,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-footer',
+      `uds-footer--${variant}`,
+      `uds-footer--${size}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<footer class={classes} aria-label="Site footer" {...rest}>
+  {#if columns.length > 0}
+    <div class="uds-footer__columns">
+      {#each columns as column}
+        <div class="uds-footer__column">
+          <h3 class="uds-footer__column-title">{column.title}</h3>
+          <ul class="uds-footer__link-list">
+            {#each column.links as link}
+              <li><a href={link.href}>{link.label}</a></li>
+            {/each}
+          </ul>
+        </div>
+      {/each}
+    </div>
+  {/if}
+  {#if newsletter}
+    <div class="uds-footer__newsletter">
+      {@render newsletter()}
+    </div>
+  {/if}
+  {@render children?.()}
+  {#if legal}
+    <div class="uds-footer__legal">
+      {@render legal()}
+    </div>
+  {/if}
+  {#if copyright}
+    <div class="uds-footer__copyright">{copyright}</div>
+  {/if}
+</footer>

package/src/components/FormInput.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'text' | 'email' | 'password' | 'number' | 'search' | 'textarea';
+    size?: 'sm' | 'md' | 'lg';
+    state?: 'default' | 'focus' | 'error' | 'disabled' | 'readonly';
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    value?: string;
+    placeholder?: string;
+    id?: string;
+    class?: string;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'text',
+    size = 'md',
+    state = 'default',
+    label = '',
+    helperText = '',
+    errorText = '',
+    required = false,
+    disabled = false,
+    readonly: readOnly = false,
+    value = $bindable(''),
+    placeholder = '',
+    id,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let inputId = $derived(id || `uds-input-${Math.random().toString(36).slice(2, 9)}`);
+  let helperId = $derived(`${inputId}-helper`);
+  let errorId = $derived(`${inputId}-error`);
+  let isError = $derived(state === 'error' || !!errorText);
+
+  let classes = $derived(
+    [
+      'uds-input',
+      `uds-input--${variant}`,
+      `uds-input--${size}`,
+      isError && 'uds-input--error',
+      disabled && 'uds-input--disabled',
+      readOnly && 'uds-input--readonly',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  let describedBy = $derived(
+    [errorText && errorId, helperText && helperId].filter(Boolean).join(' ') || undefined
+  );
+</script>
+
+<div class={classes}>
+  {#if label}
+    <label class="uds-input__label" for={inputId}>
+      {label}
+      {#if required}
+        <span class="uds-input__required" aria-hidden="true">*</span>
+      {/if}
+    </label>
+  {/if}
+  {#if variant === 'textarea'}
+    <textarea
+      class="uds-input__field"
+      id={inputId}
+      bind:value
+      {placeholder}
+      {required}
+      {disabled}
+      readonly={readOnly}
+      aria-invalid={isError || undefined}
+      aria-describedby={describedBy}
+      {...rest}
+    ></textarea>
+  {:else}
+    <input
+      class="uds-input__field"
+      type={variant}
+      id={inputId}
+      bind:value
+      {placeholder}
+      {required}
+      {disabled}
+      readonly={readOnly}
+      aria-invalid={isError || undefined}
+      aria-describedby={describedBy}
+      {...rest}
+    />
+  {/if}
+  {#if errorText}
+    <p class="uds-input__error" id={errorId} role="alert">{errorText}</p>
+  {:else if helperText}
+    <p class="uds-input__helper" id={helperId}>{helperText}</p>
+  {/if}
+</div>

package/src/components/HeroSection.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'centered' | 'product-screenshot' | 'video-bg' | 'gradient-mesh' | 'search-forward' | 'split';
+    size?: 'full' | 'compact';
+    headline?: string;
+    subheadline?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+    cta?: import('svelte').Snippet;
+    socialProof?: import('svelte').Snippet;
+    visual?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'centered',
+    size = 'full',
+    headline = '',
+    subheadline = '',
+    class: className = '',
+    children,
+    cta,
+    socialProof,
+    visual,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-hero',
+      `uds-hero--${variant}`,
+      `uds-hero--${size}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<section class={classes} {...rest}>
+  <div class="uds-hero__content">
+    {#if headline}
+      <h1 class="uds-hero__headline">{headline}</h1>
+    {/if}
+    {#if subheadline}
+      <p class="uds-hero__subheadline">{subheadline}</p>
+    {/if}
+    {#if cta}
+      <div class="uds-hero__cta">
+        {@render cta()}
+      </div>
+    {/if}
+    {#if socialProof}
+      <div class="uds-hero__social-proof">
+        {@render socialProof()}
+      </div>
+    {/if}
+    {@render children?.()}
+  </div>
+  {#if visual}
+    <div class="uds-hero__visual">
+      {@render visual()}
+    </div>
+  {/if}
+</section>

package/src/components/Modal.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'confirmation' | 'task' | 'alert';
+    size?: 'sm' | 'md' | 'lg';
+    open?: boolean;
+    title?: string;
+    onClose?: () => void;
+    class?: string;
+    children?: import('svelte').Snippet;
+    actions?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'confirmation',
+    size = 'md',
+    open = false,
+    title = '',
+    onClose,
+    class: className = '',
+    children,
+    actions,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-modal',
+      `uds-modal--${variant}`,
+      `uds-modal--${size}`,
+      open && 'uds-modal--open',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && open) {
+      onClose?.();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <div class="uds-modal__overlay" onclick={onClose} aria-hidden="true"></div>
+  <div class={classes} role="dialog" aria-modal="true" aria-label={title} {...rest}>
+    <div class="uds-modal__header">
+      {#if title}
+        <h2 class="uds-modal__title">{title}</h2>
+      {/if}
+      <button class="uds-modal__close" onclick={onClose} aria-label="Close dialog">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="uds-modal__body">
+      {@render children?.()}
+    </div>
+    {#if actions}
+      <div class="uds-modal__actions">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+{/if}

package/src/components/NavigationBar.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'standard' | 'minimal' | 'dark' | 'transparent';
+    sticky?: boolean;
+    blurOnScroll?: boolean;
+    megaMenu?: boolean;
+    darkModeToggle?: boolean;
+    mobileOpen?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+    ctaButton?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'standard',
+    sticky = false,
+    blurOnScroll = false,
+    megaMenu = false,
+    darkModeToggle = false,
+    mobileOpen = false,
+    class: className = '',
+    children,
+    ctaButton,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-navbar',
+      `uds-navbar--${variant}`,
+      sticky && 'uds-navbar--sticky',
+      blurOnScroll && 'uds-navbar--blur',
+      mobileOpen && 'uds-navbar--mobile-open',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<nav class={classes} aria-label="Main navigation" {...rest}>
+  {@render children?.()}
+  {#if ctaButton}
+    <div class="uds-navbar__cta">
+      {@render ctaButton()}
+    </div>
+  {/if}
+  <button
+    class="uds-navbar__mobile-toggle"
+    aria-expanded={mobileOpen}
+    aria-label="Toggle navigation menu"
+  >
+    <span class="uds-navbar__hamburger" aria-hidden="true"></span>
+  </button>
+</nav>

package/src/components/Pagination.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'numbered' | 'simple' | 'load-more' | 'infinite-scroll';
+    size?: 'sm' | 'md';
+    currentPage?: number;
+    totalPages?: number;
+    onPageChange?: (page: number) => void;
+    class?: string;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'numbered',
+    size = 'md',
+    currentPage = 1,
+    totalPages = 1,
+    onPageChange,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-pagination',
+      `uds-pagination--${variant}`,
+      `uds-pagination--${size}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  let pages = $derived(() => {
+    const p: (number | string)[] = [];
+    for (let i = 1; i <= totalPages; i++) {
+      if (i === 1 || i === totalPages || (i >= currentPage - 1 && i <= currentPage + 1)) {
+        p.push(i);
+      } else if (p[p.length - 1] !== '...') {
+        p.push('...');
+      }
+    }
+    return p;
+  });
+
+  function goTo(page: number) {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange?.(page);
+    }
+  }
+</script>
+
+<nav class={classes} aria-label="Pagination" {...rest}>
+  {#if variant === 'simple'}
+    <button
+      class="uds-pagination__prev"
+      disabled={currentPage <= 1}
+      onclick={() => goTo(currentPage - 1)}
+      aria-label="Previous page"
+    >
+      Previous
+    </button>
+    <span class="uds-pagination__info">Page {currentPage} of {totalPages}</span>
+    <button
+      class="uds-pagination__next"
+      disabled={currentPage >= totalPages}
+      onclick={() => goTo(currentPage + 1)}
+      aria-label="Next page"
+    >
+      Next
+    </button>
+  {:else if variant === 'load-more'}
+    <button
+      class="uds-pagination__load-more"
+      disabled={currentPage >= totalPages}
+      onclick={() => goTo(currentPage + 1)}
+    >
+      Load more
+    </button>
+  {:else}
+    <button
+      class="uds-pagination__prev"
+      disabled={currentPage <= 1}
+      onclick={() => goTo(currentPage - 1)}
+      aria-label="Previous page"
+    >
+      &laquo;
+    </button>
+    <ol class="uds-pagination__list">
+      {#each pages() as page}
+        {#if typeof page === 'number'}
+          <li>
+            <button
+              class="uds-pagination__page"
+              class:uds-pagination__page--active={page === currentPage}
+              aria-current={page === currentPage ? 'page' : undefined}
+              onclick={() => goTo(page)}
+            >
+              {page}
+            </button>
+          </li>
+        {:else}
+          <li class="uds-pagination__ellipsis" aria-hidden="true">&hellip;</li>
+        {/if}
+      {/each}
+    </ol>
+    <button
+      class="uds-pagination__next"
+      disabled={currentPage >= totalPages}
+      onclick={() => goTo(currentPage + 1)}
+      aria-label="Next page"
+    >
+      &raquo;
+    </button>
+  {/if}
+</nav>

package/src/components/PricingTable.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  interface PricingPlan {
+    name: string;
+    price: string;
+    period?: string;
+    features: string[];
+    cta?: string;
+    highlighted?: boolean;
+  }
+
+  interface Props {
+    variant?: '2-column' | '3-column' | '4-column' | 'toggle';
+    size?: 'standard' | 'compact';
+    plans?: PricingPlan[];
+    highlightedPlan?: string;
+    billingPeriod?: 'monthly' | 'annual';
+    onToggle?: (period: string) => void;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = '3-column',
+    size = 'standard',
+    plans = [],
+    highlightedPlan,
+    billingPeriod = 'monthly',
+    onToggle,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-pricing',
+      `uds-pricing--${variant}`,
+      `uds-pricing--${size}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<div class={classes} {...rest}>
+  {#if variant === 'toggle'}
+    <div class="uds-pricing__toggle" role="group" aria-label="Billing period">
+      <button
+        class="uds-pricing__toggle-btn"
+        class:uds-pricing__toggle-btn--active={billingPeriod === 'monthly'}
+        onclick={() => onToggle?.('monthly')}
+      >
+        Monthly
+      </button>
+      <button
+        class="uds-pricing__toggle-btn"
+        class:uds-pricing__toggle-btn--active={billingPeriod === 'annual'}
+        onclick={() => onToggle?.('annual')}
+      >
+        Annual
+      </button>
+    </div>
+  {/if}
+  <div class="uds-pricing__plans">
+    {#each plans as plan}
+      <div
+        class="uds-pricing__plan"
+        class:uds-pricing__plan--highlighted={plan.highlighted || plan.name === highlightedPlan}
+      >
+        <h3 class="uds-pricing__plan-name">{plan.name}</h3>
+        <div class="uds-pricing__plan-price">{plan.price}</div>
+        {#if plan.period}
+          <div class="uds-pricing__plan-period">{plan.period}</div>
+        {/if}
+        <ul class="uds-pricing__features">
+          {#each plan.features as feature}
+            <li class="uds-pricing__feature">{feature}</li>
+          {/each}
+        </ul>
+        {#if plan.cta}
+          <button class="uds-pricing__cta">{plan.cta}</button>
+        {/if}
+      </div>
+    {/each}
+  </div>
+  {@render children?.()}
+</div>

package/src/components/ProgressIndicator.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'bar' | 'circular' | 'stepper';
+    size?: 'sm' | 'md' | 'lg';
+    value?: number;
+    max?: number;
+    label?: string;
+    showValue?: boolean;
+    indeterminate?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'bar',
+    size = 'md',
+    value = 0,
+    max = 100,
+    label = '',
+    showValue = false,
+    indeterminate = false,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let percentage = $derived(Math.min(Math.round((value / max) * 100), 100));
+
+  let classes = $derived(
+    [
+      'uds-progress',
+      `uds-progress--${variant}`,
+      `uds-progress--${size}`,
+      indeterminate && 'uds-progress--indeterminate',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  let circumference = $derived(2 * Math.PI * 40);
+  let strokeOffset = $derived(circumference - (percentage / 100) * circumference);
+</script>
+
+<div
+  class={classes}
+  role="progressbar"
+  aria-valuenow={indeterminate ? undefined : value}
+  aria-valuemin={0}
+  aria-valuemax={max}
+  aria-label={label || undefined}
+  {...rest}
+>
+  {#if variant === 'bar'}
+    <div class="uds-progress__track">
+      <div class="uds-progress__fill" style:width={indeterminate ? undefined : `${percentage}%`}></div>
+    </div>
+    {#if showValue && !indeterminate}
+      <span class="uds-progress__value">{percentage}%</span>
+    {/if}
+  {:else if variant === 'circular'}
+    <svg class="uds-progress__svg" viewBox="0 0 100 100">
+      <circle class="uds-progress__track-circle" cx="50" cy="50" r="40" fill="none" stroke-width="8" />
+      {#if !indeterminate}
+        <circle
+          class="uds-progress__fill-circle"
+          cx="50" cy="50" r="40"
+          fill="none"
+          stroke-width="8"
+          stroke-dasharray={circumference}
+          stroke-dashoffset={strokeOffset}
+          transform="rotate(-90 50 50)"
+        />
+      {/if}
+    </svg>
+    {#if showValue && !indeterminate}
+      <span class="uds-progress__value">{percentage}%</span>
+    {/if}
+  {:else if variant === 'stepper'}
+    {@render children?.()}
+  {/if}
+  {#if label}
+    <span class="uds-progress__label">{label}</span>
+  {/if}
+</div>