uisv 0.0.20 → 0.0.22

package/dist/components/select.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { PropColor, PropVariant } from '../index.js';
 import { Select } from 'bits-ui';
 import type { Component, Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type SelectItem<T> = T | {
     icon?: string | Component;
-    label: string | Component;
+    iconposition?: 'leading' | 'trailing';
+    label: string | Component | Snippet;
     value: T;
 };
 export type SelectProps<T> = {
@@ -19,34 +20,26 @@ export type SelectProps<T> = {
     highlight?: boolean;
     placeholder?: string;
     ui?: {
-        base?: ClassNameValue;
-        leading?: ClassNameValue;
-        leadingIcon?: ClassNameValue;
-        leadingAvatar?: ClassNameValue;
-        leadingAvatarSize?: ClassNameValue;
-        trailing?: ClassNameValue;
-        trailingIcon?: ClassNameValue;
-        value?: ClassNameValue;
-        placeholder?: ClassNameValue;
-        arrow?: ClassNameValue;
-        content?: ClassNameValue;
-        viewport?: ClassNameValue;
-        group?: ClassNameValue;
-        empty?: ClassNameValue;
-        label?: ClassNameValue;
-        separator?: ClassNameValue;
-        item?: ClassNameValue;
-        itemLeadingIcon?: ClassNameValue;
-        itemLeadingAvatar?: ClassNameValue;
-        itemLeadingAvatarSize?: ClassNameValue;
-        itemLeadingChip?: ClassNameValue;
-        itemLeadingChipSize?: ClassNameValue;
-        itemTrailing?: ClassNameValue;
-        itemTrailingIcon?: ClassNameValue;
-        itemWrapper?: ClassNameValue;
-        itemLabel?: ClassNameValue;
-        itemDescription?: ClassNameValue;
+        base?: ClassValue;
+        leading?: ClassValue;
+        icon?: ClassValue;
+        leadingAvatar?: ClassValue;
+        leadingAvatarSize?: ClassValue;
+        trailing?: ClassValue;
+        value?: ClassValue;
+        placeholder?: ClassValue;
+        arrow?: ClassValue;
+        content?: ClassValue;
+        viewport?: ClassValue;
+        group?: ClassValue;
+        empty?: ClassValue;
+        label?: ClassValue;
+        separator?: ClassValue;
+        item?: ClassValue;
+        itemicon?: ClassValue;
+        dropdownicon?: ClassValue;
     };
+    dropdownicon?: string | Component;
 } & ({
     value?: T;
     type?: 'single';

package/dist/components/seperator.svelte

@@ -1,12 +1,11 @@
 <script module lang="ts">
 	import { Icon, type PropColor, isComponent, isSnippet } from '../index.js';
 	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 	import type { Component } from 'svelte';
 
 	export type SeperatorProps = {
-		label?: string | Snippet<[ClassNameValue]> | Component;
+		label?: string | Snippet<[ClassValue]> | Component;
 		icon?: string | Component;
 		color?: PropColor;
 		type?: 'dashed' | 'solid' | 'dotted';
@@ -14,10 +13,10 @@
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		orientation?: 'horizontal' | 'vertical';
 		ui?: {
-			root?: ClassNameValue;
-			border?: ClassNameValue;
-			icon?: ClassNameValue;
-			label?: ClassNameValue;
+			root?: ClassValue;
+			border?: ClassValue;
+			icon?: ClassValue;
+			label?: ClassValue;
 		};
 	};
 </script>

package/dist/components/seperator.svelte.d.ts

@@ -1,9 +1,9 @@
 import { type PropColor } from '../index.js';
 import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 import type { Component } from 'svelte';
 export type SeperatorProps = {
-    label?: string | Snippet<[ClassNameValue]> | Component;
+    label?: string | Snippet<[ClassValue]> | Component;
     icon?: string | Component;
     color?: PropColor;
     type?: 'dashed' | 'solid' | 'dotted';
@@ -11,10 +11,10 @@ export type SeperatorProps = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     orientation?: 'horizontal' | 'vertical';
     ui?: {
-        root?: ClassNameValue;
-        border?: ClassNameValue;
-        icon?: ClassNameValue;
-        label?: ClassNameValue;
+        root?: ClassValue;
+        border?: ClassValue;
+        icon?: ClassValue;
+        label?: ClassValue;
     };
 };
 declare const Seperator: Component<SeperatorProps, {}, "">;

package/dist/components/slider.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import { Slider } from 'bits-ui';
 	import type { PropColor } from '../index.js';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 
 	export type SliderProps<T> = {
 		value?: T;
@@ -16,9 +15,9 @@
 		min?: number;
 		max?: number;
 		ui?: {
-			root?: ClassNameValue;
-			range?: ClassNameValue;
-			thumb?: ClassNameValue;
+			root?: ClassValue;
+			range?: ClassValue;
+			thumb?: ClassValue;
 		};
 	};
 </script>
@@ -54,15 +53,15 @@
 		},
 	});
 	const thumbs = $derived(slider_value.get()?.length ?? 1);
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				root: [
-					'relative w-full flex rounded-full bg-neutral-300',
+					'relative w-full flex rounded-full bg-label-dimmed',
 					orientation === 'horizontal' ? 'items-center' : 'justify-center mx-1',
 				],
 				range: [
-					'rounded-full bg-neutral-200 p-0.5 relative transition',
+					'rounded-full bg-surface-accented p-0.5 relative transition',
 					orientation === 'horizontal' ? 'h-full' : 'w-full',
 				],
 				thumb: 'bg-white rounded-full border-2 outline-none transition',
@@ -76,8 +75,8 @@
 						thumb: 'border-primary-500',
 					},
 					surface: {
-						range: ['bg-neutral-900'],
-						thumb: 'border-neutral-900',
+						range: ['bg-surface-inverted'],
+						thumb: 'border-surface-inverted',
 					},
 					info: {
 						range: ['bg-info-500'],
@@ -149,18 +148,18 @@
 	{step}
 	{orientation}
 	{disabled}
-	class={classes.root({ class: [disabled ? 'opacity-75 cursor-not-allowed' : '', ui.root] })}
+	class={variants.root({ class: [disabled ? 'opacity-75 cursor-not-allowed' : '', ui.root] })}
 >
-	<Slider.Range class={classes.range({ class: [ui.range] })} />
+	<Slider.Range class={variants.range({ class: [ui.range] })} />
 
 	{#each { length: thumbs }, index (index)}
-		<Slider.Thumb {index} class={classes.thumb({ class: ['group', ui.thumb] })}>
+		<Slider.Thumb {index} class={variants.thumb({ class: ['group', ui.thumb] })}>
 			{#if thumblabel}
 				<Slider.ThumbLabel
 					{index}
 					position="bottom"
 					class={[
-						'opacity-0 transition pointer-events-none text-sm shadow-md px-2 h-6 flex items-center rounded-md mt-1 border border-surface-200',
+						'opacity-0 transition pointer-events-none text-sm shadow-md px-2 h-6 flex items-center rounded-md mt-1 border border-surface-accented',
 						'data-[active=""]:opacity-100 group-hover:opacity-100',
 					]}
 				>

package/dist/components/slider.svelte.d.ts

@@ -1,6 +1,6 @@
 import { Slider } from 'bits-ui';
 import type { PropColor } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type SliderProps<T> = {
     value?: T;
     default?: number | number[];
@@ -13,9 +13,9 @@ export type SliderProps<T> = {
     min?: number;
     max?: number;
     ui?: {
-        root?: ClassNameValue;
-        range?: ClassNameValue;
-        thumb?: ClassNameValue;
+        root?: ClassValue;
+        range?: ClassValue;
+        thumb?: ClassValue;
     };
 };
 declare function $$render<T extends number | number[]>(): {

package/dist/components/switch.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import { type PropColor, Icon } from '../index.js';
 	import type { Snippet, Component } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 
 	export type SwitchProps = {
 		value?: boolean;
@@ -17,11 +16,11 @@
 		description?: string | Snippet;
 		required?: boolean;
 		ui?: {
-			root?: ClassNameValue;
-			container?: ClassNameValue;
-			thumb?: ClassNameValue;
-			label?: ClassNameValue;
-			description?: ClassNameValue;
+			root?: ClassValue;
+			container?: ClassValue;
+			thumb?: ClassValue;
+			label?: ClassValue;
+			description?: ClassValue;
 		};
 	};
 </script>
@@ -42,18 +41,18 @@
 		ui = {},
 	}: SwitchProps = $props();
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				root: 'flex-inline gap-2',
-				container: 'rounded-full bg-neutral-200 p-0.5 relative transition',
+				container: 'rounded-full bg-surface-accented p-0.5 relative transition',
 				thumb: [
 					'bg-white block rounded-full absolute top-0.5 transition grid place-items-center',
-					value ? 'translate-x-full' : 'text-neutral-500',
+					value ? 'translate-x-full' : 'text-label-muted',
 				],
 				icon: 'pi',
 				label: 'text-sm',
-				description: 'text-sm text-neutral-500',
+				description: 'text-sm text-label-muted',
 			},
 			variants: {
 				color: {
@@ -61,7 +60,7 @@
 						container: ['', value && 'bg-primary-500 text-primary-500'],
 					},
 					surface: {
-						container: ['', value && 'bg-neutral-900 text-neutral-900'],
+						container: ['', value && 'bg-surface-inverted text-surface-inverted'],
 					},
 					info: {
 						container: ['', value && 'bg-info-500 text-info-500'],
@@ -111,23 +110,23 @@
 
 <div
 	data-state={value ? 'checked' : 'unchecked'}
-	class={classes.root({
+	class={variants.root({
 		class: [(loading || disabled) && 'opacity-50', ui.thumb],
 	})}
 >
 	<button
 		aria-label="switch"
 		data-state={value ? 'checked' : 'unchecked'}
-		class={classes.container({ class: [loading && 'cursor-not-allowed', ui.thumb] })}
+		class={variants.container({ class: [loading && 'cursor-not-allowed', ui.thumb] })}
 		onclick={() => {
 			if (loading || disabled) return;
 			value = !value;
 		}}
 	>
-		<span data-state={value ? 'checked' : 'unchecked'} class={classes.thumb({ class: ui.thumb })}>
+		<span data-state={value ? 'checked' : 'unchecked'} class={variants.thumb({ class: ui.thumb })}>
 			<Icon
 				name={loading ? loadingicon : value ? checkedicon : uncheckedicon}
-				class={classes.icon({ class: [loading && 'animate-spin'] })}
+				class={variants.icon({ class: [loading && 'animate-spin'] })}
 			/>
 		</span>
 	</button>
@@ -135,7 +134,7 @@
 	{#if label}
 		<span>
 			<div
-				class={classes.label({
+				class={variants.label({
 					class: [required ? 'after:content-["*"] after:text-error-500' : '', ui.thumb],
 				})}
 			>
@@ -147,7 +146,7 @@
 			</div>
 
 			{#if description}
-				<div class={classes.description({ class: ui.thumb })}>
+				<div class={variants.description({ class: ui.thumb })}>
 					{#if typeof description === 'string'}
 						{description}
 					{:else}
@@ -158,7 +157,3 @@
 		</span>
 	{/if}
 </div>
-
-{#snippet icon(ico?: SwitchProps['checkedicon'], icon_class?: ClassNameValue)}
-	<div class={['absolute', icon_class]}></div>
-{/snippet}

package/dist/components/switch.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type PropColor } from '../index.js';
 import type { Snippet, Component } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type SwitchProps = {
     value?: boolean;
     color?: PropColor;
@@ -14,11 +14,11 @@ export type SwitchProps = {
     description?: string | Snippet;
     required?: boolean;
     ui?: {
-        root?: ClassNameValue;
-        container?: ClassNameValue;
-        thumb?: ClassNameValue;
-        label?: ClassNameValue;
-        description?: ClassNameValue;
+        root?: ClassValue;
+        container?: ClassValue;
+        thumb?: ClassValue;
+        label?: ClassValue;
+        description?: ClassValue;
     };
 };
 declare const Switch: Component<SwitchProps, {}, "value">;

package/dist/components/tabs.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import { Tabs } from 'bits-ui';
 	import { isComponent, isSnippet, useElementRects, type PropColor } from '../index.js';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 	import { type Component, type Snippet } from 'svelte';
 	import { ElementRect } from 'runed';
 
@@ -24,12 +23,12 @@
 		disabled?: boolean;
 		orientation?: 'vertical' | 'horizontal';
 		ui?: {
-			root?: ClassNameValue;
-			item?: ClassNameValue;
-			list?: ClassNameValue;
-			content?: ClassNameValue;
-			icon?: ClassNameValue;
-			indicator?: ClassNameValue;
+			root?: ClassValue;
+			item?: ClassValue;
+			list?: ClassValue;
+			content?: ClassValue;
+			icon?: ClassValue;
+			indicator?: ClassValue;
 		};
 		[k: `content_${string}`]: Snippet<[{ item: TabItem; value: number }]>;
 	};
@@ -65,12 +64,12 @@
 		return result;
 	});
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				root: '',
 				list: 'flex relative p-1',
-				item: 'flex items-center justify-center text-muted data-[state="inactive"]:hover:text-highlighted font-medium z-1 transition-all',
+				item: 'flex items-center justify-center text-label-muted data-[state="inactive"]:hover:text-label-highlighted font-medium z-1 transition-all',
 				icon: '',
 				content: 'mt-2',
 				indicator: 'absolute z-0 transition-all duration-200 rounded-md w---width',
@@ -79,7 +78,7 @@
 				variant: {
 					pill: {
 						list: 'bg-surface-elevated rounded-lg',
-						item: 'flex-1 data-[state="active"]:text-inverted',
+						item: 'flex-1 data-[state="active"]:text-label-inverted',
 						trigger: 'flex-1',
 						indicator: 'rounded-md shadow-xs',
 					},
@@ -96,8 +95,8 @@
 						indicator: 'bg-primary-500',
 					},
 					surface: {
-						item: 'data-[variant="link"]:data-[state="active"]:text-surface-500',
-						indicator: 'bg-surface-900',
+						item: 'data-[variant="link"]:data-[state="active"]:text-label-muted',
+						indicator: 'bg-surface-inverted',
 					},
 					info: {
 						item: 'data-[variant="link"]:data-[state="active"]:text-info-500',
@@ -183,10 +182,10 @@
 <Tabs.Root
 	{disabled}
 	bind:value={() => value.toString(), (v) => (value = parseInt(v))}
-	class={classes.root({ class: ui.root })}
+	class={variants.root({ class: ui.root })}
 	{orientation}
 >
-	<Tabs.List bind:ref={container_el} class={classes.list({ class: ui.list })}>
+	<Tabs.List bind:ref={container_el} class={variants.list({ class: ui.list })}>
 		{#each items as item, idx (idx)}
 			{@const label = typeof item === 'string' ? item : item.label}
 
@@ -201,7 +200,7 @@
 					}
 				}
 				value={idx.toString()}
-				class={classes.item({ class: ui.item })}
+				class={variants.item({ class: ui.item })}
 				data-variant={variant}
 			>
 				{@render RenderIcon(typeof item === 'string' ? undefined : item.icon)}
@@ -211,7 +210,7 @@
 		{/each}
 
 		<span
-			class={classes.indicator({ class: ui.indicator })}
+			class={variants.indicator({ class: ui.indicator })}
 			style:--width="{rect.w}px"
 			style:--left="{rect.l}px"
 			style:--height="{rect.w}px"
@@ -221,7 +220,7 @@
 	{#each items as item, idx (idx)}
 		{#if typeof item === 'object' && item.content}
 			{@const Content = item.content}
-			<Tabs.Content value={idx.toString()} class={classes.content({ class: ui.content })}>
+			<Tabs.Content value={idx.toString()} class={variants.content({ class: ui.content })}>
 				{#if `content_${idx}` in rest}
 					{@render rest[`content_${idx}`]({ item, value: idx })}
 				{:else if typeof Content === 'string'}
@@ -238,8 +237,8 @@
 	{#if isSnippet(IconProp)}
 		{@render IconProp()}
 	{:else if isComponent(IconProp)}
-		<IconProp class={classes.icon({ class: ui.icon })} />
+		<IconProp class={variants.icon({ class: ui.icon })} />
 	{:else if typeof IconProp === 'string'}
-		<div class={classes.icon({ class: [IconProp, ui.icon] })}></div>
+		<div class={variants.icon({ class: [IconProp, ui.icon] })}></div>
 	{/if}
 {/snippet}

package/dist/components/tabs.svelte.d.ts

@@ -1,6 +1,6 @@
 import { Tabs } from 'bits-ui';
 import { type PropColor } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 import { type Component, type Snippet } from 'svelte';
 export type TabItem = string | {
     label: string;
@@ -17,12 +17,12 @@ export type TabsProps = {
     disabled?: boolean;
     orientation?: 'vertical' | 'horizontal';
     ui?: {
-        root?: ClassNameValue;
-        item?: ClassNameValue;
-        list?: ClassNameValue;
-        content?: ClassNameValue;
-        icon?: ClassNameValue;
-        indicator?: ClassNameValue;
+        root?: ClassValue;
+        item?: ClassValue;
+        list?: ClassValue;
+        content?: ClassValue;
+        icon?: ClassValue;
+        indicator?: ClassValue;
     };
     [k: `content_${string}`]: Snippet<[{
         item: TabItem;

package/dist/components/tooltip.svelte

@@ -0,0 +1,94 @@
+<script module lang="ts">
+	import type { TooltipContentProps, TooltipArrowProps, PortalProps } from 'bits-ui';
+	import { Tooltip } from 'bits-ui';
+	import { type KbdProps, type ButtonProps, isSnippet, Button, Kbd } from '../index.js';
+	import type { Snippet } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { tv, type ClassValue } from 'tailwind-variants';
+
+	export type TooltipProps = {
+		children?: Snippet;
+		open?: boolean;
+		kbds?: KbdProps['value'][] | KbdProps[];
+		trigger?: ButtonProps | Snippet<[Record<string, unknown>]>;
+		disabled?: boolean;
+		portal?: PortalProps;
+		content?: TooltipContentProps;
+		ui?: {
+			content?: ClassValue;
+			wrapper?: ClassValue;
+			kbds?: ClassValue;
+			arrow?: ClassValue;
+		};
+		arrow?: boolean | TooltipArrowProps;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		children,
+		open = $bindable(false),
+		kbds,
+		trigger,
+		disabled,
+		portal,
+		content,
+		ui = {},
+		arrow,
+		...rest
+	}: TooltipProps = $props();
+
+	const variants = $derived(
+		tv({
+			slots: {
+				content: '',
+				wrapper: '',
+				kbds: '',
+				kbdsize: '',
+				arrow: '',
+			},
+		})(),
+	);
+</script>
+
+<Tooltip.Root bind:open disabled={!(children || kbds?.length) || disabled}>
+	{#if !!trigger}
+		<Tooltip.Trigger {...rest}>
+			{#snippet child({ props })}
+				{#if isSnippet(trigger)}
+					{@render trigger(props)}
+				{:else}
+					<Button {...props} {...trigger} />
+				{/if}
+			{/snippet}
+		</Tooltip.Trigger>
+	{/if}
+
+	<Tooltip.Portal {...portal}>
+		<Tooltip.Content {...content} forceMount>
+			{#snippet child({ props, wrapperProps })}
+				<div {...wrapperProps} class={variants.wrapper({ class: [ui.wrapper] })}>
+					<div {...props} class={variants.content({ class: [ui.content] })} transition:fly>
+						{@render children?.()}
+
+						{#if kbds?.length}
+							<span class={variants.kbds({ class: ui.kbds })}>
+								{#each kbds as kbd, idx (idx)}
+									<Kbd {...typeof kbd === 'string' ? { value: kbd } : kbd} />
+								{/each}
+							</span>
+						{/if}
+					</div>
+				</div>
+			{/snippet}
+			children
+
+			{#if arrow}
+				<Tooltip.Arrow
+					{...typeof arrow === 'boolean' ? {} : arrow}
+					class={variants.arrow({ class: ui.arrow })}
+				/>
+			{/if}
+		</Tooltip.Content>
+	</Tooltip.Portal>
+</Tooltip.Root>

package/dist/components/tooltip.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { TooltipContentProps, TooltipArrowProps, PortalProps } from 'bits-ui';
+import { Tooltip } from 'bits-ui';
+import { type KbdProps, type ButtonProps } from '../index.js';
+import type { Snippet } from 'svelte';
+import { type ClassValue } from 'tailwind-variants';
+export type TooltipProps = {
+    children?: Snippet;
+    open?: boolean;
+    kbds?: KbdProps['value'][] | KbdProps[];
+    trigger?: ButtonProps | Snippet<[Record<string, unknown>]>;
+    disabled?: boolean;
+    portal?: PortalProps;
+    content?: TooltipContentProps;
+    ui?: {
+        content?: ClassValue;
+        wrapper?: ClassValue;
+        kbds?: ClassValue;
+        arrow?: ClassValue;
+    };
+    arrow?: boolean | TooltipArrowProps;
+};
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/contexts.d.ts

@@ -0,0 +1,47 @@
+import { Context } from 'runed';
+export declare const app_icons: Context<Record<"arrowdown" | "arrowleft" | "arrowright" | "arrowup" | "caution" | "check" | "chevrondoubleleft" | "chevrondoubleright" | "chevrondown" | "chevronleft" | "chevronright" | "chevronup" | "close" | "copy" | "copycheck" | "dark" | "drag" | "ellipsis" | "error" | "external" | "eye" | "eyeoff" | "file" | "folder" | "folderopen" | "hash" | "info" | "light" | "loading" | "menu" | "minus" | "panelclose" | "panelopen" | "plus" | "reload" | "search" | "stop" | "success" | "system" | "tip" | "upload" | "warning", string>>;
+export type AppIcons = keyof typeof DEFAULT_ICONS;
+export declare const DEFAULT_ICONS: {
+    arrowdown: string;
+    arrowleft: string;
+    arrowright: string;
+    arrowup: string;
+    caution: string;
+    check: string;
+    chevrondoubleleft: string;
+    chevrondoubleright: string;
+    chevrondown: string;
+    chevronleft: string;
+    chevronright: string;
+    chevronup: string;
+    close: string;
+    copy: string;
+    copycheck: string;
+    dark: string;
+    drag: string;
+    ellipsis: string;
+    error: string;
+    external: string;
+    eye: string;
+    eyeoff: string;
+    file: string;
+    folder: string;
+    folderopen: string;
+    hash: string;
+    info: string;
+    light: string;
+    loading: string;
+    menu: string;
+    minus: string;
+    panelclose: string;
+    panelopen: string;
+    plus: string;
+    reload: string;
+    search: string;
+    stop: string;
+    success: string;
+    system: string;
+    tip: string;
+    upload: string;
+    warning: string;
+};