sdocs 0.0.14 → 0.0.16

package/dist/ui/NavTree/Item.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Icon } from '../Icon/index.js';
+
+	/**
+	 * @cssvar {shorthand} --p - Padding
+	 * @cssvar {shorthand} --m - Margin
+	 * @cssvar {length} --r - Border radius
+	 * @cssvar {shorthand} --b - Border
+	 * @cssvar {color} --bg - Background color
+	 * @cssvar {color} --bg-active - Background when active
+	 * @cssvar {color} --bg-active-hover - Background when active and hovered
+	 * @cssvar {color} --bg-hover - Background on hover
+	 * @cssvar {color} --expander-color - Expander icon color
+	 * @cssvar {color} --expander-color-active - Expander icon color when active
+	 * @cssvar {color} --expander-color-hover - Expander icon color on hover
+	 * @cssvar {length} --expander-size - Expander icon size
+	 * @cssvar {color} --font-color - Text color
+	 * @cssvar {color} --font-color-active - Text color when active
+	 * @cssvar {color} --font-color-hover - Text color on hover
+	 * @cssvar {string} --font-weight - Font weight
+	 */
+	interface Props {
+		label: string;
+		href?: string;
+		active?: boolean;
+		left?: Snippet;
+		right?: Snippet;
+		expanded?: boolean;
+		children?: Snippet;
+		class?: string;
+		onclick?: () => void;
+	}
+
+	let {
+		label,
+		href,
+		active = false,
+		left,
+		right,
+		expanded = $bindable(false),
+		children,
+		class: className = '',
+		onclick,
+	}: Props = $props();
+
+	const isFolder = $derived(!!children);
+
+	function toggle() {
+		expanded = !expanded;
+	}
+</script>
+
+{#snippet content()}
+	{#if left}<span class="NavTree-left">{@render left()}</span>{/if}
+	<span class="NavTree-item-label">{label}</span>
+	{#if right}<span class="NavTree-right">{@render right()}</span>{/if}
+	<span class="NavTree-chevron" class:visible={isFolder}>
+		<Icon name={expanded ? 'chevron-down' : 'chevron-right'} --w="var(--expander-size, 14px)" --h="var(--expander-size, 14px)" --fill="var(--expander-color, var(--color-base-300))" />
+	</span>
+{/snippet}
+
+{#if isFolder}
+	<div class="NavTree-item-wrapper {className}">
+		<button class="NavTree-item" class:active onclick={onclick ?? toggle}>
+			{@render content()}
+		</button>
+		{#if expanded}
+			<div class="NavTree-children">
+				{@render children()}
+			</div>
+		{/if}
+	</div>
+{:else if href}
+	<a {href} class="NavTree-item {className}" class:active {onclick}>
+		{@render content()}
+	</a>
+{:else}
+	<button class="NavTree-item {className}" class:active {onclick}>
+		{@render content()}
+	</button>
+{/if}
+
+<style>
+	.NavTree-item {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		width: 100%;
+		height: 28px;
+		padding: var(--p, 0 12px);
+		margin: var(--m, 0);
+		border-radius: var(--r, 0);
+		border: var(--b, none);
+		font: inherit;
+		color: var(--font-color, inherit);
+		font-weight: var(--font-weight, inherit);
+		background: var(--bg, none);
+		text-decoration: none;
+		cursor: pointer;
+		text-align: left;
+		box-sizing: border-box;
+	}
+
+	.NavTree-item:hover {
+		background: var(--bg-hover, var(--color-base-150));
+		color: var(--font-color-hover, inherit);
+		--expander-color: var(--expander-color-hover, var(--color-base-400));
+	}
+
+	.NavTree-item.active {
+		background: var(--bg-active, var(--color-base-100));
+		color: var(--font-color-active, inherit);
+		font-weight: 500;
+		--expander-color: var(--expander-color-active, var(--color-base-400));
+	}
+
+	.NavTree-item.active:hover {
+		background: var(--bg-active-hover, var(--color-base-150));
+		--expander-color: var(--expander-color-hover, var(--color-base-500));
+	}
+
+	.NavTree-item-label {
+		flex: 1;
+	}
+
+	.NavTree-left {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	.NavTree-right {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	.NavTree-chevron {
+		display: inline-flex;
+		align-items: center;
+		width: var(--expander-size, 14px);
+		color: var(--expander-color, var(--color-base-300));
+		flex-shrink: 0;
+		visibility: hidden;
+	}
+
+	.NavTree-chevron.visible {
+		visibility: visible;
+	}
+
+	.NavTree-item-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+
+	.NavTree-children {
+		padding-left: 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+</style>

package/dist/ui/NavTree/Item.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+/**
+ * @cssvar {shorthand} --p - Padding
+ * @cssvar {shorthand} --m - Margin
+ * @cssvar {length} --r - Border radius
+ * @cssvar {shorthand} --b - Border
+ * @cssvar {color} --bg - Background color
+ * @cssvar {color} --bg-active - Background when active
+ * @cssvar {color} --bg-active-hover - Background when active and hovered
+ * @cssvar {color} --bg-hover - Background on hover
+ * @cssvar {color} --expander-color - Expander icon color
+ * @cssvar {color} --expander-color-active - Expander icon color when active
+ * @cssvar {color} --expander-color-hover - Expander icon color on hover
+ * @cssvar {length} --expander-size - Expander icon size
+ * @cssvar {color} --font-color - Text color
+ * @cssvar {color} --font-color-active - Text color when active
+ * @cssvar {color} --font-color-hover - Text color on hover
+ * @cssvar {string} --font-weight - Font weight
+ */
+interface Props {
+    label: string;
+    href?: string;
+    active?: boolean;
+    left?: Snippet;
+    right?: Snippet;
+    expanded?: boolean;
+    children?: Snippet;
+    class?: string;
+    onclick?: () => void;
+}
+declare const Item: import("svelte").Component<Props, {}, "expanded">;
+type Item = ReturnType<typeof Item>;
+export default Item;

package/dist/ui/NavTree/NavTree.sdoc

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import NavTree from './index.js';
+	import NavTreeRoot from './NavTree.svelte';
+	import { Icon } from '../Icon/index.js';
+
+	export const meta = {
+		component: NavTreeRoot,
+		title: 'NavTree',
+		description: 'A composable tree navigation with Item and Group subcomponents.',
+	};
+</script>
+
+{#snippet Default()}
+	<NavTree>
+		<NavTree.Group label="Components">
+			<NavTree.Item label="UI" expanded>
+				{#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
+				<NavTree.Item label="Button" expanded --font-weight="500">
+					{#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
+					<NavTree.Item label="Docs" href="#/ui/button/docs" --font-weight="400">
+						{#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
+					</NavTree.Item>
+					<NavTree.Item label="Primary" href="#/ui/button/primary" active --font-weight="400">
+						{#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
+					</NavTree.Item>
+					<NavTree.Item label="Outlined" href="#/ui/button/outlined" --font-weight="400">
+						{#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
+					</NavTree.Item>
+				</NavTree.Item>
+				<NavTree.Item label="Icon" --font-weight="500">
+					{#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
+					<NavTree.Item label="Docs" href="#/ui/icon/docs" --font-weight="400">
+						{#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
+					</NavTree.Item>
+					<NavTree.Item label="Sizes" href="#/ui/icon/sizes" --font-weight="400">
+						{#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
+					</NavTree.Item>
+				</NavTree.Item>
+				<NavTree.Item label="Frame" --font-weight="500">
+					{#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
+					<NavTree.Item label="Docs" href="#/ui/frame/docs" --font-weight="400">
+						{#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
+					</NavTree.Item>
+				</NavTree.Item>
+			</NavTree.Item>
+			<NavTree.Item label="Card" expanded --font-weight="500">
+				{#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
+				<NavTree.Item label="Docs" href="#/card/docs" --font-weight="400">
+					{#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
+				</NavTree.Item>
+				<NavTree.Item label="WithImage" href="#/card/with-image" --font-weight="400">
+					{#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
+				</NavTree.Item>
+			</NavTree.Item>
+			<NavTree.Item label="Badge" --font-weight="500">
+				{#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
+				<NavTree.Item label="Docs" href="#/badge/docs" --font-weight="400">
+					{#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
+				</NavTree.Item>
+				<NavTree.Item label="Status" href="#/badge/status" --font-weight="400">
+					{#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
+				</NavTree.Item>
+			</NavTree.Item>
+		</NavTree.Group>
+		<NavTree.Group label="Pages">
+			<NavTree.Item label="Getting Started" href="#/pages/getting-started" --font-weight="500">
+				{#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
+			</NavTree.Item>
+			<NavTree.Item label="Changelog" href="#/pages/changelog" --font-weight="500">
+				{#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
+			</NavTree.Item>
+		</NavTree.Group>
+		<NavTree.Group label="Layouts">
+			<NavTree.Item label="LoginForm" href="#/layouts/login-form" --font-weight="500">
+				{#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
+			</NavTree.Item>
+			<NavTree.Item label="Dashboard" href="#/layouts/dashboard" --font-weight="500">
+				{#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
+			</NavTree.Item>
+		</NavTree.Group>
+	</NavTree>
+{/snippet}
+
+{#snippet WithSlots()}
+	<NavTree>
+		<NavTree.Group label="Files">
+			<NavTree.Item label="index.ts" href="#/index">
+				{#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
+				{#snippet right()}<span style="font-size: 11px; color: #9ca3af;">2.4kb</span>{/snippet}
+			</NavTree.Item>
+			<NavTree.Item label="utils.ts" href="#/utils">
+				{#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
+				{#snippet right()}<span style="font-size: 11px; color: tomato;">54kb</span>{/snippet}
+			</NavTree.Item>
+			<NavTree.Item label="config.ts" href="#/config">
+				{#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
+				{#snippet right()}<span style="font-size: 11px; color: #9ca3af;">1.1kb</span>{/snippet}
+			</NavTree.Item>
+		</NavTree.Group>
+	</NavTree>
+{/snippet}
+
+{#snippet NestedFolders()}
+	<NavTree>
+		<NavTree.Item label="src" expanded>
+			<NavTree.Item label="lib" expanded>
+				<NavTree.Item label="ui">
+					<NavTree.Item label="Frame.svelte" />
+					<NavTree.Item label="index.ts" />
+				</NavTree.Item>
+				<NavTree.Item label="server">
+					<NavTree.Item label="config.ts" />
+					<NavTree.Item label="cli.ts" />
+				</NavTree.Item>
+			</NavTree.Item>
+			<NavTree.Item label="app.ts" />
+		</NavTree.Item>
+	</NavTree>
+{/snippet}

package/dist/ui/NavTree/NavTree.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children?: Snippet;
+		class?: string;
+	}
+
+	let { children, class: className = '' }: Props = $props();
+</script>
+
+<nav class="NavTree {className}">
+	{#if children}
+		{@render children()}
+	{/if}
+</nav>
+
+<style>
+	.NavTree {
+		font-size: 13px;
+		line-height: 1.4;
+		color: var(--font-color, #111827);
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		padding: var(--p, 0);
+		margin: var(--m, 0);
+		border-radius: var(--r, 0);
+		border: var(--b, none);
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+    class?: string;
+}
+declare const NavTree: import("svelte").Component<Props, {}, "">;
+type NavTree = ReturnType<typeof NavTree>;
+export default NavTree;

package/dist/ui/NavTree/index.js

@@ -0,0 +1,6 @@
+import Root from './NavTree.svelte';
+import Item from './Item.svelte';
+import Group from './Group.svelte';
+const NavTree = Object.assign(Root, { Item, Group });
+export { NavTree, Item, Group };
+export default NavTree;

package/dist/ui/Stack/Stack.sdoc

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import Stack from './Stack.svelte';
+	import { Button } from '../Button/index.js';
+
+	export const meta = {
+		component: Stack,
+		title: 'Stack',
+		description: 'A flex container with configurable direction, gap, alignment, and styling.',
+	};
+</script>
+
+{#snippet Column()}
+	<Stack --gap="8px">
+		<Button>One</Button>
+		<Button>Two</Button>
+		<Button>Three</Button>
+	</Stack>
+{/snippet}
+
+{#snippet Row()}
+	<Stack --direction="row" --gap="8px">
+		<Button>One</Button>
+		<Button>Two</Button>
+		<Button>Three</Button>
+	</Stack>
+{/snippet}
+
+{#snippet Centered()}
+	<Stack --direction="row" --gap="12px" --align="center" --justify="center" --p="16px" --bg="var(--color-base-50)" --r="8px">
+		<Button>Left</Button>
+		<Button>Center</Button>
+		<Button>Right</Button>
+	</Stack>
+{/snippet}
+
+{#snippet Wrap()}
+	<Stack --direction="row" --gap="8px" --wrap="wrap" style="max-width: 200px;">
+		<Button>A</Button>
+		<Button>B</Button>
+		<Button>C</Button>
+		<Button>D</Button>
+		<Button>E</Button>
+	</Stack>
+{/snippet}

package/dist/ui/Stack/Stack.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * @cssvar {string} --direction - Flex direction (row | column)
+	 * @cssvar {length} --gap - Gap between items
+	 * @cssvar {string} --align - Align items
+	 * @cssvar {string} --justify - Justify content
+	 * @cssvar {string} --wrap - Flex wrap
+	 * @cssvar {shorthand} --p - Padding
+	 * @cssvar {color} --bg - Background color
+	 * @cssvar {length} --r - Border radius
+	 * @cssvar {shorthand} --b - Border
+	 */
+	interface Props {
+		children: Snippet;
+		class?: string;
+	}
+
+	let { children, class: className = '' }: Props = $props();
+</script>
+
+<div class="Stack {className}">
+	{@render children()}
+</div>
+
+<style>
+	.Stack {
+		display: flex;
+		flex-direction: var(--direction, column);
+		gap: var(--gap, 0px);
+		align-items: var(--align, stretch);
+		justify-content: var(--justify, flex-start);
+		flex-wrap: var(--wrap, nowrap);
+		padding: var(--p, 0);
+		background: var(--bg, transparent);
+		border-radius: var(--r, 0);
+		border: var(--b, none);
+		box-sizing: border-box;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+/**
+ * @cssvar {string} --direction - Flex direction (row | column)
+ * @cssvar {length} --gap - Gap between items
+ * @cssvar {string} --align - Align items
+ * @cssvar {string} --justify - Justify content
+ * @cssvar {string} --wrap - Flex wrap
+ * @cssvar {shorthand} --p - Padding
+ * @cssvar {color} --bg - Background color
+ * @cssvar {length} --r - Border radius
+ * @cssvar {shorthand} --b - Border
+ */
+interface Props {
+    children: Snippet;
+    class?: string;
+}
+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/index.d.ts

@@ -0,0 +1,6 @@
+export { Button } from './Button/index.js';
+export { Frame } from './Frame/index.js';
+export { Icon } from './Icon/index.js';
+export * as Control from './Control/index.js';
+export { NavTree } from './NavTree/index.js';
+export { Stack } from './Stack/index.js';

package/dist/ui/index.js

@@ -0,0 +1,6 @@
+export { Button } from './Button/index.js';
+export { Frame } from './Frame/index.js';
+export { Icon } from './Icon/index.js';
+export * as Control from './Control/index.js';
+export { NavTree } from './NavTree/index.js';
+export { Stack } from './Stack/index.js';

package/dist/ui/styles/fonts.css

@@ -0,0 +1,87 @@
+/* Figtree — variable font (300–900) */
+@font-face {
+	font-family: 'Figtree';
+	font-style: normal;
+	font-weight: 300 900;
+	font-display: swap;
+	src: url('./fonts/figtree-latin.woff2') format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
+		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+	font-family: 'Figtree';
+	font-style: normal;
+	font-weight: 300 900;
+	font-display: swap;
+	src: url('./fonts/figtree-latin-ext.woff2') format('woff2');
+	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+		U+A720-A7FF;
+}
+@font-face {
+	font-family: 'Figtree';
+	font-style: italic;
+	font-weight: 300 900;
+	font-display: swap;
+	src: url('./fonts/figtree-italic-latin.woff2') format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
+		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+	font-family: 'Figtree';
+	font-style: italic;
+	font-weight: 300 900;
+	font-display: swap;
+	src: url('./fonts/figtree-italic-latin-ext.woff2') format('woff2');
+	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+		U+A720-A7FF;
+}
+
+/* JetBrains Mono — variable font (100–800) */
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: normal;
+	font-weight: 100 800;
+	font-display: swap;
+	src: url('./fonts/jetbrains-mono-latin.woff2') format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
+		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: normal;
+	font-weight: 100 800;
+	font-display: swap;
+	src: url('./fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
+	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+		U+A720-A7FF;
+}
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: italic;
+	font-weight: 100 800;
+	font-display: swap;
+	src: url('./fonts/jetbrains-mono-italic-latin.woff2') format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
+		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: italic;
+	font-weight: 100 800;
+	font-display: swap;
+	src: url('./fonts/jetbrains-mono-italic-latin-ext.woff2') format('woff2');
+	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+		U+A720-A7FF;
+}