[stdf]Add typescript

packages/stdf/components/actionSheet/ActionSheet.svelte

@@ -1,15 +1,14 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
-	import zh_CN from '../../lang/zh_CN';
+	import type { ActionSheetProps } from '../../types';
+	import { zh_CN, type LangProps } from '../../lang';
 
 	// 当前语言
 	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const actionSheetLang = currentLang.actionSheet;
+	const currentLang: LangProps = getContext('STDF_lang') || zh_CN;
+	const actionSheetLang: LangProps['actionSheet'] = currentLang.actionSheet;
 
-	/** @typedef {import('../../index.d').ActionSheet} ActionSheetProps */
-	/** @type {ActionSheetProps} */
 	let {
 		visible = $bindable(false),
 		title = '',
@@ -23,7 +22,7 @@
 		oncancel,
 		onclickAction,
 		onclose,
-	} = $props();
+	}: ActionSheetProps = $props();
 
 	// 静态样式类定义移到组件外部
 	// static style class definition moved to component outside

packages/stdf/components/asyncPicker/AsyncPicker.svelte

@@ -1,18 +1,17 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import Popup from '../popup/Popup.svelte';
 	import Loading from '../loading/Loading.svelte';
 	import ScrollRadio from '../scrollRadio/ScrollRadio.svelte';
-	import zh_CN from '../../lang/zh_CN';
+	import type { AsyncPickerProps } from '../../types';
+	import { zh_CN, type LangProps } from '../../lang';
 
 	// 当前语言
 	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const asyncPickerLang = currentLang.asyncPicker;
+	const currentLang: LangProps = getContext('STDF_lang') || zh_CN;
+	const asyncPickerLang: LangProps['asyncPicker'] = currentLang.asyncPicker;
 
-	/** @typedef {import('../../index.d').AsyncPicker} AsyncPickerProps */
-	/** @type {AsyncPickerProps} */
 	let {
 		visible = $bindable(false),
 		data = $bindable([]),
@@ -35,7 +34,7 @@
 		onconfirm,
 		onnext,
 		onclose,
-	} = $props();
+	}: AsyncPickerProps = $props();
 
 	// 用于存储当前选定的所有项和索引
 	// Used to store all selected items and indexes

packages/stdf/components/avatar/Avatar.svelte

@@ -1,8 +1,7 @@
-<script>
+<script lang="ts">
 	import Icon from '../icon/Icon.svelte';
+	import type { AvatarProps } from '../../types';
 
-	/** @typedef {import('../../index.d').Avatar} AvatarProps */
-	/** @type {AvatarProps} */
 	let {
 		image = '',
 		alt = '',
@@ -14,7 +13,7 @@
 		line = 'none',
 		injClass = '',
 		onclick,
-	} = $props();
+	}: AvatarProps = $props();
 
 	// 圆角风格样式
 	// radius style

packages/stdf/components/avatar/Avatars.svelte

@@ -1,9 +1,8 @@
-<script>
+<script lang="ts">
 	import Avatar from './Avatar.svelte';
 	import Icon from '../icon/Icon.svelte';
+	import type { AvatarsProps } from '../../types';
 
-	/** @typedef {import('../../index.d').Avatars} AvatarsProps */
-	/** @type {AvatarsProps} */
 	let {
 		data = [],
 		radius = 'full',
@@ -15,7 +14,7 @@
 		top = 'totle',
 		injClass = '',
 		onclick,
-	} = $props();
+	}: AvatarsProps = $props();
 
 	// 圆角风格样式
 	// radius style

packages/stdf/components/badge/Badge.svelte

@@ -1,6 +1,5 @@
-<script>
-	/** @typedef {import('../../index.d').Badge} BadgeProps */
-	/** @type {BadgeProps} */
+<script lang="ts">
+	import type { BadgeProps } from '../../types';
 	let {
 		text = '',
 		radius = 'full',
@@ -11,7 +10,7 @@
 		isInner = false,
 		injClass = '',
 		children,
-	} = $props();
+	}: BadgeProps = $props();
 
 	// 圆角风格样式
 	// radius style

packages/stdf/components/bottomSheet/BottomSheet.svelte

@@ -1,19 +1,17 @@
-<script>
+<script lang="ts">
 	import { onMount, getContext } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { throttleWithRAF } from '../utils';
-	import zh_CN from '../../lang/zh_CN';
-
 	import Mask from '../mask/Mask.svelte';
 	import Icon from '../icon/Icon.svelte';
