ui-svelte 0.2.3 → 0.2.5

package/dist/control/css/toggle-group.css

@@ -0,0 +1,85 @@
+@layer components {
+    .toggle-group {
+        @apply flex w-fit rounded-ui bg-muted p-1;
+    }
+
+    .toggle-group.is-vertical {
+        @apply flex-col;
+    }
+
+    .toggle-group-item {
+        @apply relative flex items-center justify-center flex-nowrap;
+        @apply font-medium whitespace-nowrap;
+        @apply rounded-ui outline-none;
+        @apply cursor-pointer select-none;
+        @apply transition-all duration-200;
+        @apply disabled:cursor-not-allowed disabled:opacity-50;
+    }
+
+    .toggle-group-item.is-xs {
+        @apply h-6 gap-2 px-2 text-xs;
+
+        .icon {
+            @apply h-4 w-auto;
+        }
+    }
+
+    .toggle-group-item.is-sm {
+        @apply h-8 gap-2 px-2 text-xs;
+
+        .icon {
+            @apply h-4 w-auto;
+        }
+    }
+
+    .toggle-group-item.is-md {
+        @apply h-10 gap-3 px-3 text-sm;
+
+        .icon {
+            @apply h-5 w-auto;
+        }
+    }
+
+    .toggle-group-item.is-lg {
+        @apply h-12 gap-3 px-4 text-lg;
+
+        .icon {
+            @apply h-6 w-auto;
+        }
+    }
+
+    .toggle-group-item.is-active {
+        @apply bg-background text-on-background shadow-sm;
+    }
+
+    .toggle-group-item:not(.is-active) {
+        @apply text-on-muted hover:text-on-background;
+    }
+
+    .toggle-group.is-wide {
+        @apply w-full;
+    }
+
+    .toggle-group.is-wide .toggle-group-item {
+        @apply flex-1;
+    }
+
+    /* Primary variant */
+    .toggle-group.is-primary .toggle-group-item.is-active {
+        @apply bg-primary text-on-primary;
+    }
+
+    /* Secondary variant */
+    .toggle-group.is-secondary .toggle-group-item.is-active {
+        @apply bg-secondary text-on-secondary;
+    }
+
+    /* Outlined variant */
+    .toggle-group.is-outlined {
+        @apply bg-transparent inset-ring inset-ring-muted;
+    }
+
+    .toggle-group.is-outlined .toggle-group-item.is-active {
+        @apply bg-muted text-on-muted;
+    }
+}

package/dist/css/base.css

@@ -30,11 +30,13 @@
 	@supports not selector(::-webkit-scrollbar) {
 		* {
 			scrollbar-width: thin;
-			scrollbar-color: color-mix(in oklch, currentColor 80%, transparent) color-mix(in oklch, currentColor 20%, transparent);
+			scrollbar-color: color-mix(in oklch, currentColor 80%, transparent)
+				color-mix(in oklch, currentColor 20%, transparent);
 		}
 
 		body {
-			scrollbar-color: color-mix(in oklch, currentColor 80%, transparent) color-mix(in oklch, currentColor 20%, transparent);
+			scrollbar-color: color-mix(in oklch, currentColor 80%, transparent)
+				color-mix(in oklch, currentColor 20%, transparent);
 		}
 	}
 
@@ -127,6 +129,12 @@
 		@apply pl-4 md:pl-5 lg:pl-6;
 	}
 
+	p code {
+		@apply relative rounded bg-muted text-on-muted font-mono font-semibold;
+		@apply px-[0.3rem] py-[0.2rem];
+		@apply text-[0.75rem] md:text-[0.875rem] lg:text-base;
+	}
+
 	.prose {
 		/* Base font size and line height - responsive */
 		@apply text-sm md:text-base lg:text-lg;
@@ -181,9 +189,9 @@
 		}
 
 		/* Reset margins after headings */
-		h2+*,
-		h3+*,
-		h4+* {
+		h2 + *,
+		h3 + *,
+		h4 + * {
 			@apply mt-0;
 		}
 
@@ -220,18 +228,18 @@
 			@apply pl-1.5 md:pl-1.5 lg:pl-1.5;
 		}
 
