luna-plus 0.0.5

package/dist/Statistic/Statistic.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface StatisticProps {
+        title?: string | Snippet
+        value?: number | string
+        precision?: number
+        prefix?: string | Snippet
+        suffix?: string | Snippet
+        groupSeparator?: string
+        decimalSeparator?: string
+        valueStyle?: string
+        class?: string
+    }
+
+    let { title, value = 0, precision, prefix, suffix, groupSeparator = ',', decimalSeparator = '.', valueStyle = '', class: cls = '', ...attrs }: StatisticProps = $props()
+
+    const formatValue = $derived.by(() => {
+        if (typeof value === 'string') return value
+        let num = precision !== undefined ? Number(value.toFixed(precision)) : value
+        const parts = num.toString().split('.')
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator)
+        return parts.join(decimalSeparator)
+    })
+
+    const classes = $derived(`lm-statistic${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if title}
+        <div class="lm-statistic__title">
+            {#if typeof title === 'string'}
+                {title}
+            {:else}
+                {@render title()}
+            {/if}
+        </div>
+    {/if}
+
+    <div class="lm-statistic__content" style={valueStyle}>
+        {#if prefix}
+            <span class="lm-statistic__prefix">
+                {#if typeof prefix === 'string'}
+                    {prefix}
+                {:else}
+                    {@render prefix()}
+                {/if}
+            </span>
+        {/if}
+
+        <span class="lm-statistic__value">{formatValue}</span>
+
+        {#if suffix}
+            <span class="lm-statistic__suffix">
+                {#if typeof suffix === 'string'}
+                    {suffix}
+                {:else}
+                    {@render suffix()}
+                {/if}
+            </span>
+        {/if}
+    </div>
+</div>

package/dist/Statistic/Statistic.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface StatisticProps {
+    title?: string | Snippet;
+    value?: number | string;
+    precision?: number;
+    prefix?: string | Snippet;
+    suffix?: string | Snippet;
+    groupSeparator?: string;
+    decimalSeparator?: string;
+    valueStyle?: string;
+    class?: string;
+}
+declare const Statistic: import("svelte").Component<StatisticProps, {}, "">;
+type Statistic = ReturnType<typeof Statistic>;
+export default Statistic;

package/dist/Statistic/index.d.ts

@@ -0,0 +1,5 @@
+import Statistic from './Statistic.svelte';
+import Countdown from './Countdown.svelte';
+export { Statistic, Countdown };
+export type { StatisticProps, CountdownProps } from './types';
+export default Statistic;

package/dist/Statistic/index.js

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

package/dist/Statistic/types.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+/** Statistic 属性 */
+export interface StatisticProps {
+    /** 标题 */
+    title?: string | Snippet;
+    /** 数值 */
+    value?: number | string;
+    /** 精度 */
+    precision?: number;
+    /** 前缀 */
+    prefix?: string | Snippet;
+    /** 后缀 */
+    suffix?: string | Snippet;
+    /** 千分位分隔符 */
+    groupSeparator?: string;
+    /** 小数点 */
+    decimalSeparator?: string;
+    /** 值样式 */
+    valueStyle?: string;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Countdown 属性 */
+export interface CountdownProps {
+    /** 标题 */
+    title?: string | Snippet;
+    /** 目标时间 */
+    value: number | Date;
+    /** 格式化 */
+    format?: string;
+    /** 前缀 */
+    prefix?: string | Snippet;
+    /** 后缀 */
+    suffix?: string | Snippet;
+    /** 值样式 */
+    valueStyle?: string;
+    /** 完成回调 */
+    onfinish?: () => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Statistic/types.js

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

package/dist/Steps/Step.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { StepStatus } from './types'
+    import { getContext } from 'svelte'
+    import { STEPS_CONTEXT_KEY, type StepsContext } from './StepsContext'
+    import Icon from '../Icon/Icon.svelte'
+    import { Check, X } from 'lucide'
+
+    interface StepProps {
+        title?: string
+        description?: string
+        icon?: Snippet
+        status?: StepStatus
+        index?: number
+        children?: Snippet
+        class?: string
+    }
+
+    let { title = '', description = '', icon, status, index = 0, children, class: cls = '', ...attrs }: StepProps = $props()
+
+    const steps = getContext<StepsContext>(STEPS_CONTEXT_KEY)
+
+    const currentStatus = $derived(status || steps?.getStepStatus(index) || 'wait')
+    const isSimple = $derived(steps?.simple ?? false)
+    const isFinish = $derived(currentStatus === 'finish' || currentStatus === 'success')
+    const isError = $derived(currentStatus === 'error')
+
+    const classes = $derived(`lm-step is-${currentStatus}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    <div class="lm-step__head">
+        <div class="lm-step__icon">
+            {#if icon}
+                {@render icon()}
+            {:else if isFinish}
+                <Icon icon={Check} size={14} />
+            {:else if isError}
+                <Icon icon={X} size={14} />
+            {:else}
+                <span class="lm-step__icon-inner">{index + 1}</span>
+            {/if}
+        </div>
+        <div class="lm-step__line"></div>
+    </div>
+
+    <div class="lm-step__main">
+        {#if title}
+            <div class="lm-step__title">{title}</div>
+        {/if}
+        {#if description && !isSimple}
+            <div class="lm-step__description">{description}</div>
+        {/if}
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+</div>

package/dist/Steps/Step.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { StepStatus } from './types';
+interface StepProps {
+    title?: string;
+    description?: string;
+    icon?: Snippet;
+    status?: StepStatus;
+    index?: number;
+    children?: Snippet;
+    class?: string;
+}
+declare const Step: import("svelte").Component<StepProps, {}, "">;
+type Step = ReturnType<typeof Step>;
+export default Step;

package/dist/Steps/Steps.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { StepsDirection, StepStatus } from './types'
+    import { setContext } from 'svelte'
+    import { STEPS_CONTEXT_KEY, type StepsContext } from './StepsContext'
+
+    interface StepsProps {
+        active?: number
+        direction?: StepsDirection
+        alignCenter?: boolean
+        simple?: boolean
+        finishStatus?: StepStatus
+        processStatus?: StepStatus
+        children?: Snippet
+        class?: string
+    }
+
+    let { active = 0, direction = 'horizontal', alignCenter = false, simple = false, finishStatus = 'finish', processStatus = 'process', children, class: cls = '', ...attrs }: StepsProps = $props()
+
+    const getStepStatus = (index: number): StepStatus => {
+        if (index < active) return finishStatus
+        if (index === active) return processStatus
+        return 'wait'
+    }
+
+    const context: StepsContext = {
+        get active() {
+            return active
+        },
+        get direction() {
+            return direction
+        },
+        get alignCenter() {
+            return alignCenter
+        },
+        get simple() {
+            return simple
+        },
+        get finishStatus() {
+            return finishStatus
+        },
+        get processStatus() {
+            return processStatus
+        },
+        getStepStatus,
+        get stepCount() {
+            return 0
+        },
+    }
+
+    setContext(STEPS_CONTEXT_KEY, context)
+
+    const classes = $derived(`lm-steps lm-steps--${direction}${simple ? ' lm-steps--simple' : ''}${alignCenter ? ' is-center' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if children}
+        {@render children()}
+    {/if}
+</div>

package/dist/Steps/Steps.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { StepsDirection, StepStatus } from './types';
+interface StepsProps {
+    active?: number;
+    direction?: StepsDirection;
+    alignCenter?: boolean;
+    simple?: boolean;
+    finishStatus?: StepStatus;
+    processStatus?: StepStatus;
+    children?: Snippet;
+    class?: string;
+}
+declare const Steps: import("svelte").Component<StepsProps, {}, "">;
+type Steps = ReturnType<typeof Steps>;
+export default Steps;

package/dist/Steps/StepsContext.d.ts

@@ -0,0 +1,12 @@
+import type { StepStatus } from './types';
+export declare const STEPS_CONTEXT_KEY: unique symbol;
+export interface StepsContext {
+    active: number;
+    direction: 'horizontal' | 'vertical';
+    alignCenter: boolean;
+    simple: boolean;
+    finishStatus: StepStatus;
+    processStatus: StepStatus;
+    getStepStatus: (index: number) => StepStatus;
+    stepCount: number;
+}

package/dist/Steps/StepsContext.js

@@ -0,0 +1 @@
+export const STEPS_CONTEXT_KEY = Symbol('steps');

package/dist/Steps/index.d.ts

@@ -0,0 +1,5 @@
+import Steps from './Steps.svelte';
+import Step from './Step.svelte';
+export { Steps, Step };
+export type { StepsProps, StepProps, StepsDirection, StepStatus } from './types';
+export default Steps;

package/dist/Steps/index.js

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

package/dist/Steps/types.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+/** Steps 方向 */
+export type StepsDirection = 'horizontal' | 'vertical';
+/** Step 状态 */
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error' | 'success';
+/** Steps 属性 */
+export interface StepsProps {
+    /** 当前激活步骤 */
+    active?: number;
+    /** 方向 */
+    direction?: StepsDirection;
+    /** 是否居中对齐 */
+    alignCenter?: boolean;
+    /** 是否简洁风格 */
+    simple?: boolean;
+    /** 完成步骤的状态 */
+    finishStatus?: StepStatus;
+    /** 当前步骤的状态 */
+    processStatus?: StepStatus;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Step 属性 */
+export interface StepProps {
+    /** 标题 */
+    title?: string;
+    /** 描述 */
+    description?: string;
+    /** 图标 */
+    icon?: Snippet;
+    /** 状态 */
+    status?: StepStatus;
+    /** 步骤索引 */
+    index?: number;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Steps/types.js

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

package/dist/Switch/Switch.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import Icon from '../Icon/Icon.svelte'
+    import { Loader } from 'lucide'
+    import type { IconNode } from 'lucide'
+    import type { Snippet } from 'svelte'
+
+    interface SwitchProps {
+        modelValue?: boolean
+        disabled?: boolean
+        size?: 'small' | 'medium' | 'large'
+        activeColor?: string
+        inactiveColor?: string
+        loading?: boolean
+        labelActive?: string
+        labelInactive?: string
+        loadingText?: string
+        ariaLabel?: string
+        iconLeft?: IconNode
+        iconRight?: IconNode
+        children?: Snippet
+        onchange?: (checked: boolean) => void
+        class?: string
+    }
+
+    let {
+        modelValue = $bindable(false),
+        disabled = false,
+        size = 'medium',
+        activeColor,
+        inactiveColor,
+        loading = false,
+        labelActive,
+        labelInactive,
+        loadingText,
+        ariaLabel,
+        iconLeft,
+        iconRight,
+        children,
+        onchange,
+        class: cls = '',
+        ...attrs
+    }: SwitchProps = $props()
+
+    const classes = $derived(
+        `lm-switch lm-switch--${size}` +
+            `${modelValue ? ' is-active' : ''}` +
+            `${disabled ? ' is-disabled' : ''}` +
+            `${loading ? ' is-loading' : ''}` +
+            `${iconLeft || iconRight ? ' is-has-icons' : ''}` +
+            `${cls ? ` ${cls}` : ''}`
+    )
+
+    const dynamicStyle = $derived.by(() => {
+        if (modelValue && activeColor) return `--sw-color: ${activeColor}`
+        if (!modelValue && inactiveColor) return `--sw-color: ${inactiveColor}`
+        return undefined
+    })
+
+    const labelText = $derived.by(() => {
+        if (loading && loadingText) return loadingText
+        return labelActive || labelInactive ? (modelValue ? labelActive : labelInactive) : undefined
+    })
+
+    const toggle = (): void => {
+        if (disabled || loading) return
+        modelValue = !modelValue
+        onchange?.(modelValue)
+    }
+
+    const handleKeydown = (event: KeyboardEvent): void => {
+        if (disabled || loading) return
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault()
+            toggle()
+        }
+    }
+</script>
+
+<button
+    class={classes}
+    type="button"
+    role="switch"
+    aria-checked={modelValue}
+    aria-disabled={disabled || undefined}
+    aria-busy={loading || undefined}
+    aria-label={ariaLabel}
+    style={dynamicStyle}
+    {disabled}
+    onclick={toggle}
+    onkeydown={handleKeydown}
+    {...attrs}
+>
+    <span class="lm-switch__track" aria-hidden="true">
+        {#if iconLeft}
+            <span class="lm-switch__icon lm-switch__icon--left" aria-hidden="true">
+                <Icon icon={iconLeft} size="100%" />
+            </span>
+        {/if}
+
+        <span class="lm-switch__thumb" aria-hidden="true">
+            {#if loading}
+                <Icon icon={Loader} class="lm-switch__loading" size={14} />
+            {/if}
+        </span>
+
+        {#if iconRight}
+            <span class="lm-switch__icon lm-switch__icon--right" aria-hidden="true">
+                <Icon icon={iconRight} size="100%" />
+            </span>
+        {/if}
+    </span>
+
+    {#if labelText}
+        <span class="lm-switch__label" class:is-loading={loading} aria-live={loading ? 'polite' : undefined}>
+            {labelText}
+        </span>
+    {/if}
+
+    {#if children}
+        {@render children()}
+    {/if}
+</button>

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

@@ -0,0 +1,22 @@
+import type { IconNode } from 'lucide';
+import type { Snippet } from 'svelte';
+interface SwitchProps {
+    modelValue?: boolean;
+    disabled?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    activeColor?: string;
+    inactiveColor?: string;
+    loading?: boolean;
+    labelActive?: string;
+    labelInactive?: string;
+    loadingText?: string;
+    ariaLabel?: string;
+    iconLeft?: IconNode;
+    iconRight?: IconNode;
+    children?: Snippet;
+    onchange?: (checked: boolean) => void;
+    class?: string;
+}
+declare const Switch: import("svelte").Component<SwitchProps, {}, "modelValue">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/Switch/index.d.ts

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

package/dist/Switch/index.js

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

package/dist/Switch/types.d.ts

@@ -0,0 +1,37 @@
+import type { IconNode } from 'lucide';
+import type { Snippet } from 'svelte';
+/** Switch 尺寸 */
+export type SwitchSize = 'small' | 'medium' | 'large';
+/** Switch 属性 */
+export interface SwitchProps {
+    /** 绑定值 */
+    modelValue?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 尺寸 */
+    size?: SwitchSize;
+    /** 激活时的颜色 */
+    activeColor?: string;
+    /** 未激活时的颜色 */
+    inactiveColor?: string;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 激活时的标签文字 */
+    labelActive?: string;
+    /** 未激活时的标签文字 */
+    labelInactive?: string;
+    /** 加载时的文字 */
+    loadingText?: string;
+    /** 无障碍标签 */
+    ariaLabel?: string;
+    /** 内置左侧图标（渲染在轨道内部左侧） */
+    iconLeft?: IconNode;
+    /** 内置右侧图标（渲染在轨道内部右侧） */
+    iconRight?: IconNode;
+    /** 子内容 */
+    children?: Snippet;
+    /** 变化回调 */
+    onchange?: (checked: boolean) => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Switch/types.js

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