@lanrenbang/basecoat-ultra-svelte 0.1.0

package/dist/components/Accordion.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    items = [],
+    multiple = false,
+    class: className = '',
+    ...rest
+  }: {
+    items: Array<{ title: string | Snippet; content: string | Snippet; open?: boolean }>;
+    multiple?: boolean;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  // Track open state for each item - use $derived for reactive initialization
+  let openStates = $state<boolean[]>([]);
+  
+  // Initialize open states when items change
+  $effect(() => {
+    if (openStates.length !== items.length) {
+      openStates = items.map(item => item.open ?? false);
+    }
+  });
+
+  function handleToggle(index: number) {
+    if (multiple) {
+      // Multiple mode: just toggle the clicked item
+      openStates[index] = !openStates[index];
+    } else {
+      // Single mode: close all others, toggle clicked
+      openStates = openStates.map((_, i) => i === index ? !openStates[index] : false);
+    }
+  }
+</script>
+
+<section class={['accordion', className].filter(Boolean).join(' ')} {...rest}>
+  {#each items as item, index}
+    <details class="group border-b last:border-b-0" open={openStates[index]}>
+      <summary 
+        class="w-full flex items-center justify-between py-4 text-sm font-medium hover:underline cursor-pointer outline-none"
+        onclick={(e) => { e.preventDefault(); handleToggle(index); }}
+      >
+        {#if typeof item.title === 'string'}
+          {item.title}
+        {:else}
+          {@render item.title()}
+        {/if}
+        <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" class="transition-transform duration-200 group-open:rotate-180 text-muted-foreground"><path d="m6 9 6 6 6-6"/></svg>
+      </summary>
+      <div class="pb-4 text-sm text-muted-foreground">
+        {#if typeof item.content === 'string'}
+          {item.content}
+        {:else}
+          {@render item.content()}
+        {/if}
+      </div>
+    </details>
+  {/each}
+</section>
+
+<style>
+  @reference "../reference.css";
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    items: Array<{
+        title: string | Snippet;
+        content: string | Snippet;
+        open?: boolean;
+    }>;
+    multiple?: boolean;
+    class?: string;
+    [key: string]: any;
+};
+declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/Alert.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    children,
+    icon,
+    title,
+    variant = 'default',
+    class: className = '',
+    ...rest
+  }: {
+    children?: Snippet;
+    icon?: Snippet;
+    title?: Snippet | string;
+    variant?: 'default' | 'destructive';
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  const baseClass = $derived(variant === 'destructive' ? 'alert-destructive' : 'alert');
+  const finalClass = $derived([baseClass, className]
+    .filter(Boolean)
+    .join(' '));
+</script>
+
+<div role="alert" class={finalClass} {...rest}>
+  {#if icon}
+    {@render icon()}
+  {/if}
+  
+  {#if title}
+    {#if typeof title === 'string'}
+      <strong data-title>{title}</strong>
+    {:else}
+      <div data-title>
+        {@render title()}
+      </div>
+    {/if}
+  {/if}
+
+  {#if children}
+    <section>
+      {@render children()}
+    </section>
+  {/if}
+</div>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/alert.css";
+  @reference "../reference.css";
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    icon?: Snippet;
+    title?: Snippet | string;
+    variant?: 'default' | 'destructive';
+    class?: string;
+    [key: string]: any;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/Avatar.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    src,
+    alt = 'Avatar',
+    fallback,
+    class: className = '',
+    size = 'md',
+    rounded = 'full',
+    ...rest
+  }: {
+    src?: string;
+    alt?: string;
+    fallback?: Snippet | string;
+    class?: string;
+    size?: 'sm' | 'md' | 'lg' | string;
+    rounded?: 'full' | 'lg' | 'md' | 'sm' | 'none';
+    [key: string]: any;
+  } = $props();
+
+  const sizeMap: Record<string, string> = {
+    sm: 'size-8',
+    md: 'size-10',
+    lg: 'size-12'
+  };
+
+  const roundedMap: Record<string, string> = {
+    full: 'rounded-full',
+    lg: 'rounded-lg',
+    md: 'rounded-md',
+    sm: 'rounded-sm',
+    none: 'rounded-none'
+  };
+
+  const sizeClass = $derived(sizeMap[size] || size);
+  const roundedClass = $derived(roundedMap[rounded] || rounded);
+
+  const finalClass = $derived([
+    'avatar overflow-hidden bg-muted flex items-center justify-center shrink-0 object-cover',
+    sizeClass,
+    roundedClass,
+    className
+  ].filter(Boolean).join(' '));
+</script>
+
+<div class={finalClass} {...rest}>
+  {#if src}
+    <img {src} {alt} class="h-full w-full object-cover" />
+  {:else if fallback}
+    {#if typeof fallback === 'string'}
+      <span class="text-xs font-medium uppercase">{fallback}</span>
+    {:else}
+      {@render fallback()}
+    {/if}
+  {/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    src?: string;
+    alt?: string;
+    fallback?: Snippet | string;
+    class?: string;
+    size?: 'sm' | 'md' | 'lg' | string;
+    rounded?: 'full' | 'lg' | 'md' | 'sm' | 'none';
+    [key: string]: any;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/Badge.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    children,
+    variant = 'primary',
+    class: className = '',
+    ...rest
+  }: {
+    children?: Snippet;
+    variant?: 'primary' | 'secondary' | 'destructive' | 'outline';
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  const baseClass = 'badge';
+  const variantClass = $derived(variant !== 'primary' ? `badge-${variant}` : '');
+  const finalClass = $derived([baseClass, variantClass, className]
+    .filter(Boolean)
+    .join(' '));
+</script>
+
+<span class={finalClass} {...rest}>
+  {@render children?.()}
+</span>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/badge.css";
+  @reference "../reference.css";
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    variant?: 'primary' | 'secondary' | 'destructive' | 'outline';
+    class?: string;
+    [key: string]: any;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/Breadcrumb.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    items = [],
+    separator = '/',
+    class: className = '',
+    ...rest
+  }: {
+    items: Array<{ label: string | Snippet; href?: string; active?: boolean }>;
+    separator?: string | Snippet;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  const finalClass = $derived(['flex text-sm text-muted-foreground', className].filter(Boolean).join(' '));
+</script>
+
+<nav aria-label="Breadcrumb" class={finalClass} {...rest}>
+  <ol class="flex items-center gap-2">
+    {#each items as item, i}
+      {#if i > 0}
+        <li>
+          <span class="opacity-50">
+            {#if typeof separator === 'string'}
+              {separator}
+            {:else}
+              {@render separator()}
+            {/if}
+          </span>
+        </li>
+      {/if}
+      <li>
+        {#if item.href && !item.active}
+          <a href={item.href} class="hover:text-foreground transition-colors">
+            {#if typeof item.label === 'string'}
+              {item.label}
+            {:else}
+              {@render item.label()}
+            {/if}
+          </a>
+        {:else}
+          <span class={item.active ? 'text-foreground font-medium' : ''}>
+            {#if typeof item.label === 'string'}
+              {item.label}
+            {:else}
+              {@render item.label()}
+            {/if}
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    items: Array<{
+        label: string | Snippet;
+        href?: string;
+        active?: boolean;
+    }>;
+    separator?: string | Snippet;
+    class?: string;
+    [key: string]: any;
+};
+declare const Breadcrumb: import("svelte").Component<$$ComponentProps, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/Button.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  
+  // Svelte 5 Runes: 使用 $props() 接收属性
+  let { 
+    children, 
+    type = 'button',
+    variant = 'primary',
+    size = 'md',
+    class: className = '',
+    ...rest 
+  }: {
+    children?: Snippet;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive';
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  // 使用 $derived 确保属性更新时类名同步更新
+  const baseClass = 'btn';
+  const variantClass = $derived(variant !== 'primary' ? `btn-${variant}` : '');
+  const sizeClass = $derived(size !== 'md' ? `btn-${size}` : '');
+  
+  const finalClass = $derived([baseClass, variantClass, sizeClass, className]
+    .filter(Boolean)
+    .join(' '));
+</script>
+
+<button {type} class={finalClass} {...rest}>
+  {@render children?.()}
+</button>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/button.css";
+  @reference "../reference.css";
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive';
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    class?: string;
+    [key: string]: any;
+};
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/ButtonGroup.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    children,
+    orientation = 'horizontal',
+    class: className = '',
+    ...rest
+  }: {
+    children?: Snippet;
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  const finalClass = $derived(['button-group', className].filter(Boolean).join(' '));
+</script>
+
+<div class={finalClass} data-orientation={orientation} {...rest}>
+  {@render children?.()}
+</div>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/button-group.css";
+  @reference "../reference.css";
+</style>

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

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

package/dist/components/Card.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    children,
+    header,
+    footer,
+    title,
+    description,
+    class: className = '',
+    ...rest
+  }: {
+    children?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    title?: Snippet | string;
+    description?: Snippet | string;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  const finalClass = $derived(['card', className]
+    .filter(Boolean)
+    .join(' '));
+</script>
+
+<article class={finalClass} {...rest}>
+  {#if header || title || description}
+    <header>
+      {#if header}
+        {@render header()}
+      {:else}
+        {#if title}
+          {#if typeof title === 'string'}
+            <h2>{title}</h2>
+          {:else}
+            {@render title()}
+          {/if}
+        {/if}
+        {#if description}
+          {#if typeof description === 'string'}
+            <p>{description}</p>
+          {:else}
+            {@render description()}
+          {/if}
+        {/if}
+      {/if}
+    </header>
+  {/if}
+
+  {#if children}
+    <section>
+      {@render children()}
+    </section>
+  {/if}
+
+  {#if footer}
+    <footer>
+      {@render footer()}
+    </footer>
+  {/if}
+</article>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/card.css";
+  @reference "../reference.css";
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    title?: Snippet | string;
+    description?: Snippet | string;
+    class?: string;
+    [key: string]: any;
+};
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/Carousel.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { onMount } from 'svelte';
+
+  let {
+    orientation = 'horizontal',
+    class: className = '',
+    children,
+    showButtons = true,
+    ...rest
+  }: {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    children?: Snippet;
+    showButtons?: boolean;
+    [key: string]: any;
+  } = $props();
+
+  let scrollContainer: HTMLDivElement;
+  let canScrollPrev = $state(false);
+  let canScrollNext = $state(true);
+
+  function getScrollAmount() {
+    if (!scrollContainer) return 0;
+    const firstItem = scrollContainer.querySelector('.carousel-item') as HTMLElement;
+    if (!firstItem) {
+      return orientation === 'vertical' ? scrollContainer.offsetHeight : scrollContainer.offsetWidth;
+    }
+    
+    const style = window.getComputedStyle(firstItem);
+    if (orientation === 'vertical') {
+      const itemHeight = firstItem.offsetHeight;
+      const marginTop = parseFloat(style.marginTop);
+      const marginBottom = parseFloat(style.marginBottom);
+      return itemHeight + marginTop + marginBottom;
+    } else {
+      const itemWidth = firstItem.offsetWidth;
+      const marginLeft = parseFloat(style.marginLeft);
+      const marginRight = parseFloat(style.marginRight);
+      return itemWidth + marginLeft + marginRight;
+    }
+  }
+
+  function scroll(direction: 'prev' | 'next') {
+    if (!scrollContainer) return;
+    const amount = getScrollAmount();
+    const value = direction === 'next' ? amount : -amount;
+    
+    if (orientation === 'vertical') {
+      scrollContainer.scrollBy({ top: value, behavior: 'smooth' });
+    } else {
+      scrollContainer.scrollBy({ left: value, behavior: 'smooth' });
+    }
+  }
+
+  function updateButtons() {
+    if (!scrollContainer) return;
+    
+    const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight } = scrollContainer;
+    
+    if (orientation === 'vertical') {
+      canScrollPrev = scrollTop > 1;
+      canScrollNext = scrollTop < scrollHeight - clientHeight - 1;
+    } else {
+      canScrollPrev = scrollLeft > 1;
+      canScrollNext = scrollLeft < scrollWidth - clientWidth - 1;
+    }
+  }
+
+  onMount(() => {
+    updateButtons();
+    
+    // Use ResizeObserver to update buttons when content changes
+    const resizeObserver = new ResizeObserver(updateButtons);
+    resizeObserver.observe(scrollContainer);
+    
+    return () => resizeObserver.disconnect();
+  });
+</script>
+
+<div 
+  class={['carousel relative', className].filter(Boolean).join(' ')} 
+  data-orientation={orientation}
+  {...rest}
+>
+  {#if showButtons && orientation === 'horizontal'}
+    <button 
+      class="carousel-previous absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 bg-background border rounded-full p-2 shadow-sm z-10 disabled:opacity-50"
+      onclick={() => scroll('prev')}
+      disabled={!canScrollPrev}
+      aria-label="Previous slide"
+    >
+      <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>
+    </button>
+  {/if}
+
+  <div 
+    bind:this={scrollContainer}
+    class={[
+      'carousel-content flex overflow-hidden scroll-smooth', 
+      orientation === 'vertical' ? 'flex-col -mt-4 pb-4' : 'flex-row -ml-4'
+    ].join(' ')}
+    onscroll={updateButtons}
+  >
+    {@render children?.()}
+  </div>
+
+  {#if showButtons && orientation === 'horizontal'}
+    <button 
+      class="carousel-next absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-background border rounded-full p-2 shadow-sm z-10 disabled:opacity-50"
+      onclick={() => scroll('next')}
+      disabled={!canScrollNext}
+      aria-label="Next slide"
+    >
+      <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>
+    </button>
+  {/if}
+
+  {#if showButtons && orientation === 'vertical'}
+    <button 
+      class="carousel-previous absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-background border rounded-full p-2 shadow-sm z-10 disabled:opacity-50"
+      onclick={() => scroll('prev')}
+      disabled={!canScrollPrev}
+      aria-label="Previous slide"
+    >
+      <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="m18 15-6-6-6 6"/></svg>
+    </button>
+    <button 
+      class="carousel-next absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 bg-background border rounded-full p-2 shadow-sm z-10 disabled:opacity-50"
+      onclick={() => scroll('next')}
+      disabled={!canScrollNext}
+      aria-label="Next slide"
+    >
+      <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="m6 9 6 6 6-6"/></svg>
+    </button>
+  {/if}
+</div>
+
+<style>
+  @import "../../../../ultra/src/css/parts/custom/carousel.css";
+  @reference "../reference.css";
+</style>

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

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