ui-svelte 0.2.4 → 0.2.6

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

@@ -4,13 +4,6 @@
 		@apply bg-background text-on-background;
 	}
 
-	body:has(#popover) {
-		overflow: hidden !important;
-	}
-
-	body:has(#popover).had-scroll {
-		padding-right: var(--scrollbar-size, 6px) !important;
-	}
 
 	::-webkit-scrollbar {
 		width: var(--scrollbar-size, 6px);
@@ -30,15 +23,16 @@
 	@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);
 		}
 	}
 
-	/* Base headings - responsive typography without margins */
 	h1 {
 		@apply font-extrabold tracking-tight;
 		@apply text-[1.875rem] md:text-4xl lg:text-5xl;
@@ -75,7 +69,6 @@
 		@apply leading-4 md:leading-5 lg:leading-6;
 	}
 
-	/* Text formatting */
 	strong {
 		@apply font-semibold;
 	}
@@ -84,7 +77,6 @@
 		@apply italic;
 	}
 
-	/* Utility classes */
 	.snippet {
 		@apply relative rounded bg-muted text-on-muted font-mono font-semibold;
 		@apply px-[0.3rem] py-[0.2rem];
@@ -121,18 +113,21 @@
 		@apply text-lg md:text-xl lg:text-2xl;
 	}
 
-	/* Blockquote - keeping minimal spacing */
 	blockquote {
 		@apply border-l-2 border-muted italic;
 		@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;
 		@apply leading-6 md:leading-7 lg:leading-8;
 
-		/* Headings */
 		h1 {
 			@apply scroll-m-20 font-extrabold tracking-tight;
 			@apply text-[1.875rem] md:text-4xl lg:text-5xl;
@@ -180,27 +175,23 @@
 			@apply mt-3 md:mt-3 lg:mt-4 mb-1.5;
 		}
 
-		/* Reset margins after headings */
-		h2+*,
-		h3+*,
-		h4+* {
+		h2 + *,
+		h3 + *,
+		h4 + * {
 			@apply mt-0;
 		}
 
-		/* Paragraphs */
 		p {
 			@apply text-on-muted;
 			@apply mt-4 md:mt-5 lg:mt-6 mb-4 md:mb-5 lg:mb-6;
 		}
 
-		/* Lead paragraph */
 		[class~='lead'] {
 			@apply text-base md:text-lg lg:text-xl;
 			@apply leading-7 md:leading-8 lg:leading-8;
 			@apply mt-4 md:mt-6 lg:mt-6 mb-4 md:mb-6 lg:mb-6;
 		}
 
-		/* Lists */
 		ul,
 		ol {
 			@apply mt-4 md:mt-5 lg:mt-6 mb-4 md:mb-5 lg:mb-6;
@@ -220,18 +211,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;
 		}
 
@@ -256,13 +247,11 @@
 			@apply pl-5.5 md:pl-6.5 lg:pl-6.5;
 		}
 
-		/* Links */
 		a {
 			@apply font-medium text-primary underline underline-offset-4;
 			@apply hover:text-primary/80 transition-colors;
 		}
 
-		/* Inline code */
 		code {
 			@apply relative rounded bg-muted text-on-muted font-mono font-semibold;
 			@apply px-[0.3rem] py-[0.2rem];
@@ -277,7 +266,6 @@
 			@apply text-base md:text-[1.125rem] lg:text-[1.3125rem];
 		}
 
-		/* Code blocks */
 		pre {
 			@apply overflow-x-auto rounded-lg bg-muted text-on-muted;
 			@apply mt-5 md:mt-6 lg:mt-8 mb-5 md:mb-6 lg:mb-8;
@@ -291,24 +279,21 @@
 			}
 		}
 
-		/* Blockquotes */
 		blockquote {
 			@apply border-l-4 border-muted italic text-on-muted;
 			@apply mt-6 md:mt-8 lg:mt-10 mb-6 md:mb-8 lg:mb-10;
 			@apply pl-5 md:pl-5 lg:pl-6;
 		}
 
-		/* Horizontal rules */
 		hr {
 			@apply border-muted;
 			@apply my-10 md:my-12 lg:my-12;
 		}
 