+	import { zh_CN, type LangProps } from '../../lang';
+	import type { BottomSheetProps } from '../../types';
 
 	// 当前语言
 	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const bottomSheetLang = currentLang.bottomSheet;
+	const currentLang: LangProps = getContext('STDF_lang') || zh_CN;
+	const bottomSheetLang: LangProps['bottomSheet'] = currentLang.bottomSheet;
 
-	/** @typedef {import('../../index.d').BottomSheet} BottomSheetProps */
-	/** @type {BottomSheetProps} */
 	let {
 		visible = $bindable(false),
 		title = bottomSheetLang.title,
@@ -35,7 +33,7 @@
 		onclickMask,
 		onclose,
 		onback,
-	} = $props();
+	}: BottomSheetProps = $props();
 
 	// 固定高度
 	// stay height

packages/stdf/components/button/Button.svelte

@@ -1,9 +1,8 @@
-<script>
+<script lang="ts">
 	import Icon from '../icon/Icon.svelte';
 	import Loading from '../loading/Loading.svelte';
+	import type { ButtonProps } from '../../types';
 
-	/** @typedef {import('../../index.d').Button} ButtonProps */
-	/** @type {ButtonProps} */
 	let {
 		fill = 'base',
 		state = 'theme',
@@ -24,7 +23,7 @@
 		disabledLoading = true,
 		children,
 		onclick,
-	} = $props();
+	}: ButtonProps = $props();
 
 	let innerDisabled = $derived(disabled || (loading && disabledLoading));
 

packages/stdf/components/calendar/Calendar.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
 	import Button from '../button/Button.svelte';
@@ -12,15 +12,14 @@
 		getCurrentQuarter,
 		getDaysRangeWithToday,
 	} from '../utils';
-	import zh_CN from '../../lang/zh_CN';
+	import { zh_CN, type LangProps } from '../../lang';
+	import type { CalendarProps } from '../../types';
 
 	// 当前语言
 	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const calendarLang = currentLang.calendar;
+	const currentLang: LangProps = getContext('STDF_lang') || zh_CN;
+	const calendarLang: LangProps['calendar'] = currentLang.calendar;
 
-	/** @typedef {import('../../index.d').Calendar} CalendarProps */
-	/** @type {CalendarProps} */
 	let {
 		visible = $bindable(false),
 		startMonth = getNowBeforeOrAfterMonth(-6),
@@ -50,7 +49,7 @@
 		clear = true,
 		onconfirm,
 		onclose,
-	} = $props();
+	}: CalendarProps = $props();
 
 	// 圆角风格样式
 	// Rounded style style

packages/stdf/components/cell/Cell.svelte

@@ -1,9 +1,8 @@
-<script>
+<script lang="ts">
 	import Icon from '../icon/Icon.svelte';
 	import Switch from '../switch/Switch.svelte';
+	import type { CellProps } from '../../types';
 
-	/** @typedef {import('../../index.d').Cell} CellProps */
-	/** @type {CellProps} */
 	let {
 		title = '',
 		detail = '',
@@ -24,7 +23,7 @@
 		rightChild,
 		detailChild,
 		onclick,
-	} = $props();
+	}: CellProps = $props();
 
 	// 圆角风格样式
 	// Rounded style style

packages/stdf/components/cell/CellGroup.svelte

@@ -1,7 +1,7 @@
-<script>
-	/** @typedef {import('../../index.d').CellGroup} CellGroupProps */
-	/** @type {CellGroupProps} */
-	let { radius = 'lg', shadow = 'sm', my = '4', mx = '2', children } = $props();
+<script lang="ts">
+	import type { CellGroupProps } from '../../types';
+
+	let { radius = 'lg', shadow = 'sm', my = '4', mx = '2', children }: CellGroupProps = $props();
 
 	const shadowClass = {
 		none: ' shadow-none',

packages/stdf/components/checkbox/Checkbox.svelte

@@ -1,8 +1,7 @@
-<script>
+<script lang="ts">
 	import CheckboxItem from './CheckboxItem.svelte';
+	import type { CheckboxProps } from '../../types';
 
-	/** @typedef {import('../../index.js').Checkbox} CheckboxProps */
-	/** @type {CheckboxProps} */
 	let {
 		data = [],
 		layout = 'v',
@@ -12,7 +11,7 @@
 		iconChecked = 'default',
 		checkboxChild,
 		onchange,
-	} = $props();
+	}: CheckboxProps = $props();
 
 	const clickItemFn = name => {
 		checkeds = checkeds.includes(name) ? checkeds.filter(v => v !== name) : [name, ...checkeds];

packages/stdf/components/checkbox/CheckboxItem.svelte

@@ -1,8 +1,7 @@
-<script>
+<script lang="ts">
 	import Icon from '../icon/Icon.svelte';
+	import type { CheckboxItemProps } from '../../types';
 
-	/** @typedef {import('../..').CheckboxItem} CheckboxItemProps */
-	/** @type {CheckboxItemProps} */
 	let {
 		name = '',
 		layout = 'v',
@@ -12,7 +11,7 @@
 		iconChecked = 'default',
 		children,
 		onclick,
-	} = $props();
+	}: CheckboxItemProps = $props();
 
 	// 点击选项事件
 	// Click option event

