bref-ui 0.0.13 → 0.1.0

package/README.md

@@ -63,6 +63,7 @@ Bref handles:
   - [x] Pulsing Dots
   - [x] Morphing Shapes
   - [x] Textual
+- [x] Tree View
 - [ ] Input
 - [ ] Textarea
 - [ ] Avatar

package/dist/base/index.d.ts

@@ -3,3 +3,4 @@ export * from './icon/index.ts';
 export * from './theme/index.ts';
 export * from './button/index.ts';
 export * from './loading/index.ts';
+export * from './tree-view/index.ts';

package/dist/base/index.js

@@ -3,3 +3,4 @@ export * from "./icon/index.js";
 export * from "./theme/index.js";
 export * from "./button/index.js";
 export * from "./loading/index.js";
+export * from "./tree-view/index.js";

package/dist/base/theme/theme.svelte

@@ -51,8 +51,7 @@
 		color: var(--color-foreground);
 	}
 
-	:global(body),
-	:global(main) {
+	:global(body) {
 		background-color: var(--color-background);
 	}
 

package/dist/base/tree-view/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TreeView } from './tree-view.svelte';
+export { default as TreeNode } from './tree-node.svelte';
+export * from './types.ts';

package/dist/base/tree-view/index.js

@@ -0,0 +1,3 @@
+export { default as TreeView } from './tree-view.svelte';
+export { default as TreeNode } from './tree-node.svelte';
+export * from "./types.js";