-		hr+* {
+		hr + * {
 			@apply mt-0;
 		}
 
-		/* Images and media */
 		img,
 		video,
 		picture {
@@ -316,16 +301,15 @@
 			@apply rounded-ui;
 		}
 
-		picture>img {
+		picture > img {
 			@apply mt-0 mb-0;
 		}
 
-		/* Figures */
 		figure {
 			@apply mt-6 md:mt-8 lg:mt-8 mb-6 md:mb-8 lg:mb-8;
 		}
 
-		figure>* {
+		figure > * {
 			@apply mt-0 mb-0;
 		}
 
@@ -335,7 +319,6 @@
 			@apply mt-2 md:mt-3 lg:mt-3;
 		}
 
-		/* Tables */
 		table {
 			@apply w-full text-left;
 			@apply text-[0.75rem] md:text-[0.875rem] lg:text-base;
@@ -371,7 +354,6 @@
 			@apply pr-0;
 		}
 
-		/* Keyboard input */
 		kbd {
 			@apply font-mono font-semibold;
 			@apply rounded bg-muted text-on-muted;
@@ -380,7 +362,6 @@
 			@apply py-0.5 md:py-0.75 lg:py-1;
 		}
 
-		/* Text formatting */
 		strong {
 			@apply font-semibold;
 		}
@@ -389,7 +370,6 @@
 			@apply italic;
 		}
 
-		/* Reset first and last child margins */
 		> :first-child {
 			@apply mt-0;
 		}
@@ -406,4 +386,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

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { codeToHtml } from 'shiki';
 	import { useClipboard } from '../hooks/use-clipboard.svelte.js';
-	import { IconButton } from '../index.js';
+	import { Chip, 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,18 +51,22 @@
 </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}
+		{#if (!hover && !hideLang && !clipboard.copied) || (disableCopy && !hideLang)}
 			<div class="code-info">
-				<div class="code-lang">{lang}</div>
+				<Chip variant="muted">{lang}</Chip>
 			</div>
 		{/if}
-		{#if hover && !disableCopy}
+		{#if (hover && !disableCopy) || clipboard.copied || (!disableCopy && hideLang)}
 			<div class="code-info">
 				<IconButton
 					onclick={handleCopy}
-					variant="ghost"
+					variant="muted"
 					size="sm"
 					icon={clipboard.copied ? Checkmark24RegularIcon : Copy24RegularIcon}
 				/>

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/badge.css

@@ -10,38 +10,41 @@
 	.badge-text {
 		@apply text-xs leading-none;
 	}
-	.is-top-left .badge-text {
+
+	/* Position styles */
+	.is-top-left .badge-content {
 		@apply top-0 left-0 translate-x-[-50%] translate-y-[-50%];
 	}
-	.is-top-right .badge-text {
+	.is-top-right .badge-content {
 		@apply top-0 right-0 translate-x-[50%] translate-y-[-50%];
 	}
-	.is-bottom-left .badge-text {
+	.is-bottom-left .badge-content {
 		@apply bottom-0 left-0 translate-x-[-50%] translate-y-[50%];
 	}
-	.is-bottom-right .badge-text {
+	.is-bottom-right .badge-content {
 		@apply bottom-0 right-0 translate-x-[50%] translate-y-[50%];
 	}
 
-	.is-primary .badge-text {
+	/* Variant styles */
+	.is-primary .badge-content {
 		@apply bg-primary text-on-primary;
 	}
-	.is-secondary .badge-text {
+	.is-secondary .badge-content {
 		@apply bg-secondary text-on-secondary;
 	}
-	.is-muted .badge-text {
+	.is-muted .badge-content {
 		@apply bg-muted text-on-muted;
 	}
-	.is-success .badge-text {
+	.is-success .badge-content {
 		@apply bg-success text-on-success;
 	}
-	.is-warning .badge-text {
+	.is-warning .badge-content {
 		@apply bg-warning text-on-warning;
 	}
-	.is-danger .badge-text {
+	.is-danger .badge-content {
 		@apply bg-danger text-on-danger;
 	}
-	.is-info .badge-text {
+	.is-info .badge-content {
 		@apply bg-info text-on-info;
 	}
 }

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;