-		>ul>li p,
-		>ol>li p {
+		> ul > li p,
+		> ol > li p {
 			@apply mt-2 md:mt-3 lg:mt-3 mb-2 md:mb-3 lg:mb-3;
 		}
 
-		>ul>li>p:first-child,
-		>ol>li>p:first-child {
+		> ul > li > p:first-child,
+		> ol > li > p:first-child {
 			@apply mt-4 md:mt-5 lg:mt-5;
 		}
 
-		>ul>li>p:last-child,
-		>ol>li>p:last-child {
+		> ul > li > p:last-child,
+		> ol > li > p:last-child {
 			@apply mb-4 md:mb-5 lg:mb-5;
 		}
 
@@ -304,7 +312,7 @@
 			@apply my-10 md:my-12 lg:my-12;
 		}
 
-		hr+* {
+		hr + * {
 			@apply mt-0;
 		}
 
@@ -316,7 +324,7 @@
 			@apply rounded-ui;
 		}
 
-		picture>img {
+		picture > img {
 			@apply mt-0 mb-0;
 		}
 
@@ -325,7 +333,7 @@
 			@apply mt-6 md:mt-8 lg:mt-8 mb-6 md:mb-8 lg:mb-8;
 		}
 
-		figure>* {
+		figure > * {
 			@apply mt-0 mb-0;
 		}
 
@@ -406,4 +414,4 @@
 	.boxed {
 		@apply container mx-auto;
 	}
-}
+}

package/dist/css/utilities.css

@@ -60,10 +60,55 @@
 	@apply grid grid-cols-12;
 }
 
+@utility span-2 {
+	@apply col-span-2;
+}
+
+@utility span-3 {
+	@apply col-span-3;
+}
+
+@utility span-4 {
+	@apply col-span-4;
+}
+
+@utility span-5 {
+	@apply col-span-5;
+}
+
+@utility span-6 {
+	@apply col-span-6;
+}
+
+@utility span-7 {
+	@apply col-span-7;
+}
+
+@utility span-8 {
+	@apply col-span-8;
+}
+
+@utility span-9 {
+	@apply col-span-9;
+}
+
+@utility span-10 {
+	@apply col-span-10;
+}
+
+@utility span-11 {
+	@apply col-span-11;
+}
+
+@utility span-12 {
+	@apply col-span-12;
+}
+
 /* Grid auto-fit (responsive) */
 @utility grid-auto-fit {
 	@apply grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))];
 }
+
 @utility grid-auto-fill {
 	@apply grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))];
 }

