bref-ui 0.2.4 → 0.2.6

package/README.md

@@ -62,6 +62,7 @@ Bref handles:
   - [x] Morphing Shapes
   - [x] Textual
 - [x] Tree View
+- [x] Pill
 - [-] Inputs
   - [x] Text Input (single line)
   - [x] Area Text Input

package/dist/base/index.d.ts

@@ -7,3 +7,5 @@ export * from './tree-view/index.ts';
 export * from './text-input/index.ts';
 export * from './slider/index.ts';
 export * from './progress-bar/index.ts';
+export * from './pill/index.ts';
+export * from './select/index.ts';

package/dist/base/index.js

@@ -7,3 +7,5 @@ export * from "./tree-view/index.js";
 export * from "./text-input/index.js";
 export * from "./slider/index.js";
 export * from "./progress-bar/index.js";
+export * from "./pill/index.js";
+export * from "./select/index.js";

package/dist/base/pill/index.d.ts

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

package/dist/base/pill/index.js

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

package/dist/base/pill/pill.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import type { PillProps } from './types.js';
+	import Icon from '../icon/icon.svelte';
+
+	const {
+		label,
+		size = 'medium',
+		color = 'primary',
+		variant = 'filled',
+		icon
+	}: PillProps = $props();
+</script>
+
+<div class={`${size} ${color} ${variant}`}>
+	{#if icon}
+		<Icon contrastMode={variant === 'filled'} {color} {...icon} {size} />
+	{/if}
+	<span>{label}</span>
+</div>
+
+<style>
+	div {
+		/* Size defaults (medium) */
+		--internal-pill-padding-y: calc(var(--spacing) * 0.375);
+		--internal-pill-padding-x: calc(var(--spacing) * 0.75);
+		--internal-pill-font-size: 1rem;
+
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		flex-shrink: 0;
+		width: fit-content;
+		min-width: fit-content;
+		height: fit-content;
+		min-height: fit-content;
+		gap: 0.35em;
+		padding: var(--internal-pill-padding-y) var(--internal-pill-padding-x);
+		font-size: var(--internal-pill-font-size);
+		border-radius: 4rem;
+	}
+
+	span {
+		white-space: nowrap;
+		color: inherit;
+	}
+
+	/* Sizes - compact padding that scales proportionally */
+	.x-small {
+		--internal-pill-padding-y: calc(var(--spacing) * 0.125);
+		--internal-pill-padding-x: calc(var(--spacing) * 0.375);
+		--internal-pill-font-size: 0.75rem;
+	}
+
+	.small {
+		--internal-pill-padding-y: calc(var(--spacing) * 0.25);
+		--internal-pill-padding-x: calc(var(--spacing) * 0.5);
+		--internal-pill-font-size: 0.875rem;
+	}
+
+	.medium {
+		--internal-pill-padding-y: calc(var(--spacing) * 0.375);
+		--internal-pill-padding-x: calc(var(--spacing) * 0.75);
+		--internal-pill-font-size: 1rem;
+	}
+
+	.large {
+		--internal-pill-padding-y: calc(var(--spacing) * 0.5);
+		--internal-pill-padding-x: calc(var(--spacing) * 1);
+		--internal-pill-font-size: 1.125rem;
+	}
+
+	.x-large {
+		--internal-pill-padding-y: calc(var(--spacing) * 0.625);
+		--internal-pill-padding-x: calc(var(--spacing) * 1.25);
+		--internal-pill-font-size: 1.25rem;
+	}
+
+	/* Color mappings - set current color variables per color class */
+	.primary {
+		--internal-current-color: var(--color-primary);
+		--internal-current-color-soft: var(--color-primary-soft);
+		--internal-current-contrast: var(--color-primary-contrast);
+	}
+
+	.secondary {
+		--internal-current-color: var(--color-secondary);
+		--internal-current-color-soft: var(--color-secondary-soft);
+		--internal-current-contrast: var(--color-secondary-contrast);
+	}
+
+	.success {
+		--internal-current-color: var(--color-success);
+		--internal-current-color-soft: var(--color-success-soft);
+		--internal-current-contrast: var(--color-success-contrast);
+	}
+
+	.warning {
+		--internal-current-color: var(--color-warning);
+		--internal-current-color-soft: var(--color-warning-soft);
+		--internal-current-contrast: var(--color-warning-contrast);
+	}
+
+	.danger {
+		--internal-current-color: var(--color-danger);
+		--internal-current-color-soft: var(--color-danger-soft);
+		--internal-current-contrast: var(--color-danger-contrast);
+	}
+
+	.info {
+		--internal-current-color: var(--color-info);
+		--internal-current-color-soft: var(--color-info-soft);
+		--internal-current-contrast: var(--color-info-contrast);
+	}
+
+	.foreground {
+		--internal-current-color: var(--color-foreground);
+		--internal-current-color-soft: var(--color-background-saturated);
+		--internal-current-contrast: var(--color-background);
+	}
+
+	.background {
+		--internal-current-color: var(--color-background);
+		--internal-current-color-soft: var(--color-foreground-saturated);
+		--internal-current-contrast: var(--color-foreground);
+	}
+
+	/* Filled variant */
+	.filled {
+		background-color: var(--internal-current-color);
+		color: var(--internal-current-contrast);
+	}
+
+	/* Soft variant */
+	.soft {
+		background-color: var(--internal-current-color-soft);
+		color: var(--internal-current-color);
+	}
+
+	/* Ghost variant */
+	.ghost {
+		background-color: transparent;
+		color: var(--internal-current-color);
+	}
+</style>

package/dist/base/pill/pill.svelte.d.ts

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

package/dist/base/pill/types.d.ts

@@ -0,0 +1,9 @@
+import type { IconProps } from '../icon/types.ts';
+import type { Color, Size, Variant } from '../types.ts';
+export interface PillProps {
+    label: string;
+    size?: Size;
+    color?: Color;
+    variant?: Variant;
+    icon?: Pick<IconProps, 'name' | 'filled' | 'ariaLabel'>;
+}

package/dist/base/pill/types.js

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

package/dist/base/progress-bar/progress-bar.svelte

@@ -28,7 +28,6 @@
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- aria-valuenow={isIndeterminate ? undefined : clampedValue} -->
 <div
 	class={`${size} ${color}`}
 	class:wide
@@ -38,6 +37,7 @@
 	role="progressbar"
 	aria-valuemin={0}
 	aria-valuemax={100}
+	aria-valuetext={isIndeterminate ? 'Loading' : `${value}%`}
 	onclick={isClickable ? handleClick : undefined}
 >
 	<span class:indeterminate={isIndeterminate} style:width={progressWidth}></span>
@@ -50,7 +50,9 @@
 
 		position: relative;
 		display: flex;
-		width: 12rem;
+		min-width: 4rem;
+		width: 8rem;
+		max-width: 100%;
 		height: var(--internal-progress-height);
 		background-color: var(--internal-current-color-soft);
 		border-radius: var(--internal-progress-radius);

package/dist/base/select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Select } from './select.svelte';
+export * from './types.ts';

