luna-plus 0.0.5

package/dist/Progress/Progress.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    interface ProgressProps {
+        percentage?: number
+        status?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+        showText?: boolean
+        strokeWidth?: number
+        color?: string
+        class?: string
+    }
+
+    let { percentage = 0, status = 'primary', showText = true, strokeWidth = 6, color, class: cls = '', ...attrs }: ProgressProps = $props()
+
+    const pct = $derived(Math.max(0, Math.min(100, Math.round(percentage))))
+
+    const classes = $derived(cls ? `lm-progress ${cls}` : 'lm-progress')
+
+    const innerStyle = $derived.by(() => {
+        const styles = [`width: ${pct}%`, `height: ${strokeWidth}px`]
+        if (color) styles.push(`background-color: ${color}`)
+        return styles.join('; ')
+    })
+
+    const trackStyle = $derived(`height: ${strokeWidth}px`)
+</script>
+
+<div {...attrs} class={classes}>
+    <div class="lm-progress__track" style={trackStyle}>
+        <div class={'lm-progress__bar lm-progress__bar--' + status} style={innerStyle}></div>
+    </div>
+    {#if showText}
+        <span class="lm-progress__text">{pct}%</span>
+    {/if}
+</div>

package/dist/Progress/Progress.svelte.d.ts

@@ -0,0 +1,11 @@
+interface ProgressProps {
+    percentage?: number;
+    status?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    showText?: boolean;
+    strokeWidth?: number;
+    color?: string;
+    class?: string;
+}
+declare const Progress: import("svelte").Component<ProgressProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/Progress/index.d.ts

@@ -0,0 +1,4 @@
+import Progress from './Progress.svelte';
+export { Progress };
+export type { ProgressProps, ProgressStatus } from './types';
+export default Progress;

package/dist/Progress/index.js

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

package/dist/Progress/types.d.ts

@@ -0,0 +1,17 @@
+/** Progress 状态 */
+export type ProgressStatus = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/** Progress 属性 */
+export interface ProgressProps {
+    /** 百分比 */
+    percentage?: number;
+    /** 状态 */
+    status?: ProgressStatus;
+    /** 是否显示文字 */
+    showText?: boolean;
+    /** 进度条宽度 */
+    strokeWidth?: number;
+    /** 自定义颜色 */
+    color?: string;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Progress/types.js

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

package/dist/Radio/Radio.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface RadioProps {
+    checked?: boolean;
+    value?: string | number;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    label?: string;
+    name?: string;
+    children?: Snippet;
+    onchange?: (value: string | number) => void;
+    class?: string;
+  }
+
+  let {
+    checked = $bindable(false),
+    value,
+    disabled = false,
+    size = "medium",
+    label,
+    name,
+    children,
+    onchange,
+    class: cls = "",
+    ...attrs
+  }: RadioProps = $props();
+
+  const classes = $derived(
+    `lm-radio lm-radio--${size}${checked ? " is-checked" : ""}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+
+  const handleInputChange = (e: Event): void => {
+    if (disabled) return;
+    if ((e.currentTarget as HTMLInputElement).checked) {
+      checked = true;
+      if (value !== undefined) onchange?.(value);
+    }
+  };
+</script>
+
+<label class={classes}>
+  <span class="lm-radio__input">
+    <input
+      {...attrs}
+      type="radio"
+      class="lm-radio__original"
+      {value}
+      {name}
+      {disabled}
+      {checked}
+      onchange={handleInputChange}
+    />
+    <span class="lm-radio__inner"></span>
+  </span>
+
+  {#if children || label}
+    <span class="lm-radio__label">
+      {#if children}
+        {@render children()}
+      {:else if label}
+        {label}
+      {/if}
+    </span>
+  {/if}
+</label>

package/dist/Radio/Radio.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface RadioProps {
+    checked?: boolean;
+    value?: string | number;
+    disabled?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    label?: string;
+    name?: string;
+    children?: Snippet;
+    onchange?: (value: string | number) => void;
+    class?: string;
+}
+declare const Radio: import("svelte").Component<RadioProps, {}, "checked">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/Radio/RadioGroup.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface RadioGroupProps {
+    modelValue?: string | number;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    name?: string;
+    children?: Snippet;
+    onchange?: (value: string | number) => void;
+    class?: string;
+  }
+
+  let {
+    modelValue = $bindable(),
+    disabled = false,
+    size = "medium",
+    name,
+    children,
+    onchange,
+    class: cls = "",
+    ...attrs
+  }: RadioGroupProps = $props();
+
+  const classes = $derived(
+    `lm-radio-group lm-radio-group--${size}${disabled ? " is-disabled" : ""}${cls ? ` ${cls}` : ""}`,
+  );
+
+  const handleChange = (value: string | number): void => {
+    if (disabled) return;
+    modelValue = value;
+    onchange?.(value);
+  };
+</script>
+
+<div class={classes} role="radiogroup" {...attrs}>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/Radio/RadioGroup.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+interface RadioGroupProps {
+    modelValue?: string | number;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    name?: string;
+    children?: Snippet;
+    onchange?: (value: string | number) => void;
+    class?: string;
+}
+declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "modelValue">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/Radio/index.d.ts

@@ -0,0 +1,4 @@
+import Radio from './Radio.svelte';
+export { Radio };
+export type { RadioProps, RadioSize } from './types';
+export default Radio;

package/dist/Radio/index.js

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

package/dist/Radio/types.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+/** Radio 尺寸 */
+export type RadioSize = 'small' | 'medium' | 'large';
+/** Radio 属性 */
+export interface RadioProps {
+    /** 是否选中 */
+    checked?: boolean;
+    /** 值 */
+    value?: string | number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 尺寸 */
+    size?: RadioSize;
+    /** 标签文字 */
+    label?: string;
+    /** 原生 name 属性 */
+    name?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 变化回调 */
+    onchange?: (value: string | number) => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Radio/types.js

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

package/dist/Rating/Rating.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+    interface RatingProps {
+        modelValue?: number
+        max?: number
+        size?: number
+        allowHalf?: boolean
+        disabled?: boolean
+        readonly?: boolean
+        clearable?: boolean
+        lowThreshold?: number
+        highThreshold?: number
+        colors?: string[]
+        voidColor?: string
+        disabledVoidColor?: string
+        showText?: boolean
+        showScore?: boolean
+        texts?: string[]
+        scoreTemplate?: string
+        precision?: number
+        class?: string
+        rounded?: boolean
+        iconPath?: string
+    }
+
+    const DEFAULT_ICON_PATH =
+        'M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'
+
+    const VIEW_BOX = '0 0 24 24'
+
+    let {
+        modelValue = $bindable(0),
+        max = 5,
+        size = 20,
+        allowHalf = false,
+        disabled = false,
+        readonly = false,
+        clearable = false,
+        lowThreshold = 2,
+        highThreshold = 4,
+        colors = [],
+        voidColor = '#C6D1DE',
+        disabledVoidColor = '#EFF2F7',
+        showText = false,
+        showScore = false,
+        texts = ['极差', '失望', '一般', '满意', '惊喜'],
+        scoreTemplate = '{value}',
+        precision = 1,
+        class: extraClass = '',
+        rounded = true,
+        iconPath = DEFAULT_ICON_PATH,
+        ...rest
+    }: RatingProps = $props()
+
+    let hoverValue = $state<number | null>(null)
+
+    $effect(() => {
+        if (modelValue > max) modelValue = max
+        else if (modelValue < 0) modelValue = 0
+    })
+
+    const displayValue = $derived(hoverValue ?? modelValue)
+    const hasCustomColors = $derived(colors.length > 0)
+    const step = $derived(allowHalf ? Math.min(precision, 0.5) : precision)
+
+    /** 星星索引数组（静态缓存） */
+    const starIndices = $derived(Array.from({ length: max }, (_, i) => i))
+
+    const activeColor = $derived.by(() => {
+        if (!hasCustomColors) return null
+        if (colors.length >= 3) {
+            if (displayValue <= lowThreshold) return colors[0]
+            if (displayValue >= highThreshold) return colors[2]
+            return colors[1]
+        }
+        return colors[0]
+    })
+
+    const displayText = $derived.by(() => {
+        if (showText) return texts[Math.ceil(displayValue) - 1] || ''
+        if (showScore) return scoreTemplate.replace('{value}', displayValue.toFixed(precision))
+        return ''
+    })
+
+    /** 精确到步长 */
+    const precise = (val: number): number => {
+        const factor = 1 / step
+        return Math.round(val * factor) / factor
+    }
+
+    /** 设置值 */
+    const setValue = (value: number): void => {
+        if (disabled || readonly) return
+        const v = precise(Math.min(max, Math.max(0, value)))
+        modelValue = clearable && v === modelValue ? 0 : v
+    }
+
+    /** 计算填充比例 */
+    const fillRatio = (index: number): number => {
+        const star = index + 1
+        if (displayValue >= star) return 1
+        if (allowHalf && displayValue > star - 1 && displayValue >= star - 0.5) return 0.5
+        return 0
+    }
+
+    /** 悬停处理 */
+    const onHover = (index: number, e: MouseEvent): void => {
+        if (disabled || readonly) return
+        let v = index + 1
+        if (allowHalf) {
+            const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+            if (e.clientX - rect.left < rect.width / 2) v = index + 0.5
+        }
+        hoverValue = v
+    }
+
+    /** 离开处理 */
+    const onLeave = (): void => {
+        if (!disabled && !readonly) hoverValue = null
+    }
+
+    /** 点击处理 */
+    const onClick = (index: number, e: MouseEvent): void => {
+        if (disabled || readonly) return
+        let v = index + 1
+        if (allowHalf) {
+            const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+            if (e.clientX - rect.left < rect.width / 2) v = index + 0.5
+        }
+        setValue(v)
+    }
+
+    /** 键盘处理 */
+    const onKeydown = (e: KeyboardEvent): void => {
+        if (disabled || readonly) return
+        let v = modelValue
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                v = Math.min(max, precise(modelValue + step))
+                e.preventDefault()
+                break
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                v = Math.max(0, precise(modelValue - step))
+                e.preventDefault()
+                break
+            case 'Home':
+                v = 0
+                e.preventDefault()
+                break
+            case 'End':
+                v = max
+                e.preventDefault()
+                break
+            default:
+                return
+        }
+        setValue(v)
+    }
+
+    const classes = $derived(
+        `lm-rating${disabled ? ' lm-rating--disabled' : ''}${readonly ? ' lm-rating--readonly' : ''}${allowHalf ? ' lm-rating--half' : ''}${!disabled && !readonly ? ' lm-rating--interactive' : ''}${rounded ? ' lm-rating--rounded' : ''}${extraClass ? ` ${extraClass}` : ''}`
+    )
+
+    /** 根元素样式（缓存避免重复计算） */
+    const rootStyle = $derived.by(() => {
+        const styles: string[] = []
+        if (hasCustomColors && activeColor) styles.push(`--rating-fill-color:${activeColor}`)
+        styles.push(`--rating-void-color:${disabled ? disabledVoidColor : voidColor}`)
+        styles.push(`font-size:${size}px`)
+        return styles.join(';')
+    })
+
+    const reset = (): void => setValue(0)
+    export { reset }
+</script>
+
+<div
+    class={classes}
+    role="slider"
+    aria-valuemin={0}
+    aria-valuemax={max}
+    aria-valuenow={modelValue}
+    aria-readonly={readonly}
+    aria-disabled={disabled}
+    tabindex={disabled ? undefined : 0}
+    onkeydown={onKeydown}
+    onmouseleave={onLeave}
+    style={rootStyle}
+    {...rest}
+>
+    {#each starIndices as index (index)}
+        {@const ratio = fillRatio(index)}
+        {@const isFull = ratio === 1}
+        {@const isHalf = ratio === 0.5}
+        {@const isEmpty = ratio === 0}
+        <button
+            type="button"
+            class="lm-rating__item"
+            aria-label="Rate {index + 1}"
+            disabled={disabled || readonly}
+            onmousemove={(e: MouseEvent) => onHover(index, e)}
+            onclick={(e: MouseEvent) => onClick(index, e)}
+        >
+            <span
+                class="lm-rating__icon-wrapper {rounded ? 'is-rounded' : ''}"
+                data-ratio={ratio}
+                data-full={isFull ? 'true' : undefined}
+                data-half={isHalf ? 'true' : undefined}
+                data-empty={isEmpty ? 'true' : undefined}
+            >
+                <svg viewBox={VIEW_BOX} class="lm-rating__icon lm-rating__icon--void" aria-hidden="true" focusable="false">
+                    <path d={iconPath} />
+                </svg>
+                <span class="lm-rating__icon-fill" data-ratio={ratio} data-half={isHalf ? 'true' : undefined} data-full={isFull ? 'true' : undefined}>
+                    <svg viewBox={VIEW_BOX} class="lm-rating__icon lm-rating__icon--filled" aria-hidden="true" focusable="false">
+                        <path d={iconPath} fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                </span>
+            </span>
+        </button>
+    {/each}
+    {#if displayText}
+        <span class="lm-rating__text">{displayText}</span>
+    {/if}
+</div>

package/dist/Rating/Rating.svelte.d.ts

@@ -0,0 +1,27 @@
+interface RatingProps {
+    modelValue?: number;
+    max?: number;
+    size?: number;
+    allowHalf?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    clearable?: boolean;
+    lowThreshold?: number;
+    highThreshold?: number;
+    colors?: string[];
+    voidColor?: string;
+    disabledVoidColor?: string;
+    showText?: boolean;
+    showScore?: boolean;
+    texts?: string[];
+    scoreTemplate?: string;
+    precision?: number;
+    class?: string;
+    rounded?: boolean;
+    iconPath?: string;
+}
+declare const Rating: import("svelte").Component<RatingProps, {
+    reset: () => void;
+}, "modelValue">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/Rating/index.d.ts

@@ -0,0 +1,4 @@
+import Rating from './Rating.svelte';
+export { Rating };
+export type { RatingProps } from './types';
+export default Rating;

package/dist/Rating/index.js

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

package/dist/Rating/types.d.ts

@@ -0,0 +1,43 @@
+/** Rating 属性 */
+export interface RatingProps {
+    /** 绑定值 */
+    modelValue?: number;
+    /** 最大值 */
+    max?: number;
+    /** 尺寸 */
+    size?: number;
+    /** 是否允许半选 */
+    allowHalf?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 是否可清空 */
+    clearable?: boolean;
+    /** 低分阈值 */
+    lowThreshold?: number;
+    /** 高分阈值 */
+    highThreshold?: number;
+    /** 颜色数组 */
+    colors?: string[];
+    /** 未选中颜色 */
+    voidColor?: string;
+    /** 禁用时未选中颜色 */
+    disabledVoidColor?: string;
+    /** 是否显示文字 */
+    showText?: boolean;
+    /** 是否显示分数 */
+    showScore?: boolean;
+    /** 文字数组 */
+    texts?: string[];
+    /** 分数模板 */
+    scoreTemplate?: string;
+    /** 精度 */
+    precision?: number;
+    /** 自定义类名 */
+    class?: string;
+    /** 是否圆角 */
+    rounded?: boolean;
+    /** 自定义图标路径 */
+    iconPath?: string;
+}

package/dist/Rating/types.js

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

package/dist/Result/Result.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { ResultStatus } from './types'
+    import type { IconNode } from 'lucide'
+    import Icon from '../Icon/Icon.svelte'
+    import { CheckCircle, AlertTriangle, XCircle, Info } from 'lucide'
+
+    interface ResultProps {
+        status?: ResultStatus
+        title?: string
+        subTitle?: string
+        icon?: Snippet
+        extra?: Snippet
+        children?: Snippet
+        class?: string
+    }
+
+    let { status = 'info', title = '', subTitle = '', icon, extra, children, class: cls = '', ...attrs }: ResultProps = $props()
+
+    const iconMap: Record<ResultStatus, IconNode> = {
+        success: CheckCircle,
+        warning: AlertTriangle,
+        error: XCircle,
+        info: Info,
+    }
+
+    const classes = $derived(`lm-result lm-result--${status}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    <div class="lm-result__icon">
+        {#if icon}
+            {@render icon()}
+        {:else}
+            <Icon icon={iconMap[status]} size={48} />
+        {/if}
+    </div>
+
+    {#if title}
+        <div class="lm-result__title">{title}</div>
+    {/if}
+
+    {#if subTitle}
+        <div class="lm-result__subtitle">{subTitle}</div>
+    {/if}
+
+    {#if extra}
+        <div class="lm-result__extra">
+            {@render extra()}
+        </div>
+    {/if}
+
+    {#if children}
+        <div class="lm-result__content">
+            {@render children()}
+        </div>
+    {/if}
+</div>

package/dist/Result/Result.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { ResultStatus } from './types';
+interface ResultProps {
+    status?: ResultStatus;
+    title?: string;
+    subTitle?: string;
+    icon?: Snippet;
+    extra?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const Result: import("svelte").Component<ResultProps, {}, "">;
+type Result = ReturnType<typeof Result>;
+export default Result;

package/dist/Result/index.d.ts

@@ -0,0 +1,4 @@
+import Result from './Result.svelte';
+export { Result };
+export type { ResultProps, ResultStatus } from './types';
+export default Result;

package/dist/Result/index.js

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

package/dist/Result/types.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+/** Result 状态类型 */
+export type ResultStatus = 'success' | 'warning' | 'info' | 'error';
+/** Result 属性 */
+export interface ResultProps {
+    /** 状态类型 */
+    status?: ResultStatus;
+    /** 标题 */
+    title?: string;
+    /** 副标题 */
+    subTitle?: string;
+    /** 图标插槽 */
+    icon?: Snippet;
+    /** 额外内容插槽 */
+    extra?: Snippet;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Result/types.js

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