packages/stdf/components/dialog/Dialog.svelte

@@ -1,17 +1,16 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
 	import Button from '../button/Button.svelte';
 	import Icon from '../icon/Icon.svelte';
-	import zh_CN from '../../lang/zh_CN';
+	import { zh_CN, type LangProps } from '../../lang';
+	import type { DialogProps } from '../../types';
 
 	// 当前语言
 	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const dialogLang = currentLang.dialog;
+	const currentLang: LangProps = getContext('STDF_lang') || zh_CN;
+	const dialogLang: LangProps['dialog'] = currentLang.dialog;
 
-	/** @typedef {import('../../index.d').Dialog} DialogProps */
-	/** @type {DialogProps} */
 	let {
 		visible = $bindable(false),
 		title = dialogLang.title,
@@ -34,7 +33,7 @@
 		onclose,
 		contentChild,
 		primaryChild,
-	} = $props();
+	}: DialogProps = $props();
 
 	// 标题对齐方式
 	// Title alignment

packages/stdf/components/divider/Divider.svelte

@@ -1,7 +1,17 @@
-<script>
-	/** @typedef {import('../../index.d').Divider} DividerProps */
-	/** @type {DividerProps} */
-	let { layout = 'h', px = '0', py = '4', text = '', align = 'center', line = 'solid', mx = '1', weight = '1', injClass = '' } = $props();
+<script lang="ts">
+	import type { DividerProps } from '../../types';
+
+	let {
+		layout = 'h',
+		px = '0',
+		py = '4',
+		text = '',
+		align = 'center',
+		line = 'solid',
+		mx = '1',
+		weight = '1',
+		injClass = '',
+	}: DividerProps = $props();
 
 	// 水平间距样式
 	// Horizontal spacing style

packages/stdf/components/grids/Grid.svelte

@@ -1,7 +1,7 @@
-<script>
-	/** @typedef {import('../../index.d').Grid} GridProps */
-	/** @type {GridProps} */
-	let { col = '1', row = '1', children } = $props();
+<script lang="ts">
+	import type { GridProps } from '../../types';
+
+	let { col = '1', row = '1', children }: GridProps = $props();
 
 	// 根据行数生成样式
 	// Generate styles based on the number of rows

packages/stdf/components/grids/Grids.svelte

@@ -1,7 +1,7 @@
-<script>
-	/** @typedef {import('../../index.d').Grids} GridsProps */
-	/** @type {GridsProps} */
-	let { cols = '6', gap = '2', mx = '2', my = '2', children } = $props();
+<script lang="ts">
+	import type { GridsProps } from '../../types';
+
+	let { cols = '6', gap = '2', mx = '2', my = '2', children }: GridsProps = $props();
 
 	//根据列数生成样式
 	// Generate styles based on the number of columns

packages/stdf/components/icon/Icon.svelte

@@ -1,8 +1,7 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
+	import type { IconProps } from '../../types';
 
-	/** @typedef {import('../../index.d').Icon} IconProps */
-	/** @type {IconProps} */
 	let {
 		name = '',
 		size = 24,
@@ -12,7 +11,7 @@
 		top = 0,
 		injClass = '',
 		children,
-	} = $props();
+	}: IconProps = $props();
 </script>
 
 <i class="relative{theme ? ' text-primary dark:text-dark' : ''} {injClass}" style="top:{top}px;">

packages/stdf/components/indexBar/IndexBar.svelte

@@ -1,10 +1,9 @@
-<script>
+<script lang="ts">
 	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { throttleWithRAF } from '../utils';
+	import type { IndexBarProps } from '../../types';
 
-	/** @typedef {import('../../index.d').IndexBar} IndexBarProps */
-	/** @type {IndexBarProps} */
 	let {
 		data = [],
 		current = $bindable(0),
@@ -15,7 +14,7 @@
 		titleInjClass = '',
 		textInjClass = '',
 		onclickChild,
-	} = $props();
+	}: IndexBarProps = $props();
 
 	// 用于绑定bar的高度
 	// Used to bind the height of the bar