package/dist/base/tree-view/tree-node.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type { TreeNodeProps } from './types.js';
+	import Icon from '../icon/icon.svelte';
+	import TreeNode from './tree-node.svelte';
+	const { node, level, size, onSelect, selectedIds, filledIcon, wide }: TreeNodeProps = $props();
+
+	let expanded: boolean = $state(false);
+	let selected: boolean = $derived(selectedIds?.has(node.id) ?? false);
+
+	const hasChildren = $derived(node.children && node.children.length > 0);
+
+	const toggleExpand = (e: MouseEvent) => {
+		e.stopPropagation();
+		if (hasChildren) expanded = !expanded;
+	};
+
+	const handleSelect = () => onSelect(node.id);
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class={size}
+	class:selected
+	style:padding-left="calc({level} * var(--tree-indent))"
+	onclick={handleSelect}
+	class:wide
+>
+	{#if hasChildren}
+		<button class:expanded onclick={toggleExpand}>
+			<Icon name="chevron_right" {size} color={selected ? 'primary' : undefined} />
+		</button>
+	{:else}
+		<span class="spacer"></span>
+	{/if}
+
+	{#if node.icon}
+		<Icon
+			name={node.icon}
+			filled={selected || filledIcon}
+			{size}
+			color={selected ? 'primary' : undefined}
+		/>
+	{/if}
+
+	<span>{node.label}</span>
+</div>
+
+{#if expanded && hasChildren}
+	{#each node.children as child (child.id)}
+		<TreeNode node={child} level={level + 1} {size} {onSelect} {selectedIds} {filledIcon} {wide} />
+	{/each}
+{/if}
+
+<style>
+	div,
+	span,
+	button {
+		transition: all 0.1s ease-in-out;
+	}
+
+	div {
+		--tree-indent: 1em;
+		display: flex;
+		align-items: center;
+		padding: 0.25em 0.5em;
+		gap: 0.25em;
+		border-radius: var(--border-radius);
+		cursor: pointer;
+	}
+
+	div:hover {
+		background-color: color-mix(in srgb, var(--color-foreground) 10%, transparent);
+	}
+
+	.selected {
+		background-color: var(--color-primary-soft);
+	}
+	.selected:hover {
+		background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-primary-soft));
+	}
+
+	.selected span {
+		color: var(--color-primary);
+	}
+	span {
+		user-select: none;
+	}
+
+	button {
+		all: unset;
+		display: flex;
+		padding: 0.25em;
+		cursor: pointer;
+	}
+
+	button.expanded {
+		transform: rotate(90deg);
+	}
+
+	.spacer {
+		width: 1em;
+	}
+
+	.wide {
+		width: 100%;
+	}
+</style>

package/dist/base/tree-view/tree-node.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { TreeNodeProps } from './types.ts';
+import TreeNode from './tree-node.svelte';
+declare const TreeNode: import("svelte").Component<TreeNodeProps, {}, "">;
+type TreeNode = ReturnType<typeof TreeNode>;
+export default TreeNode;

package/dist/base/tree-view/tree-view.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { TreeViewProps } from './types.js';
+	import TreeNode from './tree-node.svelte';
+
+	let { data, size = 'medium', onSelect, selectedIds, wide, filledIcon }: TreeViewProps = $props();
+</script>
+
+<div role="tree" class={size} class:wide>
+	{#each data as node (node.id)}
+		<TreeNode {node} level={0} {size} {onSelect} {selectedIds} {wide} {filledIcon} />
+	{/each}
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.wide {
+		width: 100%;
+	}
+
+	.x-small {
+		gap: 0.125rem;
+	}
+	.small {
+		gap: 0.25rem;
+	}
+	.medium {
+		gap: 0.5rem;
+	}
+	.large {
+		gap: 0.75rem;
+	}
+	.x-large {
+		gap: 1rem;
+	}
+</style>

package/dist/base/tree-view/tree-view.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TreeViewProps } from './types.ts';
+declare const TreeView: import("svelte").Component<TreeViewProps, {}, "">;
+type TreeView = ReturnType<typeof TreeView>;
+export default TreeView;

package/dist/base/tree-view/types.d.ts

@@ -0,0 +1,22 @@
+import type { Size } from '../types.ts';
+import type { IconName, IconProps } from '../icon/types.ts';
+export interface NodeDataProps {
+    id: string;
+    label: string;
+    icon?: IconName;
+    children?: NodeDataProps[];
+}
+export interface BaseTreeProps {
+    onSelect: (id: string) => void;
+    selectedIds: Set<string>;
+    size?: Size;
+    filledIcon?: IconProps['filled'];
+    wide?: boolean;
+}
+export interface TreeViewProps extends BaseTreeProps {
+    data: NodeDataProps[];
+}
+export interface TreeNodeProps extends BaseTreeProps {
+    node: NodeDataProps;
+    level: number;
+}

package/dist/base/tree-view/types.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/{demo-code-snippet.svelte → layout/code-snippet.svelte}

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import IconButton from '../../base/button/icon-button.svelte';
+
 	const {
 		snippet
 	}: {
@@ -7,7 +9,7 @@
 
 	let hasCopied = $state(false);
 
-	const onCopyClick = () => {
+	const onClick = () => {
 		navigator.clipboard.writeText(snippet).then(() => {
 			hasCopied = true;
 			setTimeout(() => (hasCopied = false), 3000);
@@ -19,17 +21,26 @@
 	<pre>
 		<code>{snippet}</code>
 	</pre>
-	<button onclick={onCopyClick}>copy</button>
+
+	<IconButton
+		{onClick}
+		size="x-small"
+		color={hasCopied ? 'success' : 'primary'}
+		variant={hasCopied ? 'filled' : 'soft'}
+        filled
+		name={hasCopied ? 'check' : 'copy_all'}
+		disabled={hasCopied}
+	/>
 </div>
 
 <style>
 	div {
 		display: flex;
 		width: 100%;
+		position: relative;
 		height: fit-content;
 		padding: 1rem;
-		gap: 1rem;
-		flex-direction: column;
+		gap: 0.5rem;
 		border-radius: 0.75rem;
 		background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
 		border: 1px solid color-mix(in srgb, var(--color-border) 30%, transparent);
@@ -48,6 +59,7 @@
 	code,
 	pre {
 		width: 100%;
+		flex: 1; align-self: center;
 		height: fit-content;
 	}
 	pre {
@@ -55,14 +67,4 @@
 		display: flex;
 		justify-content: flex-start;
 	}
-	button {
-		display: flex;
-		padding: 0.5rem 1rem;
-		width: 100%;
-		height: fit-content;
-		text-transform: capitalize;
-		align-items: center;
-		cursor: pointer;
-		justify-content: center;
-	}
 </style>

package/dist/internal/layout/code-snippet.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    snippet: string;
+};
+declare const CodeSnippet: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeSnippet = ReturnType<typeof CodeSnippet>;
+export default CodeSnippet;

package/dist/internal/layout/header.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import Icon from '../../base/icon/icon.svelte';
+	import { PAGES, type PageProps } from '../layout/types.js';
+	import { page } from '$app/state';
+
+	const { title, description, icon } = $derived.by((): PageProps => {
+		if (page.status !== 200) {
+			return {
+				title: 'Error: ' + page.status,
+				description: page.error?.message || 'An unexpected error occurred.',
+				icon: 'error',
+				href: ''
+			};
+		}
+		const firstPage = PAGES[0];
+		const allPages = PAGES.flatMap((p) => [p, ...(p.children || [])]);
+		const currentPage = allPages.find((p) => page.url.pathname.endsWith(p.href));
+		return currentPage || firstPage;
+	});
+</script>
+
+<div class="container">
+	<div>
+		<Icon name={icon} size="large" color="primary" />
+		<h1>{title}</h1>
+	</div>
+	<p>{description}</p>
+</div>
+
+<style>
+	div {
+		display: flex;
+		align-items: center;
+		min-height: fit-content;
+		height: fit-content;
+	}
+	.container {
+		width: 100%;
+		padding: 2rem;
+		flex-direction: column;
+		align-items: flex-start;
+		flex-shrink: 0;
+	}
+	p {
+		opacity: 0.8;
+	}
+	h1 {
+		font-size: 3rem;
+	}
+</style>

package/dist/internal/layout/header.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Header: import("svelte").Component<Record<string, never>, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/internal/{demo-section.svelte → layout/section.svelte}

@@ -14,7 +14,7 @@
 	} = $props();
 </script>
 
-<section {id}>
+<section {id} class="container">
 	{#if title}
 		<h2>{title}</h2>
 	{/if}
@@ -30,18 +30,9 @@
 		gap: 1rem;
 		align-items: center;
 		flex-direction: column;
-		background-color: color-mix(in srgb, var(--color-background) 90%, transparent);
-		backdrop-filter: blur(2rem);
 		padding: 2rem;
 		width: 100%;
-		max-width: 50rem;
-		transition: all 0.3s ease;
-		border-radius: 2rem;
-		border: 1px solid color-mix(in srgb, var(--color-foreground) 10%, transparent);
-	}
-	section:hover {
-		border: 1px solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
-		box-shadow: 0 0 3rem color-mix(in srgb, var(--color-background) 50%, transparent);
+		flex-shrink: 0;
 	}
 	h2 {
 		font-size: 2rem;

package/dist/internal/layout/section.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    title?: string;
+    description?: string;
+    id?: string;
+};
+declare const Section: import("svelte").Component<$$ComponentProps, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/internal/layout/sidebar/footer.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import IconButton from '../../../base/button/icon-button.svelte';
+	import {
+		type ThemeMode,
+		initializeThemeMode,
+		toggleThemeMode
+	} from '../../../base/theme/index.js';
+	import { untrack } from 'svelte';
+	import Icon from '../../../base/icon/icon.svelte';
+
+	let themeMode: ThemeMode = $state('light');
+
+	$effect.pre(() => {
+		untrack(() => {
+			themeMode = initializeThemeMode();
+		});
+	});
+
+	const onClick = () => {
+		const newMode = themeMode === 'dark' ? 'light' : 'dark';
+		toggleThemeMode(newMode);
+		themeMode = newMode;
+	};
+</script>
+
+<div>
+	<IconButton
+		variant="ghost"
+		name={themeMode === 'dark' ? 'light_mode' : 'dark_mode'}
+		ariaLabel="Toggle theme"
+		{onClick}
+	/>
+	<span>
+		Made with <Icon name="favorite" color="danger" filled size="x-small" /> in Paris, by
+		<a href="https://github.com/feuersteiner" target="_blank" rel="noopener noreferrer"
+			>Feuerstein.</a
+		>
+	</span>
+</div>
+
+<style>
+	div {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: fit-content;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding: 1rem;
+	}
+
+	a {
+		text-decoration: none;
+		color: inherit;
+		display: inline-block;
+		width: 5rem;
+		height: 1.5rem;
+	}
+
+	a:hover {
+		font-weight: bold;
+	}
+
+	span {
+		font-size: 0.75rem;
+		text-align: center;
+		align-items: center;
+		color: color-mix(in srgb, var(--color-foreground) 50%, var(--color-background));
+	}
+</style>

package/dist/internal/layout/sidebar/footer.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Footer: import("svelte").Component<Record<string, never>, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/internal/layout/sidebar/logo.svelte

@@ -0,0 +1,38 @@
+<div class="logo">
+	<div class="icon">
+		<img src={'favicon.svg'} alt="Logo" />
+		<span>Bref</span>
+	</div>
+	
+	<p>A truly Svelte-esque UI Component Library.</p>
+</div>
+
+<style>
+	div {
+		display: flex;
+		gap: 1rem;
+	}
+	.icon {
+		align-items: center;
+	}
+	.logo {
+		padding: 1rem;
+		flex-direction: column;
+		width: 100%;
+		height: fit-content;
+		background-color: color-mix(in srgb, var(--color-foreground) 5%, transparent);
+	}
+	span {
+		font-size: 2rem;
+		font-family: 'Meow Script', cursive;
+	}
+	p {
+		font-size: 0.75rem;
+		opacity: 0.7;
+		font-weight: 300;
+	}
+	img {
+		width: 3rem;
+		height: 3rem;
+	}
+</style>

package/dist/internal/{demo-header.svelte.d.ts → layout/sidebar/logo.svelte.d.ts}

@@ -1,5 +1,18 @@
+export default Logo;
+type Logo = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Logo: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
 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> & {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -11,8 +24,3 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const DemoHeader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DemoHeader = InstanceType<typeof DemoHeader>;
-export default DemoHeader;

package/dist/internal/layout/sidebar/sidebar.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import Logo from './logo.svelte';
+	import Footer from './footer.svelte';
+	import { PAGES, type PageProps } from '../types.js';
+	import { page } from '$app/state';
+	import TreeView from '../../../base/tree-view/tree-view.svelte';
+	import type { NodeDataProps } from '../../../index.js';
+	import { goto } from '$app/navigation';
+
+	const pageToNode = (page: PageProps): NodeDataProps => ({
+		id: page.href,
+		label: page.title,
+		icon: page.icon,
+		children: page.children?.map(pageToNode)
+	});
+	const selectedPage = $derived.by(() => {
+		const allPages = PAGES.flatMap((p) => [p, ...(p.children || [])]);
+		return allPages.find((p) => page.url.pathname.endsWith(p.href)) ?? PAGES[0];
+	});
+	const selectedIds = $derived(new Set([selectedPage.href]));
+	const onSelect = (href: string) => goto(href);
+</script>
+
+<div class="container">
+	<Logo />
+	<div class="content">
+		<TreeView wide size="small" {selectedIds} {onSelect} data={PAGES.map(pageToNode)} />
+	</div>
+	<Footer />
+</div>
+
+<style>
+	div {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		width: 100%;
+	}
+	.container {
+		max-width: 15rem;
+		width: 15rem;
+		/* height: 100%; */
+	}
+	.content {
+		flex: 1;
+		width: 100%;
+		justify-content: flex-start;
+		align-items: flex-start;
+		padding: 1rem;
+	}
+</style>

package/dist/internal/layout/sidebar/sidebar.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Sidebar: import("svelte").Component<Record<string, never>, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/internal/layout/types.d.ts

@@ -0,0 +1,9 @@
+import type { IconName } from '../../base/icon/types.ts';
+export interface PageProps {
+    title: string;
+    description: string;
+    href: string;
+    icon: IconName;
+    children?: PageProps[];
+}
+export declare const PAGES: PageProps[];