@lanrenbang/basecoat-ultra-svelte 0.1.0

package/dist/components/CatppuccinThemeSwitcher.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  const THEMES = ['latte', 'frappe', 'macchiato', 'mocha'];
+  const DARK_THEMES = ['frappe', 'macchiato', 'mocha'];
+  const ACCENTS = [
+    'rosewater', 'flamingo', 'pink', 'mauve', 'red', 'maroon', 'peach',
+    'yellow', 'green', 'teal', 'sky', 'sapphire', 'blue', 'lavender'
+  ];
+
+  let currentFlavor = $state('mocha'); // UI 预览用的口味
+  let appliedFlavor = $state('');      // 实际应用的口味
+  let appliedAccent = $state('');      // 实际应用的强调色
+
+  function setTheme(theme: string, accent: string) {
+    const root = document.documentElement;
+    
+    // 1. 彻底清除旧的主题类名
+    THEMES.forEach(t => root.classList.remove(`theme-${t}`));
+    ACCENTS.forEach(a => root.classList.remove(`accent-${a}`));
+
+    // 2. 应用新的主题与强调色类名
+    root.classList.add(`theme-${theme}`);
+    root.classList.add(`accent-${accent}`);
+
+    // 3. 同步亮/暗模式 (Basecoat 变量依赖 .dark)
+    if (DARK_THEMES.includes(theme)) {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+
+    appliedFlavor = theme;
+    appliedAccent = accent;
+
+    try {
+      localStorage.setItem('catppuccin-theme', theme);
+      localStorage.setItem('catppuccin-accent', accent);
+      localStorage.removeItem('basecoat-mode');
+    } catch (e) {}
+  }
+
+  function resetTheme() {
+    const root = document.documentElement;
+    const wasDark = root.classList.contains('dark');
+    
+    THEMES.forEach(t => root.classList.remove(`theme-${t}`));
+    ACCENTS.forEach(a => root.classList.remove(`accent-${a}`));
+    
+    localStorage.removeItem('catppuccin-theme');
+    localStorage.removeItem('catppuccin-accent');
+    localStorage.setItem('basecoat-mode', wasDark ? 'dark' : 'light');
+
+    // 恢复到系统/手动模式默认
+    if (wasDark) {
+      root.classList.add('dark');
+      currentFlavor = 'mocha';
+    } else {
+      root.classList.remove('dark');
+      currentFlavor = 'latte';
+    }
+    appliedFlavor = '';
+    appliedAccent = '';
+  }
+
+  onMount(() => {
+    const savedTheme = localStorage.getItem('catppuccin-theme');
+    const savedAccent = localStorage.getItem('catppuccin-accent');
+    if (savedTheme && savedAccent) {
+      currentFlavor = savedTheme;
+      appliedFlavor = savedTheme;
+      appliedAccent = savedAccent;
+      // 确保初始化时类名也同步
+      setTheme(savedTheme, savedAccent);
+    } else {
+      const isDark = document.documentElement.classList.contains('dark');
+      currentFlavor = isDark ? 'mocha' : 'latte';
+    }
+  });
+
+  // 预览色计算
+  const previewColors = $derived.by(() => {
+    const colors: Record<string, string> = { background: `var(--ctp-${currentFlavor}-base)` };
+    ACCENTS.forEach(accent => {
+      colors[accent] = `var(--ctp-${currentFlavor}-${accent})`;
+    });
+    return colors;
+  });
+</script>
+
+<div class="catppuccin-theme-switcher w-full max-w-sm space-y-6">
+  <!-- Flavors: 仅更新预览状态 -->
+  <div class="button-group w-full" data-orientation="horizontal">
+    {#each THEMES as theme}
+      <button 
+        type="button" 
+        class={['btn btn-sm capitalize flex-1', currentFlavor === theme ? 'btn-primary' : 'btn-ghost'].join(' ')}
+        onclick={() => currentFlavor = theme}
+      >
+        {theme}
+      </button>
+    {/each}
+  </div>
+
+  <!-- Accents: 点击应用主题 -->
+  <div 
+    class="grid grid-cols-7 gap-3 place-items-center p-4 rounded-xl border border-border/50 transition-colors duration-300 shadow-inner"
+    style:background-color={previewColors.background}
+  >
+    {#each ACCENTS as accent}
+      <button 
+        type="button" 
+        class={['size-6 rounded-full border border-white/20 shadow-sm transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-ring relative flex items-center justify-center',
+          appliedAccent === accent && appliedFlavor === currentFlavor ? 'ring-2 ring-white ring-offset-2 scale-110' : ''
+        ].join(' ')}
+        title={accent}
+        style:background-color={previewColors[accent]}
+        onclick={() => setTheme(currentFlavor, accent)}
+      >
+        {#if appliedAccent === accent && appliedFlavor === currentFlavor}
+          <svg class="text-white drop-shadow-sm" style="width: 12px; height: 12px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+        {/if}
+      </button>
+    {/each}
+  </div>
+
+  <div class="flex justify-center">
+    <button type="button" class="theme-reset btn btn-sm btn-ghost text-muted-foreground hover:text-destructive w-full" onclick={resetTheme}>
+      Reset Theme
+    </button>
+  </div>
+</div>

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

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

package/dist/components/Checkbox.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" class={finalClass} bind:checked {...rest} />
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/checkbox.css";
+  @reference "../reference.css";
+</style>

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

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

package/dist/components/Collapsible.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    open = $bindable(false),
+    trigger,
+    children,
+    class: className = '',
+    ...rest
+  }: {
+    open?: boolean;
+    trigger: Snippet<{ open: boolean }>;
+    children: Snippet;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+</script>
+
+<div class={['collapsible', className].filter(Boolean).join(' ')} {...rest}>
+  <div 
+    role="button" 
+    tabindex="0" 
+    onclick={() => open = !open} 
+    onkeydown={(e) => e.key === 'Enter' && (open = !open)}
+  >
+    {@render trigger({ open })}
+  </div>
+  
+  {#if open}
+    <div class="collapsible-content">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/collapsible.css";
+  @reference "../reference.css";
+</style>

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

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

package/dist/components/Command.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    value = $bindable(''),
+    placeholder = 'Type a command or search...',
+    children,
+    class: className = '',
+    onselect,
+    ...rest
+  }: {
+    value?: string;
+    placeholder?: string;
+    children?: Snippet;
+    class?: string;
+    onselect?: (value: string) => void;
+    [key: string]: any;
+  } = $props();
+
+  let container: HTMLDivElement;
+  let activeIndex = $state(-1);
+
+  function handleKeyDown(event: KeyboardEvent) {
+    const items = container?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])') as NodeListOf<HTMLElement>;
+    if (!items.length) return;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        activeIndex = (activeIndex + 1) % items.length;
+        items[activeIndex]?.focus();
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        activeIndex = (activeIndex - 1 + items.length) % items.length;
+        items[activeIndex]?.focus();
+        break;
+      case 'Enter':
+        if (activeIndex >= 0) {
+          event.preventDefault();
+          items[activeIndex]?.click();
+        }
+        break;
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div 
+  bind:this={container}
+  class={['command bg-background flex flex-col overflow-hidden', className].filter(Boolean).join(' ')} 
+  onkeydown={handleKeyDown}
+  {...rest}
+>
+  <header class="flex items-center border-b px-3">
+    <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="opacity-50 mr-2 shrink-0"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+    <input 
+      type="text" 
+      bind:value 
+      {placeholder}
+      class="flex h-10 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 border-none focus:ring-0"
+      onkeydown={(e) => {
+        if (e.key === 'ArrowDown') {
+          handleKeyDown(e);
+        }
+      }}
+    />
+  </header>
+  
+  <div role="menu" class="max-h-40 overflow-y-auto overflow-x-hidden p-1 scrollbar">
+    {@render children?.()}
+  </div>
+</div>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/command.css";
+  @reference "../reference.css";
+</style>

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

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

package/dist/components/DatePicker.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import flatpickr from 'flatpickr';
+  import { Mandarin } from 'flatpickr/dist/l10n/zh.js';
+  import { MandarinTraditional } from 'flatpickr/dist/l10n/zh-tw.js';
+  import type { Instance } from 'flatpickr/dist/types/instance';
+  import type { Options } from 'flatpickr/dist/types/options';
+
+  // Custom English configurations
+  const EnglishFull = {
+    weekdays: {
+      shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+      longhand: [
+        "Sunday",
+        "Monday", 
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday",
+      ],
+    },
+    months: {
+      shorthand: [
+        "January",
+        "February", 
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+      ],
+      longhand: [
+        "January",
+        "February",
+        "March", 
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+      ],
+    },
+  };
+
+  const EnglishShort = {
+    weekdays: {
+      shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+      longhand: [
+        "Sunday",
+        "Monday",
+        "Tuesday", 
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday",
+      ],
+    },
+    months: {
+      shorthand: [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr", 
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+      longhand: [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May", 
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec",
+      ],
+    },
+  };
+
+  // Locale configurations
+  const locales = {
+    'zh': Mandarin,
+    'zh-tw': MandarinTraditional,
+    'en-full': EnglishFull,
+    'en-short': EnglishShort,
+  };
+
+  let {
+    value = $bindable(''),
+    options = {},
+    placeholder = 'Select date',
+    inline = false,
+    locale = 'en-short',
+    class: className = '',
+    ...rest
+  }: {
+    value?: string | Date | Date[];
+    options?: Options;
+    placeholder?: string;
+    inline?: boolean;
+    locale?: string;
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  let element: HTMLElement | undefined = $state();
+  let instance: Instance;
+
+  const finalClass = $derived(
+    inline 
+      ? ['datepicker', className].filter(Boolean).join(' ')
+      : ['input datepicker', className].filter(Boolean).join(' ')
+  );
+
+  onMount(() => {
+    if (element) {
+      // Get locale configuration
+      const localeConfig = locales[locale] || EnglishShort;
+      
+      instance = flatpickr(element, {
+        ...options,
+        inline,
+        defaultDate: value,
+        locale: localeConfig,
+        shorthandCurrentMonth: locale === "en-short", // Only use shorthand for English abbreviated
+        onChange: (selectedDates, dateStr) => {
+          value = dateStr;
+        }
+      });
+    }
+  });
+
+  onDestroy(() => {
+    instance?.destroy();
+  });
+</script>
+
+{#if inline}
+  <div bind:this={element} class={finalClass} {...rest}></div>
+{:else}
+  <input 
+    bind:this={element} 
+    type="text" 
+    class={finalClass} 
+    {placeholder}
+    {...rest} 
+  />
+{/if}
+
+<style>
+  @reference "../reference.css";
+</style>

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

@@ -0,0 +1,13 @@
+import type { Options } from 'flatpickr/dist/types/options';
+type $$ComponentProps = {
+    value?: string | Date | Date[];
+    options?: Options;
+    placeholder?: string;
+    inline?: boolean;
+    locale?: string;
+    class?: string;
+    [key: string]: any;
+};
+declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/Dialog.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { onMount } from 'svelte';
+
+  let {
+    open = $bindable(false),
+    title,
+    description,
+    children,
+    footer,
+    role = 'dialog',
+    class: className = '',
+    ...rest
+  }: {
+    open?: boolean;
+    title?: string | Snippet;
+    description?: string | Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    role?: 'dialog' | 'alertdialog';
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  let dialogElement: HTMLDialogElement;
+
+  $effect(() => {
+    if (open) {
+      dialogElement?.showModal();
+    } else {
+      dialogElement?.close();
+    }
+  });
+
+  const handleClose = () => {
+    open = false;
+  };
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<dialog
+  bind:this={dialogElement}
+  class={['dialog', className].filter(Boolean).join(' ')}
+  {role}
+  onclose={handleClose}
+  onclick={(e) => {
+    // Only close on backdrop click for regular dialog, not alertdialog
+    if (role !== 'alertdialog' && e.target === dialogElement) {
+      handleClose();
+    }
+  }}
+  {...rest}
+>
+  <!-- Only show close button for regular dialogs, not alert dialogs -->
+  {#if role !== 'alertdialog'}
+    <button class="close" aria-label="Close" onclick={handleClose}>
+      <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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+    </button>
+  {/if}
+
+  {#if title || description}
+    <header>
+      {#if title}
+        <h2>
+          {#if typeof title === 'string'}{title}{:else}{@render title()}{/if}
+        </h2>
+      {/if}
+      {#if description}
+        <p>
+          {#if typeof description === 'string'}{description}{:else}{@render description()}{/if}
+        </p>
+      {/if}
+    </header>
+  {/if}
+
+  <section>
+    {@render children()}
+  </section>
+
+  {#if footer}
+    <footer>
+      {@render footer()}
+    </footer>
+  {/if}
+</dialog>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/dialog.css";
+  @reference "../reference.css";
+</style>

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

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