packages/stdf/components/input/Input.svelte

@@ -1,15 +1,14 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
-	import zh_CN from '../../lang/zh_CN';
+	import { zh_CN, type LangProps } from '../../lang';
+	import type { InputProps } from '../../types';
 
 	// 当前语言
 	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const inputLang = currentLang.input;
+	const currentLang: LangProps = getContext('STDF_lang') || zh_CN;
+	const inputLang: LangProps['input'] = currentLang.input;
 
-	/** @typedef {import('../../index.d').Input} InputProps */
-	/** @type {InputProps} */
 	let {
 		title = '',
 		titlePosition = 'out',
@@ -63,7 +62,7 @@
 		label5Child,
 		label6Child,
 		tipChild,
-	} = $props();
+	}: InputProps = $props();
 
 	// 是否获取焦点
 	// Whether to get focus
@@ -300,7 +299,7 @@
 								oninput={valueChangeFun}
 								oncompositionend={compositionendFun}
 								oncompositionstart={compositionstartFun}
-								{autocomplete}
+								autocomplete={autocomplete === true ? 'on' : 'off'}
 								{disabled}
 								bind:this={textareaDom}
 								onkeydown={keydownFunc}
@@ -319,7 +318,7 @@
 								oninput={valueChangeFun}
 								oncompositionend={compositionendFun}
 								oncompositionstart={compositionstartFun}
-								{autocomplete}
+								autocomplete={autocomplete === true ? 'on' : 'off'}
 								{disabled}
 								onkeydown={keydownFunc}
 							/>

packages/stdf/components/loading/Loading.svelte

@@ -1,5 +1,6 @@
-<script>
+<script lang="ts">
 	import { onMount } from 'svelte';
+	import type { LoadingProps } from '../../types';
 	import {
 		Loading1_0,
 		Loading1_1,
@@ -59,8 +60,6 @@
 	import { Loading2_0, Loading2_1, Loading2_2, Loading2_3, Loading2_4, Loading2_5 } from './loadings/twoColor';
 	import { Loading4_0, Loading4_1, Loading4_2, Loading4_3 } from './loadings/fourColor';
 
-	/** @typedef {import('../../index.d').Loading} LoadingProps */
-	/** @type {LoadingProps} */
 	let {
 		type = '1_0',
 		height = '8',
@@ -70,7 +69,7 @@
 		customColor = [],
 		lazyAnimation = true,
 		speed = $bindable(1),
-	} = $props();
+	}: LoadingProps = $props();
 
 	// loading 元素
 	// loading element

packages/stdf/components/loading/loadings/fourColor/4_0.svelte

@@ -1,13 +1,7 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
+<script lang="ts">
+	type Props = { size?: string; customColor?: string[]; speed?: number };
 
-	/** @type {Props} */
-	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 </script>
 
 <div

packages/stdf/components/loading/loadings/fourColor/4_1.svelte

@@ -1,13 +1,7 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
+<script lang="ts">
+	type Props = { size?: string; customColor?: string[]; speed?: number };
 
-	/** @type {Props} */
-	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 </script>
 
 <div class="{size} m-auto relative rotate-45">

packages/stdf/components/loading/loadings/fourColor/4_2.svelte

@@ -1,13 +1,7 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
+<script lang="ts">
+	type Props = { size?: string; customColor?: string[]; speed?: number };
 
-	/** @type {Props} */
-	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 </script>
 
 <div class="{size} m-auto relative loading" style="animation-duration: {1.6 / speed}s;-webkit-animation-duration: {1.6 / speed}s;">

packages/stdf/components/loading/loadings/fourColor/4_3.svelte

@@ -1,13 +1,7 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
+<script lang="ts">
+	type Props = { size?: string; customColor?: string[]; speed?: number };
 
-	/** @type {Props} */
-	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 </script>
 
 <div class="{size} m-auto relative loading" style="animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;">

packages/stdf/components/loading/loadings/oneColor/1_0.svelte

@@ -1,15 +1,7 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: string[]; speed?: number };
 
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_1.svelte

