sdocs 0.0.3 → 0.0.4

package/dist/ui/InputText/index.js

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

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

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

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

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

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

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

package/dist/ui/Panel/index.js

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

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

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

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

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

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

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

package/dist/ui/Placeholder/index.js

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

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

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

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

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

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

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