package/dist/display/AvatarGroup.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import Avatar from './Avatar.svelte';
+
+	type AvatarItem = {
+		src?: string;
+		name?: string;
+		alt?: string;
+	};
+
+	type Props = {
+		items: AvatarItem[];
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'warning'
+			| 'danger'
+			| 'info'
+			| 'transparent';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		max?: number;
+		stacked?: boolean;
+		isBordered?: boolean;
+		class?: string;
+	};
+
+	const {
+		items,
+		variant = 'primary',
+		size = 'lg',
+		max,
+		stacked = true,
+		isBordered = false,
+		class: className
+	}: Props = $props();
+
+	const visibleItems = $derived(max && max < items.length ? items.slice(0, max) : items);
+	const remainingCount = $derived(max && max < items.length ? items.length - max : 0);
+</script>
+
+<div class={cn('avatar-group', stacked && 'is-stacked', className)}>
+	{#each visibleItems as item, i}
+		<Avatar
+			src={item.src}
+			name={item.name}
+			alt={item.alt || `Avatar ${i + 1}`}
+			{variant}
+			{size}
+			{isBordered}
+		/>
+	{/each}
+	{#if remainingCount > 0}
+		<div class={cn('avatar-group-counter', `is-${size}`)}>
+			+{remainingCount}
+		</div>
+	{/if}
+</div>

package/dist/display/AvatarGroup.svelte.d.ts

@@ -0,0 +1,17 @@
+type AvatarItem = {
+    src?: string;
+    name?: string;
+    alt?: string;
+};
+type Props = {
+    items: AvatarItem[];
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'warning' | 'danger' | 'info' | 'transparent';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    max?: number;
+    stacked?: boolean;
+    isBordered?: boolean;
+    class?: string;
+};
+declare const AvatarGroup: import("svelte").Component<Props, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/display/Code.svelte

@@ -4,6 +4,7 @@
 	import { IconButton } from '../index.js';
 	import { Checkmark24RegularIcon, Copy24RegularIcon } from '../icons/index.js';
 	import { theme } from '../stores/theme.svelte.js';
+	import { cn } from '../utils/class-names.js';
 
 	type Props = {
 		code: string;
@@ -12,6 +13,7 @@
 		darkTheme?: string;
 		disableCopy?: boolean;
 		hideLang?: boolean;
+		class?: string;
 	};
 
 	let {
@@ -20,7 +22,8 @@
 		lightTheme = 'catppuccin-latte',
 		darkTheme = 'catppuccin-frappe',
 		disableCopy,
-		hideLang
+		hideLang,
+		class: className
 	}: Props = $props();
 
 	let html: string = $state('');
@@ -48,7 +51,11 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="code" onmouseenter={() => (hover = true)} onmouseleave={() => (hover = false)}>
+<div
+	class={cn('code', className)}
+	onmouseenter={() => (hover = true)}
+	onmouseleave={() => (hover = false)}
+>
 	{#if open}
 		{#if !hover && !hideLang}
 			<div class="code-info">

package/dist/display/Code.svelte.d.ts

@@ -5,6 +5,7 @@ type Props = {
     darkTheme?: string;
     disableCopy?: boolean;
     hideLang?: boolean;
+    class?: string;
 };
 declare const Code: import("svelte").Component<Props, {}, "">;
 type Code = ReturnType<typeof Code>;

package/dist/display/Section.svelte

@@ -24,7 +24,7 @@
 		hasOverlay?: boolean;
 	};
 
-	const {
+	let {
 		rootClass,
 		bodyClass,
 		coverClass,

package/dist/display/css/avatar-group.css

@@ -0,0 +1,46 @@
+@layer components {
+    .avatar-group {
+        @apply inline-flex items-center gap-2;
+    }
+
+    .avatar-group.is-stacked {
+        @apply gap-0;
+
+        &>.avatar {
+            @apply -ml-2 first:ml-0;
+            @apply outline-2 outline-background rounded-ui;
+            @apply transition-transform hover:z-10 hover:scale-110;
+        }
+
+        &>.avatar-group-counter {
+            @apply -ml-2;
+        }
+    }
+
+    .avatar-group-counter {
+        @apply flex items-center justify-center;
+        @apply bg-muted text-on-muted;
+        @apply rounded-ui font-medium;
+        @apply outline-2 outline-background;
+    }
+
+    .avatar-group-counter.is-xs {
+        @apply size-5 text-[10px];
+    }
+
+    .avatar-group-counter.is-sm {
+        @apply size-6 text-xs;
+    }
+
+    .avatar-group-counter.is-md {
+        @apply size-7 text-sm;
+    }
+
+    .avatar-group-counter.is-lg {
+        @apply size-10 text-base;
+    }
+
+    .avatar-group-counter.is-xl {
+        @apply size-14 text-lg;
+    }
+}

package/dist/display/css/avatar.css

@@ -146,13 +146,4 @@
 			@apply size-3;
 		}
 	}
-
-	.avatar-group {
-		@apply inline-flex;
-		& > .avatar {
-			@apply -ml-2 first:ml-0;
-			@apply outline-2 outline-muted;
-			@apply transition-transform hover:z-10 hover:scale-110;
-		}
-	}
-}
+}

package/dist/display/css/card.css

@@ -72,16 +72,6 @@
 		@apply bg-surface text-on-surface;
 	}
 
-	.card.is-surface.has-divider {
-		.card-header {
-			@apply border-on-surface;
-		}
-
-		.card-footer {
-			@apply border-on-surface;
-		}
-	}
-
 	.card.is-ghost {
 		@apply bg-transparent;
 	}

package/dist/form/ComboBox.svelte.d.ts

@@ -24,6 +24,6 @@ type Props = {
     isDisabled?: boolean;
     arrowIcon?: IconData;
 };
-declare const ComboBox: import("svelte").Component<Props, {}, "value" | "selected">;
+declare const ComboBox: import("svelte").Component<Props, {}, "selected" | "value">;
 type ComboBox = ReturnType<typeof ComboBox>;
 export default ComboBox;

package/dist/form/PhoneField.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Avatar, Icon, Item } from '../index.js';
+	import { Avatar, Icon, Item, type IconData } from '../index.js';
 	import { cn } from '../utils/class-names.js';
 	import { onMount, tick } from 'svelte';
-	import { normalizedCountries, type Country } from './js/countries.js';
-	import type { IconName } from '../types.js';
 	import { ChevronDown24RegularIcon, DotsMoveIcon, Search24RegularIcon } from '../icons/index.js';
