ui-svelte 0.1.0

package/dist/display/Accordion.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { ChevronDown24RegularIcon } from '../icons/index.js';
+	import { Icon } from '../index.js';
+
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+	import { slide } from 'svelte/transition';
+
+	type AccordionItem = {
+		id: string;
+		label: string;
+		content: Snippet | string;
+		disabled?: boolean;
+		defaultOpen?: boolean;
+	};
+
+	type Props = {
+		items: AccordionItem[];
+		variant?: 'primary' | 'secondary' | 'muted' | 'outline';
+		multiple?: boolean;
+		class?: string;
+		itemClass?: string;
+		headerClass?: string;
+		contentClass?: string;
+	};
+
+	const {
+		items = [],
+		variant = 'muted',
+		multiple = false,
+		class: className,
+		itemClass,
+		headerClass,
+		contentClass
+	}: Props = $props();
+
+	let openItems = $state<Record<string, boolean>>(
+		items.reduce(
+			(acc, item) => {
+				if (item.defaultOpen) {
+					acc[item.id] = true;
+				}
+				return acc;
+			},
+			{} as Record<string, boolean>
+		)
+	);
+
+	const variants = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		outline: 'is-outline'
+	};
+
+	function toggleItem(itemId: string, disabled?: boolean) {
+		if (disabled) return;
+
+		if (multiple) {
+			openItems[itemId] = !openItems[itemId];
+		} else {
+			const isCurrentlyOpen = openItems[itemId];
+			openItems = { [itemId]: !isCurrentlyOpen };
+		}
+	}
+</script>
+
+<div class={cn('accordion', variants[variant], className)}>
+	{#each items as item}
+		<div class={cn('accordion-item', itemClass, item.disabled && 'is-disabled')}>
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class={cn('accordion-header', headerClass, openItems[item.id] && 'is-open')}
+				onclick={() => toggleItem(item.id, item.disabled)}
+			>
+				<div class="accordion-start">
+					<span class="accordion-label">{item.label}</span>
+				</div>
+				<div class="accordion-end">
+					<Icon
+						icon={ChevronDown24RegularIcon}
+						class={cn('accordion-arrow', openItems[item.id] && 'is-active')}
+					/>
+				</div>
+			</div>
+			{#if openItems[item.id]}
+				<div transition:slide class={cn('accordion-content', contentClass)}>
+					{#if typeof item.content === 'string'}
+						{item.content}
+					{:else}
+						{@render item.content()}
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+type AccordionItem = {
+    id: string;
+    label: string;
+    content: Snippet | string;
+    disabled?: boolean;
+    defaultOpen?: boolean;
+};
+type Props = {
+    items: AccordionItem[];
+    variant?: 'primary' | 'secondary' | 'muted' | 'outline';
+    multiple?: boolean;
+    class?: string;
+    itemClass?: string;
+    headerClass?: string;
+    contentClass?: string;
+};
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/display/Alert.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import {
+		CheckmarkCircle24RegularIcon,
+		DismissCircle24RegularIcon,
+		Info24RegularIcon,
+		Warning24RegularIcon
+	} from '../icons/index.js';
+	import { Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+	import type { IconData } from './Icon.svelte';
+
+	type AlertStatus = 'info' | 'success' | 'warning' | 'danger';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		children?: Snippet;
+		showIcon?: boolean;
+		icon?: IconData;
+		status?: AlertStatus;
+		isSolid?: boolean;
+	};
+
+	let { title, description, children, showIcon, icon, status = 'info', isSolid }: Props = $props();
+
+	const STATUS_COLORS: Record<AlertStatus, string> = {
+		info: 'is-info',
+		success: 'is-success',
+		warning: 'is-warning',
+		danger: 'is-danger'
+	};
+
+	const DEFAULT_ICONS: Record<AlertStatus, IconData> = {
+		info: Info24RegularIcon,
+		success: CheckmarkCircle24RegularIcon,
+		warning: Warning24RegularIcon,
+		danger: DismissCircle24RegularIcon
+	};
+
+	const currentIcon = $derived(icon ?? DEFAULT_ICONS[status]);
+	const hasContent = $derived(description || children);
+</script>
+
+<div class={cn('alert', STATUS_COLORS[status], isSolid && 'is-solid')}>
+	{#if showIcon}
+		<div class="alert-start">
+			<Icon icon={currentIcon} class="alert-icon" />
+		</div>
+	{/if}
+
+	<div class="alert-content">
+		{#if title}
+			<div class="alert-title">{title}</div>
+		{/if}
+		{#if hasContent}
+			<div class="alert-description">
+				{description ?? ''}
+				{@render children?.()}
+			</div>
+		{/if}
+	</div>
+
+	<div class="alert-end"></div>
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { IconData } from './Icon.svelte';
+type AlertStatus = 'info' | 'success' | 'warning' | 'danger';
+type Props = {
+    title?: string;
+    description?: string;
+    children?: Snippet;
+    showIcon?: boolean;
+    icon?: IconData;
+    status?: AlertStatus;
+    isSolid?: boolean;
+};
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/display/Avatar.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+
+	type Props = {
+		src?: string;
+		name?: string;
+		alt?: string;
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'warning'
+			| 'danger'
+			| 'info'
+			| 'transparent';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		status?: 'online' | 'offline' | 'busy' | 'away';
+		isBordered?: boolean;
+		class?: string;
+	};
+
+	const {
+		src,
+		name,
+		alt = 'Avatar',
+		size = 'lg',
+		variant = 'primary',
+		status,
+		isBordered,
+		class: className
+	}: Props = $props();
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		warning: 'is-warning',
+		danger: 'is-danger',
+		info: 'is-info',
+		transparent: 'is-transparent'
+	};
+
+	const sizeClasses = {
+		xs: 'is-xs',
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg',
+		xl: 'is-xl'
+	};
+
+	const statusClasses = {
+		online: 'is-online',
+		offline: 'is-offline',
+		busy: 'is-busy',
+		away: 'is-away'
+	};
+</script>
+
+<div
+	class={cn(
+		'avatar',
+		sizeClasses[size],
+		variantClasses[variant],
+		isBordered && 'is-bordered',
+		className
+	)}
+>
+	{#if status}
+		<div class="avatar-status">
+			<div class={cn('avatar-indicator', statusClasses[status])}></div>
+		</div>
+	{/if}
+	{#if src}
+		<img {src} {alt} class="avatar-image" />
+	{:else}
+		<span class="avatar-name">{name?.charAt(0).toUpperCase() || alt.charAt(0).toUpperCase()}</span>
+	{/if}
+</div>

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

@@ -0,0 +1,13 @@
+type Props = {
+    src?: string;
+    name?: string;
+    alt?: string;
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'warning' | 'danger' | 'info' | 'transparent';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    isBordered?: boolean;
+    class?: string;
+};
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/display/Badge.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		text: string;
+		children: Snippet;
+		variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		class?: string;
+	};
+
+	let {
+		text,
+		children,
+		variant = 'primary',
+		position = 'top-right',
+		class: className
+	}: Props = $props();
+
+	const positions = {
+		'top-left': 'is-top-left',
+		'top-right': 'is-top-right',
+		'bottom-left': 'is-bottom-left',
+		'bottom-right': 'is-bottom-right'
+	};
+
+	const variants = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger'
+	};
+</script>
+
+<div class={cn('badge', positions[position], variants[variant], className)}>
+	{@render children()}
+	<div class="badge-content">
+		<span class="badge-text">
+			{text}
+		</span>
+	</div>
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    text: string;
+    children: Snippet;
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    class?: string;
+};
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/display/Card.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+		header?: Snippet;
+		footer?: Snippet;
+		class?: string;
+		cover?: string;
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'outlined'
+			| 'ghost';
+		headerClass?: string;
+		footerClass?: string;
+		bodyClass?: string;
+		coverClass?: string;
+		overlayClass?: string;
+		isSolid?: boolean;
+		hasOverlay?: boolean;
+		hasDivider?: boolean;
+		hasShadow?: boolean;
+	};
+
+	const {
+		children,
+		header,
+		footer,
+		class: className,
+		cover,
+		variant = 'outlined',
+		headerClass,
+		bodyClass,
+		footerClass,
+		coverClass,
+		overlayClass,
+		isSolid,
+		hasOverlay,
+		hasDivider,
+		hasShadow
+	}: Props = $props();
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		warning: 'is-warning',
+		danger: 'is-danger',
+		surface: 'is-surface',
+		outlined: 'is-outlined',
+		ghost: 'is-ghost'
+	};
+</script>
+
+<div
+	class={cn(
+		'card',
+		variantClasses[variant],
+		hasDivider && 'has-divider',
+		hasShadow && 'has-shadow',
+		isSolid && 'is-solid',
+		className
+	)}
+>
+	{#if cover}
+		<img src={cover} alt="cover" class={cn('card-cover', coverClass)} />
+	{/if}
+	{#if hasOverlay}
+		<div class={cn('card-overlay', overlayClass)}></div>
+	{/if}
+	{#if header}
+		<div class={cn('card-header', headerClass)}>
+			{@render header()}
+		</div>
+	{/if}
+	<div class={cn('card-body', bodyClass)}>
+		{@render children()}
+	</div>
+	{#if footer}
+		<div class={cn('card-footer', footerClass)}>
+			{@render footer()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    class?: string;
+    cover?: string;
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'outlined' | 'ghost';
+    headerClass?: string;
+    footerClass?: string;
+    bodyClass?: string;
+    coverClass?: string;
+    overlayClass?: string;
+    isSolid?: boolean;
+    hasOverlay?: boolean;
+    hasDivider?: boolean;
+    hasShadow?: boolean;
+};
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;