sdocs 0.0.1

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

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

package/dist/ui/Radio/Radio.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	/**
+	 * A native radio input with customizable styling. Use the name prop to group radios together.
+	 */
+	interface Props {
+		/** Whether this radio is selected */
+		checked?: boolean;
+		/** The value of this radio */
+		value: string;
+		/** Label text */
+		label?: string;
+		/** Group name (for native radio behavior) */
+		name?: string;
+		/** Size variant */
+		size?: 'xs' | 's' | 'm' | 'l';
+		/** Disable the radio */
+		disabled?: boolean;
+		/** Callback when selected */
+		onchange?: (value: string) => void;
+	}
+
+	let {
+		checked = false,
+		value,
+		label,
+		name,
+		size = 'm',
+		disabled = false,
+		onchange
+	}: Props = $props();
+
+	function handleChange() {
+		onchange?.(value);
+	}
+
+	// Make checked reactive
+	let isChecked = $derived(checked);
+
+	// Size-based dimensions
+	const sizes = {
+		xs: { box: 14, dot: 6, gap: 6 },
+		s: { box: 16, dot: 7, gap: 8 },
+		m: { box: 18, dot: 8, gap: 8 },
+		l: { box: 22, dot: 10, gap: 10 }
+	};
+
+	let sizeConfig = $derived(sizes[size]);
+</script>
+
+<label
+	class="Radio {size}"
+	class:disabled
+	style="--box-size: {sizeConfig.box}px; --dot-size: {sizeConfig.dot}px; --gap: {sizeConfig.gap}px;"
+>
+	<input
+		type="radio"
+		{name}
+		{value}
+		{disabled}
+		checked={isChecked}
+		onchange={handleChange}
+		class="Radio-input"
+	/>
+	<span class="Radio-box">
+		<span class="Radio-dot"></span>
+	</span>
+	{#if label}
+		<span class="Radio-label">{label}</span>
+	{/if}
+</label>
+
+<style>
+	.Radio {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--gap);
+		cursor: pointer;
+		font-family: var(--font-sans);
+		color: var(--color-text);
+		transition: opacity 0.15s ease;
+	}
+
+	.Radio.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.Radio-input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+		pointer-events: none;
+	}
+
+	.Radio-box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--box-size);
+		height: var(--box-size);
+		border-radius: 50%;
+		border: 1.5px solid var(--base-300);
+		background: var(--base-0);
+		transition: all 0.15s ease;
+		flex-shrink: 0;
+	}
+
+	.Radio:not(.disabled):hover .Radio-box {
+		border-color: var(--base-400);
+		background: var(--base-50);
+	}
+
+	.Radio-input:focus-visible + .Radio-box {
+		box-shadow: 0 0 0 2px var(--action-200);
+	}
+
+	.Radio-input:checked + .Radio-box {
+		border-color: var(--action-500);
+	}
+
+	.Radio:not(.disabled):hover .Radio-input:checked + .Radio-box {
+		border-color: var(--action-600);
+	}
+
+	.Radio-dot {
+		width: var(--dot-size);
+		height: var(--dot-size);
+		border-radius: 50%;
+		background: var(--action-500);
+		opacity: 0;
+		transform: scale(0);
+		transition: all 0.15s ease;
+	}
+
+	.Radio-input:checked + .Radio-box .Radio-dot {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	.Radio:not(.disabled):hover .Radio-input:checked + .Radio-box .Radio-dot {
+		background: var(--action-600);
+	}
+
+	.Radio-label {
+		user-select: none;
+	}
+
+	/* Size-specific label font sizes */
+	.xs .Radio-label {
+		font-size: 11px;
+	}
+
+	.s .Radio-label {
+		font-size: 12px;
+	}
+
+	.m .Radio-label {
+		font-size: 13px;
+	}
+
+	.l .Radio-label {
+		font-size: 14px;
+	}
+</style>

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

@@ -0,0 +1,22 @@
+/**
+ * A native radio input with customizable styling. Use the name prop to group radios together.
+ */
+interface Props {
+    /** Whether this radio is selected */
+    checked?: boolean;
+    /** The value of this radio */
+    value: string;
+    /** Label text */
+    label?: string;
+    /** Group name (for native radio behavior) */
+    name?: string;
+    /** Size variant */
+    size?: 'xs' | 's' | 'm' | 'l';
+    /** Disable the radio */
+    disabled?: boolean;
+    /** Callback when selected */
+    onchange?: (value: string) => void;
+}
+declare const Radio: import("svelte").Component<Props, {}, "">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

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

@@ -0,0 +1,70 @@
+<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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,98 @@
+<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

@@ -0,0 +1,27 @@
+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

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

package/dist/ui/Radio/index.js

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

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

@@ -0,0 +1,54 @@
+<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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,120 @@
+<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

@@ -0,0 +1,18 @@
+/**
+ * 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

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

package/dist/ui/SegmentControl/index.js

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