+	import { countryFlagsIcons } from '../assets/country-flags.js';
+	import { normalizedCountries, type Country } from '../assets/countries.js';
 
 	type Props = {
 		value?: string;
@@ -395,7 +395,10 @@
 			aria-label="Select country"
 		>
 			{#if selectedCountry}
-				<Avatar name={selectedCountry.name} {size} variant="transparent" />
+				<Icon
+					icon={countryFlagsIcons[`country-flags:${countryCode}`] as IconData}
+					class="h-5 w-5"
+				/>
 				<span class="phone-dial-code">+{dialCode}</span>
 			{:else}
 				<Avatar name="Select country" {size} variant="transparent" />
@@ -444,6 +447,7 @@
 					<li>
 						<Item
 							label={item.name}
+							icon={countryFlagsIcons[`country-flags:${item.id}`] as IconData}
 							description="+{item.dialCode}"
 							id={item.id}
 							onclick={() => handleSelect(item)}

package/dist/form/Select.svelte.d.ts

@@ -21,6 +21,6 @@ type Props = {
     isFloatLabel?: boolean;
     isSolid?: boolean;
 };
-declare const Select: import("svelte").Component<Props, {}, "value" | "selected">;
+declare const Select: import("svelte").Component<Props, {}, "selected" | "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/index.css

@@ -8,6 +8,7 @@
 @import './control/css/btn.css';
 @import './control/css/media.css';
 @import './control/css/video.css';
+@import './control/css/toggle-group.css';
 
 @import './charts/css/arc-chart.css';
 @import './charts/css/area-chart.css';
@@ -19,6 +20,7 @@
 @import './display/css/accordion.css';
 @import './display/css/alert.css';
 @import './display/css/avatar.css';
+@import './display/css/avatar-group.css';
 @import './display/css/badge.css';
 @import './display/css/carousel.css';
 @import './display/css/card.css';
@@ -69,48 +71,68 @@
 @import './overlay/css/tooltip.css';
 
 @theme {
-	--color-primary: var(--primary, oklch(54.6% 0.245 262.881)); /* blue-600 */
-	--color-on-primary: var(--on-primary, oklch(93.2% 0.032 255.585)); /* blue-100 */
+	--color-primary: var(--primary, oklch(54.6% 0.245 262.881));
+	/* blue-600 */
+	--color-on-primary: var(--on-primary, oklch(93.2% 0.032 255.585));
+	/* blue-100 */
 
-	--color-secondary: var(--secondary, oklch(0.592 0.249 0.584)); /* pink-600  */
-	--color-on-secondary: var(--on-secondary, oklch(0.948 0.028 342.258)); /* pink-100 */
+	--color-secondary: var(--secondary, oklch(0.592 0.249 0.584));
+	/* pink-600  */
+	--color-on-secondary: var(--on-secondary, oklch(0.948 0.028 342.258));
+	/* pink-100 */
 
-	--color-muted: var(--muted, oklch(87.2% 0.01 258.338)); /* gray-300  */
-	--color-on-muted: var(--on-muted, oklch(27.8% 0.033 256.848)); /* gray-700  */
+	--color-muted: var(--muted, oklch(87.2% 0.01 258.338));
+	/* gray-300  */
+	--color-on-muted: var(--on-muted, oklch(27.8% 0.033 256.848));
+	/* gray-700  */
 
 	/* dark */
 	/*--color-muted: var(--muted, oklch(37.3% 0.034 259.733)); /* gray-700  */
 	/*--color-on-muted: var(--on-muted, oklch(87.2% 0.01 258.338)); /* gray-300  */
 
-	--color-background: var(--background, oklch(98.5% 0.002 247.839)); /* gray-50  */
-	--color-on-background: var(--on-background, oklch(21% 0.034 264.665)); /* gray-900  */
+	--color-background: var(--background, oklch(98.5% 0.002 247.839));
+	/* gray-50  */
+	--color-on-background: var(--on-background, oklch(21% 0.034 264.665));
+	/* gray-900  */
 
 	/* dark */
 	/*--color-background: var(--background, oklch(13% 0.028 261.692)); /* gray-950  */
 	/*--color-on-background: var(--on-background, oklch(96.7% 0.003 264.542)); /* gray-100  */
 
-	--color-surface: var(--surface, oklch(96.7% 0.003 264.542)); /* gray-100  */
-	--color-on-surface: var(--on-surface, oklch(27.9% 0.041 260.031)); /* gray-800  */
+	--color-surface: var(--surface, oklch(96.7% 0.003 264.542));
+	/* gray-100  */
+	--color-on-surface: var(--on-surface, oklch(27.9% 0.041 260.031));
+	/* gray-800  */
 
 	/* dark */
 	/*--color-surface: var(--surface, oklch(21% 0.034 264.665)); /* gray-900  */
 	/*--color-on-surface: var(--on-surface, oklch(92.8% 0.006 264.531)); /* gray-200  */
 
-	--color-overlay: var(--overlay, oklch(0 0 0 / 60%)); /* black/60  */
-	--color-on-overlay: var(--on-overlay, oklch(1 0 0)); /* white  */
+	--color-overlay: var(--overlay, oklch(0 0 0 / 60%));
+	/* black/60  */
+	--color-on-overlay: var(--on-overlay, oklch(1 0 0));
+	/* white  */
 
-	--color-success: var(--success, oklch(62.7% 0.194 149.214)); /* green-600  */
-	--color-on-success: var(--on-success, oklch(96.2% 0.044 156.743)); /* green-100  */
+	--color-success: var(--success, oklch(62.7% 0.194 149.214));
+	/* green-600  */
+	--color-on-success: var(--on-success, oklch(96.2% 0.044 156.743));
+	/* green-100  */
 
-	--color-info: var(--info, oklch(58.8% 0.158 241.966)); /* sky-600  */
-	--color-on-info: var(--on-info, oklch(95.1% 0.026 236.824)); /* sky-100  */
+	--color-info: var(--info, oklch(58.8% 0.158 241.966));
+	/* sky-600  */
+	--color-on-info: var(--on-info, oklch(95.1% 0.026 236.824));
+	/* sky-100  */
 
-	--color-warning: var(--warning, oklch(68.1% 0.162 75.834)); /* yellow-600  */
-	--color-on-warning: var(--on-warning, oklch(97.3% 0.071 103.193)); /* yellow-100  */
+	--color-warning: var(--warning, oklch(68.1% 0.162 75.834));
+	/* yellow-600  */
+	--color-on-warning: var(--on-warning, oklch(97.3% 0.071 103.193));
+	/* yellow-100  */
 
-	--color-danger: var(--danger, oklch(57.7% 0.245 27.325)); /* red-600  */
-	--color-on-danger: var(--on-danger, oklch(93.6% 0.032 17.717)); /* red-100  */
+	--color-danger: var(--danger, oklch(57.7% 0.245 27.325));
+	/* red-600  */
+	--color-on-danger: var(--on-danger, oklch(93.6% 0.032 17.717));
+	/* red-100  */
 
 	--radius-ui: 0.75rem;
 	--scrollbar-size: 6px;
-}
+}

package/dist/index.d.ts

@@ -9,10 +9,12 @@ import Button from './control/Button.svelte';
 import IconButton from './control/IconButton.svelte';
 import Record from './control/Record.svelte';
 import ToggleTheme from './control/ToggleTheme.svelte';
+import ToggleGroup from './control/ToggleGroup.svelte';
 import Video from './control/Video.svelte';
 import Accordion from './display/Accordion.svelte';
 import Alert from './display/Alert.svelte';
 import Avatar from './display/Avatar.svelte';
+import AvatarGroup from './display/AvatarGroup.svelte';
 import Badge from './display/Badge.svelte';
 import Carousel from './display/Carousel.svelte';
 import Card from './display/Card.svelte';
@@ -74,5 +76,5 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
-export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
 export type { IconData, SideNavItem, SideNavSubItem };

package/dist/index.js

@@ -9,10 +9,12 @@ import Button from './control/Button.svelte';
 import IconButton from './control/IconButton.svelte';
 import Record from './control/Record.svelte';
 import ToggleTheme from './control/ToggleTheme.svelte';
+import ToggleGroup from './control/ToggleGroup.svelte';
 import Video from './control/Video.svelte';
 import Accordion from './display/Accordion.svelte';
 import Alert from './display/Alert.svelte';
 import Avatar from './display/Avatar.svelte';
+import AvatarGroup from './display/AvatarGroup.svelte';
 import Badge from './display/Badge.svelte';
 import Carousel from './display/Carousel.svelte';
 import Card from './display/Card.svelte';
@@ -74,4 +76,4 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
-export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };