@lanrenbang/basecoat-ultra-svelte 0.1.0

package/dist/components/Drawer.svelte

@@ -0,0 +1,127 @@
+<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),
+    title,
+    description,
+    children,
+    class: className = '',
+    ...rest
+  }: {
+    open?: boolean;
+    title?: string | Snippet;
+    description?: string | Snippet;
+    children: Snippet;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  let container: HTMLDivElement | undefined = $state();
+  let isAnimating = $state(false);
+
+  // Custom spring-like transition for drawer content (slides up from bottom)
+  function springSlideUp(node: Element, { duration = 400 }: { duration?: number } = {}) {
+    return {
+      duration,
+      css: (t: number) => {
+        const eased = backOut(t);
+        const offset = (1 - eased) * 100;
+        return `transform: translateY(${offset}%)`;
+      }
+    };
+  }
+  
+  function slideDown(node: Element, { duration = 300 }: { duration?: number } = {}) {
+    return {
+      duration,
+      css: (t: number) => {
+        const eased = cubicOut(t);
+        const offset = (1 - eased) * 100;
+        return `transform: translateY(${offset}%)`;
+      }
+    };
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (open && !isAnimating && event.target === container) {
+      open = false;
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && open && !isAnimating) {
+      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="drawer fixed inset-0 z-50 flex flex-col items-end sm:items-center justify-end"
+    onclick={handleClickOutside}
+  >
+    <div 
+      class="absolute inset-0 bg-black/80"
+      transition:fade={{ duration: 200 }}
+    ></div>
+    <div 
+      class={['drawer-content', className].filter(Boolean).join(' ')}
+      in:springSlideUp={{ duration: 400 }}
+      out:slideDown={{ duration: 300 }}
+      onintrostart={() => isAnimating = true}
+      onintroend={() => isAnimating = false}
+      onoutrostart={() => isAnimating = true}
+      onoutroend={() => isAnimating = false}
+      {...rest}
+    >
+      <!-- Drag handle -->
+      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted cursor-grab active:cursor-grabbing"></div>
+      
+      <div class="p-4 text-center sm:text-left">
+        {#if title}
+          <h2 class="text-lg font-semibold leading-none tracking-tight">
+            {#if typeof title === 'string'}{title}{:else}{@render title()}{/if}
+          </h2>
+        {/if}
+        
+        {#if description}
+          <p class="text-sm text-muted-foreground mt-1.5">
+            {#if typeof description === 'string'}{description}{:else}{@render description()}{/if}
+          </p>
+        {/if}
+      </div>
+
+      {@render children()}
+    </div>
+  </div>
+{/if}
+
+<style>
+  @import "../../../../ultra/src/css/parts/custom/sheet.css";
+  @reference "../reference.css";
+  
+  .drawer-content {
+    @apply fixed z-50 flex flex-col bg-background border border-b-0 rounded-t-[10px] bottom-0 inset-x-0 h-auto max-h-[96vh];
+  }
+</style>

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

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

package/dist/components/DropdownMenu.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { onMount } from 'svelte';
+
+  let {
+    open = $bindable(false),
+    trigger,
+    children,
+    align = 'start',
+    class: className = '',
+    ...rest
+  }: {
+    open?: boolean;
+    trigger: Snippet<{ open: boolean }>;
+    children: Snippet;
+    align?: 'start' | 'end';
+    class?: 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);
+  });
+  const finalClass = $derived(['dropdown-menu relative inline-block', className].filter(Boolean).join(' '));
+</script>
+
+<div bind:this={container} class={['dropdown-menu relative inline-block', 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)}
+  >
+    {@render trigger({ open })}
+  </div>
+
+  {#if open}
+    <div 
+      role="menu" 
+      data-popover 
+      data-align={align}
+      class="absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 mt-1"
+    >
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/dropdown-menu.css";
+  @reference "../reference.css";
+</style>

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

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

package/dist/components/Empty.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    children,
+    icon,
+    title,
+    description,
+    class: className = '',
+    ...rest
+  }: {
+    children?: Snippet;
+    icon?: Snippet;
+    title?: Snippet | string;
+    description?: Snippet | string;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  const finalClass = $derived([
+    'p-12 border border-dashed rounded-lg bg-card text-center flex flex-col items-center justify-center',
+    className
+  ].filter(Boolean).join(' '));
+</script>
+
+<div class={finalClass} {...rest}>
+  {#if icon}
+    <div class="h-10 w-10 rounded-full bg-muted flex items-center justify-center mb-3 text-muted-foreground">
+      {@render icon()}
+    </div>
+  {/if}
+
+  {#if title}
+    <h4 class="font-medium">
+      {#if typeof title === 'string'}
+        {title}
+      {:else}
+        {@render title()}
+      {/if}
+    </h4>
+  {/if}
+
+  {#if description}
+    <p class="text-sm text-muted-foreground">
+      {#if typeof description === 'string'}
+        {description}
+      {:else}
+        {@render description()}
+      {/if}
+    </p>
+  {/if}
+
+  {#if children}
+    <div class="mt-4">
+      {@render children()}
+    </div>
+  {/if}
+</div>

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

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

package/dist/components/Input.svelte

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

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

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

package/dist/components/InputOTP.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  
+  let {
+    length = 6,
+    value = $bindable(''),
+    separator,
+    separatorIndices = [],
+    class: className = '',
+    ...rest
+  }: {
+    length?: number;
+    value?: string;
+    separator?: Snippet;
+    separatorIndices?: number[];
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  // Use a reactive object to store input refs to avoid binding_property_non_reactive warning
+  let inputRefs = $state<Record<number, HTMLInputElement>>({});
+  let values = $state<string[]>([]);
+  
+  // Helper to get input by index
+  function getInput(index: number): HTMLInputElement | undefined {
+    return inputRefs[index];
+  }
+  
+  // Initialize values array when length changes
+  $effect(() => {
+    if (values.length !== length) {
+      values = Array(length).fill('');
+    }
+  });
+
+  // Sync external value to internal values
+  $effect(() => {
+    if (value) {
+      const chars = value.split('');
+      values = Array(length).fill('').map((_, i) => chars[i] || '');
+    }
+  });
+
+  function updateValue() {
+    value = values.join('');
+  }
+
+  function handleFocus(e: FocusEvent) {
+    // Select content on focus to allow easy overwrite
+    const input = e.target as HTMLInputElement;
+    input.select();
+  }
+
+  function handleInput(e: Event, index: number) {
+    const input = e.target as HTMLInputElement;
+    const val = input.value;
+
+    // Handle clearing (empty value)
+    if (val === '') {
+      values[index] = '';
+      updateValue();
+      return;
+    }
+
+    // If multiple chars (e.g. fast typing), take the last one
+    if (val.length > 1) {
+      values[index] = val.slice(-1);
+      input.value = values[index];
+    } else {
+      values[index] = val;
+    }
+
+    updateValue();
+
+    // Move to next if we have a value and not at the end
+    if (values[index] && index < length - 1) {
+      getInput(index + 1)?.focus();
+    }
+  }
+
+  function handleKeyDown(e: KeyboardEvent, index: number) {
+    const input = e.target as HTMLInputElement;
+
+    if (e.key === 'Backspace') {
+      e.preventDefault();
+      
+      if (values[index] !== '') {
+        values[index] = '';
+        input.value = '';
+        updateValue();
+      } else if (index > 0) {
+        getInput(index - 1)?.focus();
+      }
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      e.preventDefault();
+      getInput(index - 1)?.focus();
+    } else if (e.key === 'ArrowRight' && index < length - 1) {
+      e.preventDefault();
+      getInput(index + 1)?.focus();
+    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      // If cursor is not selecting text and we have value, clear it first to ensure overwrite
+      if (values[index] && input.selectionStart === input.selectionEnd) {
+        values[index] = '';
+        input.value = '';
+      }
+    }
+  }
+
+  function handlePaste(e: ClipboardEvent, startIndex: number) {
+    e.preventDefault();
+    const pasteData = e.clipboardData?.getData('text') || '';
+    const chars = pasteData.split('');
+    
+    let currentIndex = startIndex;
+    chars.forEach((char) => {
+      if (currentIndex < length) {
+        values[currentIndex] = char;
+        const input = getInput(currentIndex);
+        if (input) {
+          input.value = char;
+        }
+        currentIndex++;
+      }
+    });
+    
+    updateValue();
+
+    // Focus the input after the last pasted character
+    if (currentIndex < length) {
+      getInput(currentIndex)?.focus();
+    } else {
+      getInput(length - 1)?.focus();
+    }
+  }
+  
+  function getGroups(): number[][] {
+    const groups: number[][] = [];
+    let currentGroup: number[] = [];
+    
+    for (let i = 0; i < length; i++) {
+      if (i > 0 && separatorIndices.includes(i)) {
+        groups.push(currentGroup);
+        currentGroup = [];
+      }
+      currentGroup.push(i);
+    }
+    
+    if (currentGroup.length > 0) {
+      groups.push(currentGroup);
+    }
+    
+    return groups;
+  }
+</script>
+
+<div 
+  class={['input-otp flex items-center gap-2', className].filter(Boolean).join(' ')} 
+  {...rest}
+>
+  {#each getGroups() as group, groupIndex}
+    {#if groupIndex > 0}
+      <div class="input-otp-separator text-muted-foreground">
+        {#if separator}{@render separator()}{/if}
+      </div>
+    {/if}
+    <div class="input-otp-group flex items-center">
+      {#each group as inputIndex}
+        <input 
+          bind:this={inputRefs[inputIndex]}
+          type="text" 
+          inputmode="text"
+          autocomplete="one-time-code"
+          class="input w-10 h-10 text-center p-0" 
+          maxlength="1"
+          value={values[inputIndex]}
+          onfocus={handleFocus}
+          oninput={(e) => handleInput(e, inputIndex)}
+          onkeydown={(e) => handleKeyDown(e, inputIndex)}
+          onpaste={(e) => handlePaste(e, inputIndex)}
+        />
+      {/each}
+    </div>
+  {/each}
+</div>
+
+<style>
+  @import "../../../../ultra/src/css/parts/custom/input-otp.css";
+  @reference "../reference.css";
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    length?: number;
+    value?: string;
+    separator?: Snippet;
+    separatorIndices?: number[];
+    class?: string;
+    [key: string]: any;
+};
+declare const InputOTP: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputOTP = ReturnType<typeof InputOTP>;
+export default InputOTP;

package/dist/components/Item.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    children,
+    icon,
+    title,
+    description,
+    actions,
+    class: className = '',
+    containerClass = '',
+    ...rest
+  }: {
+    children?: Snippet;
+    icon?: Snippet;
+    title?: Snippet | string;
+    description?: Snippet | string;
+    actions?: Snippet;
+    class?: string;
+    containerClass?: string;
+    [key: string]: any;
+  } = $props();
+
+  const finalClass = $derived([
+    'flex items-center gap-3 p-3 hover:bg-muted cursor-pointer transition-colors border-b last:border-0',
+    className
+  ].filter(Boolean).join(' '));
+</script>
+
+<div class={finalClass} {...rest}>
+  {#if icon}
+    <div class="h-8 w-8 rounded-full bg-accent flex items-center justify-center shrink-0">
+      {@render icon()}
+    </div>
+  {/if}
+
+  <div class="flex-1 min-w-0">
+    {#if title}
+      <div class="text-sm font-medium truncate">
+        {#if typeof title === 'string'}
+          {title}
+        {:else}
+          {@render title()}
+        {/if}
+      </div>
+    {/if}
+    {#if description}
+      <div class="text-xs text-muted-foreground truncate">
+        {#if typeof description === 'string'}
+          {description}
+        {:else}
+          {@render description()}
+        {/if}
+      </div>
+    {/if}
+    {@render children?.()}
+  </div>
+
+  {#if actions}
+    <div class="flex items-center gap-2 shrink-0">
+      {@render actions()}
+    </div>
+  {/if}
+</div>

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

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

package/dist/components/Kbd.svelte

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

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

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

package/dist/components/Label.svelte

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

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

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