@@ -1,15 +1,7 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: string[]; speed?: number };
 
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_10.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_11.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_12.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_13.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_14.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const borderClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_15.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_16.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_17.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_18.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 */
-
-	/** @type {Props} */
-	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), theme = false, inverse = false } = $props();
+<script lang="ts">
+	type Props = { size?: string; customColor?: any[]; speed?: number; theme?: boolean; inverse?: boolean };
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), theme = false, inverse = false }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_19.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 */
-
-	/** @type {Props} */
-	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), theme = false, inverse = false } = $props();
+<script lang="ts">
+	type Props = { size?: string; customColor?: any[]; speed?: number; theme?: boolean; inverse?: boolean };
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), theme = false, inverse = false }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_2.svelte

@@ -1,15 +1,7 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: string[]; speed?: number };
 
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_20.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 */
-
-	/** @type {Props} */
-	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), theme = false, inverse = false } = $props();
+<script lang="ts">
+	type Props = { size?: string; customColor?: any[]; speed?: number; theme?: boolean; inverse?: boolean };
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), theme = false, inverse = false }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_21.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 */
-
-	/** @type {Props} */
-	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), theme = false, inverse = false } = $props();
+<script lang="ts">
+	type Props = { size?: string; customColor?: any[]; speed?: number; theme?: boolean; inverse?: boolean };
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), theme = false, inverse = false }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_22.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { size?: string; customColor?: any[]; speed?: number; theme?: boolean; inverse?: boolean };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_23.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_24.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_25.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_26.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_27.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_28.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_29.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_3.svelte

@@ -1,15 +1,7 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: string[]; speed?: number };
 
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_30.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_31.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_32.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_33.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_34.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_35.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_36.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_37.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_38.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_39.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_4.svelte

@@ -1,15 +1,7 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: string[]; speed?: number };
 
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_40.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_41.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_42.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_43.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_44.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_45.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_46.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_47.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_48.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_49.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_5.svelte

@@ -1,15 +1,7 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: string[]; speed?: number };
 
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_50.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_51.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_52.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_53.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_6.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_7.svelte

@@ -1,15 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_8.svelte

@@ -1,15 +1,7 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: string[]; speed?: number };
 
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/oneColor/1_9.svelte

@@ -1,15 +1,7 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [theme]
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
+<script lang="ts">
+	type Props = { theme?: boolean; inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
 
-	/** @type {Props} */
-	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+	let { theme = false, inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const colorClass = () => {
 		if (inverse) {

packages/stdf/components/loading/loadings/twoColor/2_0.svelte

@@ -1,14 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const outerBorderClass = () => {
 		return inverse ? ' border-white/10 dark:border-black/10' : ' border-black/10 dark:border-white/10';

packages/stdf/components/loading/loadings/twoColor/2_1.svelte

@@ -1,14 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [inverse]
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 */
-
-	/** @type {Props} */
-	let { inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) } = $props();
+<script lang="ts">
+	type Props = { inverse?: boolean; size?: string; customColor?: any[]; speed?: number };
+	let { inverse = false, size = 'w-8 h-8', customColor = [], speed = $bindable(1) }: Props = $props();
 
 	const outerBorderClass = () => {
 		return inverse ? ' border-white/10 dark:border-black/10' : ' border-black/10 dark:border-white/10';

packages/stdf/components/loading/loadings/twoColor/2_2.svelte

@@ -1,14 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 * @property {boolean} [inverse]
-	 */
-
-	/** @type {Props} */
-	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), inverse = false } = $props();
+<script lang="ts">
+	type Props = { size?: string; customColor?: any[]; speed?: number; inverse?: boolean };
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), inverse = false }: Props = $props();
 
 	const borderClass = () => {
 		return inverse

packages/stdf/components/loading/loadings/twoColor/2_3.svelte

@@ -1,14 +1,6 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 * @property {boolean} [inverse]
-	 */
-
-	/** @type {Props} */
-	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), inverse = false } = $props();
+<script lang="ts">
+	type Props = { size?: string; customColor?: any[]; speed?: number; inverse?: boolean };
+	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), inverse = false }: Props = $props();
 
 	const bgClass = () => {
 		return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';

packages/stdf/components/loading/loadings/twoColor/2_4.svelte

@@ -1,13 +1,5 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 * @property {boolean} [inverse]
-	 */
-
-	/** @type {Props} */
+<script lang="ts">
+	type Props = { size?: string; customColor?: any[]; speed?: number; inverse?: boolean };
 	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), inverse = false } = $props();
 
 	const bgClass = () => {

packages/stdf/components/loading/loadings/twoColor/2_5.svelte

@@ -1,13 +1,5 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [size]
-	 * @property {any} [customColor]
-	 * @property {number} [speed]
-	 * @property {boolean} [inverse]
-	 */
-
-	/** @type {Props} */
+<script lang="ts">
+	type Props = { size?: string; customColor?: any[]; speed?: number; inverse?: boolean };
 	let { size = 'w-8 h-8', customColor = [], speed = $bindable(1), inverse = false } = $props();
 
 	const bgClass = () => {

packages/stdf/components/mask/Mask.svelte

@@ -1,8 +1,7 @@
-<script>
+<script lang="ts">
 	import { fade } from 'svelte/transition';
+	import type { MaskProps } from '../../types';
 
-	/** @typedef {import('../../index.d').Mask} MaskProps */
-	/** @type {MaskProps} */
 	let {
 		visible = false,
 		opacity = '0.5',
@@ -14,7 +13,7 @@
 		zIndex = 500,
 		children,
 		onclickMask,
-	} = $props();
+	}: MaskProps = $props();
 
 	//遮罩模糊度样式
 	// Mask blur style

packages/stdf/components/modal/Modal.svelte

@@ -1,17 +1,16 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
 	import Button from '../button/Button.svelte';
 	import Icon from '../icon/Icon.svelte';
-	import zh_CN from '../../lang/zh_CN';
+	import { zh_CN, type LangProps } from '../../lang';
+	import type { ModalProps } from '../../types';
 
 	// 当前语言
 	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const modalLang = currentLang.modal;
+	const currentLang: LangProps = getContext('STDF_lang') || zh_CN;
+	const modalLang: LangProps['modal'] = currentLang.modal;
 
-	/** @typedef {import('../../index.d').Modal} ModalProps */
-	/** @type {ModalProps} */
 	let {
 		visible = $bindable(false),
 		title = modalLang.title,
@@ -25,7 +24,7 @@
 		button = {},
 		contentChild,
 		onclose,
-	} = $props();
+	}: ModalProps = $props();
 
 	// 标题对齐方式样式
 	// Title alignment style

