luna-plus 0.0.5

package/dist/Segmented/Segmented.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import type { SegmentedOption, SegmentedSize } from './types'
+
+    interface SegmentedProps {
+        modelValue?: string | number
+        options?: SegmentedOption[] | string[]
+        size?: SegmentedSize
+        disabled?: boolean
+        block?: boolean
+        class?: string
+    }
+
+    let { modelValue = $bindable(), options = [], size = 'default', disabled = false, block = false, class: cls = '', ...attrs }: SegmentedProps = $props()
+
+    const normalizedOptions = $derived(options.map((opt) => (typeof opt === 'string' ? { value: opt, label: opt } : opt)))
+
+    const handleSelect = (option: SegmentedOption): void => {
+        if (disabled || option.disabled) return
+        modelValue = option.value
+    }
+
+    const classes = $derived(`lm-segmented lm-segmented--${size}${block ? ' is-block' : ''}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} role="radiogroup" {...attrs}>
+    {#each normalizedOptions as option (option.value)}
+        <button
+            type="button"
+            class="lm-segmented__item{modelValue === option.value ? ' is-selected' : ''}{option.disabled ? ' is-disabled' : ''}"
+            role="radio"
+            aria-checked={modelValue === option.value}
+            disabled={disabled || option.disabled}
+            onclick={() => handleSelect(option)}
+        >
+            {#if option.icon}
+                <span class="lm-segmented__icon">
+                    {@render option.icon()}
+                </span>
+            {/if}
+            <span class="lm-segmented__label">
+                {#if typeof option.label === 'string'}
+                    {option.label}
+                {:else}
+                    {@render option.label()}
+                {/if}
+            </span>
+        </button>
+    {/each}
+</div>

package/dist/Segmented/Segmented.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { SegmentedOption, SegmentedSize } from './types';
+interface SegmentedProps {
+    modelValue?: string | number;
+    options?: SegmentedOption[] | string[];
+    size?: SegmentedSize;
+    disabled?: boolean;
+    block?: boolean;
+    class?: string;
+}
+declare const Segmented: import("svelte").Component<SegmentedProps, {}, "modelValue">;
+type Segmented = ReturnType<typeof Segmented>;
+export default Segmented;

package/dist/Segmented/index.d.ts

@@ -0,0 +1,4 @@
+import Segmented from './Segmented.svelte';
+export { Segmented };
+export type { SegmentedProps, SegmentedOption, SegmentedSize } from './types';
+export default Segmented;

package/dist/Segmented/index.js

@@ -0,0 +1,3 @@
+import Segmented from './Segmented.svelte';
+export { Segmented };
+export default Segmented;

package/dist/Segmented/types.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+/** Segmented 选项 */
+export interface SegmentedOption {
+    /** 选项值 */
+    value: string | number;
+    /** 选项标签 */
+    label: string | Snippet;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 图标 */
+    icon?: Snippet;
+}
+/** Segmented 尺寸 */
+export type SegmentedSize = 'small' | 'default' | 'large';
+/** Segmented 属性 */
+export interface SegmentedProps {
+    /** 绑定值 */
+    modelValue?: string | number;
+    /** 选项列表 */
+    options?: SegmentedOption[] | string[];
+    /** 尺寸 */
+    size?: SegmentedSize;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否块级 */
+    block?: boolean;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Segmented/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Select/Option.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  interface OptionProps {
+    value: string | number;
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+  }
+
+  let {
+    value,
+    label,
+    disabled = false,
+    class: cls = "",
+    ...attrs
+  }: OptionProps = $props();
+
+  const classes = $derived(
+    `lm-option${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+</script>
+
+<li
+  class={classes}
+  role="option"
+  data-value={value}
+  aria-disabled={disabled}
+  {...attrs}
+>
+  {label ?? value}
+</li>

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

@@ -0,0 +1,9 @@
+interface OptionProps {
+    value: string | number;
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+}
+declare const Option: import("svelte").Component<OptionProps, {}, "">;
+type Option = ReturnType<typeof Option>;
+export default Option;

package/dist/Select/OptionGroup.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface OptionGroupProps {
+    label?: string;
+    disabled?: boolean;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    label,
+    disabled = false,
+    children,
+    class: cls = "",
+    ...attrs
+  }: OptionGroupProps = $props();
+
+  const classes = $derived(
+    `lm-option-group${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+</script>
+
+<li class={classes} role="group" aria-label={label} {...attrs}>
+  {#if label}
+    <div class="lm-option-group__title">{label}</div>
+  {/if}
+  <ul class="lm-option-group__list" role="listbox">
+    {#if children}
+      {@render children()}
+    {/if}
+  </ul>
+</li>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface OptionGroupProps {
+    label?: string;
+    disabled?: boolean;
+    children?: Snippet;
+    class?: string;
+}
+declare const OptionGroup: import("svelte").Component<OptionGroupProps, {}, "">;
+type OptionGroup = ReturnType<typeof OptionGroup>;
+export default OptionGroup;

package/dist/Select/Select.svelte

@@ -0,0 +1,245 @@
+<script lang="ts">
+  import type { SelectOption, SelectProps } from "./types";
+  import { onMount, onDestroy, tick } from "svelte";
+  import { createDropdownTransition } from "../utils";
+  import Icon from "../Icon/Icon.svelte";
+  import { ChevronDown, X } from "lucide";
+
+  let {
+    modelValue = $bindable(),
+    options = [],
+    placeholder = "请选择",
+    disabled = false,
+    clearable = false,
+    multiple = false,
+    size = "default",
+    filterable = false,
+    showMenuArrow = true,
+    onvisiblechange,
+    onchange,
+    children,
+    class: cls = "",
+    ...attrs
+  }: SelectProps = $props();
+
+  let visible = $state(false);
+  let reduceMotion = $state(false);
+  let searchQuery = $state("");
+  let rootEl: HTMLDivElement | null = $state(null);
+  let inputEl: HTMLInputElement | null = $state(null);
+  const dropdownId = `lm-select-dropdown-${Math.random().toString(36).slice(2, 9)}`;
+
+  const selectedValues = $derived.by((): (string | number)[] => {
+    if (multiple) return Array.isArray(modelValue) ? modelValue : [];
+    return modelValue !== undefined &&
+      modelValue !== null &&
+      !Array.isArray(modelValue)
+      ? [modelValue]
+      : [];
+  });
+
+  const hasValue = $derived(selectedValues.length > 0);
+
+  const filteredOptions = $derived.by(() => {
+    if (!filterable) return options;
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return options;
+    return options.filter((opt) => opt.label.toLowerCase().includes(query));
+  });
+
+  const displayLabel = $derived.by(() => {
+    if (!hasValue) return "";
+    const labels = selectedValues
+      .map((v) => options.find((opt) => opt.value === v)?.label)
+      .filter((v): v is string => Boolean(v));
+    return labels.join(", ");
+  });
+
+  const isSelected = (value: string | number): boolean =>
+    selectedValues.includes(value);
+
+  const open = async (): Promise<void> => {
+    if (disabled || visible) return;
+    visible = true;
+    onvisiblechange?.(true);
+    if (filterable) {
+      searchQuery = "";
+      await tick();
+      inputEl?.focus();
+    }
+  };
+
+  const close = (): void => {
+    if (!visible) return;
+    visible = false;
+    onvisiblechange?.(false);
+    searchQuery = "";
+  };
+
+  const toggle = (): void => {
+    if (visible) close();
+    else void open();
+  };
+
+  const commitValue = (
+    next: string | number | (string | number)[] | undefined,
+  ): void => {
+    modelValue = next as any;
+    onchange?.(next);
+  };
+
+  const handleSelect = (option: SelectOption): void => {
+    if (option.disabled) return;
+
+    if (multiple) {
+      const next = new Set(selectedValues);
+      if (next.has(option.value)) next.delete(option.value);
+      else next.add(option.value);
+      commitValue(Array.from(next));
+    } else {
+      commitValue(option.value);
+      close();
+    }
+  };
+
+  const handleClear = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    commitValue(multiple ? [] : undefined);
+  };
+
+  const handleTriggerKeydown = (e: KeyboardEvent): void => {
+    if (e.key === "Escape") {
+      close();
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggle();
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      void open();
+    }
+  };
+
+  const handlePointerDownOutside = (e: PointerEvent): void => {
+    if (!rootEl) return;
+    const path =
+      typeof e.composedPath === "function"
+        ? (e.composedPath() as EventTarget[])
+        : ([] as EventTarget[]);
+    if (path.includes(rootEl)) return;
+    close();
+  };
+
+  const dropdownTransition = $derived(createDropdownTransition(reduceMotion));
+
+  onMount(() => {
+    if (typeof window !== "undefined") {
+      reduceMotion =
+        window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ??
+        false;
+    }
+    document.addEventListener("pointerdown", handlePointerDownOutside, true);
+  });
+
+  onDestroy(() => {
+    document.removeEventListener("pointerdown", handlePointerDownOutside, true);
+  });
+
+  const classes = $derived(
+    `lm-select lm-select--${size}${visible ? " is-focus" : ""}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+</script>
+
+<div class={classes} bind:this={rootEl} {...attrs}>
+  <div
+    class="lm-select__trigger"
+    role="combobox"
+    tabindex={disabled ? -1 : 0}
+    aria-controls={dropdownId}
+    aria-expanded={visible}
+    aria-haspopup="listbox"
+    aria-disabled={disabled}
+    onclick={toggle}
+    onkeydown={handleTriggerKeydown}
+  >
+    {#if filterable && visible}
+      <input
+        bind:this={inputEl}
+        class="lm-select__input"
+        type="text"
+        bind:value={searchQuery}
+        {placeholder}
+        onclick={(e: MouseEvent) => e.stopPropagation()}
+        onkeydown={(e: KeyboardEvent) => e.key === "Escape" && close()}
+      />
+    {:else}
+      <span class="lm-select__value" class:is-placeholder={!hasValue}>
+        {hasValue ? displayLabel : placeholder}
+      </span>
+    {/if}
+
+    <span class="lm-select__suffix">
+      {#if clearable && hasValue && !disabled}
+        <button
+          type="button"
+          class="lm-select__clear"
+          onclick={handleClear}
+          aria-label="清空"
+        >
+          <Icon icon={X} size={14} />
+        </button>
+      {:else}
+        <Icon
+          icon={ChevronDown}
+          size={14}
+          class="lm-select__arrow{visible ? ' is-reverse' : ''}"
+        />
+      {/if}
+    </span>
+  </div>
+
+  {#if visible}
+    <div
+      id={dropdownId}
+      class="lm-select__dropdown"
+      role="listbox"
+      transition:dropdownTransition
+    >
+      {#if showMenuArrow}
+        <div class="lm-select__menu-arrow" aria-hidden="true"></div>
+      {/if}
+      <div class="lm-select__menu-content">
+        {#if children}
+          {@render children()}
+        {:else if filteredOptions.length > 0}
+          {#each filteredOptions as option (option.value)}
+            <button
+              type="button"
+              class="lm-select__option{isSelected(option.value)
+                ? ' is-selected'
+                : ''}"
+              role="option"
+              aria-selected={isSelected(option.value)}
+              disabled={option.disabled}
+              onclick={() => handleSelect(option)}
+              onkeydown={(e: KeyboardEvent) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSelect(option);
+                }
+              }}
+            >
+              {option.label}
+            </button>
+          {/each}
+        {:else}
+          <div class="lm-select__empty">无匹配数据</div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { SelectProps } from './types';
+declare const Select: import("svelte").Component<SelectProps, {}, "modelValue">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/Select/index.d.ts

@@ -0,0 +1,4 @@
+import Select from './Select.svelte';
+export { Select };
+export type { SelectProps, SelectOption, SelectSize } from './types';
+export default Select;

package/dist/Select/index.js

@@ -0,0 +1,3 @@
+import Select from './Select.svelte';
+export { Select };
+export default Select;

package/dist/Select/types.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+/** Select 选项 */
+export interface SelectOption {
+    /** 选项值 */
+    value: string | number;
+    /** 选项标签 */
+    label: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+/** Select 尺寸 */
+export type SelectSize = 'small' | 'default' | 'large';
+/** Select 属性 */
+export interface SelectProps {
+    /** 绑定值 */
+    modelValue?: string | number | (string | number)[];
+    /** 选项列表 */
+    options?: SelectOption[];
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否可清空 */
+    clearable?: boolean;
+    /** 是否多选 */
+    multiple?: boolean;
+    /** 尺寸 */
+    size?: SelectSize;
+    /** 是否可搜索 */
+    filterable?: boolean;
+    /** 是否显示下拉菜单箭头 */
+    showMenuArrow?: boolean;
+    /** 下拉显隐变化 */
+    onvisiblechange?: (visible: boolean) => void;
+    /** 选中值变化 */
+    onchange?: (value: string | number | (string | number)[] | undefined) => void;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Select/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Skeleton/Skeleton.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface SkeletonProps {
+        animated?: boolean
+        rows?: number
+        loading?: boolean
+        throttle?: number
+        children?: Snippet
+        template?: Snippet
+        class?: string
+    }
+
+    let { animated = true, rows = 3, loading = true, throttle = 0, children, template, class: cls = '', ...attrs }: SkeletonProps = $props()
+
+    let shouldShow = $state(false)
+
+    $effect(() => {
+        if (throttle > 0 && loading) {
+            const timer = setTimeout(() => {
+                shouldShow = true
+            }, throttle)
+            return () => clearTimeout(timer)
+        }
+        shouldShow = loading
+    })
+
+    const classes = $derived(`lm-skeleton${animated ? ' is-animated' : ''}${cls ? ` ${cls}` : ''}`)
+    const rowIndices = $derived(Array.from({ length: rows }, (_, i) => i))
+</script>
+
+{#if shouldShow}
+    <div class={classes} {...attrs}>
+        {#if template}
+            {@render template()}
+        {:else}
+            {#each rowIndices as i (i)}
+                <div class="lm-skeleton__item lm-skeleton__p" class:is-first={i === 0} class:is-last={i === rows - 1}></div>
+            {/each}
+        {/if}
+    </div>
+{:else if children}
+    {@render children()}
+{/if}

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface SkeletonProps {
+    animated?: boolean;
+    rows?: number;
+    loading?: boolean;
+    throttle?: number;
+    children?: Snippet;
+    template?: Snippet;
+    class?: string;
+}
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/Skeleton/SkeletonItem.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import type { SkeletonItemVariant } from './types'
+
+    interface SkeletonItemProps {
+        variant?: SkeletonItemVariant
+        class?: string
+    }
+
+    let { variant = 'text', class: cls = '', ...attrs }: SkeletonItemProps = $props()
+
+    const classes = $derived(`lm-skeleton__item lm-skeleton__${variant}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}></div>

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

@@ -0,0 +1,8 @@
+import type { SkeletonItemVariant } from './types';
+interface SkeletonItemProps {
+    variant?: SkeletonItemVariant;
+    class?: string;
+}
+declare const SkeletonItem: import("svelte").Component<SkeletonItemProps, {}, "">;
+type SkeletonItem = ReturnType<typeof SkeletonItem>;
+export default SkeletonItem;

package/dist/Skeleton/index.d.ts

@@ -0,0 +1,5 @@
+import Skeleton from './Skeleton.svelte';
+import SkeletonItem from './SkeletonItem.svelte';
+export { Skeleton, SkeletonItem };
+export type { SkeletonProps, SkeletonItemProps, SkeletonItemVariant } from './types';
+export default Skeleton;

package/dist/Skeleton/index.js

@@ -0,0 +1,4 @@
+import Skeleton from './Skeleton.svelte';
+import SkeletonItem from './SkeletonItem.svelte';
+export { Skeleton, SkeletonItem };
+export default Skeleton;

package/dist/Skeleton/types.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+/** Skeleton 属性 */
+export interface SkeletonProps {
+    /** 是否显示加载动画 */
+    animated?: boolean;
+    /** 渲染行数 */
+    rows?: number;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 是否显示节流效果 */
+    throttle?: number;
+    /** 子内容（加载完成后显示） */
+    children?: Snippet;
+    /** 自定义模板 */
+    template?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** SkeletonItem 变体 */
+export type SkeletonItemVariant = 'text' | 'p' | 'h1' | 'h3' | 'caption' | 'button' | 'image' | 'circle' | 'rect';
+/** SkeletonItem 属性 */
+export interface SkeletonItemProps {
+    /** 变体类型 */
+    variant?: SkeletonItemVariant;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Skeleton/types.js

@@ -0,0 +1 @@
+export {};