lumen-plus 0.0.1

package/dist/components/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/components/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/components/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/components/Statistic/types.js

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

package/dist/components/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'
+    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/components/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/components/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/components/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/components/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/components/Steps/StepsContext.js

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

package/dist/components/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/components/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/components/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/components/Steps/types.js

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

package/dist/components/Switch/Switch.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import Icon from '../Icon'
+    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/components/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/components/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/components/Switch/index.js

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

package/dist/components/Switch/styles/index.scss

@@ -0,0 +1 @@
+@import './switch.scss';

package/dist/components/Switch/styles/switch.scss

@@ -0,0 +1,194 @@
+$namespace: 'lm' !default;
+$border-color-base: #dcdfe6 !default;
+$border-color-light: #e4e7ed !default;
+$color-primary: #409eff !default;
+$color-text-primary: #303133 !default;
+$color-text-regular: #606266 !default;
+$color-text-muted: #909399 !default;
+$bg-color: #ffffff !default;
+$bg-disabled: #f5f7fa !default;
+$font-size-base: 14px !default;
+$font-size-small: 12px !default;
+$font-size-large: 16px !default;
+
+@mixin b($block) {
+  .#{$namespace}-#{$block} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  &__#{$element} {
+    @content;
+  }
+}
+
+@mixin m($modifier) {
+  &--#{$modifier} {
+    @content;
+  }
+}
+
+@mixin when($state) {
+  &.is-#{$state} {
+    @content;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@include b(switch) {
+  --sw-height: 24px;
+  --sw-width: 40px;
+  --sw-color: #409eff;
+  
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  height: var(--sw-height);
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  font-family: inherit;
+  -webkit-tap-highlight-color: transparent;
+
+  @include e(track) {
+    position: relative;
+    width: var(--sw-width);
+    height: var(--sw-height);
+    background-color: #dcdfe6;
+    border-radius: calc(var(--sw-height) / 2);
+    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+  }
+
+  @include e(thumb) {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: calc(var(--sw-height) - 4px);
+    height: calc(var(--sw-height) - 4px);
+    background-color: $bg-color;
+    border-radius: 50%;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include e(loading) {
+    width: 70%;
+    height: 70%;
+    animation: spin 1s linear infinite;
+    color: $color-text-muted;
+  }
+
+  @include e(label) {
+    margin-left: 8px;
+    color: $color-text-regular;
+    font-size: $font-size-base;
+    white-space: nowrap;
+    transition: color 0.3s;
+
+    @include when(loading) {
+      color: $color-text-muted;
+    }
+  }
+
+  // Sizes
+  @include m(small) {
+    --sw-height: 20px;
+    --sw-width: 32px;
+
+    @include e(label) {
+      font-size: $font-size-small;
+    }
+  }
+
+  @include m(medium) {
+    --sw-height: 24px;
+    --sw-width: 40px;
+  }
+
+  @include m(large) {
+    --sw-height: 28px;
+    --sw-width: 48px;
+
+    @include e(label) {
+      font-size: $font-size-large;
+    }
+  }
+
+  // States
+  @include when(active) {
+    .lm-switch__track {
+      background-color: var(--sw-color);
+    }
+
+    .lm-switch__thumb {
+      transform: translateX(calc(var(--sw-width) - var(--sw-height)));
+    }
+  }
+
+  @include when(disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    .lm-switch__track {
+      background-color: $bg-disabled;
+    }
+
+    .lm-switch__thumb {
+      box-shadow: none;
+    }
+  }
+
+  @include when(loading) {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  // Hover effect
+  &:not(.is-disabled):not(.is-loading):hover {
+    .lm-switch__thumb {
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
+    }
+  }
+
+  // Focus visible
+  &:focus-visible {
+    .lm-switch__track {
+      outline: 2px solid var(--sw-color);
+      outline-offset: 2px;
+    }
+  }
+
+  // Dark mode support
+  .dark & {
+    .lm-switch__track {
+      background-color: rgba(255, 255, 255, 0.12);
+    }
+
+    .lm-switch__thumb {
+      background-color: #1f2937;
+    }
+
+    &.is-disabled {
+      .lm-switch__track {
+        background-color: rgba(255, 255, 255, 0.06);
+      }
+    }
+  }
+}

package/dist/components/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/components/Switch/types.js

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