packages/stdf/components/navBar/NavBar.svelte

@@ -1,15 +1,14 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
-	import zh_CN from '../../lang/zh_CN';
+	import type { NavBarProps } from '../../types';
+	import { zh_CN, type LangProps } from '../../lang';
 
 	// 当前语言
 	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const navBarLang = currentLang.navBar;
+	const currentLang: LangProps = getContext('STDF_lang') || zh_CN;
+	const navBarLang: LangProps['navBar'] = currentLang.navBar;
 
-	/** @typedef {import('../../index.d').NavBar} NavBarProps */
-	/** @type {NavBarProps} */
 	let {
 		title = navBarLang.title,
 		left = 'back',
@@ -22,7 +21,7 @@
 		titleChild,
 		leftChild,
 		rightChild,
-	} = $props();
+	}: NavBarProps = $props();
 
 	//图标大小
 	//Icon size

packages/stdf/components/noticeBar/NoticeBar.svelte

@@ -1,9 +1,8 @@
-<script>
+<script lang="ts">
 	import { onMount } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
+	import type { NoticeBarProps } from '../../types';
 
-	/** @typedef {import('../../index.d').NoticeBar} NoticeBarProps */
-	/** @type {NoticeBarProps} */
 	let {
 		textList = [],
 		leftIcon = {},
@@ -18,7 +17,7 @@
 		leftChild,
 		rightChild,
 		onclickRight,
-	} = $props();
+	}: NoticeBarProps = $props();
 
 	// 如果 textList 不是数组给出中英文报错
 	// If textList is not an array, give Chinese and English error

packages/stdf/components/numKeyboard/NumKeyboard.svelte

@@ -1,16 +1,15 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
 	import Icon from '../icon/Icon.svelte';
-	import zh_CN from '../../lang/zh_CN';
+	import { zh_CN, type LangProps } from '../../lang';
+	import type { NumKeyboardProps } from '../../types';
 
 	// 当前语言
 	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const commonLang = currentLang.common;
+	const currentLang: LangProps = getContext('STDF_lang') || zh_CN;
+	const commonLang: LangProps['common'] = currentLang.common;
 
-	/** @typedef {import('../../index.d').NumKeyboard} NumKeyboardProps */
-	/** @type {NumKeyboardProps} */
 	let {
 		type = 'button',
 		visible = $bindable(true),
@@ -31,7 +30,7 @@
 		onclick,
 		onopen,
 		onclose,
-	} = $props();
+	}: NumKeyboardProps = $props();
 
 	// 高度 class
 	// Height class

packages/stdf/components/pagination/Page.svelte

