sdocs 0.0.3 → 0.0.4

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

@@ -1,70 +0,0 @@
-<script lang="ts" module>
-	import RadioGroup from './RadioGroup.svelte';
-	import type { DocMeta } from '../../types.js';
-
-	export const meta: DocMeta = {
-		title: 'RadioGroup',
-		component: RadioGroup,
-		args: {
-			options: ['Option A', 'Option B', 'Option C'],
-			value: 'Option A',
-			size: 'm',
-			direction: 'vertical',
-			disabled: false
-		}
-	};
-
-	export { Default, Sizes, Horizontal, Disabled, WithDisabledOption };
-</script>
-
-{#snippet Default(args: any)}
-	<RadioGroup {...args} />
-{/snippet}
-
-{#snippet Sizes()}
-	<div style="display: flex; gap: 48px;">
-		<div>
-			<p style="margin: 0 0 8px; font-size: 12px; color: var(--base-500);">Extra small</p>
-			<RadioGroup options={['Yes', 'No', 'Maybe']} value="Yes" size="xs" />
-		</div>
-		<div>
-			<p style="margin: 0 0 8px; font-size: 12px; color: var(--base-500);">Small</p>
-			<RadioGroup options={['Yes', 'No', 'Maybe']} value="Yes" size="s" />
-		</div>
-		<div>
-			<p style="margin: 0 0 8px; font-size: 12px; color: var(--base-500);">Medium</p>
-			<RadioGroup options={['Yes', 'No', 'Maybe']} value="Yes" size="m" />
-		</div>
-		<div>
-			<p style="margin: 0 0 8px; font-size: 12px; color: var(--base-500);">Large</p>
-			<RadioGroup options={['Yes', 'No', 'Maybe']} value="Yes" size="l" />
-		</div>
-	</div>
-{/snippet}
-
-{#snippet Horizontal()}
-	<RadioGroup
-		options={['Daily', 'Weekly', 'Monthly', 'Yearly']}
-		value="Weekly"
-		direction="horizontal"
-	/>
-{/snippet}
-
-{#snippet Disabled()}
-	<RadioGroup
-		options={['Option 1', 'Option 2', 'Option 3']}
-		value="Option 1"
-		disabled
-	/>
-{/snippet}
-
-{#snippet WithDisabledOption()}
-	<RadioGroup
-		options={[
-			{ value: 'free', label: 'Free Plan' },
-			{ value: 'pro', label: 'Pro Plan' },
-			{ value: 'enterprise', label: 'Enterprise (Coming Soon)', disabled: true }
-		]}
-		value="pro"
-	/>
-{/snippet}

package/dist/ui/Radio/RadioGroup.docs.svelte.d.ts

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

package/dist/ui/Radio/RadioGroup.svelte

@@ -1,98 +0,0 @@
-<script lang="ts">
-	import Radio from './Radio.svelte';
-
-	interface RadioOption {
-		value: string;
-		label: string;
-		disabled?: boolean;
-	}
-
-	/**
-	 * A managed group of radio buttons with built-in state handling and layout options.
-	 */
-	interface Props {
-		/** Array of options to display */
-		options: RadioOption[] | string[];
-		/** Currently selected value */
-		value?: string;
-		/** Group name */
-		name?: string;
-		/** Size variant */
-		size?: 'xs' | 's' | 'm' | 'l';
-		/** Disable all radios */
-		disabled?: boolean;
-		/** Layout direction */
-		direction?: 'horizontal' | 'vertical';
-		/** Callback when selection changes */
-		onchange?: (value: string) => void;
-	}
-
-	let {
-		options,
-		value = '',
-		name,
-		size = 'm',
-		disabled = false,
-		direction = 'vertical',
-		onchange
-	}: Props = $props();
-
-	let selectedValue = $state(value);
-
-	// Sync with external changes
-	$effect(() => {
-		selectedValue = value;
-	});
-
-	// Normalize options to RadioOption format
-	let normalizedOptions = $derived(
-		options.map((opt) =>
-			typeof opt === 'string' ? { value: opt, label: opt } : opt
-		)
-	);
-
-	function handleChange(newValue: string) {
-		selectedValue = newValue;
-		onchange?.(newValue);
-	}
-
-	// Gap based on size
-	const gaps = {
-		xs: '8px',
-		s: '10px',
-		m: '12px',
-		l: '14px'
-	};
-</script>
-
-<div
-	class="RadioGroup"
-	class:horizontal={direction === 'horizontal'}
-	role="radiogroup"
-	style="--gap: {gaps[size]};"
->
-	{#each normalizedOptions as option (option.value)}
-		<Radio
-			value={option.value}
-			label={option.label}
-			{name}
-			{size}
-			checked={selectedValue === option.value}
-			disabled={disabled || option.disabled}
-			onchange={handleChange}
-		/>
-	{/each}
-</div>
-
-<style>
-	.RadioGroup {
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap);
-	}
-
-	.RadioGroup.horizontal {
-		flex-direction: row;
-		flex-wrap: wrap;
-	}
-</style>

package/dist/ui/Radio/RadioGroup.svelte.d.ts

@@ -1,27 +0,0 @@
-interface RadioOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-/**
- * A managed group of radio buttons with built-in state handling and layout options.
- */
-interface Props {
-    /** Array of options to display */
-    options: RadioOption[] | string[];
-    /** Currently selected value */
-    value?: string;
-    /** Group name */
-    name?: string;
-    /** Size variant */
-    size?: 'xs' | 's' | 'm' | 'l';
-    /** Disable all radios */
-    disabled?: boolean;
-    /** Layout direction */
-    direction?: 'horizontal' | 'vertical';
-    /** Callback when selection changes */
-    onchange?: (value: string) => void;
-}
-declare const RadioGroup: import("svelte").Component<Props, {}, "">;
-type RadioGroup = ReturnType<typeof RadioGroup>;
-export default RadioGroup;

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

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

package/dist/ui/Radio/index.js

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

package/dist/ui/SegmentControl/SegmentControl.docs.svelte

@@ -1,54 +0,0 @@
-<script lang="ts" module>
-	import SegmentControl from './SegmentControl.svelte';
-	import type { DocMeta } from '../../types.js';
-
-	export const meta: DocMeta = {
-		title: 'SegmentControl',
-		component: SegmentControl,
-		args: {
-			options: ['Option 1', 'Option 2', 'Option 3'],
-			value: 'Option 1',
-			size: 'm',
-			disabled: false
-		}
-	};
-
-	export { Default, Sizes, Disabled };
-</script>
-
-{#snippet Default(args: any)}
-	<SegmentControl {...args} />
-{/snippet}
-
-{#snippet Sizes()}
-	<div style="display: flex; flex-direction: column; gap: 16px;">
-		<SegmentControl
-			options={['XS', 'S', 'M', 'L']}
-			value="XS"
-			size="xs"
-		/>
-		<SegmentControl
-			options={['XS', 'S', 'M', 'L']}
-			value="S"
-			size="s"
-		/>
-		<SegmentControl
-			options={['XS', 'S', 'M', 'L']}
-			value="M"
-			size="m"
-		/>
-		<SegmentControl
-			options={['XS', 'S', 'M', 'L']}
-			value="L"
-			size="l"
-		/>
-	</div>
-{/snippet}
-
-{#snippet Disabled()}
-	<SegmentControl
-		options={['One', 'Two', 'Three']}
-		value="Two"
-		disabled
-	/>
-{/snippet}

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

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

package/dist/ui/SegmentControl/SegmentControl.svelte

@@ -1,120 +0,0 @@
-<script lang="ts">
-	/**
-	 * A segmented toggle control for selecting one option from a set of choices.
-	 */
-	interface Props {
-		/** Available options */
-		options: string[];
-		/** Initially selected value */
-		value?: string;
-		/** Callback when selection changes */
-		onchange?: (value: string) => void;
-		/** Size variant */
-		size?: 'xs' | 's' | 'm' | 'l';
-		/** Disable the control */
-		disabled?: boolean;
-	}
-
-	let { options, value, onchange, size = 'm', disabled = false }: Props = $props();
-
-	// Internal state, initialized from prop
-	let selected = $state(value ?? options[0]);
-
-	function select(option: string) {
-		if (disabled || option === selected) return;
-		selected = option;
-		onchange?.(option);
-	}
-
-	function handleKeydown(event: KeyboardEvent, option: string) {
-		if (event.key === 'Enter' || event.key === ' ') {
-			event.preventDefault();
-			select(option);
-		}
-	}
-</script>
-
-<div class="SegmentControl {size}" class:disabled role="radiogroup">
-	{#each options as option (option)}
-		<button
-			type="button"
-			class="SegmentControl-option"
-			class:selected={selected === option}
-			role="radio"
-			aria-checked={selected === option}
-			{disabled}
-			onclick={() => select(option)}
-			onkeydown={(e) => handleKeydown(e, option)}
-		>
-			{option}
-		</button>
-	{/each}
-</div>
-
-<style>
-	.SegmentControl {
-		display: inline-flex;
-		background: var(--base-100);
-		border-radius: 8px;
-		padding: 3px;
-		gap: 2px;
-	}
-
-	.SegmentControl.disabled {
-		opacity: 0.5;
-		pointer-events: none;
-	}
-
-	.SegmentControl-option {
-		font-family: var(--font-sans);
-		font-weight: 500;
-		border: none;
-		background: transparent;
-		color: var(--color-text-secondary);
-		cursor: pointer;
-		border-radius: 6px;
-		transition: all 0.15s ease;
-		white-space: nowrap;
-	}
-
-	.SegmentControl-option:hover:not(.selected):not(:disabled) {
-		color: var(--color-text);
-		background: var(--base-50);
-	}
-
-	.SegmentControl-option.selected {
-		background: white;
-		color: var(--color-text);
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-	}
-
-	.SegmentControl-option:focus-visible {
-		outline: 2px solid var(--action-500);
-		outline-offset: 1px;
-	}
-
-	/* Size variants - heights: xs=24px, s=28px, m=32px, l=40px (minus 6px container padding) */
-	.xs .SegmentControl-option {
-		height: 18px;
-		padding: 0 8px;
-		font-size: 11px;
-	}
-
-	.s .SegmentControl-option {
-		height: 22px;
-		padding: 0 10px;
-		font-size: 12px;
-	}
-
-	.m .SegmentControl-option {
-		height: 26px;
-		padding: 0 12px;
-		font-size: 13px;
-	}
-
-	.l .SegmentControl-option {
-		height: 34px;
-		padding: 0 16px;
-		font-size: 14px;
-	}
-</style>

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

@@ -1,18 +0,0 @@
-/**
- * A segmented toggle control for selecting one option from a set of choices.
- */
-interface Props {
-    /** Available options */
-    options: string[];
-    /** Initially selected value */
-    value?: string;
-    /** Callback when selection changes */
-    onchange?: (value: string) => void;
-    /** Size variant */
-    size?: 'xs' | 's' | 'm' | 'l';
-    /** Disable the control */
-    disabled?: boolean;
-}
-declare const SegmentControl: import("svelte").Component<Props, {}, "">;
-type SegmentControl = ReturnType<typeof SegmentControl>;
-export default SegmentControl;

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

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

package/dist/ui/SegmentControl/index.js

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

package/dist/ui/Stack/Stack.docs.svelte

@@ -1,63 +0,0 @@
-<script lang="ts" module>
-	import Stack from './Stack.svelte';
-	import { Placeholder } from '../Placeholder/index.js';
-	import type { DocMeta } from '../../types.js';
-
-	export const meta: DocMeta = {
-		title: 'Layout/Stack',
-		component: Stack,
-		args: {
-			direction: 'column',
-			gap: '8px',
-			padding: '0',
-			bg: ''
-		}
-	};
-
-	export { Default, Row, Reversed, WithBackground };
-</script>
-
-{#snippet Default(args: any)}
-	<Stack {...args}>
-		<Placeholder text="1" width="80px" height="40px" />
-		<Placeholder text="2" width="80px" height="40px" />
-		<Placeholder text="3" width="80px" height="40px" />
-	</Stack>
-{/snippet}
-
-{#snippet Row()}
-	<Stack direction="row" gap="12px">
-		<Placeholder text="Left" width="100px" height="60px" color="blue" />
-		<Placeholder text="Center" width="100px" height="60px" color="green" />
-		<Placeholder text="Right" width="100px" height="60px" color="pink" />
-	</Stack>
-{/snippet}
-
-{#snippet Reversed()}
-	<div style="display: flex; gap: 32px;">
-		<div>
-			<p style="margin: 0 0 8px; font-size: 12px; color: var(--base-500);">Column reversed</p>
-			<Stack direction="column-reverse" gap="8px">
-				<Placeholder text="1" width="80px" height="40px" />
-				<Placeholder text="2" width="80px" height="40px" />
-				<Placeholder text="3" width="80px" height="40px" />
-			</Stack>
-		</div>
-		<div>
-			<p style="margin: 0 0 8px; font-size: 12px; color: var(--base-500);">Row reversed</p>
-			<Stack direction="row-reverse" gap="8px">
-				<Placeholder text="1" width="80px" height="40px" />
-				<Placeholder text="2" width="80px" height="40px" />
-				<Placeholder text="3" width="80px" height="40px" />
-			</Stack>
-		</div>
-	</div>
-{/snippet}
-
-{#snippet WithBackground()}
-	<Stack direction="column" gap="12px" padding="16px" bg="var(--base-100)">
-		<Placeholder text="Item 1" height="50px" color="blue" />
-		<Placeholder text="Item 2" height="50px" color="green" />
-		<Placeholder text="Item 3" height="50px" color="pink" />
-	</Stack>
-{/snippet}

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

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

package/dist/ui/Stack/Stack.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	/**
-	 * A flexible Stack layout component for arranging elements vertically or horizontally.
-	 */
-	interface Props {
-		/** Stack direction (CSS flex-direction) */
-		direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-		/** Gap between items (any CSS dimension) */
-		gap?: string;
-		/** Padding (any CSS dimension) */
-		padding?: string;
-		/** Background color (any CSS color) */
-		bg?: string;
-		/** Children content */
-		children?: Snippet;
-	}
-
-	let {
-		direction = 'column',
-		gap = '0',
-		padding = '0',
-		bg,
-		children
-	}: Props = $props();
-</script>
-
-<div
-	class="Stack"
-	style:flex-direction={direction}
-	style:gap
-	style:padding
-	style:background={bg}
->
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
-
-<style>
-	.Stack {
-		display: flex;
-	}
-</style>

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

@@ -1,19 +0,0 @@
-import type { Snippet } from 'svelte';
-/**
- * A flexible Stack layout component for arranging elements vertically or horizontally.
- */
-interface Props {
-    /** Stack direction (CSS flex-direction) */
-    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-    /** Gap between items (any CSS dimension) */
-    gap?: string;
-    /** Padding (any CSS dimension) */
-    padding?: string;
-    /** Background color (any CSS color) */
-    bg?: string;
-    /** Children content */
-    children?: Snippet;
-}
-declare const Stack: import("svelte").Component<Props, {}, "">;
-type Stack = ReturnType<typeof Stack>;
-export default Stack;

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

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

package/dist/ui/Stack/index.js

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

package/dist/ui/Table/Body.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	/**
-	 * Table body section. Contains data rows.
-	 */
-	interface Props {
-		/** Data rows */
-		children: Snippet;
-	}
-
-	let { children }: Props = $props();
-</script>
-
-<tbody>
-	{@render children()}
-</tbody>

package/dist/ui/Table/Body.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-/**
- * Table body section. Contains data rows.
- */
-interface Props {
-    /** Data rows */
-    children: Snippet;
-}
-declare const Body: import("svelte").Component<Props, {}, "">;
-type Body = ReturnType<typeof Body>;
-export default Body;

package/dist/ui/Table/Caption.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	/**
-	 * An accessible table caption. Announced by screen readers when navigating to the table.
-	 */
-	interface Props {
-		/** Caption content */
-		children: Snippet;
-	}
-
-	let { children }: Props = $props();
-</script>
-
-<caption>
-	{@render children()}
-</caption>

package/dist/ui/Table/Caption.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-/**
- * An accessible table caption. Announced by screen readers when navigating to the table.
- */
-interface Props {
-    /** Caption content */
-    children: Snippet;
-}
-declare const Caption: import("svelte").Component<Props, {}, "">;
-type Caption = ReturnType<typeof Caption>;
-export default Caption;