sdocs 0.0.1

package/dist/ui/Frame/Frame.docs.svelte

@@ -0,0 +1,140 @@
+<script lang="ts" module>
+	import Frame from './Frame.svelte';
+	import type { DocMeta } from '../../types.js';
+
+	export const meta: DocMeta = {
+		title: 'Layout/Frame',
+		component: Frame,
+	};
+
+	export { Default, WithSidebars, Nested, AppLayout };
+</script>
+
+{#snippet Default()}
+	<div style="height: 300px; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden;">
+		<Frame>
+			{#snippet top()}
+				<div style="padding: 12px 16px; background: #f5f5f5; border-bottom: 1px solid #e5e5e5;">Header</div>
+			{/snippet}
+
+			<div style="padding: 16px;">Main content goes here. This is the middle area.</div>
+
+			{#snippet bottom()}
+				<div style="padding: 12px 16px; background: #f5f5f5; border-top: 1px solid #e5e5e5;">Footer</div>
+			{/snippet}
+		</Frame>
+	</div>
+{/snippet}
+
+{#snippet WithSidebars()}
+	<div style="height: 300px; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden;">
+		<Frame>
+			{#snippet top()}
+				<div style="padding: 12px 16px; background: #3b82f6; color: white;">App Header</div>
+			{/snippet}
+
+			{#snippet left()}
+				<div style="width: 180px; padding: 16px; background: #f8fafc; border-right: 1px solid #e5e5e5;">
+					<div style="font-weight: 600; margin-bottom: 12px;">Navigation</div>
+					<div style="display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #666;">
+						<span>Dashboard</span>
+						<span>Settings</span>
+						<span>Profile</span>
+					</div>
+				</div>
+			{/snippet}
+
+			<div style="padding: 16px;">
+				<h2 style="margin: 0 0 8px;">Welcome</h2>
+				<p style="color: #666; margin: 0;">This is the main content area with left sidebar.</p>
+			</div>
+
+			{#snippet right()}
+				<div style="width: 200px; padding: 16px; background: #fefce8; border-left: 1px solid #e5e5e5;">
+					<div style="font-weight: 600; margin-bottom: 8px;">Info Panel</div>
+					<p style="font-size: 13px; color: #666; margin: 0;">Additional context or widgets.</p>
+				</div>
+			{/snippet}
+		</Frame>
+	</div>
+{/snippet}
+
+{#snippet Nested()}
+	<div style="height: 400px; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden;">
+		<Frame>
+			{#snippet top()}
+				<div style="padding: 12px 16px; background: #1e293b; color: white;">Outer Frame Header</div>
+			{/snippet}
+
+			{#snippet left()}
+				<div style="width: 160px; padding: 16px; background: #f1f5f9; border-right: 1px solid #e5e5e5;">Outer Left</div>
+			{/snippet}
+
+			<Frame>
+				{#snippet top()}
+					<div style="padding: 8px 12px; background: #e0f2fe; border-bottom: 1px solid #bae6fd; font-size: 14px;">Inner Frame Header</div>
+				{/snippet}
+
+				<div style="padding: 16px;">
+					<p style="margin: 0; color: #666;">Nested frames allow complex layouts.</p>
+				</div>
+
+				{#snippet bottom()}
+					<div style="padding: 8px 12px; background: #e0f2fe; border-top: 1px solid #bae6fd; font-size: 14px;">Inner Frame Footer</div>
+				{/snippet}
+			</Frame>
+		</Frame>
+	</div>
+{/snippet}
+
+{#snippet AppLayout()}
+	<div style="height: 400px; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden;">
+		<Frame>
+			{#snippet top()}
+				<div style="padding: 12px 20px; background: linear-gradient(to right, #6366f1, #8b5cf6); color: white; display: flex; justify-content: space-between; align-items: center;">
+					<span style="font-weight: 600;">MyApp</span>
+					<div style="display: flex; gap: 16px; font-size: 14px;">
+						<span>Docs</span>
+						<span>Blog</span>
+						<span>Login</span>
+					</div>
+				</div>
+			{/snippet}
+
+			{#snippet left()}
+				<div style="width: 220px; padding: 20px; background: #fafafa; border-right: 1px solid #e5e5e5;">
+					<div style="font-size: 12px; text-transform: uppercase; color: #999; margin-bottom: 12px;">Menu</div>
+					<div style="display: flex; flex-direction: column; gap: 4px;">
+						<div style="padding: 8px 12px; background: #6366f1; color: white; border-radius: 6px; font-size: 14px;">Home</div>
+						<div style="padding: 8px 12px; color: #666; font-size: 14px;">Projects</div>
+						<div style="padding: 8px 12px; color: #666; font-size: 14px;">Team</div>
+						<div style="padding: 8px 12px; color: #666; font-size: 14px;">Settings</div>
+					</div>
+				</div>
+			{/snippet}
+
+			<div style="padding: 24px; background: white;">
+				<h1 style="margin: 0 0 8px; font-size: 24px;">Dashboard</h1>
+				<p style="color: #666; margin: 0 0 20px;">Welcome back! Here's what's happening.</p>
+				<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
+					<div style="padding: 16px; background: #f0fdf4; border-radius: 8px;">
+						<div style="font-size: 24px; font-weight: 600; color: #16a34a;">128</div>
+						<div style="font-size: 13px; color: #666;">Active Users</div>
+					</div>
+					<div style="padding: 16px; background: #eff6ff; border-radius: 8px;">
+						<div style="font-size: 24px; font-weight: 600; color: #2563eb;">42</div>
+						<div style="font-size: 13px; color: #666;">Projects</div>
+					</div>
+					<div style="padding: 16px; background: #fef3c7; border-radius: 8px;">
+						<div style="font-size: 24px; font-weight: 600; color: #d97706;">7</div>
+						<div style="font-size: 13px; color: #666;">Pending</div>
+					</div>
+				</div>
+			</div>
+
+			{#snippet bottom()}
+				<div style="padding: 12px 20px; background: #fafafa; border-top: 1px solid #e5e5e5; font-size: 13px; color: #999; text-align: center;">© 2025 MyApp. All rights reserved.</div>
+			{/snippet}
+		</Frame>
+	</div>
+{/snippet}

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

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

package/dist/ui/Frame/Frame.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * A flexible layout component with slots for top, bottom, left, right, and center content.
+	 */
+	interface Props {
+		top?: Snippet;
+		bottom?: Snippet;
+		left?: Snippet;
+		right?: Snippet;
+		children?: Snippet;
+		class?: string;
+	}
+
+	let { top, bottom, left, right, children, class: className = '' }: Props = $props();
+</script>
+
+<div class="Frame {className}">
+	{#if top}
+		<div class="Frame-top">
+			{@render top()}
+		</div>
+	{/if}
+
+	<div class="Frame-body">
+		{#if left}
+			<div class="Frame-left">
+				{@render left()}
+			</div>
+		{/if}
+
+		<div class="Frame-middle">
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+
+		{#if right}
+			<div class="Frame-right">
+				{@render right()}
+			</div>
+		{/if}
+	</div>
+
+	{#if bottom}
+		<div class="Frame-bottom">
+			{@render bottom()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.Frame {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		width: 100%;
+	}
+
+	.Frame-top {
+		flex-shrink: 0;
+	}
+
+	.Frame-body {
+		display: flex;
+		flex: 1;
+		min-height: 0;
+	}
+
+	.Frame-left {
+		flex-shrink: 0;
+	}
+
+	.Frame-middle {
+		flex: 1;
+		min-width: 0;
+		overflow: auto;
+	}
+
+	.Frame-right {
+		flex-shrink: 0;
+	}
+
+	.Frame-bottom {
+		flex-shrink: 0;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+/**
+ * A flexible layout component with slots for top, bottom, left, right, and center content.
+ */
+interface Props {
+    top?: Snippet;
+    bottom?: Snippet;
+    left?: Snippet;
+    right?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const Frame: import("svelte").Component<Props, {}, "">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

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

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

package/dist/ui/Frame/index.js

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

package/dist/ui/InputNumber/InputNumber.docs.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import InputNumber from './InputNumber.svelte';
+	import type { DocMeta } from '../../types.js';
+
+	export const meta: DocMeta = {
+		title: 'InputNumber',
+		component: InputNumber,
+		args: {
+			value: 0,
+			min: undefined,
+			max: undefined,
+			step: 1,
+			placeholder: 'Enter number...',
+			size: 'm',
+			disabled: false
+		}
+	};
+
+	export { Default, Sizes, WithConstraints, Disabled };
+</script>
+
+{#snippet Default(args: any)}
+	<InputNumber {...args} />
+{/snippet}
+
+{#snippet Sizes()}
+	<div style="display: flex; flex-direction: column; gap: 12px; max-width: 200px;">
+		<InputNumber placeholder="XS size" size="xs" />
+		<InputNumber placeholder="S size" size="s" />
+		<InputNumber placeholder="M size" size="m" />
+		<InputNumber placeholder="L size" size="l" />
+	</div>
+{/snippet}
+
+{#snippet WithConstraints()}
+	<div style="display: flex; flex-direction: column; gap: 12px; max-width: 200px;">
+		<label style="font-size: 12px; color: var(--base-500);">
+			Min: 0, Max: 100, Step: 10
+			<InputNumber value={50} min={0} max={100} step={10} />
+		</label>
+		<label style="font-size: 12px; color: var(--base-500);">
+			Step: 0.1 (decimals)
+			<InputNumber value={0.5} step={0.1} />
+		</label>
+	</div>
+{/snippet}
+
+{#snippet Disabled()}
+	<InputNumber placeholder="Disabled" value={42} disabled />
+{/snippet}

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

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

package/dist/ui/InputNumber/InputNumber.svelte

@@ -0,0 +1,275 @@
+<script lang="ts">
+	/**
+	 * A number input field with custom stepper buttons and size variants.
+	 */
+	interface Props {
+		/** Input value */
+		value?: number;
+		/** Minimum value */
+		min?: number;
+		/** Maximum value */
+		max?: number;
+		/** Step increment */
+		step?: number;
+		/** Placeholder text */
+		placeholder?: string;
+		/** Callback when value changes */
+		onchange?: (value: number) => void;
+		/** Callback on input */
+		oninput?: (value: number) => void;
+		/** Size variant */
+		size?: 'xs' | 's' | 'm' | 'l';
+		/** Disable the input */
+		disabled?: boolean;
+	}
+
+	let {
+		value = 0,
+		min,
+		max,
+		step = 1,
+		placeholder = '',
+		onchange,
+		oninput,
+		size = 'm',
+		disabled = false
+	}: Props = $props();
+
+	// Internal state - sync with prop
+	let inputValue = $state(value);
+	$effect(() => {
+		inputValue = value;
+	});
+
+	function clamp(val: number): number {
+		if (min !== undefined && val < min) return min;
+		if (max !== undefined && val > max) return max;
+		return val;
+	}
+
+	function handleInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		const num = parseFloat(target.value);
+		if (!isNaN(num)) {
+			inputValue = num;
+			oninput?.(inputValue);
+		}
+	}
+
+	function handleChange(e: Event) {
+		const target = e.target as HTMLInputElement;
+		const num = parseFloat(target.value);
+		if (!isNaN(num)) {
+			inputValue = clamp(num);
+			onchange?.(inputValue);
+		}
+	}
+
+	function increment() {
+		if (disabled) return;
+		const newValue = clamp(inputValue + step);
+		inputValue = newValue;
+		onchange?.(newValue);
+	}
+
+	function decrement() {
+		if (disabled) return;
+		const newValue = clamp(inputValue - step);
+		inputValue = newValue;
+		onchange?.(newValue);
+	}
+</script>
+
+<div class="InputNumber {size}" class:disabled>
+	<input
+		class="InputNumber-input"
+		type="number"
+		value={inputValue}
+		{min}
+		{max}
+		{step}
+		{placeholder}
+		{disabled}
+		oninput={handleInput}
+		onchange={handleChange}
+	/>
+	<div class="InputNumber-steppers">
+		<button
+			type="button"
+			class="InputNumber-stepper"
+			onclick={decrement}
+			{disabled}
+			tabindex={-1}
+			aria-label="Decrement"
+		>
+			<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+				<path d="M8 3L5 6L8 9" />
+			</svg>
+		</button>
+		<button
+			type="button"
+			class="InputNumber-stepper"
+			onclick={increment}
+			{disabled}
+			tabindex={-1}
+			aria-label="Increment"
+		>
+			<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+				<path d="M4 3L7 6L4 9" />
+			</svg>
+		</button>
+	</div>
+</div>
+
+<style>
+	.InputNumber {
+		position: relative;
+		display: flex;
+		align-items: stretch;
+		width: 100%;
+		background: var(--base-100);
+		border-radius: 6px;
+		transition: all 0.15s ease;
+	}
+
+	.InputNumber:hover:not(.disabled) {
+		background: var(--base-50);
+	}
+
+	.InputNumber:focus-within {
+		background: var(--base-50);
+		box-shadow: 0 0 0 2px var(--action-200);
+	}
+
+	.InputNumber.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.InputNumber-input {
+		flex: 1;
+		font-family: var(--font-sans);
+		font-weight: 400;
+		border: none;
+		background: transparent;
+		color: var(--color-text);
+		outline: none;
+		min-width: 0;
+	}
+
+	.InputNumber-input::placeholder {
+		color: var(--base-400);
+	}
+
+	.InputNumber-input:disabled {
+		cursor: not-allowed;
+	}
+
+	/* Hide native spinner buttons */
+	.InputNumber-input::-webkit-outer-spin-button,
+	.InputNumber-input::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	.InputNumber-input[type='number'] {
+		-moz-appearance: textfield;
+	}
+
+	.InputNumber-steppers {
+		display: flex;
+		flex-direction: row;
+		border-left: 1px solid var(--base-200);
+	}
+
+	.InputNumber-stepper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: none;
+		border: none;
+		color: var(--base-400);
+		cursor: pointer;
+		padding: 0;
+		transition: all 0.1s ease;
+	}
+
+	.InputNumber-stepper:hover:not(:disabled) {
+		color: var(--color-text);
+		background: var(--base-200);
+	}
+
+	.InputNumber-stepper:active:not(:disabled) {
+		background: var(--base-300);
+	}
+
+	.InputNumber-stepper:disabled {
+		cursor: not-allowed;
+	}
+
+	.InputNumber-stepper:first-child {
+		border-right: 1px solid var(--base-200);
+	}
+
+	.InputNumber-stepper:last-child {
+		border-radius: 0 6px 6px 0;
+	}
+
+	.InputNumber-stepper svg {
+		width: 12px;
+		height: 12px;
+	}
+
+	/* Size variants */
+	.xs {
+		height: 24px;
+	}
+	.xs .InputNumber-input {
+		padding: 0 8px;
+		font-size: 11px;
+	}
+	.xs .InputNumber-stepper {
+		width: 20px;
+	}
+	.xs .InputNumber-stepper svg {
+		width: 10px;
+		height: 10px;
+	}
+
+	.s {
+		height: 28px;
+	}
+	.s .InputNumber-input {
+		padding: 0 10px;
+		font-size: 12px;
+	}
+	.s .InputNumber-stepper {
+		width: 24px;
+	}
+
+	.m {
+		height: 32px;
+	}
+	.m .InputNumber-input {
+		padding: 0 12px;
+		font-size: 13px;
+	}
+	.m .InputNumber-stepper {
+		width: 28px;
+	}
+
+	.l {
+		height: 40px;
+	}
+	.l .InputNumber-input {
+		padding: 0 16px;
+		font-size: 14px;
+	}
+	.l .InputNumber-stepper {
+		width: 34px;
+	}
+	.l .InputNumber-stepper svg {
+		width: 14px;
+		height: 14px;
+	}
+</style>

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

@@ -0,0 +1,26 @@
+/**
+ * A number input field with custom stepper buttons and size variants.
+ */
+interface Props {
+    /** Input value */
+    value?: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Callback when value changes */
+    onchange?: (value: number) => void;
+    /** Callback on input */
+    oninput?: (value: number) => void;
+    /** Size variant */
+    size?: 'xs' | 's' | 'm' | 'l';
+    /** Disable the input */
+    disabled?: boolean;
+}
+declare const InputNumber: import("svelte").Component<Props, {}, "">;
+type InputNumber = ReturnType<typeof InputNumber>;
+export default InputNumber;

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

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

package/dist/ui/InputNumber/index.js

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