@mkatogui/uds-svelte 0.2.1

package/src/components/CommandPalette.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  interface CommandAction {
+    id: string;
+    label: string;
+    group?: string;
+    shortcut?: string;
+    icon?: string;
+  }
+
+  interface Props {
+    open?: boolean;
+    actions?: CommandAction[];
+    groups?: string[];
+    placeholder?: string;
+    recentLimit?: number;
+    onSelect?: (actionId: string) => void;
+    onClose?: () => void;
+    class?: string;
+    [key: string]: any;
+  }
+
+  let {
+    open = false,
+    actions = [],
+    groups = [],
+    placeholder = 'Type a command...',
+    recentLimit = 5,
+    onSelect,
+    onClose,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let query = $state('');
+  let activeIndex = $state(0);
+
+  let classes = $derived(
+    [
+      'uds-command-palette',
+      open && 'uds-command-palette--open',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  let filteredActions = $derived(
+    query
+      ? actions.filter((a) => a.label.toLowerCase().includes(query.toLowerCase()))
+      : actions.slice(0, recentLimit)
+  );
+
+  let groupedActions = $derived(() => {
+    if (groups.length === 0) return [{ group: '', actions: filteredActions }];
+    const grouped: { group: string; actions: CommandAction[] }[] = [];
+    for (const group of groups) {
+      const items = filteredActions.filter((a) => a.group === group);
+      if (items.length > 0) grouped.push({ group, actions: items });
+    }
+    const ungrouped = filteredActions.filter((a) => !a.group || !groups.includes(a.group));
+    if (ungrouped.length > 0) grouped.push({ group: '', actions: ungrouped });
+    return grouped;
+  });
+
+  function handleSelect(action: CommandAction) {
+    onSelect?.(action.id);
+    query = '';
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      activeIndex = Math.min(activeIndex + 1, filteredActions.length - 1);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      activeIndex = Math.max(activeIndex - 1, 0);
+    } else if (event.key === 'Enter' && filteredActions[activeIndex]) {
+      event.preventDefault();
+      handleSelect(filteredActions[activeIndex]);
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      onClose?.();
+    }
+  }
+
+  $effect(() => {
+    activeIndex = 0;
+  });
+</script>
+
+{#if open}
+  <div class="uds-command-palette__overlay" onclick={onClose} aria-hidden="true"></div>
+  <div class={classes} role="dialog" aria-label="Command palette" {...rest}>
+    <div class="uds-command-palette__input-wrapper">
+      <input
+        class="uds-command-palette__input"
+        type="text"
+        bind:value={query}
+        {placeholder}
+        role="combobox"
+        aria-expanded="true"
+        aria-controls="command-palette-list"
+        aria-activedescendant={filteredActions[activeIndex] ? `command-${filteredActions[activeIndex].id}` : undefined}
+        onkeydown={handleKeydown}
+      />
+    </div>
+    <ul class="uds-command-palette__list" id="command-palette-list" role="listbox">
+      {#each groupedActions() as group}
+        {#if group.group}
+          <li class="uds-command-palette__group-label" role="presentation">{group.group}</li>
+        {/if}
+        {#each group.actions as action, i}
+          <li
+            class="uds-command-palette__item"
+            class:uds-command-palette__item--active={filteredActions.indexOf(action) === activeIndex}
+            id="command-{action.id}"
+            role="option"
+            aria-selected={filteredActions.indexOf(action) === activeIndex}
+            onclick={() => handleSelect(action)}
+          >
+            <span class="uds-command-palette__item-label">{action.label}</span>
+            {#if action.shortcut}
+              <kbd class="uds-command-palette__shortcut">{action.shortcut}</kbd>
+            {/if}
+          </li>
+        {/each}
+      {/each}
+      {#if filteredActions.length === 0}
+        <li class="uds-command-palette__empty" role="presentation">No results found</li>
+      {/if}
+    </ul>
+  </div>
+{/if}

package/src/components/DataTable.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  interface Column {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    width?: string;
+  }
+
+  interface Props {
+    variant?: 'basic' | 'sortable' | 'selectable' | 'expandable';
+    density?: 'compact' | 'default' | 'comfortable';
+    columns?: Column[];
+    data?: Record<string, any>[];
+    sortable?: boolean;
+    selectable?: boolean;
+    sortKey?: string;
+    sortDirection?: 'asc' | 'desc';
+    selectedRows?: Set<number>;
+    onSort?: (key: string, direction: 'asc' | 'desc') => void;
+    onSelect?: (selected: Set<number>) => void;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'basic',
+    density = 'default',
+    columns = [],
+    data = [],
+    sortable = false,
+    selectable = false,
+    sortKey = '',
+    sortDirection = 'asc',
+    selectedRows = new Set<number>(),
+    onSort,
+    onSelect,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-data-table',
+      `uds-data-table--${variant}`,
+      `uds-data-table--${density}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  function handleSort(key: string) {
+    const direction = sortKey === key && sortDirection === 'asc' ? 'desc' : 'asc';
+    onSort?.(key, direction);
+  }
+
+  function handleSelectAll() {
+    if (selectedRows.size === data.length) {
+      onSelect?.(new Set());
+    } else {
+      onSelect?.(new Set(data.map((_, i) => i)));
+    }
+  }
+
+  function handleSelectRow(index: number) {
+    const next = new Set(selectedRows);
+    if (next.has(index)) {
+      next.delete(index);
+    } else {
+      next.add(index);
+    }
+    onSelect?.(next);
+  }
+</script>
+
+<div class={classes} {...rest}>
+  <table class="uds-data-table__table" role="table">
+    <thead class="uds-data-table__head">
+      <tr>
+        {#if selectable}
+          <th class="uds-data-table__th uds-data-table__th--select" scope="col">
+            <input
+              type="checkbox"
+              checked={selectedRows.size === data.length && data.length > 0}
+              onchange={handleSelectAll}
+              aria-label="Select all rows"
+            />
+          </th>
+        {/if}
+        {#each columns as column}
+          <th
+            class="uds-data-table__th"
+            scope="col"
+            aria-sort={sortKey === column.key ? (sortDirection === 'asc' ? 'ascending' : 'descending') : undefined}
+            style:width={column.width}
+          >
+            {#if (sortable || column.sortable) && variant !== 'basic'}
+              <button class="uds-data-table__sort" onclick={() => handleSort(column.key)}>
+                {column.label}
+                <span class="uds-data-table__sort-icon" aria-hidden="true"></span>
+              </button>
+            {:else}
+              {column.label}
+            {/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody class="uds-data-table__body">
+      {#if data.length === 0}
+        <tr>
+          <td class="uds-data-table__empty" colspan={columns.length + (selectable ? 1 : 0)}>
+            No data available
+          </td>
+        </tr>
+      {:else}
+        {#each data as row, i}
+          <tr class="uds-data-table__row" class:uds-data-table__row--selected={selectedRows.has(i)}>
+            {#if selectable}
+              <td class="uds-data-table__td uds-data-table__td--select">
+                <input
+                  type="checkbox"
+                  checked={selectedRows.has(i)}
+                  onchange={() => handleSelectRow(i)}
+                  aria-label="Select row {i + 1}"
+                />
+              </td>
+            {/if}
+            {#each columns as column}
+              <td class="uds-data-table__td">{row[column.key] ?? ''}</td>
+            {/each}
+          </tr>
+        {/each}
+      {/if}
+    </tbody>
+  </table>
+  {@render children?.()}
+</div>

package/src/components/DatePicker.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'single' | 'range' | 'with-time';
+    size?: 'md' | 'lg';
+    value?: string;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    locale?: string;
+    placeholder?: string;
+    label?: string;
+    id?: string;
+    onChange?: (value: string) => void;
+    class?: string;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'single',
+    size = 'md',
+    value = $bindable(''),
+    min,
+    max,
+    disabled = false,
+    locale = 'en-US',
+    placeholder = 'Select date',
+    label = '',
+    id,
+    onChange,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  let pickerId = $derived(id || `uds-date-picker-${Math.random().toString(36).slice(2, 9)}`);
+
+  let classes = $derived(
+    [
+      'uds-date-picker',
+      `uds-date-picker--${variant}`,
+      `uds-date-picker--${size}`,
+      disabled && 'uds-date-picker--disabled',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  let inputType = $derived(variant === 'with-time' ? 'datetime-local' : 'date');
+
+  function handleChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    value = target.value;
+    onChange?.(value);
+  }
+</script>
+
+<div class={classes} {...rest}>
+  {#if label}
+    <label class="uds-date-picker__label" for={pickerId}>{label}</label>
+  {/if}
+  <input
+    class="uds-date-picker__input"
+    type={inputType}
+    id={pickerId}
+    {value}
+    {min}
+    {max}
+    {disabled}
+    {placeholder}
+    aria-label={label || placeholder}
+    onchange={handleChange}
+  />
+</div>

package/src/components/DropdownMenu.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  interface DropdownItem {
+    id: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    separator?: boolean;
+  }
+
+  interface Props {
+    variant?: 'action' | 'context' | 'nav-sub';
+    size?: 'sm' | 'md' | 'lg';
+    items?: DropdownItem[];
+    position?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    onSelect?: (itemId: string) => void;
+    class?: string;
+    trigger?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'action',
+    size = 'md',
+    items = [],
+    position = 'bottom-start',
+    onSelect,
+    class: className = '',
+    trigger,
+    ...rest
+  }: Props = $props();
+
+  let open = $state(false);
+  let activeIndex = $state(-1);
+
+  let classes = $derived(
+    [
+      'uds-dropdown',
+      `uds-dropdown--${variant}`,
+      `uds-dropdown--${size}`,
+      `uds-dropdown--${position}`,
+      open && 'uds-dropdown--open',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  function toggleMenu() {
+    open = !open;
+    if (open) activeIndex = -1;
+  }
+
+  function selectItem(item: DropdownItem) {
+    if (!item.disabled && !item.separator) {
+      onSelect?.(item.id);
+      open = false;
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!open) return;
+    const enabledItems = items.filter((item) => !item.disabled && !item.separator);
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      activeIndex = (activeIndex + 1) % enabledItems.length;
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      activeIndex = (activeIndex - 1 + enabledItems.length) % enabledItems.length;
+    } else if (event.key === 'Enter' && activeIndex >= 0) {
+      event.preventDefault();
+      selectItem(enabledItems[activeIndex]);
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      open = false;
+    }
+  }
+</script>
+
+<div class={classes} onkeydown={handleKeydown} {...rest}>
+  <button
+    class="uds-dropdown__trigger"
+    aria-haspopup="true"
+    aria-expanded={open}
+    onclick={toggleMenu}
+  >
+    {#if trigger}
+      {@render trigger()}
+    {:else}
+      Menu
+    {/if}
+  </button>
+  {#if open}
+    <ul class="uds-dropdown__menu" role="menu">
+      {#each items as item, i}
+        {#if item.separator}
+          <li class="uds-dropdown__separator" role="separator"></li>
+        {:else}
+          <li
+            class="uds-dropdown__item"
+            class:uds-dropdown__item--disabled={item.disabled}
+            class:uds-dropdown__item--active={i === activeIndex}
+            role="menuitem"
+            aria-disabled={item.disabled || undefined}
+            onclick={() => selectItem(item)}
+          >
+            {item.label}
+          </li>
+        {/if}
+      {/each}
+    </ul>
+  {/if}
+</div>

package/src/components/FeatureCard.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'icon-top' | 'image-top' | 'horizontal' | 'stat-card' | 'dashboard-preview';
+    size?: 'sm' | 'md' | 'lg';
+    title?: string;
+    description?: string;
+    link?: string;
+    image?: string;
+    imageAlt?: string;
+    class?: string;
+    icon?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'icon-top',
+    size = 'md',
+    title = '',
+    description = '',
+    link,
+    image,
+    imageAlt = '',
+    class: className = '',
+    icon,
+    children,
+    ...rest
+  }: Props = $props();
+
+  let classes = $derived(
+    [
+      'uds-card',
+      `uds-card--${variant}`,
+      `uds-card--${size}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<div class={classes} {...rest}>
+  {#if icon}
+    <div class="uds-card__icon">
+      {@render icon()}
+    </div>
+  {/if}
+  {#if image}
+    <img class="uds-card__image" src={image} alt={imageAlt} />
+  {/if}
+  <div class="uds-card__body">
+    {#if title}
+      <h3 class="uds-card__title">{title}</h3>
+    {/if}
+    {#if description}
+      <p class="uds-card__description">{description}</p>
+    {/if}
+    {@render children?.()}
+  </div>
+  {#if link}
+    <a class="uds-card__link" href={link}>Learn more</a>
+  {/if}
+</div>

package/src/components/FileUpload.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  interface Props {
+    variant?: 'dropzone' | 'button' | 'avatar-upload';
+    size?: 'sm' | 'md' | 'lg';
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    state?: 'idle' | 'drag-over' | 'uploading' | 'success' | 'error';
+    label?: string;
+    onUpload?: (files: FileList) => void;
+    onRemove?: (index: number) => void;
+    class?: string;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    variant = 'dropzone',
+    size = 'md',
+    accept,
+    maxSize,
+    maxFiles = 1,
+    multiple = false,
+    disabled = false,
+    state = 'idle',
+    label = 'Upload file',
+    onUpload,
+    onRemove,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  let dragOver = $state(false);
+  let inputId = $derived(`uds-file-upload-${Math.random().toString(36).slice(2, 9)}`);
+
+  let currentState = $derived(dragOver ? 'drag-over' : state);
+
+  let classes = $derived(
+    [
+      'uds-file-upload',
+      `uds-file-upload--${variant}`,
+      `uds-file-upload--${size}`,
+      `uds-file-upload--${currentState}`,
+      disabled && 'uds-file-upload--disabled',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+
+  function handleFileChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files.length > 0) {
+      onUpload?.(target.files);
+    }
+  }
+
+  function handleDrop(event: DragEvent) {
+    event.preventDefault();
+    dragOver = false;
+    if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
+      onUpload?.(event.dataTransfer.files);
+    }
+  }
+
+  function handleDragOver(event: DragEvent) {
+    event.preventDefault();
+    dragOver = true;
+  }
+
+  function handleDragLeave() {
+    dragOver = false;
+  }
+</script>
+
+<div class={classes} {...rest}>
+  {#if variant === 'dropzone'}
+    <div
+      class="uds-file-upload__dropzone"
+      role="button"
+      tabindex="0"
+      aria-label={label}
+      ondrop={handleDrop}
+      ondragover={handleDragOver}
+      ondragleave={handleDragLeave}
+      onclick={() => document.getElementById(inputId)?.click()}
+      onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); document.getElementById(inputId)?.click(); } }}
+    >
+      <p class="uds-file-upload__text">{label}</p>
+      <p class="uds-file-upload__hint">Drag and drop or click to browse</p>
+      {@render children?.()}
+    </div>
+  {:else}
+    <button
+      class="uds-file-upload__button"
+      type="button"
+      {disabled}
+      onclick={() => document.getElementById(inputId)?.click()}
+    >
+      {label}
+    </button>
+  {/if}
+  <input
+    class="uds-file-upload__input"
+    type="file"
+    id={inputId}
+    {accept}
+    {multiple}
+    {disabled}
+    aria-label={label}
+    onchange={handleFileChange}
+    style="display:none"
+  />
+  {#if currentState === 'uploading'}
+    <div class="uds-file-upload__progress" aria-live="polite">Uploading...</div>
+  {/if}
+</div>