sdocs 0.0.1

package/dist/ui/InputText/InputText.docs.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import InputText from './InputText.svelte';
+	import type { DocMeta } from '../../types.js';
+
+	export const meta: DocMeta = {
+		title: 'InputText',
+		component: InputText,
+		args: {
+			value: '',
+			placeholder: 'Enter text...',
+			size: 'm',
+			disabled: false,
+			type: 'text'
+		}
+	};
+
+	export { Default, Sizes, Disabled, Types };
+</script>
+
+{#snippet Default(args: any)}
+	<InputText {...args} />
+{/snippet}
+
+{#snippet Sizes()}
+	<div style="display: flex; flex-direction: column; gap: 12px; max-width: 300px;">
+		<InputText placeholder="XS size" size="xs" />
+		<InputText placeholder="S size" size="s" />
+		<InputText placeholder="M size" size="m" />
+		<InputText placeholder="L size" size="l" />
+	</div>
+{/snippet}
+
+{#snippet Types()}
+	<div style="display: flex; flex-direction: column; gap: 12px; max-width: 300px;">
+		<InputText placeholder="Text input" type="text" />
+		<InputText placeholder="Email input" type="email" />
+		<InputText placeholder="Password input" type="password" />
+	</div>
+{/snippet}
+
+{#snippet Disabled()}
+	<InputText placeholder="Disabled input" value="Can't edit this" disabled />
+{/snippet}

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

@@ -0,0 +1,26 @@
+import InputText from './InputText.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 Types: () => ReturnType<import("svelte").Snippet>;
+declare const Disabled: () => ReturnType<import("svelte").Snippet>;
+export declare const meta: DocMeta;
+export { Default, Sizes, Disabled, Types };
+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 InputText: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InputText = InstanceType<typeof InputText>;
+export default InputText;

package/dist/ui/InputText/InputText.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	/**
+	 * A text input field with size variants and event callbacks.
+	 */
+	interface Props {
+		/** Input value */
+		value?: string;
+		/** Placeholder text */
+		placeholder?: string;
+		/** Callback when value changes */
+		onchange?: (value: string) => void;
+		/** Callback on input */
+		oninput?: (value: string) => void;
+		/** Size variant */
+		size?: 'xs' | 's' | 'm' | 'l';
+		/** Disable the input */
+		disabled?: boolean;
+		/** Input type */
+		type?: 'text' | 'email' | 'password';
+	}
+
+	let {
+		value = '',
+		placeholder = '',
+		onchange,
+		oninput,
+		size = 'm',
+		disabled = false,
+		type = 'text'
+	}: Props = $props();
+
+	// Internal state - sync with prop
+	let inputValue = $state(value);
+	$effect(() => {
+		inputValue = value;
+	});
+
+	function handleInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		inputValue = target.value;
+		oninput?.(inputValue);
+	}
+
+	function handleChange(e: Event) {
+		const target = e.target as HTMLInputElement;
+		inputValue = target.value;
+		onchange?.(inputValue);
+	}
+</script>
+
+<input
+	class="InputText {size}"
+	{type}
+	value={inputValue}
+	{placeholder}
+	{disabled}
+	oninput={handleInput}
+	onchange={handleChange}
+/>
+
+<style>
+	.InputText {
+		font-family: var(--font-sans);
+		font-weight: 400;
+		border: none;
+		background: var(--base-100);
+		color: var(--color-text);
+		border-radius: 6px;
+		transition: all 0.15s ease;
+		outline: none;
+		width: 100%;
+	}
+
+	.InputText::placeholder {
+		color: var(--base-400);
+	}
+
+	.InputText:hover:not(:disabled) {
+		background: var(--base-50);
+	}
+
+	.InputText:focus {
+		background: var(--base-50);
+		box-shadow: 0 0 0 2px var(--action-200);
+	}
+
+	.InputText:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* Size variants - heights: xs=24px, s=28px, m=32px, l=40px */
+	.xs {
+		height: 24px;
+		padding: 0 8px;
+		font-size: 11px;
+	}
+
+	.s {
+		height: 28px;
+		padding: 0 10px;
+		font-size: 12px;
+	}
+
+	.m {
+		height: 32px;
+		padding: 0 12px;
+		font-size: 13px;
+	}
+
+	.l {
+		height: 40px;
+		padding: 0 16px;
+		font-size: 14px;
+	}
+</style>

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

@@ -0,0 +1,22 @@
+/**
+ * A text input field with size variants and event callbacks.
+ */
+interface Props {
+    /** Input value */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Callback when value changes */
+    onchange?: (value: string) => void;
+    /** Callback on input */
+    oninput?: (value: string) => void;
+    /** Size variant */
+    size?: 'xs' | 's' | 'm' | 'l';
+    /** Disable the input */
+    disabled?: boolean;
+    /** Input type */
+    type?: 'text' | 'email' | 'password';
+}
+declare const InputText: import("svelte").Component<Props, {}, "">;
+type InputText = ReturnType<typeof InputText>;
+export default InputText;

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

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

package/dist/ui/InputText/index.js

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

package/dist/ui/Panel/CollapsiblePanel.docs.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+	import CollapsiblePanel from './CollapsiblePanel.svelte';
+	import type { DocMeta } from '../../types.js';
+
+	export const meta: DocMeta = {
+		title: 'Layout/CollapsiblePanel',
+		component: CollapsiblePanel,
+		args: {
+			title: 'Settings',
+			open: true
+		}
+	};
+
+	export { Default, Closed, CustomContent };
+</script>
+
+{#snippet Default(args: any)}
+	<CollapsiblePanel {...args}>
+		<p style="margin: 0; color: #666;">Panel content goes here.</p>
+	</CollapsiblePanel>
+{/snippet}
+
+{#snippet Closed()}
+	<CollapsiblePanel title="Collapsed by default" open={false}>
+		<p style="margin: 0; color: #666;">This content is hidden until you click the header.</p>
+	</CollapsiblePanel>
+{/snippet}
+
+{#snippet CustomContent()}
+	<CollapsiblePanel title="User Profile">
+		<div style="display: flex; flex-direction: column; gap: 12px;">
+			<div style="display: flex; align-items: center; gap: 12px;">
+				<div style="width: 48px; height: 48px; background: #e5e5e5; border-radius: 50%;"></div>
+				<div>
+					<div style="font-weight: 600;">John Doe</div>
+					<div style="font-size: 13px; color: #666;">john@example.com</div>
+				</div>
+			</div>
+			<div style="display: flex; gap: 8px;">
+				<button style="padding: 6px 12px; background: #3b82f6; color: white; border: none; border-radius: 6px; font-size: 13px; cursor: pointer;">Edit</button>
+				<button style="padding: 6px 12px; background: #f3f4f6; color: #374151; border: none; border-radius: 6px; font-size: 13px; cursor: pointer;">Settings</button>
+			</div>
+		</div>
+	</CollapsiblePanel>
+{/snippet}

package/dist/ui/Panel/CollapsiblePanel.docs.svelte.d.ts

@@ -0,0 +1,25 @@
+import CollapsiblePanel from './CollapsiblePanel.svelte';
+import type { DocMeta } from '../../types.js';
+declare const Default: (args: any) => ReturnType<import("svelte").Snippet>;
+declare const Closed: () => ReturnType<import("svelte").Snippet>;
+declare const CustomContent: () => ReturnType<import("svelte").Snippet>;
+export declare const meta: DocMeta;
+export { Default, Closed, CustomContent };
+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 CollapsiblePanel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CollapsiblePanel = InstanceType<typeof CollapsiblePanel>;
+export default CollapsiblePanel;

package/dist/ui/Panel/CollapsiblePanel.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+
+	interface Props {
+		/** Title displayed in header */
+		title?: string;
+		/** Whether the panel is open */
+		open?: boolean;
+		/** Remove content padding */
+		no_content_padding?: boolean;
+		/** Panel content */
+		children?: Snippet;
+	}
+
+	let { title, open = $bindable(true), no_content_padding = false, children }: Props = $props();
+
+	function toggle() {
+		open = !open;
+	}
+</script>
+
+<div class="CollapsiblePanel">
+	{#if title}
+		<button type="button" class="CollapsiblePanel-header" onclick={toggle}>
+			<h3 class="CollapsiblePanel-title">{title}</h3>
+			<span class="CollapsiblePanel-icon" class:open>
+				<ChevronRight size={14} strokeWidth={2} />
+			</span>
+		</button>
+	{/if}
+	{#if open && children}
+		<div class="CollapsiblePanel-content" class:no_content_padding>
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.CollapsiblePanel {
+		/* background: var(--color-bg-elevated); */
+		background: var(--base-100);
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+
+	.CollapsiblePanel-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		padding: 8px 16px;
+		background: var(--base-50);
+		border: none;
+		cursor: pointer;
+		transition: background 0.15s ease;
+	}
+
+	.CollapsiblePanel-header:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.CollapsiblePanel-title {
+		margin: 0;
+		font-size: 11px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--base-500);
+	}
+
+	.CollapsiblePanel-icon {
+		display: flex;
+		align-items: center;
+		color: var(--color-text-muted);
+		transition: transform 0.15s ease;
+	}
+
+	.CollapsiblePanel-icon.open {
+		transform: rotate(90deg);
+	}
+
+	.CollapsiblePanel-content {
+		background: var(--base-0);
+		padding: 16px;
+	}
+
+	.CollapsiblePanel-content.no_content_padding {
+		padding: 0;
+	}
+</style>

package/dist/ui/Panel/CollapsiblePanel.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Title displayed in header */
+    title?: string;
+    /** Whether the panel is open */
+    open?: boolean;
+    /** Remove content padding */
+    no_content_padding?: boolean;
+    /** Panel content */
+    children?: Snippet;
+}
+declare const CollapsiblePanel: import("svelte").Component<Props, {}, "open">;
+type CollapsiblePanel = ReturnType<typeof CollapsiblePanel>;
+export default CollapsiblePanel;

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

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

package/dist/ui/Panel/index.js

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

package/dist/ui/Placeholder/Placeholder.docs.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import Placeholder from './Placeholder.svelte';
+	import type { DocMeta } from '../../types.js';
+
+	export const meta: DocMeta = {
+		title: 'Placeholder',
+		component: Placeholder,
+		args: {
+			text: 'Placeholder',
+			radius: 0,
+			color: 'pink',
+			width: '200px',
+			height: '100px'
+		}
+	};
+
+	let bangRef: Placeholder;
+
+	export { Default, Colors, InLayout, Bang };
+</script>
+
+{#snippet Default(args: any)}
+	<Placeholder {...args} />
+{/snippet}
+
+{#snippet Colors()}
+	<div style="display: flex; gap: 16px;">
+		<Placeholder text="Pink" color="pink" width="120px" height="80px" />
+		<Placeholder text="Green" color="green" width="120px" height="80px" />
+		<Placeholder text="Blue" color="blue" width="120px" height="80px" />
+	</div>
+{/snippet}
+
+{#snippet InLayout()}
+	<div style="display: flex; flex-direction: column; gap: 8px; width: 300px; height: 200px;">
+		<Placeholder text="Header" color="blue" height="40px" />
+		<div style="display: flex; gap: 8px; flex: 1;">
+			<Placeholder text="Nav" color="green" width="80px" />
+			<Placeholder text="Main" color="pink" />
+		</div>
+	</div>
+{/snippet}
+
+{#snippet Bang()}
+	<div style="display: flex; align-items: center; gap: 12px;">
+		<Placeholder bind:this={bangRef} text="Click the button" width="200px" height="80px" />
+		<button style="height: 32px; padding: 0 12px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; background: var(--base-800); color: var(--base-50); border: none; border-radius: 6px; cursor: pointer; white-space: nowrap;" onclick={() => bangRef?.bang()}>bang()</button>
+	</div>
+{/snippet}

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

@@ -0,0 +1,26 @@
+import Placeholder from './Placeholder.svelte';
+import type { DocMeta } from '../../types.js';
+declare const Default: (args: any) => ReturnType<import("svelte").Snippet>;
+declare const Colors: () => ReturnType<import("svelte").Snippet>;
+declare const InLayout: () => ReturnType<import("svelte").Snippet>;
+declare const Bang: () => ReturnType<import("svelte").Snippet>;
+export declare const meta: DocMeta;
+export { Default, Colors, InLayout, Bang };
+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 Placeholder: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Placeholder = InstanceType<typeof Placeholder>;
+export default Placeholder;

package/dist/ui/Placeholder/Placeholder.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	/**
+	 * A Placeholder rectangle for visualizing layouts and empty spaces.
+	 * Call `run()` to trigger a flash animation (useful for testing function props).
+	 */
+	interface Props {
+		/** Text to display inside the Placeholder */
+		text?: string;
+		/** Border radius in pixels */
+		radius?: number;
+		/** Color variant */
+		color?: 'pink' | 'green' | 'blue';
+		/** Width (any CSS dimension) */
+		width?: string;
+		/** Height (any CSS dimension) */
+		height?: string;
+	}
+
+	let { text, radius = 0, color = 'pink', width = '100%', height = '100%' }: Props = $props();
+
+	let flashing = $state(false);
+	let flashTimeout: ReturnType<typeof setTimeout>;
+
+	export function bang() {
+		clearTimeout(flashTimeout);
+		flashing = true;
+		flashTimeout = setTimeout(() => {
+			flashing = false;
+		}, 400);
+	}
+</script>
+
+<div class="Placeholder {color}" class:flashing style:border-radius="{radius}px" style:width style:height>
+	{#if text}
+		<span class="Placeholder-text">{text}</span>
+	{/if}
+</div>
+
+<style>
+	.Placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: opacity 0.3s ease;
+	}
+
+	.Placeholder.flashing {
+		opacity: 0.4;
+		transition: none;
+	}
+
+	.Placeholder.pink {
+		background: repeating-linear-gradient(
+			-45deg,
+			var(--pink-100),
+			var(--pink-100) 8px,
+			var(--pink-200) 8px,
+			var(--pink-200) 12px
+		);
+	}
+
+	.Placeholder.pink .Placeholder-text {
+		color: var(--pink-500);
+	}
+
+	.Placeholder.green {
+		background: repeating-linear-gradient(
+			-45deg,
+			var(--success-100),
+			var(--success-100) 8px,
+			var(--success-200) 8px,
+			var(--success-200) 12px
+		);
+	}
+
+	.Placeholder.green .Placeholder-text {
+		color: var(--success-500);
+	}
+
+	.Placeholder.blue {
+		background: repeating-linear-gradient(
+			-45deg,
+			var(--sky-100),
+			var(--sky-100) 8px,
+			var(--sky-200) 8px,
+			var(--sky-200) 12px
+		);
+	}
+
+	.Placeholder.blue .Placeholder-text {
+		color: var(--sky-500);
+	}
+
+	.Placeholder-text {
+		font-family: var(--font-sans);
+		font-size: 12px;
+		font-weight: 500;
+	}
+</style>

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

@@ -0,0 +1,21 @@
+/**
+ * A Placeholder rectangle for visualizing layouts and empty spaces.
+ * Call `run()` to trigger a flash animation (useful for testing function props).
+ */
+interface Props {
+    /** Text to display inside the Placeholder */
+    text?: string;
+    /** Border radius in pixels */
+    radius?: number;
+    /** Color variant */
+    color?: 'pink' | 'green' | 'blue';
+    /** Width (any CSS dimension) */
+    width?: string;
+    /** Height (any CSS dimension) */
+    height?: string;
+}
+declare const Placeholder: import("svelte").Component<Props, {
+    bang: () => void;
+}, "">;
+type Placeholder = ReturnType<typeof Placeholder>;
+export default Placeholder;

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

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

package/dist/ui/Placeholder/index.js

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

package/dist/ui/Radio/Radio.docs.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" module>
+	import Radio from './Radio.svelte';
+	import type { DocMeta } from '../../types.js';
+
+	export const meta: DocMeta = {
+		title: 'Radio',
+		component: Radio,
+		args: {
+			value: 'option1',
+			label: 'Select this option',
+			checked: false,
+			size: 'm',
+			disabled: false
+		}
+	};
+
+	export { Default, Sizes, GroupedByName, WithoutLabel, Disabled };
+</script>
+
+{#snippet Default(args: any)}
+	<Radio {...args} />
+{/snippet}
+
+{#snippet Sizes()}
+	<div style="display: flex; gap: 24px; align-items: center;">
+		<Radio name="sizes" value="xs" label="Extra small" size="xs" />
+		<Radio name="sizes" value="s" label="Small" size="s" />
+		<Radio name="sizes" value="m" label="Medium" size="m" checked />
+		<Radio name="sizes" value="l" label="Large" size="l" />
+	</div>
+{/snippet}
+
+{#snippet GroupedByName()}
+	<div style="display: flex; gap: 48px;">
+		<div>
+			<p style="margin: 0 0 12px; font-size: 13px; font-weight: 500;">Favorite fruit</p>
+			<div style="display: flex; flex-direction: column; gap: 10px;">
+				<Radio name="fruit" value="apple" label="Apple" checked />
+				<Radio name="fruit" value="banana" label="Banana" />
+				<Radio name="fruit" value="cherry" label="Cherry" />
+			</div>
+		</div>
+		<div>
+			<p style="margin: 0 0 12px; font-size: 13px; font-weight: 500;">Favorite color</p>
+			<div style="display: flex; flex-direction: column; gap: 10px;">
+				<Radio name="color" value="red" label="Red" />
+				<Radio name="color" value="blue" label="Blue" checked />
+				<Radio name="color" value="green" label="Green" />
+			</div>
+		</div>
+	</div>
+{/snippet}
+
+{#snippet WithoutLabel()}
+	<div style="display: flex; gap: 16px;">
+		<Radio name="nolabel" value="1" size="m" />
+		<Radio name="nolabel" value="2" size="m" checked />
+		<Radio name="nolabel" value="3" size="m" />
+	</div>
+{/snippet}
+
+{#snippet Disabled()}
+	<div style="display: flex; flex-direction: column; gap: 10px;">
+		<Radio name="disabled-demo" value="1" label="Disabled unchecked" disabled />
+		<Radio name="disabled-demo" value="2" label="Disabled checked" checked disabled />
+	</div>
+{/snippet}