@lanrenbang/basecoat-ultra-svelte 0.1.0

package/dist/components/Sheet.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import { cubicOut, backOut } from 'svelte/easing';
+
+  let {
+    open = $bindable(false),
+    side = 'right',
+    title,
+    description,
+    children,
+    class: className = '',
+    ...rest
+  }: {
+    open?: boolean;
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    title?: string | Snippet;
+    description?: string | Snippet;
+    children: Snippet;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  let container: HTMLDivElement | undefined = $state();
+
+  // Custom spring-like transition for sheet content
+  function springSlide(node: Element, { duration = 400, side: s = 'right' }: { duration?: number; side?: string } = {}) {
+    const style = getComputedStyle(node);
+    const transform = style.transform === 'none' ? '' : style.transform;
+    
+    let axis: 'x' | 'y';
+    let distance: number;
+    
+    switch (s) {
+      case 'left':
+        axis = 'x';
+        distance = -node.clientWidth;
+        break;
+      case 'right':
+        axis = 'x';
+        distance = node.clientWidth;
+        break;
+      case 'top':
+        axis = 'y';
+        distance = -node.clientHeight;
+        break;
+      case 'bottom':
+        axis = 'y';
+        distance = node.clientHeight;
+        break;
+      default:
+        axis = 'x';
+        distance = node.clientWidth;
+    }
+    
+    return {
+      duration,
+      css: (t: number) => {
+        // Use backOut easing for spring-like effect on enter
+        const eased = backOut(t);
+        const offset = (1 - eased) * distance;
+        const translateValue = axis === 'x' ? `translateX(${offset}px)` : `translateY(${offset}px)`;
+        return `transform: ${transform} ${translateValue}`;
+      }
+    };
+  }
+  
+  function springSlideOut(node: Element, { duration = 300, side: s = 'right' }: { duration?: number; side?: string } = {}) {
+    let axis: 'x' | 'y';
+    let distance: number;
+    
+    switch (s) {
+      case 'left':
+        axis = 'x';
+        distance = -node.clientWidth;
+        break;
+      case 'right':
+        axis = 'x';
+        distance = node.clientWidth;
+        break;
+      case 'top':
+        axis = 'y';
+        distance = -node.clientHeight;
+        break;
+      case 'bottom':
+        axis = 'y';
+        distance = node.clientHeight;
+        break;
+      default:
+        axis = 'x';
+        distance = node.clientWidth;
+    }
+    
+    return {
+      duration,
+      css: (t: number) => {
+        const eased = cubicOut(t);
+        const offset = (1 - eased) * distance;
+        const translateValue = axis === 'x' ? `translateX(${offset}px)` : `translateY(${offset}px)`;
+        return `transform: ${translateValue}`;
+      }
+    };
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (open && event.target === container) {
+      open = false;
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && open) {
+      open = false;
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  });
+
+  // Lock body scroll when open
+  $effect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+  });
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div 
+    bind:this={container}
+    class="sheet fixed inset-0 z-50"
+    onclick={handleClickOutside}
+  >
+    <div 
+      class="absolute inset-0 bg-black/80"
+      transition:fade={{ duration: 200 }}
+    ></div>
+    <div 
+      class={['sheet-content', className].filter(Boolean).join(' ')}
+      data-side={side}
+      in:springSlide={{ duration: 400, side }}
+      out:springSlideOut={{ duration: 300, side }}
+      {...rest}
+    >
+      <button 
+        class="absolute right-4 top-4 opacity-70 hover:opacity-100 transition-opacity" 
+        onclick={() => open = false}
+        aria-label="Close"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      </button>
+
+      {#if title}
+        <h2 class="text-lg font-semibold">
+          {#if typeof title === 'string'}{title}{:else}{@render title()}{/if}
+        </h2>
+      {/if}
+      
+      {#if description}
+        <p class="text-sm text-muted-foreground">
+          {#if typeof description === 'string'}{description}{:else}{@render description()}{/if}
+        </p>
+      {/if}
+
+      <div class="mt-4">
+        {@render children()}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  @import "../../../../ultra/src/css/parts/custom/sheet.css";
+  @reference "../reference.css";
+</style>

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

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

package/dist/components/Skeleton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  let {
+    class: className = '',
+    rounded = 'md',
+    ...rest
+  }: {
+    class?: string;
+    rounded?: 'full' | 'lg' | 'md' | 'sm' | 'none';
+    [key: string]: any;
+  } = $props();
+
+  const roundedMap: Record<string, string> = {
+    full: 'rounded-full',
+    lg: 'rounded-lg',
+    md: 'rounded-md',
+    sm: 'rounded-sm',
+    none: 'rounded-none'
+  };
+
+  const finalClass = $derived([
+    'skeleton bg-muted animate-pulse',
+    roundedMap[rounded] || rounded,
+    className
+  ].filter(Boolean).join(' '));
+</script>
+
+<div class={finalClass} {...rest}></div>

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

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

package/dist/components/Slider.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  let {
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    class: className = '',
+    ...rest
+  }: {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  const finalClass = $derived(['slider', className].filter(Boolean).join(' '));
+  
+  // Calculate slider value percentage for CSS variable
+  const sliderPercent = $derived(((value - min) / (max - min)) * 100);
+</script>
+
+<input 
+  type="range" 
+  class={finalClass} 
+  bind:value 
+  {min} 
+  {max} 
+  {step} 
+  style="--slider-value: {sliderPercent}%"
+  {...rest} 
+/>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/range.css";
+  @reference "../reference.css";
+</style>

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

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

package/dist/components/Spinner.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  let {
+    class: className = '',
+    size = 'md',
+    ...rest
+  }: {
+    class?: string;
+    size?: 'sm' | 'md' | 'lg' | string;
+    [key: string]: any;
+  } = $props();
+
+  const sizeMap: Record<string, string> = {
+    sm: 'h-4 w-4',
+    md: 'h-6 w-6',
+    lg: 'h-8 w-8'
+  };
+
+  const finalClass = $derived([
+    'animate-spin text-primary',
+    sizeMap[size] || size,
+    className
+  ].filter(Boolean).join(' '));
+</script>
+
+<svg class={finalClass} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...rest}>
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+</svg>

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

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

package/dist/components/Switch.svelte

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

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

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

package/dist/components/Table.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    header,
+    children,
+    footer,
+    caption,
+    class: className = '',
+    containerClass = '',
+    ...rest
+  }: {
+    header?: Snippet;
+    children?: Snippet;
+    footer?: Snippet;
+    caption?: Snippet | string;
+    class?: string;
+    containerClass?: string;
+    [key: string]: any;
+  } = $props();
+
+  const finalContainerClass = $derived(['border rounded-lg overflow-hidden bg-card w-full', containerClass].filter(Boolean).join(' '));
+  const finalTableClass = $derived(['table w-full', className].filter(Boolean).join(' '));
+</script>
+
+<div class={finalContainerClass}>
+  <table class={finalTableClass} {...rest}>
+    {#if caption}
+      <caption>
+        {#if typeof caption === 'string'}
+          {caption}
+        {:else}
+          {@render caption()}
+        {/if}
+      </caption>
+    {/if}
+
+    {#if header}
+      <thead>
+        {@render header()}
+      </thead>
+    {/if}
+
+    {#if children}
+      <tbody>
+        {@render children()}
+      </tbody>
+    {/if}
+
+    {#if footer}
+      <tfoot>
+        {@render footer()}
+      </tfoot>
+    {/if}
+  </table>
+</div>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/table.css";
+  @reference "../reference.css";
+</style>

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

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

package/dist/components/Tabs.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    items = [],
+    activeTab = $bindable(''),
+    class: className = '',
+    contentClass = '',
+    ...rest
+  }: {
+    items: Array<{ id: string; label: string | Snippet; content: string | Snippet }>;
+    activeTab?: string;
+    class?: string;
+    contentClass?: string;
+    [key: string]: any;
+  } = $props();
+
+  // Set first item as active when items change and no active tab
+  $effect(() => {
+    if (!activeTab && items.length > 0) {
+      activeTab = items[0].id;
+    }
+  });
+
+  function handleKeyDown(event: KeyboardEvent) {
+    const currentIndex = items.findIndex(item => item.id === activeTab);
+    if (currentIndex === -1) return;
+
+    let nextIndex: number;
+
+    switch (event.key) {
+      case 'ArrowRight':
+        nextIndex = (currentIndex + 1) % items.length;
+        break;
+      case 'ArrowLeft':
+        nextIndex = (currentIndex - 1 + items.length) % items.length;
+        break;
+      case 'Home':
+        nextIndex = 0;
+        break;
+      case 'End':
+        nextIndex = items.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    activeTab = items[nextIndex].id;
+    
+    const buttons = (event.currentTarget as HTMLElement).querySelectorAll('button');
+    (buttons[nextIndex] as HTMLElement).focus();
+  }
+</script>
+
+<div class={['tabs', className].filter(Boolean).join(' ')} {...rest}>
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <div role="tablist" onkeydown={handleKeyDown} tabindex="0">
+    {#each items as item}
+      <button 
+        role="tab" 
+        aria-controls={item.id} 
+        aria-selected={activeTab === item.id} 
+        tabindex={activeTab === item.id ? 0 : -1}
+        onclick={() => activeTab = item.id}
+      >
+        {#if typeof item.label === 'string'}
+          {item.label}
+        {:else}
+          {@render item.label()}
+        {/if}
+      </button>
+    {/each}
+  </div>
+
+  {#each items as item}
+    <section 
+      id={item.id} 
+      role="tabpanel" 
+      hidden={activeTab !== item.id}
+      class={['p-4 border rounded-md mt-4', contentClass].filter(Boolean).join(' ')}
+    >
+      {#if activeTab === item.id}
+        {#if typeof item.content === 'string'}
+          {item.content}
+        {:else}
+          {@render item.content()}
+        {/if}
+      {/if}
+    </section>
+  {/each}
+</div>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/tabs.css";
+  @reference "../reference.css";
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    items: Array<{
+        id: string;
+        label: string | Snippet;
+        content: string | Snippet;
+    }>;
+    activeTab?: string;
+    class?: string;
+    contentClass?: string;
+    [key: string]: any;
+};
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "activeTab">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/Textarea.svelte

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

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

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

package/dist/components/Toast.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { fade, slide } from 'svelte/transition';
+
+  interface ToastConfig {
+    id: string;
+    title: string;
+    description?: string;
+    category?: 'success' | 'warning' | 'destructive' | 'info';
+    duration?: number;
+  }
+
+  let toasts = $state<ToastConfig[]>([]);
+
+  const addToast = (config: Omit<ToastConfig, 'id'>) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    const newToast = { ...config, id };
+    toasts = [...toasts, newToast];
+
+    if (config.duration !== 0) {
+      setTimeout(() => {
+        removeToast(id);
+      }, config.duration || 3000);
+    }
+  };
+
+  const removeToast = (id: string) => {
+    toasts = toasts.filter(t => t.id !== id);
+  };
+
+  onMount(() => {
+    const handler = (e: CustomEvent) => {
+      if (e.detail && e.detail.config) {
+        addToast(e.detail.config);
+      }
+    };
+    document.addEventListener('basecoat:toast', handler as any);
+    return () => document.removeEventListener('basecoat:toast', handler as any);
+  });
+</script>
+
+<section id="toaster" class="toaster fixed top-16 right-0 z-[200] flex max-h-screen w-full flex-col p-4 sm:flex-col md:max-w-[420px]">
+  {#each toasts as toast (toast.id)}
+    <div 
+      in:slide={{ axis: 'y', duration: 200 }}
+      out:slide={{ axis: 'y', duration: 200 }}
+      class={['toast group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all', 
+        toast.category === 'destructive' ? 'destructive border-destructive bg-destructive text-destructive-foreground' : 'bg-card text-card-foreground border-border'
+      ].join(' ')}
+    >
+      <div class="grid gap-1">
+        {#if toast.title}
+          <div class="text-sm font-semibold">{toast.title}</div>
+        {/if}
+        {#if toast.description}
+          <div class="text-sm opacity-90">{toast.description}</div>
+        {/if}
+      </div>
+      <button 
+        class="absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100"
+        onclick={() => removeToast(toast.id)}
+        aria-label="Close"
+      >
+        <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 6 6 18"/><path d="m6 6 12 12"/></svg>
+      </button>
+    </div>
+  {/each}
+</section>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/toast.css";
+  @reference "../reference.css";
+</style>

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

@@ -0,0 +1,3 @@
+declare const Toast: import("svelte").Component<Record<string, never>, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;