@@ -1,14 +1,8 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [active]
-	 * @property {string} [radius]
-	 * @property {string} [type]
-	 * @property {import('svelte').Snippet} [children]
-	 * @property {() => void} [onclick]
-	 */
-	/** @type {Props} */
-	let { active = false, radius = 'md', type = 'border', children, onclick } = $props();
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = { active?: boolean; radius?: string; type?: string; children?: Snippet; onclick?: (item: any) => void };
+	let { active = false, radius = 'md', type = 'border', children, onclick }: Props = $props();
 
 	const typeClass = {
 		border: 'border-primary dark:border-dark text-primary dark:text-dark',

packages/stdf/components/pagination/Pagination.svelte

@@ -1,19 +1,18 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 	import Page from './Page.svelte';
 	import SecondPageNext from './SecondPageNext.svelte';
 	import SecondPagePre from './SecondPagePre.svelte';
-	import zh_CN from '../../lang/zh_CN';
+	import { zh_CN, type LangProps } from '../../lang';
+	import type { PaginationProps } from '../../types';
 
 	// 当前语言
 	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const commonLang = currentLang.common;
-	const paginationLang = currentLang.pagination;
+	const currentLang: LangProps = getContext('STDF_lang') || zh_CN;
+	const commonLang: LangProps['common'] = currentLang.common;
+	const paginationLang: LangProps['pagination'] = currentLang.pagination;
 
-	/** @typedef {import('../../index.d').Pagination} PaginationProps */
-	/** @type {PaginationProps} */
 	let {
 		total = 0,
 		pageSize = 10,
@@ -31,7 +30,7 @@
 		onchange,
 		onnext,
 		onpre,
-	} = $props();
+	}: PaginationProps = $props();
 
 	// 总页数
 	// totalPage

packages/stdf/components/pagination/SecondPageNext.svelte

@@ -1,17 +1,8 @@
-<script>
+<script lang="ts">
 	import Page from './Page.svelte';
 
-	/**
-	 * @typedef {Object} Props
-	 * @property {number} [pageCol]
-	 * @property {any} [Pages]
-	 * @property {number} [maxShowPage]
-	 * @property {string} [radius]
-	 * @property {string} [type]
-	 * @property {(index: number) => void} [onclickItem]
-	 */
-	/** @type {Props} */
-	let { pageCol = 3, Pages = [], maxShowPage = 9, radius = 'md', type = 'bold', onclickItem } = $props();
+	type Props = { pageCol: number; Pages: any[]; maxShowPage: number; radius: string; type: string; onclickItem: (index: number) => void };
+	let { pageCol = 3, Pages = [], maxShowPage = 9, radius = 'md', type = 'bold', onclickItem }: Props = $props();
 </script>
 
 {#if Pages.length > 0}

packages/stdf/components/pagination/SecondPagePre.svelte

@@ -1,17 +1,8 @@
-<script>
+<script lang="ts">
 	import Page from './Page.svelte';
 
-	/**
-	 * @typedef {Object} Props
-	 * @property {number} [pageCol]
-	 * @property {any} [Pages]
-	 * @property {number} [maxShowPage]
-	 * @property {string} [radius]
-	 * @property {string} [type]
-	 * @property {(index: number) => void} [onclickItem]
-	 */
-	/** @type {Props} */
-	let { pageCol = 3, Pages = [], maxShowPage = 7, radius = 'md', type = 'bold', onclickItem } = $props();
+	type Props = { pageCol: number; Pages: any[]; maxShowPage: number; radius: string; type: string; onclickItem: (index: number) => void };
+	let { pageCol = 3, Pages = [], maxShowPage = 7, radius = 'md', type = 'bold', onclickItem }: Props = $props();
 </script>
 
 {#if Pages.length > 0}

packages/stdf/components/picker/Picker.svelte

@@ -1,16 +1,15 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import Popup from '../popup/Popup.svelte';
 	import ScrollRadio from '../scrollRadio/ScrollRadio.svelte';
-	import zh_CN from '../../lang/zh_CN';
+	import { zh_CN, type LangProps } from '../../lang';
+	import type { PickerProps } from '../../types';
 
 	// 当前语言
 	// current language
-	const currentLang = getContext('STDF_lang') || zh_CN;
-	const pickerLang = currentLang.picker;
+	const currentLang: LangProps = getContext('STDF_lang') || zh_CN;
+	const pickerLang: LangProps['picker'] = currentLang.picker;
 
-	/** @typedef {import('../../index.d').Picker} PickerProps */
-	/** @type {PickerProps} */
 	let {
 		visible = $bindable(false),
 		datas = [],
@@ -29,7 +28,7 @@
 		onclose,
 		onconfirm,
 		oncancel,
-	} = $props();
+	}: PickerProps = $props();
 
 	// 内部使用的 datas
 	// Datas used internally

packages/stdf/components/placeholder/Placeholder.svelte

@@ -1,7 +1,7 @@
-<script>
-	/** @typedef {import('../../index.d').Placeholder} PlaceholderProps */
-	/** @type {PlaceholderProps} */
-	let { py = '4', height = 'full', radius = 'md', shadow = 'none', injClass = '', children } = $props();
+<script lang="ts">
+	import type { PlaceholderProps } from '../../index.d';
+
+	let { py = '4', height = 'full', radius = 'md', shadow = 'none', injClass = '', children }: PlaceholderProps = $props();
 
 	// 上下内边距样式
 	// up down padding style

packages/stdf/components/popup/Popup.svelte

@@ -1,10 +1,9 @@
-<script>
+<script lang="ts">
 	import * as eases from 'svelte/easing';
 	import Mask from '../mask/Mask.svelte';
 	import Transition from './Transition.svelte';
+	import type { PopupProps } from '../../types';
 
-	/** @typedef {import('../../index.d').Popup} PopupProps */
-	/** @type {PopupProps} */
 	let {
 		visible = $bindable(false),
 		size = 40,
@@ -28,7 +27,7 @@
 		children,
 		onclose,
 		onclickMask,
-	} = $props();
+	}: PopupProps = $props();
 
 	// 通过不同位置结合圆角参数，生成不同的 class
 	// Generate different classes by combining different positions and corner parameters

