@mkatogui/uds-svelte 0.2.1

package/src/components/Radio.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    variant?: 'standard' | 'card';
+    options?: RadioOption[];
+    name?: string;
+    value?: string;
+    legend?: string;
+    disabled?: boolean;
+    class?: string;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'standard',
+    options = [],
+    name = '',
+    value = $bindable(''),
+    legend = '',
+    disabled = false,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let groupId = $derived(`uds-radio-${Math.random().toString(36).slice(2, 9)}`);
+
+  let classes = $derived(
+    [
+      'uds-radio',
+      `uds-radio--${variant}`,
+      disabled && 'uds-radio--disabled',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<fieldset class={classes} {...rest}>
+  {#if legend}
+    <legend class="uds-radio__legend">{legend}</legend>
+  {/if}
+  {#each options as option, i}
+    <div class="uds-radio__option" class:uds-radio__option--card={variant === 'card'}>
+      <input
+        class="uds-radio__input"
+        type="radio"
+        id="{groupId}-{i}"
+        {name}
+        value={option.value}
+        checked={value === option.value}
+        disabled={disabled || option.disabled}
+        aria-checked={value === option.value}
+        onchange={() => (value = option.value)}
+      />
+      <label class="uds-radio__label" for="{groupId}-{i}">{option.label}</label>
+    </div>
+  {/each}
+</fieldset>

package/src/components/Select.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    variant?: 'native' | 'custom';
+    size?: 'sm' | 'md' | 'lg';
+    options?: SelectOption[];
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    label?: string;
+    errorText?: string;
+    value?: string;
+    id?: string;
+    class?: string;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'native',
+    size = 'md',
+    options = [],
+    placeholder = '',
+    required = false,
+    disabled = false,
+    label = '',
+    errorText = '',
+    value = $bindable(''),
+    id,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let selectId = $derived(id || `uds-select-${Math.random().toString(36).slice(2, 9)}`);
+  let errorId = $derived(`${selectId}-error`);
+  let isError = $derived(!!errorText);
+
+  let classes = $derived(
+    [
+      'uds-select',
+      `uds-select--${variant}`,
+      `uds-select--${size}`,
+      isError && 'uds-select--error',
+      disabled && 'uds-select--disabled',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<div class={classes}>
+  {#if label}
+    <label class="uds-select__label" for={selectId}>
+      {label}
+      {#if required}
+        <span class="uds-select__required" aria-hidden="true">*</span>
+      {/if}
+    </label>
+  {/if}
+  <select
+    class="uds-select__field"
+    id={selectId}
+    bind:value
+    {required}
+    {disabled}
+    aria-invalid={isError || undefined}
+    aria-describedby={errorText ? errorId : undefined}
+    {...rest}
+  >
+    {#if placeholder}
+      <option value="" disabled selected>{placeholder}</option>
+    {/if}
+    {#each options as option}
+      <option value={option.value} disabled={option.disabled}>{option.label}</option>
+    {/each}
+  </select>
+  {#if errorText}
+    <p class="uds-select__error" id={errorId} role="alert">{errorText}</p>
+  {/if}
+</div>

package/src/components/SideNavigation.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  interface NavItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: string;
+    children?: NavItem[];
+  }
+
+  interface NavSection {
+    title: string;
+    items: NavItem[];
+  }
+
+  interface Props {
+    variant?: 'default' | 'collapsed' | 'with-sections';
+    collapsed?: boolean;
+    items?: NavItem[];
+    sections?: NavSection[];
+    activeItem?: string;
+    onNavigate?: (itemId: string) => void;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'default',
+    collapsed = false,
+    items = [],
+    sections = [],
+    activeItem = '',
+    onNavigate,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let expandedItems = $state<Set<string>>(new Set());
+
+  let classes = $derived(
+    [
+      'uds-side-nav',
+      `uds-side-nav--${variant}`,
+      collapsed && 'uds-side-nav--collapsed',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  function toggleExpand(id: string) {
+    if (expandedItems.has(id)) {
+      expandedItems.delete(id);
+    } else {
+      expandedItems.add(id);
+    }
+    expandedItems = new Set(expandedItems);
+  }
+
+  function handleNavigate(item: NavItem) {
+    onNavigate?.(item.id);
+  }
+</script>
+
+<nav class={classes} aria-label="Side navigation" {...rest}>
+  {#if variant === 'with-sections' && sections.length > 0}
+    {#each sections as section}
+      <div class="uds-side-nav__section">
+        <h3 class="uds-side-nav__section-title">{section.title}</h3>
+        <ul class="uds-side-nav__list">
+          {#each section.items as item}
+            <li class="uds-side-nav__item" class:uds-side-nav__item--active={activeItem === item.id}>
+              <a
+                class="uds-side-nav__link"
+                href={item.href || '#'}
+                aria-current={activeItem === item.id ? 'page' : undefined}
+                onclick={(e) => { if (!item.href) e.preventDefault(); handleNavigate(item); }}
+              >
+                {item.label}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/each}
+  {:else}
+    <ul class="uds-side-nav__list">
+      {#each items as item}
+        <li class="uds-side-nav__item" class:uds-side-nav__item--active={activeItem === item.id}>
+          {#if item.children && item.children.length > 0}
+            <button
+              class="uds-side-nav__link uds-side-nav__link--expandable"
+              aria-expanded={expandedItems.has(item.id)}
+              onclick={() => toggleExpand(item.id)}
+            >
+              {item.label}
+            </button>
+            {#if expandedItems.has(item.id)}
+              <ul class="uds-side-nav__sublist">
+                {#each item.children as child}
+                  <li class="uds-side-nav__item" class:uds-side-nav__item--active={activeItem === child.id}>
+                    <a
+                      class="uds-side-nav__link"
+                      href={child.href || '#'}
+                      aria-current={activeItem === child.id ? 'page' : undefined}
+                      onclick={(e) => { if (!child.href) e.preventDefault(); handleNavigate(child); }}
+                    >
+                      {child.label}
+                    </a>
+                  </li>
+                {/each}
+              </ul>
+            {/if}
+          {:else}
+            <a
+              class="uds-side-nav__link"
+              href={item.href || '#'}
+              aria-current={activeItem === item.id ? 'page' : undefined}
+              onclick={(e) => { if (!item.href) e.preventDefault(); handleNavigate(item); }}
+            >
+              {item.label}
+            </a>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+  {@render children?.()}
+</nav>

package/src/components/Skeleton.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'text' | 'card' | 'avatar' | 'table';
+    size?: 'sm' | 'md' | 'lg';
+    lines?: number;
+    animated?: boolean;
+    class?: string;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'text',
+    size = 'md',
+    lines = 3,
+    animated = true,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-skeleton',
+      `uds-skeleton--${variant}`,
+      `uds-skeleton--${size}`,
+      animated && 'uds-skeleton--animated',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<div class={classes} aria-hidden="true" {...rest}>
+  {#if variant === 'text'}
+    {#each Array(lines) as _, i}
+      <div class="uds-skeleton__line" style:width={i === lines - 1 ? '60%' : '100%'}></div>
+    {/each}
+  {:else if variant === 'card'}
+    <div class="uds-skeleton__image"></div>
+    <div class="uds-skeleton__line" style:width="80%"></div>
+    <div class="uds-skeleton__line" style:width="60%"></div>
+  {:else if variant === 'avatar'}
+    <div class="uds-skeleton__circle"></div>
+  {:else if variant === 'table'}
+    {#each Array(lines) as _}
+      <div class="uds-skeleton__row">
+        <div class="uds-skeleton__cell"></div>
+        <div class="uds-skeleton__cell"></div>
+        <div class="uds-skeleton__cell"></div>
+      </div>
+    {/each}
+  {/if}
+</div>

package/src/components/SocialProofBar.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  interface Logo {
+    src: string;
+    alt: string;
+    href?: string;
+  }
+
+  interface Stat {
+    value: string;
+    label: string;
+  }
+
+  interface Testimonial {
+    quote: string;
+    author: string;
+  }
+
+  interface Props {
+    variant?: 'logo-strip' | 'stats-counter' | 'testimonial-mini' | 'combined';
+    size?: 'standard' | 'compact';
+    logos?: Logo[];
+    stats?: Stat[];
+    testimonials?: Testimonial[];
+    animated?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'logo-strip',
+    size = 'standard',
+    logos = [],
+    stats = [],
+    testimonials = [],
+    animated = false,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-social-proof',
+      `uds-social-proof--${variant}`,
+      `uds-social-proof--${size}`,
+      animated && 'uds-social-proof--animated',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<div class={classes} {...rest}>
+  {#if logos.length > 0}
+    <div class="uds-social-proof__logos">
+      {#each logos as logo}
+        {#if logo.href}
+          <a href={logo.href} class="uds-social-proof__logo-link">
+            <img src={logo.src} alt={logo.alt} class="uds-social-proof__logo" />
+          </a>
+        {:else}
+          <img src={logo.src} alt={logo.alt} class="uds-social-proof__logo" />
+        {/if}
+      {/each}
+    </div>
+  {/if}
+  {#if stats.length > 0}
+    <div class="uds-social-proof__stats">
+      {#each stats as stat}
+        <div class="uds-social-proof__stat">
+          <span class="uds-social-proof__stat-value">{stat.value}</span>
+          <span class="uds-social-proof__stat-label">{stat.label}</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+  {#if testimonials.length > 0}
+    <div class="uds-social-proof__testimonials">
+      {#each testimonials as testimonial}
+        <blockquote class="uds-social-proof__testimonial">
+          <p>{testimonial.quote}</p>
+          <cite>{testimonial.author}</cite>
+        </blockquote>
+      {/each}
+    </div>
+  {/if}
+  {@render children?.()}
+</div>

package/src/components/Tabs.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  interface TabItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    variant?: 'line' | 'pill' | 'segmented';
+    size?: 'sm' | 'md' | 'lg';
+    tabs?: TabItem[];
+    activeTab?: string;
+    onChange?: (tabId: string) => void;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'line',
+    size = 'md',
+    tabs = [],
+    activeTab = $bindable(''),
+    onChange,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-tabs',
+      `uds-tabs--${variant}`,
+      `uds-tabs--${size}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  function handleTabClick(tabId: string) {
+    activeTab = tabId;
+    onChange?.(tabId);
+  }
+
+  function handleKeydown(event: KeyboardEvent, index: number) {
+    const enabledTabs = tabs.filter((t) => !t.disabled);
+    const currentIndex = enabledTabs.findIndex((t) => t.id === tabs[index].id);
+
+    let nextIndex: number | undefined;
+    if (event.key === 'ArrowRight') {
+      nextIndex = (currentIndex + 1) % enabledTabs.length;
+    } else if (event.key === 'ArrowLeft') {
+      nextIndex = (currentIndex - 1 + enabledTabs.length) % enabledTabs.length;
+    }
+
+    if (nextIndex !== undefined) {
+      event.preventDefault();
+      handleTabClick(enabledTabs[nextIndex].id);
+      const btn = (event.currentTarget as HTMLElement)
+        .parentElement?.querySelectorAll('[role="tab"]:not([disabled])')[nextIndex] as HTMLElement;
+      btn?.focus();
+    }
+  }
+</script>
+
+<div class={classes} {...rest}>
+  <div class="uds-tabs__list" role="tablist">
+    {#each tabs as tab, i}
+      <button
+        class="uds-tabs__tab"
+        class:uds-tabs__tab--active={activeTab === tab.id}
+        role="tab"
+        id="tab-{tab.id}"
+        aria-selected={activeTab === tab.id}
+        aria-controls="tabpanel-{tab.id}"
+        disabled={tab.disabled}
+        tabindex={activeTab === tab.id ? 0 : -1}
+        onclick={() => handleTabClick(tab.id)}
+        onkeydown={(e) => handleKeydown(e, i)}
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+  {#each tabs as tab}
+    <div
+      class="uds-tabs__panel"
+      class:uds-tabs__panel--active={activeTab === tab.id}
+      role="tabpanel"
+      id="tabpanel-{tab.id}"
+      aria-labelledby="tab-{tab.id}"
+      hidden={activeTab !== tab.id}
+    >
+      {#if activeTab === tab.id}
+        {@render children?.()}
+      {/if}
+    </div>
+  {/each}
+</div>

package/src/components/TestimonialCard.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'quote-card' | 'video' | 'metric' | 'carousel';
+    size?: 'sm' | 'md' | 'lg';
+    quote?: string;
+    avatar?: string;
+    name?: string;
+    title?: string;
+    company?: string;
+    rating?: number;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'quote-card',
+    size = 'md',
+    quote = '',
+    avatar,
+    name = '',
+    title: jobTitle = '',
+    company = '',
+    rating,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-testimonial',
+      `uds-testimonial--${variant}`,
+      `uds-testimonial--${size}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<blockquote class={classes} {...rest}>
+  {#if quote}
+    <p class="uds-testimonial__quote">{quote}</p>
+  {/if}
+  {@render children?.()}
+  <footer class="uds-testimonial__footer">
+    {#if avatar}
+      <img class="uds-testimonial__avatar" src={avatar} alt={name} />
+    {/if}
+    <div class="uds-testimonial__attribution">
+      {#if name}
+        <cite class="uds-testimonial__name">{name}</cite>
+      {/if}
+      {#if jobTitle || company}
+        <span class="uds-testimonial__role">
+          {jobTitle}{#if jobTitle && company}, {/if}{company}
+        </span>
+      {/if}
+    </div>
+    {#if rating != null}
+      <div class="uds-testimonial__rating" aria-label={`${rating} out of 5 stars`}>
+        {#each Array(5) as _, i}
+          <span class="uds-testimonial__star" class:uds-testimonial__star--filled={i < rating} aria-hidden="true">
+            {i < rating ? '\u2605' : '\u2606'}
+          </span>
+        {/each}
+      </div>
+    {/if}
+  </footer>
+</blockquote>

package/src/components/Toast.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'success' | 'error' | 'warning' | 'info' | 'neutral';
+    size?: 'sm' | 'md' | 'lg';
+    message?: string;
+    duration?: number;
+    action?: string;
+    onDismiss?: () => void;
+    onAction?: () => void;
+    visible?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'info',
+    size = 'md',
+    message = '',
+    duration = 5000,
+    action,
+    onDismiss,
+    onAction,
+    visible = true,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let state = $state<'entering' | 'visible' | 'exiting'>('entering');
+
+  let toastRole = $derived(
+    variant === 'error' || variant === 'warning' ? 'alert' : 'status'
+  );
+
+  let classes = $derived(
+    [
+      'uds-toast',
+      `uds-toast--${variant}`,
+      `uds-toast--${size}`,
+      `uds-toast--${state}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  $effect(() => {
+    if (!visible) return;
+    const enterTimer = setTimeout(() => (state = 'visible'), 50);
+    let exitTimer: ReturnType<typeof setTimeout> | undefined;
+    if (duration > 0) {
+      exitTimer = setTimeout(() => {
+        state = 'exiting';
+        setTimeout(() => onDismiss?.(), 300);
+      }, duration);
+    }
+    return () => {
+      clearTimeout(enterTimer);
+      if (exitTimer) clearTimeout(exitTimer);
+    };
+  });
+
+  function handleDismiss() {
+    state = 'exiting';
+    setTimeout(() => onDismiss?.(), 300);
+  }
+</script>
+
+{#if visible}
+  <div class={classes} role={toastRole} {...rest}>
+    <p class="uds-toast__message">{message}</p>
+    {@render children?.()}
+    <div class="uds-toast__actions">
+      {#if action}
+        <button class="uds-toast__action" onclick={onAction}>{action}</button>
+      {/if}
+      <button class="uds-toast__dismiss" onclick={handleDismiss} aria-label="Dismiss notification">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+  </div>
+{/if}