ui-svelte 0.1.0

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { IconData } from './Icon.svelte';
+type Props = {
+    children: Snippet;
+    onclose?: () => void;
+    type?: 'solid' | 'soft';
+    variant?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'danger' | 'warning';
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    startIcon?: IconData;
+    endIcon?: IconData;
+    hasShadow?: boolean;
+    isSolid?: boolean;
+};
+declare const Chip: import("svelte").Component<Props, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/display/Code.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { codeToHtml } from 'shiki';
+	import { useClipboard } from '../hooks/use-clipboard.svelte.js';
+	import { Button, IconButton } from '../index.js';
+	import { Checkmark24RegularIcon, Copy24RegularIcon } from '../icons/index.js';
+
+	type Props = {
+		code: string;
+		lang?: string;
+		theme?: string;
+		showCopy?: boolean;
+	};
+
+	let { code, lang = 'html', theme = 'catppuccin-frappe', showCopy }: Props = $props();
+
+	let html: string = $state('');
+	let open = $state(false);
+
+	const generateCode = async (value: string) => {
+		html = await codeToHtml(value, {
+			lang,
+			theme
+		});
+		open = true;
+	};
+
+	$effect(() => {
+		generateCode(code);
+	});
+
+	const clipboard = useClipboard();
+
+	const handleCopy = () => {
+		clipboard.copy(code);
+	};
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="code">
+	{#if open}
+		{#if showCopy}
+			<div class="code-info">
+				<IconButton
+					onclick={handleCopy}
+					variant="primary"
+					size="sm"
+					icon={clipboard.copied ? Checkmark24RegularIcon : Copy24RegularIcon}
+				/>
+			</div>
+		{/if}
+
+		<div class="code-content">
+			{@html html}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,9 @@
+type Props = {
+    code: string;
+    lang?: string;
+    theme?: string;
+    showCopy?: boolean;
+};
+declare const Code: import("svelte").Component<Props, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/display/Collapsible.svelte

@@ -0,0 +1,71 @@
+<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 Props = {
+		label: string;
+		startContent?: Snippet;
+		content: Snippet | string;
+		disabled?: boolean;
+		defaultOpen?: boolean;
+		variant?: 'primary' | 'secondary' | 'muted' | 'outline';
+		class?: string;
+		headerClass?: string;
+		contentClass?: string;
+	};
+
+	const {
+		label,
+		startContent,
+		content,
+		disabled = false,
+		defaultOpen = false,
+		variant = 'muted',
+		class: className,
+		headerClass,
+		contentClass
+	}: Props = $props();
+
+	let isOpen = $state(defaultOpen);
+
+	const variants = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		outline: 'is-outline'
+	};
+
+	function toggle() {
+		if (disabled) return;
+		isOpen = !isOpen;
+	}
+</script>
+
+<div class={cn('collapsible', variants[variant], className, disabled && 'is-disabled')}>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class={cn('collapsible-header', headerClass, isOpen && 'is-open')} onclick={toggle}>
+		<div class="collapsible-start">
+			{@render startContent?.()}
+			<span class="collapsible-label">{label}</span>
+		</div>
+		<div class="collapsible-end">
+			<Icon
+				icon={ChevronDown24RegularIcon}
+				class={cn('collapsible-arrow', isOpen && 'is-active')}
+			/>
+		</div>
+	</div>
+	{#if isOpen}
+		<div transition:slide class={cn('collapsible-content', contentClass)}>
+			{#if typeof content === 'string'}
+				{content}
+			{:else}
+				{@render content()}
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    label: string;
+    startContent?: Snippet;
+    content: Snippet | string;
+    disabled?: boolean;
+    defaultOpen?: boolean;
+    variant?: 'primary' | 'secondary' | 'muted' | 'outline';
+    class?: string;
+    headerClass?: string;
+    contentClass?: string;
+};
+declare const Collapsible: import("svelte").Component<Props, {}, "">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

package/dist/display/Divider.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children?: Snippet;
+		class?: string;
+		vertical?: boolean;
+		color?: 'default' | 'surface' | 'primary' | 'secondary' | 'muted';
+	};
+
+	let { children, class: className, vertical, color = 'default' }: Props = $props();
+
+	const colors = {
+		default: 'divider-default',
+		surface: 'divider-surface',
+		primary: 'divider-primary',
+		secondary: 'divider-secondary',
+		muted: 'divider-muted'
+	};
+</script>
+
+<div
+	class={cn(
+		vertical ? 'divider-vertical' : 'divider-horizontal',
+		color && colors[color],
+		className
+	)}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children?: Snippet;
+    class?: string;
+    vertical?: boolean;
+    color?: 'default' | 'surface' | 'primary' | 'secondary' | 'muted';
+};
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;