sdocs 0.0.1

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

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

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

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

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

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

package/dist/ui/Stack/index.js

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

package/dist/ui/Table/Body.svelte

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

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

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

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

package/dist/ui/Table/Cell.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * A table data cell. Use inside Row.
+	 */
+	interface Props {
+		/** Cell content */
+		children: Snippet;
+		/** Number of columns to span */
+		colspan?: number;
+		/** Text alignment */
+		align?: 'left' | 'center' | 'right';
+	}
+
+	let { children, colspan, align }: Props = $props();
+</script>
+
+<td
+	{colspan}
+	style:text-align={align}
+>
+	{@render children()}
+</td>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+/**
+ * A table data cell. Use inside Row.
+ */
+interface Props {
+    /** Cell content */
+    children: Snippet;
+    /** Number of columns to span */
+    colspan?: number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+}
+declare const Cell: import("svelte").Component<Props, {}, "">;
+type Cell = ReturnType<typeof Cell>;
+export default Cell;

package/dist/ui/Table/Foot.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Table footer section. Used for summary rows (totals, counts).
+	 */
+	interface Props {
+		/** Footer rows */
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
+<tfoot>
+	{@render children()}
+</tfoot>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+/**
+ * Table footer section. Used for summary rows (totals, counts).
+ */
+interface Props {
+    /** Footer rows */
+    children: Snippet;
+}
+declare const Foot: import("svelte").Component<Props, {}, "">;
+type Foot = ReturnType<typeof Foot>;
+export default Foot;

package/dist/ui/Table/Head.svelte

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

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

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

package/dist/ui/Table/Header.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * A table header cell. Use inside Row.
+	 */
+	interface Props {
+		/** Cell content */
+		children: Snippet;
+		/** Number of columns to span */
+		colspan?: number;
+		/** Text alignment */
+		align?: 'left' | 'center' | 'right';
+		/** Column width (e.g. '20%', '200px') */
+		width?: string;
+	}
+
+	let { children, colspan, align, width }: Props = $props();
+</script>
+
+<th
+	{colspan}
+	style:text-align={align}
+	style:width={width}
+>
+	{@render children()}
+</th>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+/**
+ * A table header cell. Use inside Row.
+ */
+interface Props {
+    /** Cell content */
+    children: Snippet;
+    /** Number of columns to span */
+    colspan?: number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Column width (e.g. '20%', '200px') */
+    width?: string;
+}
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/ui/Table/Row.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * A table row. Use inside Head, Body, or Foot.
+	 */
+	interface Props {
+		/** Row cells */
+		children: Snippet;
+		/** Additional CSS class */
+		class?: string;
+	}
+
+	let { children, class: className = '' }: Props = $props();
+</script>
+
+<tr class={className || undefined}>
+	{@render children()}
+</tr>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+/**
+ * A table row. Use inside Head, Body, or Foot.
+ */
+interface Props {
+    /** Row cells */
+    children: Snippet;
+    /** Additional CSS class */
+    class?: string;
+}
+declare const Row: import("svelte").Component<Props, {}, "">;
+type Row = ReturnType<typeof Row>;
+export default Row;

package/dist/ui/Table/Table.docs.svelte

@@ -0,0 +1,197 @@
+<script lang="ts" module>
+	import { Table } from './index.js';
+	import type { DocMeta } from '../../types.js';
+
+	export const meta: DocMeta = {
+		title: 'Layout / Table',
+		component: Table
+	};
+
+	export { Default, Striped, Compact, WithCaption, WithFooter, SectionHeaders };
+</script>
+
+{#snippet Default(args: any)}
+	<Table {...args}>
+		<Table.Head>
+			<Table.Row>
+				<Table.Header>Name</Table.Header>
+				<Table.Header>Type</Table.Header>
+				<Table.Header>Description</Table.Header>
+			</Table.Row>
+		</Table.Head>
+		<Table.Body>
+			<Table.Row>
+				<Table.Cell>label</Table.Cell>
+				<Table.Cell>string</Table.Cell>
+				<Table.Cell>Button text</Table.Cell>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>disabled</Table.Cell>
+				<Table.Cell>boolean</Table.Cell>
+				<Table.Cell>Disable the button</Table.Cell>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>size</Table.Cell>
+				<Table.Cell>'s' | 'm' | 'l'</Table.Cell>
+				<Table.Cell>Size variant</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table>
+{/snippet}
+
+{#snippet Striped()}
+	<Table striped>
+		<Table.Head>
+			<Table.Row>
+				<Table.Header>Name</Table.Header>
+				<Table.Header>Role</Table.Header>
+				<Table.Header>Status</Table.Header>
+			</Table.Row>
+		</Table.Head>
+		<Table.Body>
+			<Table.Row>
+				<Table.Cell>Alice</Table.Cell>
+				<Table.Cell>Admin</Table.Cell>
+				<Table.Cell>Active</Table.Cell>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>Bob</Table.Cell>
+				<Table.Cell>Editor</Table.Cell>
+				<Table.Cell>Active</Table.Cell>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>Carol</Table.Cell>
+				<Table.Cell>Viewer</Table.Cell>
+				<Table.Cell>Inactive</Table.Cell>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>Dave</Table.Cell>
+				<Table.Cell>Editor</Table.Cell>
+				<Table.Cell>Active</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table>
+{/snippet}
+
+{#snippet Compact()}
+	<Table compact>
+		<Table.Head>
+			<Table.Row>
+				<Table.Header>Property</Table.Header>
+				<Table.Header>Value</Table.Header>
+			</Table.Row>
+		</Table.Head>
+		<Table.Body>
+			<Table.Row>
+				<Table.Cell>font-size</Table.Cell>
+				<Table.Cell>14px</Table.Cell>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>line-height</Table.Cell>
+				<Table.Cell>1.5</Table.Cell>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>font-weight</Table.Cell>
+				<Table.Cell>400</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table>
+{/snippet}
+
+{#snippet WithCaption()}
+	<Table>
+		<Table.Caption>Team members and their roles</Table.Caption>
+		<Table.Head>
+			<Table.Row>
+				<Table.Header>Name</Table.Header>
+				<Table.Header>Role</Table.Header>
+				<Table.Header align="right">Hours</Table.Header>
+			</Table.Row>
+		</Table.Head>
+		<Table.Body>
+			<Table.Row>
+				<Table.Cell>Alice</Table.Cell>
+				<Table.Cell>Lead</Table.Cell>
+				<Table.Cell align="right">40</Table.Cell>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>Bob</Table.Cell>
+				<Table.Cell>Developer</Table.Cell>
+				<Table.Cell align="right">32</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table>
+{/snippet}
+
+{#snippet WithFooter()}
+	<Table>
+		<Table.Head>
+			<Table.Row>
+				<Table.Header>Product</Table.Header>
+				<Table.Header align="right">Price</Table.Header>
+				<Table.Header align="right">Qty</Table.Header>
+				<Table.Header align="right">Total</Table.Header>
+			</Table.Row>
+		</Table.Head>
+		<Table.Body>
+			<Table.Row>
+				<Table.Cell>Widget A</Table.Cell>
+				<Table.Cell align="right">$10</Table.Cell>
+				<Table.Cell align="right">3</Table.Cell>
+				<Table.Cell align="right">$30</Table.Cell>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>Widget B</Table.Cell>
+				<Table.Cell align="right">$25</Table.Cell>
+				<Table.Cell align="right">2</Table.Cell>
+				<Table.Cell align="right">$50</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+		<Table.Foot>
+			<Table.Row>
+				<Table.Header colspan={3}>Total</Table.Header>
+				<Table.Cell align="right"><strong>$80</strong></Table.Cell>
+			</Table.Row>
+		</Table.Foot>
+	</Table>
+{/snippet}
+
+{#snippet SectionHeaders()}
+	<Table>
+		<Table.Head>
+			<Table.Row>
+				<Table.Header>Name</Table.Header>
+				<Table.Header>Type</Table.Header>
+				<Table.Header>Default</Table.Header>
+			</Table.Row>
+		</Table.Head>
+		<Table.Body>
+			<Table.Row>
+				<Table.Header colspan={3}>Appearance</Table.Header>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>size</Table.Cell>
+				<Table.Cell>'s' | 'm' | 'l'</Table.Cell>
+				<Table.Cell>'m'</Table.Cell>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>variant</Table.Cell>
+				<Table.Cell>'solid' | 'outline'</Table.Cell>
+				<Table.Cell>'solid'</Table.Cell>
+			</Table.Row>
+			<Table.Row>
+				<Table.Header colspan={3}>Behavior</Table.Header>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>disabled</Table.Cell>
+				<Table.Cell>boolean</Table.Cell>
+				<Table.Cell>false</Table.Cell>
+			</Table.Row>
+			<Table.Row>
+				<Table.Cell>loading</Table.Cell>
+				<Table.Cell>boolean</Table.Cell>
+				<Table.Cell>false</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table>
+{/snippet}

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

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