sdocs 0.0.1

package/dist/ui/Badge/Badge.docs.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import Badge from './Badge.svelte';
+	import type { DocMeta } from '../../types.js';
+
+	export const meta: DocMeta = {
+		title: 'Badge',
+		component: Badge,
+		args: {
+			label: 'Badge',
+			size: 'm',
+			radius: 4
+		}
+	};
+
+	export { Default, Sizes, Colors, Rounded };
+</script>
+
+{#snippet Default(args: any)}
+	<Badge {...args} />
+{/snippet}
+
+{#snippet Sizes()}
+	<div style="display: flex; align-items: center; gap: 8px;">
+		<Badge label="xs" size="xs" />
+		<Badge label="s" size="s" />
+		<Badge label="m" size="m" />
+		<Badge label="l" size="l" />
+	</div>
+{/snippet}
+
+{#snippet Colors()}
+	<div style="display: flex; align-items: center; gap: 8px;">
+		<Badge label="string" --Badge-bg="var(--pink-50)" --Badge-color="var(--pink-600)" />
+		<Badge label="number" --Badge-bg="var(--sky-50)" --Badge-color="var(--sky-600)" />
+		<Badge label="boolean" --Badge-bg="var(--success-50)" --Badge-color="var(--success-600)" />
+		<Badge label="any" />
+	</div>
+{/snippet}
+
+{#snippet Rounded()}
+	<div style="display: flex; align-items: center; gap: 8px;">
+		<Badge label="default" radius={4} --Badge-bg="var(--pink-50)" --Badge-color="var(--pink-600)" />
+		<Badge label="rounded" radius={8} --Badge-bg="var(--sky-50)" --Badge-color="var(--sky-600)" />
+		<Badge label="pill" radius={100} --Badge-bg="var(--success-50)" --Badge-color="var(--success-600)" />
+	</div>
+{/snippet}

package/dist/ui/Badge/Badge.docs.svelte.d.ts

@@ -0,0 +1,26 @@
+import Badge from './Badge.svelte';
+import type { DocMeta } from '../../types.js';
+declare const Default: (args: any) => ReturnType<import("svelte").Snippet>;
+declare const Sizes: () => ReturnType<import("svelte").Snippet>;
+declare const Colors: () => ReturnType<import("svelte").Snippet>;
+declare const Rounded: () => ReturnType<import("svelte").Snippet>;
+export declare const meta: DocMeta;
+export { Default, Sizes, Colors, Rounded };
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Badge: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Badge = InstanceType<typeof Badge>;
+export default Badge;

package/dist/ui/Badge/Badge.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	/**
+	 * A small inline label for displaying metadata like types, status, or categories.
+	 *
+	 * @cssvar {color} --Badge-bg - Background color (default: var(--base-100))
+	 * @cssvar {color} --Badge-color - Text color (default: var(--base-600))
+	 */
+	interface Props {
+		/** Text to display */
+		label: string;
+		/** Size variant */
+		size?: 'xs' | 's' | 'm' | 'l';
+		/** Border radius in pixels */
+		radius?: number;
+	}
+
+	let { label = 'label', size = 'm', radius = 4 }: Props = $props();
+</script>
+
+<span class="Badge {size}" style:border-radius="{radius}px">
+	{label}
+</span>
+
+<style>
+	.Badge {
+		display: inline-flex;
+		align-items: center;
+		font-family: var(--font-mono);
+		font-weight: 500;
+		white-space: nowrap;
+		background: var(--Badge-bg, var(--base-100));
+		color: var(--Badge-color, var(--base-600));
+	}
+
+	/* Size variants */
+	.xs {
+		height: 18px;
+		padding: 0 5px;
+		font-size: 10px;
+	}
+
+	.s {
+		height: 20px;
+		padding: 0 6px;
+		font-size: 11px;
+	}
+
+	.m {
+		height: 22px;
+		padding: 0 7px;
+		font-size: 12px;
+	}
+
+	.l {
+		height: 26px;
+		padding: 0 9px;
+		font-size: 13px;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+/**
+ * A small inline label for displaying metadata like types, status, or categories.
+ *
+ * @cssvar {color} --Badge-bg - Background color (default: var(--base-100))
+ * @cssvar {color} --Badge-color - Text color (default: var(--base-600))
+ */
+interface Props {
+    /** Text to display */
+    label: string;
+    /** Size variant */
+    size?: 'xs' | 's' | 'm' | 'l';
+    /** Border radius in pixels */
+    radius?: number;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/ui/Badge/index.d.ts

@@ -0,0 +1 @@
+export { default as Badge } from './Badge.svelte';

package/dist/ui/Badge/index.js

@@ -0,0 +1 @@
+export { default as Badge } from './Badge.svelte';

package/dist/ui/Checkbox/Checkbox.docs.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import Checkbox from './Checkbox.svelte';
+	import type { DocMeta } from '../../types.js';
+
+	export const meta: DocMeta = {
+		title: 'Checkbox',
+		component: Checkbox,
+		args: {
+			checked: false,
+			label: 'Accept terms and conditions',
+			size: 'm',
+			disabled: false
+		}
+	};
+
+	export { Default, Sizes, WithoutLabel, Disabled, Checked };
+</script>
+
+{#snippet Default(args: any)}
+	<Checkbox {...args} />
+{/snippet}
+
+{#snippet Sizes()}
+	<div style="display: flex; flex-direction: column; gap: 12px;">
+		<Checkbox label="Extra small" size="xs" />
+		<Checkbox label="Small" size="s" />
+		<Checkbox label="Medium (default)" size="m" />
+		<Checkbox label="Large" size="l" />
+	</div>
+{/snippet}
+
+{#snippet WithoutLabel()}
+	<div style="display: flex; gap: 12px;">
+		<Checkbox size="m" />
+		<Checkbox size="m" checked />
+	</div>
+{/snippet}
+
+{#snippet Disabled()}
+	<div style="display: flex; flex-direction: column; gap: 12px;">
+		<Checkbox label="Disabled unchecked" disabled />
+		<Checkbox label="Disabled checked" checked disabled />
+	</div>
+{/snippet}
+
+{#snippet Checked()}
+	<div style="display: flex; flex-direction: column; gap: 12px;">
+		<Checkbox label="Remember me" checked />
+		<Checkbox label="Subscribe to newsletter" checked />
+	</div>
+{/snippet}

package/dist/ui/Checkbox/Checkbox.docs.svelte.d.ts

@@ -0,0 +1,27 @@
+import Checkbox from './Checkbox.svelte';
+import type { DocMeta } from '../../types.js';
+declare const Default: (args: any) => ReturnType<import("svelte").Snippet>;
+declare const Sizes: () => ReturnType<import("svelte").Snippet>;
+declare const WithoutLabel: () => ReturnType<import("svelte").Snippet>;
+declare const Disabled: () => ReturnType<import("svelte").Snippet>;
+declare const Checked: () => ReturnType<import("svelte").Snippet>;
+export declare const meta: DocMeta;
+export { Default, Sizes, WithoutLabel, Disabled, Checked };
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Checkbox: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Checkbox = InstanceType<typeof Checkbox>;
+export default Checkbox;

package/dist/ui/Checkbox/Checkbox.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	/**
+	 * A customizable checkbox component with support for labels, sizes, and disabled states.
+	 */
+	interface Props {
+		/** Whether the checkbox is checked */
+		checked?: boolean;
+		/** Label text */
+		label?: string;
+		/** Size variant */
+		size?: 'xs' | 's' | 'm' | 'l';
+		/** Disable the checkbox */
+		disabled?: boolean;
+		/** Callback when checked state changes */
+		onchange?: (checked: boolean) => void;
+	}
+
+	let {
+		checked = false,
+		label,
+		size = 'm',
+		disabled = false,
+		onchange
+	}: Props = $props();
+
+	let isChecked = $state(checked);
+
+	// Sync with external changes
+	$effect(() => {
+		isChecked = checked;
+	});
+
+	function handleClick() {
+		if (disabled) return;
+		isChecked = !isChecked;
+		onchange?.(isChecked);
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === ' ' || e.key === 'Enter') {
+			e.preventDefault();
+			handleClick();
+		}
+	}
+
+	// Size-based dimensions (matching Radio pattern)
+	const sizes = {
+		xs: { box: 14, mark: 6, gap: 6 },
+		s: { box: 16, mark: 7, gap: 8 },
+		m: { box: 18, mark: 8, gap: 8 },
+		l: { box: 22, mark: 10, gap: 10 }
+	};
+
+	let sizeConfig = $derived(sizes[size]);
+</script>
+
+<button
+	type="button"
+	class="Checkbox {size}"
+	class:checked={isChecked}
+	class:disabled
+	{disabled}
+	role="checkbox"
+	aria-checked={isChecked}
+	onclick={handleClick}
+	onkeydown={handleKeyDown}
+	style="--box-size: {sizeConfig.box}px; --mark-size: {sizeConfig.mark}px; --gap: {sizeConfig.gap}px;"
+>
+	<span class="Checkbox-box">
+		<span class="Checkbox-mark"></span>
+	</span>
+	{#if label}
+		<span class="Checkbox-label">{label}</span>
+	{/if}
+</button>
+
+<style>
+	.Checkbox {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--gap);
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		font-family: var(--font-sans);
+		color: var(--color-text);
+		transition: opacity 0.15s ease;
+	}
+
+	.Checkbox:focus-visible {
+		outline: none;
+	}
+
+	.Checkbox:focus-visible .Checkbox-box {
+		box-shadow: 0 0 0 2px var(--action-200);
+	}
+
+	.Checkbox.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.Checkbox-box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--box-size);
+		height: var(--box-size);
+		border-radius: 4px;
+		border: 1.5px solid var(--base-300);
+		background: var(--base-0);
+		transition: all 0.15s ease;
+		flex-shrink: 0;
+	}
+
+	.Checkbox:not(.disabled):hover .Checkbox-box {
+		border-color: var(--base-400);
+		background: var(--base-50);
+	}
+
+	.Checkbox.checked .Checkbox-box {
+		border-color: var(--action-500);
+	}
+
+	.Checkbox.checked:not(.disabled):hover .Checkbox-box {
+		border-color: var(--action-600);
+	}
+
+	.Checkbox-mark {
+		width: var(--mark-size);
+		height: var(--mark-size);
+		border-radius: 2px;
+		background: var(--action-500);
+		opacity: 0;
+		transform: scale(0);
+		transition: all 0.15s ease;
+	}
+
+	.Checkbox.checked .Checkbox-mark {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	.Checkbox.checked:not(.disabled):hover .Checkbox-mark {
+		background: var(--action-600);
+	}
+
+	.Checkbox-label {
+		user-select: none;
+	}
+
+	/* Size-specific label font sizes */
+	.xs .Checkbox-label {
+		font-size: 11px;
+	}
+
+	.s .Checkbox-label {
+		font-size: 12px;
+	}
+
+	.m .Checkbox-label {
+		font-size: 13px;
+	}
+
+	.l .Checkbox-label {
+		font-size: 14px;
+	}
+</style>

package/dist/ui/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A customizable checkbox component with support for labels, sizes, and disabled states.
+ */
+interface Props {
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** Label text */
+    label?: string;
+    /** Size variant */
+    size?: 'xs' | 's' | 'm' | 'l';
+    /** Disable the checkbox */
+    disabled?: boolean;
+    /** Callback when checked state changes */
+    onchange?: (checked: boolean) => void;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/ui/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.svelte';

package/dist/ui/Checkbox/index.js

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.svelte';

package/dist/ui/CodeBlock/CodeBlock.docs.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+	import CodeBlock from './CodeBlock.svelte';
+	import type { DocMeta } from '../../types.js';
+
+	export const meta: DocMeta = {
+		title: 'CodeBlock',
+		component: CodeBlock,
+		args: {
+			code: `function greet(name: string) {\n  return \`Hello, \${name}!\`;\n}`
+		}
+	};
+
+	export { Default, Multiline };
+</script>
+
+{#snippet Default(args: any)}
+	<CodeBlock {...args} />
+{/snippet}
+
+{#snippet Multiline()}
+	<CodeBlock code={`export function formatDate(date: Date): string {
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+}`} />
+{/snippet}

package/dist/ui/CodeBlock/CodeBlock.docs.svelte.d.ts

@@ -0,0 +1,24 @@
+import CodeBlock from './CodeBlock.svelte';
+import type { DocMeta } from '../../types.js';
+declare const Default: (args: any) => ReturnType<import("svelte").Snippet>;
+declare const Multiline: () => ReturnType<import("svelte").Snippet>;
+export declare const meta: DocMeta;
+export { Default, Multiline };
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CodeBlock: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CodeBlock = InstanceType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/ui/CodeBlock/CodeBlock.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import Copy from 'lucide-svelte/icons/copy';
+	import Check from 'lucide-svelte/icons/check';
+
+	interface Props {
+		/** Code string to display */
+		code: string;
+	}
+
+	let { code }: Props = $props();
+
+	let copied = $state(false);
+	let copyTimeout: ReturnType<typeof setTimeout>;
+
+	async function copyCode() {
+		try {
+			await navigator.clipboard.writeText(code);
+			copied = true;
+			clearTimeout(copyTimeout);
+			copyTimeout = setTimeout(() => {
+				copied = false;
+			}, 2000);
+		} catch {
+			const textarea = document.createElement('textarea');
+			textarea.value = code;
+			document.body.appendChild(textarea);
+			textarea.select();
+			document.execCommand('copy');
+			document.body.removeChild(textarea);
+			copied = true;
+			clearTimeout(copyTimeout);
+			copyTimeout = setTimeout(() => {
+				copied = false;
+			}, 2000);
+		}
+	}
+</script>
+
+<div class="CodeBlock">
+	<button type="button" class="CodeBlock-copy" onclick={copyCode} class:copied>
+		{#if copied}
+			<Check size={14} strokeWidth={2} />
+		{:else}
+			<Copy size={14} strokeWidth={1.75} />
+		{/if}
+	</button>
+	<pre><code>{code}</code></pre>
+</div>
+
+<style>
+	.CodeBlock {
+		position: relative;
+		width: 100%;
+		box-sizing: border-box;
+		background: var(--base-800);
+		border-radius: 0;
+		overflow: hidden;
+		border: none;
+		padding: 12px 16px;
+		padding-right: 48px;
+	}
+
+	.CodeBlock-copy {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		background: var(--base-800);
+		border: none;
+		border-radius: 6px;
+		color: var(--base-400);
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.CodeBlock-copy:hover {
+		background: var(--base-700);
+		color: var(--base-200);
+	}
+
+	.CodeBlock-copy.copied {
+		color: var(--success-400);
+	}
+
+	pre {
+		margin: 0;
+		overflow-x: auto;
+	}
+
+	code {
+		font-family: var(--font-mono);
+		font-size: 13px;
+		line-height: 1.2;
+		color: var(--base-50);
+		white-space: pre;
+	}
+</style>

package/dist/ui/CodeBlock/CodeBlock.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    /** Code string to display */
+    code: string;
+}
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/ui/CodeBlock/index.d.ts

@@ -0,0 +1 @@
+export { default as CodeBlock } from './CodeBlock.svelte';

package/dist/ui/CodeBlock/index.js

@@ -0,0 +1 @@
+export { default as CodeBlock } from './CodeBlock.svelte';