@lanrenbang/basecoat-ultra-svelte 0.1.0

package/dist/components/Pagination.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { onMount, createEventDispatcher } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  let {
+    total = 1,
+    current = $bindable(1),
+    onPageChange,
+    class: className = '',
+    prevIcon,
+    nextIcon,
+    ...rest
+  }: {
+    total: number;
+    current: number;
+    onPageChange?: (page: number) => void;
+    class?: string;
+    prevIcon?: Snippet;
+    nextIcon?: Snippet;
+    [key: string]: any;
+  } = $props();
+
+  const dispatch = createEventDispatcher<{
+    change: { page: number; previousPage: number; totalPages: number };
+    'basecoat:initialized': void;
+  }>();
+
+  let containerRef: HTMLElement;
+
+  const handlePageClick = (page: number) => {
+    if (page < 1 || page > total || page === current) return;
+    const previousPage = current;
+    current = page;
+    onPageChange?.(page);
+    dispatch('change', { page: current, previousPage, totalPages: total });
+  };
+
+  // Keyboard navigation
+  const handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      handlePageClick(current - 1);
+    } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      handlePageClick(current + 1);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      handlePageClick(1);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      handlePageClick(total);
+    }
+  };
+
+  // Expose API methods via element
+  onMount(() => {
+    if (containerRef) {
+      (containerRef as any).goToPage = (page: number) => handlePageClick(page);
+      (containerRef as any).getCurrentPage = () => current;
+      (containerRef as any).getTotalPages = () => total;
+    }
+    dispatch('basecoat:initialized');
+  });
+
+  const finalClass = $derived(['pagination flex items-center gap-1', className].filter(Boolean).join(' '));
+</script>
+
+<nav 
+  bind:this={containerRef}
+  class={finalClass} 
+  onkeydown={handleKeydown}
+  {...rest}
+>
+  <!-- Previous -->
+  <button 
+    type="button"
+    class="btn btn-ghost btn-icon" 
+    disabled={current <= 1}
+    aria-disabled={current <= 1 ? 'true' : undefined}
+    onclick={() => handlePageClick(current - 1)}
+    aria-label="Previous page"
+    data-pagination-prev
+  >
+    {#if prevIcon}
+      {@render prevIcon()}
+    {:else}
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+    {/if}
+  </button>
+
+  <!-- Pages -->
+  {#each Array.from({ length: total }, (_, i) => i + 1) as page}
+    <button 
+      type="button"
+      class={['btn w-9', current === page ? 'btn-outline' : 'btn-ghost'].join(' ')}
+      onclick={() => handlePageClick(page)}
+      aria-current={current === page ? 'page' : undefined}
+      data-pagination-page={page}
+    >
+      {page}
+    </button>
+  {/each}
+
+  <!-- Next -->
+  <button 
+    type="button"
+    class="btn btn-ghost btn-icon" 
+    disabled={current >= total}
+    aria-disabled={current >= total ? 'true' : undefined}
+    onclick={() => handlePageClick(current + 1)}
+    aria-label="Next page"
+    data-pagination-next
+  >
+    {#if nextIcon}
+      {@render nextIcon()}
+    {:else}
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+    {/if}
+  </button>
+</nav>

package/dist/components/Pagination.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    total: number;
+    current: number;
+    onPageChange?: (page: number) => void;
+    class?: string;
+    prevIcon?: Snippet;
+    nextIcon?: Snippet;
+    [key: string]: any;
+};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Pagination: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
+    change: CustomEvent<{
+        page: number;
+        previousPage: number;
+        totalPages: number;
+    }>;
+    'basecoat:initialized': CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "current">;
+type Pagination = InstanceType<typeof Pagination>;
+export default Pagination;

package/dist/components/Popover.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { onMount } from 'svelte';
+
+  let {
+    open = $bindable(false),
+    trigger,
+    children,
+    side = 'bottom',
+    align = 'start',
+    class: className = '',
+    contentClass = '',
+    ...rest
+  }: {
+    open?: boolean;
+    trigger: Snippet<{ open: boolean }>;
+    children: Snippet;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+    class?: string;
+    contentClass?: string;
+    [key: string]: any;
+  } = $props();
+
+  let container: HTMLDivElement;
+
+  // 点击外部关闭
+  function handleClickOutside(event: MouseEvent) {
+    if (open && container && !container.contains(event.target as Node)) {
+      open = false;
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  });
+</script>
+
+<div bind:this={container} class={['popover relative', className].filter(Boolean).join(' ')} {...rest}>
+  <div 
+    role="button" 
+    tabindex="0" 
+    aria-expanded={open}
+    onclick={(e) => { e.stopPropagation(); open = !open; }}
+    onkeydown={(e) => e.key === 'Enter' && (open = !open)}
+    class="inline-block"
+  >
+    {@render trigger({ open })}
+  </div>
+
+  {#if open}
+    <section 
+      data-popover 
+      aria-hidden={!open}
+      data-side={side}
+      data-align={align}
+      class={['absolute z-50 p-4 bg-popover text-popover-foreground rounded-md border shadow-md outline-none animate-in fade-in-0 zoom-in-95', contentClass].filter(Boolean).join(' ')}
+    >
+      {@render children()}
+    </section>
+  {/if}
+</div>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/popover.css";
+  @reference "../reference.css";
+</style>

package/dist/components/Popover.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    trigger: Snippet<{
+        open: boolean;
+    }>;
+    children: Snippet;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+    class?: string;
+    contentClass?: string;
+    [key: string]: any;
+};
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/Progress.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  let {
+    value = 0,
+    max = 100,
+    class: className = '',
+    ...rest
+  }: {
+    value?: number;
+    max?: number;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  const percentage = $derived(Math.min(Math.max((value / max) * 100, 0), 100));
+</script>
+
+<div class={['progress h-2 bg-muted rounded-full overflow-hidden w-full', className].filter(Boolean).join(' ')} {...rest}>
+  <div 
+    class="bg-primary h-full transition-all duration-300 ease-in-out" 
+    role="progressbar" 
+    aria-valuenow={value} 
+    aria-valuemin="0" 
+    aria-valuemax={max}
+    style="width: {percentage}%"
+  ></div>
+</div>

package/dist/components/Progress.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    value?: number;
+    max?: number;
+    class?: string;
+    [key: string]: any;
+};
+declare const Progress: import("svelte").Component<$$ComponentProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/Radio.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  let {
+    group = $bindable(),
+    value,
+    class: className = '',
+    ...rest
+  }: {
+    group?: any;
+    value?: any;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  const finalClass = $derived(['input', className].filter(Boolean).join(' '));
+</script>
+
+<input type="radio" class={finalClass} bind:group {value} {...rest} />
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/radio.css";
+  @reference "../reference.css";
+</style>

package/dist/components/Radio.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    group?: any;
+    value?: any;
+    class?: string;
+    [key: string]: any;
+};
+declare const Radio: import("svelte").Component<$$ComponentProps, {}, "group">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/components/Resizable.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import Split from 'split.js';
+  import type { Instance } from 'split.js';
+  import type { Snippet } from 'svelte';
+
+  let {
+    children,
+    direction = 'horizontal',
+    sizes,
+    minSize = 100,
+    gutterSize = 10,
+    class: className = '',
+    ...rest
+  }: {
+    children?: Snippet;
+    direction?: 'horizontal' | 'vertical';
+    sizes?: number[];
+    minSize?: number | number[];
+    gutterSize?: number;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  let container: HTMLDivElement;
+  let splitInstance: Instance;
+
+  const finalClass = $derived([
+    'resizable-group h-full flex', 
+    direction === 'vertical' ? 'flex-col' : 'flex-row',
+    className
+  ].filter(Boolean).join(' '));
+
+  onMount(() => {
+    const elements = Array.from(container.children).filter(el => !el.classList.contains('gutter')) as HTMLElement[];
+    if (elements.length < 2) return;
+
+    splitInstance = Split(elements, {
+      direction,
+      sizes,
+      minSize,
+      gutterSize,
+      gutter: (index, direction) => {
+        const gutter = document.createElement('div');
+        gutter.className = `gutter gutter-${direction}`;
+        return gutter;
+      }
+    });
+  });
+
+  onDestroy(() => {
+    splitInstance?.destroy();
+  });
+</script>
+
+<div 
+  bind:this={container} 
+  class={finalClass} 
+  {...rest}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  @reference "../reference.css";
+</style>

package/dist/components/Resizable.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    direction?: 'horizontal' | 'vertical';
+    sizes?: number[];
+    minSize?: number | number[];
+    gutterSize?: number;
+    class?: string;
+    [key: string]: any;
+};
+declare const Resizable: import("svelte").Component<$$ComponentProps, {}, "">;
+type Resizable = ReturnType<typeof Resizable>;
+export default Resizable;

package/dist/components/Select.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+
+  let {
+    value = $bindable(),
+    options = [],
+    placeholder = 'Select an option',
+    searchable = false,
+    searchPlaceholder = 'Search...',
+    class: className = '',
+    ...rest
+  }: {
+    value?: any;
+    options: Array<{ value: any; label: string; disabled?: boolean }>;
+    placeholder?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  let open = $state(false);
+  let searchTerm = $state('');
+  let activeIndex = $state(-1);
+  let container = $state<HTMLDivElement>();
+  let filterInput = $state<HTMLInputElement>();
+
+  const filteredOptions = $derived(
+    options.filter(opt => 
+      !searchTerm || opt.label.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+  );
+
+  const selectedLabel = $derived(
+    options.find(opt => opt.value === value)?.label || placeholder
+  );
+
+  async function toggleOpen() {
+    open = !open;
+    if (open) {
+      activeIndex = filteredOptions.findIndex(opt => opt.value === value);
+      await tick();
+      if (searchable) filterInput?.focus();
+      
+      // 自动滚动到选中项
+      const selectedEl = container.querySelector('[aria-selected="true"]');
+      selectedEl?.scrollIntoView({ block: 'nearest' });
+    } else {
+      searchTerm = '';
+    }
+  }
+
+  function handleSelect(option: typeof options[0]) {
+    if (option.disabled) return;
+    value = option.value;
+    open = false;
+    searchTerm = '';
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (!open) {
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
+        event.preventDefault();
+        toggleOpen();
+      }
+      return;
+    }
+
+    switch (event.key) {
+      case 'Escape':
+        open = false;
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (activeIndex >= 0 && activeIndex < filteredOptions.length) {
+          handleSelect(filteredOptions[activeIndex]);
+        }
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        activeIndex = (activeIndex + 1) % filteredOptions.length;
+        scrollToActive();
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        activeIndex = (activeIndex - 1 + filteredOptions.length) % filteredOptions.length;
+        scrollToActive();
+        break;
+    }
+  }
+
+  function scrollToActive() {
+    tick().then(() => {
+      const activeEl = container.querySelector('.active-option');
+      activeEl?.scrollIntoView({ block: 'nearest' });
+    });
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (open && container && !container.contains(event.target as Node)) {
+      open = false;
+      searchTerm = '';
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  });
+</script>
+
+<div bind:this={container} class={['select relative', className].filter(Boolean).join(' ')} {...rest}>
+  <button 
+    type="button" 
+    class="btn btn-outline w-full justify-between" 
+    aria-expanded={open}
+    aria-haspopup="listbox"
+    onclick={(e) => { e.stopPropagation(); toggleOpen(); }}
+    onkeydown={handleKeyDown}
+  >
+    <span class="truncate">{selectedLabel}</span>
+    <svg class="opacity-50 shrink-0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+  </button>
+
+  {#if open}
+    <section 
+      data-popover 
+      class="absolute z-50 w-full mt-1 bg-popover border rounded-md shadow-md animate-in fade-in-0 zoom-in-95 overflow-hidden"
+    >
+      {#if searchable}
+        <header class="flex items-center border-b px-3">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-50 mr-2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+          <input 
+            bind:this={filterInput}
+            bind:value={searchTerm}
+            type="text" 
+            placeholder={searchPlaceholder}
+            class="flex h-9 w-full bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground border-none focus:ring-0"
+            onkeydown={handleKeyDown}
+          />
+        </header>
+      {/if}
+
+      <div role="listbox" class="p-1 max-h-48 overflow-y-auto scrollbar">
+        {#if filteredOptions.length === 0}
+          <div class="px-2 py-4 text-center text-sm text-muted-foreground">
+            No results found.
+          </div>
+        {:else}
+          {#each filteredOptions as option, i}
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div 
+              role="option" 
+              tabindex="-1"
+              data-value={option.value}
+              aria-selected={value === option.value}
+              aria-disabled={option.disabled}
+              class={[
+                'relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
+                activeIndex === i ? 'bg-accent text-accent-foreground active-option' : '',
+                value === option.value ? 'bg-accent/50' : ''
+              ].join(' ')}
+              data-disabled={option.disabled}
+              onclick={() => handleSelect(option)}
+              onmouseenter={() => activeIndex = i}
+            >
+              {option.label}
+              {#if value === option.value}
+                <svg class="ml-auto size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+              {/if}
+            </div>
+          {/each}
+        {/if}
+      </div>
+    </section>
+  {/if}
+</div>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/select.css";
+  @reference "../reference.css";
+</style>

package/dist/components/Select.svelte.d.ts

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    value?: any;
+    options: Array<{
+        value: any;
+        label: string;
+        disabled?: boolean;
+    }>;
+    placeholder?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    class?: string;
+    [key: string]: any;
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  let {
+    orientation = 'horizontal',
+    class: className = '',
+    ...rest
+  }: {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  const finalClass = $derived([
+    'shrink-0 bg-border',
+    orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+    className
+  ].filter(Boolean).join(' '));
+</script>
+
+<hr class={finalClass} aria-orientation={orientation} {...rest} />

package/dist/components/Separator.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    [key: string]: any;
+};
+declare const Separator: import("svelte").Component<$$ComponentProps, {}, "">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;