packages/stdf/components/popup/Transition.svelte

@@ -1,18 +1,17 @@
-<script>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
 	import { fly, scale } from 'svelte/transition';
 
-	/**
-	 * @typedef {Object} Props
-	 * @property {boolean} [visible]
-	 * @property {number} [size]
-	 * @property {any} [transitionParams]
-	 * @property {any} [transitionOutParams]
-	 * @property {string} [position]
-	 * @property {string} [px]
-	 * @property {string} [py]
-	 * @property {import('svelte').Snippet} [children]
-	 */
-	/** @type {Props} */
+	type Props = {
+		visible?: boolean;
+		size?: number;
+		transitionParams?: any;
+		transitionOutParams?: any;
+		position?: string;
+		px?: string;
+		py?: string;
+		children?: Snippet;
+	};
 	let {
 		visible = false,
 		size = 40,
@@ -22,7 +21,7 @@
 		px = '0',
 		py = '0',
 		children,
-	} = $props();
+	}: Props = $props();
 
 	const sizeClass = { bottom: 'w-full', top: 'w-full', left: 'h-full', right: 'h-full', center: 'w-full' };
 	const sizeStyle = {

packages/stdf/components/progress/Progress.svelte

@@ -1,6 +1,6 @@
-<script>
-	/** @typedef {import('../../index.d').Progress} Progress */
-	/** @type {Progress} */
+<script lang="ts">
+	import type { ProgressProps } from '../../types';
+
 	let {
 		percent = 66,
 		percentPosition = 'right',
@@ -12,7 +12,7 @@
 		injClass = '',
 		trackInjClass = '',
 		children,
-	} = $props();
+	}: ProgressProps = $props();
 
 	// 高度样式
 	// height class

packages/stdf/components/progressLoop/ProgressLoop.svelte

@@ -1,6 +1,6 @@
-<script>
-	/** @typedef {import('../../index.d').ProgressLoop} ProgressLoop */
-	/** @type {ProgressLoop} */
+<script lang="ts">
+	import type { ProgressLoopProps } from '../../types';
+
 	let {
 		percent = 66,
 		strokeWidth = 2,
@@ -11,7 +11,7 @@
 		injClass = '',
 		trackInjClass = '',
 		children,
-	} = $props();
+	}: ProgressLoopProps = $props();
 
 	// 通过百分比计算半径
 	// calculate radius by percent

packages/stdf/components/radio/Radio.svelte

@@ -1,8 +1,7 @@
-<script>
+<script lang="ts">
 	import RadioItem from './RadioItem.svelte';
+	import type { RadioProps } from '../../types';
 
-	/** @typedef {import('../..').Radio} RadioProps */
-	/** @type {RadioProps} */
 	let {
 		data = [],
 		value = $bindable(''),
@@ -12,7 +11,7 @@
 		iconChecked = 'default',
 		radioChild,
 		onchange,
-	} = $props();
+	}: RadioProps = $props();
 
 	const clickItemFn = name => {
 		value = name;