package/dist/base/select/index.js

@@ -0,0 +1,2 @@
+export { default as Select } from './select.svelte';
+export * from "./types.js";

package/dist/base/select/select.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import Icon from '../icon/icon.svelte';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import type { SelectProps } from './types.js';
+
+	const {
+		value,
+		options,
+		placeholder = 'Select...',
+		disabled = false,
+		onChange,
+		wide = false,
+		...rest
+	}: SelectProps & Omit<SvelteHTMLElements['select'], 'value'> = $props();
+
+	const handleChange = (e: Event) => {
+		const newValue = (e.currentTarget as HTMLSelectElement).value;
+		onChange(newValue);
+	};
+
+	const selectedOption = $derived(options.find((opt) => opt.value === value));
+</script>
+
+<div class="select-container" class:wide>
+	<div class="select-wrapper" class:wide class:disabled>
+		{#if selectedOption?.icon}
+			<Icon name={selectedOption.icon} size="small" />
+		{/if}
+		<select {...rest} {disabled} {value} onchange={handleChange}>
+			{#if placeholder && !value}
+				<option value="" disabled selected>{placeholder}</option>
+			{/if}
+			{#each options as option}
+				<option value={option.value}>
+					{option.label}
+				</option>
+			{/each}
+		</select>
+		<Icon name="keyboard_arrow_down" size="small" />
+	</div>
+</div>
+
+<style>
+	.select-container {
+		display: inline-flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		margin: 3px;
+		flex-shrink: 0;
+	}
+
+	.select-container.wide {
+		width: 100%;
+		flex-shrink: 1;
+	}
+
+	.select-wrapper {
+		--internal-select-bg-opacity: 5%;
+		--internal-select-hover-opacity: 7%;
+		--internal-select-disabled-opacity: 0.5;
+		--internal-select-padding-y: calc(var(--spacing) * 0.5);
+		--internal-select-padding-x: calc(var(--spacing) * 0.75);
+		--internal-select-radius: calc(var(--border-radius) * 1);
+
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: var(--internal-select-padding-y) var(--internal-select-padding-x);
+		border-radius: var(--internal-select-radius);
+		background-color: color-mix(
+			in srgb,
+			var(--color-foreground) var(--internal-select-bg-opacity),
+			transparent
+		);
+		transition:
+			background-color 0.15s ease,
+			outline-color 0.15s ease;
+	}
+
+	.select-wrapper:hover:not(.disabled) {
+		background-color: color-mix(
+			in srgb,
+			var(--color-foreground) var(--internal-select-hover-opacity),
+			transparent
+		);
+	}
+
+	.select-wrapper:focus-within {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 1px;
+		background-color: color-mix(
+			in srgb,
+			var(--color-foreground) var(--internal-select-hover-opacity),
+			transparent
+		);
+	}
+
+	.select-wrapper.wide {
+		width: 100%;
+	}
+
+	.disabled {
+		opacity: var(--internal-select-disabled-opacity);
+		cursor: not-allowed;
+	}
+
+	.disabled select {
+		cursor: not-allowed;
+	}
+
+	select {
+		flex: 1;
+		border: none;
+		background: transparent;
+		color: var(--color-foreground);
+		font-size: 1rem;
+		outline: none;
+		min-width: 0;
+		cursor: pointer;
+		appearance: base-select;
+	}
+
+	select::picker(select) {
+		appearance: base-select;
+		border: none;
+		border-radius: var(--internal-select-radius);
+		background-color: var(--color-background);
+		box-shadow: 0 4px 16px color-mix(in srgb, var(--color-foreground) 15%, transparent);
+		padding: calc(var(--spacing) * 0.5);
+	}
+
+	select option {
+		padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 0.75);
+		border-radius: calc(var(--border-radius) * 0.5);
+		background-color: transparent;
+		color: var(--color-foreground);
+		cursor: pointer;
+		transition: background-color 0.1s ease;
+	}
+
+	select option:hover {
+		background-color: color-mix(in srgb, var(--color-foreground) 5%, transparent);
+	}
+
+	select option:checked {
+		background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
+	}
+</style>

package/dist/base/select/select.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { SelectProps } from './types.ts';
+type $$ComponentProps = SelectProps & Omit<SvelteHTMLElements['select'], 'value'>;
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/base/select/types.d.ts

@@ -0,0 +1,14 @@
+import type { IconName } from '../icon/types.ts';
+export interface SelectOptionProps {
+    value: string;
+    label: string;
+    icon?: IconName;
+}
+export interface SelectProps {
+    value: string;
+    options: SelectOptionProps[];
+    placeholder?: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+    wide?: boolean;
+}

package/dist/base/select/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bref-ui",
-	"version": "0.2.4",
+	"version": "0.2.6",
 	"description": "A Svelte UI component library using scoped CSS - minimal and flexible",
 	"license": "MIT",
 	"author": "feuerstein",

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

@@ -1,71 +0,0 @@
-<script lang="ts">
-	import IconButton from '../../base/button/icon-button.svelte';
-
-	const {
-		snippet
-	}: {
-		snippet: string;
-	} = $props();
-
-	let hasCopied = $state(false);
-
-	const onClick = () => {
-		navigator.clipboard.writeText(snippet).then(() => {
-			hasCopied = true;
-			setTimeout(() => (hasCopied = false), 3000);
-		});
-	};
-</script>
-
-<div>
-	<pre>
-		<code>{snippet}</code>
-	</pre>
-
-	<IconButton
-		{onClick}
-		size="x-small"
-		color={hasCopied ? 'success' : 'foreground'}
-		variant={hasCopied ? 'filled' : 'ghost'}
-		rounded
-		name={hasCopied ? 'check' : 'copy_all'}
-		disabled={hasCopied}
-	/>
-</div>
-
-<style>
-	div {
-		display: flex;
-		width: 100%;
-		position: relative;
-		height: fit-content;
-		padding: 1rem;
-		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);
-		backdrop-filter: blur(8px);
-	}
-	code {
-		white-space: pre-wrap;
-		word-break: break-word;
-		flex-grow: 1;
-		font-family: monospace;
-		font-weight: 400;
-		text-align: left;
-		opacity: 60%;
-		font-size: small;
-	}
-	code,
-	pre {
-		width: 100%;
-		flex: 1;
-		align-self: center;
-		height: fit-content;
-	}
-	pre {
-		align-items: flex-start;
-		display: flex;
-		justify-content: flex-start;
-	}
-</style>

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

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

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

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

package/dist/internal/layout/section.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	let {
-		children,
-		title,
-		description,
-		id
-	}: {
-		children: Snippet;
-		title?: string;
-		description?: string;
-		id?: string;
-	} = $props();
-</script>
-
-<section {id} class="container">
-	{#if title}
-		<h2>{title}</h2>
-	{/if}
-	{#if description}
-		<p>{description}</p>
-	{/if}
-	{@render children()}
-</section>
-
-<style>
-	section {
-		display: flex;
-		gap: 1rem;
-		align-items: center;
-		flex-direction: column;
-		padding: 2rem;
-		width: 100%;
-		flex-shrink: 0;
-	}
-	h2 {
-		font-size: 2rem;
-	}
-	p {
-		font-size: 1.1rem;
-	}
-</style>

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

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

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

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

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

@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { asset } from '$app/paths';
-</script>
-
-<div class="logo">
-	<div class="icon">
-		<img src={asset('/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/layout/sidebar/logo.svelte.d.ts

@@ -1,18 +0,0 @@
-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 Logo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Logo = InstanceType<typeof Logo>;
-export default Logo;

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

@@ -1,59 +0,0 @@
-<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 navigateTo from '../../../internal/navigate.js';
-
-	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) => navigateTo(href);
-</script>
-
-<div class="container">
-	<Logo />
-	<div class="content">
-		<TreeView
-			wide
-			size="small"
-			{selectedIds}
-			{onSelect}
-			data={PAGES.map(pageToNode)}
-			expandOnSelect
-		/>
-	</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

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

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

@@ -1,9 +0,0 @@
-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[];

package/dist/internal/layout/types.js

@@ -1,116 +0,0 @@
-export const PAGES = [
-    {
-        title: 'Getting Started',
-        description: 'Installation and setup guide',
-        href: '/',
-        icon: 'rocket_launch'
-    },
-    {
-        title: 'Theming',
-        description: "Bref's theming system uses CSS custom properties for complete flexibility",
-        href: '/theming',
-        icon: 'palette'
-    },
-    {
-        title: 'Generic Types',
-        description: 'Shared TypeScript types used across components for consistent styling and behavior',
-        href: '/types',
-        icon: 'data_object'
-    },
-    {
-        title: 'Icon',
-        description: 'Icons with customizable size, color, and fill. Based on Google Material Symbols',
-        href: '/icon',
-        icon: 'emoji_symbols'
-    },
-    {
-        title: 'Buttons',
-        description: 'Full-featured buttons with labels and icons, or compact icon-only buttons',
-        href: '/buttons',
-        icon: 'touch_app',
-        children: [
-            {
-                title: 'Button',
-                description: 'Buttons with customizable size, color, variant, and optional icons',
-                href: '/buttons/button',
-                icon: 'buttons_alt'
-            },
-            {
-                title: 'Icon Button',
-                description: 'Icon buttons with customizable size, color, variant, and shape',
-                href: '/buttons/icon-button',
-                icon: 'adjust'
-            }
-        ]
-    },
-    {
-        title: 'Inputs',
-        description: 'Input fields for text, numbers, and selections',
-        href: '/inputs',
-        icon: 'input',
-        children: [
-            {
-                title: 'Text Input',
-                description: 'Single-line text input fields with labels, placeholders, and icons',
-                href: '/inputs/text-input',
-                icon: 'short_text'
-            },
-            {
-                title: 'Area Text Input',
-                description: 'Multi-line text area input fields with labels and placeholders',
-                href: '/inputs/area-text-input',
-                icon: 'notes'
-            },
-            {
-                title: 'Slider',
-                description: 'Range slider for selecting numeric values within a range',
-                href: '/inputs/slider',
-                icon: 'tune'
-            }
-        ]
-    },
-    {
-        title: 'Progress / Loading',
-        description: 'Progress indicators and loading animations',
-        href: '/progress',
-        icon: 'hourglass_empty',
-        children: [
-            {
-                title: 'Progress Bar',
-                description: 'A progress bar with determinate and indeterminate states',
-                href: '/progress/progress-bar',
-                icon: 'linear_scale'
-            },
-            {
-                title: 'Circular',
-                description: 'A classic spinning circle indicator for loading states',
-                href: '/progress/circular',
-                icon: 'autorenew'
-            },
-            {
-                title: 'Pulsing Dots',
-                description: 'Three dots that pulse in sequence to indicate loading',
-                href: '/progress/pulsing-dots',
-                icon: 'more_horiz'
-            },
-            {
-                title: 'Morphing Shapes',
-                description: 'A shape that transforms through organic forms while rotating',
-                href: '/progress/morphing-shapes',
-                icon: 'animation'
-            },
-            {
-                title: 'Textual',
-                description: 'Animated text with a typewriter effect that cycles through words',
-                href: '/progress/textual',
-                icon: 'text_fields'
-            }
-        ]
-    },
-    {
-        title: 'Tree View',
-        description: 'A hierarchical tree component for displaying nested data structures',
-        href: '/tree-view',
-        icon: 'account_tree'
-    }
-];

package/dist/internal/navigate.d.ts

@@ -1,2 +0,0 @@
-declare const navigateTo: (href: string) => any;
-export default navigateTo;

package/dist/internal/navigate.js

@@ -1,4 +0,0 @@
-import { goto } from "$app/navigation";
-import { resolve } from "$app/paths";
-const navigateTo = (href) => goto(resolve(href));
-export default navigateTo;